Update tickets
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
# 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)
|
||||
Reference in New Issue
Block a user