Controls Get Their Own Tokens
SHOULD: Declare `--control-bg`, `--control-border` and `--control-focus` as their own trio — do not bind inputs, selects and checkboxes to the surface/card tokens. A card is a surface that RECEIVES the eye and should recede; an input must announce itself as a place where something goes, and if it shares the card's background and the divider's border its boundary lands near 1.2:1 and the field becomes a rumour. Separable tokens are what let you meet `design-non-text-contrast` (WCAG 1.4.11, 3:1 for the boundary that identifies a control) without shouting every divider on the page. On dark, inputs read best slightly DARKER than their surroundings — an inset well says "type here" without chrome.
Give inputs, checkboxes and selects dedicated background, border and focus tokens instead of reusing the card and background tokens
Bad
Good
Why it matters
This is why form fields disappear into the page. A card token and a control token are asked to do opposite jobs: a card is a surface that RECEIVES the eye and should recede, while an input is a surface that INVITES input and must announce itself as a place where something goes. Bind `--control-bg` to `--card` and the field is exactly as bright as the panel it sits in, so the only thing left marking it as a field is its border — and if that border is also the card's `--border`, tuned to be a quiet divider, the boundary lands near 1.2:1 and the input becomes a rumour.
Upstream's own advice sharpens the point: on dark, inputs should be slightly DARKER than their surroundings, not lighter, because an inset well reads as "type here" without heavy chrome — a move you simply cannot make while the control shares the surface token. Declare `--control-bg`, `--control-border` and `--control-focus` as their own trio, and tune them against one hard floor: design-non-text-contrast (WCAG 1.4.11) requires 3:1 for the visual boundary that identifies a control, measured against the surface actually behind it.
That floor is the reason the tokens must be separable — you cannot raise the input border to 3:1 without also shouting every divider on the page, unless the two are different tokens.