Ocean theme

Style sheet path:

node_modules/eunomia-elements/styles/themes/prebuilt-themes/ocean/eunomia-ocean.theme.scss

Class names:

eunomia-ocean-theme
eunomia-ocean-theme--dark

Sass import:

@include eunomia-ocean-theme();
@include eunomia-ocean-dark-theme();

On this site, select "Ocean" from the toolbar's theme picker to preview it live: every swatch below is instead scoped to this theme directly (via data-brand="ocean"), so it always shows Ocean's real colors regardless of what's active in the toolbar.

Primary & secondary

Grey scale

Shared shape across every theme; only the primary/secondary hue above actually changes per brand.

Semantic states

Success/warning/critical/info: identical across every theme (they're brand-independent), but not across modes. -100 is the opaque anchor (computed separately per mode so it clears WCAG AA against that mode's surface), and -90/-50/-30 are alpha overlays of the light-mode anchor, reading correctly on both surfaces from the same declaration. See Light & dark via transparency.

Neutral tokens

Surface, text, and border tokens, also shared across every theme.

Surface tint

Unlike the neutral tokens above, these mix a small amount of this theme's own primary-500 into the surface/border/hover tokens — opt-in for when a component wants to read as "Ocean" rather than neutral. See Foundations: Neutral tokens.

Decorative scales

Static accents (tags, charts, illustrations): 7 steps, brand-independent but not mode-independent, each hue's dark variant inverts the light scale's lightness curve so 100/700 stay usable as a background/foreground pair on a dark surface. Full chart on Foundations: Color.

All decorative/state/grey/neutral tables above render with this theme's own compiled CSS (via data-brand="ocean"), not the toolbar's current selection. See all prebuilt themes or Foundations: Color for the brand-independent reference.