@libka/tokens

The LibKa design tokens (W3C DTCG) with light, dark and high-contrast themes, as CSS custom properties, SCSS and Tailwind themes, with WCAG contrast gates.

latest

Source

npm

Version: 2.0.1

Version published: last week

Weekly downloads: 152

Maintainers: 1

Weekly downloads

Created: last week

Source

@libka/tokens

The LibKa design tokens: W3C Design Tokens (DTCG 2025.10) with light, dark and high-contrast themes, generated into CSS custom properties, SCSS, and Tailwind themes. Every text, button and badge colour pair passes WCAG contrast gates when the tokens are built.

npm install @libka/tokens

File	Import
CSS custom properties (`--lk-*`), all themes	`@libka/tokens/css`
SCSS variables	`@libka/tokens/scss`
Tailwind CSS v4 theme	`@libka/tokens/tailwind.css`
Tailwind CSS v3 preset (CommonJS)	`@libka/tokens/tailwind.config`
The DTCG source (`*.tokens.json`) and its resolver	`@libka/tokens/tokens/<name>.tokens.json`, `@libka/tokens/libka.resolver.json`

@import "@libka/tokens/css";
.note { color: var(--lk-text-primary); background: var(--lk-bg-canvas); }

Light is the default; data-theme="dark" on an element switches it and everything inside to dark, and data-contrast="high" or the reader's prefers-contrast: more setting to high contrast (7:1 text). Under prefers-reduced-motion: reduce the motion tokens become near zero. Version 2.0.1; the documentation is in the repository: https://github.com/aivigator-ai/open-libka-design-platform/blob/main/docs/tokens.md

Licence: Apache-2.0.