primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-28 16:45:52 +03:00
Code Issues Projects Releases Wiki Activity

add color utility swatches, clean up

Browse Source
This commit is contained in:
Shawn Allen 2019-05-23 11:28:24 -07:00
parent bdeb22b158
commit a95437e05d
1 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
pages/css/utilities/colors.md
View File

@ -22,16 +22,16 @@ Use color utilities to apply color to the background of elements, text, and bord
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
## Foreground utilities
There are background color utility classes for every color in our [color system](/css/support/color-system) (except fades). The class names follow the convention:
There are utility classes to set the `color` CSS property (text color, and for octicons) to every color in our [color system](/css/support/color-system) (except fades). The class names follow the convention:
```
bg-{name}-{index}
color-{name}-{index}
```
<details open>
<summary class="h3">See the full list of background utilities</summary>
<details>
<summary class="h4">See the full list of foreground utilities</summary>
<div class="d-flex flex-wrap mr-md-n3">
{Object.entries(colors)
.filter(([name, value]) => Array.isArray(value))
@ -39,14 +39,51 @@ bg-{name}-{index}
<div className="my-3 col-12 col-md-6 pr-md-3">
{
values.map((value, index) => ({
className: `bg-${name}-${index}`,
selector: `.color-${name}-${index}`,
variable: `$${name}-${index}00`,
value
}))
.map(({className, variable, value}) => {
.map(({selector, variable, value}) => {
return (
<Flex flexJustify="space-between" bg={overlayColor(value)} color={value} mb={1} p={3}>
<span className="text-mono flex-auto mr-3">{selector}</span>
<span className="text-mono flex-auto mr-3">{variable}</span>
<span className="text-mono">{value}</span>
</Flex>
)
})
}
</div>
))
}
</div>
</details>
### Background utilities
There are also utility classes to set the background color every color in our [color system](/css/support/color-system) (except fades). The class names follow the convention:
```
bg-{name}-{index}
```
<details>
<summary class="h4">See the full list of background utilities</summary>
<div class="d-flex flex-wrap mr-md-n3">
{Object.entries(colors)
.filter(([name, value]) => Array.isArray(value))
.map(([name, values]) => (
<div className="my-3 col-12 col-md-6 pr-md-3">
{
values.map((value, index) => ({
selector: `.bg-${name}-${index}`,
variable: `$${name}-${index}00`,
value
}))
.map(({selector, variable, value}) => {
return (
<Flex flexJustify="space-between" bg={value} color={overlayColor(value)} mb={1} p={3}>
<span className="text-mono flex-auto mr-3">{className}</span>
<span className="text-mono flex-auto mr-3">{selector}</span>
<span className="text-mono flex-auto mr-3">{variable}</span>
<span className="text-mono">{value}</span>
</Flex>
@ -176,6 +213,7 @@ bg-{name}-{index}
</div>
</div>
## 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).