Merge branch 'master' into patch-5

Author: jxnblk

CHANGELOG.md

@@ -5,8 +5,9 @@
 - Removes overriding property on editor combobox
 - Adjust media query sort logic #600
 - Fixed link to Gatsby Plugin page in `getting-started` page. Issue #602
+- Fix broken base-preset link on `theming` page
 
-## v0.3.0 2019-01-22
+## v0.3.0 2020-01-22
 
 - Split theme-ui package into `@theme-ui/core`, `@theme-ui/mdx`, and `@theme-ui/color-modes`
 - Removes `context.components` (still available through MDX context)

examples/next/components/Header.js

@@ -1,14 +1,16 @@
 import React from 'react'
-import { useColorMode } from 'theme-ui'
+import { Button, useColorMode } from 'theme-ui'
 
-export default function Header() {
+const Header = () => {
   const [colorMode, setColorMode] = useColorMode()
   return (
     <header>
-      <button
+      <Button
         onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
         Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
-      </button>
+      </Button>
     </header>
   )
 }
+
+export default Header

examples/next/next.config.js

@@ -1,4 +1,2 @@
 const withMDX = require('@next/mdx')()
-module.exports = withMDX({
-  pageExtensions: ['js', 'mdx'],
-})
+module.exports = withMDX({ pageExtensions: ['js', 'mdx'] })

examples/next/package.json

@@ -11,12 +11,11 @@
     "start": "next start"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.15",
-    "@mdx-js/loader": "^1.0.19",
-    "@next/mdx": "^9.0.3",
-    "next": "^9.0.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "@mdx-js/loader": "^1.5.8",
+    "@next/mdx": "^9.3.4",
+    "next": "^9.3.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "theme-ui": "^0.4.0-alpha.0"
   }
 }

examples/next/pages/_app.js

@@ -1,35 +1,18 @@
 import React from 'react'
-import App from 'next/app'
-import { ThemeProvider, Styled, ColorMode } from 'theme-ui'
+import NextApp from 'next/app'
 
 import Header from '../components/Header'
 import theme from '../src/theme'
+import { ThemeProvider } from 'theme-ui'
 
-class MyApp extends App {
-  // Only uncomment this method if you have blocking data requirements for
-  // every single page in your application. This disables the ability to
-  // perform automatic static optimization, causing every page in your app to
-  // be server-side rendered.
-  //
-  // static async getInitialProps(appContext) {
-  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
-  //   const appProps = await App.getInitialProps(appContext);
-  //
-  //   return { ...appProps }
-  // }
-
+export default class App extends NextApp {
   render() {
     const { Component, pageProps } = this.props
     return (
       <ThemeProvider theme={theme}>
-        <ColorMode />
         <Header />
-        <Styled.root>
-          <Component {...pageProps} />
-        </Styled.root>
+        <Component {...pageProps} />
       </ThemeProvider>
     )
   }
 }
-
-export default MyApp

examples/next/pages/_document.js

@@ -1,8 +1,7 @@
-import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import { InitializeColorMode } from 'theme-ui'
 
-class MyDocument extends Document {
+export default class extends Document {
   static async getInitialProps(ctx) {
     const initialProps = await Document.getInitialProps(ctx)
     return { ...initialProps }
@@ -21,5 +20,3 @@ class MyDocument extends Document {
     )
   }
 }
-
-export default MyDocument

examples/next/pages/hello.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { jsx, Styled } from 'theme-ui'
 
-export default props => (
+export default () => (
   <div
     sx={{
       maxWidth: 1024,

examples/next/src/theme.js

@@ -1,5 +1,6 @@
 export default {
-  useCustomProperties: true,
+  initialColorModeName: 'light',
+  useColorSchemeMediaQuery: true,
   colors: {
     text: '#000',
     background: '#fff',