Tokens

Definition

Tokens are custom properties on :root inside the slean.tokens cascade layer, defined in oklch. Component files reference tokens and define none of their own; every var(--slean-…) in the package resolves to a token on this page. An unlayered override in your application always wins:

/* A theme is a set of token values. Redefine them on :root to retheme every primitive. */
:root {
	--slean-accent: oklch(45% 0.13 150);
	--slean-accent-hover: oklch(40% 0.13 150);
	--slean-accent-active: oklch(36% 0.12 150);
	--slean-radius-md: 0.25rem;
	--slean-font-sans: 'IBM Plex Sans', system-ui, sans-serif;
}

Semantic tokens (--slean-bg, --slean-fg, --slean-border) reference the neutral scale, so changing the scale retints every surface. A swatch shows the resolved default of the package; the controls on this site read the site's own palette through a token bridge instead (Themes).

Shape and spacing

Control heights

sm 32px, md 36px (the default of every form control, button and bar), lg 44px. A coarse pointer raises them to 40, 44 and 48px.

Icons (ADR 0007)

16×16 SVG masks. A primitive paints one with `background: currentColor; mask: var(--slean-icon-…) center / contain no-repeat`, so it takes the text color and follows the theme. Replace a token to swap an icon set.

Typography

Controls inherit the page font; apply --slean-font-sans to the page yourself.

Motion

The indicator duration is one turn of a loading indicator (the busy button and the spinner); reduced motion slows it instead of stopping it, so a still ring never reads as a stuck page.

Focus ring geometry

used by every :focus-visible outline.

Inputs a behavior writes as inline styles on its root

not theme tokens: the range slider's two values and the splitter's first pane, as percentages without the unit.

Neutral scale

1 = page background, 12 = strongest text. 8 is the control border, at least 3:1 against the surface and the page background in both themes.

Accent

Status

Surfaces that differ between the themes

Semantic surfaces and text

Info follows the accent unless a theme gives it a color of its own

Control shell (ADR 0007)

the field every form control shares (input, select, combobox, date picker and the other fields). The border is at least 3:1 against the surface; hover and focus take the accent and the focus ring is a soft halo of it; a disabled control sits on the muted surface.

Focus ring

used by every :focus-visible outline.

Media adjustments

Three media queries in the same file change token values for the whole document. They are listed here from the file as well.

Forced colors

The platform replaces most colors itself; only the tokens that stay author-controlled are mapped to system colors. Query: @media (forced-colors: active).

Reduced motion

Every duration becomes zero. Component files read the duration tokens and never a raw millisecond value, so every transition stops without a second rule. Query: @media (prefers-reduced-motion: reduce).

Coarse pointer

The small control height grows to the pointer target size; checkbox and switch add an invisible hit area of their own. Query: @media (pointer: coarse).

Source

packages/styles/css/tokens.css is the file this page is generated from; its parser is apps/docs/src/lib/data/tokens.ts. The package's static check (scripts/check.mjs) fails when a component file defines a token, references one that does not exist, or when the two dark blocks differ. Measured size of the file, minified: 2204 B gzip · 1895 B brotli.