Add color and border pages

2024-11-28 22:01:43 +03:00 · 2019-08-12 14:50:38 -07:00 · 2019-08-12 14:50:38 -07:00 · 5cb2164458
commit 5cb2164458
parent b59407b0ce
6 changed files with 613 additions and 84 deletions
--- a/gatsby-docs/content/utilities/borders.mdx
+++ b/gatsby-docs/content/utilities/borders.mdx
@ -0,0 +1,234 @@
+---
+title: Borders
+path: utilities/borders
+status: Stable
+status_issue: 'https://github.com/github/design-systems/issues/72'
+source: 'https://github.com/primer/css/tree/master/src/utilities/borders.scss'
+bundle: utilities
+---
+
+import {palettes, borders} from '../../src/color-variables'
+import {PaletteTable, PaletteCell, PaletteValue} from '../../src/color-system'
+
+Utilities for borders, border radius, and box shadows.
+
+## Table of Contents
+
+## Default border
+
+The default border utility applies a solid, 1px border, with a default gray color.
+
+```html live
+<div class="border">
+  .border
+</div>
+```
+
+Borders can be applied to a specific edge or to the X and Y axes individually:
+
+```html live
+<div class="d-flex mb-3">
+  <div class="border-left col-3">
+    .border-left
+  </div>
+  <div class="border-top col-3">
+    .border-top
+  </div>
+  <div class="border-bottom col-3">
+    .border-bottom
+  </div>
+  <div class="border-right col-3">
+    .border-right
+  </div>
+</div>
+<div class="border-x">
+  .border-x
+</div>
+<div class="border-y">
+  .border-y
+</div>
+```
+
+Remove borders from all sides or a single side with `.border-0`, `.border-top-0`, `.border-right-0`, `.border-bottom-0`, `.border-left-0`.
+
+```html live
+<div class="Box border-top-0">
+  .border-top-0
+</div>
+```
+
+## Border colors
+
+Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.
+
+```html live
+<div class="border border-blue mb-2">
+  .border-blue
+</div>
+<div class="border border-blue-light mb-2">
+  .border-blue-light
+</div>
+<div class="border border-green mb-2">
+  .border-green
+</div>
+<div class="border border-green-light mb-2">
+  .border-green-light
+</div>
+<div class="border border-red mb-2">
+  .border-red
+</div>
+<div class="border border-red-light mb-2">
+  .border-red-light
+</div>
+<div class="border border-purple mb-2">
+  .border-purple
+</div>
+<div class="border border-yellow mb-2">
+  .border-yellow
+</div>
+<div class="border border-gray-light mb-2">
+  .border-gray-light
+</div>
+<div class="border border-gray-dark mb-2">
+  .border-gray-dark
+</div>
+```
+
+### Borders with alpha transparency
+
+Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
+
+```html live
+<div class="border border-black-fade bg-blue-light p-2 mb-2">
+  .border-black-fade .bg-blue-light
+</div>
+<div class="border border-black-fade bg-red-light p-2 mb-2">
+  .border-black-fade .bg-red-light
+</div>
+```
+
+On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`.
+
+```html live
+<div class="bg-gray-dark text-white p-3">
+  <div class="border border-white-fade p-2">
+    .border-white-fade
+  </div>
+</div>
+```
+
+Use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
+
+```html live
+<div class="bg-gray-dark text-white p-3 mb-3">
+  <div class="border-bottom border-white-fade-15 p-2 mb-2">
+    .border-white-fade-15
+  </div>
+  <div class="border-bottom border-white-fade-30 p-2 mb-2">
+    .border-white-fade-30
+  </div>
+  <div class="border-bottom border-white-fade-50 p-2 mb-2">
+    .border-white-fade-50
+  </div>
+  <div class="border-bottom border-white-fade-70 p-2 mb-2">
+    .border-white-fade-70
+  </div>
+  <div class="border-bottom border-white-fade-85 p-2 mb-2">
+    .border-white-fade-85
+  </div>
+</div>
+<div class="bg-blue text-white p-3">
+  <div class="border-bottom border-white-fade-15 p-2 mb-2">
+    .border-white-fade-15
+  </div>
+  <div class="border-bottom border-white-fade-30 p-2 mb-2">
+    .border-white-fade-30
+  </div>
+  <div class="border-bottom border-white-fade-50 p-2 mb-2">
+    .border-white-fade-50
+  </div>
+  <div class="border-bottom border-white-fade-70 p-2 mb-2">
+    .border-white-fade-70
+  </div>
+  <div class="border-bottom border-white-fade-85 p-2 mb-2">
+    .border-white-fade-85
+  </div>
+</div>
+```
+
+## Border style
+
+Use `border-dashed` to give an element a dashed border.
+
+```html live
+<div class="border border-dashed p-2">
+  .border-dashed
+</div>
+```
+
+## Rounded corners
+
+Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
+
+```html live
+<div class="Box rounded-0 mb-2">
+  .rounded-0
+</div>
+<div class="border rounded-1 mb-2">
+  .rounded-1
+</div>
+<div class="border rounded-2 mb-2">
+  .rounded-2
+</div>
+<div class="border circle p-3" style="width: 100px; height: 100px;">
+  .circle
+</div>
+```
+
+You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
+
+```html live
+<div class="border rounded-top-1 mb-2">
+  .rounded-top-1
+</div>
+<div class="border rounded-right-1 mb-2">
+  .rounded-right-1
+</div>
+<div class="border rounded-bottom-1 mb-2">
+  .rounded-bottom-1
+</div>
+<div class="border rounded-left-1 mb-2">
+  .rounded-left-1
+</div>
+```
+
+## Responsive borders
+
+You can adjust border widths on all sides or each side individually with responsive border utilities:
+
+- `border-(sm|md|lg|xl)` adds borders on all sides at and above the breakpoint. The `border-(sm|md|lg|xl)` shorthand is also supported.
+- `border-(sm|md|lg|xl)-0` removes borders from all sides at and above the breakpoint.
+- `border-(sm|md|lg|xl)-(top|right|bottom|left)` adds a border on the given side at and above the breakpoint.
+- `border-(sm|md|lg|xl)-(top|right|bottom|left)-0` the border from the given side at and above the breakpoint.
+
+```html live
+<div class="border-top border-sm-right border-md-bottom border-md-top-0">
+  .border-top
+  <span class="d-none d-sm-inline">.border-sm-right </span>
+  <span class="d-none d-md-inline">.border-md-bottom </span>
+  <span class="d-none d-lg-inline">.border-md-top-0 </span>
+</div>
+```
+
+## Border color utilities
+
+<PaletteTable
+  values={borders}
+  prefix="bg"
+  columns={[
+    {title: 'Class', Cell: PaletteCell.Border, Value: props => `.${props.aliases.border}`},
+    'variable',
+    'value'
+  ]}
+  style={{borderSpacing: '0 4px'}}
+/>
--- a/gatsby-docs/content/utilities/colors.mdx
+++ b/gatsby-docs/content/utilities/colors.mdx
@ -0,0 +1,184 @@
+---
+title: Colors
+description: 'Immutable, atomic CSS classes to rapidly build product'
+status: Stable
+status_issue: 'https://github.com/github/design-systems/issues/97'
+---
+
+import {Box, BorderBox} from '@primer/components'
+import {MarkdownHeading as Heading} from '@primer/blueprints'
+import {palettes, allColors} from '../../src/color-variables'
+import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
+const textColumns = [
+  {
+    title: 'Alias',
+    Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
+  },
+  'variable',
+  {title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
+]
+
+Use color utilities to apply color to the background of elements, text, and borders.
+
+## Background colors
+
+Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](../principles/accessibility).
+
+### Background utilities
+
+<PaletteTable>
+  {palettes.map(({name, title, value}) => (
+    <PaletteTableFragment name={name} type="bg" sparse key={name}>
+      <tr>
+        <PaletteHeading indicatorColor={value} colSpan="4">
+          {title}
+        </PaletteHeading>
+      </tr>
+    </PaletteTableFragment>
+  ))}
+</PaletteTable>
+
+## Text colors
+
+Use text color utilities to set text or [Octicons](https://octicons.github.com) to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](http://jxnblk.com/colorable/demos/text/). For more information, read our [accessibility standards](../principles/accessibility).
+
+These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. **⚠️ Any of the combinations with a warning icon must be used with caution**.
+
+### Text color inheritance
+
+You can set the color inheritance on an element by using the `text-inherit` class.
+
+```html live
+<div class="text-purple">This text is purple, <a href="#" class="text-inherit">including the link</a></div>
+```
+
+### Text on white background
+
+```html live
+<div class="text-blue mb-2">
+  .text-blue on white
+</div>
+<div class="text-gray-dark mb-2">
+  .text-gray-dark on white
+</div>
+<div class="text-gray mb-2">
+  .text-gray on white
+</div>
+<div class="text-red mb-2">
+  .text-red on white
+</div>
+<div class="text-orange mb-2">
+  .text-orange on white
+</div>
+<div class="text-orange-light mb-2">
+  .text-orange-light on white
+  <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
+</div>
+<div class="text-yellow mb-2">
+  .text-yellow on white
+  <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
+</div>
+<div class="text-green mb-2">
+  .text-green on white
+  <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span>
+</div>
+<div class="text-purple mb-2">
+  .text-purple on white
+</div>
+```
+
+### Text on colored backgrounds
+
+```html live
+<div class="text-white bg-blue mb-2">
+  .text-white on .bg-blue
+</div>
+<div class="bg-blue-light mb-2">
+  .text-gray-dark on .bg-blue-light
+</div>
+<div class="text-white bg-red mb-2">
+  .text-white on .bg-red
+</div>
+<div class="text-red bg-red-light mb-2">
+  .text-red on .bg-red-light
+</div>
+<div class="bg-green-light mb-2">
+  .text-gray-dark on .bg-green-light
+</div>
+<div class="bg-yellow-dark mb-2">
+  .text-gray-dark on .bg-yellow-dark
+</div>
+<div class="bg-yellow mb-2">
+  .text-gray-dark on .bg-yellow
+</div>
+<div class="bg-yellow-light mb-2">
+  .text-gray-dark on .bg-yellow-light
+</div>
+<div class="text-white bg-purple mb-2">
+  .text-white on .bg-purple
+</div>
+<div class="text-white bg-gray-dark mb-2">
+  .text-white on .bg-gray-dark
+</div>
+<div class="bg-gray">
+  .text-gray-dark on .bg-gray
+</div>
+```
+
+### Text color utilities
+
+<PaletteTable columns={textColumns}>
+  {palettes.map(({name, title, value}) => (
+    <PaletteTableFragment name={name} type="text" sparse prefix="color" columns={textColumns}>
+      <tr>
+        <PaletteHeading indicatorColor={value} colSpan="4">
+          {title}
+        </PaletteHeading>
+      </tr>
+    </PaletteTableFragment>
+  ))}
+</PaletteTable>
+
+## White background
+
+You can make a background explicitly white (`#fff`) with the `bg-white` utility:
+
+```html live
+<div class="bg-gray-dark p-2">
+  <span class="bg-white">.bg-white over .bg-gray-dark</span>
+</div>
+```
+
+## Link colors
+
+Base link styles turn links blue and apply an underline on hover. You can override the base link styles with text color utilities and the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
+
+Use `link-gray` to turn the link color to `$text-gray` and remain hover on blue.
+
+```html live
+<a class="link-gray" href="#url">link-gray</a>
+```
+
+Use `link-gray-dark` to turn the link color to `$text-gray-dark` and remain hover on blue.
+
+```html live
+<a class="link-gray-dark" href="#url">link-gray-dark</a>
+```
+
+Use `.muted-link` to turn the link light gray in color, and blue on hover or focus with no underline.
+
+```html live
+<a class="muted-link" href="#url">muted-link</a>
+```
+
+Use `link-hover-blue` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
+
+```html live
+<a class="text-gray-dark no-underline" href="#url">
+  A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
+</a>
+```
+
+## Border colors
+
+Border colors are documented on the [border utilities page](../utilities/borders#border-width-style-and-color-utilities).
--- a/gatsby-docs/package-lock.json
+++ b/gatsby-docs/package-lock.json
@ -1129,9 +1129,9 @@
      "integrity": "sha512-MyA2hoCY3UAmMKPHPN+LM1HrwGz5VR92fkEkIzAQgHBYMPstT77tjHkO8OPoWW//DShdYMYAgukZdMJ8lnsfbg=="
    },
    "@primer/gatsby-theme-doctocat": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.9.0.tgz",
