48 lines
2.2 KiB
Markdown
48 lines
2.2 KiB
Markdown
# 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)
|