Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-color] New Message/Action system colors #11199

Open
Crissov opened this issue Nov 13, 2024 · 3 comments
Open

[css-color] New Message/Action system colors #11199

Crissov opened this issue Nov 13, 2024 · 3 comments

Comments

@Crissov
Copy link
Contributor

Crissov commented Nov 13, 2024

Existing system color 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 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:

  • informative: πŸ”΅πŸŸ£ InfoText on Information
  • positive: 🟒 ConfirmText on Confirmation
  • cautious: 🟑🟠 WarnText on Warning
  • negative: πŸ”΄ FailText on Failure

(open to bikeshedding)

@Crissov Crissov changed the title [css-color] New system colors: [css-color] New Message/Action system colors Nov 13, 2024
@svgeesus
Copy link
Contributor

Sounds like you are trying to standardize (parts of) a design system?

@Crissov
Copy link
Contributor Author

Crissov commented Nov 13, 2024

Not one in particular, but since it’s called system colors, not operating system …

PS: Microsoftβ€˜s Fluent design system recognizes the existence of semantic colors for feedback, status and urgency, though. Apple HIG has named system colors instead (red, orange , yellow, green, mint, teal, cyan, blue, indigo, purple, pink, brown and gray).

@LeaVerou
Copy link
Member

LeaVerou commented Dec 4, 2024

I, for one, would enthusiastically welcome more ways to set and expose standard design tokens, and while it's not an ideal system, extending the set of system colors does appear to be the path of least resistance. I just added it to #10948

However, for these to be useful, they need to be settable by the page (with nice defaults from the OS/UA), following the pattern established by accent-color. We could even have a shorthand that sets all of these.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants