/** * TiorAI User Hub — tokens.css * * THE PLUGIN'S PALETTE. One declaration, every plugin stylesheet consumes it. * * WHY THIS FILE EXISTS * ---------------------------------------------------------------------------- * Nine plugin stylesheets each held their own copy of the same light palette — * `#fff` surfaces, `#e5e7eb` borders, `#111827` ink, an indigo `#6366f1` accent * — on a site whose theme ships `data-theme="dark"` and whose brand is lime. * The visible result was worst on /account/email-preferences/, where the card * fill was a hardcoded `#fff` while the heading inside it read * `--color-text-primary` from the theme: white text on a white card, in dark * mode, on a live route. * * `saves.css` had already tried to fix this and got it wrong in the way that * cannot fail loudly: it read `--tr-color-border`, `--tr-color-surface`, * `--tr-color-text` and friends. **None of those exists** — `tr-*` is the * theme's COMPONENT CLASS namespace (`.tr-field`, `.tr-logo`), never a token * namespace. Every `var()` silently took its light literal, exactly as if the * tokens had never been written. `submissions.css` records the identical * discovery. A wrong custom-property name produces no error, no warning and no * visible failure in light mode, which is why this needs ONE place rather than * nine. * * HOW IT WORKS * ---------------------------------------------------------------------------- * Every value reads a TiorAI theme token with the plugin's own light value as * the fallback. The theme redefines its tokens under `[data-theme="dark"]` and * custom properties resolve at computed-value time, so consumers get light/dark * for free and no consumer needs a dark block of its own. * * With the theme INACTIVE every token is undefined, every fallback applies, and * the plugin renders in its own light palette (§4.4). There is deliberately no * `prefers-color-scheme` block for that case: `data-theme` is set by the theme's * own `header.php`, so no theme means no dark mode to be wrong about. * * The one exception is the rating star at the bottom, which has no theme token * behind it and therefore states both themes itself. * * ADDING A CONSUMER * ---------------------------------------------------------------------------- * Declare `tiorai-tokens` in the stylesheet's dependency array. It is * REGISTERED and never enqueued directly (Tiorai_User_Hub::register_tokens), so * it loads exactly when something needs it and never otherwise (C-004). * * Never add a raw hex to a consumer. If a value is missing here, add it here. */ :root { /* ── Ink ─────────────────────────────────────────────────────────────── */ --tiorai-ui-text: var( --color-text-primary, #111827 ); --tiorai-ui-text-2: var( --color-text-secondary, #374151 ); --tiorai-ui-muted: var( --color-text-muted, #6b7280 ); /* ── Surfaces ────────────────────────────────────────────────────────── */ --tiorai-ui-surface: var( --surface-raised, #ffffff ); --tiorai-ui-hover: var( --surface-interactive, #f3f4f6 ); --tiorai-ui-sunken: var( --surface-sunken, #f9fafb ); --tiorai-ui-selected: var( --surface-selected, #ede9fe ); /* OPAQUE, and that is the whole point of it. --tiorai-ui-surface reads the theme's --surface-raised, which in dark is rgba(255,255,255,0.04): correct composited over the dark page, near-white composited over anything else. A 's option list is drawn by the UA, so it stayed white while `color` cascaded into the options — white on white, every option unreadable but the highlighted one. `color-scheme` is what tells the UA which theme to draw it in, and it also fixes the dropdown arrow and the scrollbar inside the popup. A token rather than a rule, so consumers apply it to the controls they own and the plugin never declares a colour scheme for the whole document — that is the theme's call, not ours. */ --tiorai-ui-scheme: light; /* ── Geometry ────────────────────────────────────────────────────────── */ --tiorai-ui-radius: var( --radius-md, 10px ); --tiorai-ui-radius-sm: var( --radius-base, 6px ); --tiorai-ui-radius-pill: var( --radius-full, 999px ); /* ── The rating star ─────────────────────────────────────────────────── */ /* The one pair with no theme token behind it — the theme has no rating role, and the nearest candidates are both wrong: `--color-accent` is documented as DECORATIVE ONLY and measures 1.25:1 on a light surface, and `--tiorai-on-warning-tint` is a brown that does not read as a star. A filled star is a non-text graphic, so the bar is 3:1 (WCAG 2.2 AA 1.4.11), not 4.5:1. #D97706 on a white card measures 3.05:1. Because nothing behind it is theme-paired, this is the one place in the file that states dark itself. */ --tiorai-ui-star: #D97706; --tiorai-ui-star-empty: var( --tiorai-ui-border-strong ); } :root[data-theme="dark"] { --tiorai-ui-scheme: dark; /* #F59E0B on the dark card surface measures about 8:1 — the lighter amber is needed because the dark value has to clear the same 3:1 against a near black rather than against white. */ --tiorai-ui-star: #F59E0B; }