/* * Theme presets — the skin, as a class on . * * Four: `house` (dark, emerald, the cast on show), `corporate` (light, modern), * `dull` (light, enterprise) and `plain` (dark, muted, undecorated). See * App\Enum\Theme. * * ── Why this is its own file, and not part of app.css ────────────────────── * * Everything here has to be UNLAYERED to work. * * A theme has to outrank the ~600 slate utilities the templates are written in, * and Tailwind v4 emits every one of them into `@layer utilities`. An unlayered * declaration beats every layered one at the same origin regardless of * specificity or source order, and nothing else does — so unlayered is the only * rank from which a skin can repaint the app. * * That rules out assets/styles/app.css, which is `@layer components` from line * 32 to the end, and `components` sits *below* `utilities`. A theme block added * there would be silently ignored. Hence this file: plain CSS, linked from * base.html.twig, top of the cascade. * * The shared chrome (vendor/grey-ooo/brand-kit) is a layer below the utilities, * not above them — base.html.twig imports it into `@layer gooo` rather than * linking it, so its `--gooo-*` tokens and `.gooo-*` rules are defaults this * file overrides on layer. It used to be unlayered and therefore beat every * utility in the app; the full ordering is written up in docs/brand.md#the-cascade. * * ── Why and not ────────────────────────────────────────────── * * Turbo Drive replaces the body wholesale on every navigation but leaves * attributes alone. A theme class on would go stale the moment * anyone changed it mid-session. Custom properties inherit, so declaring them * on body reaches everything that renders. * * ── How a whole light theme fits in one file ─────────────────────────────── * * The app is written dark-first: ~600 slate utilities across templates/ assume * a dark ground — `text-slate-400` is muted body copy, `bg-slate-900` is a card, * `border-slate-800` is a hairline. Rewriting those by hand is the expensive * way to get a light theme and it touches every template. * * Tailwind v4 compiles `text-slate-400` to `color: var(--color-slate-400)`. So * inverting the *ramp* under one class inverts every one of those utilities at * once, with no template edits. That is what the light themes below do, and it * is the whole reason a light mode is tractable here at all. * * Each light theme states its own ramp rather than sharing one. They are only * eleven lines each, and the neutrals are half of what separates the two * registers — `corporate` runs on true slate, `dull` on a greyer, flatter set. * * ── Why presets and not a colour picker ──────────────────────────────────── * * All four ship in this one static file. Nothing is generated per request, so * there is no stylesheet to cache-key per user and Tailwind's build-time-only * compilation never has to be worked around. * * The *skin* only. Product name, wordmark text and favicon are not themeable — * see App\Enum\Theme. */ /* ========================================================================== * plain — the house layout, muted, with nothing drawn. Still dark. * ========================================================================== */ body.theme-plain { --gooo-accent: #60a5fa; --gooo-accent-dim: rgba(96, 165, 250, 0.14); --color-accent: #60a5fa; --color-accent-strong: #3b82f6; --color-accent-soft: #93c5fd; --color-wordmark-green: #f1f5f9; --color-wordmark-red: #60a5fa; } /* ========================================================================== * Both light themes — the structural half, which is identical * ========================================================================== */ body.theme-corporate, body.theme-dull { /* Native controls, scrollbars and form widgets follow this. Without it the selects and checkboxes stay dark and the page looks half-converted. */ color-scheme: light; --gooo-surface: #ffffff; background: var(--gooo-bg); } /* The page itself, above the body, or a short page shows dark behind the fold. */ html:has(body.theme-corporate), html:has(body.theme-dull) { background: #f4f5f7; } /* ========================================================================== * corporate — light, current, the way software you chose looks * ========================================================================== */ body.theme-corporate { /* The slate ramp, mirrored: 50 ↔ 950, 100 ↔ 900, 500 onto itself. The pairs that carry the most weight, for anyone reading a diff later: text-slate-400 muted body copy → #475569 grey on white text-slate-300 secondary heading → #334155 near-black bg-slate-900 card surface → #f1f5f9 light panel border-slate-800 hairline → #e2e8f0 light rule */ --color-slate-50: #020617; --color-slate-100: #0f172a; --color-slate-200: #1e293b; --color-slate-300: #334155; --color-slate-400: #475569; --color-slate-500: #64748b; --color-slate-600: #94a3b8; --color-slate-700: #cbd5e1; --color-slate-800: #e2e8f0; --color-slate-900: #f1f5f9; --color-slate-950: #f8fafc; /* Status ramps are not inverted — "healthy" stays green in every theme. What changes is weight: the app picks the 200–400 band for text and the 950 band for fills, both chosen to read on near-black. On white the text band is invisible and the fill band is a solid slab, so the two swap intent — text goes darker, fills go to a pale tint. */ --color-emerald-200: #065f46; --color-emerald-300: #047857; --color-emerald-400: #059669; --color-emerald-500: #059669; --color-emerald-800: #a7f3d0; --color-emerald-900: #d1fae5; --color-emerald-950: #ecfdf5; --color-rose-200: #9f1239; --color-rose-300: #be123c; --color-rose-400: #e11d48; --color-rose-500: #e11d48; --color-rose-800: #fecdd3; --color-rose-900: #ffe4e6; --color-rose-950: #fff1f2; --color-amber-200: #92400e; --color-amber-300: #b45309; --color-amber-400: #d97706; --color-amber-500: #d97706; --color-amber-800: #fde68a; --color-amber-900: #fef3c7; --color-amber-950: #fffbeb; --gooo-bg: #f5f7fa; --gooo-surface-2: #eef2f7; --gooo-surface-glass: rgba(255, 255, 255, 0.82); --gooo-border: #dfe5ec; --gooo-border-soft: #eaeef4; --gooo-text: #1e293b; --gooo-text-strong: #0f172a; --gooo-muted: #55637a; --gooo-faint: #7c8798; --gooo-accent: #2563eb; --gooo-accent-dim: rgba(37, 99, 235, 0.10); --gooo-danger: #dc2626; --gooo-danger-dim: rgba(220, 38, 38, 0.10); --gooo-warn: #b45309; --gooo-warn-dim: rgba(180, 83, 9, 0.10); --gooo-success: #059669; --gooo-success-dim: rgba(5, 150, 105, 0.10); /* Softer than `dull`, tighter than the house style's 10px. */ --gooo-radius: 6px; --gooo-radius-sm: 4px; --color-accent: #2563eb; --color-accent-strong: #1d4ed8; --color-accent-soft: #1d4ed8; --color-wordmark-green: #0f172a; --color-wordmark-red: #2563eb; } /* ========================================================================== * dull — light, and deliberately unremarkable * * The register is software nobody chose: Jira, ServiceNow, the internal tool * with a four-year-old logo. Three things carry it, and none of them is the * accent on its own — greyer neutrals, square corners, and no shadow anywhere. * ========================================================================== */ body.theme-dull { /* The same mirror as corporate, but on a flatter, greyer neutral set. The difference is small per step and unmistakable across a whole page. */ --color-slate-50: #091e42; --color-slate-100: #172b4d; --color-slate-200: #253858; --color-slate-300: #344563; --color-slate-400: #5e6c84; --color-slate-500: #7a869a; --color-slate-600: #97a0af; --color-slate-700: #c1c7d0; --color-slate-800: #dfe1e6; --color-slate-900: #ffffff; --color-slate-950: #f4f5f7; --color-emerald-200: #164b35; --color-emerald-300: #216e4e; --color-emerald-400: #22a06b; --color-emerald-500: #22a06b; --color-emerald-800: #b3dfc9; --color-emerald-900: #d6f0e3; --color-emerald-950: #e3fcef; --color-rose-200: #5d1f1a; --color-rose-300: #ae2e24; --color-rose-400: #c9372c; --color-rose-500: #c9372c; --color-rose-800: #f5c2be; --color-rose-900: #ffd9d6; --color-rose-950: #ffeceb; --color-amber-200: #5f3811; --color-amber-300: #974f0c; --color-amber-400: #b65c02; --color-amber-500: #b65c02; --color-amber-800: #f2d599; --color-amber-900: #ffe9b8; --color-amber-950: #fff7d6; --gooo-bg: #f4f5f7; --gooo-surface-2: #ebecf0; --gooo-surface-glass: rgba(244, 245, 247, 0.92); --gooo-border: #dfe1e6; --gooo-border-soft: #ebecf0; --gooo-text: #172b4d; --gooo-text-strong: #091e42; --gooo-muted: #5e6c84; --gooo-faint: #7a869a; /* A desaturated navy rather than a saturated blue. It still reads as "this is the interactive one" and stops well short of being a brand colour, which is the entire brief for this theme. */ --gooo-accent: #44618a; --gooo-accent-dim: rgba(68, 97, 138, 0.10); --gooo-danger: #ae2e24; --gooo-danger-dim: rgba(174, 46, 36, 0.10); --gooo-warn: #974f0c; --gooo-warn-dim: rgba(151, 79, 12, 0.10); --gooo-success: #216e4e; --gooo-success-dim: rgba(33, 110, 78, 0.10); /* Nearly square. Rounded corners read as consumer software; the enterprise tools this is dressing up as sit between 3px and 4px. */ --gooo-radius: 3px; --gooo-radius-sm: 3px; --color-accent: #44618a; --color-accent-strong: #3a5375; --color-accent-soft: #3a5375; --color-wordmark-green: #172b4d; --color-wordmark-red: #44618a; } /* Flat, not floating. * * The house style leans on shadow for depth against a dark ground. On a light * one the same shadows read as a stack of cards hovering over the page — fine * for `corporate`, wrong for `dull`, where one hairline border does all the * separating. */ body.theme-dull .gooo-card, body.theme-dull .gooo-topbar, body.theme-dull .gooo-appbar { box-shadow: none; } /* ========================================================================== * Everything except the house style * ========================================================================== */ /* Hold the lockup still. * * A logo that ticks through four colour states on a 20s loop is the single most * "not a corporate tool" thing on the page. Cancelling the wordmark's animation * is enough for it — its rest state is the filled one it already paints from * `--wordmark-ink`. The mark needs its resting palette restating, because the * `--sc-*` properties only exist inside the keyframes; this mirrors what the * `prefers-reduced-motion` block in app.css does, for the same reason. */ body.theme-corporate .wordmark__ch, body.theme-dull .wordmark__ch, body.theme-plain .wordmark__ch { animation: none; } body.theme-corporate .sc-mark, body.theme-dull .sc-mark, body.theme-plain .sc-mark { animation: none; --sc-back: var(--sc-mark-red); --sc-mid: var(--sc-mark-green); --sc-front: var(--sc-mark-green); --sc-caret: var(--sc-mark-green); --sc-cursor: var(--sc-mark-red); --sc-solo-caret: var(--sc-mark-green); --sc-solo-cursor: var(--sc-mark-red); } /* The separating dot is painted `--color-white` in app.css, which is the right answer on a dark ground and an invisible one on a light page — the wordmark reads "someones computer" with a hole in it. It follows the words. */ body.theme-corporate .wordmark__dot { --wordmark-ink: #0f172a; } body.theme-dull .wordmark__dot { --wordmark-ink: #172b4d; } /* ---- The cast, dimmed to a corner shadow -------------------------------- * * The page backdrop is already a blurred, part-off-screen watermark * (`.gooo-charbg` in app.css, defaults 0.20 and 3px). Turning it down is the * whole change: at 3% behind a 10px blur the silhouette reads as soft depth in * the corner rather than as a creature — and on a light ground it has to go * fainter still than it would on a dark one. * * Declared on the SVG rather than as `--charbg-*` on the wrapper because * _backdrop.html.twig lets a piece that sits badly nudge those same custom * properties with an inline `style`, and an inline declaration beats a * stylesheet one. A per-piece nudge is tuned for the house style and must not * be able to un-dim a white-labelled deployment. `!important` for the same * reason as the `transform: none !important` in app.css's reduced-motion blocks. * * `plain` needs no rule — App\Enum\Theme::showsBackdrop() is false for it and * the markup is never emitted. */ body.theme-corporate .gooo-charbg .gooo-outline__svg, body.theme-dull .gooo-charbg .gooo-outline__svg { opacity: 0.03 !important; filter: blur(10px) !important; color: #0f172a !important; }