Merge pull request #2178 from system-ui/update-example-custom-pragma

chore(examples): Upgrade custom pragma example

examples/custom-pragma/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "custom-pragma-example",
-  "version": "0.4.0-rc.0",
+  "version": "0.4.0",
   "main": "index.js",
   "author": "Brent Jackson <jxnblk@gmail.com>",
   "license": "MIT",
@@ -13,10 +13,10 @@
   "dependencies": {
     "@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.10.3",
+    "gatsby-plugin-mdx": "^3.10.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "theme-ui": "latest"
   }
 }

examples/custom-pragma/src/index.js

@@ -1,9 +1,7 @@
 import React from 'react'
-import { ThemeProvider, Themed } from 'theme-ui'
+import { ThemeProvider } from 'theme-ui'
 import theme from './theme'
 
 export const WrapRootElement = ({ element }) => (
-  <ThemeProvider theme={theme}>
-    <Themed.root>{element}</Themed.root>
-  </ThemeProvider>
+  <ThemeProvider theme={theme}>{element}</ThemeProvider>
 )

examples/custom-pragma/src/layout.js

@@ -1,13 +1,19 @@
 /** @jsx jsx */
-import { jsx, Layout, Header, Main, Container } from 'theme-ui'
+import { BaseStyles, jsx } from 'theme-ui'
 
-export default (props) => (
-  <Layout>
-    <Header>
-      <h2>Theme UI Gatsby Example</h2>
-    </Header>
-    <Main>
-      <Container>{props.children}</Container>
-    </Main>
-  </Layout>
+const Layout = (props) => (
+  <BaseStyles>
+    <article
+      sx={{
+        maxWidth: 768,
+        px: 2,
+        py: 4,
+        mx: 'auto',
+      }}
+    >
+      {props.children}
+    </article>
+  </BaseStyles>
 )
+
+export default Layout

examples/custom-pragma/src/pages/about.mdx

@@ -6,5 +6,7 @@ export default Layout
 
 This page is written in [MDX][] and styled with [Theme UI][].
 
-[theme ui]: https://theme-ui.now.sh
+To use the pragma: `/** @jsx jsx */`, then `import { jsx } from 'theme-ui'`.
+
+[theme ui]: https://theme-ui.com
 [mdx]: https://mdxjs.com

examples/custom-pragma/src/pages/index.js

@@ -1,29 +1,33 @@
 /** @jsx jsx */
 import { jsx, Themed } from 'theme-ui'
 
-export default (props) => (
-  <div
-    css={{
+const Content = () => (
+  <article
+    sx={{
       fontFamily: 'body',
       lineHeight: 'body',
       color: 'text',
-      bg: 'background',
       maxWidth: 768,
-      px: 4,
+      px: 2,
+      py: 4,
       mx: 'auto',
-    }}>
+    }}
+  >
     <h1
-      css={{
+      sx={{
         fontSize: [4, 5, 6],
-      }}>
+        mb: 0,
+      }}
+    >
       Custom JSX pragma example
     </h1>
     <p>
-      This page uses the Theme UI <Themed.code>css</Themed.code> prop with a
+      This page uses the Theme UI <Themed.code>sx</Themed.code> prop with a
       custom JSX pragma that allows you to use theme-based values directly in
-      the <Themed.code>css</Themed.code> prop with no additional imports. You
-      can also use arrays as values to apply responsive styles to any CSS
-      property.
+      the <Themed.code>sx</Themed.code> prop with no additional imports. You can
+      also use arrays as values to apply responsive styles to any CSS property.
     </p>
-  </div>
+  </article>
 )
+
+export default Content

examples/custom-pragma/src/theme.js

@@ -1,13 +1,12 @@
-export default {
+const theme = {
   colors: {
     text: '#000',
     background: '#fff',
     primary: '#07c',
     secondary: '#609',
   },
   fonts: {
-    body:
-      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
   },
@@ -30,7 +29,13 @@ export default {
       },
     },
     code: {
+      borderRadius: 2,
+      bg: '#eee',
+      px: 1,
       fontFamily: 'monospace',
+      fontSize: 'inherit',
     },
   },
 }
+
+export default theme