Merge ticket 056: add Light variants for remaining colour schemes

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/components/NavMenu.tsx

@@ -28,6 +28,11 @@ const COLOR_SCHEMES: ColorScheme[] = [
   'pink',
   'orange',
   'light_green',
+  'light_red',
+  'light_blue',
+  'light_yellow',
+  'light_pink',
+  'light_orange',
 ]
 
 /** Display label for a `ColorScheme`: underscores become spaces so `capitalize` (which titles each word) renders e.g. "light_green" as "Light Green". */

webapp/src/index.css

@@ -296,6 +296,166 @@ html.light_green {
   --c-accent-3: hsl(50 70% 38%);
 }
 
+/* Brighter, light-surfaced counterpart to `red` (ticket 056): same base hue
+   (0) and accent hues as `red`, with `light`'s inverted surface/border/text
+   scale and `light`'s hue-neutral danger colours. */
+html.light_red {
+  --c-surface-0: hsl(0 40% 96%);
+  --c-surface-1: hsl(0 35% 92%);
+  --c-surface-2: hsl(0 30% 85%);
+
+  --c-border: hsl(0 25% 80%);
+  --c-border-soft: hsl(0 22% 70%);
+  --c-border-faint: hsl(0 35% 92%);
+  --c-border-strong: hsl(0 20% 40%);
+
+  --c-text: hsl(0 30% 12%);
+  --c-text-secondary: hsl(0 20% 25%);
+  --c-text-muted: hsl(0 15% 40%);
+  --c-text-subtle: hsl(0 10% 50%);
+  --c-text-faint: hsl(0 10% 65%);
+  --c-text-faintest: hsl(0 12% 80%);
+
+  --c-danger-bg: #fee2e2;
+  --c-danger-border: #fca5a5;
+  --c-danger-text: #b91c1c;
+  --c-danger-text-strong: #991b1b;
+
+  --c-accent: hsl(180 70% 40%);
+  --c-accent-soft: hsl(150 60% 85%);
+  --c-accent-text: hsl(180 75% 28%);
+  --c-accent-2: hsl(90 70% 45%);
+  --c-accent-3: hsl(270 70% 38%);
+}
+
+/* Brighter, light-surfaced counterpart to `blue` (ticket 056): same base hue
+   (210) and accent hues as `blue`, with `light`'s inverted surface/border/text
+   scale and `light`'s hue-neutral danger colours. */
+html.light_blue {
+  --c-surface-0: hsl(210 40% 96%);
+  --c-surface-1: hsl(210 35% 92%);
+  --c-surface-2: hsl(210 30% 85%);
+
+  --c-border: hsl(210 25% 80%);
+  --c-border-soft: hsl(210 22% 70%);
+  --c-border-faint: hsl(210 35% 92%);
+  --c-border-strong: hsl(210 20% 40%);
+
+  --c-text: hsl(210 30% 12%);
+  --c-text-secondary: hsl(210 20% 25%);
+  --c-text-muted: hsl(210 15% 40%);
+  --c-text-subtle: hsl(210 10% 50%);
+  --c-text-faint: hsl(210 10% 65%);
+  --c-text-faintest: hsl(210 12% 80%);
+
+  --c-danger-bg: #fee2e2;
+  --c-danger-border: #fca5a5;
+  --c-danger-text: #b91c1c;
+  --c-danger-text-strong: #991b1b;
+
+  --c-accent: hsl(30 70% 40%);
+  --c-accent-soft: hsl(0 60% 85%);
+  --c-accent-text: hsl(30 75% 28%);
+  --c-accent-2: hsl(300 70% 45%);
+  --c-accent-3: hsl(120 70% 38%);
+}
+
+/* Brighter, light-surfaced counterpart to `yellow` (ticket 056): same base
+   hue (50) and accent hues as `yellow`, with `light`'s inverted
+   surface/border/text scale and `light`'s hue-neutral danger colours. */
+html.light_yellow {
+  --c-surface-0: hsl(50 40% 96%);
+  --c-surface-1: hsl(50 35% 92%);
+  --c-surface-2: hsl(50 30% 85%);
+
+  --c-border: hsl(50 25% 80%);
+  --c-border-soft: hsl(50 22% 70%);
+  --c-border-faint: hsl(50 35% 92%);
+  --c-border-strong: hsl(50 20% 40%);
+
+  --c-text: hsl(50 30% 12%);
+  --c-text-secondary: hsl(50 20% 25%);
+  --c-text-muted: hsl(50 15% 40%);
+  --c-text-subtle: hsl(50 10% 50%);
+  --c-text-faint: hsl(50 10% 65%);
+  --c-text-faintest: hsl(50 12% 80%);
+
+  --c-danger-bg: #fee2e2;
+  --c-danger-border: #fca5a5;
+  --c-danger-text: #b91c1c;
+  --c-danger-text-strong: #991b1b;
+
+  --c-accent: hsl(230 70% 40%);
+  --c-accent-soft: hsl(200 60% 85%);
+  --c-accent-text: hsl(230 75% 28%);
+  --c-accent-2: hsl(140 70% 45%);
+  --c-accent-3: hsl(320 70% 38%);
+}
+
+/* Brighter, light-surfaced counterpart to `pink` (ticket 056): same base hue
+   (330) and accent hues as `pink`, with `light`'s inverted surface/border/text
+   scale and `light`'s hue-neutral danger colours. */
+html.light_pink {
+  --c-surface-0: hsl(330 40% 96%);
+  --c-surface-1: hsl(330 35% 92%);
+  --c-surface-2: hsl(330 30% 85%);
+
+  --c-border: hsl(330 25% 80%);
+  --c-border-soft: hsl(330 22% 70%);
+  --c-border-faint: hsl(330 35% 92%);
+  --c-border-strong: hsl(330 20% 40%);
+
+  --c-text: hsl(330 30% 12%);
+  --c-text-secondary: hsl(330 20% 25%);
+  --c-text-muted: hsl(330 15% 40%);
+  --c-text-subtle: hsl(330 10% 50%);
+  --c-text-faint: hsl(330 10% 65%);
+  --c-text-faintest: hsl(330 12% 80%);
+
+  --c-danger-bg: #fee2e2;
+  --c-danger-border: #fca5a5;
+  --c-danger-text: #b91c1c;
+  --c-danger-text-strong: #991b1b;
+
+  --c-accent: hsl(150 70% 40%);
+  --c-accent-soft: hsl(120 60% 85%);
+  --c-accent-text: hsl(150 75% 28%);
+  --c-accent-2: hsl(60 70% 45%);
+  --c-accent-3: hsl(240 70% 38%);
+}
+
+/* Brighter, light-surfaced counterpart to `orange` (ticket 056): same base
+   hue (30) and accent hues as `orange`, with `light`'s inverted
+   surface/border/text scale and `light`'s hue-neutral danger colours. */
+html.light_orange {
+  --c-surface-0: hsl(30 40% 96%);
+  --c-surface-1: hsl(30 35% 92%);
+  --c-surface-2: hsl(30 30% 85%);
+
+  --c-border: hsl(30 25% 80%);
+  --c-border-soft: hsl(30 22% 70%);
+  --c-border-faint: hsl(30 35% 92%);
+  --c-border-strong: hsl(30 20% 40%);
+
+  --c-text: hsl(30 30% 12%);
+  --c-text-secondary: hsl(30 20% 25%);
+  --c-text-muted: hsl(30 15% 40%);
+  --c-text-subtle: hsl(30 10% 50%);
+  --c-text-faint: hsl(30 10% 65%);
+  --c-text-faintest: hsl(30 12% 80%);
+
+  --c-danger-bg: #fee2e2;
+  --c-danger-border: #fca5a5;
+  --c-danger-text: #b91c1c;
+  --c-danger-text-strong: #991b1b;
+
+  --c-accent: hsl(210 70% 40%);
+  --c-accent-soft: hsl(180 60% 85%);
+  --c-accent-text: hsl(210 75% 28%);
+  --c-accent-2: hsl(120 70% 45%);
+  --c-accent-3: hsl(300 70% 38%);
+}
+
 @theme inline {
   --color-surface-0: var(--c-surface-0);
   --color-surface-1: var(--c-surface-1);

webapp/src/lib/api.ts

@@ -91,6 +91,11 @@ export type ColorScheme =
   | 'pink'
   | 'orange'
   | 'light_green'
+  | 'light_red'
+  | 'light_blue'
+  | 'light_yellow'
+  | 'light_pink'
+  | 'light_orange'
 
 export interface Settings {
   color_scheme: ColorScheme

webapp/src/lib/themes.ts

@@ -252,6 +252,126 @@ export const BUILTIN_THEMES: Record<string, ThemeVars> = {
     '--c-accent-2': 'hsl(230 70% 45%)',
     '--c-accent-3': 'hsl(50 70% 38%)',
   },
+  light_red: {
+    '--c-surface-0': 'hsl(0 40% 96%)',
+    '--c-surface-1': 'hsl(0 35% 92%)',
+    '--c-surface-2': 'hsl(0 30% 85%)',
+    '--c-border': 'hsl(0 25% 80%)',
+    '--c-border-soft': 'hsl(0 22% 70%)',
+    '--c-border-faint': 'hsl(0 35% 92%)',
+    '--c-border-strong': 'hsl(0 20% 40%)',
+    '--c-text': 'hsl(0 30% 12%)',
+    '--c-text-secondary': 'hsl(0 20% 25%)',
+    '--c-text-muted': 'hsl(0 15% 40%)',
+    '--c-text-subtle': 'hsl(0 10% 50%)',
+    '--c-text-faint': 'hsl(0 10% 65%)',
+    '--c-text-faintest': 'hsl(0 12% 80%)',
+    '--c-danger-bg': '#fee2e2',
+    '--c-danger-border': '#fca5a5',
+    '--c-danger-text': '#b91c1c',
+    '--c-danger-text-strong': '#991b1b',
+    '--c-accent': 'hsl(180 70% 40%)',
+    '--c-accent-soft': 'hsl(150 60% 85%)',
+    '--c-accent-text': 'hsl(180 75% 28%)',
+    '--c-accent-2': 'hsl(90 70% 45%)',
+    '--c-accent-3': 'hsl(270 70% 38%)',
+  },
+  light_blue: {
+    '--c-surface-0': 'hsl(210 40% 96%)',
+    '--c-surface-1': 'hsl(210 35% 92%)',
+    '--c-surface-2': 'hsl(210 30% 85%)',
+    '--c-border': 'hsl(210 25% 80%)',
+    '--c-border-soft': 'hsl(210 22% 70%)',
+    '--c-border-faint': 'hsl(210 35% 92%)',
+    '--c-border-strong': 'hsl(210 20% 40%)',
+    '--c-text': 'hsl(210 30% 12%)',
+    '--c-text-secondary': 'hsl(210 20% 25%)',
+    '--c-text-muted': 'hsl(210 15% 40%)',
+    '--c-text-subtle': 'hsl(210 10% 50%)',
+    '--c-text-faint': 'hsl(210 10% 65%)',
+    '--c-text-faintest': 'hsl(210 12% 80%)',
+    '--c-danger-bg': '#fee2e2',
+    '--c-danger-border': '#fca5a5',
+    '--c-danger-text': '#b91c1c',
+    '--c-danger-text-strong': '#991b1b',
+    '--c-accent': 'hsl(30 70% 40%)',
+    '--c-accent-soft': 'hsl(0 60% 85%)',
+    '--c-accent-text': 'hsl(30 75% 28%)',
+    '--c-accent-2': 'hsl(300 70% 45%)',
+    '--c-accent-3': 'hsl(120 70% 38%)',
+  },
+  light_yellow: {
+    '--c-surface-0': 'hsl(50 40% 96%)',
+    '--c-surface-1': 'hsl(50 35% 92%)',
+    '--c-surface-2': 'hsl(50 30% 85%)',
+    '--c-border': 'hsl(50 25% 80%)',
+    '--c-border-soft': 'hsl(50 22% 70%)',
+    '--c-border-faint': 'hsl(50 35% 92%)',
+    '--c-border-strong': 'hsl(50 20% 40%)',
+    '--c-text': 'hsl(50 30% 12%)',
+    '--c-text-secondary': 'hsl(50 20% 25%)',
+    '--c-text-muted': 'hsl(50 15% 40%)',
+    '--c-text-subtle': 'hsl(50 10% 50%)',
+    '--c-text-faint': 'hsl(50 10% 65%)',
+    '--c-text-faintest': 'hsl(50 12% 80%)',
+    '--c-danger-bg': '#fee2e2',
+    '--c-danger-border': '#fca5a5',
+    '--c-danger-text': '#b91c1c',
+    '--c-danger-text-strong': '#991b1b',
+    '--c-accent': 'hsl(230 70% 40%)',
+    '--c-accent-soft': 'hsl(200 60% 85%)',
+    '--c-accent-text': 'hsl(230 75% 28%)',
+    '--c-accent-2': 'hsl(140 70% 45%)',
+    '--c-accent-3': 'hsl(320 70% 38%)',
+  },
+  light_pink: {
+    '--c-surface-0': 'hsl(330 40% 96%)',
+    '--c-surface-1': 'hsl(330 35% 92%)',
+    '--c-surface-2': 'hsl(330 30% 85%)',
+    '--c-border': 'hsl(330 25% 80%)',
+    '--c-border-soft': 'hsl(330 22% 70%)',
+    '--c-border-faint': 'hsl(330 35% 92%)',
+    '--c-border-strong': 'hsl(330 20% 40%)',
+    '--c-text': 'hsl(330 30% 12%)',
+    '--c-text-secondary': 'hsl(330 20% 25%)',
+    '--c-text-muted': 'hsl(330 15% 40%)',
+    '--c-text-subtle': 'hsl(330 10% 50%)',
+    '--c-text-faint': 'hsl(330 10% 65%)',
+    '--c-text-faintest': 'hsl(330 12% 80%)',
+    '--c-danger-bg': '#fee2e2',
+    '--c-danger-border': '#fca5a5',
+    '--c-danger-text': '#b91c1c',
+    '--c-danger-text-strong': '#991b1b',
+    '--c-accent': 'hsl(150 70% 40%)',
+    '--c-accent-soft': 'hsl(120 60% 85%)',
+    '--c-accent-text': 'hsl(150 75% 28%)',
+    '--c-accent-2': 'hsl(60 70% 45%)',
+    '--c-accent-3': 'hsl(240 70% 38%)',
+  },
+  light_orange: {
+    '--c-surface-0': 'hsl(30 40% 96%)',
+    '--c-surface-1': 'hsl(30 35% 92%)',
+    '--c-surface-2': 'hsl(30 30% 85%)',
+    '--c-border': 'hsl(30 25% 80%)',
+    '--c-border-soft': 'hsl(30 22% 70%)',
+    '--c-border-faint': 'hsl(30 35% 92%)',
+    '--c-border-strong': 'hsl(30 20% 40%)',
+    '--c-text': 'hsl(30 30% 12%)',
+    '--c-text-secondary': 'hsl(30 20% 25%)',
+    '--c-text-muted': 'hsl(30 15% 40%)',
+    '--c-text-subtle': 'hsl(30 10% 50%)',
+    '--c-text-faint': 'hsl(30 10% 65%)',
+    '--c-text-faintest': 'hsl(30 12% 80%)',
+    '--c-danger-bg': '#fee2e2',
+    '--c-danger-border': '#fca5a5',
+    '--c-danger-text': '#b91c1c',
+    '--c-danger-text-strong': '#991b1b',
+    '--c-accent': 'hsl(210 70% 40%)',
+    '--c-accent-soft': 'hsl(180 60% 85%)',
+    '--c-accent-text': 'hsl(210 75% 28%)',
+    '--c-accent-2': 'hsl(120 70% 45%)',
+    '--c-accent-3': 'hsl(300 70% 38%)',
+  },
 }
 
 export function generateThemeCss(vars: ThemeVars): string {

webapp/src/lib/useSettingsPanel.ts

@@ -31,6 +31,11 @@ const THEME_CLASSES = [
   'pink',
   'orange',
   'light_green',
+  'light_red',
+  'light_blue',
+  'light_yellow',
+  'light_pink',
+  'light_orange',
 ] 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.