fix(gatsby-plugin-theme-ui,docs): Dependency Updates

examples/gatsby-plugin/gatsby-config.js

@@ -1,3 +1,4 @@
+/** @type {import('gatsby').GatsbyConfig} */
 module.exports = {
   plugins: ['gatsby-plugin-mdx', 'gatsby-plugin-theme-ui'],
 }

examples/gatsby-plugin/package.json

@@ -6,25 +6,21 @@
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "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"
   }
 }

examples/gatsby-plugin/src/gatsby-plugin-theme-ui/index.js

@@ -1,6 +1,5 @@
 const theme = {
-  useCustomProperties: true,
-  initialColorMode: 'light',
+  initialColorModeName: 'light',
   colors: {
     text: '#000',
     background: '#fff',
@@ -26,6 +25,8 @@ const theme = {
       fontFamily: 'body',
       fontWeight: 'body',
       lineHeight: 'body',
+      py: 2,
+      px: 4,
     },
     a: {
       color: 'primary',

examples/gatsby/gatsby-config.js

@@ -1,3 +1,4 @@
+/** @type {import('gatsby').GatsbyConfig} */
 module.exports = {
   plugins: ['gatsby-plugin-mdx'],
 }

examples/gatsby/package.json

@@ -6,21 +6,24 @@
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "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"
   }
 }

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 (
     <Box sx={{ py: 2, px: 4 }}>
       <Box as="header">

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

examples/gatsby/src/theme.ts

@@ -1,6 +1,7 @@
-import { Theme } from 'theme-ui'
+import type { Theme } from 'theme-ui'
 
 const theme: Theme = {
+  initialColorModeName: 'light',
   colors: {
     text: '#000',
     background: '#fff',

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

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

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",