Merge pull request #2289 from beerose/opt-in-mdx-docs

chore: make docs work after @theme-ui/mdx changes, fix imports

Author: hasparus

examples/gatsby/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.8.1",
+    "@theme-ui/mdx": "latest",
     "gatsby": "^4.13.1",
     "gatsby-plugin-mdx": "^3.7.1",
     "react": "^18.1.0",

examples/gatsby/src/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC, ReactNode } from 'react'
-import { ThemeProvider, Themed } from 'theme-ui'
+import { ThemeProvider } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import theme from './theme'
 
 export const WrapRootElement: FC<{ element: ReactNode }> = ({ element }) => (

packages/docs/package.json

@@ -23,6 +23,7 @@
     "@theme-ui/css": "0.14.5",
     "@theme-ui/editor": "0.14.5",
     "@theme-ui/match-media": "0.14.5",
+    "@theme-ui/mdx": "0.14.5",
     "@theme-ui/presets": "0.14.5",
     "@theme-ui/prism": "0.14.5",
     "@theme-ui/sidenav": "0.14.5",
@@ -85,7 +86,8 @@
     "typography-theme-wordpress-2016": "^0.16.19",
     "typography-theme-wordpress-kubrick": "^0.16.19",
     "typography-theme-zacklive": "^1.0.2",
-    "@mdx-js/react": "^1"
+    "@mdx-js/react": "^1",
+    "@mdx-js/mdx": "^1"
   },
   "devDependencies": {
     "@babel/register": "^7.8.6"

packages/docs/src/components/preset.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { Helmet } from 'react-helmet'
-import { jsx, Themed } from 'theme-ui'
+import { jsx } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { ThemeContext } from '@emotion/react'
 import * as presets from '@theme-ui/presets'
 import {

packages/docs/src/components/presets-demo.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx, ThemeProvider, Themed, Select } from 'theme-ui'
+import { jsx, ThemeProvider, Select } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { MDXProvider } from '@mdx-js/react'
 import { useState } from 'react'
 import { Helmet } from 'react-helmet'

packages/docs/src/components/theme-scales.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
 import { scales, multiples } from '@theme-ui/css'
-import { Themed } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 
 const camelDash = (string) =>
   string.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`)

packages/docs/src/components/typography-layout.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { jsx, ThemeProvider, Flex, Themed } from 'theme-ui'
+import { jsx, ThemeProvider, Flex } from 'theme-ui'
+import { Themed } from "@theme-ui/mdx"
 import { useState } from 'react'
 import { toTheme } from '@theme-ui/typography'
 import GoogleFonts from './google-fonts'

packages/docs/src/pages/customize.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 /** @jsxFrag React.Fragment */
-import { jsx, Themed, Grid, useThemeUI } from 'theme-ui'
+import { jsx, Grid, useThemeUI } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { EditorProvider, Theme } from '@theme-ui/editor'
 import { TypeStyle, FontFamily } from '@theme-ui/style-guide'
 import React from 'react'

packages/docs/src/pages/recipes/index.js

@@ -1,6 +1,7 @@
 // @ts-check
 /** @jsx jsx */
-import { jsx, Themed } from 'theme-ui'
+import { jsx } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 import { graphql, Link } from 'gatsby'
 
 import { Cards } from '../..'

packages/docs/src/pages/themed.mdx

@@ -11,7 +11,7 @@ component to render an `<h1>` element with styles from `theme.styles.h1`.
 
 ```jsx
 // example
-import { Themed } from 'theme-ui'
+import { Themed } from '@theme-ui/mdx'
 
 export default (props) => (
   <div>