-      "integrity": "sha512-q5kLcFIiu6G1OosqeNmuEffRosQq8CvjRWKzPt40Yo199i5mA8BBlr2UEtMbk3geuIsbgm6tqslXtYLT/Re3Jg==",
+      "version": "0.0.0-518bfcd",
+      "resolved": "https://registry.npmjs.org/@primer/gatsby-theme-doctocat/-/gatsby-theme-doctocat-0.0.0-518bfcd.tgz",
+      "integrity": "sha512-ybitJF0YQRr8WVzq/4drbn/5KIA6h3FWXKViANloem3WfyOQNb5Ci2TtQGAizEPMUDTAndAA8hQYSaQT9tsuXQ==",
      "requires": {
        "@mdx-js/mdx": "^1.0.21",
        "@mdx-js/react": "^1.0.21",
@ -1154,9 +1154,11 @@
        "gatsby-transformer-yaml": "^2.2.0",
        "get-pkg-repo": "^4.1.0",
        "github-slugger": "^1.2.1",
+        "html-react-parser": "^0.9.1",
        "pkg-up": "^3.1.0",
        "prism-react-renderer": "^0.1.7",
        "react-addons-text-content": "^0.0.4",
+        "react-element-to-jsx-string": "^14.0.3",
        "react-focus-lock": "^2.0.5",
        "react-frame-component": "^4.1.1",
        "react-helmet": "^5.2.1",
@ -1169,99 +1171,100 @@
      },
      "dependencies": {
        "@styled-system/background": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.0.21.tgz",
-          "integrity": "sha512-bMldiETp/zENaVaomWf1qRMdOqogbLeyOsFXvfrs3XyFDkLO8kfsS1LoR1JxDRTlPSrzlUiuLgdKP9BHinomsg==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.0.tgz",
+          "integrity": "sha512-ZkDuxKCIQY/Bu2OKGOoSWH7oGnECktccwBmdHm2nv3jjksx0LdqNu7VnRZSnrDFhWnvzwqsZRRSwd5X3UQUC+g==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/border": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.0.21.tgz",
-          "integrity": "sha512-L6wdBOTOzTioREF82xMfDJw81XsDbKjqKV8/Rl81We2uv/hbb7zak7m7aTjEyKeY2sf1W+TSSExhpt81335h9g==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.0.tgz",
+          "integrity": "sha512-T7wecQ0L/4bEOhbnOmBvrmNX+kdYC7ihurwTZVDwuJUpq0XlXL9bvSjeUPZ18vSg0uR6SjrAcrvPCNfy44KpoQ==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/color": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.0.21.tgz",
-          "integrity": "sha512-oj45krML1O6tU06LO6Mt4jjYO9cSJBSrAtiWl08TKSGknR27y6XVHi2AC02qATysbsEcuZhin70XljBWC2b7ZQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.0.tgz",
+          "integrity": "sha512-Rs7fmZJrUp7+PxT0VlS7wzK0EYGCr3ESj8CnPHEJGehzC12uPsHLq5ez0h7Sz6GDrEbhmKK4wuz1fFgRiPPqaA==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/core": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.0.21.tgz",
-          "integrity": "sha512-t2wxbq72vQu+SX80LzCoTaenaYCh/T3NbAHJ3uSIDz9DiK+2JTUBi4+mF7PJDDSh6ILHLnoDu+tinbuK7DNcHQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.0.tgz",
+          "integrity": "sha512-HW2ds0qCbmCeGufu0OjQhQ7w8gBHyUT7eeC6XwXwJm6vvLyclt23ervgdMiLhNF2i41Xu+tYFQnfeREZV9j9IA==",
          "requires": {
            "object-assign": "^4.1.1"
          }
        },
        "@styled-system/flexbox": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.0.21.tgz",
