@verta/tokens (0.3.0)
Installation
@verta:registry=npm install @verta/tokens@0.3.0"@verta/tokens": "0.3.0"About this package
@verta/tokens
The Verta design tokens — the vertaship palette as a reusable package.
Dark-first, cool-tinted neutrals, #3291ff accent, Geist typography, stacked
elevation. Source of truth: vertaship/internal/handler/web/static/style.css.
Ships:
tokens.css— raw sRGB-triplet channels in:root(dark) +:root.lightoverrides, plus radii (6/8/12/16 +pill), stacked shadows (--elev-1/2), fonts, and the blocker tokens & scales (focus-ring, scrim, scrollbar, data-viz palette, interaction states, spacing / z-index / motion — see below).theme.css— Tailwind v4 CSS-first@themepreset mapping the channels to utilities (bg-bg,text-fg,border-border,bg-accent/20,shadow-elev-1,bg-chart-1,ring-focus-ring,ease-standard…).fonts.css— Geist + Geist Mono (Google Fonts; optional — self-host instead).- a small JS surface (
prepaintScript,applyTheme,toggleTheme, channel maps).
Use (Tailwind v4)
In your entry CSS, in this order:
@import "@verta/tokens/fonts.css"; /* optional */
@import "@verta/tokens/tokens.css"; /* raw channels + .light switch */
@import "tailwindcss";
@import "@verta/tokens/theme.css"; /* @theme preset → utilities */
Avoid the theme flash by running the pre-paint script in <head>:
<script>/* paste prepaintScript from @verta/tokens */</script>
Blocker tokens & scales
Added for the M3 component set so primitives consume tokens, never hardcoded
values. All colour tokens are theme-aware (dark + .light); the scales are
theme-independent.
| Group | Tokens | Tailwind utility |
|---|---|---|
| Focus ring | --focus-ring (= accent) |
ring-focus-ring, outline-focus-ring |
| Overlay scrim | --scrim |
bg-scrim/70 (dialog/drawer/popover backdrop) |
| Scrollbar | --scrollbar-track, --scrollbar-thumb, --scrollbar-thumb-hover |
bg-scrollbar-thumb, … |
| Interaction | --accent-hover, --accent-active, --accent-disabled |
bg-accent-hover, … |
| Data-viz | --chart-1 … --chart-8 (8 distinct hues) |
bg-chart-1, text-chart-2, stroke-chart-3, … |
Scales (raw CSS vars — used via arbitrary values so they don't shadow Tailwind's
numeric scales — and mirrored on the JS surface as spacing / zIndex / motion):
| Scale | Tokens | Use |
|---|---|---|
| Spacing (4px grid) | --space-0 … --space-12 |
p-[var(--space-4)], gap-[var(--space-2)] |
| Z-index | --z-base/dropdown/sticky/overlay/modal/toast |
z-[var(--z-modal)] |
| Motion | --duration-fast/base/slow, --ease-standard/emphasized/out/in |
duration-[var(--duration-base)], ease-standard |
The snapshot test (test/tokens.snapshot.test.ts) asserts CSS ↔ JS parity for
every channel, dark/light key symmetry, chart-* ≥ 8 distinct hues, and the
scales staying in sync with index.ts.
Radii
--radius-sm/md/lg/xl (6 / 8 / 12 / 16px) → rounded-sm/md/lg/xl, plus
--radius-pill: 9999px → rounded-pill for fully-rounded pills, chips and
toggles (VERTA-367). Tailwind v4 generates the .rounded-pill utility from the
@theme token automatically; it is equivalent to the built-in rounded-full but
a named canon token, and is mirrored on the JS surface as radii.pill.
Migration note. Consumers that carried rounded-pill over from old local
Tailwind configs got a silent no-op under v4 (.rounded-pill resolved to
border-radius: 0 → square corners). They now get a working pill with no local
shim. Either rounded-pill (canon token) or the built-in rounded-full is
correct; the kit itself uses rounded-full.
Develop
pnpm --filter @verta/tokens build # tsc + copy CSS to dist/
pnpm --filter @verta/tokens test # snapshot: CSS vars vs canonical hex
pnpm --filter @verta/tokens preview:dev # live palette/typography, both themes
Dependencies
Development dependencies
| ID | Version |
|---|---|
| @tailwindcss/vite | ^4.1.13 |
| tailwindcss | ^4.1.13 |
| typescript | ^5.6.2 |
| vite | ^6.3.6 |
| vitest | ^2.1.3 |