2.2 KiB
2.2 KiB
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) andhtml.light: convert to a true black/white greyscale scale (surfaces, borders, text all#000–#fffgreys, 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.greybecomes 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
lightanddarkare literal greyscale inverses of each other (every--c-*value in one is the other's lightness mirrored, no hue).greyuses 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.