Theming

The board paints with its own tokens, all prefixed --bk-. Set them once on a wrapper and every screen follows; set none and you get the defaults, which are neutral rather than anyone's brand.

.bk-root {
  --bk-primary: var(--my-brand);
  --bk-primary-hover: var(--my-brand-soft);
  --bk-font-sans: var(--my-sans);
}

The defaults live on .bk-root in the package's tokens.css; your theme maps them to whatever your product already has. Nothing else is needed — the board's classes are flat bk-* inside @layer boardkit, so your own rules win without a specificity fight.

The contract#

Colour

Token	What it paints
`--bk-paper`, `--bk-paper-warm`	page and raised surfaces
`--bk-ink`, `--bk-ink-mid`, `--bk-ink-muted`, `--bk-ink-faint`	text, from body to the faintest label
`--bk-line`, `--bk-line-soft`	borders and separators
`--bk-primary`, `--bk-primary-hover`, `--bk-primary-fg`	the main action
`--bk-accent-50` … `--bk-accent-700`	the accent ramp (chips, highlights, the drag target)
`--bk-loud`, `--bk-loud-hover`, `--bk-loud-fg`	the one button that has to shout
`--bk-danger`, `--bk-success`	destructive and confirming states

Type: --bk-font-sans, --bk-font-display, --bk-font-mono.

Motion and shape: --bk-dur, --bk-ease, --bk-radius-sm, --bk-radius-md, --bk-radius-pill, --bk-shadow-sm, --bk-shadow-md.

Optional, no default (each use carries a fallback):

Token	What happens without it
`--bk-topbar-h`	the detail panel assumes 62 px of fixed header and starts that far down
`--bk-code-font`	code blocks fall back to `--bk-font-mono`

If your top bar has a different height — or publishes it at runtime — map --bk-topbar-h to it. A six-pixel lie there moves the whole detail panel on a phone, which is exactly how it was found.

What a real mapping looks like#

Not every token maps one to one, and that is fine:

.bk-root {
  --bk-primary: var(--vs-maroon);
  --bk-primary-hover: var(--vs-maroon-soft);   /* not a -hover of its own */
  --bk-accent-300: var(--vs-rose-300);         /* a whole ramp, renamed */
  --bk-topbar-h: var(--vs-topbar-h);           /* published at runtime */
}

How to check you got it right#

Take a screenshot before and after the theme, at 1440 and at 390. The extraction of these tokens was verified that way and landed at 0.000 % pixel difference on every board screen; anything above antialiasing noise is a token you have not mapped.