Finishes and themes

data-finish on any element

Every colour in the kit is a token, and the tokens are defined per finish. Set data-finish="graphite" on any element and everything inside it recomputes: a graphite call-to-action band on an aluminium page, a dark console in a light site.

<section data-finish="graphite">
  <h2 class="tui-h2">Set it up in the time it takes to read this.</h2>
  <a class="tui-key tui-key--primary" href="/start">Start free</a>
</section>

Following the system

The head script sets the page finish before the first paint: the stored choice if there is one, otherwise graphite for a dark system and aluminium for a light one. setFinish() puts a finish and its tone on the page and stores the choice:

import { setFinish } from '/kit/kit.mjs';
for (const r of document.querySelectorAll('input[name="finish"]')) {
  r.checked = r.value === document.documentElement.dataset.finish;
  r.addEventListener('change', () => setFinish(r.value));
}

Families and tones

Every finish belongs to a family of two, a light finish and a dark one: Machined, aluminium and graphite; Materials, porcelain and black. Machined is kit.css itself; each other family is one stylesheet, linked after it:

<link rel="stylesheet" href="/kit/themes/materials.css">

With the finish goes data-tone="light" or "dark", which the head script and setFinish() set. Where you mean a dark page rather than one material, read the tone. setFamily('materials') keeps the visitor's tone, and setTone('dark') flips within the family, as the finish key on this site does.

The finish tokens

These change with the finish. Read them in your own CSS; never write a literal colour instead.

Constant across finishes: the lamps (--tui-green, --tui-amber, --tui-red), the displays (--tui-lcd, --tui-lcd-ink, --tui-vfd-bg, --tui-vfd), type, grid, radii and --tui-ease. The light stacks (--tui-raised, --tui-inset, --tui-pressed) are drawn from the finish tokens and change with the volume; porcelain and black draw their own recess. --tui-hl is the catch light on an edge and --tui-sheen the broad light on a cap: unset, the sheen is the catch light, and black sets it apart so a bright chamfer can sit on a satin cap.

What there is no token for

An accent colour. The kit has no --tui-brand and no place to put one: its restraint is the product. You can change the finishes’ values (a warmer desk, a colder aluminium) by overriding the finish tokens on [data-finish="aluminium"] (a recess takes its colour from --tui-tactile-well or --tui-quiet-well, one for each volume); the verify tool will still refuse purple and orange literals.