Semantic Color Usage

[Courtny]

You can use semantic colors to visualize the status or state of business data.

Semantic colors denote standard value states (such as good, bad, or warning). Each color has the same basic meaning in all contexts. Nearly all input controls could support semantic colors.

Semantic colors will mostly be seen used for notification banners and form erroring across the system.

[Courtny]

@wibjorn We should discuss whether we'd like to support light blue banners.

[wibjorn]

All the base version of the theme colors should be fine as backgrounds so long as they are using their invert color as the text.

.background-color-primary (background color)
.color-primary-invert (text color)

There's a change we could run into some complexities if we're expecting multiple button colors or other elements on top of them.

[wibjorn]

Currently the names of our semantic colors are as follows (I've put their color on light theme in parentheses).

• primary (blue)
• secondary (grey)
• tertiary (dark navy)
• success (green)
• info (purple)
• warning (yellow)
• danger (red)

[Courtny]

Current guidance for semantic coloring: