Licence
MIT
Version
0.2.2
Deps
0
Size
47 kB
Vulns
0
Weekly
0
@trembus/tokens
The shared design-token foundation for the Trembus component libraries: the
var(--tcl-*) CSS custom properties, a type-safe token ontology, the color-coded
tone vocabulary, the 3-jobs ComponentContract type, and an axe a11y test helper.
React-free.
Part of the Trembus Component Library — browse the live Storybook →
pnpm add @trembus/tokensUse
Import the token layer system once (declares the @layer cascade, then the
light · dark · reliquary themes + material presets), and select a theme with a
data-theme attribute:
import '@trembus/tokens/styles.css';<html data-theme="dark">
<!-- light (default) · dark · reliquary -->
</html>Reference tokens from your own CSS — never hardcode a hex:
.thing {
background: var(--tcl-surface);
color: var(--tcl-text);
}The token strings + tone helpers are also available from JS:
import { tokens, toneVar } from '@trembus/tokens';Subpath exports
| Entry | What |
|---|---|
. |
tokens object, toneVar/toneFg, token types |
./contract |
the 3-jobs ComponentContract type |
./testing |
a11yViolations() axe helper (needs jest-axe) |
./styles.css |
the full layer system (themes + materials) |
./layers.css · ./light.css · ./dark.css · ./reliquary.css · ./materials.css |
individual layers |
Usually you consume tokens transitively via @trembus/ui.
License
MIT Nicholas Osto · source & contributing