-          "integrity": "sha512-82whYM4wBTyDjVIQ5xTsFDrTLHUIMIRHq416Tbk7VzaBOJMfd9b5ZjOr8qFu83M2Iq1FLgbPyAfG7XVLIPpgDg==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.0.tgz",
+          "integrity": "sha512-/+wCgQdj/a7kyiEnEQFYZtydNqej3+cIUyTnTmhIi54E/kX9gK1GxkgxIjOPCWvsmblObFj1TVD2uQbsJRZiOA==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/grid": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.0.21.tgz",
-          "integrity": "sha512-k/Y5M0dfg+NwfN9Me6YHq8SN9Hi8yOoTTMHNpps+n5eB7/TrXNuMQTAEdn4vGl0V5Uw4feeV63mJpVIwfZUOMQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.0.tgz",
+          "integrity": "sha512-Ja2N8qcZY8VK5eS5sg6JHUEN+UteZsX5rHnfE4gJLGKEYbs/dKcEhil6b54XBICEd+FUKsLIS3OMgpUJI7SD6Q==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/layout": {
-          "version": "5.0.23",
-          "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.0.23.tgz",
-          "integrity": "sha512-lFSLMLamnpfEf3Gd7YvJp6US3BorX3hLRpqEnFrBOoqST2c4LT7WhGIQETgLikZpmGsa0sRYHDxIZD9G41Pgtg==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.0.tgz",
+          "integrity": "sha512-x9vx1McYHK77ZhKdqRCFlVEr9fMQFF2qBDUg5h49TGJOCoQQZil24TSZ7RyoSR2CHYzfj2SfAOU/D2kCb/x43g==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/position": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.0.21.tgz",
-          "integrity": "sha512-p6Q31WCB4r1Y1DWLf3KC9Zjuavzf6xPDoodz7tDR2B0y/prU6l9ioVP8wFTdnjr3Y/oWPgrwGhKokXBil2qaKQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.0.tgz",
+          "integrity": "sha512-xmOUlrOJgOpOVVYhpGpWuLKfWjKE1MhBsuA+J4uFHl2W+KXbA6Q4fzMsFV1dmDYwFEvx+nJav5jU+3V/yQ2ISg==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/shadow": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.0.21.tgz",
-          "integrity": "sha512-OB5s8qIIRA2meYbldIJ21PX4nz0Am33hM8FdzdVru4me93SBdOpYmnHgj5p4inI6yC+I+E9gh2+U6GZBdYr6hQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.0.tgz",
+          "integrity": "sha512-fYeZhtlUyuMKxt8n0VjvXYKnLhty1jCkdQFB9eqJlWRqENnLL7UWloTcdEKfVP1+GZ6P+QvSfzMulJqUw7fMMA==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/space": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.0.21.tgz",
-          "integrity": "sha512-QP3SqNu0Z2po4YaKWIHUY++caLe2IarCkaRQ/sLtXOBewusRwv/073vmocj5AaUnQBs7mVgF+dX77oS+KhclVQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.0.tgz",
+          "integrity": "sha512-rBCjAlXOLx8yVLTiG3noIelwDsFBYeFllH9Tf33/1oPZIWlykzLF3qOhyWLFjkjqfSyiu46+HzRcPwHgedoc8A==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/typography": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.0.21.tgz",
-          "integrity": "sha512-3nfFxOpYlq+eWoMk3Hd0AFScYWS3/9zkQCGFAzhV/ucLyTyV4lTqdHjsnCzhVIWUPe7JeCtCu7VDZ9eImIcrRA==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.0.tgz",
+          "integrity": "sha512-3XI25fwASdWrt49768yiLbnZ24MD1r/YZiEDwhvwHbikhWE7WWb6t6qHjvoh2KV4DLQpoM1It//EYbzFCZFosA==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0"
          }
        },
        "@styled-system/variant": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.0.21.tgz",
