Theme generator

Buttons

the brand fills, the field radius, --stroke and --depth

Status

each family twice — on its fill, and read on the page

ClaimedMemberInvitedSettledAfieldFailedOpen
SettledAfieldFailedOpen
Six days overdue
A re-posting is not the place to blood a copper.
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.
ContractState
The quarry roadSettled
Saltmere ferryAfield

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 in

Categorical

the eight chart slots — most themes inherit them

Add this theme to your CSS

Save it as packages/theme/themes/<name>.css and run pnpm --filter @kanzo-tech/theme gen.

[data-theme="acme"] {
  color-scheme: light;

  /* The twenty-one */

  /* Authored pending a measured color-mix default */

  /* Shape */

  /* Type */
}