├── .nvmrc
├── .npmrc
├── static
└── banner.jpg
├── src
├── @lekoarts
│ └── gatsby-theme-styleguide
│ │ ├── template.tsx
│ │ └── layout.tsx
├── hooks
│ └── use-site-metadata.tsx
├── components
│ └── seo.tsx
└── gatsby-plugin-theme-ui
│ └── index.js
├── .github
└── FUNDING.yml
├── tsconfig.json
├── LICENSE
├── .gitignore
├── package.json
├── gatsby-config.ts
├── README.md
└── CHANGELOG.md
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | legacy-peer-deps=true
2 |
--------------------------------------------------------------------------------
/static/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LekoArts/gatsby-starter-styleguide/HEAD/static/banner.jpg
--------------------------------------------------------------------------------
/src/@lekoarts/gatsby-theme-styleguide/template.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import type { HeadFC } from "gatsby"
3 | import ThemeTemplate from "@lekoarts/gatsby-theme-styleguide/src/template"
4 | import Seo from "../../components/seo"
5 |
6 | export default ThemeTemplate
7 |
8 | export const Head: HeadFC = () =>
9 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: [LekoArts]
4 | patreon: # Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: lekoarts
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | custom: # Replace with a single custom sponsorship URL
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "lib": ["dom", "esnext"],
5 | "jsx": "react-jsx",
6 | "jsxImportSource": "theme-ui",
7 | "module": "esnext",
8 | "moduleResolution": "node",
9 | "esModuleInterop": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "strict": true,
12 | "skipLibCheck": true
13 | },
14 | "include": [
15 | "./src/**/*",
16 | "./gatsby-node.ts",
17 | "./gatsby-config.ts",
18 | "./plugins/**/*"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/src/@lekoarts/gatsby-theme-styleguide/layout.tsx:
--------------------------------------------------------------------------------
1 | /** @jsx jsx */
2 | import * as React from "react"
3 | import { jsx } from "theme-ui"
4 | import { Global } from "@emotion/react"
5 |
6 | const Layout = ({ children }: { children: React.ReactNode }) => (
7 |
8 | ({
10 | "*": {
11 | boxSizing: `border-box`,
12 | },
13 | })}
14 | />
15 | {children}
16 |
17 | )
18 |
19 | export default Layout
20 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The BSD Zero Clause License (0BSD)
2 |
3 | Copyright (c) 2023 LekoArts
4 |
5 | Permission to use, copy, modify, and/or distribute this software for any
6 | purpose with or without fee is hereby granted.
7 |
8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
14 | PERFORMANCE OF THIS SOFTWARE.
--------------------------------------------------------------------------------
/src/hooks/use-site-metadata.tsx:
--------------------------------------------------------------------------------
1 | import { graphql, useStaticQuery } from "gatsby"
2 |
3 | interface ISiteMetadata {
4 | site: {
5 | siteMetadata: {
6 | siteTitle: string
7 | siteTitleAlt: string
8 | siteHeadline: string
9 | siteUrl: string
10 | siteDescription: string
11 | siteImage: string
12 | siteLanguage: string
13 | author: string
14 | }
15 | }
16 | }
17 |
18 | const useSiteMetadata = () => {
19 | const data = useStaticQuery(graphql`
20 | query {
21 | site {
22 | siteMetadata {
23 | siteTitle
24 | siteTitleAlt
25 | siteHeadline
26 | siteUrl
27 | siteDescription
28 | siteImage
29 | siteLanguage
30 | author
31 | }
32 | }
33 | }
34 | `)
35 |
36 | return data.site.siteMetadata
37 | }
38 |
39 | export default useSiteMetadata
40 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules
37 | jspm_packages
38 | **/node_modules/**
39 |
40 | # Typescript v1 declaration files
41 | typings/
42 |
43 | # Optional npm cache directory
44 | .npm
45 |
46 | # Optional eslint cache
47 | .eslintcache
48 |
49 | # Optional REPL history
50 | .node_repl_history
51 |
52 | # Output of 'npm pack'
53 | *.tgz
54 |
55 | # Yarn Integrity file
56 | .yarn-integrity
57 |
58 | # dotenv environment variables file
59 | .env
60 | .env.*
61 | !.env.example
62 |
63 | .cache
64 | **/.cache
65 | public
66 |
67 | .idea
68 | .vscode
69 | .DS_Store
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "styleguide",
4 | "description": "Instantly create a styleguide page based on your Theme UI configuration. Zero-config — just install the theme and see your Theme UI config displayed in a beautiful manner.",
5 | "version": "0.2.21",
6 | "author": "LekoArts",
7 | "license": "0BSD",
8 | "starter-name": "gatsby-starter-styleguide",
9 | "scripts": {
10 | "build": "gatsby build",
11 | "develop": "gatsby develop",
12 | "develop:cypress": "cross-env CYPRESS_SUPPORT=y yarn develop",
13 | "build:cypress": "cross-env CYPRESS_SUPPORT=y yarn build",
14 | "start": "gatsby develop",
15 | "serve": "gatsby serve",
16 | "clean": "gatsby clean"
17 | },
18 | "dependencies": {
19 | "@emotion/react": "^11.14.0",
20 | "@lekoarts/gatsby-theme-styleguide": "^5.1.3",
21 | "@mdx-js/react": "^2.3.0",
22 | "@theme-ui/mdx": "~0.15.3",
23 | "gatsby": "^5.14.5",
24 | "gatsby-plugin-theme-ui": "~0.15.3",
25 | "gatsby-plugin-webpack-statoscope": "^1.0.3",
26 | "react": "^18.3.1",
27 | "react-dom": "^18.3.1",
28 | "theme-ui": "~0.15.3"
29 | },
30 | "devDependencies": {
31 | "@types/node": "^22.15.33",
32 | "@types/react": "^18.3.20",
33 | "@types/react-dom": "^18.3.7",
34 | "ajv": "^8.17.1",
35 | "cross-env": "^7.0.3",
36 | "typescript": "^5.8.3"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/gatsby-config.ts:
--------------------------------------------------------------------------------
1 | import type { GatsbyConfig, PluginRef } from "gatsby"
2 | import "dotenv/config"
3 |
4 | const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
5 |
6 | const config: GatsbyConfig = {
7 | siteMetadata: {
8 | siteTitle: `Styleguide`,
9 | siteTitleAlt: `Theme UI Styleguide`,
10 | siteHeadline: `Styleguide - Gatsby Theme from @lekoarts`,
11 | siteUrl: `https://theme-ui-styleguide.netlify.app`,
12 | siteDescription: `Instantly create a styleguide page based on your Theme UI configuration. Zero-config — just install the theme and see your Theme UI config displayed in a beautiful manner.`,
13 | siteImage: `/banner.jpg`,
14 | siteLanguage: `en`,
15 | author: `@lekoarts_de`,
16 | },
17 | trailingSlash: `always`,
18 | plugins: [
19 | `gatsby-plugin-theme-ui`,
20 | {
21 | resolve: `@lekoarts/gatsby-theme-styleguide`,
22 | // See the theme's README for all available options
23 | options: {
24 | basePath: `/`,
25 | },
26 | },
27 | // You can remove this plugin if you don't need it
28 | shouldAnalyseBundle && {
29 | resolve: `gatsby-plugin-webpack-statoscope`,
30 | options: {
31 | saveReportTo: `${__dirname}/public/.statoscope/_bundle.html`,
32 | saveStatsTo: `${__dirname}/public/.statoscope/_stats.json`,
33 | open: false,
34 | },
35 | },
36 | ].filter(Boolean) as Array,
37 | }
38 |
39 | export default config
40 |
--------------------------------------------------------------------------------
/src/components/seo.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { withPrefix } from "gatsby"
3 | import useSiteMetadata from "../hooks/use-site-metadata"
4 |
5 | interface ISeoProps {
6 | title?: string
7 | description?: string
8 | pathname?: string
9 | image?: string
10 | children?: React.ReactNode
11 | canonicalUrl?: string
12 | }
13 |
14 | const Seo = ({
15 | title = ``,
16 | description = ``,
17 | pathname = ``,
18 | image = ``,
19 | children = null,
20 | canonicalUrl = ``,
21 | }: ISeoProps) => {
22 | const site = useSiteMetadata()
23 |
24 | const {
25 | siteTitle,
26 | siteTitleAlt: defaultTitle,
27 | siteUrl,
28 | siteDescription: defaultDescription,
29 | siteImage: defaultImage,
30 | author,
31 | siteLanguage,
32 | } = site
33 |
34 | const seo = {
35 | title: title ? `${title} | ${siteTitle}` : defaultTitle,
36 | description: description || defaultDescription,
37 | url: `${siteUrl}${pathname || ``}`,
38 | image: `${siteUrl}${image || defaultImage}`,
39 | }
40 | return (
41 | <>
42 |
43 | {seo.title}
44 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | {canonicalUrl ? : null}
68 | {children}
69 |
70 | )
71 | }
72 |
73 | export default Seo
74 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
5 |
6 |
7 | Styleguide
8 |
9 |
10 |
11 |
12 | 
13 |
14 |
15 | 
16 |
17 |
18 | 
19 |
20 |
21 | 
22 |
23 |
24 |
25 | Instantly create a styleguide page based on your Theme UI configuration. Zero-config — just install the theme and see your Theme UI config displayed in a beautiful manner. Using the Gatsby Theme [`@lekoarts/gatsby-theme-styleguide`](https://github.com/LekoArts/gatsby-themes/tree/main/themes/gatsby-theme-styleguide).
26 |
27 | [**Demo Website**](https://theme-ui-styleguide.netlify.app)
28 |
29 | Also be sure to check out other [Free & Open Source Gatsby Themes](https://themes.lekoarts.de) and my [Personal Website](https://www.lekoarts.de?utm_source=styleguide&utm_medium=Starter).
30 |
31 | ## ✨ Features
32 |
33 | - Automatic styleguide based on your Theme UI configuration
34 | - Displays colors (individual and palettes), typography (font family, weights, sizes, headings), and a spacing scale
35 | - Uses [`@lekoarts/gatsby-theme-specimens`](https://github.com/LekoArts/gatsby-themes/tree/main/themes/gatsby-theme-specimens) under the hood. You can use components from it to extend your styleguide page
36 |
37 | ## ⏱️ Quick Start
38 |
39 | Deploy this starter with one click on [Netlify](https://app.netlify.com/signup):
40 |
41 | [
](https://app.netlify.com/start/deploy?repository=https://github.com/LekoArts/gatsby-starter-styleguide)
42 |
43 | ## 🚀 Getting Started
44 |
45 | ### 1. **Create a Gatsby site.**
46 |
47 | Use the Gatsby CLI to clone the site and install dependencies:
48 |
49 | ```sh
50 | npx gatsby new gatsby-starter-styleguide https://github.com/LekoArts/gatsby-starter-styleguide
51 | ```
52 |
53 | ### 2. **Navigate to your new project.**
54 |
55 | ```sh
56 | cd gatsby-starter-styleguide
57 | ```
58 |
59 | ### 3. **Open the code and start customizing!**
60 |
61 | Start the site by running `npm run develop`.
62 |
63 | Your site is now running at `http://localhost:8000`!
64 |
65 | If you want to learn more about how you can use a Gatsby starter that is configured with a Gatsby theme, you can check out this [shorter](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/using-a-gatsby-theme/) or [longer](https://www.gatsbyjs.com/tutorial/using-a-theme/) tutorial. The tutorials don't exactly apply to this starter however the concepts are the same.
66 |
67 | ## 📝 Using and modifying this starter
68 |
69 | **Important Note:** Please read the guide [Shadowing in Gatsby Themes](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/) to understand how to customize the underlying theme!
70 |
71 | This starter creates a new Gatsby site that installs and configures the theme [`@lekoarts/gatsby-theme-styleguide`](https://github.com/LekoArts/gatsby-themes/tree/main/themes/gatsby-theme-styleguide).
72 |
73 | Have a look at the theme's README and files to see what options are available and how you can shadow the various components. Generally speaking you will want to place your files into `src/@lekoarts/gatsby-theme-styleguide/` to shadow/override files.
74 |
75 | ### Change your `static` folder
76 |
77 | The `static` folder contains the icons, social media images and `robots.txt`. Don't forget to change these files, too! You can use [Real Favicon Generator](https://realfavicongenerator.net/) to generate the image files inside `static`.
78 |
79 | ## 🤔 Questions or problems?
80 |
81 | If you have general questions or need help with Gatsby, please go to one of the [support platforms](https://www.gatsbyjs.com/contributing/community/#where-to-get-support) mentioned in Gatsby's documentation. If you have a specific question about this project, you can head to the [GitHub Discussions](https://github.com/LekoArts/gatsby-themes/discussions) of the repository.
82 |
83 | ## 🎓 Learning Gatsby
84 |
85 | Looking for more guidance? Full documentation for Gatsby lives [on Gatsby's website](https://www.gatsbyjs.com/).
86 |
87 | ### Themes
88 |
89 | To learn more about Gatsby themes specifically, I recommend checking out the [theme docs](https://www.gatsbyjs.com/docs/themes/).
90 |
91 | ### General
92 |
93 | - **For most developers, I recommend starting with the [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/docs/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
94 |
95 | - **To dive straight into code samples, head [to Gatsby's documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the _How-to Guides_ and _Reference_ items in the primary navigation.
96 |
97 | ## 🌟 Supporting me
98 |
99 | Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on [Bluesky](https://bsky.app/profile/lekoarts.de) and share the project with me.
100 |
101 | Please star this project, share it on Social Media or consider supporting me on [GitHub Sponsors](https://github.com/sponsors/LekoArts)!
102 |
--------------------------------------------------------------------------------
/src/gatsby-plugin-theme-ui/index.js:
--------------------------------------------------------------------------------
1 | // Based on https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
2 | // and https://tailwindcss.com/components
3 |
4 | export const borderWidths = {
5 | px: `1px`,
6 | 0: `0`,
7 | 2: `2px`,
8 | 4: `4px`,
9 | 8: `8px`,
10 | }
11 |
12 | export const breakpoints = [`640px`, `758px`, `1024px`, `1280px`]
13 |
14 | export const baseColors = {
15 | transparent: `transparent`,
16 | black: `#000`,
17 | white: `#fff`,
18 | gray: {
19 | 50: `#f9fafb`,
20 | 100: `#f3f4f6`,
21 | 200: `#e5e7eb`,
22 | 300: `#d1d5db`,
23 | 400: `#9ca3af`,
24 | 500: `#6b7280`,
25 | 600: `#4b5563`,
26 | 700: `#374151`,
27 | 800: `#1f2937`,
28 | 900: `#111827`,
29 | },
30 | red: {
31 | 50: `#fef2f2`,
32 | 100: `#fee2e2`,
33 | 200: `#fecaca`,
34 | 300: `#fca5a5`,
35 | 400: `#f87171`,
36 | 500: `#ef4444`,
37 | 600: `#dc2626`,
38 | 700: `#b91c1c`,
39 | 800: `#991b1b`,
40 | 900: `#7f1d1d`,
41 | },
42 | orange: {
43 | 50: `#fff7ed`,
44 | 100: `#ffedd5`,
45 | 200: `#fed7aa`,
46 | 300: `#fdba74`,
47 | 400: `#fb923c`,
48 | 500: `#f97316`,
49 | 600: `#ea580c`,
50 | 700: `#c2410c`,
51 | 800: `#9a3412`,
52 | 900: `#7c2d12`,
53 | },
54 | green: {
55 | 50: `#f0fdf4`,
56 | 100: `#dcfce7`,
57 | 200: `#bbf7d0`,
58 | 300: `#86efac`,
59 | 400: `#4ade80`,
60 | 500: `#22c55e`,
61 | 600: `#16a34a`,
62 | 700: `#15803d`,
63 | 800: `#166534`,
64 | 900: `#14532d`,
65 | },
66 | blue: {
67 | 50: `#eff6ff`,
68 | 100: `#dbeafe`,
69 | 200: `#bfdbfe`,
70 | 300: `#93c5fd`,
71 | 400: `#60a5fa`,
72 | 500: `#3b82f6`,
73 | 600: `#2563eb`,
74 | 700: `#1d4ed8`,
75 | 800: `#1e40af`,
76 | 900: `#1e3a8a`,
77 | },
78 | indigo: [
79 | `#eef2ff`,
80 | `#e0e7ff`,
81 | `#c7d2fe`,
82 | `#a5b4fc`,
83 | `#818cf8`,
84 | `#6366f1`,
85 | `#4f46e5`,
86 | `#4338ca`,
87 | `#3730a3`,
88 | `#312e81`,
89 | ],
90 | }
91 |
92 | export const colors = {
93 | ...baseColors,
94 | grayDark: baseColors.gray[800],
95 | text: baseColors.gray[800],
96 | background: baseColors.white,
97 | primary: baseColors.blue[700],
98 | primaryHover: baseColors.blue[800],
99 | secondary: baseColors.gray[600],
100 | muted: baseColors.gray[300],
101 | success: baseColors.green[300],
102 | info: baseColors.blue[400],
103 | warning: baseColors.orange[300],
104 | danger: baseColors.red[300],
105 | light: baseColors.gray[100],
106 | dark: baseColors.gray[800],
107 | textMuted: baseColors.gray[600],
108 | }
109 |
110 | export const baseFonts = {
111 | sans: `-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"`,
112 | serif: `Georgia, Cambria, "Times New Roman", Times, serif`,
113 | mono: `Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace`,
114 | }
115 |
116 | export const fonts = {
117 | ...baseFonts,
118 | body: baseFonts.sans,
119 | heading: `inherit`,
120 | monospace: baseFonts.mono,
121 | }
122 |
123 | export const fontSizes = [`0.875rem`, `1rem`, `1.25rem`, `1.5rem`, `1.875rem`, `2.25rem`, `3rem`, `4rem`, `4.5rem`]
124 |
125 | export const baseFontWeights = {
126 | hairline: `100`,
127 | thin: `200`,
128 | light: `300`,
129 | normal: `400`,
130 | medium: `500`,
131 | semibold: `600`,
132 | bold: `700`,
133 | extrabold: `800`,
134 | black: `900`,
135 | }
136 |
137 | export const fontWeights = {
138 | ...baseFontWeights,
139 | body: baseFontWeights.normal,
140 | heading: baseFontWeights.bold,
141 | }
142 |
143 | export const letterSpacings = {
144 | tighter: `-0.05em`,
145 | tight: `-0.025em`,
146 | normal: `0`,
147 | wide: `0.025em`,
148 | wider: `0.05em`,
149 | widest: `0.1em`,
150 | }
151 |
152 | export const baseLineHeights = {
153 | none: `1`,
154 | tight: `1.25`,
155 | snug: `1.375`,
156 | normal: `1.5`,
157 | relaxed: `1.625`,
158 | loose: `2`,
159 | }
160 |
161 | export const lineHeights = {
162 | ...baseLineHeights,
163 | body: baseLineHeights.relaxed,
164 | heading: baseLineHeights.tight,
165 | }
166 |
167 | export const radii = {
168 | none: `0`,
169 | sm: `0.125rem`,
170 | default: `0.25rem`,
171 | lg: `0.5rem`,
172 | full: `9999px`,
173 | }
174 |
175 | export const sizes = {
176 | px: `1px`,
177 | 0: `0`,
178 | 1: `0.25rem`,
179 | 2: `0.5rem`,
180 | 3: `0.75rem`,
181 | 4: `1rem`,
182 | 5: `1.25rem`,
183 | 6: `1.5rem`,
184 | 8: `2rem`,
185 | 10: `2.5rem`,
186 | 12: `3rem`,
187 | 16: `4rem`,
188 | 20: `5rem`,
189 | 24: `6rem`,
190 | 32: `8rem`,
191 | 40: `10rem`,
192 | 48: `12rem`,
193 | 56: `14rem`,
194 | 64: `16rem`,
195 | xs: `20rem`,
196 | sm: `24rem`,
197 | md: `28rem`,
198 | lg: `32rem`,
199 | xl: `36rem`,
200 | "2xl": `42rem`,
201 | "3xl": `48rem`,
202 | "4xl": `56rem`,
203 | "5xl": `64rem`,
204 | "6xl": `72rem`,
205 | full: `100%`,
206 | screenHeight: `100vh`,
207 | screenWidth: `100vw`,
208 | }
209 |
210 | export const shadows = {
211 | default: `0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)`,
212 | md: `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)`,
213 | lg: `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)`,
214 | xl: `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)`,
215 | "2xl": `0 25px 50px -12px rgba(0, 0, 0, 0.25)`,
216 | inner: `inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)`,
217 | outline: `0 0 0 3px rgba(66, 153, 225, 0.5)`,
218 | none: `none`,
219 | }
220 |
221 | export const space = [0, `0.25rem`, `0.5rem`, `1rem`, `2rem`, `4rem`, `8rem`, `16rem`, `32rem`]
222 |
223 | export const zIndices = {
224 | auto: `auto`,
225 | 0: `0`,
226 | 10: `10`,
227 | 20: `20`,
228 | 30: `30`,
229 | 40: `40`,
230 | 50: `50`,
231 | }
232 |
233 | const heading = {
234 | fontFamily: `heading`,
235 | fontWeight: `heading`,
236 | lineHeight: `heading`,
237 | m: 0,
238 | mb: 1,
239 | }
240 |
241 | export const styles = {
242 | root: {
243 | fontFamily: `body`,
244 | lineHeight: `body`,
245 | fontWeight: `body`,
246 | WebkitTextSizeAdjust: `100%`,
247 | "h1, h2, h3, h4, h5": {
248 | marginTop: `4rem !important`,
249 | marginBottom: `2rem !important`,
250 | },
251 | },
252 | a: {
253 | color: `primary`,
254 | textDecoration: `none`,
255 | ":hover": {
256 | textDecoration: `underline`,
257 | },
258 | },
259 | h1: {
260 | ...heading,
261 | fontSize: 6,
262 | mt: 2,
263 | },
264 | h2: {
265 | ...heading,
266 | fontSize: 5,
267 | mt: 2,
268 | },
269 | h3: {
270 | ...heading,
271 | fontSize: 4,
272 | mt: 3,
273 | },
274 | h4: {
275 | ...heading,
276 | fontSize: 3,
277 | },
278 | code: {},
279 | pre: {},
280 | hr: {
281 | bg: `muted`,
282 | border: 0,
283 | height: `1px`,
284 | m: 3,
285 | },
286 | }
287 |
288 | export const theme = {
289 | borderWidths,
290 | breakpoints,
291 | colors,
292 | fonts,
293 | fontSizes,
294 | fontWeights,
295 | letterSpacings,
296 | lineHeights,
297 | sizes,
298 | shadows,
299 | space,
300 | radii,
301 | zIndices,
302 | styles,
303 | }
304 |
305 | export default theme
306 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | ## 0.2.21
4 |
5 | ### Patch Changes
6 |
7 | - [`5b15df4`](https://github.com/LekoArts/gatsby-themes/commit/5b15df41d262bc2e7428878a70932e36fd70db2f) Thanks [@LekoArts](https://github.com/LekoArts)! - Update internal dependencies
8 |
9 | ## 0.2.20
10 |
11 | ### Patch Changes
12 |
13 | - [#1371](https://github.com/LekoArts/gatsby-themes/pull/1371) [`9e5be42`](https://github.com/LekoArts/gatsby-themes/commit/9e5be42b48990319d3059d9045ddc1801226c3cb) Thanks [@LekoArts](https://github.com/LekoArts)! - Update dependencies
14 |
15 | - [#1369](https://github.com/LekoArts/gatsby-themes/pull/1369) [`af17a18`](https://github.com/LekoArts/gatsby-themes/commit/af17a18dfbef47300928fb3b9379a60096fae4e2) Thanks [@LekoArts](https://github.com/LekoArts)! - Replace Twitter with Bluesky
16 |
17 | - [#1367](https://github.com/LekoArts/gatsby-themes/pull/1367) [`4c3abc7`](https://github.com/LekoArts/gatsby-themes/commit/4c3abc779332b36db8735029ad5d872e8149d31d) Thanks [@LekoArts](https://github.com/LekoArts)! - Update Gatsby related dependencies
18 |
19 | - Updated dependencies [[`af17a18`](https://github.com/LekoArts/gatsby-themes/commit/af17a18dfbef47300928fb3b9379a60096fae4e2)]:
20 | - @lekoarts/gatsby-theme-styleguide@5.1.3
21 |
22 | ## 0.2.19
23 |
24 | ### Patch Changes
25 |
26 | - [`409bba45`](https://github.com/LekoArts/gatsby-themes/commit/409bba451d8637d04de2efc8199fa662a2595c68) Thanks [@LekoArts](https://github.com/LekoArts)! - Remove link to my Patreon page. To simplify things I disabled my Patreon. If you want to support my OSS work, please consider using GitHub sponsors or Ko-fi. Thanks!
27 |
28 | - Updated dependencies [[`409bba45`](https://github.com/LekoArts/gatsby-themes/commit/409bba451d8637d04de2efc8199fa662a2595c68)]:
29 | - @lekoarts/gatsby-theme-styleguide@5.1.2
30 |
31 | ## 0.2.18
32 |
33 | ### Patch Changes
34 |
35 | - [#1224](https://github.com/LekoArts/gatsby-themes/pull/1224) [`9be65d4f`](https://github.com/LekoArts/gatsby-themes/commit/9be65d4f39e02082763ffda763cb2537f93acf37) Thanks [@LekoArts](https://github.com/LekoArts)! - Update URLs of deployed example
36 |
37 | - Updated dependencies [[`9be65d4f`](https://github.com/LekoArts/gatsby-themes/commit/9be65d4f39e02082763ffda763cb2537f93acf37)]:
38 | - @lekoarts/gatsby-theme-styleguide@5.1.1
39 |
40 | ## 0.2.17
41 |
42 | ### Patch Changes
43 |
44 | - [#1164](https://github.com/LekoArts/gatsby-themes/pull/1164) [`27abea13`](https://github.com/LekoArts/gatsby-themes/commit/27abea13fad5a8834e231e505fab4067de862b30) Thanks [@LekoArts](https://github.com/LekoArts)! - Move some global styles from `` component to Theme UI's `styles.root`. This makes it easier to modify those directly through the Theme UI config.
45 |
46 | ## 0.2.16
47 |
48 | ### Patch Changes
49 |
50 | - [#1116](https://github.com/LekoArts/gatsby-themes/pull/1116) [`cf7d5122`](https://github.com/LekoArts/gatsby-themes/commit/cf7d51223a73387f12cac490e2a42f068b0ded26) Thanks [@LekoArts](https://github.com/LekoArts)! - chore(deps): Various dependency updates
51 |
52 | ## 0.2.15
53 |
54 | ### Patch Changes
55 |
56 | - [#1051](https://github.com/LekoArts/gatsby-themes/pull/1051) [`4facf3d1`](https://github.com/LekoArts/gatsby-themes/commit/4facf3d1e45c8db320050607dd84a0c4a4a74a62) Thanks [@LekoArts](https://github.com/LekoArts)! - fix: Use minor pin and update to 0.15.4
57 |
58 | ## 0.2.14
59 |
60 | ### Patch Changes
61 |
62 | - Updated dependencies [[`02872400`](https://github.com/LekoArts/gatsby-themes/commit/0287240022c308a7d1fcc8af348ee7d21bca0dd5)]:
63 | - @lekoarts/gatsby-theme-styleguide@5.0.0
64 |
65 | ## 0.2.13
66 |
67 | ### Patch Changes
68 |
69 | - [#1043](https://github.com/LekoArts/gatsby-themes/pull/1043) [`5ddaf82f`](https://github.com/LekoArts/gatsby-themes/commit/5ddaf82fc5e7643b841b60028bd7c566b6f9528f) Thanks [@renovate](https://github.com/apps/renovate)! - fix(deps): update theme-ui to ^0.15.3
70 |
71 | ## 0.2.12
72 |
73 | ### Patch Changes
74 |
75 | - Updated dependencies [[`ee969f3`](https://github.com/LekoArts/gatsby-themes/commit/ee969f30037fa99232292014431854773735d0a0)]:
76 | - @lekoarts/gatsby-theme-styleguide@4.0.0
77 |
78 | ## 0.2.11
79 |
80 | ### Patch Changes
81 |
82 | - Updated dependencies [[`1598dd6`](https://github.com/LekoArts/gatsby-themes/commit/1598dd660e3ba795b50c4aeb11550806e0b7b6ba)]:
83 | - @lekoarts/gatsby-theme-styleguide@3.0.0
84 |
85 | ## 0.2.10
86 |
87 | ### Patch Changes
88 |
89 | - Updated dependencies [[`1785dcf`](https://github.com/LekoArts/gatsby-themes/commit/1785dcfad131ab9270c401e6a3bb450f7cb01288)]:
90 | - @lekoarts/gatsby-theme-styleguide@2.0.0
91 |
92 | ## 0.2.9
93 |
94 | ### Patch Changes
95 |
96 | - [`716fde2`](https://github.com/LekoArts/gatsby-themes/commit/716fde287d20e80e834d451825b55af249e0168a) [#579](https://github.com/LekoArts/gatsby-themes/pull/579) Thanks [@LekoArts](https://github.com/LekoArts)! - chore: Add gatsby-plugin-gatsby-cloud to starters
97 |
98 | All notable changes to this project will be documented in this file.
99 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
100 |
101 | ## [0.2.8](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.2.7...styleguide@0.2.8) (2020-11-11)
102 |
103 | **Note:** Version bump only for package styleguide
104 |
105 | ## [0.2.7](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.2.6...styleguide@0.2.7) (2020-11-02)
106 |
107 | **Note:** Version bump only for package styleguide
108 |
109 | ## [0.2.6](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.2.5...styleguide@0.2.6) (2020-10-25)
110 |
111 | **Note:** Version bump only for package styleguide
112 |
113 | ## [0.2.5](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.2.4...styleguide@0.2.5) (2020-10-10)
114 |
115 | **Note:** Version bump only for package styleguide
116 |
117 | ## [0.2.4](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.2.3...styleguide@0.2.4) (2020-09-25)
118 |
119 | **Note:** Version bump only for package styleguide
120 |
121 | ## [0.2.3](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.2.2...styleguide@0.2.3) (2020-09-16)
122 |
123 | **Note:** Version bump only for package styleguide
124 |
125 | ## [0.2.2](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.2.1...styleguide@0.2.2) (2020-09-10)
126 |
127 | **Note:** Version bump only for package styleguide
128 |
129 | ## [0.2.1](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.2.0...styleguide@0.2.1) (2020-08-27)
130 |
131 | **Note:** Version bump only for package styleguide
132 |
133 | # [0.2.0](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.10...styleguide@0.2.0) (2020-07-09)
134 |
135 | ### Features
136 |
137 | - Add bundle-analyzer and lazy-load react-live ([#450](https://github.com/LekoArts/gatsby-themes/issues/450)) ([667fd33](https://github.com/LekoArts/gatsby-themes/commit/667fd33ce6af546cf2250af1e22395a26f45d6a2))
138 |
139 | ## [0.1.10](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.9...styleguide@0.1.10) (2020-07-09)
140 |
141 | **Note:** Version bump only for package styleguide
142 |
143 | ## [0.1.9](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.8...styleguide@0.1.9) (2020-07-03)
144 |
145 | **Note:** Version bump only for package styleguide
146 |
147 | ## [0.1.8](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.7...styleguide@0.1.8) (2020-07-02)
148 |
149 | **Note:** Version bump only for package styleguide
150 |
151 | ## [0.1.7](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.6...styleguide@0.1.7) (2020-06-11)
152 |
153 | ### Bug Fixes
154 |
155 | - Normalize CSS in themes & examples ([#422](https://github.com/LekoArts/gatsby-themes/issues/422)) ([9a2600c](https://github.com/LekoArts/gatsby-themes/commit/9a2600cc45d0f6729799183116f1b87d3c943749))
156 |
157 | ## [0.1.6](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.5...styleguide@0.1.6) (2020-06-08)
158 |
159 | **Note:** Version bump only for package styleguide
160 |
161 | ## [0.1.5](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.4...styleguide@0.1.5) (2020-05-29)
162 |
163 | **Note:** Version bump only for package styleguide
164 |
165 | ## [0.1.4](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.3...styleguide@0.1.4) (2020-05-12)
166 |
167 | **Note:** Version bump only for package styleguide
168 |
169 | ## [0.1.3](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.2...styleguide@0.1.3) (2020-05-04)
170 |
171 | **Note:** Version bump only for package styleguide
172 |
173 | ## [0.1.2](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.1...styleguide@0.1.2) (2020-05-02)
174 |
175 | **Note:** Version bump only for package styleguide
176 |
177 | ## [0.1.1](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.1.0...styleguide@0.1.1) (2020-04-28)
178 |
179 | **Note:** Version bump only for package styleguide
180 |
181 | # [0.1.0](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.18...styleguide@0.1.0) (2020-04-27)
182 |
183 | ### Features
184 |
185 | - Update theme-ui to v0.3.x ([#371](https://github.com/LekoArts/gatsby-themes/issues/371)) ([67a05ac](https://github.com/LekoArts/gatsby-themes/commit/67a05ac3e1deaddfe38591739e7f50f56d49d109)), closes [/theme-ui.com/migrating#v03](https://github.com//theme-ui.com/migrating/issues/v03) [#262](https://github.com/LekoArts/gatsby-themes/issues/262)
186 |
187 | ## [0.0.18](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.17...styleguide@0.0.18) (2020-04-24)
188 |
189 | **Note:** Version bump only for package styleguide
190 |
191 | ## [0.0.17](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.16...styleguide@0.0.17) (2020-04-13)
192 |
193 | ### Bug Fixes
194 |
195 | - **deps:** update dependency react-helmet to v6 ([#354](https://github.com/LekoArts/gatsby-themes/issues/354)) ([117d1d5](https://github.com/LekoArts/gatsby-themes/commit/117d1d5a6989d763c89137d8a9f0fb55f55efdee))
196 |
197 | ## [0.0.16](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.15...styleguide@0.0.16) (2020-04-12)
198 |
199 | ### Bug Fixes
200 |
201 | - Use withPrefix helper in SEO component ([#346](https://github.com/LekoArts/gatsby-themes/issues/346)) ([91fc16c](https://github.com/LekoArts/gatsby-themes/commit/91fc16c3c725a2d858ee093d761530975e2173d9))
202 |
203 | ## [0.0.15](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.14...styleguide@0.0.15) (2020-04-12)
204 |
205 | **Note:** Version bump only for package styleguide
206 |
207 | ## [0.0.14](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.13...styleguide@0.0.14) (2020-04-01)
208 |
209 | **Note:** Version bump only for package styleguide
210 |
211 | ## [0.0.13](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.12...styleguide@0.0.13) (2020-03-31)
212 |
213 | **Note:** Version bump only for package styleguide
214 |
215 | ## [0.0.12](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.11...styleguide@0.0.12) (2020-03-04)
216 |
217 | **Note:** Version bump only for package styleguide
218 |
219 | ## [0.0.11](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.10...styleguide@0.0.11) (2020-02-27)
220 |
221 | **Note:** Version bump only for package styleguide
222 |
223 | ## [0.0.10](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.9...styleguide@0.0.10) (2020-02-16)
224 |
225 | **Note:** Version bump only for package styleguide
226 |
227 | ## [0.0.9](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.8...styleguide@0.0.9) (2020-01-23)
228 |
229 | **Note:** Version bump only for package styleguide
230 |
231 | ## [0.0.8](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.7...styleguide@0.0.8) (2020-01-18)
232 |
233 | **Note:** Version bump only for package styleguide
234 |
235 | ## [0.0.7](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.6...styleguide@0.0.7) (2020-01-17)
236 |
237 | **Note:** Version bump only for package styleguide
238 |
239 | ## [0.0.6](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.5...styleguide@0.0.6) (2020-01-06)
240 |
241 | **Note:** Version bump only for package styleguide
242 |
243 | ## [0.0.5](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.4...styleguide@0.0.5) (2020-01-04)
244 |
245 | **Note:** Version bump only for package styleguide
246 |
247 | ## [0.0.4](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.3...styleguide@0.0.4) (2020-01-04)
248 |
249 | **Note:** Version bump only for package styleguide
250 |
251 | ## [0.0.3](https://github.com/LekoArts/gatsby-themes/compare/styleguide@0.0.2...styleguide@0.0.3) (2019-12-31)
252 |
253 | **Note:** Version bump only for package styleguide
254 |
255 | ## 0.0.2 (2019-12-31)
256 |
257 | **Note:** Version bump only for package styleguide
258 |
--------------------------------------------------------------------------------