Theming
Restyle the entire SoroPass UI through one OKLCH token file — pick a skin or override tokens, while the components never change.
One OKLCH token file is the only styling surface. Pick a skin, override tokens, done — the components never change.
Skins
Three skins ship by default. Set [data-theme] on any wrapping element; dark and teal override only the values that change.
<div data-theme="dark">…</div>Light and dark — one token swap, every state
The same 22 component states, re-themed by nothing but a data-theme token override — no component code changes. Generated from the reference demo (pnpm exec playwright test screenshots).
data-theme="dark")Theme builder
Toggle light / dark and the real component re-themes live — the :root block updates to paste into your app.
The builder exposes four axes — skin (light / dark / teal), brand accent, corner radius, and density — and emits a :root override like the following:
:root {
--pk-color-brand: oklch(0.55 0.18 264);
--pk-radius-lg: 16px;
--pk-radius-md: 12px;
--pk-space-6: 24px;
}Token reference
~70 tokens across these groups. The shipped tokens.css is canonical (note --pk-progress-duration: 1400ms).
| Group | Tokens | Purpose |
|---|---|---|
| Color | --pk-color-brand / -hover / -active / -on-brand / -soft | Primary button, focus, accents |
| Color | --pk-color-background / -surface / -surface-sunken | Page, card, wells |
| Color | --pk-color-text / -muted / -faint | Text scale |
| Color | --pk-color-border / -border-strong | Hairlines, inputs |
| Status | --pk-color-success / -error / -info (+ -soft) | Distinct: errors assertive, progress calm |
| Shape | --pk-radius-none … -full | Corner scale |
| Space | --pk-space-0 … -10 | Spacing scale |
| Type | --pk-font-sans / -mono, --pk-text-xs … -xl, --pk-weight-* | Family, size, weight, leading |
| Focus | --pk-focus-color / -width / -offset / -halo | Visible focus ring |
| Busy | --pk-busy-opacity, --pk-scrim, --pk-disabled-opacity | OS-sheet dim + scrim |
| Spinner | --pk-spinner-* , --pk-progress-* (--pk-progress-duration 1400ms) | We're-working looks |
| Elevation | --pk-shadow-sm/md/lg, --pk-z-card/overlay/toast | Layers under the OS sheet |
| Motion | --pk-ease, --pk-duration-fast/base/slow, --pk-pulse-duration | Transitions + reduced-motion fallback |
The token gate
A machine-enforced CI gate means passkey.css references only var() tokens — restyle the whole
set by overriding tokens, never by editing components.
Primitives
The token-driven building blocks the create, sign, and recover screens compose from — each individually usable.
Framework decision
SoroPass UI ships framework-agnostic at every layer — headless logic and a vanilla-DOM styled layer, with no React/Vue/Svelte runtime dependency. Here is why, and how to adopt it in any framework.