@verdify/tokens
v0.9.0
Published
Verdify design tokens — W3C DTCG sources with Tailwind v4 preset, CSS vars, JS/TS, and raw JSON outputs
Readme
@verdify/tokens
Design tokens for Verdify — W3C DTCG sources translated to a Tailwind v4 preset, CSS variables, ES/CJS modules, TypeScript types, and raw JSON.
This is a private GitHub Packages release. See the BR-2 design spec and the BR-1 brand foundation for source-of-truth design decisions.
Install
Add an .npmrc to your consuming repo:
@verdify:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}Then install:
pnpm add @verdify/tokensGITHUB_TOKEN must have read:packages scope.
Consumer flavors
(A) Tailwind v4 (recommended for BR-3 / BR-4)
/* app/globals.css */
@import "tailwindcss";
@import "@verdify/tokens/preset";
/* Optional: opt in to adaptive surface bands (BR-1 §7.4 time-of-day) */
@import "@verdify/tokens/preset-adaptive";Utilities derived automatically by Tailwind v4:
<button
className="bg-brand-brand text-neutral-mist-50 rounded-md text-h3 shadow-md"
style={{ transition: "background var(--transition-modal-duration) var(--transition-modal-easing)" }}
>
Verify
</button>Note: the named motion.transition.* composites emit as CSS custom properties
(--transition-modal-duration, --transition-modal-easing, etc.), not as Tailwind
utility classes. Use them via var() inside style or in a CSS rule, alongside
Tailwind's own transition-* utilities for property selection.
To activate adaptive bands, set the data-adaptive attribute on <html>:
<html data-adaptive="day"> <!-- or dawn / dusk / night -->(B) Plain CSS variables
@import "@verdify/tokens/css";
.signin-button {
background: var(--color-brand-brand);
color: var(--color-neutral-mist-50);
border-radius: var(--radius-md);
transition: background var(--motion-duration-base) var(--motion-easing-verdify);
}(C) TypeScript / JavaScript runtime
The ESM/CJS module exports flat named constants (one per leaf token), matching Style
Dictionary v4's javascript/es6 and javascript/module formats:
import { ColorBrandBrand, MotionEasingVerdify } from "@verdify/tokens";
const brandViolet = ColorBrandBrand; // "#7c5cff"
const fastEasing = MotionEasingVerdify; // "cubic-bezier(0.2, 0.8, 0.2, 1)"For tree-style access (e.g. design tools enumerating all tokens), import the raw JSON instead:
import tokens from "@verdify/tokens/json"; // flat resolved JSON; keys like "color.brand.brand"Consumer guidance
Mobile inputs: avoid iOS auto-zoom
BR-1 §5.2 sets body text at 15px. iOS Safari auto-zooms focused inputs when their font-size is below 16px, which is disorienting and changes layout. Apply this reset in your global stylesheet (per BR-2 spec D-12):
input, select, textarea {
font-size: 16px;
}This overrides the inherited text-body size only on form controls; visual
rendering of body copy elsewhere is unaffected. Add it once at the consumer level —
BR-2 does not ship an alternative text-body-input role, by design.
Focus rings
Focus ring tokens (focus-ring-width, focus-ring-color, focus-ring-offset) are
emitted by the preset. Use them with:
*:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}The ring color resolves to semantic.signal (#4D9DFF). Verified ≥3:1 contrast
against all surfaces in this package's contrast-validation test.
Adaptive system
The adaptive sub-preset reassigns --color-surface-canvas and --color-text-primary
per band. If your consumer uses OS-level light/dark independent of the time-of-day
adaptive layer, you must add your own prefers-color-scheme rules — this package
deliberately does not layer a separate light/dark abstraction (spec §2, decision §4
item 3).
Package contents
| Path | Purpose |
|---|---|
| dist/preset.css | Tailwind v4 @theme block (primary consumer artifact) |
| dist/preset-adaptive.css | Opt-in adaptive band selectors |
| dist/tokens.css | Plain CSS variables |
| dist/tokens.mjs | ESM exports |
| dist/tokens.js | CJS exports |
| dist/tokens.d.ts | TypeScript types |
| dist/tokens.json | Flat resolved JSON |
| src/tokens/*.tokens.json | DTCG source (re-exported for downstream tooling) |
Versioning
Independent semver from verdify-brand. See spec §6 for the MAJOR/MINOR/PATCH discipline.
License
UNLICENSED (proprietary). All rights reserved.