Add light variants for red, blue, yellow, pink, orange colour schemes
Extends ticket 048's light_green pattern (light-inverted surface/border/text scale + light's neutral danger colours, same base and accent hues as the dark-surfaced counterpart) to the remaining five colour schemes across all six files that must stay in sync: index.css, themes.ts, api.ts, settings.rs, useSettingsPanel.ts, and NavMenu.tsx. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
d17cfe9b83
commit
d59b3aec38
@@ -1,77 +0,0 @@
|
||||
# 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).
|
||||
Reference in New Issue
Block a user