Grey scale
Every step follows --eun-color-grey-<step>, e.g. --eun-color-grey-500.
Ten steps, shared by every brand; only the semantic mapping flips
between light and dark (grey-0 is the lightest surface in light mode,
but the darkest in dark mode). Rendered here with real compiled CSS,
scoped to light/dark directly (not the toolbar's current selection),
using the same shade-chart layout as each
light
| 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|
| Grey | grey-0 | grey-100 | grey-200 | grey-300 | grey-400 | grey-500 | grey-600 | grey-700 | grey-800 | grey-900 |
dark
| 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | |
|---|---|---|---|---|---|---|---|---|---|---|
| Grey | grey-0 | grey-100 | grey-200 | grey-300 | grey-400 | grey-500 | grey-600 | grey-700 | grey-800 | grey-900 |
Usage
The --eun-text-color is --eun-color-grey-800). Reach for the neutral
token by name in component/app code; use the raw grey scale directly
only when you need a step the neutral tokens don't name.
.custom-divider {
background: var(--eun-color-grey-300);
}These values only apply once a theme stylesheet is loaded: see