Skin generator

Start from a skin that already works, change what you care about, and let the rest follow. The export is a complete, valid [data-skin] block — every colour a light-dark() with both halves literal, no placeholders, nothing left to look up.

This page is the one thing on this site that needs JavaScript. Everything else — the tokens, the skins, the previews — is CSS, and works without it. The Skins page lists every token you would need to write a skin by hand.

Identity

Skin name

Becomes the selector: [data-skin="mine"]

Start from

Loads that skin's values — both modes — into every control below. Anything you have already changed is overwritten.

Editing

LightDark

Every colour below has a light value and a dark one; this picks which of the two the controls are editing. The other half is kept and exported untouched. It also sets which way the derived hover and active states move: darker on light, lighter on dark.

There is no color-scheme control, because a skin must never set it. That is rule 1 of the contract.

Derive hover, active, foreground and tint automatically

Change --color-primary and its four relatives follow. Edit one of them by hand and it stops following — the generator will not overwrite a decision you made.

Wrap the export in @layer ui.tokens

On, to match the shipped skins. Off if you want your skin to sit outside the library's layer and win over it unconditionally.

Typography 4

Four families. Which is used where is a component decision.

--font-primary — headings

--font-secondary — body copy and UI

--font-tertiary — decorative, accents, pull quotes

--font-mono — code, tabular figures, keyboard keys

Surfaces and content 8

--color-surface — page background

--color-surface-raised — cards, popovers, anything above the page

--color-surface-sunken — inputs, wells, inset regions

--color-surface-inverse — high-contrast blocks

--color-on-surface — primary text

--color-on-surface-muted — secondary text

--color-on-surface-subtle — placeholders, disabled text

--color-on-surface-inverse — text on --color-surface-inverse

Borders 3

--color-border — default

--color-border-subtle — dividers, low-emphasis separation

--color-border-strong — emphasis, focus-adjacent

Brand roles 12

Each with a hover, an active and a foreground.

--color-primary

--color-primary-hover

--color-primary-active

--color-on-primary

--color-secondary

--color-secondary-hover

--color-secondary-active

--color-on-secondary

--color-accent

--color-accent-hover

--color-accent-active

--color-on-accent

Status roles 12

A solid colour, a foreground for it, and a tinted surface.

--color-info

--color-on-info

--color-info-surface

--color-success

--color-on-success

--color-success-surface

--color-warning

--color-on-warning

--color-warning-surface

--color-danger

--color-on-danger

--color-danger-surface

Utility 4

--color-focus — focus ring

--color-shadow — the colour elevation is built from

--color-overlay — dialog and drawer backdrops

--color-selection — ::selection background

Shape 8

--radius-none

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-full

--border-width

--border-width-strong

Shape roles optional

derived, override only to change the relationship. These are derived in tokens/shape.css from the radius scale above, so a skin inherits them. Override one only to change the relationship — square boxes with pill-shaped fields — not merely the radii, which the scale already handles.

Include these in the export

--radius-selector — checkboxes, radios, switches (defaults to --radius-sm)

--radius-field — inputs, buttons, pressables (defaults to --radius-md)

--radius-box — cards, dialogs, panels (defaults to --radius-lg)

--focus-ring — from --border-width-strong and --color-focus

Live preview

Surfaces and text

Primary text sits on the page surface. Muted text is secondary, and subtle text is a placeholder.

Raised surface

A card, a popover, anything above the page.

Sunken: inputs, wells, inset regions.

primarysecondaryaccent

Text input

Native select

info — surface, solid and foreground.

success — surface, solid and foreground.

warning — surface, solid and foreground.

danger — surface, solid and foreground.

selectorfieldboxelevation 2

Inverse block, for high contrast.

Contrast

WCAG 2 ratio for every foreground token against the surface it is meant to sit on, in both modes — contract rule 3, and the reason a dark mode is never an inversion. 4.5 is the floor for body text, 3 for large text and for the edges of a control.

Export

Then hand-edit it

The derived values are arithmetic, and arithmetic does not know that your warning yellow needs more lightness than the formula gave it, or that the tint behind a danger banner is one step too loud. That is the point of exporting literals rather than a function call: every number is yours to move, and moving one does not silently move four others.

Paste the block into your own stylesheet, set data-skin on <html>, and you are done. The mode follows the reader unless you also set data-theme. There is nothing to register and nothing to rebuild.