[csswg-drafts] [css-color] New system colors: (#11199)

Crissov has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color] New system colors:  ==
Existing [system color](https://drafts.csswg.org/css-color/#css-system-colors) contexts in CSS:

* _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` ](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-prop) and may be influenced by it more directly in the future #9660. The accent context is also influenced by [`accent-color`](https://drafts.csswg.org/css-ui-4/#widget-accent) #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:

* _informative_: 🔵🟣 `InfoText` on `Information`
* _positive_: 🟢 `ConfirmText` on `Confirmation`
* _cautious_: 🟡🟠 `WarnText` on `Warning`
* _negative_: 🔴 `FailText` on `Failure`

(open to bikeshedding)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11199 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 13 November 2024 16:56:16 UTC