-          "integrity": "sha512-ec6pHwPjGxxgKT3WNuvtVUHCPNM9SUgHUV5Ysu0C9WPFTc4Tr5mwKE2gznYuQ7Pob/Af3+lDjQFRi1F8ZS8HEQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.0.tgz",
+          "integrity": "sha512-4YrBGpxutxMcdE10zzMeqMup7g/pUtuQkC3DS0rbn6D56ggS+wgFUuhVgqcoXbbbUeIwJyj+UjjPpZAU5oG8yg==",
          "requires": {
-            "@styled-system/core": "^5.0.21"
+            "@styled-system/core": "^5.1.0",
+            "@styled-system/css": "^5.0.23"
          }
        },
        "react-clientside-effect": {
@ -1285,22 +1288,22 @@
          }
        },
        "styled-system": {
-          "version": "5.0.23",
-          "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.0.23.tgz",
-          "integrity": "sha512-qkpl/lazc/N9dwysWOYGw1Xp4AwZkQPV7zWPpDdL7B1bZnMbdSsmeP6AAcXNJC5yrDiznkyMt+kvgU4tH3sYDw==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.0.tgz",
+          "integrity": "sha512-rlZvEXQKFDXHxAfVzph6GDowOyUb9PGZrE3pGgv6W8chEnG02HJrB6AfosNEEZzuQI2RdUX2piqnW4eEkG9lMg==",
          "requires": {
-            "@styled-system/background": "^5.0.21",
-            "@styled-system/border": "^5.0.21",
-            "@styled-system/color": "^5.0.21",
-            "@styled-system/core": "^5.0.21",
-            "@styled-system/flexbox": "^5.0.21",
-            "@styled-system/grid": "^5.0.21",
-            "@styled-system/layout": "^5.0.23",
-            "@styled-system/position": "^5.0.21",
-            "@styled-system/shadow": "^5.0.21",
-            "@styled-system/space": "^5.0.21",
-            "@styled-system/typography": "^5.0.21",
-            "@styled-system/variant": "^5.0.21",
+            "@styled-system/background": "^5.1.0",
+            "@styled-system/border": "^5.1.0",
+            "@styled-system/color": "^5.1.0",
+            "@styled-system/core": "^5.1.0",
+            "@styled-system/flexbox": "^5.1.0",
+            "@styled-system/grid": "^5.1.0",
+            "@styled-system/layout": "^5.1.0",
+            "@styled-system/position": "^5.1.0",
+            "@styled-system/shadow": "^5.1.0",
+            "@styled-system/space": "^5.1.0",
+            "@styled-system/typography": "^5.1.0",
+            "@styled-system/variant": "^5.1.0",
            "object-assign": "^4.1.1"
          }
        }
