Edit docs

jxnblk · jxnblk · commit c6e7e532858d · 2020-01-10T16:46:56.000-05:00
diff --git a/packages/components/src/Input.js b/packages/components/src/Input.js
@@ -18,7 +18,7 @@ export const Input = React.forwardRef((props, ref) => (
       border: '1px solid',
       borderRadius: 4,
       color: 'inherit',
-      bg: 'background',
+      bg: 'transparent',
     }}
   />
 ))
diff --git a/packages/components/src/Textarea.js b/packages/components/src/Textarea.js
@@ -18,7 +18,7 @@ export const Textarea = React.forwardRef((props, ref) => (
       border: '1px solid',
       borderRadius: 4,
       color: 'inherit',
-      bg: 'background',
+      bg: 'transparent',
     }}
   />
 ))
diff --git a/packages/docs/src/pages/customize.js b/packages/docs/src/pages/customize.js
@@ -22,17 +22,13 @@ import Button from '../components/button'
 const reducer = (state, next) => merge({}, state, next)
 
 export default props => {
-  // TODO
-  // const [ theme, setTheme ] = useReducer(reducer, {...presets.base})
-  // const context = { theme, setTheme, }
-  // const json = stringify(context.theme, { indent: '  ' })
+  const [theme, setTheme] = useReducer(reducer, { ...presets.base })
+  const json = stringify(theme, { indent: '  ' })
 
   return (
     <div>
-      <Styled.h1>
-        Create a Custom Theme
-      </Styled.h1>
-      <EditorProvider theme={presets.base}>
+      <Styled.h1>Create a Custom Theme</Styled.h1>
+      <EditorProvider theme={theme}>
         <b>Colors</b>
         <Theme.Colors size={64} />
         <div
@@ -45,48 +41,47 @@ export default props => {
             bg: 'background',
           }}>
           <TypeStyle
-            fontFamily='heading'
-            lineHeight='heading'
-            fontWeight='heading'
-            fontSize={[ 5, 6 ]}>
-            Aa <FontFamily name='heading' />
+            fontFamily="heading"
+            lineHeight="heading"
+            fontWeight="heading"
+            fontSize={[5, 6]}>
+            Aa <FontFamily name="heading" />
           </TypeStyle>
           <TypeStyle fontSize={3}>
-            Aa <FontFamily name='body' />
+            Aa <FontFamily name="body" />
           </TypeStyle>
         </div>
-        <Theme.Fonts />
+        <Grid columns={3}>
+          <Theme.Fonts />
+        </Grid>
         <div sx={{ my: 2 }}>
           <b>Font Sizes</b>
-          <Grid>
+          <Grid columns={9}>
             <Theme.FontSizes />
           </Grid>
         </div>
         <div sx={{ my: 2 }}>
           <div>
             <b>Font Weights</b>
-            <Grid>
+            <Grid columns={3}>
               <Theme.FontWeights />
             </Grid>
           </div>
           <div>
             <b>Line Heights</b>
-            <Grid>
+            <Grid columns={3}>
               <Theme.LineHeights />
             </Grid>
           </div>
         </div>
         <div sx={{ my: 2 }}>
           <b>Space</b>
-          <Grid>
+          <Grid columns={9}>
             <Theme.Space />
           </Grid>
         </div>
-        <p>
-          Note: some web fonts may not render unless installed locally.
-        </p>
+        <p>Note: some web fonts may not render unless installed locally.</p>
       </EditorProvider>
-      {/* TODO
       <Button
         onClick={e => {
           copy(json)
@@ -100,7 +95,6 @@ export default props => {
           overflowY: 'auto',
         }}
       />
-      */}
     </div>
   )
 }
diff --git a/packages/docs/src/pages/guides/global-styles.mdx b/packages/docs/src/pages/guides/global-styles.mdx
@@ -8,6 +8,9 @@ import Note from '../../components/note'
 
 Use the Emotion `Global` component to add global CSS with theme-based values.
 
