/* quad-theme.css — QUAD unified display theme tokens (ticket #409, Phase 0) * Served fleet-wide at /shared-static/quad-theme.css and included by every app * BEFORE its own stylesheet, so an app's existing CSS still wins until it is * refactored to consume these tokens (Phase 1+). * * Themeing model (driven by attributes the server renders on ): * data-theme="light" | "dark" | "system" * data-high-contrast="0|1" data-reduce-motion="0|1" * style="--font-scale:…; --user-accent:#…; --user-accent-contrast:#…" */ /* ---- Magnification: everything sized in rem scales from here ---- */ :root { font-size: calc(16px * var(--font-scale, 1)); } /* ---- LIGHT tokens (default) ---- */ :root { --bg: #E1EFDA; --surface: #ffffff; --surface-2: #f6f8f5; --text: #1a1a2e; --text-muted: #6c757d; --border: #dee2e6; --card-bg: #ffffff; --danger: #dc3545; /* accent comes from the per-user pref rendered on ; falls back to teal */ --accent: var(--user-accent, #009179); --accent-contrast: var(--user-accent-contrast, #ffffff); color-scheme: light; } /* ---- DARK tokens ---- */ :root[data-theme="dark"] { --bg: #16181d; --surface: #1f232b; --surface-2: #262b34; --text: #e6e8eb; --text-muted: #9aa4b2; --border: #333a45; --card-bg: #1f232b; --danger: #ff6b6b; color-scheme: dark; } /* theme = system: follow the OS when the user hasn't forced light/dark */ @media (prefers-color-scheme: dark) { :root[data-theme="system"], :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #16181d; --surface: #1f232b; --surface-2: #262b34; --text: #e6e8eb; --text-muted: #9aa4b2; --border: #333a45; --card-bg: #1f232b; --danger: #ff6b6b; color-scheme: dark; } } /* ---- High-contrast variant (accessibility) ---- */ :root[data-high-contrast="1"] { --text: #000000; --text-muted: #1a1a1a; --border: #000000; } :root[data-theme="dark"][data-high-contrast="1"], :root[data-high-contrast="1"][data-theme="dark"] { --text: #ffffff; --text-muted: #f0f0f0; --border: #ffffff; } /* ---- Baseline surface (apps without their own body bg pick this up; * apps that set their own body bg — e.g. proj_mgr — override it) ---- */ body { background: var(--bg); color: var(--text); } /* ============================================================ * Per-user FONT selection (#409 font selector) * ------------------------------------------------------------ * Driven by a data-font attribute the server renders on : * data-font absent | "system" -> STRICT NO-OP (see below) * data-font="source-sans" -> Source Sans 3 * data-font="plex-sans" -> IBM Plex Sans * data-font="plex-mono" -> IBM Plex Mono * * DEFAULT IS A NO-OP: --font-sans is only a TOKEN here — nothing in the * default path assigns it to `body`, and no [data-font] selector matches when * the attribute is absent/"system". So every app keeps its own body * font-family and renders exactly as it did before this feature. * * For a chosen (non-default) font we must WIN over the app's own * body{font-family}, which is defined in a stylesheet loaded AFTER this file, * so those rules (and ONLY those) use !important. Fonts are self-hosted at * /shared-static/fonts/ (NO runtime CDN — the S&P firewall does TLS * inspection, so a runtime Google Fonts fetch is undesirable). * ============================================================ */ /* Token default = the common system stack. Purely a value; applied to nothing * on the default path, so it cannot change any app's rendering. */ :root { --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/shared-static/fonts/source-sans-3-latin.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/shared-static/fonts/ibm-plex-sans-latin.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/shared-static/fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/shared-static/fonts/ibm-plex-mono-latin-700.woff2') format('woff2'); } /* Non-default choices only: repoint the token, then override body. */ :root[data-font="source-sans"] { --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } :root[data-font="plex-sans"] { --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } :root[data-font="plex-mono"] { --font-sans: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } :root[data-font="source-sans"] body, :root[data-font="plex-sans"] body, :root[data-font="plex-mono"] body { font-family: var(--font-sans) !important; } /* ---- Reduce-motion (user pref OR OS setting) ---- */ :root[data-reduce-motion="1"] *, :root[data-reduce-motion="1"] *::before, :root[data-reduce-motion="1"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { :root:not([data-reduce-motion="0"]) *, :root:not([data-reduce-motion="0"]) *::before, :root:not([data-reduce-motion="0"]) *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---- Small shared helpers apps may use immediately ---- */ .quad-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: none; background: none; color: inherit; font: inherit; padding: 6px 8px; border-radius: 8px; } .quad-theme-toggle:hover { background: rgba(127,127,127,0.15); } /* ---- Print: force LIGHT so a dark-pref user's printouts stay readable ---- * Overrides the dark + system-dark token blocks (same selectors, later in * source → wins at equal specificity when the print media matches). * Print --bg is WHITE (not the light-theme green) so paper isn't tinted. */ @media print { :root, :root[data-theme="light"], :root[data-theme="dark"], :root[data-theme="system"], :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --text: #1a1a2e; --text-muted: #6c757d; --border: #dee2e6; --card-bg: #ffffff; --danger: #dc3545; color-scheme: light; } body { background: #ffffff; color: #1a1a2e; } }