@ -1388,6 +1391,11 @@
        "object-assign": "^4.1.1"
      }
    },
+    "@styled-system/css": {
+      "version": "5.0.23",
+      "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.0.23.tgz",
+      "integrity": "sha512-yC3S0Iox8OTPAyrP1t5yY9nURUICcUdhVYOkwffftuxa5+txxI4qkT2e9JNCc2aaem+DG8mlXTdnYefjqge5wg=="
+    },
    "@styled-system/flexbox": {
      "version": "5.0.16",
      "resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.0.16.tgz",
@ -1445,17 +1453,17 @@
      }
    },
    "@styled-system/theme-get": {
-      "version": "5.0.21",
-      "resolved": "https://registry.npmjs.org/@styled-system/theme-get/-/theme-get-5.0.21.tgz",
-      "integrity": "sha512-YiNVNwLUJ0+6Ww2kjWmluuQGhY9RWahrZa5TG/QE++tIcU2UveM49QN6k05Y5bkycg3XvVBe+znGisfb9/yTEw==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@styled-system/theme-get/-/theme-get-5.1.0.tgz",
+      "integrity": "sha512-yaizi+B2Il7+P5P5E69vNKgnJ/gDWdXrtnQZ6+SpuG20VniWSXXBJQl21QqQVyubgUu5z3mIUeYnsRsMDw5QGg==",
      "requires": {
-        "@styled-system/core": "^5.0.21"
+        "@styled-system/core": "^5.1.0"
      },
      "dependencies": {
        "@styled-system/core": {
-          "version": "5.0.21",
-          "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.0.21.tgz",
-          "integrity": "sha512-t2wxbq72vQu+SX80LzCoTaenaYCh/T3NbAHJ3uSIDz9DiK+2JTUBi4+mF7PJDDSh6ILHLnoDu+tinbuK7DNcHQ==",
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.0.tgz",
+          "integrity": "sha512-HW2ds0qCbmCeGufu0OjQhQ7w8gBHyUT7eeC6XwXwJm6vvLyclt23ervgdMiLhNF2i41Xu+tYFQnfeREZV9j9IA==",
          "requires": {
            "object-assign": "^4.1.1"
          }
@ -1604,6 +1612,11 @@
      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-0.0.29.tgz",
      "integrity": "sha1-oeUUrfvZLwOiJLpU1pMRHb8fN1Q="
    },
+    "@types/domhandler": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/domhandler/-/domhandler-2.4.1.tgz",
+      "integrity": "sha512-cfBw6q6tT5sa1gSPFSRKzF/xxYrrmeiut7E0TxNBObiLSBTuFEHibcfEe3waQPEDbqBsq+ql/TOniw65EyDFMA=="
+    },
    "@types/events": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
@ -7614,6 +7627,11 @@
      "resolved": "https://registry.npmjs.org/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz",
      "integrity": "sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ=="
    },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz",
