/* ══════════════════════════════════════════════════════════════════ FLYING OX — "The Break" Token overlay for LibreChat v0.8.8-rc1. This file redefines DESIGN TOKENS ONLY. It declares no layout, no component rules, and no `display`, `position`, or sizing property. It is loaded after the app's own stylesheet, so it can restyle every surface without a single component edit — and it is structurally incapable of removing a control. Every value is a bare `R G B` triplet, never a CSS color, because Tailwind wraps them as rgb(var(--x) / ) so opacity modifiers like bg-surface-primary/50 keep working. Warm graphite ground · one light source, always above · ember action ══════════════════════════════════════════════════════════════════ */ /* ─── 1. The raw ladder ──────────────────────────────────────────── LibreChat's semantic tokens are built on var(--gray-N), so warming this one ladder shifts BOTH themes coherently: light reads off the pale end, dark off the deep end. Same hue family throughout — the greys carry a slight bias toward the ember, which is what keeps them from reading as unconsidered default grey. */ :root { --white: 255 253 249; /* #FFFDF9 warm paper, not clinical white */ --black: 0 0 0; --gray-20: 237 232 222; /* #EDE8DE */ --gray-50: 245 241 233; /* #F5F1E9 */ --gray-100: 242 239 233; /* #F2EFE9 ink-1 in dark */ --gray-200: 232 227 217; /* #E8E3D9 */ --gray-300: 207 201 191; /* #CFC9BF ink-2 in dark */ --gray-400: 163 156 145; /* #A39C91 ink-3 in dark */ --gray-500: 125 118 108; /* #7D766C ink-4 */ --gray-600: 87 81 74; /* #57514A ink-5 */ --gray-650: 42 38 33; /* #2A2621 */ --gray-700: 31 28 24; /* #1F1C18 s4 */ --gray-800: 25 23 19; /* #191713 s3 */ --gray-850: 16 14 12; /* #100E0C s1 — the rail */ --gray-875: 12 11 9; /* #0C0B09 s0 */ --gray-900: 5 4 3; /* #050403 recess — the canvas */ /* Ember. One accent, spent in one place. */ --ox-ember: 189 77 40; /* #BD4D28 */ --ox-ember-hi: 228 112 63; /* #E4703F */ --ox-ember-deep: 129 47 19; /* #812F13 */ --ox-ember-ink: 168 66 31; /* #A8421F deepened for small text on paper */ /* Chrome. Cool polished silver, drawn from the send orb's own highlight inks so the composer's edge and the orb read as the same material. */ --ox-chrome: 206 215 231; /* #CED7E7 */ --ox-chrome-hi: 232 239 252; /* #E8EFFC */ } /* ─── 2. Dark — "The Break" ──────────────────────────────────────── The signature is a single contrast: a near-black canvas against a warm graphite rail. Two tokens carry it, because the app already splits them exactly that way. */ html.dark { /* Ground */ --surface-primary: var(--black); /* the canvas — pure black, per the concept */ --surface-primary-alt: var(--gray-850); /* the rail #100E0C */ --surface-primary-contrast: var(--gray-875); --surface-secondary: var(--gray-800); --surface-secondary-alt: var(--gray-800); --surface-tertiary: var(--gray-700); --surface-tertiary-alt: var(--gray-700); --surface-dialog: var(--gray-875); --surface-chat: var(--black); /* the message box sits black on the canvas */ --presentation: var(--black); /* the contained card's inside = the black canvas */ /* Lift. Hover is a step toward the light, never a step sideways. */ --surface-hover: var(--gray-650); --surface-hover-alt: var(--gray-600); --surface-active: var(--gray-700); --surface-active-alt: var(--gray-650); --surface-composer-hover: var(--gray-650); --header-primary: var(--gray-850); --header-hover: var(--gray-700); --header-button-hover: var(--gray-700); /* Ink */ --text-primary: var(--gray-100); --text-secondary: var(--gray-300); --text-secondary-alt: var(--gray-400); --text-tertiary: var(--gray-400); /* Hairlines. Borders read as edges of light, not drawn lines. */ --border-light: var(--gray-700); --border-medium: var(--gray-650); --border-medium-alt: var(--gray-650); --border-heavy: var(--gray-500); --border-xheavy: var(--gray-400); /* Ember replaces the stock teal accent and the green submit. */ --accent-primary: var(--ox-ember); --accent-primary-hover: var(--ox-ember-hi); --surface-submit: var(--ox-ember); --surface-submit-hover: var(--ox-ember-hi); --ring-primary: var(--ox-ember); --brand-purple: var(--ox-ember); /* Links stay legible but stop being stock blue. */ --link: var(--ox-ember-hi); --link-hover: 240 140 96; --link-visited: 200 150 120; /* Glass. The tint is the colour a frosted surface is made OF, so it has to follow the theme: black frosting over a pale ground reads as a grey slab, not glass. */ --ox-glass-tint: 0 0 0; --ox-glass-edge: var(--ox-chrome); } /* ─── 3. Light — the warm paper twin ─────────────────────────────── Not an inversion. The same room with the light turned up: paper ground, ink that stays warm, and the identical ember doing the identical job. */ html:not(.dark) { --surface-primary: var(--white); /* #FFFDF9 */ /* The rail matches the ground exactly rather than sitting a step darker: the cream read as a separate beige panel next to the white page. The rounded card's own border and the seam still separate them, so nothing is lost by making the two agree. */ --surface-primary-alt: var(--white); --surface-primary-contrast: var(--gray-20); --surface-secondary: 234 229 218; /* #EAE5DA */ --surface-secondary-alt: var(--gray-200); --surface-tertiary: 222 216 202; /* #DED8CA */ --surface-tertiary-alt: var(--white); --surface-dialog: var(--white); --surface-chat: var(--white); --presentation: var(--white); --surface-hover: var(--gray-200); --surface-hover-alt: var(--gray-300); --surface-active: var(--gray-20); --surface-active-alt: var(--gray-200); --surface-composer-hover: var(--gray-200); --header-primary: var(--white); /* hover needs to stay a shade off the ground, or it stops registering as a hover at all */ --header-hover: 240 236 228; --header-button-hover: 240 236 228; --text-primary: 20 18 15; /* #14120F */ --text-secondary: 68 63 54; /* #443F36 */ --text-secondary-alt: 110 103 89; --text-tertiary: 110 103 89; /* #6E6759 */ --border-light: 226 221 210; /* #E2DDD2 */ --border-medium: 207 200 185; /* #CFC8B9 */ --border-medium-alt: 207 200 185; --border-heavy: 166 158 141; /* #A69E8D */ --border-xheavy: var(--gray-500); /* Ember holds its exact value as a fill (4.82:1 on paper), and deepens only where it carries small text (5.93:1). */ --accent-primary: var(--ox-ember-ink); --accent-primary-hover: var(--ox-ember-deep); --surface-submit: var(--ox-ember); --surface-submit-hover: var(--ox-ember-deep); --ring-primary: var(--ox-ember-ink); --brand-purple: var(--ox-ember-ink); --link: var(--ox-ember-ink); --link-hover: var(--ox-ember-deep); --link-visited: 138 74 52; /* Warm paper frosting, and an edge dark enough to exist against it — pale chrome on a pale ground is an invisible border. */ --ox-glass-tint: 255 253 249; --ox-glass-edge: 108 116 132; } /* ─── 4. Literals the token system missed ────────────────────────── ~250 of the app's 4,000 color utilities are hardcoded rather than token-backed. Where one of those paints a large surface it has to be re-pointed by hand. This is still a token change — it swaps a literal for the variable it should have used — but it is listed separately so the exceptions stay countable instead of sprawling. `.dark body, .dark html` (style.css:1565) hardcodes rgba(33,33,33), which is why the canvas stayed stock grey while every token underneath it was already correct. */ html.dark, html.dark body { /* The surround: bar + ground behind the rounded card are one continuous graphite surface (the concept's menu color, s1), with the black card recessed into it. */ background-color: rgb(var(--surface-primary-alt)); } html:not(.dark), html:not(.dark) body { background-color: rgb(var(--surface-primary)); } /* ─── 5. Shape and motion ────────────────────────────────────────── The stock radii are rounder than the design. Squaring them up is most of the difference between "a chat app" and this one. These are the app's own appearance tokens, set directly. */ :root { --radius: 0.375rem; --theme-control-radius: 0.5rem; --theme-surface-radius: 0.625rem; --theme-large-surface-radius: 0.875rem; --theme-motion-fast: 140ms; --theme-motion-normal: 220ms; }