From 5371d3e283b35b553284b4e5ee3086122fc9c3ca Mon Sep 17 00:00:00 2001
From: Hugh Kaznowski <hughkaznowski@Hughs-MacBook-Pro.local>
Date: Sun, 6 Sep 2026 02:11:33 +0100
Subject: [PATCH] Add multi-accent palettes and a brighter Light Green theme
 (ticket 048)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every built-in theme now exposes three accents (--c-accent/-2/-3) instead
of one, so PanelChart's series palette draws distinct colours per theme
via color-mix() rather than a fixed, theme-independent hex list. Existing
presets keep their current base surface/border/text/accent look — the two
new accent vars are purely additive. Adds a new "Light Green" scheme
(light-surfaced, same green/magenta hue family as "Green") selectable
alongside the existing built-ins, both in ColorScheme (frontend + backend)
and the settings picker.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
---
 src/settings.rs                      |  3 ++
 webapp/src/components/NavMenu.tsx    | 10 ++++-
 webapp/src/components/PanelChart.tsx | 18 +++++++-
 webapp/src/index.css                 | 61 ++++++++++++++++++++++++++++
 webapp/src/lib/api.ts                |  1 +
 webapp/src/lib/themes.ts             | 42 +++++++++++++++++++
 webapp/src/lib/useSettingsPanel.ts   | 12 +++++-
 7 files changed, 142 insertions(+), 5 deletions(-)

diff --git a/src/settings.rs b/src/settings.rs
index 36e8169..98774c2 100644
--- a/src/settings.rs
+++ b/src/settings.rs
@@ -37,6 +37,9 @@ pub enum ColorScheme {
     Yellow,
     Pink,
     Orange,
+    /// Brighter, light-surfaced counterpart to `Green` (ticket 048).
+    #[serde(rename = "light_green")]
+    LightGreen,
     #[default]
     System,
 }
diff --git a/webapp/src/components/NavMenu.tsx b/webapp/src/components/NavMenu.tsx
index e9f3671..e35a974 100644
--- a/webapp/src/components/NavMenu.tsx
+++ b/webapp/src/components/NavMenu.tsx
@@ -27,8 +27,14 @@ const COLOR_SCHEMES: ColorScheme[] = [
   'yellow',
   'pink',
   'orange',
+  'light_green',
 ]
 
