/* ============================================================================ * Compass Assistant — Hogeschool Rotterdam house style, applied over LibreChat. * * Loaded LAST in by ./registerSW.hr.js (mounted over the app's own * registerSW.js). It only re-declares LibreChat's OWN CSS custom properties, on * LibreChat's OWN selectors (`html` for light, `.dark` for dark), so it wins on * source order at equal specificity and touches no layout. Nothing is rebuilt: * both files are read-only bind mounts (see ../docker-compose.yml). * * The values come from the shared HR token set — * ../../../../knowledge/guides/hr-visual-design.md — which is itself extracted * from HRCRM's design-system/tokens.css. Change a colour THERE first. * * TO REVERT: delete the two branding mounts from docker-compose.yml and * `docker compose up -d`. There is no state to unwind. * * ⚠️ Read the variable names out of the running image before adding to this * file — they are LibreChat's internals, not a public API: * docker compose exec librechat cat /app/client/dist/assets/index.*.css \ * | grep -o -- '--surface[a-z-]*:' * Verified against librechat v0.8.7 (the pinned digest) on 2026-08-05. * ========================================================================== */ /* ── Type: Poppins, the HR house font ────────────────────────────────────── * Self-hosted (../branding/fonts/, mounted into the app's own assets/fonts/), * NOT fonts.googleapis.com: a Dutch institution's app should not make every * visitor's browser call a US CDN to render its own text. HRCRM reaches the * same place differently — next/font/google downloads at build time. * * ⚠️ Only the `latin` subset is here. It covers Dutch (ë ï é ç) but not * latin-ext; if a page ever needs Polish/Turkish glyphs, add that subset — * Poppins has no fallback face here, so it would silently drop to Inter. * * size-adjust:105% — LibreChat's sizes are tuned for Inter, which it ships at * size-adjust:94%. Poppins has a much smaller x-height, so unadjusted it reads * noticeably smaller at the same px. 105% closes most of that gap without * inflating cap-height into "oversized". */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 105%; src: url('./fonts/poppins-latin-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; size-adjust: 105%; src: url('./fonts/poppins-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; size-adjust: 105%; src: url('./fonts/poppins-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 105%; src: url('./fonts/poppins-latin-700.woff2') format('woff2'); } /* Inter stays as the fallback (the app ships it, and it has the italics * Poppins-latin does not). `.font-sans` needs its own rule: a class beats the * `html` element selector, so overriding `html` alone leaves it on Inter. */ html, :host, .font-sans { font-family: 'Poppins', Inter, sans-serif; } /* Code stays on Roboto Mono — LibreChat's own choice. HR has no house mono, and * swapping it would only risk breaking the code-block metrics. */ /* ── Light theme ────────────────────────────────────────────────────────────── * ⚠️ `:root`, NOT `html` — LibreChat declares its tokens on BOTH, and `:root` is * a pseudo-class (specificity 0,1,0) so it beats the `html` element selector * (0,0,1) no matter which stylesheet loads last. Overriding on `html` silently * worked for every token except `--brand-purple`, which is the one it also sets * from a `:root` rule. Match their strongest selector, not their first one. * * This is also why every token set here is set again in `.dark` below: `:root` * and `.dark` tie on specificity, so `.dark` only wins by coming afterwards. A * token left out of `.dark` would keep its LIGHT value in dark mode. */ :root { /* HR brand red. White-on-#e2001a is 4.94:1 — AA for normal text, which is why * the filled buttons below keep white labels in BOTH themes. */ --hr-red: #e2001a; --hr-red-hover: #b80016; --hr-red-tint: #fff1f2; /* HRCRM's --nav-active */ --hr-canvas: #f4f6fb; /* HRCRM's --background */ --hr-canvas-alt: #eaeef7; /* Primary action = brand red. This is the send button, and the single change * that makes the app read as HR's rather than LibreChat's. */ --surface-submit: var(--hr-red); --surface-submit-hover: var(--hr-red-hover); /* ⚠️ --surface-destructive is deliberately LEFT ALONE (LibreChat: red-700 * #b91c1c). With a red brand, "primary" and "danger" stop being separable by * hue — the only thing keeping them apart is that #b91c1c is darker and * duller than #e2001a. Do not brighten it toward the brand red, and do not * rely on colour alone: destructive controls must keep their label. */ --brand-purple: var(--hr-red); /* .text-brand-purple — accent text */ --ring-primary: var(--hr-red); /* focus rings */ /* Canvas: white chat and dialogs on the HR blue-grey, the same figure/ground * split HRCRM uses (white cards on #f4f6fb). --surface-primary stays white. */ --surface-secondary: var(--hr-canvas); --surface-tertiary: var(--hr-canvas-alt); --surface-active: var(--hr-canvas-alt); --surface-active-alt: var(--hr-red-tint); /* selected conversation + hovers */ --radius: 0.625rem; /* HRCRM's --radius (LibreChat ships .5rem) */ } /* ── Dark theme ───────────────────────────────────────────────────────────── */ .dark { /* HRCRM lightens the brand for dark mode (--primary: 354 90% 63% = #f64c5d). * That lighter red is used ONLY where the red is text or a ring; white on it * is 3.44:1, which fails AA, so filled buttons keep the full-strength red * (white on it: 4.94:1). */ --hr-red: #e2001a; --hr-red-hover: #b80016; --hr-red-light: #f64c5d; --surface-submit: var(--hr-red); --surface-submit-hover: var(--hr-red-hover); --brand-purple: var(--hr-red-light); --ring-primary: var(--hr-red-light); /* The blue-tinted dark ramp from HRCRM's .dark block: --background * 222 30% 8% (#0e121a) and --card 222 30% 11% (#141924). LibreChat's own dark * surfaces are neutral grey, so these are retinted as a set — a partial swap * is what looks broken, not the swap itself. */ --surface-primary: #0e121a; --surface-primary-alt: #141924; --surface-primary-contrast: #141924; --surface-secondary: #141924; --surface-secondary-alt: #141924; --surface-tertiary: #1b2230; --surface-tertiary-alt: #1b2230; --surface-dialog: #141924; --surface-chat: #1b2230; --surface-active: #232c3d; --surface-active-alt: #401c1f; /* HRCRM's dark --nav-active (354 40% 18%) */ --presentation: #141924; --border-light: #222f44; /* HRCRM's dark --border (217 33% 20%) */ --radius: 0.625rem; }