Neutral tokens

Surface, text, and border tokens shared by every brand. Each one is a named alias onto a specific step of the grey scale, so they automatically flip between light and dark along with it.

Token	Swatch	Maps to
--eun-surface-color		--eun-color-grey-0
--eun-border-color / --eun-divider-color		--eun-color-grey-300
--eun-disabled-color		--eun-color-grey-200
--eun-content-hover		translucent overlay
--eun-content-pressed		translucent overlay
--eun-text-color		--eun-color-grey-800
--eun-text-secondary		--eun-color-grey-700
--eun-readonly-color / --eun-text-readonly-color		--eun-color-grey-600 / --eun-color-grey-400
--eun-placeholder-color / --eun-text-disabled-color / --eun-disabled-content		--eun-color-grey-400 / --eun-color-grey-500 / --eun-color-grey-400

Usage

These are the tokens to reach for in almost all app-level CSS: they carry semantic meaning ("this is the surface color") and stay correct across every brand and mode, unlike reaching for a raw grey step directly.

.custom-card {
  background: var(--eun-surface-color);
  color: var(--eun-text-color);
  border: 1px solid var(--eun-border-color);
}

.custom-card[aria-disabled="true"] {
  background: var(--eun-disabled-color);
  color: var(--eun-text-disabled-color);
}

This is exactly the pattern eun-button's disabled state and eun-tab-group's divider use internally. See Theming for how the whole token cascade fits together.

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

Brand-tinted variants

The tokens above are deliberately brand-independent: --eun-surface-color is the same white (light) / grey-0 (dark) no matter which prebuilt theme is active, so a component built against it never clashes with any brand.

Each one also has a -tint counterpart that mixes a small amount (5%) of the active theme's primary-500 into that same base value. These stay opt-in and are not used by any component internally — reach for them only when you deliberately want a surface, divider, or hover wash that reads as "branded" rather than neutral.

Token	Swatch	Derived from
--eun-surface-tint		--eun-surface-color + 5% primary
--eun-border-tint / --eun-divider-tint		--eun-border-color + 5% primary
--eun-content-hover-tint		--eun-content-hover + 5% primary
--eun-content-pressed-tint		--eun-content-pressed + 5% primary

.branded-card {
  background: var(--eun-surface-tint);
  border: 1px solid var(--eun-border-tint);
}

.branded-card:hover {
  background: var(--eun-content-hover-tint);
}

Text and disabled/readonly tokens intentionally don't get a tint variant: those carry a legibility or muted-state contract that a brand wash would work against.