+      "integrity": "sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg=="
+    },
    "get-pkg-repo": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-4.1.0.tgz",
@ -8192,11 +8210,55 @@
      "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
      "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
    },
+    "html-dom-parser": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-0.2.2.tgz",
+      "integrity": "sha512-8qWXUf0JY8k21oPZIWN9VddADoac+TeNTvFyF/ZJ5JgtzDIt2Fk9uwUHYKkGHnZb2LPj3SeB2V4WK0Hn/MEH/Q==",
+      "requires": {
+        "@types/domhandler": "2.4.1",
+        "domhandler": "2.3.0",
+        "htmlparser2": "3.9.1"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.3.0.tgz",
+          "integrity": "sha1-LeWaCCLVAn+r/28DLCsloqir5zg=",
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "htmlparser2": {
+          "version": "3.9.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.1.tgz",
+          "integrity": "sha1-Yht6WLyazQA/evCiyaAKpnyFBdI=",
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "domhandler": "^2.3.0",
+            "domutils": "^1.5.1",
+            "entities": "^1.1.1",
+            "inherits": "^2.0.1",
+            "readable-stream": "^2.0.2"
+          }
+        }
+      }
+    },
    "html-entities": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
      "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8="
    },
+    "html-react-parser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-0.9.1.tgz",
+      "integrity": "sha512-hr5s4FvVeocxt9bZILNi/2571/JrxlLvyDzQr6WxOc2PeZXXF6s3r4UkXOHFHgFH3WV9DV7S75zNZfE78momsw==",
+      "requires": {
+        "@types/domhandler": "2.4.1",
+        "html-dom-parser": "0.2.2",
+        "react-property": "1.0.1",
+        "style-to-object": "0.2.3"
+      }
+    },
    "html-void-elements": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.4.tgz",
