Adjust body styles API

Author: jxnblk

packages/theme-provider/src/index.js

@@ -1,54 +1,46 @@
-import {
-  jsx,
-  useThemeUI,
-  ThemeProvider as CoreProvider,
-} from '@theme-ui/core'
+import { jsx, useThemeUI, ThemeProvider as CoreProvider } from '@theme-ui/core'
+import { css } from '@theme-ui/css'
 import { ColorModeProvider } from '@theme-ui/color-modes'
 import { MDXProvider } from '@theme-ui/mdx'
 import { Global } from '@emotion/core'
 
-const BodyStyles = ({ theme = {} }) => {
-  if (theme.useBodyStyles === false) return false
-
-  return jsx(Global, {
+const BodyStyles = () =>
+  jsx(Global, {
     styles: theme => {
-      const fontFamily = theme.fonts && theme.fonts.body
-      const fontWeight = theme.fontWeights && theme.fontWeights.body
-      const lineHeight = theme.lineHeights && theme.lineHeights.body
-
-      return {
+      if (theme.useBodyStyles === false || (theme.styles && !theme.styles.root))
+        return false
+      return css({
         body: {
-          fontFamily,
-          fontWeight,
-          lineHeight,
-        }
-      }
-    }
+          variant: 'styles.root',
+        },
+      })(theme)
+    },
   })
-}
 
-export const ThemeProvider = ({
-  theme,
-  components,
-  children
-}) => {
+export const ThemeProvider = ({ theme, components, children }) => {
   const outer = useThemeUI()
 
   if (typeof outer.setColorMode === 'function') {
-    return jsx(CoreProvider, { theme },
+    return jsx(
+      CoreProvider,
+      { theme },
       jsx(MDXProvider, {
         components,
-        children
+        children,
       })
     )
   }
 
-  return jsx(CoreProvider, { theme },
-    jsx(ColorModeProvider, null,
-      jsx(BodyStyles, { theme }),
+  return jsx(
+    CoreProvider,
+    { theme },
+    jsx(
+      ColorModeProvider,
+      null,
+      jsx(BodyStyles),
       jsx(MDXProvider, {
         components,
-        children
+        children,
       })
     )
   )

packages/theme-provider/test/index.js

@@ -28,8 +28,8 @@ test('renders with theme', () => {
       theme={{
         useCustomProperties: false,
         colors: {
-          primary: 'tomato'
-        }
+          primary: 'tomato',
+        },
       }}>
       <h1 sx={{ color: 'primary' }}>Hello</h1>
     </ThemeProvider>
@@ -71,8 +71,8 @@ test('renders with nested provider', () => {
           styles: {
             h1: {
               color: 'cyan',
-            }
-          }
+            },
+          },
         }}>
         {mdx('h1', null, 'Hello')}
       </ThemeProvider>
@@ -117,6 +117,13 @@ test('renders global styles', () => {
         fontWeights: {
           body: 500,
         },
+        styles: {
+          root: {
+            fontFamily: 'body',
+            fontWeight: 'body',
+            lineHeight: 'body',
+          },
+        },
       }}>
       <h1>Hello</h1>
     </ThemeProvider>
@@ -129,9 +136,7 @@ test('renders global styles', () => {
 
 test('does not render invalid global styles', () => {
   const root = render(
-    <ThemeProvider
-      theme={{
-      }}>
+    <ThemeProvider theme={{}}>
       <h1>Hello</h1>
     </ThemeProvider>
   )
@@ -164,4 +169,3 @@ test('does not renders global styles', () => {
   expect(style.fontWeight).toBe('')
   expect(style.lineHeight).toBe('')
 })
-