feat: Update theme-ui to v0.3.x

cypress/e2e/cara.ts

@@ -28,11 +28,11 @@ describe(`gatsby-theme-cara`, () => {
     cy.findByLabelText(/toggle dark mode/i)
   })
   it(`should have functioning dark mode toggle`, () => {
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(226, 232, 240)`)
       .should(`have.css`, `background`, `rgb(20, 24, 33) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/toggle dark mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(247, 250, 252) none repeat scroll 0% 0% / auto padding-box border-box`)
   })

cypress/e2e/emilia.ts

@@ -25,11 +25,11 @@ describe(`gatsby-theme-emilia`, () => {
     cy.findByText(/Boggarts lavender robes/i)
   })
   it(`should have functioning theme toggle`, () => {
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(247, 250, 252) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/activate dark mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(203, 213, 224)`)
       .should(`have.css`, `background`, `rgb(26, 32, 44) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/activate light mode/i)

cypress/e2e/emma.ts

@@ -21,11 +21,11 @@ describe(`gatsby-theme-emma`, () => {
         cy.findByLabelText(/toggle dark mode/i).click()
       }
     })
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/toggle dark mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(255, 255, 255)`)
       .should(`have.css`, `background`, `rgb(45, 55, 72) none repeat scroll 0% 0% / auto padding-box border-box`)
   })

cypress/e2e/graphql-playground.ts

@@ -28,11 +28,11 @@ describe(`gatsby-theme-graphql-playground`, () => {
     cy.findByTestId(/iFrame-Get the Site Title/i)
   })
   it(`should have functioning theme toggle`, () => {
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/activate dark mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(237, 242, 247)`)
       .should(`have.css`, `background`, `rgb(45, 55, 72) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/activate light mode/i)

cypress/e2e/minimal-blog.ts

@@ -114,11 +114,11 @@ describe(`gatsby-theme-minimal-blog`, () => {
     cy.findByLabelText(/Activate Dark Mode/i)
   })
   it(`should have functioning dark mode toggle`, () => {
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(45, 55, 72)`)
       .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`)
     cy.findByLabelText(/Activate Dark Mode/i).click()
-    cy.findByTestId(`theme-root`)
+    cy.get(`body`)
       .should(`have.css`, `color`, `rgb(203, 213, 224)`)
       .should(`have.css`, `background`, `rgb(26, 32, 44) none repeat scroll 0% 0% / auto padding-box border-box`)
   })

examples/cara/package.json

@@ -17,13 +17,13 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-cara": "^1.1.8",
-    "gatsby": "^2.13.72",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-google-analytics": "^2.1.8",
     "gatsby-plugin-manifest": "^2.2.6",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"

examples/emilia/gatsby-config.js

@@ -9,6 +9,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-emilia`,
+      // See the theme's README for all available options
       options: {},
     },
     {

examples/emilia/package.json

@@ -17,14 +17,14 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-emilia": "^1.2.8",
-    "gatsby": "^2.15.2",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-google-analytics": "^2.1.13",
     "gatsby-plugin-manifest": "^2.2.13",
     "gatsby-plugin-netlify": "^2.1.11",
     "gatsby-plugin-offline": "^3.0.1",
     "gatsby-plugin-sitemap": "^2.2.7",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.1"

examples/emma/gatsby-config.js

@@ -9,6 +9,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-emma`,
+      // See the theme's README for all available options
       options: {},
     },
     {

examples/emma/package.json

@@ -17,14 +17,14 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-emma": "^1.3.8",
-    "gatsby": "^2.13.72",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-google-analytics": "^2.1.8",
     "gatsby-plugin-manifest": "^2.2.6",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-sitemap": "^2.2.7",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"

examples/graphql-playground/gatsby-config.js

@@ -2,6 +2,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-graphql-playground`,
+      // See the theme's README for all available options
       options: {},
     },
     `gatsby-plugin-netlify`,

examples/graphql-playground/package.json

@@ -17,10 +17,10 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-graphql-playground": "^1.0.19",
-    "gatsby": "^2.17.7",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-netlify": "^2.1.23",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"

examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx

@@ -49,6 +49,20 @@ var treePromise = new Promise(function(resolve) {
 });
 ```
 
+Normal block without language:
+
+```
+import Test from "../components/test"
+
+const Layout = ({ children }) => (
+  <Test>
+    {children}
+  </Test>
+)
+
+export default Layout
+```
+
 Code block with code highlighting:
 
 ```jsx:title=src/components/post.jsx {5-7,10}

examples/minimal-blog/gatsby-config.js

@@ -9,6 +9,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-minimal-blog`,
+      // See the theme's README for all available options
       options: {
         navigation: [
           {
@@ -65,6 +66,5 @@ module.exports = {
     },
     `gatsby-plugin-offline`,
     `gatsby-plugin-netlify`,
-    // `gatsby-plugin-webpack-bundle-analyser-v2`,
   ],
 }

examples/minimal-blog/package.json

@@ -17,17 +17,16 @@
   },
   "dependencies": {
     "@lekoarts/gatsby-theme-minimal-blog": "^2.2.11",
-    "gatsby": "^2.13.3",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-google-analytics": "^2.1.4",
     "gatsby-plugin-manifest": "^2.2.3",
     "gatsby-plugin-netlify": "^2.1.3",
     "gatsby-plugin-offline": "^2.2.4",
     "gatsby-plugin-sitemap": "^2.2.19",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   },
   "devDependencies": {
-    "cross-env": "^5.2.0",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.8"
+    "cross-env": "^5.2.0"
   }
 }

