Theming

Components read semantic and component tokens. Base ramps (--ax-gray-*, --ax-accent-*, status hues) stay internal. Override a semantic token to theme the library.

Tiers

Import the stylesheet once:

@import "./styles/depute.css";

That file loads four layers:

1. Base — 12-step gray, one accent, and status hues. Light is the default. Dark follows data-theme="dark", a .dark class, or prefers-color-scheme, unless the page sets data-theme="light" or .light.
2. Semantic — surfaces, text, borders, status pairs, type, space, radius, shadow, and motion.
3. Component — card, button, badge, meter, and row tokens.
4. Legacy — the 0.4 names, aliased for this minor version.

Fonts are not bundled. Install @fontsource/geist-sans and @fontsource/geist-mono, or use next/font. The stack falls back to the system font.

Density

Set data-ax-density="comfortable" on a parent to raise card padding, row height, and the default button height. Compact is the default. Coarse pointers raise the button and row height to 44px.

<div data-ax-density="comfortable">
  <!-- depute components -->
</div>

Rename map

Status text uses step 11 on a step 3 tint so the pair stays at least 4.5:1 in both themes.