Theme Editor Settings Block for React

Edit LIGHT, the five hex values (digits only, without the hash, so no colour literal sits in the source) the Light set starts from, and TOKENS, FONTS and the starting radius and font below it. Everything else is worked out from them: the Dark set, the contrast lines, the drawing and the CSS text. To add a token, add it to Tokens, TOKENS and the checkOf function that says what it is read against.

With the WCAG formula: each colour's relative luminance from its hex value, then (lighter plus 0.05) over (darker plus 0.05). The ratio is cut down to a tenth, so a near miss never reads as a pass. Background is read against Foreground, Foreground against Muted, Primary against the better of the two inks (the button's label), and Border against Background; text needs 4.5 to 1 for AA and 7 to 1 for AAA, a field's edge 3 to 1. Muted has no minimum, it is a quiet panel. A filled dot means it passes, a hollow one that it does not, and the words say the same.

From the Light set: Foreground and Background trade places, Muted and Border are mixes of the two, and Primary is lightened toward white. Switch the toggle to Dark, edit any colour there, and that colour is marked Edited instead of Derived and stops following Light. The Use derived button in that set's heading puts every colour back to what Light derives; in the Light set the same button says Reset and puts the colours back to the starting values.

The text shown under the drawing: a :root block with the five Light colours, the radius in rem and the font stack, and a .dark block with the five Dark colours. It goes to the clipboard, which needs a secure page; if the browser refuses, the status line says so and the CSS is a focusable region you can select from. Nothing is saved or sent: reloading starts from the starting values.

They stay in step. Drag in the picker and the field shows the hex; type six hex digits, with or without the hash, and the picker and the drawing follow at once. While what you have typed is not six digits the field says so and the last good colour stays in use, and leaving the field puts that colour back in it. The digits read left to right in any language.

Each token has a visible label tied to its hex field, a named button that opens its picker, and a contrast line that the field points to as its description. The drawn page is decorative and its caption says which set, radius and font it shows, and the status line is a polite live region that is present from the start. On a phone the window keeps its height and scrolls inside: the tokens first, the preview under them.