/* * ============================================================================ * Theme design tokens * ============================================================================ * * These --theme-* variables are the design-token tier. They are consumed * ONLY by `#app.theme1*` selectors in src/assets/common.css, which derive * the public --x-* API from them. Components should NOT reference * --theme-* directly. * * Source brand colors (rebranding starting points — values below are * precomputed from these): * primary palette: #1861ac (alt option: #742674) * secondary palette: #267473 * * Surfaces, border, and on-accent were derived once via color-mix() from * the brand colors and inlined as RGB literals. To rebrand, recompute the * derived surfaces from the new brand color (the formulas are in git * history) and replace each rgb(...) below. * * Loaded as a static asset by _Layout.cshtml (not bundled by Vite). * ============================================================================ */ body { /* Primary palette */ --theme-text: rgb(100 100 100); /* primary text */ --theme-text-muted: rgb(100 100 100 / 25%); /* muted / secondary text */ --theme-text-disabled: rgb(100 100 100 / 50%); /* disabled / tertiary text */ --theme-surface: rgb(248, 250, 253); /* surface 1 */ --theme-surface-2: rgb(237, 242, 248); /* surface 2 */ --theme-surface-3: rgb(237, 242, 248); /* surface 3 (on surface) */ --theme-border: rgb(209, 223, 238); /* border on surfaces */ --theme-brand: #1861ac; /* brand / primary */ --theme-surface-accent: #54b7fd75; /* accent surface */ --theme-on-accent: rgb(16, 65, 115); /* on-accent text */ --theme-neutral-surface: rgb(255, 255, 255); /* used for surfaces */ --theme-neutral-surface-2: rgb(248, 248, 248); /* used for surfaces */ /* Secondary palette (used by `.theme1:not(.dark-mode) .cs-2[class]` remap) */ --theme-alt-surface: rgb(251, 252, 252); --theme-alt-surface-2: rgb(233, 241, 241); --theme-alt-surface-3: rgb(233, 241, 241); --theme-alt-border: rgb(212, 227, 227); --theme-alt-brand: #267473; --theme-alt-surface-accent: #54b7fd75; --theme-alt-on-accent: rgb(156, 161, 161); --theme-radius-1: 14px; } body.dark-mode { /* Primary palette (dark) */ --theme-text: rgb(250 250 250); --theme-text-muted: rgb(250 250 250 / 25%); --theme-text-disabled: rgb(175 175 175); --theme-surface: rgb(43, 44, 45); --theme-surface-2: rgb(51, 53, 54); --theme-surface-3: rgb(51, 53, 54); --theme-border: rgb(68, 73, 77); --theme-brand: rgb(186, 208, 230); --theme-surface-accent: #ffffff1c; --theme-on-accent: white; --theme-neutral-surface: rgb(51, 56, 58); --theme-neutral-surface-2: rgb(51, 56, 58); /* Secondary palette (dark) */ --theme-alt-surface: rgb(42, 42, 43); --theme-alt-surface-2: rgb(54, 56, 58); --theme-alt-surface-3: rgb(54, 56, 58); --theme-alt-border: rgb(68, 73, 77); --theme-alt-brand: rgb(186, 208, 230); --theme-alt-surface-accent: #ffffff1c; --theme-alt-on-accent: rgb(120, 122, 123); } /* * Variant: theme-purple * Source brand: rgb(104, 68, 168) (#6844a8). * Apply with ``. Combine with `dark-mode` for * the dark variant. The `theme1` style rules consume --theme-* tokens, so * they continue to work — just wearing this brand. */ body.theme-purple { --theme-surface: rgb(255 255 255); --theme-surface-2: rgb(243, 240, 248); --theme-surface-3: rgb(243, 240, 248); --theme-border: rgb(225, 218, 238); --theme-brand: rgb(104, 68, 168); --theme-surface-accent: #54b7fd75; --theme-on-accent: rgb(70, 46, 113); --theme-alt-surface: var(--theme-neutral-surface); --theme-alt-surface-2: var(--theme-neutral-surface-2); --theme-alt-surface-3: var(--theme-neutral-surface); --theme-alt-border: var(--theme-border); --theme-alt-brand: var(--theme-brand); --theme-alt-surface-accent: #9467f954; --theme-alt-on-accent: rgb(156, 161, 161); } body.theme-purple :where(#app,#app-teleport) { --x-approve-color: #27947c !important; --x-search-bg: var(--theme-neutral-surface-2); } body.theme-purple.dark-mode { --theme-surface: rgb(44, 44, 45); --theme-surface-2: rgb(53, 52, 54); --theme-surface-3: rgb(53, 52, 54); --theme-border: rgb(73, 71, 77); --theme-brand: rgb(210, 199, 229); --theme-surface-accent: #ffffff1c; --theme-on-accent: white; }