/* ------------------------------------------------------------------ * * File Convert — custom-element UI controls * * Skins for , , and . * * Everything here is keyed off classes that ui-controls.js adds at upgrade * time (.is-ready, .fc-select__native, .fc-visually-hidden, …). Nothing hides * or repositions a native control on the strength of the custom tag alone, so * with JavaScript off the browser's own checkbox and select render untouched * and the form still submits. * * Colours come from theme.css tokens only — no literal surface or text hex — * because dark mode is a real runtime state (data-theme on , with a * prefers-color-scheme fallback) and a literal silently breaks one of them. * ------------------------------------------------------------------ */ :root { /* Local aliases so a future retheme is one edit, not thirty. All of these resolve through theme.css tokens that already flip for dark mode. */ --fc-ctl-accent: var(--primary-500); --fc-ctl-accent-hover: var(--primary-600); --fc-ctl-tint: var(--brand-tint); --fc-ctl-ring: var(--brand-ring); /* The thumb of a switch in its OFF position sits on --t-accented. In light mode the surface colour reads as a bright cap; in dark it would be near-black on dark grey, so it is overridden below. */ --fc-toggle-thumb: var(--t-surface); /* ON, the thumb sits on brand red in both themes, so it stays constant. --primary-100 is theme-invariant and near-white. */ --fc-toggle-thumb-on: var(--primary-100); /* A white thumb on the OFF track is 1.17:1 in light mode — the position of the thumb IS the state, so SC 1.4.11 wants 3:1 and it was invisible. A hairline in --t-muted puts it at 4.05:1 against the track without changing the thumb's size (box-shadow, not border). */ --fc-toggle-thumb-edge: var(--t-muted); --fc-ctl-height: 2.5rem; } :root[data-theme="dark"] { --fc-toggle-thumb: var(--t-highlighted); /* Dark already gets 12.8:1 thumb-on-track, so the hairline is redundant; collapsing it into the thumb colour keeps the cap clean. */ --fc-toggle-thumb-edge: var(--t-highlighted); } /* Written twice on purpose: data-theme is only present once the user has chosen, so an OS-dark visitor who never touched the toggle needs the media query half. Unpaired overrides have shipped broken here before. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fc-toggle-thumb: var(--t-highlighted); --fc-toggle-thumb-edge: var(--t-highlighted); } } /* Same recipe as form.css's .visually-hidden, re-declared under our own name so this file never depends on another stylesheet's class surviving a refactor. Applied to the native