/* Additional color theme presets (Settings > Appearance). The "Default" theme lives in * default.css as the bare :root/.dark fallback — these are opt-in via [data-theme="x"] on * , combined with the existing .dark class for the dark variant of each. * Only variables that actually differ from default.css are redeclared here. */ /* ---------------------------------------------------------------------- */ /* Inverted — nav menu is white; the main content area (the routed-page * panel in MainLayout.razor) is light grey. Individual BbCards inside page * content stay white, popping against that grey canvas. No card borders — * the tonal difference is the only separation. */ /* ---------------------------------------------------------------------- */ [data-theme="inverted"] { --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); /* The main content panel's background (see the .main-content override below). * Exposed as a variable, with fallback var(--card) elsewhere, so in-page * elements that sit directly on that panel (e.g. sticky filter bars on * /signals and /insights) can match it instead of a plain bg-background/ * bg-card, which would otherwise stay white here and look mismatched. */ --content-surface: rgb(247, 246, 246); } [data-theme="inverted"].dark { --sidebar: oklch(0.145 0 0); --sidebar-foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); } /* The main content panel (MainLayout.razor's "border bg-card" wrapper around * @Body) isn't a BbCard — it's the one "main card area" that gets the grey, * distinct from --card (which individual BbCards elsewhere use and which * stays white). Shared with Pop and Claude, which use the same two-tier * surface layout. */ [data-theme="inverted"] .main-content > .border.bg-card, [data-theme="pop"] .main-content > .border.bg-card, [data-theme="claude"] .main-content > .border.bg-card { background-color: var(--content-surface); border-color: transparent; } /* Individual BbCards (Settings cards, connector tiles, etc.) — border * removed, relying on the white-card-on-grey-canvas tonal difference. */ [data-theme="inverted"] [data-slot="card"], [data-theme="pop"] [data-slot="card"], [data-theme="claude"] [data-slot="card"] { border-color: transparent; } /* /ideas page composer (Pages/Ideas.razor) — not a BbCard, but should read as * one: no border in Inverted/Pop/Claude, same as everything else. */ [data-theme="inverted"] .idea-composer, [data-theme="pop"] .idea-composer, [data-theme="claude"] .idea-composer { border-color: transparent; } /* /issues kanban columns (Pages/Issues.razor) — each column normally has its * own status-tinted tray background (bg-muted/40, bg-amber-50/50, etc.), which * would otherwise stay tinted regardless of theme. In Inverted/Pop/Claude they * become plain white cards like everything else. */ [data-theme="inverted"] .kanban-column, [data-theme="pop"] .kanban-column, [data-theme="claude"] .kanban-column { background-color: var(--card); } /* ---------------------------------------------------------------------- */ /* Soft — warm cream surfaces instead of stark white/grey. */ /* ---------------------------------------------------------------------- */ [data-theme="soft"] { --background: rgb(252, 252, 251); --foreground: oklch(0.25 0.02 50); --card: rgb(252, 252, 251); --card-foreground: oklch(0.25 0.02 50); --popover: rgb(252, 252, 251); --popover-foreground: oklch(0.25 0.02 50); --primary: oklch(0.25 0.02 50); --primary-foreground: oklch(0.99 0.005 75); --secondary: oklch(0.95 0.015 75); --secondary-foreground: oklch(0.25 0.02 50); --muted: oklch(0.95 0.015 75); --muted-foreground: oklch(0.5 0.02 50); --accent: oklch(0.93 0.02 60); --accent-foreground: oklch(0.25 0.02 50); --border: oklch(0.9 0.02 70); --input: oklch(0.9 0.02 70); --ring: oklch(0.65 0.03 60); --sidebar: rgb(252, 252, 251); --sidebar-foreground: oklch(0.25 0.02 50); --sidebar-primary: oklch(0.25 0.02 50); --sidebar-primary-foreground: oklch(0.99 0.005 75); --sidebar-accent: oklch(0.9 0.02 65); --sidebar-accent-foreground: oklch(0.25 0.02 50); --sidebar-border: oklch(0.88 0.02 65); --sidebar-ring: oklch(0.65 0.03 60); } [data-theme="soft"].dark { --background: oklch(0.16 0.015 50); --foreground: oklch(0.96 0.01 75); --card: oklch(0.19 0.015 50); --card-foreground: oklch(0.96 0.01 75); --popover: oklch(0.19 0.015 50); --popover-foreground: oklch(0.96 0.01 75); --primary: oklch(0.96 0.01 75); --primary-foreground: oklch(0.22 0.02 50); --secondary: oklch(0.28 0.02 55); --secondary-foreground: oklch(0.96 0.01 75); --muted: oklch(0.28 0.02 55); --muted-foreground: oklch(0.72 0.02 60); --accent: oklch(0.3 0.03 55); --accent-foreground: oklch(0.96 0.01 75); --border: oklch(0.3 0.02 55); --input: oklch(0.3 0.02 55); --ring: oklch(0.55 0.03 55); --sidebar: oklch(0.21 0.018 50); --sidebar-foreground: oklch(0.96 0.01 75); --sidebar-primary: oklch(0.96 0.01 75); --sidebar-primary-foreground: oklch(0.22 0.02 50); --sidebar-accent: oklch(0.3 0.03 55); --sidebar-accent-foreground: oklch(0.96 0.01 75); --sidebar-border: oklch(0.3 0.02 55); --sidebar-ring: oklch(0.55 0.03 55); } /* ---------------------------------------------------------------------- */ /* Accent — default surfaces, indigo buttons/active-states instead of the * default grayscale primary. */ /* ---------------------------------------------------------------------- */ [data-theme="accent"] { --primary: oklch(0.55 0.22 277); --primary-foreground: oklch(0.99 0.005 277); --ring: oklch(0.65 0.18 277); --accent: oklch(0.94 0.03 277); --accent-foreground: oklch(0.35 0.15 277); /* Active nav item — a faded, translucent wash (real alpha, so the sidebar * shows through) rather than a solid block, with muted text for * legibility against it. */ --sidebar-primary: oklch(0.55 0.22 277 / 12%); --sidebar-primary-foreground: oklch(0.35 0.15 277); --sidebar-ring: oklch(0.65 0.18 277); } [data-theme="accent"].dark { --primary: oklch(0.75 0.18 277); --primary-foreground: oklch(0.18 0.05 277); --ring: oklch(0.65 0.18 277); --accent: oklch(0.32 0.08 277); --accent-foreground: oklch(0.92 0.03 277); --sidebar-primary: oklch(0.75 0.18 277 / 18%); --sidebar-primary-foreground: oklch(0.92 0.03 277); --sidebar-ring: oklch(0.65 0.18 277); } /* ---------------------------------------------------------------------- */ /* Pop — Inverted's white-nav / grey-canvas / borderless-white-card layout, * with Accent's indigo color pop on buttons/active states. */ /* ---------------------------------------------------------------------- */ [data-theme="pop"] { /* Inverted's surfaces */ --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --content-surface: rgb(247, 246, 246); /* Accent's indigo pop */ --primary: oklch(0.55 0.22 277); --primary-foreground: oklch(0.99 0.005 277); --ring: oklch(0.65 0.18 277); --accent: oklch(0.94 0.03 277); --accent-foreground: oklch(0.35 0.15 277); /* Active nav item — a faded, translucent wash (real alpha, so the sidebar * shows through) rather than a solid block, with muted text for * legibility against it. */ --sidebar-primary: oklch(0.55 0.22 277 / 12%); --sidebar-primary-foreground: oklch(0.35 0.15 277); --sidebar-ring: oklch(0.65 0.18 277); } [data-theme="pop"].dark { --sidebar: oklch(0.145 0 0); --sidebar-foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --primary: oklch(0.75 0.18 277); --primary-foreground: oklch(0.18 0.05 277); --ring: oklch(0.65 0.18 277); --accent: oklch(0.32 0.08 277); --accent-foreground: oklch(0.92 0.03 277); --sidebar-primary: oklch(0.75 0.18 277 / 18%); --sidebar-primary-foreground: oklch(0.92 0.03 277); --sidebar-ring: oklch(0.65 0.18 277); } /* ---------------------------------------------------------------------- */ /* Claude — same two-tier layout as Inverted/Pop: nav is a warm off-white, * the main content panel gets a subtle translucent-black wash (10% alpha, * so it reads as a soft tint rather than a flat grey), and individual * BbCards stay white and pop against that canvas — matching the real * Claude.ai UI (off-white sidebar/canvas, white input "card" on top). */ /* ---------------------------------------------------------------------- */ [data-theme="claude"] { --sidebar: color(srgb 0.982353 0.982353 0.976471); --sidebar-foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --content-surface: color(srgb 0.0431373 0.0431373 0.0431373 / 0.1); } /* No dark values were given for this theme — fall back to Default's dark * surfaces (neutral, not the light warm off-white) rather than guessing at * a translucent-white equivalent. Adjust if a specific dark look is wanted. */ [data-theme="claude"].dark { --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); }