+/** Display label for a `ColorScheme`: underscores become spaces so `capitalize` (which titles each word) renders e.g. "light_green" as "Light Green". */
+function schemeLabel(scheme: ColorScheme): string {
+  return scheme.replace(/_/g, ' ')
+}
+
 export function NavMenu({ stats }: { stats: Stats | null }) {
   const [openPanel, setOpenPanel] = useState<PanelName>(null)
   const panel = useSettingsPanel()
@@ -307,14 +313,14 @@ function SettingsPanel({ panel }: { panel: ReturnType<typeof useSettingsPanel> }
                     : 'border-border-soft text-text-muted hover:bg-surface-2'
                 }`}
               >
-                {scheme}
+                {schemeLabel(scheme)}
               </button>
               {scheme !== 'system' && (
                 <button
                   type="button"
                   onClick={() => downloadBuiltinTheme(scheme)}
                   className="rounded-r border border-l-0 border-border-soft px-1.5 py-1 text-xs text-text-faint hover:bg-surface-2 hover:text-text"
-                  aria-label={`Download ${scheme} theme`}
+                  aria-label={`Download ${schemeLabel(scheme)} theme`}
                   title="Download as .css"
                 >
                   ↓
diff --git a/webapp/src/components/PanelChart.tsx b/webapp/src/components/PanelChart.tsx
index 315f227..4a12f25 100644
--- a/webapp/src/components/PanelChart.tsx
+++ b/webapp/src/components/PanelChart.tsx
@@ -22,8 +22,22 @@ export function seriesLabel(labels: Record<string, string>): string {
   return entries.map(([k, v]) => `${k}=${v}`).join(', ')
 }
 
-// Fixed, small categorical palette to avoid a colour-scale dependency; cycles if there are more series than colours.
-const COLORS = ['#38bdf8', '#f472b6', '#a78bfa', '#4ade80', '#fbbf24', '#fb7185', '#2dd4bf', '#f97316']
+// Categorical palette drawn from the active theme's accent set (ticket 048: every built-in theme
+// exposes --c-accent/--c-accent-2/--c-accent-3, not just one accent hue) instead of a hardcoded,
+// theme-independent hex list. `color-mix` tints/shades those three base accents into a fuller
+// 8-colour cycle (matching the previous fixed palette's size, so MAX_KEPT_SERIES/squashing below is
+// unaffected) without any JS colour math or a getComputedStyle read — the browser resolves the CSS
+// variables per-theme at paint time, same as `stroke="var(--c-border)"` elsewhere in this file.
+const COLORS = [
+  'var(--c-accent)',
+  'var(--c-accent-2)',
+  'var(--c-accent-3)',
+  'color-mix(in srgb, var(--c-accent) 60%, white)',
+  'color-mix(in srgb, var(--c-accent-2) 60%, white)',
+  'color-mix(in srgb, var(--c-accent-3) 60%, white)',
+  'color-mix(in srgb, var(--c-accent) 55%, black)',
+  'color-mix(in srgb, var(--c-accent-2) 55%, black)',
+]
 
 // One less than the palette size: above this many series, keep the top MAX_KEPT_SERIES (by value) and squash the
 // rest into a single "Other" bucket, so the squashed range never exceeds COLORS.length and never repeats a colour.
diff --git a/webapp/src/index.css b/webapp/src/index.css
index 2df253c..fa2a231 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -34,6 +34,14 @@
  * composite K = H+150 (mod 360), then fill --c-surface-, --c-border-,
  * --c-text- as hsl(H, ...) at the saturation/lightness steps below, accent
  * + accent-text as hsl(C, ...), and accent-soft as hsl(K, ...).
+ *
+ * --c-accent (base look, unchanged above) is joined by two more accent
+ * colours (ticket 048) so charts/highlights can draw from a 3-colour set
+ * instead of one hue: --c-accent-2 sits at H+90 and --c-accent-3 at H+270 —
+ * a quadrature pair straddling the base hue, distinct from both the
+ * complement (accent) and the split-complement (accent-soft). These are
+ * purely additive: nothing that already reads --c-accent/-soft/-text
+ * changes look.
  */
 :root {
   color-scheme: light dark;
@@ -62,6 +70,8 @@
   --c-accent: #0ea5e9;
   --c-accent-soft: #0369a1;
   --c-accent-text: #7dd3fc;
+  --c-accent-2: #a78bfa;
+  --c-accent-3: #4ade80;
 }
 
 /* Exact lightness mirror of :root's neutral-950..50 scale (Tailwind neutral,
@@ -91,6 +101,8 @@ html.light {
   --c-accent: #0284c7;
   --c-accent-soft: #7dd3fc;
   --c-accent-text: #0369a1;
+  --c-accent-2: #7c3aed;
+  --c-accent-3: #16a34a;
 }
 
 /* base hue 0 (red): surfaces/borders/text tinted red; accent complement 180
@@ -115,6 +127,8 @@ html.red {
   --c-accent: hsl(180 70% 62%);
   --c-accent-soft: hsl(150 55% 34%);
   --c-accent-text: hsl(180 75% 80%);
+  --c-accent-2: hsl(90 65% 58%);
+  --c-accent-3: hsl(270 65% 68%);
 }
 
 /* base hue 140 (green): surfaces/borders/text tinted green; accent complement
@@ -139,6 +153,8 @@ html.green {
   --c-accent: hsl(320 70% 62%);
   --c-accent-soft: hsl(290 55% 34%);
   --c-accent-text: hsl(320 75% 80%);
+  --c-accent-2: hsl(230 65% 62%);
+  --c-accent-3: hsl(50 65% 58%);
 }
 
 /* base hue 210 (blue): surfaces/borders/text tinted blue; accent complement
@@ -163,6 +179,8 @@ html.blue {
   --c-accent: hsl(30 70% 62%);
   --c-accent-soft: hsl(0 55% 34%);
   --c-accent-text: hsl(30 75% 80%);
+  --c-accent-2: hsl(300 65% 68%);
+  --c-accent-3: hsl(120 65% 55%);
 }
 
 /* base hue 50 (yellow): surfaces/borders/text tinted yellow; accent
@@ -187,6 +205,8 @@ html.yellow {
   --c-accent: hsl(230 70% 62%);
   --c-accent-soft: hsl(200 55% 34%);
   --c-accent-text: hsl(230 75% 80%);
+  --c-accent-2: hsl(140 65% 55%);
+  --c-accent-3: hsl(320 65% 68%);
 }
 
 /* base hue 330 (pink): surfaces/borders/text tinted pink; accent complement
@@ -211,6 +231,8 @@ html.pink {
   --c-accent: hsl(150 70% 62%);
   --c-accent-soft: hsl(120 55% 34%);
   --c-accent-text: hsl(150 75% 80%);
+  --c-accent-2: hsl(60 65% 58%);
+  --c-accent-3: hsl(240 65% 68%);
 }
 
 /* base hue 30 (orange): surfaces/borders/text tinted orange; accent
@@ -235,6 +257,43 @@ html.orange {
   --c-accent: hsl(210 70% 62%);
   --c-accent-soft: hsl(180 55% 34%);
   --c-accent-text: hsl(210 75% 80%);
+  --c-accent-2: hsl(120 65% 55%);
+  --c-accent-3: hsl(300 65% 68%);
+}
+
+/* Brighter, light-surfaced counterpart to `green` (ticket 048): same base
+   hue (140) and accent hues as `green`, but with a `light`-style inverted
+   surface/border/text scale (high lightness instead of low) so it reads as
+   a distinctly brighter theme, not a re-tint of the dark `green`. Danger
+   colours are `light`'s (hue-neutral), matching how `light` itself doesn't
+   tint danger either. */
+html.light_green {
+  --c-surface-0: hsl(140 40% 96%);
+  --c-surface-1: hsl(140 35% 92%);
+  --c-surface-2: hsl(140 30% 85%);
+
+  --c-border: hsl(140 25% 80%);
+  --c-border-soft: hsl(140 22% 70%);
+  --c-border-faint: hsl(140 35% 92%);
+  --c-border-strong: hsl(140 20% 40%);
+
+  --c-text: hsl(140 30% 12%);
+  --c-text-secondary: hsl(140 20% 25%);
+  --c-text-muted: hsl(140 15% 40%);
+  --c-text-subtle: hsl(140 10% 50%);
+  --c-text-faint: hsl(140 10% 65%);
+  --c-text-faintest: hsl(140 12% 80%);
+
+  --c-danger-bg: #fee2e2;
+  --c-danger-border: #fca5a5;
+  --c-danger-text: #b91c1c;
+  --c-danger-text-strong: #991b1b;
+
+  --c-accent: hsl(320 70% 40%);
+  --c-accent-soft: hsl(290 60% 85%);
+  --c-accent-text: hsl(320 75% 28%);
+  --c-accent-2: hsl(230 70% 45%);
+  --c-accent-3: hsl(50 70% 38%);
 }
 
 @theme inline {
@@ -262,6 +321,8 @@ html.orange {
   --color-accent: var(--c-accent);
   --color-accent-soft: var(--c-accent-soft);
   --color-accent-text: var(--c-accent-text);
+  --color-accent-2: var(--c-accent-2);
+  --color-accent-3: var(--c-accent-3);
 }
 
 html,
diff --git a/webapp/src/lib/api.ts b/webapp/src/lib/api.ts
index 73c6207..7832faf 100644
--- a/webapp/src/lib/api.ts
+++ b/webapp/src/lib/api.ts
@@ -90,6 +90,7 @@ export type ColorScheme =
   | 'yellow'
   | 'pink'
   | 'orange'
+  | 'light_green'
 
 export interface Settings {
   color_scheme: ColorScheme
diff --git a/webapp/src/lib/themes.ts b/webapp/src/lib/themes.ts
index e95d8c2..ababbb5 100644
--- a/webapp/src/lib/themes.ts
+++ b/webapp/src/lib/themes.ts
@@ -22,6 +22,8 @@ export const THEME_CSS_VARS = [
   '--c-accent',
   '--c-accent-soft',
   '--c-accent-text',
+  '--c-accent-2',
+  '--c-accent-3',
 ] as const
 
 export type ThemeVars = Record<(typeof THEME_CSS_VARS)[number], string>
@@ -49,6 +51,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent': '#0ea5e9',
     '--c-accent-soft': '#0369a1',
     '--c-accent-text': '#7dd3fc',
+    '--c-accent-2': '#a78bfa',
+    '--c-accent-3': '#4ade80',
   },
   light: {
     '--c-surface-0': '#fafafa',
@@ -71,6 +75,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent': '#0284c7',
     '--c-accent-soft': '#7dd3fc',
     '--c-accent-text': '#0369a1',
+    '--c-accent-2': '#7c3aed',
+    '--c-accent-3': '#16a34a',
   },
   red: {
     '--c-surface-0': 'hsl(0 32% 10%)',
@@ -93,6 +99,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent': 'hsl(180 70% 62%)',
     '--c-accent-soft': 'hsl(150 55% 34%)',
     '--c-accent-text': 'hsl(180 75% 80%)',
+    '--c-accent-2': 'hsl(90 65% 58%)',
+    '--c-accent-3': 'hsl(270 65% 68%)',
   },
   green: {
     '--c-surface-0': 'hsl(140 32% 10%)',
@@ -115,6 +123,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent': 'hsl(320 70% 62%)',
     '--c-accent-soft': 'hsl(290 55% 34%)',
     '--c-accent-text': 'hsl(320 75% 80%)',
+    '--c-accent-2': 'hsl(230 65% 62%)',
+    '--c-accent-3': 'hsl(50 65% 58%)',
   },
   blue: {
     '--c-surface-0': 'hsl(210 32% 10%)',
@@ -137,6 +147,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent': 'hsl(30 70% 62%)',
     '--c-accent-soft': 'hsl(0 55% 34%)',
     '--c-accent-text': 'hsl(30 75% 80%)',
+    '--c-accent-2': 'hsl(300 65% 68%)',
+    '--c-accent-3': 'hsl(120 65% 55%)',
   },
   yellow: {
     '--c-surface-0': 'hsl(50 32% 10%)',
@@ -159,6 +171,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent': 'hsl(230 70% 62%)',
     '--c-accent-soft': 'hsl(200 55% 34%)',
     '--c-accent-text': 'hsl(230 75% 80%)',
+    '--c-accent-2': 'hsl(140 65% 55%)',
+    '--c-accent-3': 'hsl(320 65% 68%)',
   },
   pink: {
     '--c-surface-0': 'hsl(330 32% 10%)',
@@ -181,6 +195,8 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent': 'hsl(150 70% 62%)',
     '--c-accent-soft': 'hsl(120 55% 34%)',
     '--c-accent-text': 'hsl(150 75% 80%)',
+    '--c-accent-2': 'hsl(60 65% 58%)',
+    '--c-accent-3': 'hsl(240 65% 68%)',
   },
   orange: {
     '--c-surface-0': 'hsl(30 32% 10%)',
@@ -203,6 +219,32 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent': 'hsl(210 70% 62%)',
     '--c-accent-soft': 'hsl(180 55% 34%)',
     '--c-accent-text': 'hsl(210 75% 80%)',
+    '--c-accent-2': 'hsl(120 65% 55%)',
+    '--c-accent-3': 'hsl(300 65% 68%)',
+  },
+  light_green: {
+    '--c-surface-0': 'hsl(140 40% 96%)',
+    '--c-surface-1': 'hsl(140 35% 92%)',
+    '--c-surface-2': 'hsl(140 30% 85%)',
+    '--c-border': 'hsl(140 25% 80%)',
+    '--c-border-soft': 'hsl(140 22% 70%)',
+    '--c-border-faint': 'hsl(140 35% 92%)',
+    '--c-border-strong': 'hsl(140 20% 40%)',
+    '--c-text': 'hsl(140 30% 12%)',
+    '--c-text-secondary': 'hsl(140 20% 25%)',
+    '--c-text-muted': 'hsl(140 15% 40%)',
+    '--c-text-subtle': 'hsl(140 10% 50%)',
+    '--c-text-faint': 'hsl(140 10% 65%)',
+    '--c-text-faintest': 'hsl(140 12% 80%)',
+    '--c-danger-bg': '#fee2e2',
+    '--c-danger-border': '#fca5a5',
+    '--c-danger-text': '#b91c1c',
+    '--c-danger-text-strong': '#991b1b',
+    '--c-accent': 'hsl(320 70% 40%)',
+    '--c-accent-soft': 'hsl(290 60% 85%)',
+    '--c-accent-text': 'hsl(320 75% 28%)',
+    '--c-accent-2': 'hsl(230 70% 45%)',
+    '--c-accent-3': 'hsl(50 70% 38%)',
   },
 }
 
diff --git a/webapp/src/lib/useSettingsPanel.ts b/webapp/src/lib/useSettingsPanel.ts
index cae27eb..91e6086 100644
--- a/webapp/src/lib/useSettingsPanel.ts
+++ b/webapp/src/lib/useSettingsPanel.ts
@@ -21,7 +21,17 @@ import {
 const INJECTED_THEME_ATTR = 'data-ottyl-theme-css-id'
 
 // Themes selectable independently of `system`, each backed by a `html.<name>` block in `index.css`.
-const THEME_CLASSES = ['light', 'dark', 'red', 'green', 'blue', 'yellow', 'pink', 'orange'] as const
+const THEME_CLASSES = [
+  'light',
+  'dark',
+  'red',
+  'green',
+  'blue',
+  'yellow',
+  'pink',
+  'orange',
+  'light_green',
+] as const
 
 // Reflects `colorScheme` onto `<html>` as a class + `data-color-scheme`; when a custom theme is active, no built-in class is added at all, since a class selector would out-specificity its injected `:root` override (see `applyCustomThemeCss`) and mask it.
 function applyColorScheme(colorScheme: ColorScheme, customThemeActive: boolean) {