Overview

Theming is how one look repaints every component at once. This page shows how the token files stack and which layer a look changes, and the pages after it install the tokens, tint the neutral room, retune color and type, and start from a prefab. Foundations holds the specimens you paint with, and this section is the wiring under them.

Components never read a primitive or a raw hue. They read utilities from bindings.css, and those utilities read --brand-* and --sys-*, so a retune moves color, type, and corners without touching a component.

Primitives   raw scales: neutral, blue, red, green, amber, categories, radius, stroke, motion
     |  picked by
     v
Brand        --brand-*  primary, secondary, type, radius, UI weight
System       --chrome-* and --sys-*  chrome, status, washes, categories
     |  read by
     v
Bindings     utilities: bg-primary, bg-surface, text-fg-muted, rounded-control

The four files

A prefab or your own retune is unlayered, and unlayered CSS beats every gesso.* layer, so a look wins no matter where its import sits. Installation shows the import order, and Retune shows what a look sets.

What a look changes

A look fills --brand-* with a primary, a second hue, a pair of subtle tints, the three font roles, the UI weight, and two radii. It can override a status slot. It can also set the chrome knobs described on Chrome & temperature, which tint the neutral room warm or cool and leave the brand alone. Chrome stays achromatic gray until a look sets those knobs.

--cat-* are categorical hues for data, and --sys-cat-* adds the flat tag chroma of the room to them and keeps their hue, except gray, which takes the hue of the room. A brand retune does not touch them.

--alpha-* is the alpha scale (4, 8, 16, 32, 64, 82, and 100 percent) for washes made with color-mix. Specimens, and when to pick each step, are on Color.

Next