Design tokens

Every colour, radius, motion, elevation, layering and density value in @azmr/ui is a CSS custom property declared in @azmr/ui/tokens.css. This page is generated from that file when the docs are built, so it cannot drift from it.

In the colour tables the swatch shows the light value on the left and the dark value on the right. Colours are OKLCH. The names follow shadcn/ui, so components from any shadcn registry fit alongside ours.

To change a token, override it in your own CSS after the import, for any scope:

:root {
  --primary: oklch(0.55 0.2 260);
}

.dark {
  --primary: oklch(0.75 0.15 260);
}

Shape

Surfaces

Brand and neutrals

Status

Destructive is shadcn's; success / warning / info are ours.

Lines and focus

--ring keeps >= 3:1 against every surface (WCAG 2.2).

Sidebar

Categorical chart palette

8 series), tuned for contrast and colour-vision deficiency. Found with a constrained search (>= 3.2:1 on surfaces, inside sRGB, maximising the worst pairwise CIEDE2000 under normal, protan, deutan and tritan vision); tokens.test.ts holds the thresholds.

Motion

Typography

createTheme({ font }) overrides --font-sans-stack.

Elevation

Layering

Density

Comfortable by default.

Density levels

Set data-density="compact" or data-density="spacious" on any element to change the density of everything inside it.

Contrast the tests guarantee

The values below are computed from the tokens above with the WCAG 2.x contrast formula. The package's own tests fail if any of them drops below its threshold, so a token change cannot make a component unreadable without a test failing.

Text on its surface (4.5:1)

Status colours as text on the page and on cards (4.5:1)

--warning is a yellow surface colour, so text in the warning tone uses --warning-text.

Focus ring (3:1)

Chart series on the page and on cards (3:1)

The eight chart colours are also tested to stay distinguishable from each other under normal vision, protanopia, deuteranopia and tritanopia.