@ -8969,6 +9031,11 @@
        "has": "^1.0.1"
      }
    },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk="
+    },
    "is-relative": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
@ -10504,9 +10571,9 @@
      }
    },
    "node-abi": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.10.0.tgz",
-      "integrity": "sha512-OT0WepUvYHXdki6DU8LWhEkuo3M44i2paWBYtH9qXtPb9YiKlYEKa5WUII20XEcOv7UJPzfB0kZfPZdW46zdkw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.11.0.tgz",
+      "integrity": "sha512-kuy/aEg75u40v378WRllQ4ZexaXJiCvB68D2scDXclp/I4cRq6togpbOoKhmN07tns9Zldu51NNERo0wehfX9g==",
      "requires": {
        "semver": "^5.4.1"
      }
@ -12703,6 +12770,30 @@
        "scheduler": "^0.13.6"
      }
    },
+    "react-element-to-jsx-string": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.0.3.tgz",
+      "integrity": "sha512-ziZAm7OwEfFtyhCmQiFNI87KFu+G9EP8qVW4XtDHdKNqqprYifLzqXkzHqC1vnVsPhyp2znoPm0bJHAf1mUBZA==",
+      "requires": {
+        "is-plain-object": "3.0.0",
+        "stringify-object": "3.3.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.0.tgz",
+          "integrity": "sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==",
+          "requires": {
+            "isobject": "^4.0.0"
+          }
+        },
+        "isobject": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-4.0.0.tgz",
+          "integrity": "sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA=="
+        }
+      }
+    },
    "react-error-overlay": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",
