0.3.0 • Published yesterday

@kwtv/tokens

Licence

UNLICENSED

Version

0.3.0

Deps

Vulns

Weekly

Summary Dependency Versions

@kwtv/tokens

KWTV design tokens: colour, typography, spacing, shape and motion, with light and dark themes. CSS, SCSS and JSON work independently of any framework.

Install

npm install @kwtv/tokens

Import the CSS once in your app's root layout:

---
import "@kwtv/tokens/tokens.css";
---

<html lang="nl">
  <body>
    <slot />
  </body>
</html>

The default theme follows the operating system. Set data-theme="light" or data-theme="dark" on the root element to choose a theme explicitly.

Exports

Import	Contents
`@kwtv/tokens/tokens.css`	CSS custom properties and theme rules.
`@kwtv/tokens/utilities.css`	Optional utility classes. Load after the tokens.
`@kwtv/tokens/tokens.json`	Token data for tools and applications.
`@kwtv/tokens/tokens.scss`	SCSS variables.
`@kwtv/tokens`	Typed token exports as TypeScript source, supported by Astro/Vite.

The root TypeScript entry requires a toolchain that processes TypeScript dependencies. The CSS, SCSS and JSON entries do not require it.

import { palette } from "@kwtv/tokens";

CSS modules can compose the utility classes:

.button {
  composes: bg-primary text-primary-fg p-4 radius-md from "@kwtv/tokens/utilities.css";
}

Prefer semantic roles over raw palette values when a colour should follow the current theme.

Development

Token files are generated in the design-system repository. Edit internal/scripts/build-tokens.py, then run:

npm run tokens:build
npm run tokens:check

The checks validate sanctioned colour pairings and generated CSS.