Tokens only

Load a theme stylesheet

Install the tokens package, the only one this page uses:

npm install @oddkin/tokens@beta

The default theme is one stylesheet, the @oddkin/tokens/css/default.css export. Its declarations sit in the odd.tokens cascade layer, so any unlayered CSS on your page overrides them.

<link rel="stylesheet" href="/node_modules/@oddkin/tokens/dist/css/default.css" />

The link points into node_modules, so serve the page from the project’s root with any static file server. With a bundler, import the stylesheet from a module instead:

import '@oddkin/tokens/css/default.css';

Use semantic tokens

Read semantic roles (what a value is for), not reference ramps: --odd-color-text-primary follows the light or dark mode and any theme scope it sits in.

.notice {
  color: var(--odd-color-text-primary);
  background: var(--odd-color-surface-raised);
  padding: var(--odd-space-md);
  border-radius: var(--odd-radius-md);
}

Scope a theme, mode, or density to part of a page with data-odd-mode, data-odd-theme, data-odd-product, and data-odd-density attributes; scopes nest in any order.

<aside data-odd-mode="dark" class="notice">Shown in the dark mode.</aside>

Generate your own theme

One brand colour is enough for a complete theme. oddkin-tokens checks a theme file and writes CSS, typed references, values, and DTCG documents.

npx oddkin-tokens init
npx oddkin-tokens check oddkin.theme.json
npx oddkin-tokens build oddkin.theme.json --out tokens

See Theming for roles, scopes, and overrides, and Foundations for every token of the default theme.