chore: upgrade theme-ui to v0.15

.yarnrc.yml

@@ -3,5 +3,7 @@ nodeLinker: node-modules
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-constraints.cjs
     spec: "@yarnpkg/plugin-constraints"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

package.json

@@ -18,14 +18,16 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "@emotion/react": "11.10.5",
     "@mdx-js/mdx": "1.6.22",
     "@mdx-js/react": "1.6.22",
     "@netlify/plugin-gatsby": "1.0.3",
     "@percy/cli": "1.0.0-beta.70",
     "@readmo/sdk": "0.1.1",
-    "@theme-ui/components": "0.12.0",
-    "@theme-ui/preset-base": "0.12.0",
-    "@theme-ui/prism": "0.12.0",
+    "@theme-ui/components": "0.15.4",
+    "@theme-ui/mdx": "0.15.4",
+    "@theme-ui/preset-base": "0.15.4",
+    "@theme-ui/prism": "0.15.4",
     "gatsby": "3.14.3",
     "gatsby-plugin-catch-links": "3.14.0",
     "gatsby-plugin-gdpr-tracking": "1.2.2",
@@ -35,7 +37,7 @@
     "gatsby-plugin-offline": "4.14.0",
     "gatsby-plugin-react-helmet": "4.14.0",
     "gatsby-plugin-sharp": "3.14.1",
-    "gatsby-plugin-theme-ui": "0.12.0",
+    "gatsby-plugin-theme-ui": "0.15.4",
     "gatsby-remark-images": "5.11.0",
     "gatsby-source-filesystem": "3.14.0",
     "gatsby-transformer-sharp": "3.14.0",
@@ -47,7 +49,7 @@
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "rehype-slug": "4.0.1",
-    "theme-ui": "0.12.0"
+    "theme-ui": "0.15.4"
   },
   "devDependencies": {
     "eslint-config-react-app": "6.0.0",
@@ -58,5 +60,5 @@
     "graphql-compose": "^7.25.0",
     "webpack": "^5.24.2"
   },
-  "packageManager": "yarn@3.1.0"
+  "packageManager": "yarn@3.2.4"
 }

src/components/code.js

@@ -1,5 +1,5 @@
-import { Themed } from 'theme-ui';
 import Highlight, { defaultProps } from 'prism-react-renderer';
+import { Themed } from '@theme-ui/mdx';
 import { Box } from '@theme-ui/components';
 import codeBlockParseOptions from '../utils/code-block-parse-options';
 

src/components/feature-image.js

@@ -1,4 +1,4 @@
-import { Themed } from 'theme-ui';
+import { Themed } from '@theme-ui/mdx';
 import { Box, Flex, Link as HTMLLink } from '@theme-ui/components';
 import { GatsbyImage } from 'gatsby-plugin-image';
 

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

@@ -1,4 +1,4 @@
-import { Themed } from 'theme-ui';
+import { Themed } from '@theme-ui/mdx';
 import { Box } from '@theme-ui/components';
 import Code from '../components/code';