Theming
Restyle the entire SoroPass UI through one OKLCH token file, picking a skin or overriding tokens, while the components never change.
One OKLCH token file is the only styling surface for every SoroPass UI component. Pick a skin, override tokens, done. The components never change.
Skins
Two skins ship by default: light (the default :root) and dark. Set [data-theme="dark"] on any wrapping element; dark overrides only the values that change.
<div data-theme="dark">…</div>Theme builder
The same data-theme swap re-themes every screen and state. No component code changes. Toggle light / dark below and the real component re-themes live; the :root block updates to paste straight into your app. Each preview on the Components page carries its own light / dark toggle too.
Interactive create preview
The real component runs in mock mode on the demo. Open the demo →
The builder exposes four axes: skin (light / dark), brand accent (indigo, teal, violet, …), corner radius, and density. It 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 / -warning (+ -soft, -warning-line) | Distinct: errors assertive, warnings advisory, 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) | Working-state 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.
Components
Drop-in, token-driven create, sign, recover, connect, and add-device screens for Stellar smart-account passkeys (framework-agnostic vanilla DOM).
SDK reference
The @soropass/core create + sign primitives, covering ES256-only registration, public-key extraction, passkey-signed Soroban auth entries, and the frozen error taxonomy.