Rework colour themes as greyscale + accent-only colour (ticket 032)

light/dark are now exact lightness mirrors of one true neutral scale,
grey is that same canonical neutral scale, and each named theme
(red/green/blue/yellow/pink/orange) derives its surface/border/text
greys by desaturating its own Tailwind hue at each scale step (HSL
S->0, lightness kept), leaving saturated colour only on --c-accent*.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o
This commit is contained in:
Hugh Kaznowski
2026-09-05 16:21:50 +01:00
co-authored by Claude Sonnet 5
parent 7694dcf120
commit 758feca780
2 changed files with 142 additions and 79 deletions
-47
View File
@@ -1,47 +0,0 @@
# 032 — Rework colour themes as greyscale equivalents with accent-only colour
## Summary
Today's colour themes (`webapp/src/index.css`) only vary `--c-accent`/
`--c-accent-soft`/`--c-accent-text` per theme (`html.red`, `.green`, `.blue`,
`.yellow`, `.pink`, `.orange` at lines 97-130) — every theme shares the same
dark `:root` surfaces/borders/text. `html.grey` (lines 75-95) is a Tailwind
slate palette, which reads blue-tinted rather than neutral. The wishlist
wants: `light`/`dark` as true black-and-white inverses of each other, `grey`
as true neutral greyscale, and every other named theme (`red`/`green`/etc.)
to desaturate its named hue to the matching greyscale lightness for
surfaces/borders/text, reserving actual saturated colour for accents only.
## Scope
- `:root` (dark) and `html.light`: convert to a true black/white greyscale
scale (surfaces, borders, text all `#000`–`#fff` greys, inverted between
the two), replacing the current warm/cool-tinted neutrals.
- `html.grey`: replace the slate-derived palette (lines 76-90) with the same
neutral greyscale scale as dark/light (i.e. `grey` becomes the canonical
greyscale theme other themes derive from), keeping only its own accent
distinct if one is still wanted.
- `red`/`green`/`blue`/`yellow`/`pink`/`orange`: for each, desaturate that
hue to compute a matching greyscale lightness scale for
`--c-surface-*`/`--c-border-*`/`--c-text-*` (e.g. convert the hue to HSL,
zero the saturation, keep the lightness steps), then keep that theme's
actual saturated colour only on `--c-accent*`.
- Document the derivation (e.g. a short comment or a small script/table) so a
new themed variant can be added consistently later.
## Acceptance criteria
- `light` and `dark` are literal greyscale inverses of each other (every
`--c-*` value in one is the other's lightness mirrored, no hue).
- `grey` uses a neutral (zero-saturation) scale, not a blue-tinted one.
- Each named colour theme's surfaces/borders/text render as neutral greys at
a lightness matching that colour's own luminance, with the named colour
visible only via `--c-accent*`.
## Depends on
None.
## Depended on by
- [033 — Downloadable/uploadable custom themes](033-custom-theme-download-upload.md)