diff --git a/examples/gatsby-plugin/gatsby-config.js b/examples/gatsby-plugin/gatsby-config.js index d972cd592..024b75057 100644 --- a/examples/gatsby-plugin/gatsby-config.js +++ b/examples/gatsby-plugin/gatsby-config.js @@ -1,3 +1,4 @@ +/** @type {import('gatsby').GatsbyConfig} */ module.exports = { plugins: ['gatsby-plugin-mdx', 'gatsby-plugin-theme-ui'], } diff --git a/examples/gatsby-plugin/package.json b/examples/gatsby-plugin/package.json index 807601d82..402de71d8 100644 --- a/examples/gatsby-plugin/package.json +++ b/examples/gatsby-plugin/package.json @@ -6,25 +6,21 @@ "author": "Brent Jackson ", "license": "MIT", "scripts": { + "develop": "gatsby develop", "start": "gatsby develop", "clean": "gatsby clean", "build": "gatsby build" }, "dependencies": { + "@emotion/react": "^11.8.1", + "@emotion/styled": "^11.8.1", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "gatsby": "^2.6.3", - "gatsby-plugin-mdx": "^1.6.0", + "gatsby": "^4.7.2", + "gatsby-plugin-mdx": "^3.7.1", "gatsby-plugin-theme-ui": "latest", - "react": "^16.14.0", - "react-dom": "^16.14.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "theme-ui": "latest" - }, - "devDependencies": { - "@testing-library/react": "^9.1.3", - "husky": ">=4.0.7", - "jest": "^24.8.0", - "lint-staged": "10", - "react-test-renderer": "^17.0.1" } } diff --git a/examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js b/examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js index 4109ca827..76ba1f9e6 100755 --- a/examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js +++ b/examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js @@ -1,6 +1,7 @@ const theme = { - useCustomProperties: true, - initialColorMode: 'light', + config: { + initialColorModeName: 'light', + }, colors: { text: '#000', background: '#fff', @@ -26,6 +27,8 @@ const theme = { fontFamily: 'body', fontWeight: 'body', lineHeight: 'body', + py: 2, + px: 4, }, a: { color: 'primary', diff --git a/examples/gatsby/gatsby-config.js b/examples/gatsby/gatsby-config.js index ae6d7b259..fbcac1807 100644 --- a/examples/gatsby/gatsby-config.js +++ b/examples/gatsby/gatsby-config.js @@ -1,3 +1,4 @@ +/** @type {import('gatsby').GatsbyConfig} */ module.exports = { plugins: ['gatsby-plugin-mdx'], } diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json index 4aa05fc7f..79ee38802 100644 --- a/examples/gatsby/package.json +++ b/examples/gatsby/package.json @@ -6,21 +6,24 @@ "author": "Brent Jackson ", "license": "MIT", "scripts": { + "develop": "gatsby develop", "start": "gatsby develop", "clean": "gatsby clean", "build": "gatsby build" }, "dependencies": { + "@emotion/react": "^11.8.1", + "@emotion/styled": "^11.8.1", "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", - "gatsby": "^2.6.3", - "gatsby-plugin-mdx": "^1.6.0", - "react": "^16.14.0", - "react-dom": "^16.14.0", + "gatsby": "^4.7.2", + "gatsby-plugin-mdx": "^3.7.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "theme-ui": "latest" }, "devDependencies": { - "@types/react": "^16.9.55", - "typescript": "^4.4.3" + "@types/react": "^17.0.39", + "typescript": "^4.5.5" } } diff --git a/examples/gatsby/src/layout.tsx b/examples/gatsby/src/layout.tsx index e6790a49c..2c5159cbd 100644 --- a/examples/gatsby/src/layout.tsx +++ b/examples/gatsby/src/layout.tsx @@ -1,11 +1,8 @@ /** @jsx jsx */ import { FC } from 'react' -import { jsx, Box, Container } from 'theme-ui' -import { useBreakpointIndex } from '@theme-ui/match-media' +import { Box, Container } from 'theme-ui' export const Layout: FC = ({ children }) => { - const index = useBreakpointIndex({ defaultIndex: 2 }) - console.log('breakpoint index', index) return ( diff --git a/examples/gatsby/src/pages/index.mdx b/examples/gatsby/src/pages/index.mdx index 33e9fdf08..8d3b77cd2 100644 --- a/examples/gatsby/src/pages/index.mdx +++ b/examples/gatsby/src/pages/index.mdx @@ -6,5 +6,5 @@ export default Layout This page is written in [MDX][] and styled with [Theme UI][]. -[theme ui]: https://theme-ui.now.sh +[theme ui]: https://theme-ui.com/ [mdx]: https://mdxjs.com diff --git a/examples/gatsby/src/theme.ts b/examples/gatsby/src/theme.ts index 2d294ccf7..e1ae920c4 100644 --- a/examples/gatsby/src/theme.ts +++ b/examples/gatsby/src/theme.ts @@ -1,6 +1,9 @@ -import { Theme } from 'theme-ui' +import type { Theme } from 'theme-ui' const theme: Theme = { + config: { + initialColorModeName: 'light', + }, colors: { text: '#000', background: '#fff', diff --git a/packages/docs/src/pages/getting-started/gatsby.mdx b/packages/docs/src/pages/getting-started/gatsby.mdx index c7e09d386..3e9e55e9f 100755 --- a/packages/docs/src/pages/getting-started/gatsby.mdx +++ b/packages/docs/src/pages/getting-started/gatsby.mdx @@ -7,7 +7,7 @@ title: Getting Started with Gatsby To use Theme UI with [Gatsby][], install and use [`gatsby-plugin-theme-ui`](/packages/gatsby-plugin). ```sh -npm i theme-ui gatsby-plugin-theme-ui +npm i theme-ui gatsby-plugin-theme-ui @emotion/react @emotion/styled @mdx-js/react@v1 ``` Add the plugin to your `gatsby-config.js`. @@ -37,4 +37,4 @@ Use the [`sx` prop](/sx-prop), [color modes](/color-modes), and other features j For more information, see the documentation for [`gatsby-plugin-theme-ui`](/packages/gatsby-plugin). -[gatsby]: https://gatsbyjs.org +[gatsby]: https://www.gatsbyjs.com diff --git a/packages/gatsby-plugin-theme-ui/README.md b/packages/gatsby-plugin-theme-ui/README.md index affaa0fc6..e2e9a78fe 100755 --- a/packages/gatsby-plugin-theme-ui/README.md +++ b/packages/gatsby-plugin-theme-ui/README.md @@ -3,7 +3,7 @@ Gatsby plugin for adding Theme UI context ```sh -npm i theme-ui gatsby-plugin-theme-ui +npm i theme-ui gatsby-plugin-theme-ui @emotion/react @emotion/styled @mdx-js/react@v1 ``` ```js diff --git a/packages/gatsby-plugin-theme-ui/package.json b/packages/gatsby-plugin-theme-ui/package.json index 197f51b4b..4aca0be32 100644 --- a/packages/gatsby-plugin-theme-ui/package.json +++ b/packages/gatsby-plugin-theme-ui/package.json @@ -7,7 +7,10 @@ "peerDependencies": { "gatsby": "^2.0.0 || ^3.0.0 || ^4.0.0", "react": "^16 || ^17", - "theme-ui": ">=0.12.0" + "theme-ui": ">=0.12.0", + "@emotion/react": "^11", + "@emotion/styled": "^11", + "@mdx-js/react": "^1" }, "keywords": [ "gatsby",