Theme tokens

The custom properties a page sets to theme every tool, and the parts it can style.

Generated from packages/runtime/src/styles.ts

A tool draws inside a shadow root, so a page's CSS does not reach it. It reads these custom properties instead, which do cross the boundary: set any of them on tool-host, or on anything around it.

Tokens

Token	Light	Dark	Used for
`--tb-bg`	`#ffffff`	`#16171d`	The tool's surface
`--tb-fg`	`#1a1c22`	`#e7e9ee`	Body text
`--tb-muted`	`#5c6270`	`#9aa1b1`	Labels, secondary text
`--tb-faint`	`#767d8c`	`#7c8494`	Descriptions, axis ticks, status
`--tb-border`	`#e2e5ea`	`#2b2e38`	Hairlines and control borders
`--tb-surface`	`#f7f8fa`	`#1c1e26`	Input backgrounds, preformatted blocks
`--tb-accent`	`#8a5a00`	`#f0b040`	Fills: the Run button, progress, marked bytes, focus outlines
`--tb-accent-bg`	`#fff6e6`	`#2a2113`	A wash behind something marked: the table rows a chart is pointing at, and the deprecated and retired marker
`--tb-bad`	`#a3242c`	`#f08b8b`	Result tones and errors
`--tb-warn`	`#8a5a00`	`#e5b567`	Result tones and errors
`--tb-good`	`#1c6b3c`	`#74c98d`	Result tones and errors
`--tb-radius`	`10px`	same as light	Corner radius
`--tb-font`	`system-ui, -apple-system, "Segoe UI", sans-serif`	same as light	Type
`--tb-mono`	`ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace`	same as light	Type
`--tb-gap`	`0.75rem`	same as light	Vertical rhythm inside the tool
`--tb-mark-fg`	`var(--tb-warn)`	follows `--tb-warn`	The deprecated and retired marker. A host sets these on `tool-host`; `data-status` is also on the host so the page can style the element itself
`--tb-mark-bg`	`var(--tb-accent-bg)`	follows `--tb-accent-bg`	The deprecated and retired marker. A host sets these on `tool-host`; `data-status` is also on the host so the page can style the element itself
`--tb-accent-text`	`var(--tb-accent)`	follows `--tb-accent`	Accent-coloured text: links, the card's hint, a hovered sample, annotation labels. Set it when the accent is too bright to be text on your surface
`--tb-accent-ink`	`var(--tb-bg)`	follows `--tb-bg`	Text on an accent fill: the Run button's label, a marked byte. Set it dark when the accent is bright
`--tb-input-bg`	`var(--tb-surface)`	follows `--tb-surface`	A control's background: text, number, textarea, select. Set it on a `.tb-field-row` to change one input
`--tb-input-border`	`var(--tb-border)`	follows `--tb-border`	A control's border
`--tb-input-fg`	`var(--tb-fg)`	follows `--tb-fg`	The text a reader types, and a painted textarea's caret
`--tb-desc-fg`	`var(--tb-faint)`	follows `--tb-faint`	An input's description
`--tb-s1`	`#8a5a00`	`#e0b877`	Chart series use the first six; a graph's `color` can name all eight
`--tb-s2`	`#5b3fa8`	`#c4a5f0`	Chart series use the first six; a graph's `color` can name all eight
`--tb-s3`	`#0f6e6e`	`#7fd1d1`	Chart series use the first six; a graph's `color` can name all eight
`--tb-s4`	`#1f5aa8`	`#8ec4f0`	Chart series use the first six; a graph's `color` can name all eight
`--tb-s5`	`#a02a5e`	`#f0a5c0`	Chart series use the first six; a graph's `color` can name all eight
`--tb-s6`	`#2d6b32`	`#8fd6a8`	Chart series use the first six; a graph's `color` can name all eight
`--tb-s7`	`#7a4e2d`	`#e3b48f`	Chart series use the first six; a graph's `color` can name all eight
`--tb-s8`	`#4a5568`	`#b9c3d1`	Chart series use the first six; a graph's `color` can name all eight

The defaults follow the page's colour scheme through light-dark().

Example

CSS

/* The same tool in another theme: a dozen custom properties on a wrapper, nothing else. */.theme-demo tool-host {  --tb-accent: #0b6b5f;  --tb-accent-text: #0b6b5f;  --tb-accent-ink: #ffffff;  --tb-accent-bg: #e1f0ec;  --tb-bg: #fbfdfc;  --tb-surface: #eef6f3;  --tb-fg: #1d2422;  --tb-muted: #4f5b57;  --tb-border: #b9dbd4;  --tb-radius: 2px;  --tb-font: Georgia, "Times New Roman", serif;}

The gallery's second theme, from site/src/gallery.css.

See it live: Theming with custom properties

Parts

Elements a page can style from outside with ::part().

Part	Element
`wide-toggle`	The expand and fit button on a scaled graph

Classes and attributes

For everything inside the shadow root, a host passes its own stylesheet to defineToolHost({ styles }). The class names and attributes it may rely on are listed on the Styling page.