/* DataWorks → LibreChat theme (wave 42). * * WHAT THIS FILE IS. The console's design system, mapped onto LibreChat's CSS variables, so a tenant cannot * tell from colour, type or shape that the chat is not the console. Reasoning: * `specs/SPEC-chat-theme.md`. Criteria: §1. Guards: `tests/test_chat_theme.py`. * * THE UNIT IS NOT A COLOUR. **Do not write a hex as a value in this file.** LibreChat's variables hold bare * `R G B` channel triplets — its own source says so, in the comment on the file that builds its Tailwind * palette: *"Those variables hold bare `R G B` channel triplets, so `cssVar` wraps them as * `rgb(var(--x) / )`."* So its `--white` is `255 255 255`, and a hex here is not a near miss, it * is a **silent no-op**: `rgb(#ffffff / 1)` is invalid, the browser drops the declaration, and the surface * falls back to LibreChat's own colour with no error anywhere. The hex lives in the trailing comment, where * it is how a human recognises the colour. A guard fails if a hex reaches a value. * * THE VALUES ARE THE CONSOLE'S, AND A TEST CHECKS. Every line names the token it came from in * `src/dataworks/ui/static/tokens.css`, and the guard reads that file and fails if this one drifts from it. * Two files holding one colour is how a rebrand becomes a hunt. * * SCOPED TO `html` AND `html.dark` ON PURPOSE. LibreChat declares its own values on the same two selectors * with the same specificity, so ours win on source order — the bundled stylesheets come earlier in `` * and our `` is inserted immediately before `` (measured against the pinned image: the bundle's * CSS sits at byte 11621, `` at 12007). Writing these anywhere else would put them at the mercy of a * future re-order of ``. * * TWO MODES, TWO PALETTES, AND THE FILE CARRIES BOTH. `html, .gizmo` is the console's *light* palette * (`--bg` page, `--panel` cards, `--ink` text, `--ac` teal action); `html.dark, .gizmo.dark` is the console's * `--dk-*` dark ramp (rewritten 2026-10-04: the sidebar navy alone had too few steps — see the dark block). * Between 2026-10-03 and 2026-10-04 both blocks carried the navy, on the decision that the chat should look like the console whichever theme a * user picked; Sriga reversed that on 2026-10-04 after seeing the deployed result, and both dates are in the * block comment below and in `SPEC-chat-theme.md` §2.5, so a reader meeting either one finds the other. * * NOT EVERY VARIABLE IS OURS, AND THAT IS A DECISION. LibreChat's categorical `--series-*` scale is a * colour-vision-deficiency-safe ordering by its own comment, and its link colours carry an accessibility * contract. DataWorks' palette has not been tested against either. **A theme that overwrites a safety * mechanism to look consistent has made the product worse**, so both are left alone — and a guard asserts * that refusal, because a decision nothing guards is a decision a later helpful edit reverses. * * NO `!important`, NO `@import`, NO `url(`, NO COMPONENT SELECTOR. Those are how a mapping stops being a * mapping and starts being an override that breaks on LibreChat's next release. Asserted, not just intended. * * THE ONE PLACE THIS FILE GOES BEYOND VARIABLES, and it was found by looking rather than by reading: on a * navy page the text inputs still rendered **white**. Measured — the pixel came back `#ffffff` while every * `bg-surface-*` class in the bundle was already mapped, so the white was the browser's own default for an * ``, which no theme variable reaches. `input, textarea, select` is a **base element selector**, not a * component override: it is the same kind of rule a theme is entitled to write, it names no class LibreChat * could rename, and it is the only way to stop a default the palette cannot see. */ html, .gizmo { /* --- LIGHT MODE: the console's own light palette, and this block changed on 2026-10-04 ------------- **WHAT IT CARRIES NOW.** `--bg` #eef4f6 page, `--panel` #ffffff panels and chat window, `--ink`/`--mut` text, `--line` borders, `--ac` teal for action. This is what the console's own pages are, and it was the first version of this theme. **WHAT IT CARRIED BETWEEN 2026-10-03 AND 2026-10-04, and why that was reversed rather than corrected.** Sriga's decision on 2026-10-03 was that the chat should look like the console *whichever* theme is picked, so this block carried the navy as well; the argument was that DataWorks' light surfaces are white and very-near-white, so a faithful match of them read as "LibreChat with a teal button". Measured 2026-10-04 from outside Render, that is what production served — the live stylesheet was byte-identical to this file (md5 `f0abea28bda8950717f3ebdf78f5cc9d`), so the all-navy chat was the design, not a stale cache. Sriga then looked at it and asked for light mode back, in these words: *"It is all still dark teal - both left hand pane and the chat window."* Two panes both dark is the honest description of what one navy carried by both blocks produces. **AND THE SENTENCE THAT WAS RIGHT THE FIRST TIME IS THE ONE THAT HAS TO SURVIVE THE REVERSAL:** the navy cannot go on the sidebar alone. LibreChat's sidebar and header take their text from the *global* `--text-primary`, so a navy pane would carry `--ink` on navy — unreadable — and the only repair would be a selector guess at a React component's generated class names, which `SPEC-chat-theme.md` §8 forbids. **The choice is a whole mode, or nothing**, and the mode is now light: light surfaces with the ink that belongs on them, and the navy kept for dark mode (§2.5), where `--text-primary` is `--sb-text` and those contrast relationships are someone's actual decision. **Three fixes after this block's first version are kept, which is why this is not a revert.** `542a3bb` mapped the interactive surfaces, so a hover is no longer LibreChat's `--gray-200`; `d7b2c3a` split fill from mark, so `--brand-purple` and `--surface-submit` take `--ac` #0e7490 rather than the bright `--sb-accent` whose 1.9:1 under white text was the unreadable button a user reported. */ --surface-primary: 238 244 246; /* --bg #eef4f6 the page */ --surface-chat: 255 255 255; /* --panel #ffffff the conversation */ --surface-dialog: 255 255 255; /* --panel #ffffff cards lift off the page */ --presentation: 255 255 255; /* --panel #ffffff */ --surface-secondary: 230 239 243; /* --panel-alt #e6eff3 hover, active, cards */ --surface-secondary-alt: 230 239 243; /* --panel-alt #e6eff3 */ --surface-primary-alt: 230 239 243; /* --panel-alt #e6eff3 wells and code blocks */ --surface-tertiary: 238 244 246; /* --bg #eef4f6 */ --surface-tertiary-alt: 255 255 255; /* --panel #ffffff inputs, the composer */ --surface-primary-contrast: 230 239 243; /* --panel-alt #e6eff3 */ --surface-hover: 219 230 234; /* --line #dbe6ea one step off the sidebar's --panel-alt */ --surface-hover-alt: 219 230 234; /* --line #dbe6ea */ --surface-active: 213 240 244; /* --ac-soft #d5f0f4 the selected state */ --surface-active-alt: 230 239 243; /* --panel-alt #e6eff3 */ --surface-composer-hover: 230 239 243; /* --panel-alt #e6eff3 */ --header-primary: 255 255 255; /* --panel #ffffff */ --header-hover: 230 239 243; /* --panel-alt #e6eff3 */ --header-button-hover: 230 239 243; /* --panel-alt #e6eff3 */ --text-primary: 15 23 42; /* --ink #0f172a */ --text-secondary: 85 105 122; /* --mut #55697a AA 4.88:1 on panel-alt */ --text-secondary-alt: 85 105 122; /* --mut #55697a */ --text-tertiary: 85 105 122; /* --mut #55697a */ --text-muted: 85 105 122; /* --mut #55697a */ --border-light: 219 230 234; /* --line #dbe6ea */ --border-medium: 219 230 234; /* --line #dbe6ea */ --border-medium-alt: 219 230 234; /* --line #dbe6ea */ /* --- action: one teal for the mark and for the fill ------------------------------------------- **The fill-versus-mark split of `d7b2c3a` is not needed in this block, and that is a property of the light palette rather than an omission.** The console's `--ac` #0e7490 is dark enough to be text *and* to carry white text (5.36:1), so `--accent-primary` — a mark: text, a border, the focus ring — and `--surface-submit`, a **fill** under LibreChat's white `--text-on-status`, can share it. The bright `--sb-accent` is **not used anywhere in this block**: white on it measured 1.9:1, which is the unreadable button a user reported on 2026-10-03. */ --brand-purple: 14 116 144; /* --ac #0e7490 a FILL, so it carries white text */ --accent-primary: 14 116 144; /* --ac #0e7490 the mark: text, borders, the ring */ --accent-primary-hover: 21 94 117; /* --ac-hover #155e75 */ --surface-submit: 14 116 144; /* --ac #0e7490 the submit button, a FILL under white text */ --surface-submit-hover: 21 94 117; /* --ac-hover #155e75 */ --ring-primary: 14 116 144; /* --ac #0e7490 the focus ring */ /* --- status: the console's own pair, the dark colour on its soft fill -------------------------- **The light page can take DataWorks' status colours as they are**, because they were chosen for a light surface: `--ok` #146b35 on its `--ok-bg` #d9f2e5 fill is 5.58:1, and that is the pairing `tokens.css` itself measured. LibreChat reads `--status-*` as the **text** on a status-coloured surface and `--status-*-subtle` as the surface, so this block puts the dark colour in the text slot and its soft fill in the subtle slot. (The dark block swaps the two ends, because there the soft fill is the only readable one — that difference is the mode, not an inconsistency.) */ --status-success: 20 107 53; /* --ok #146b35 */ --status-warning: 180 83 9; /* --wn #b45309 */ --status-error: 185 28 28; /* --bd #b91c1c */ --status-success-subtle: 217 242 229; /* --ok-bg #d9f2e5 */ --status-warning-subtle: 253 243 215; /* --wn-bg #fdf3d7 */ --status-error-subtle: 253 232 232; /* --bd-bg #fde8e8 */ /* --- shape and type: one value each, unchanged by the mode ------------------------------------ */ --radius: 12px; /* --radius-lg */ --theme-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif; /* --font-ui */ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif; /* --font-ui */ } /* Form controls, because no CSS variable can reach the browser's own default for them. See the header: measured at `#ffffff` on a navy page while every `bg-surface-*` class was already mapped. */ input, textarea, select { background-color: rgb(var(--surface-tertiary-alt)); } /* Dark mode — `SPEC-chat-theme.md` §2.5, rewritten 2026-10-04. * * WHAT WAS WRONG WITH THE FIRST VERSION, measured against LibreChat v0.8.8's own bundle. It painted the whole * app from the console's sidebar navy, which has three dark steps (`--sb`, `--sb-2`, `--sb-line`) — and * LibreChat's dark mode uses eight. So: the sidebar (`--surface-primary-alt`) was *lighter* than the page; the * composer (`--surface-chat`) was the page's own colour, so the place you type was invisible; hover, cards, * dialogs and wells were all one `--sb-2`; the three status pills shared one fill; and the variables the theme * never named (header, tertiary text, medium-alt borders) stayed LibreChat's neutral greys, beside a saturated * teal. Sriga's word for the result was "awful". * * WHAT THIS BLOCK IS NOW. The console's `--dk-*` ramp (tokens.css): one hue, low saturation, stepped like * LibreChat's own greys so each surface keeps the place LibreChat designed for it — page darkest, sidebar one * step up, the composer and header lifted off both, hover and selection two clear steps above. Teal is kept for * what it is for: the bright `--sb-accent` as a mark, the dark `--ac` as a fill under white text. * * THE NAMES ARE WRITTEN OUT IN FULL, AND THE REPETITION IS LOAD-BEARING. LibreChat declares its own dark values * on `.dark`, one class more specific than the bare `html` above — so every value is repeated here rather than * inherited, and a test asserts the two blocks declare the *same variable names*. */ html.dark, .gizmo.dark { --surface-primary: 12 18 22; /* --dk-page #0c1216 the conversation page */ --surface-chat: 37 50 58; /* --dk-raised #25323a the composer */ --surface-dialog: 16 23 28; /* --dk-dialog #10171c dialogs and menus */ --presentation: 26 36 43; /* --dk-well #1a242b */ --surface-secondary: 26 36 43; /* --dk-well #1a242b cards */ --surface-secondary-alt: 26 36 43; /* --dk-well #1a242b */ --surface-primary-alt: 20 28 34; /* --dk-nav #141c22 the sidebar */ --surface-tertiary: 37 50 58; /* --dk-raised #25323a */ --surface-tertiary-alt: 37 50 58; /* --dk-raised #25323a inputs */ --surface-primary-contrast: 20 28 34; /* --dk-nav #141c22 */ --surface-hover: 45 59 67; /* --dk-hover #2d3b43 */ --surface-hover-alt: 54 69 78; /* --dk-hover-2 #36454e */ --surface-active: 77 95 106; /* --dk-active #4d5f6a the selected state */ --surface-active-alt: 37 50 58; /* --dk-raised #25323a the open conversation */ --surface-composer-hover: 54 69 78; /* --dk-hover-2 #36454e */ --header-primary: 37 50 58; /* --dk-raised #25323a */ --header-hover: 54 69 78; /* --dk-hover-2 #36454e */ --header-button-hover: 37 50 58; /* --dk-raised #25323a */ --text-primary: 230 237 241; /* --dk-text #e6edf1 */ --text-secondary: 180 195 204; /* --dk-text-2 #b4c3cc */ --text-secondary-alt: 143 162 174; /* --dk-text-3 #8fa2ae */ --text-tertiary: 143 162 174; /* --dk-text-3 #8fa2ae */ --text-muted: 180 195 204; /* --dk-text-2 #b4c3cc */ --border-light: 37 50 58; /* --dk-raised #25323a */ --border-medium: 54 69 78; /* --dk-hover-2 #36454e */ --border-medium-alt: 54 69 78; /* --dk-hover-2 #36454e */ --brand-purple: 14 116 144; /* --ac #0e7490 a FILL, so it carries white text */ --accent-primary: 45 212 191; /* --sb-accent #2dd4bf text and borders, not fills */ --accent-primary-hover: 23 162 184; /* --sb-active #17a2b8 */ --surface-submit: 14 116 144; /* --ac #0e7490 the submit button, a FILL under white text */ --surface-submit-hover: 21 94 117; /* --ac-hover #155e75 */ --ring-primary: 45 212 191; /* --sb-accent #2dd4bf the focus ring */ --status-success: 217 242 229; /* --ok-bg #d9f2e5 */ --status-warning: 253 243 215; /* --wn-bg #fdf3d7 */ --status-error: 253 232 232; /* --bd-bg #fde8e8 */ --status-success-subtle: 15 42 28; /* --dk-ok-bg #0f2a1c */ --status-warning-subtle: 46 34 11; /* --dk-wn-bg #2e220b */ --status-error-subtle: 51 21 26; /* --dk-bd-bg #33151a */ }