primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-30 01:04:04 +03:00
Code Issues Projects Releases Wiki Activity

Adding note to color-systems doc

Browse Source
This commit is contained in:
Jon Rohan 2021-03-25 11:05:41 -07:00
parent baf2db0d9d
commit b501ecb0ac
No known key found for this signature in database
GPG Key ID: B0BBE304A9A0AECB
1 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/content/support/color-system.mdx
View File

@ -17,13 +17,11 @@ import {PaletteTable, PaletteCell, ColorModeTable, CSSModeVars, overlayColor} fr
The Primer color system contains multiple color modes; currently, Primer ships with a light mode and a dark mode. Each color mode comes with a set of CSS variables that can be used to style elements based on the functionality of the element. These should be used instead of specifying colors directly so that the colors adapt correctly when switching between color modes.
When at all possible, favor using [color utility classes](/utilities/colors) over using custom CSS to set colors.
When at all possible, favor using [color utility classes](/utilities/colors) over using custom CSS to set colors. Because the new Primer CSS color system is based on *functional* colors, you should only use colors designed for the element you're applying them to. For example, text colors, which start with `--color-text-`, should not be used for icons, backgrounds, or any other non-text element.
<Flash scheme="yellow">
Note: because the new Primer CSS color system is based on *functional* colors, you should only use colors designed for the element you're applying them to. For example, text colors, which start with `--color-text-`, should not be used for icons, backgrounds, or any other non-text element.
</Flash>
<Note>
Please note Primer v16 has changed the naming of these color classes to *functional*. Check the migration guide to make sure your app is up to date.
</Note>
### Text