Design Tokens

All of OAS-UI's visual language is driven by CSS variables (semantic tokens). Components in principle reference semantic tokens only — no hardcoded colors, font sizes or spacing (a few extreme-value/preset exceptions exist) — so theming means overriding CSS variables, without touching components.

Semantic colors

Components reference semantic tokens only — light and dark values below.

Primary

--oas-color-primary

Success

--oas-color-success

Warning

--oas-color-warning

Danger

--oas-color-danger

Text primary

--oas-color-text-primary

Text secondary

--oas-color-text-secondary

Border

--oas-color-border

Background

--oas-color-bg

Background hover

--oas-color-bg-hover

Overlay

--oas-color-overlay

Type scale

xs · 12pxAa--oas-font-size-xs

sm · 13pxAa--oas-font-size-sm

md · 14pxAa--oas-font-size-md

lg · 16pxAa--oas-font-size-lg

xl · 20pxAa--oas-font-size-xl

Spacing · radius · control height

Spacing (4px base)

1 · 4

--oas-space-1

2 · 8

--oas-space-2

3 · 12

--oas-space-3

4 · 16

--oas-space-4

5 · 24

--oas-space-5

6 · 32

--oas-space-6

Radius

--oas-radius-sm

--oas-radius-md

--oas-radius-lg

Control height

sm · 24

--oas-control-height-sm

md · 32

--oas-control-height-md

lg · 40

--oas-control-height-lg

xl · 48

--oas-control-height-xl

Try it live

Adjust the tokens below — each one maps to what the preview components actually consume. Every change applies to the host immediately.

One-click themes

Click a color above to re-theme instantly, or adjust individual tokens below.

--oas-color-primary

--oas-radius-sm

--oas-radius-md

--oas-font-size-xs

--oas-font-size-sm

--oas-font-size-md

Primary action

primary

success

warning

danger

Agree to terms

Custom theme in code

:root {
  --oas-color-primary: #7c3aed;
  --oas-radius-md: 8px;
  --oas-control-height-md: 36px;
}

Built-in themes

Switch on the root element (<html> or any container) via data-theme:

`data-theme`	Description
`light` (default)	Light
`dark`	Dark
`high-contrast`	WCAG AAA friendly, stronger border/text contrast

html

<html data-theme="dark">
  …
</html>

document.documentElement.dataset.theme = 'high-contrast'

Custom theme by overriding tokens

css

:root {
  /* brand */
  --oas-color-primary: #7c3aed;
  --oas-color-primary-hover: #8b5cf6;
  --oas-color-primary-active: #6d28d9;

  /* sizing */
  --oas-radius-md: 8px;
  --oas-control-height-md: 36px;
}

Token groups

Group	Variables
Brand	`--oas-color-primary(-hover/-active)`, `--oas-color-success`, `--oas-color-warning`, `--oas-color-danger`
Text	`--oas-color-text-primary/-secondary/-disabled`
Border / bg	`--oas-color-border`, `--oas-color-bg(-hover/-disabled)`, `--oas-color-overlay`
Font size	`--oas-font-size-xs/sm/md/lg/xl`
Spacing	`--oas-space-1/1_5/2/2_5/3/4/4_5/5/6` (4px base, half steps included)
Radius	`--oas-radius-xs/sm/md/lg/xl`
Control	`--oas-control-height-xs/sm/md/lg/xl`
Motion	`--oas-transition-fast/base`, `--oas-ease-out/in-out`
Z-index	`--oas-z-dropdown/sticky/fixed/overlay/modal/message/toast/tooltip`
Focus ring	`--oas-focus-ring`

Reduced motion

The library honors prefers-reduced-motion — transitions and animations shorten automatically when the OS prefers reduced motion.

Spec reference: docs/ui-spec.md §1 token system.

Design Tokens ​