Semantic states

Four status colors (success, warning, critical, info), each with an opaque tone, five translucent washes, and a genuine dark-mode variant (same idea as the decorative scales, tuned per shade rather than derived from a single formula). Scoped to light/dark directly below, same shade-chart layout as Grey scale and each prebuilt theme.

--eun-color-<state>-100, e.g. --eun-color-critical-100, is the saturated foreground tone (icon, border, button background). --eun-color-<state>-alpha-<N> is that tone at N% opacity, from alpha-5 to alpha-40, for banners and soft badges. It's the same scale as the brand colors' alpha-* tokens. --eun-color-<state>-text is the tone darkened until it reaches a 4.5:1 contrast ratio on its own pale wash: use it for text in a state color, and for a fill holding white text. In dark mode it equals -100.

Usage

.custom-banner--critical {
  background: var(--eun-color-critical-alpha-5);
  border: 1px solid var(--eun-color-critical-alpha-30);
  color: var(--eun-color-critical-text);
}

eun-button's critical variant uses --eun-color-critical-100 directly for its background. See Button: Variants.

These values only apply once a theme stylesheet is loaded: see Foundation → Import for how to load it per framework.