Color

The semantic color roles every esa-* component reads. This theme re-points them at the brand — swatches paint from their token and the values below are read live from the active theme, so this page always reflects the real skin, not hub defaults.

Primitive ramps

Raw brand material this spoke defines. Semantic roles below re-point onto these.

Blue — Noria brand

100

200

300

400

500

600

700

800

900

950

Green — Noria accent

100

200

300

400

500

600

700

800

900

950

Semantic roles

What components actually reference. Re-point these in theme-*.css and the whole kit re-skins with no forks.

Brand

The spoke identity. Everything interactive chains off --color-primary.

--color-primary — Brand anchor — buttons, links, focus rings, active states.

--color-primary-hover —

--color-primary-active —

--color-primary-subtle — Brand-tinted surface — selected rows, callout tiles, pills.

--color-primary-border — Soft brand border, pairs with primary-subtle.

--color-secondary —

--color-secondary-hover —

--color-accent — Accent role — hub default is orange; a spoke may re-point.

--color-accent-hover —

AI

Reserved tint for AI-authored surfaces and actions.

--color-ai —

--color-ai-hover —

--color-ai-subtle —

Surface

--color-background — Page background.

--color-surface — Card / panel surface.

--color-surface-elevated —

--color-surface-sunken —

--color-surface-inverse — Darkest chrome — top app bars, dark nav.

--color-surface-inverse-hover —

Text

--color-text-primary —

--color-text-secondary —

--color-text-tertiary —

--color-text-muted —

--color-text-inverse —

--color-text-link —

--color-text-link-hover —

Border

--color-border —

--color-border-light —

--color-border-strong —

--color-border-focus — Focus ring — equals --color-primary.

Feedback

Status palette. Each also has a -subtle (fill) and -border variant.

--color-info —

--color-success —

--color-warning —

--color-danger —

Disabled

--color-disabled-bg —

--color-disabled-text —

--color-disabled-border —