Merge pull request #821 from dburles/minor-docs-updates

Add ColorKeys component to docs

Author: jxnblk

packages/docs/src/components/color-keys.mdx

@@ -0,0 +1,9 @@
+| Key          | Description                                                                                                     |
+| ------------ | --------------------------------------------------------------------------------------------------------------- |
+| `text`       | Body foreground color                                                                                           |
+| `background` | Body background color                                                                                           |
+| `primary`    | Primary brand color for links, buttons, etc.                                                                    |
+| `secondary`  | A secondary brand color for alternative styling                                                                 |
+| `accent`     | A contrast color for emphasizing UI                                                                             |
+| `highlight`  | A background color for highlighting text                                                                        |
+| `muted`      | A faint color for backgrounds, borders, and accents that do not require high contrast with the background color |

packages/docs/src/pages/theme-spec.mdx

@@ -3,6 +3,7 @@ title: Theme Spec
 ---
 
 import ThemeScales from '../components/theme-scales'
+import ColorKeys from '../components/color-keys'
 
 # Theme Specification
 
@@ -36,7 +37,7 @@ A theme does not require that all these fields be present and can include additi
     primary: '#07c',
     secondary: '#05a',
     accent: '#609',
-    muted: '#f6f6f6f',
+    muted: '#f6f6f6',
   },
   fonts: {
     body: 'system-ui, sans-serif',
@@ -59,14 +60,7 @@ A theme does not require that all these fields be present and can include additi
 
 The `theme.colors` scale (i.e. color palette) should be an object literal with the following keys.
 
-| Key          | Description                                                                                                     |
-| ------------ | --------------------------------------------------------------------------------------------------------------- |
-| `text`       | Body foreground color                                                                                           |
-| `background` | Body background color                                                                                           |
-| `primary`    | Primary brand color for links, buttons, etc.                                                                    |
-| `secondary`  | A secondary brand color for alternative styling                                                                 |
-| `accent`     | A contrast color for emphasizing UI                                                                             |
-| `muted`      | A faint color for backgrounds, borders, and accents that do not require high contrast with the background color |
+<ColorKeys />
 
 Other color keys can be added, including raw color values for aliasing the values above.
 

packages/docs/src/pages/theming.mdx

@@ -2,6 +2,8 @@
 title: Theming
 ---
 
+import ColorKeys from '../components/color-keys'
+
 # Theming
 
 Theming with Theme UI is based on a [Theme Specification][] including a `theme.styles` object for styling MDX elements and other components.
@@ -14,15 +16,7 @@ By adhering to a standard Theme Specification, Theme UI is designed to be intero
 Add a `theme.colors` object to provide colors for a theme.
 In order to ensure color palettes are as interoperable as possible, the following color keys should be used for defining a base set of colors:
 
-| Key          | Description                                     |
-| ------------ | ----------------------------------------------- |
-| `text`       | body color                                      |
-| `background` | body background color                           |
-| `primary`    | primary button and link color                   |
-| `secondary`  | secondary color - can be used for hover states  |
-| `accent`     | a contrast color for emphasizing UI             |
-| `highlight`     | a background color for highlighting text
-| `muted`      | a gray or subdued color for decorative purposes |
+<ColorKeys />
 
 Beyond these base colors, any additional values can be added to a theme to augment the base color palette.