@lovince/tokens
The raw design values of Lovince UI: colour primitives, space, radius, type, motion, blur and layering. They are decided once here, and every other package consumes them. No dependencies.
Status:
0.3.0, experimental. Token names may change before1.0.
bun add @lovince/tokens
Tokens carry no meaning. --lovince-blue-600 is a colour, not "the accent".
Meaning comes from @lovince/themes, which maps these primitives
onto semantic roles. Most apps want both.
Three tiers
| Tier | Package | Example | Who references it |
|---|---|---|---|
| Primitive | @lovince/tokens | --lovince-blue-600, --lovince-space-4, --lovince-duration-enter | Themes, and components for non-colour scales |
| Semantic | @lovince/themes | --lovince-color-surface, --lovince-color-accent | Components |
| Component | each package | --journey-primary | Consumers overriding one component |
Rebranding edits a primitive. Dark mode edits semantics. Neither touches a component.
Use it
@import '@lovince/tokens/tokens.css';
.panel { padding: var(--lovince-space-4); border-radius: var(--lovince-radius-lg); }
import { duration, ease, space, contrastRatio } from '@lovince/tokens'
gsap.to(el, { duration: duration.enter, ease: ease.out.gsap })
Every selector is wrapped in :where(), so a plain :root { --lovince-… }
override always wins, whatever the import order.
Decisions
- Palette: slate neutrals with blue 600 (
#2563eb) as the brand accent, plus red, green and amber for status, all in OKLCH. - Space is a 4px scale. Durations sit on a 40ms step: press 120 · fast 160 · micro 200 · state 280 · morph 360 · enter 440 · overlay 560 · travel 720. Each easing ships with its GSAP equivalent, so CSS and JS motion never disagree.
- Type is addressed by role (
title-md,body-sm…), never by size. Fonts default to system stacks; set--lovince-font-sansto brand a product. - Weight floor: nothing is set lighter than 500.
Editing
The source is src/. css/tokens.css is generated: run bun run generate
from the repository root, never edit it by hand. A test fails if the committed
file drifts from the source.
License
MIT