/* ========================================================================= SIDES LABS — design tokens ------------------------------------------------------------------------- THIS IS THE ONLY STYLESHEET THAT MAY CONTAIN A LITERAL COLOUR. One file outside CSS also carries brand literals and has to: assets/img/favicon.svg, because an SVG file cannot read a custom property. That is the complete exception list — see LEARNING_FRONTEND.md L-FE-13, which also records that audit rule D-1 still needs the carve-out written into it. It mirrors resources/design_guide/DESIGN_TOKENS.md and invents no value. Every value below appears in that document; adding a token means editing the document first. Theming is three-state (DESIGN_TOKENS.md §1): 1. :root complete light palette 2. @media (prefers-color-scheme: dark) + :root:not([data-theme="light"]) system dark 3. :root[data-theme="dark"] / [data-theme="light"] the toggle wins No colour has its only definition inside a media or [data-theme] block: light is the base layer, dark redefines. ========================================================================= */ /* ---- 1. Light palette — the base layer --------------------------------- */ :root { /* Let the UA style scrollbars and native controls for the active theme. Overridden per explicit choice at the bottom of this file. */ color-scheme: light dark; /* --- Brand (DESIGN_TOKENS.md §2) ------------------------------------- */ --sd-primary: #5FE7A7; /* mint — primary CTA fill */ --sd-primary-hover: #4AD494; --sd-on-primary: #262626; /* text on primary */ --sd-secondary: #027261; /* teal — links, active nav, tabs */ --sd-secondary-hover: #014036; --sd-tertiary: #408226; /* forest — checkbox, radio, switch */ /* --- Neutrals (§3) --------------------------------------------------- */ --sd-text: #262626; --sd-text-soft: #4B4B4B; --sd-muted: #A8A8A8; --sd-border: #D0D0D0; --sd-border-strong: #CED4DA; --sd-divider: #E9E9E9; --sd-surface: #FFFFFF; --sd-surface-alt: #F4F4F4; --sd-surface-alt2: #D3D3D3; --sd-body: #E5E1E1; --sd-row-hover: #E9E9E9; /* --- The third ground (DESIGN_TOKENS.md §9.1) ------------------------- * * A recess INSIDE a surface: table head, chip ground, bar track, a row * that has stepped back. It sits BETWEEN the page ground and the surface * in BOTH themes -- measured relative luminance, light * 0.826 < 0.905 < 1.000 and dark 0.017 < 0.023 < 0.031 -- so "quieter * than the content around it" means the same thing in either theme. * * WHY NOT --sd-surface-alt, WHICH LOOKS LIKE IT ALREADY DOES THIS: it is * #F4F4F4 in light (BELOW the #FFFFFF surface) and #3A3A3A in dark (ABOVE * the #313131 surface). Its role inverts between the themes, so every * element reaching for it to recede rises instead in dark mode. That is * L-FE-44. --sd-surface-alt keeps its value and means "a step UP from the * surface" -- a hover fill, a pressed button. * * No new value: #F4F4F4 and #2A2A2A both already appear in this file. */ --sd-sunk: #F4F4F4; /* --- Semantic (§4) --------------------------------------------------- */ --sd-success: #408226; --sd-success-bg: #E1FAC5; --sd-success-bd: #C5EDA0; --sd-warning: #BA5700; --sd-warning-bg: #FFECB3; --sd-warning-bd: #FAD989; --sd-error: #D32F2F; --sd-error-bg: #FFCEC7; --sd-error-bd: #F7B3A9; --sd-info: #0277BD; --sd-info-bg: #BFEBFF; --sd-info-bd: #97D8F7; /* --- Documentation / portal chrome (§5) ------------------------------ */ --doc-bg: #EDEAE6; --doc-panel: #FFFFFF; --doc-ink: #262626; --doc-ink-soft: #5F5B57; --doc-line: #E3DDD6; --doc-code-bg: #F6F4F1; /* --- The one surface that does not follow the theme (U-796) ---------- * * A QR code is read by a camera, not by a person, and a scanner expects dark * modules on a light field — a symbol inverted to suit a dark page is one many * readers refuse. So this is defined ONCE and deliberately not redefined in * either dark block: it is not a theme decision, it is the polarity the format * is specified in. It is a token rather than a literal so that the exception is * written down where the colours are, and not in a page stylesheet where it * would read as somebody forgetting the rule. */ --scan-field: #FFFFFF; /* --- The brand-dark pair (§5) ---------------------------------------- * * WHAT IS LEFT OF THE SIDEBAR PALETTE, AND WHY IT SHRANK. These six tokens * dressed a portal sidebar and a site footer that were #063F36 in both * themes. U-728 made both of them themed surfaces (DESIGN_TOKENS.md §9.7), * which left three of the six — `--nav-bg-hover`, `--nav-ink` and * `--nav-ink-soft` — with no caller at all. They are gone rather than kept * against a use somebody might find: a token nothing reads is a value this * file asserts and no page can contradict, and the document keeps the * literals if a later surface wants them back. * * The three that remain have callers that can be named: * --nav-bg the darkest stop of the key-visual bloom, three pages * --nav-active-bg the identity chip's initials, with the ink below * --nav-active-ink white on that teal — 5.86:1 in EVERY theme state, * which is the property the themed pair does not have * (`--sd-secondary` goes light in dark mode and white on * it measures 1.98:1; see components/sidebar.css). */ --nav-bg: #063F36; --nav-active-bg: #027261; --nav-active-ink: #FFFFFF; /* --- Brand gradient (§5) --------------------------------------------- */ --hero-grad: linear-gradient(150deg, #025C4E 0%, #027261 46%, #04836F 100%); /* --- Typography (§6) -------------------------------------------------- */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* --- Shape & metrics (§7) -------------------------------------------- */ --radius: 6px; --radius-lg: 12px; --radius-pill: 999px; --control-h: 42px; --nav-h: 36px; --nav-w: 264px; --nav-w-collapsed: 76px; --shadow-sm: 0 0 10px rgba(0, 0, 0, .05); --shadow-pop: 0 6px 24px rgba(0, 0, 0, .12); /* --- A progress bar has THREE roles (DESIGN_TOKENS.md §9.4) ----------- * * `var()` aliases, so they follow the theme automatically -- the opposite * of the pinned constants below, and correct for the opposite reason: a * bar is never on a theme-invariant surface. * * The third one exists because FULL and FINISHED are different facts. A * quota bar at 100 % is full and is NOT done; it is exhausted. Two tokens * force both into one picture. * * MEASURED LIMIT, and it is why no bar may rely on colour alone: fill and * done separate by 1.24:1 (light) and 1.16:1 (dark) -- hue, with almost no * luminance. In greyscale they are the same bar. The colour CONFIRMS the * state; the form and the label carry it. */ --sd-bar-track: var(--sd-sunk); --sd-bar-fill: var(--sd-secondary); --sd-bar-done: var(--sd-tertiary); } /* ---- 2. Theme-invariant brand surfaces --------------------------------- * * The splash hero, the portal sidebar and the site footer are dark teal in * BOTH themes (DESIGN_TOKENS.md §5). Text and fills placed on them therefore * may not follow the theme — a mint CTA that becomes teal in dark mode would * be invisible on a teal gradient. * * These aliases pin the LIGHT-theme values of --sd-primary, --sd-primary-hover * and --sd-on-primary, and reuse the sidebar ink. No new value is introduced; * every literal below already appears in DESIGN_TOKENS.md §2 and §5. * * NOTE for the head session: DESIGN_TOKENS.md has no name for this role. The * names are ours, the values are the document's. Worth a token-set amendment. * ------------------------------------------------------------------------ */ :root { --brand-mint: #5FE7A7; /* = --sd-primary (light) */ --brand-mint-hover: #4AD494; /* = --sd-primary-hover (light) */ --brand-mint-ink: #262626; /* = --sd-on-primary (light) */ --brand-on-dark: #FFFFFF; /* = --nav-active-ink */ /* There is deliberately no "soft" ink for these surfaces. The obvious candidate, #D6EFE7, measures 3.87:1 against the hero gradient's lightest stop and fails AA for body text. It used to be `--nav-ink`, safe on the flat footer at 9.8:1 and unsafe on the gradient — a token that is safe on one brand surface and unsafe on another is a trap with a name, and the flat footer it was safe on is not a brand surface any more (U-728), so the token is gone and the trap with it. Use --brand-on-dark and accept the harder contrast. */ } /* ---- 3. System dark — no explicit choice ------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sd-primary: #027261; --sd-primary-hover: #025C4E; --sd-on-primary: #FFFFFF; --sd-secondary: #3ECF9E; --sd-secondary-hover: #5FE7A7; --sd-tertiary: #6BBF43; --sd-text: #F2F2F2; --sd-text-soft: #CFCFCF; --sd-muted: #8F8F8F; --sd-border: #4A4A4A; --sd-border-strong: #4A4A4A; --sd-divider: #3C3C3C; --sd-surface: #313131; --sd-surface-alt: #3A3A3A; --sd-surface-alt2: #4A4A4A; --sd-body: #2A2A2A; --sd-row-hover: #3A3A3A; --sd-sunk: #2A2A2A; --sd-success: #6BBF43; --sd-success-bg: #22331A; --sd-success-bd: #3C5C2C; --sd-warning: #E0B34D; --sd-warning-bg: #332A13; --sd-warning-bd: #5C4D20; --sd-error: #F07070; --sd-error-bg: #3A1E1E; --sd-error-bd: #5C2C2C; --sd-info: #5AA8E6; --sd-info-bg: #152A3A; --sd-info-bd: #2C4A5C; --doc-bg: #232323; --doc-panel: #313131; --doc-ink: #F2F2F2; --doc-ink-soft: #B6B2AD; --doc-line: #3F3F3F; --doc-code-bg: #282828; } } /* ---- 4. Explicit dark — the toggle wins over the OS --------------------- */ :root[data-theme="dark"] { --sd-primary: #027261; --sd-primary-hover: #025C4E; --sd-on-primary: #FFFFFF; --sd-secondary: #3ECF9E; --sd-secondary-hover: #5FE7A7; --sd-tertiary: #6BBF43; --sd-text: #F2F2F2; --sd-text-soft: #CFCFCF; --sd-muted: #8F8F8F; --sd-border: #4A4A4A; --sd-border-strong: #4A4A4A; --sd-divider: #3C3C3C; --sd-surface: #313131; --sd-surface-alt: #3A3A3A; --sd-surface-alt2: #4A4A4A; --sd-body: #2A2A2A; --sd-row-hover: #3A3A3A; --sd-sunk: #2A2A2A; --sd-success: #6BBF43; --sd-success-bg: #22331A; --sd-success-bd: #3C5C2C; --sd-warning: #E0B34D; --sd-warning-bg: #332A13; --sd-warning-bd: #5C4D20; --sd-error: #F07070; --sd-error-bg: #3A1E1E; --sd-error-bd: #5C2C2C; --sd-info: #5AA8E6; --sd-info-bg: #152A3A; --sd-info-bd: #2C4A5C; --doc-bg: #232323; --doc-panel: #313131; --doc-ink: #F2F2F2; --doc-ink-soft: #B6B2AD; --doc-line: #3F3F3F; --doc-code-bg: #282828; } /* ---- 5. Explicit light — the toggle wins over a dark OS ------------------ * * :root already carries the complete light palette, and the system-dark block * is guarded by :not([data-theme="light"]), so an explicit light choice needs * no redefinition. The selector is stated so the three states are visible in * one file rather than inferred. * ------------------------------------------------------------------------ */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---- 6. Print — paper is white in every theme --------------------------- * * A FOURTH state, and it belongs here for the same reason the other three do: * this is the only file that may hold a literal colour (audit rule D-1), so a * print layer that needs theme-independent ink cannot pin it anywhere else. * * WHY IT IS NEEDED: --doc-ink is #262626 in light and #F2F2F2 in dark. A print * stylesheet that restores ink with `var(--doc-ink)` therefore prints WHITE on * white for every visitor whose theme is dark — and because base.css sets * `body { color: var(--doc-ink) }`, that is the whole page, not just the brand * surfaces. It was measured in the light scheme only and looked fixed. * * WHY ALL FOUR SELECTORS: each mirrors one of §1's states and matches its * specificity. `:root[data-theme="dark"]` and `:root:not([data-theme="light"])` * are both (0,2,0); a bare `:root` here is (0,1,0) and would lose to them. Being * last in the file settles the ties. * * Every value below already appears somewhere in DESIGN_TOKENS.md — this pins * light-theme INK ON WHITE PAPER, which is not quite "the light palette": * --doc-bg and --doc-panel are #FFFFFF here, where the light theme puts * --doc-bg at #EDEAE6. Paper is white; a page background is not. * ------------------------------------------------------------------------ */ @media print { :root, :root:not([data-theme="light"]), :root[data-theme="light"], :root[data-theme="dark"] { color-scheme: light; --doc-ink: #262626; --doc-ink-soft: #5F5B57; --doc-bg: #FFFFFF; --doc-panel: #FFFFFF; --doc-line: #E3DDD6; --doc-code-bg: #F6F4F1; --sd-text: #262626; --sd-text-soft: #4B4B4B; --sd-secondary: #027261; /* THE SURFACE ITSELF, and it was the one ground this block did not pin. Measured on `{en,de}/register.html` with print media emulated and `prefers-color-scheme: dark`: the unselected tier option is `background: var(--sd-surface)`, which stays **#313131** on paper while the ink above is pinned to #262626 — **1.16:1** for the tier name, **2.22:1** for its price and **1.93:1** for its description. The SELECTED option was fine, because it swaps to `--sd-info-bg`, which this block already pinned; so the failure was in the options a reader has not chosen and the one they had chosen looked correct. Found by U-732's sweep of all 37 pages in both print schemes. IT IS ONE TOKEN AND NOT FIVE, AND THAT IS SETTLED BY GREP RATHER THAN BY THE SWEEP. `--sd-surface-alt`, `--sd-surface-alt2`, `--sd-body` and `--sd-row-hover` invert between the themes in exactly the same way, so "the sweep did not reach them" would be a reason to wait, not a reason they are safe. They are safe: `--sd-surface-alt2` and `--sd-body` have ZERO `var()` callers in this directory — `--sd-body` is read by nothing at all — and every one of the twelve callers of `--sd-surface-alt` (9) and `--sd-row-hover` (3) is a `:hover` rule. Paper has no hover. Pinning them would be four assertions nobody can point at; leaving them is a fact anyone can re-run. *A block that pins the ink and half the grounds is not half-safe: it is exactly as wrong as pinning nothing, on whatever it missed.* */ --sd-surface: #FFFFFF; /* The third ground, for the same reason as the semantic tints below: with "Background graphics" ticked, a dark-theme reader would otherwise print the #2A2A2A recess behind the #262626 ink pinned above -- 1.10:1. Every chip, table head and bar track sits on this. */ --sd-sunk: #F4F4F4; /* A filled button prints as its LABEL: the fill is a background, and backgrounds are off by default. In dark mode --sd-on-primary is #FFFFFF, so "Sign in" and "Back to home" came out white on white even after the ink above was pinned — the fill hid it on screen, paper did not. */ --sd-primary: #5FE7A7; --sd-primary-hover: #4AD494; --sd-on-primary: #262626; /* The theme-invariant brand ink assumes a dark surface underneath. On paper there is none — the gradient is a background image and it does not print. Redefining it here closes the whole class rather than the two rules that happen to be reachable today: `.on-brand .nav-link[aria-current="page"]` is (0,3,0) and would outrank anything print.css can reasonably write, and `.site-header.on-brand` is (0,2,0). Neither paints text right now. That is luck, not design. * * `--nav-ink` and `--nav-ink-soft` were pinned here too, for a footer that printed #7FB3A5 at 2.36:1 on white. U-728 made the footer a themed surface: it reads `--doc-ink-soft`, which this block already pins, so those two pins had nothing left to protect and went with the tokens. */ --brand-on-dark: #262626; /* The semantic TINTS, for the reader who ticks "Background graphics". With Chrome's default the fills are dropped and the pinned ink above is enough; with backgrounds on, #262626 lands on the dark-theme #152A3A and #22331A at 1.03:1 and 1.12:1 — the method chip in a code panel header, which does paint text. The comment above claims this block closes a class rather than the instances it happened to find, so it has to. */ --sd-success-bg: #E1FAC5; --sd-success-bd: #C5EDA0; --sd-warning-bg: #FFECB3; --sd-warning-bd: #FAD989; --sd-error-bg: #FFCEC7; --sd-error-bd: #F7B3A9; --sd-info-bg: #BFEBFF; --sd-info-bd: #97D8F7; } }