mirror of
https://github.com/primer/css.git
synced 2024-12-01 12:42:32 +03:00
Add color and border pages
This commit is contained in:
Cole Bemis
parent
b59407b0ce
commit
5cb2164458
234
gatsby-docs/content/utilities/borders.mdx
Normal file
234
gatsby-docs/content/utilities/borders.mdx
Normal file
@ -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'}}
|
||||
/>
|
||||
184
gatsby-docs/content/utilities/colors.mdx
Normal file
184
gatsby-docs/content/utilities/colors.mdx
Normal file
@ -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).
|
||||
256
gatsby-docs/package-lock.json
generated
256
gatsby-docs/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user