verta
Repositories
4
 Projects Packages
22

@verta/tokens (0.1.0)

Published 2026-05-28 20:05:35 +00:00 by forgeadmin

Installation

@verta:registry=
npm install @verta/tokens@0.1.0
"@verta/tokens": "0.1.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.light overrides, plus radii (6/8/12/16), stacked shadows (--elev-1/2) and fonts.
  • theme.css — Tailwind v4 CSS-first @theme preset mapping the channels to utilities (bg-bg, text-fg, border-border, bg-accent/20, shadow-elev-1…).
  • 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 "tailwindcss";
@import "@verta/tokens/theme.css";
@import "@verta/tokens/tokens.css";

Avoid the theme flash by running the pre-paint script in <head>:

<script>/* paste prepaintScript from @verta/tokens */</script>

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
Details
npm
2026-05-28 20:05:35 +00:00
21
UNLICENSED
4.5 KiB
Assets (1)
tokens-0.1.0.tgz 4.5 KiB
Versions (3) View all
0.3.0 2026-06-01
0.2.0 2026-05-31
0.1.0 2026-05-28