@basiiik/tokens
The Basiiik design tokens, in the DTCG 2025.10 format, with ready-to-use CSS variables and JS/TS constants. Use it on its own for any framework; @basiiik/ui bundles the same CSS.
npm install @basiiik/tokens
Use the CSS
@import '@basiiik/tokens/tokens.css'; /* Light, on :root */
@import '@basiiik/tokens/tokens.dark.css'; /* Dark, on [data-theme="dark"] */
/* or follow the OS instead: */
@import '@basiiik/tokens/tokens.dark-media.css';
.card { background: var(--color-bg-surface); color: var(--color-text-primary); padding: var(--spacing-4); border-radius: var(--radius-lg); }
Prefer semantic tokens (--color-bg-*, --color-text-*, --color-border-*, --color-icon-*): they switch with the theme. Core tokens (--color-gray-500) do not.
Use the constants
import { ColorBrand600 } from '@basiiik/tokens';
Start from your own primitives
dtcg/ holds the source: core/*.json (primitives) and semantic/light.json + dark.json (68 semantic colours that alias into core). Replace the brand scale in core/color.json, rebuild with Style Dictionary, and every semantic token follows.
import tokens from '@basiiik/tokens/dtcg/semantic/light.json' with { type: 'json' };
Licence: MIT.