/* quotes/static/quotes/tokens.css * FEAT-5.79 — the Apple design tokens, extracted from * quotes/templates/quotes/base.html so the quote app and the Django admin share * ONE source of truth (invariant I4). Values are unchanged; only the selectors * changed, to cover Django's data-theme="auto" (spec §C.1). * * RULES FOR EDITING — every literal appears EXACTLY ONCE: * group 0 holds every DARK literal, under inert --pe-dark-* names * group 1 holds every LIGHT literal * groups 2 and 3 only ever REFERENCE group 0 * Adding a token means touching four places (0, 1, 2, 3). Groups 2 and 3 must * declare the identical property set or the theme toggle half-works. * * WHY THREE THEME GROUPS AND NOT TWO. base.html's head bootstrap always writes * data-theme="light" or "dark", so the quote app only ever needs two. Django's * admin/js/theme.js defaults a first-time visitor to data-theme="auto", which * matches NEITHER — a literal two-group extraction would resolve these tokens * LIGHT on an auto admin page on a dark-OS machine, and the whole admin bridge * (pace_admin.css) would then paint a light admin on a dark machine. Group 3 * closes that hole. Group 1 gained the html[data-theme="light"] half for the * mirror-image reason: without it, group 3's media block would out-rank a bare * :root and a quote-app user who explicitly chose light on a dark-OS machine * would render dark. * * DECLARED, ACCEPTED DELTA (spec §C.1). The `:root:not([data-theme])` half of * group 3 can only match on /quote/ when JavaScript is DISABLED, because the * head bootstrap sets the attribute unconditionally otherwise. In that one * state, on a dark-OS machine, /quote/ rendered light before this change and * renders dark after it. Deliberate: it is what the OS asked for, and it cannot * affect any JS-enabled visitor. */ /* ── 0. Raw dark palette. Inert names; the single home of every dark literal. Lifted verbatim from base.html's :root[data-theme="dark"] block. ────── */ :root { --pe-dark-canvas: #161617; --pe-dark-surface: #1d1d1f; --pe-dark-fill-2: #2c2c2e; --pe-dark-ink: #f5f5f7; --pe-dark-text-2: #a1a1a6; --pe-dark-text-3: #86868b; --pe-dark-blue: #0a84ff; --pe-dark-blue-hover: #2491ff; --pe-dark-green: #30d158; --pe-dark-green-text: #30d158; --pe-dark-green-bg: rgba(48, 209, 88, 0.12); --pe-dark-red: #ff453a; --pe-dark-red-bg: rgba(255, 69, 58, 0.14); --pe-dark-amber-text: #ffb340; --pe-dark-amber-bg: rgba(255, 159, 10, 0.14); --pe-dark-hairline: #424245; --pe-dark-hairline-2: #2c2c2e; --pe-dark-nav-glass: rgba(22, 22, 23, 0.72); --pe-dark-shadow-sm: 0 1px 3px rgba(0,0,0,.3); --pe-dark-shadow: 0 4px 24px rgba(0,0,0,.4); --pe-dark-shadow-lg: 0 16px 48px rgba(0,0,0,.55); } /* ── 1. LIGHT (and the default when nothing else matches) ─────────────────── */ /* 27 custom properties + color-scheme, verbatim from base.html:28-57. --radius-*, --ease and --font are declared ONLY here; the dark groups deliberately inherit them, exactly as the original inline block did. */ html[data-theme="light"], :root { --canvas: #f5f5f7; --surface: #ffffff; --fill-2: #e8e8ed; --ink: #1d1d1f; --text-2: #6e6e73; --text-3: #86868b; --blue: #0071e3; --blue-hover: #0077ed; --green: #34c759; --green-text: #00875a; --green-bg: #e9f6ef; --red: #d70015; --red-bg: #fdecec; --amber-text: #9a5b00; --amber-bg: #fcf1df; --hairline: #d2d2d7; --hairline-2: #e8e8ed; --nav-glass: rgba(245,245,247,0.72); color-scheme: light; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow: 0 4px 24px rgba(0,0,0,.07); --shadow-lg: 0 16px 48px rgba(0,0,0,.12); --ease: cubic-bezier(.4,0,.2,1); --font: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* ── 2. EXPLICIT DARK — both the quote app's and Django's spelling ────────── */ /* :root[data-theme="dark"] is (0,2,0) and so out-ranks group 1's bare :root (0,1,0); html[data-theme="dark"] is the spelling Django's own dark_mode.css uses, matched here so the two stay in lockstep. */ html[data-theme="dark"], :root[data-theme="dark"] { --canvas: var(--pe-dark-canvas); --surface: var(--pe-dark-surface); --fill-2: var(--pe-dark-fill-2); --ink: var(--pe-dark-ink); --text-2: var(--pe-dark-text-2); --text-3: var(--pe-dark-text-3); --blue: var(--pe-dark-blue); --blue-hover: var(--pe-dark-blue-hover); --green: var(--pe-dark-green); --green-text: var(--pe-dark-green-text); --green-bg: var(--pe-dark-green-bg); --red: var(--pe-dark-red); --red-bg: var(--pe-dark-red-bg); --amber-text: var(--pe-dark-amber-text); --amber-bg: var(--pe-dark-amber-bg); --hairline: var(--pe-dark-hairline); --hairline-2: var(--pe-dark-hairline-2); --nav-glass: var(--pe-dark-nav-glass); --shadow-sm: var(--pe-dark-shadow-sm); --shadow: var(--pe-dark-shadow); --shadow-lg: var(--pe-dark-shadow-lg); color-scheme: dark; } /* ── 3. AUTO / no attribute, following a dark OS ──────────────────────────── */ /* Django's theme.js defaults a first-time admin visitor to data-theme="auto"; :root:not([data-theme]) additionally covers a JS-disabled render (declared delta, see the header comment). html[data-theme="auto"] is (0,1,1) and :root:not([data-theme]) is (0,2,0), both of which out-rank Django's own dark media group (a bare :root, so (0,1,0)). Body is identical to group 2 BY CONSTRUCTION — if you edit one, edit both. */ @media (prefers-color-scheme: dark) { html[data-theme="auto"], :root:not([data-theme]) { --canvas: var(--pe-dark-canvas); --surface: var(--pe-dark-surface); --fill-2: var(--pe-dark-fill-2); --ink: var(--pe-dark-ink); --text-2: var(--pe-dark-text-2); --text-3: var(--pe-dark-text-3); --blue: var(--pe-dark-blue); --blue-hover: var(--pe-dark-blue-hover); --green: var(--pe-dark-green); --green-text: var(--pe-dark-green-text); --green-bg: var(--pe-dark-green-bg); --red: var(--pe-dark-red); --red-bg: var(--pe-dark-red-bg); --amber-text: var(--pe-dark-amber-text); --amber-bg: var(--pe-dark-amber-bg); --hairline: var(--pe-dark-hairline); --hairline-2: var(--pe-dark-hairline-2); --nav-glass: var(--pe-dark-nav-glass); --shadow-sm: var(--pe-dark-shadow-sm); --shadow: var(--pe-dark-shadow); --shadow-lg: var(--pe-dark-shadow-lg); color-scheme: dark; } }