Design tokens and v2 theme runtime for Tiny Design.
npm install @tiny-design/tokens
# or
pnpm add @tiny-design/tokensImport the compiled CSS to get all v2 token CSS variables:
import '@tiny-design/tokens';
// or explicitly
import '@tiny-design/tokens/css/base.css';| Module | Description |
|---|---|
css/base.css |
Package CSS entry copied from the base theme CSS |
dist/css/base.css |
v2 light/dark/system theme CSS variables |
dist/css/light.css |
Light theme CSS variables |
dist/css/dark.css |
Dark theme CSS variables |
dist/registry.json |
Token registry for tooling |
runtime/* |
Theme presets, resolver, and validator runtime modules |
All visual tokens are delivered as CSS custom properties (--ty-*). Override them in your stylesheet:
:root {
--ty-color-primary: #007bff;
--ty-border-radius: 4px;
}Light and dark themes are supported via the data-tiny-theme attribute on the document root:
<html data-tiny-theme="dark">Three modes are available: light, dark, and system (follows prefers-color-scheme).
Component tokens are scoped by component name and should not be shared across different components, even when the semantics line up closely.
For example, DatePicker and Calendar intentionally use parallel token groups without sharing the same key space:
date-picker.header-*andcalendar.header-*date-picker.panel-item-*andcalendar.panel-item-*date-picker.today-*andcalendar.today-*
This keeps token semantics aligned across related components while allowing each component to evolve or be themed independently.
MIT