link: π΅ LinkText, π£ VisitedText, π΄ ActiveText, or (disabled) β« GrayText on any background, but usually on Canvas
canvas: CanvasText on Canvas
button: ButtonText on ButtonFace inside ButtonBorder
field: FieldText on Field
highlight: HighlightText on Highlight
mark: π‘ MarkText on Mark
selection: SelectedItemText on SelectedItem
accent: AccentColorText on AccentColor
They are all implicitly influenced by color-scheme and may be influenced by it more directly in the future #9660. The accent context is also influenced by accent-color #5900.
Many generic or corporate design systems specify a limited set of base colors (or rather hues). This usually includes a primary and a secondary brand color, custom β« dark/black and βͺ light/white, but also often a neutral gray, a positive π’ green (confirmation action or success message), a negative π΄ red (cancel action or failure message) and an in-between π‘ yellow or π orange (warning message), sometimes an informative π΅ blue or π£ purple. They may be used to systematically derive more tints and shades.
Operating system and browser color themes may not cover all of them, although they may be used in their GUIs, e.g. for painting icons or buttons.
The traffic light colors in particular are also frequently found in colored qualitative scales for criteria such as priority, urgency, impact, status, progress, severity, probability or risk. Many CMS contain features for admonition text boxes of various types that are indicated by color, icon or both; e.g.: π΅ note, π’ tip, π‘ warning, π΄ caution, π£ important.
Although the color values may end up being the same as for Mark, LinkText, VisitedText or ActiveText, the following proposed suggestions for new (message and action) system colors are clearly semantically distinct and come in foreground / background pairs:
Existing system color contexts in CSS:
LinkText
, π£VisitedText
, π΄ActiveText
, or (disabled) β«GrayText
on any background, but usually onCanvas
CanvasText
onCanvas
ButtonText
onButtonFace
insideButtonBorder
FieldText
onField
HighlightText
onHighlight
MarkText
onMark
SelectedItemText
onSelectedItem
AccentColorText
onAccentColor
They are all implicitly influenced by
color-scheme
and may be influenced by it more directly in the future #9660. The accent context is also influenced byaccent-color
#5900.Many generic or corporate design systems specify a limited set of base colors (or rather hues). This usually includes a primary and a secondary brand color, custom β« dark/black and βͺ light/white, but also often a neutral gray, a positive π’ green (confirmation action or success message), a negative π΄ red (cancel action or failure message) and an in-between π‘ yellow or π orange (warning message), sometimes an informative π΅ blue or π£ purple. They may be used to systematically derive more tints and shades. Operating system and browser color themes may not cover all of them, although they may be used in their GUIs, e.g. for painting icons or buttons.
The traffic light colors in particular are also frequently found in colored qualitative scales for criteria such as priority, urgency, impact, status, progress, severity, probability or risk. Many CMS contain features for admonition text boxes of various types that are indicated by color, icon or both; e.g.: π΅ note, π’ tip, π‘ warning, π΄ caution, π£ important.
Although the color values may end up being the same as for
Mark
,LinkText
,VisitedText
orActiveText
, the following proposed suggestions for new (message and action) system colors are clearly semantically distinct and come in foreground / background pairs:InfoText
onInformation
ConfirmText
onConfirmation
WarnText
onWarning
FailText
onFailure
(open to bikeshedding)