examples/specimens/gatsby-config.js

@@ -11,6 +11,7 @@ module.exports = {
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-specimens`,
+      // See the theme's README for all available options
       options: {
         CMYK: true,
       },

examples/specimens/package.json

@@ -16,29 +16,27 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.16",
     "@lekoarts/gatsby-theme-specimens": "^2.1.8",
-    "@mdx-js/mdx": "^1.3.1",
-    "@mdx-js/react": "^1.3.1",
-    "@theme-ui/presets": "^0.2.44",
-    "gatsby": "^2.13.72",
+    "@mdx-js/mdx": "^1.5.9",
+    "@theme-ui/presets": "^0.3.0",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-catch-links": "^2.1.4",
     "gatsby-plugin-emotion": "^4.1.3",
     "gatsby-plugin-manifest": "^2.2.6",
-    "gatsby-plugin-mdx": "^1.0.25",
+    "gatsby-plugin-mdx": "^1.1.11",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-react-helmet": "^3.1.4",
-    "gatsby-plugin-theme-ui": "^0.2.34",
+    "gatsby-plugin-theme-ui": "^0.3.0",
     "gatsby-source-filesystem": "^2.1.10",
     "mdx-utils": "^0.2.0",
-    "prism-react-renderer": "^0.1.7",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "prism-react-renderer": "^1.1.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1",
-    "react-live": "^2.2.0",
+    "react-live": "^2.2.2",
     "remark-slug": "^5.1.2",
-    "theme-ui": "^0.2.35"
+    "theme-ui": "^0.3.1"
   },
   "devDependencies": {
     "cross-env": "^5.2.0"

examples/specimens/src/components/wrapPageElement.js

@@ -1,9 +1,4 @@
 import React from "react"
-import { Styled } from "theme-ui"
 import Layout from "./layout"
 
-export const wrapPageElement = ({ element }) => (
-  <Layout>
-    <Styled.root>{element}</Styled.root>
-  </Layout>
-)
+export const wrapPageElement = ({ element }) => <Layout>{element}</Layout>

examples/specimens/src/gatsby-plugin-theme-ui/components.js

@@ -62,7 +62,7 @@ const components = {
   FontFamily: ({ fonts, previewText }) => <FontFamily fonts={fonts} previewText={previewText} />,
   FontSize: ({ fontSizes }) => <FontSize fontSizes={fontSizes} />,
   FontWeight: ({ fontWeights, previewText }) => <FontWeight fontWeights={fontWeights} previewText={previewText} />,
-  Heading: ({ styles, theme, previewText }) => <Heading styles={styles} theme={theme} previewText={previewText} />,
+  Heading: ({ styles, config, previewText }) => <Heading styles={styles} config={config} previewText={previewText} />,
   Palette: ({ colors, mode, single, minimal, prefix }) => (
     <Palette colors={colors} mode={mode} single={single} minimal={minimal} prefix={prefix} />
   ),

examples/specimens/src/pages/index.mdx

@@ -355,7 +355,7 @@ render(
       input: theme.styles,
       allowed: [`h1`, `h2`],
     })}
-    theme={theme}
+    config={theme}
   />
 );
 ```

examples/status-dashboard/gatsby-config.js

@@ -9,6 +9,7 @@ module.exports = {
     siteDescription: process.env.SITE_DESCRIPTION || `Showing the statuses of my Netlify deploys & CircleCI tests.`,
   },
   plugins: [
+    // See the theme's README for all available components
     `@lekoarts/gatsby-theme-status-dashboard`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-emotion`,

examples/status-dashboard/package.json

@@ -18,14 +18,14 @@
   "dependencies": {
     "@emotion/core": "^10.0.16",
     "@lekoarts/gatsby-theme-status-dashboard": "^1.0.21",
-    "gatsby": "^2.13.72",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-emotion": "^4.1.3",
     "gatsby-plugin-manifest": "^2.2.6",
     "gatsby-plugin-netlify": "^2.1.6",
     "gatsby-plugin-offline": "^2.2.7",
     "gatsby-plugin-react-helmet": "^3.1.4",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1"
   },
   "devDependencies": {

examples/styleguide/gatsby-config.js

@@ -13,6 +13,7 @@ module.exports = {
     `gatsby-plugin-theme-ui`,
     {
       resolve: `@lekoarts/gatsby-theme-styleguide`,
+      // See the theme's README for all available options
       options: {
         basePath: `/`,
       },

examples/styleguide/package.json

@@ -16,16 +16,15 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.22",
     "@lekoarts/gatsby-theme-styleguide": "^1.0.15",
-    "@mdx-js/react": "^1.5.1",
-    "gatsby": "^2.18.7",
+    "gatsby": "^2.20.36",
     "gatsby-plugin-netlify": "^2.1.27",
     "gatsby-plugin-react-helmet": "^3.1.16",
-    "gatsby-plugin-theme-ui": "^0.2.43",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^5.2.1"
+    "gatsby-plugin-theme-ui": "^0.3.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-helmet": "^5.2.1",
+    "theme-ui": "^0.3.1"
   },
   "devDependencies": {
     "cross-env": "^6.0.3"