Merge pull request #870 from joe-bell/master

Add default theme key for Text

Author: jxnblk

packages/components/src/Text.js

@@ -2,5 +2,5 @@ import React from 'react'
 import Box from './Box'
 
 export const Text = React.forwardRef((props, ref) => (
-  <Box ref={ref} {...props} __themeKey="text" />
+  <Box ref={ref} variant="default" {...props} __themeKey="text" />
 ))

packages/components/test/__snapshots__/index.js.snap

@@ -492,12 +492,6 @@ exports[`Embed renders 1`] = `
 `;
 
 exports[`Field renders 1`] = `
-.emotion-2 {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: 0;
-}
-
 .emotion-0 {
   box-sizing: border-box;
   margin: 0;
@@ -527,6 +521,12 @@ exports[`Field renders 1`] = `
   background-color: transparent;
 }
 
+.emotion-2 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
 <div
   className="emotion-2"
 >
@@ -1313,6 +1313,7 @@ exports[`Text renders 1`] = `
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
+  font-size: 20px;
 }
 
 <div

packages/components/test/index.js

@@ -63,6 +63,9 @@ const theme = {
     },
   },
   text: {
+    default: {
+      fontSize: 3,
+    },
     heading: {
       fontSize: 5,
     },

packages/docs/src/pages/components/text.mdx

@@ -24,11 +24,16 @@ import { Text } from 'theme-ui'
 ## Variants
 
 Text style variants can be defined in the `theme.text` object.
+The Text component uses `theme.text.default` as its default variant style.
 
 ```js
 // example theme variants
 {
   text: {
+    default: {
+      color: 'text',
+      fontSize: 3,
+    },
     caps: {
       textTransform: 'uppercase',
       letterSpacing: '0.2em',