Canvas Theme

Design tokens a draw callback can actually read.

Preview

About

A canvas sits outside CSS: Tailwind classes don't reach it, currentColor means nothing to fillStyle, dark mode doesn't apply. So every viewer reached for a literal instead — 36 separate occurrences of #2563eb, ten of #ef4444, 31 ad-hoc font strings — and half the kit was themed while half was painted. Tokens come in two kinds, and the split matters: chrome (fg, border, grid, accent) maps onto the consumer's CSS variables so a reskin moves the axes with the page, while semantics (up/down, gain/loss, strand, significant) are reading conventions, not brand choices. A geneticist reads red-is-gain; letting a theme invert that would make the figure lie.

Usage

import { useCanvasTokens } from "@/components/ui/canvas-theme"

const t = useCanvasTokens(canvasRef)
ctx.font = t.font.tick
ctx.fillStyle = t.mutedFg
ctx.strokeStyle = t.threshold   // a rule, not "#ef4444"