mirror of
https://github.com/primer/css.git
synced 2024-12-27 08:05:06 +03:00
5f7bb45c21
* Update utilities * Create proud-scissors-compete.md * Update spacing * Remove `-subtle` and `-muted` Co-authored-by: Jon Rohan <yes@jonrohan.codes>
106 lines
5.7 KiB
Plaintext
106 lines
5.7 KiB
Plaintext
---
|
|
title: Colors
|
|
description: 'Immutable, atomic CSS classes to rapidly build product'
|
|
status: Beta
|
|
---
|
|
|
|
<Note>
|
|
Please note Primer CSS v18 has changed the naming of these color classes. Check the <a href="/css/support/v18-migration">migration guide</a> to make sure your app is up to date.
|
|
</Note>
|
|
|
|
Use color utilities to apply color to the background of elements, text, and borders.
|
|
|
|
## Text
|
|
|
|
Use text color utilities to set text 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](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
|
|
|
```html live
|
|
<div class="color-fg-default mb-1">.color-fg-default</div>
|
|
<div class="color-fg-muted mb-1">.color-fg-muted</div>
|
|
<div class="color-fg-subtle mb-4">.color-fg-subtle</div>
|
|
|
|
<div class="color-fg-accent mb-1">.color-fg-accent</div>
|
|
<div class="color-fg-success mb-1">.color-fg-success</div>
|
|
<div class="color-fg-attention mb-1">.color-fg-attention</div>
|
|
<div class="color-fg-severe mb-1">.color-fg-severe</div>
|
|
<div class="color-fg-danger mb-1">.color-fg-danger</div>
|
|
<div class="color-fg-done mb-1">.color-fg-done</div>
|
|
<div class="color-fg-sponsors mb-4">.color-fg-sponsors</div>
|
|
|
|
<div class="color-fg-on-emphasis color-bg-accent-emphasis p-2 rounded">.color-fg-on-emphasis</div>
|
|
```
|
|
|
|
You can set the color inheritance on an element by using the `color-fg-inherit` class.
|
|
|
|
```html live
|
|
<div class="color-fg-success">This text is green, <a href="#" class="color-fg-inherit">including the link</a></div>
|
|
```
|
|
|
|
## Background
|
|
|
|
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](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).
|
|
|
|
```html live
|
|
<div class="color-bg-default p-2 rounded mb-2">.color-bg-default</div>
|
|
<div class="color-bg-overlay p-2 rounded mb-2">.color-bg-overlay</div>
|
|
<div class="color-bg-inset p-2 rounded mb-2">.color-bg-inset</div>
|
|
<div class="color-bg-subtle p-2 rounded mb-2">.color-bg-subtle</div>
|
|
<div class="color-bg-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-emphasis</div>
|
|
|
|
<div class="color-bg-accent p-2 rounded mb-2">.color-bg-accent</div>
|
|
<div class="color-bg-accent-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-accent-emphasis</div>
|
|
|
|
<div class="color-bg-success p-2 rounded mb-2">.color-bg-success</div>
|
|
<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-success-emphasis</div>
|
|
|
|
<div class="color-bg-attention p-2 rounded mb-2">.color-bg-attention</div>
|
|
<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-attention-emphasis</div>
|
|
|
|
<div class="color-bg-severe p-2 rounded mb-2">.color-bg-severe</div>
|
|
<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-severe-emphasis</div>
|
|
|
|
<div class="color-bg-danger p-2 rounded mb-2">.color-bg-danger</div>
|
|
<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-danger-emphasis</div>
|
|
|
|
<div class="color-bg-done p-2 rounded mb-2">.color-bg-done</div>
|
|
<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-done-emphasis</div>
|
|
|
|
<div class="color-bg-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
|
|
<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</div>
|
|
```
|
|
|
|
## Border
|
|
|
|
Override default border colors with the following utilities.
|
|
|
|
```html live
|
|
<div class="border color-border-default p-2 rounded mb-2">.color-border-default</div>
|
|
<div class="border color-border-muted p-2 rounded mb-2">.color-border-muted</div>
|
|
<div class="border color-border-subtle p-2 rounded mb-4">.color-border-subtle</div>
|
|
|
|
<div class="border color-border-accent p-2 rounded mb-2">.color-border-accent</div>
|
|
<div class="border color-border-accent-emphasis p-2 rounded mb-4">.color-border-accent-emphasis</div>
|
|
|
|
<div class="border color-border-success p-2 rounded mb-2">.color-border-success</div>
|
|
<div class="border color-border-success-emphasis p-2 rounded mb-4">.color-border-success-emphasis</div>
|
|
|
|
<div class="border color-border-attention p-2 rounded mb-2">.color-border-attention</div>
|
|
<div class="border color-border-attention-emphasis p-2 rounded mb-4">.color-border-attention-emphasis</div>
|
|
|
|
<div class="border color-border-severe p-2 rounded mb-2">.color-border-severe</div>
|
|
<div class="border color-border-severe-emphasis p-2 rounded mb-4">.color-border-severe-emphasis</div>
|
|
|
|
<div class="border color-border-danger p-2 rounded mb-2">.color-border-danger</div>
|
|
<div class="border color-border-danger-emphasis p-2 rounded mb-4">.color-border-danger-emphasis</div>
|
|
|
|
<div class="border color-border-done p-2 rounded mb-2">.color-border-done</div>
|
|
<div class="border color-border-done-emphasis p-2 rounded mb-4">.color-border-done-emphasis</div>
|
|
|
|
<div class="border color-border-sponsors p-2 rounded mb-2">.color-border-sponsors</div>
|
|
<div class="border color-border-sponsors-emphasis p-2 rounded">.color-border-sponsors-emphasis</div>
|
|
```
|
|
|
|
## Link
|
|
|
|
You can use the [Link](../components/links) component to change the link colors.
|