ottyl/tickets/056-light-variants-for-remaining-colour-schemes.md

056 — Add Light * variants for the remaining colour schemes

Summary

Ticket 048 already added one light-surfaced variant, light_green (webapp/src/lib/themes.ts:231-254, commit 5371d3e: "Adds a new 'Light Green' scheme (light-surfaced, same green/magenta hue family as 'Green') selectable alongside the existing built-ins"). The wishlist comment that prompted 048 — "we need a Light Green alongside Green" — is now clarified as applying to every colour scheme, not just green: the current built-in set is dark, light, red, green, blue, yellow, pink, orange, light_green (webapp/src/lib/themes.ts:38-255), so red, blue, yellow, pink, and orange still have no light-surfaced counterpart.

Adding a scheme is not fully data-driven from themes.ts alone — six files must be kept in sync per scheme, per the no-build-step-links-them comment at webapp/src/index.css:1-7:

1. webapp/src/index.css:264-300 — the html.light_green CSS block is the reference recipe: same hue + same accent hues as the dark counterpart, but with light's inverted (high-lightness) surface/border/text scale, and light's hue-neutral danger colors (comment at index.css:264-268 documents this explicitly).
2. webapp/src/lib/themes.ts:231-254 — the matching BUILTIN_THEMES entry (used for CSS export/download and validation).
3. webapp/src/lib/api.ts:83-93 — the ColorScheme TS union type.
4. src/settings.rs:30-42 — the matching Rust ColorScheme enum variant, with #[serde(rename = "light_<name>")].
5. webapp/src/lib/useSettingsPanel.ts:24-34 — THEME_CLASSES, used to apply/strip the html.* class.
6. webapp/src/components/NavMenu.tsx:20-31 — COLOR_SCHEMES, which drives the picker UI; schemeLabel() (NavMenu.tsx:34-35) already auto-titles light_red → "Light Red" by replacing underscores, so no extra label wiring is needed once a name is added to this array.

PanelChart.tsx's multi-accent color-mix() series-color logic (touched by ticket 048) is generic per-theme rather than per-scheme-name, so it likely needs no changes — worth a quick check while implementing, not expected to require edits.

Tickets 047/048's original files were deleted on implementation (git history only shows their removal commits, 5cb2dfd/7c331e7; bodies aren't recoverable), but commit 5371d3e's message and the resulting light_green block are sufficient as the template.

Scope

• Add light_red, light_blue, light_yellow, light_pink, and light_orange following the exact light_green recipe: same base hue and accent-hue choices as the corresponding dark-surfaced scheme, light's inverted surface/border/text lightness scale, light's neutral danger colors.
• Update all six files listed above for each new scheme: webapp/src/index.css, webapp/src/lib/themes.ts, webapp/src/lib/api.ts, src/settings.rs, webapp/src/lib/useSettingsPanel.ts, webapp/src/components/NavMenu.tsx.
• Verify schemeLabel() produces correct titles ("Light Red", "Light Blue", etc.) without additional label-mapping code.
• Spot-check PanelChart.tsx's series-color logic against one new light scheme to confirm it needs no changes (or fix it if it does).

Acceptance criteria

• All five new schemes are selectable in the settings picker (NavMenu.tsx), persist correctly, and are downloadable as CSS via the existing "download built-in theme" path.
• Each new scheme's CSS block round-trips through Settings serialization/deserialization (src/settings.rs) without errors, verified with a test analogous to any existing ColorScheme serialization test.
• make build and make lint pass with the new schemes added.

Depends on

048 (implemented; this ticket extends its established pattern to the remaining base hues).