Semantic states

Four status colors (success, warning, critical, info), each with 4 shades 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>-<shade>, e.g. --eun-color-critical-100. 100 is the saturated foreground tone (icon, border, button background); 90/50/30 are progressively lighter backgrounds for banners and soft badges.

Usage

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

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.