+By default, the `ThemeProvider` component will apply styles in `theme.styles.root` to the `<body>` element.
+It will also apply `color` and `background-color` styles based on `theme.colors.text` and `theme.colors.background` respectively.
+
 <Note>
 Generally, you should try to avoid adding CSS to global scope.
 Many styles can be safely encapsulated into a component without the need for global styles.
@@ -20,9 +23,8 @@ import { Global } from '@emotion/core'
 export default props =>
   <Global
     styles={theme => ({
-      body: {
-        color: theme.colors.text,
-        backgroundColor: theme.colors.background,
+      *: {
+        boxSizing: 'border-box',
       }
     })}
   />
diff --git a/packages/docs/src/pages/guides/motivation.mdx b/packages/docs/src/pages/guides/motivation.mdx
@@ -46,7 +46,7 @@ For many, the choice between using object literal syntax for styles versus tagge
 The `theme` object itself is an object, and keeping styles in a similar format helps reduce the API surface area.
 Using and parsing strings that represent embedded DSLs introduces overhead when mapping over key-value pairs.
 Theme UI avoids this overhead for reasons related to performance, testing, and overall bundle size.
-For some of the [same reasons](https://facebook.github.io/jsx/) that React itself uses JSX (i.e. function calls) instead of tagged template literals, Theme UI only included support for authoring CSS with object literal syntax.
+For some of the [same reasons](https://facebook.github.io/jsx/) that React itself uses JSX (i.e. function calls) instead of tagged template literals, Theme UI only includes support for authoring CSS with object literal syntax.
 Additionally, using native JavaScript types has many other benefits that are outside of the scope of this document.
 
 ## Why Emotion
diff --git a/packages/docs/src/pages/styled.mdx b/packages/docs/src/pages/styled.mdx
@@ -43,39 +43,9 @@ This can also be used to style components like the Gatsby `Link` component to ma
 </Styled.a>
 ```
 
-## `Styled.root`
+## Body Styles
 
-By default, Theme UI does _not_ apply any global styles for typography.
-To apply top-level typographic styles, the `Styled.root` component can be used to wrap any page layout or MDX document.
-By adding styles to `theme.styles.root`, this component will apply any base styles that you define.
+To add base typographic styles to the `<body>` element, add styles to `theme.styles.root`.
+Previous versions of Theme UI used the `Styled.root` component.
+See the [theming docs](/theming/#body-styles) for more information.
 
-```js
-// example theme.js
-export default {
-  fonts: {
-    body: 'system-ui, sans-serif',
-    monospace: 'Menlo, monospace',
-  },
-  fontWeights: {
-    body: 400,
-    heading: 700,
-  },
-  lineHeights: {
-    body: 1.5,
-    heading: 1.125,
-  },
-  styles: {
-    root: {
-      fontFamily: 'body',
-      fontWeight: 'body',
-      lineHeight: 'body',
-    },
-  },
-}
-```
-
-```jsx
-<Styled.root>
-  <MyMDXDocument />
-</Styled.root>
-```
diff --git a/packages/docs/src/pages/theming.mdx b/packages/docs/src/pages/theming.mdx
@@ -121,6 +121,33 @@ Styles within this object have access to other values in the theme object, such
 }
 ```
 
+## Body Styles
+
+To add base, top-level styles to the `<body>` element, use `theme.styles.root`.
+
+```js
+// example with root styles
+{
+  fonts: {
+    body: 'system-ui, sans-serif',
+    heading: 'Georgia, serif',
+  },
+  fontWeights: {
+    body: 400,
+    heading: 700,
+  },
+  styles: {
+    root: {
+      // uses the theme values provided above
+      fontFamily: 'body',
+      fontWeight: 'body',
+    },
+  },
+}
+```
+
+To disable applying styles to the `<body>` element, add the `useBodyStyles: false` flag to your theme.
+
 ## Breakpoints
 
 To configure the default breakpoints used in responsive array values, add a `breakpoints` array to your theme.
