@vakwerk/tokens

Design tokens for the Vakwerk sites, built with Style Dictionary from DTCG JSON.

Exports

• @vakwerk/tokens/tokens.css: the built stylesheet with all tokens as CSS custom properties.
• @vakwerk/tokens/dark.css: dark-mode overrides, applied through prefers-color-scheme: dark, [data-theme="dark"] and .dark.
• @vakwerk/tokens/tokens/*: the DTCG JSON source files.
• @vakwerk/tokens/config: the Style Dictionary configuration.
• @vakwerk/tokens/fluid-transform: the Style Dictionary transform that turns dimension tokens with a fluid extension into clamp() values.

Usage

Import tokens.css, then optionally dark.css, then the site's theme.css:

---
import '@vakwerk/tokens/tokens.css';
import '@vakwerk/tokens/dark.css';
import '../styles/theme.css';
---

A site theme overrides --color-brand-solid, --color-brand-bg and --font-family.

--font-family-numeric is the font for numbers in tables, fact lists and answers; by default it equals --font-family.

Colour layers

Colours come in three layers:

1. Primitive scales, such as --color-neutral-12 and --color-brand-9.
2. Semantic aliases that point at the scales, such as --color-text-high or --color-bg-app.
3. The site theme, which overrides the brand aliases.

Components should use the semantic aliases, never the primitive scales.

Borders

• --color-border-subtle, --color-border-ui and --color-border-strong are decorative: dividers, cards, table rules. They do not meet a contrast requirement.
• --color-border-control (and --color-border-control-hover) outline form controls such as inputs and selects. When a border is the only visible edge of a control, WCAG 1.4.11 asks for 3:1 against the colours next to it; these two meet that against --color-bg-app and --color-bg-subtle in light and dark, and a test guards it.