Buttons
the brand fills, the field radius, --stroke and --relief
Every pair clears its WCAG floor on both sides
Text needs 4.5:1 on its ground; borders, the focus ring, the brand fill and chart marks need 3:1. The same list the build checks shipped themes against — here it warns, it does not block.
Status
each family twice — on its fill, and read on the page
SettledAfieldFailedOpen
Six days overdue
A re-posting is not the place to blood a copper.
The party did not come back
Settled
Second attempt
Fields
--field, --input, the selector radius and the two size units
32
64%
Surfaces
the three grounds, the line between them, and both weights of ink
Grade 5 — a writ. Six days overdue.
| Contract | State |
|---|---|
| The quarry road | |
| Saltmere ferry |
Muted
The recessed ground, with the lighter of the two inks on it.
States
--accent, --ring and --popover, which nothing else on this page shows
The quarry roadresting
Saltmere ferryhovered
Coldiron passselected
Focused`--ring`, as the recipes draw it
Lifted
`--popover`, which defers to `--card` until a theme says otherwise.
Type
the heading face and the body face, which a theme may carry
The quarry has opened onto something older
A contract is a promise about who goes, what they carry, and what the hall owes them when they come back. Everything else is a note in the margin.
The same sentence at the lighter weight, which is where a muted ink is really judged.
--font-mono: the face a token block is read inCategorical
the eight chart slots, carried from the family you started from — each at 3:1 on the page
Two blocks, one per side. In an app, load them after the library's stylesheet and list both in the provider's themes. In this repository, save each as packages/theme/themes/<name>.css and run pnpm --filter @kanzo-tech/theme gen.
/* @family acme
@label Acme */
[data-theme="acme"] {
color-scheme: light;
/* Colours */
/* Carried without a picker */
/* Shape */
/* Syntax */
}
/* @family acme
@label Acme Dark */
[data-theme="acme-dark"] {
color-scheme: dark;
/* Colours */
/* Carried without a picker */
/* Shape */
/* Syntax */
}