# 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).