/* The shared semantic theme tokens (Stage 1, 2026-09-17). * * Ticket: agent-reviews/Open/2026-08-25-app-wide-dark-and-light-theme-options.md * * THIS FILE APPLIES NOTHING, AND THAT IS ITS LOAD-BEARING PROPERTY. * * `:root` and the theme selectors are its only selectors and every declaration * is a custom property, so linking it into any page cannot move a pixel. * shared-public/controls.css is the precedent and * tests/control-tokens-contract.test.js the precedent for proving it; this file * has its own copy of that contract in * tests/theme-tokens-contract.test.js. * * WHY THE NAMES ARE `--sg-theme-` AND NOT `--sg-`. * * The audit found the real hazard: author-public/styles.css defines a LIGHT * `:root` and layers dark token blocks onto individual screens. On 2026-09-03 a * broken local block dropped the Original Builder back to that light base and * shipped near-black text on navy to production, which Steve found himself. A * shared layer that redefined a name those blocks already depend on would change * what every one of them falls back to, across surfaces this stage is not * allowed to restyle. * * So Stage 1 introduces ONLY names that nothing currently resolves. `--sg-` was * the first proposal and was wrong: `--sg-bg-page`, `--sg-bg-elevated`, * `--sg-border` and `--sg-accent` are all already declared and consumed. The * `--sg-theme-` namespace is genuinely unused, and a test fails if any name * declared here is referenced by an existing stylesheet. * * Later stages migrate surfaces onto these one at a time. Until then this file * is inert by construction. * * DARK IS THE FALLBACK, INCLUDING WHEN NOTHING RUNS. * * `:root` carries the dark set, so a page with no attribute is dark. There is * deliberately NO `prefers-color-scheme` block: `system` is an explicit * individual choice that the pre-paint resolver turns into an attribute, not the * product default. An earlier draft had both and they disagreed. */ :root { /* Surfaces */ --sg-theme-bg-page: #101c2c; --sg-theme-bg-elevated: #1c283c; --sg-theme-bg-glow: #2c384c; --sg-theme-bg-badge: #24304a; /* Text */ --sg-theme-text: #fcfcfc; --sg-theme-muted: #8b96ab; /* Lines */ --sg-theme-border: #626d7c; --sg-theme-border-strong: #798699; /* Interaction */ --sg-theme-accent: #2f6fdb; --sg-theme-accent-bright: #3b82f6; /* Text and links use this, never the customer accent: see the dark block below for the measurements. */ --sg-theme-accent-text: #60a5fa; /* The foreground that sits ON an accent-filled control. Derived by server/lib/theme.js's deriveOnAccent() for a customer accent; these are the two values it chooses between. */ --sg-theme-on-accent: #ffffff; /* Status */ --sg-theme-success: #4ade80; --sg-theme-danger: #f87171; --sg-theme-warning: #e6b95c; /* The hole the impersonation banner fell into: a tinted band whose background adapts through a token while the foreground on it does not. Naming the foreground is what makes that correctable in Stage 2. */ --sg-theme-on-tint: #fcfcfc; /* Reserved, semantic hues that are currently defined per surface. Declared once here so Stage 2 onwards has one place to adopt. */ --sg-theme-achievement: #e6b95c; --sg-theme-stat-purple: #a78bfa; } /* The same set, stated explicitly, so a page that resolves `system` to dark and writes the attribute gets identical values to one with no attribute at all. */ :root[data-theme="dark"] { --sg-theme-bg-page: #101c2c; --sg-theme-bg-elevated: #1c283c; --sg-theme-bg-glow: #2c384c; --sg-theme-bg-badge: #24304a; --sg-theme-text: #fcfcfc; --sg-theme-muted: #8b96ab; --sg-theme-border: #626d7c; --sg-theme-border-strong: #798699; --sg-theme-accent: #2f6fdb; --sg-theme-accent-bright: #3b82f6; /* TEXT AND LINKS USE THIS, NOT THE CUSTOMER ACCENT (2026-09-17, Codex I1). A customer accent is validated as a fill and an indicator; asking it to be text as well is what produced a sub-AA default. Measured against this theme's own surfaces: #60a5fa is 6.75:1 on the page and 5.82:1 on elevated. The previous --accent-bright (#3b82f6) is 4.03:1 on elevated, which is below the 4.5:1 text floor - a real defect in the current product, recorded in the ticket. */ --sg-theme-accent-text: #60a5fa; --sg-theme-on-accent: #ffffff; --sg-theme-success: #4ade80; --sg-theme-danger: #f87171; --sg-theme-warning: #e6b95c; --sg-theme-on-tint: #fcfcfc; --sg-theme-achievement: #e6b95c; --sg-theme-stat-purple: #a78bfa; } /* Light. These are the values the Learner Portal's own light palette already ships and the audit measured against WCAG AA: every text pair passes and both border pairs clear the 3.0 non-text floor. They are adopted rather than reinvented, because the audit's headline finding was that the palette is not where the roughness lives. */ :root[data-theme="light"] { --sg-theme-bg-page: #f6f7fa; --sg-theme-bg-elevated: #ffffff; --sg-theme-bg-glow: #ffffff; --sg-theme-bg-badge: #eef1f6; --sg-theme-text: #16202e; --sg-theme-muted: #5b6472; /* Stage 2A correction (2026-09-17), measured on the real adopted surfaces: #8891a0 was 2.97:1 against the light PAGE (#f6f7fa), under the 3.0 non-text floor where a field sits directly on the page, as in the Super Admin modal. #858e9d is 3.09:1 on the page and 3.31:1 on elevated - the smallest step that clears it. */ --sg-theme-border: #858e9d; --sg-theme-border-strong: #6b7585; --sg-theme-accent: #2f6fdb; --sg-theme-accent-bright: #2563eb; /* 4.82:1 on the page and 5.17:1 on elevated, both clearing the text floor. */ --sg-theme-accent-text: #2563eb; --sg-theme-on-accent: #ffffff; /* Stage 2A correction (2026-09-17): status text sits on its own tinted background, up to 14% of itself over white (the verified badge), where #15803d measured 4.14:1 and #92660b 4.24:1, both under 4.5. #127638 is 4.68:1 on that tint and 5.72:1 on white; #86600a is 4.70:1 and 5.69:1. */ --sg-theme-success: #127638; --sg-theme-danger: #b91c1c; --sg-theme-warning: #86600a; --sg-theme-on-tint: #16202e; --sg-theme-achievement: #92660b; --sg-theme-stat-purple: #7c3aed; }