From b501ecb0ac8af0b068f5e9f2308096dff716e0c7 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 25 Mar 2021 11:05:41 -0700 Subject: [PATCH] Adding note to color-systems doc --- docs/content/support/color-system.mdx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/docs/content/support/color-system.mdx b/docs/content/support/color-system.mdx index 1b47a5e6..776e570e 100644 --- a/docs/content/support/color-system.mdx +++ b/docs/content/support/color-system.mdx @@ -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. - - -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. - - + + 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. + ### Text