@ -12798,6 +12889,11 @@
        "resize-observer-polyfill": "^1.5.0"
      }
    },
+    "react-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-1.0.1.tgz",
+      "integrity": "sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ=="
+    },
    "react-reconciler": {
      "version": "0.20.4",
      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.20.4.tgz",
@ -14698,6 +14794,16 @@
        "is-hexadecimal": "^1.0.0"
      }
    },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
    "strip-ansi": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
--- a/gatsby-docs/package.json
+++ b/gatsby-docs/package.json
@ -11,7 +11,7 @@
    "@loadable/component": "^5.10.2",
    "@primer/components": "^13.2.0",
    "@primer/css": "^12.4.1",
-    "@primer/gatsby-theme-doctocat": "^0.9.0",
+    "@primer/gatsby-theme-doctocat": "0.0.0-518bfcd",
    "@primer/octicons-react": "^9.1.1",
    "@svgr/webpack": "^4.3.2",
    "chroma-js": "^2.0.4",
--- a/gatsby-docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/gatsby-docs/src/@primer/gatsby-theme-doctocat/nav.yml
@ -21,32 +21,36 @@
  children:
    - title: Animations
      url: /utilities/animations
+    - title: Borders
+      url: /utilities/borders
+    - title: Marketing borders
+      url: /utilities/marketing-borders
    - title: Box shadow
      url: /utilities/box-shadow
+    - title: Colors
+      url: /utilities/colors
    - title: Details
      url: /utilities/details
    - title: Flexbox
      url: /utilities/flexbox
    - title: Layout
      url: /utilities/layout
-    - title: Margin
-      url: /utilities/margin
-    - title: Marketing borders
-      url: /utilities/marketing-borders
-    - title: Marketing filters
-      url: /utilities/marketing-filters
    - title: Marketing layout
      url: /utilities/marketing-layout
+    - title: Margin
+      url: /utilities/margin
    - title: Marketing margin
      url: /utilities/marketing-margin
+    - title: Marketing filters
+      url: /utilities/marketing-filters
    - title: Marketing padding
      url: /utilities/marketing-padding
-    - title: Marketing type
-      url: /utilities/marketing-type
    - title: Padding
      url: /utilities/padding
    - title: Typography
      url: /utilities/typography
+    - title: Marketing typography
+      url: /utilities/marketing-type
 - title: Objects
  url: /objects
  children:
--- a/gatsby-docs/src/table.js
+++ b/gatsby-docs/src/table.js
@ -6,6 +6,7 @@ import {fontSize} from 'styled-system'

 const Table = styled.table`
  display: table !important;
+  width: 100%;
  border-collapse: separate;
  border-spacing: ${props => props.borderSpacing};
  ${fontSize};