Six palettes, each with a light half and a dark one
The theme was one enum -- system, light, dark, ihasmail -- where one value carried a whole palette and implied dark. That works for exactly one palette. The two questions now come apart: which palette, and which side. Classic is the plain light and dark this app has always had. ihasmail's own palette gains a day version, so the background of the dark one becomes the text of the light one and the two read as one palette from either end. Dracula, Gruvbox, Rosé Pine and Tokyo Night are the work of their own projects, used under the MIT licence, and taken from each project's own repository rather than from anyone's reimplementation. What was fetched is recorded in .palette-sources/ and credited in NOTICE. Giving ihasmail's palette a light half removed a whole special case. Nothing is one-sided any more, so a palette can no longer override the mode, the toggle no longer has to set a palette aside on the way to light and remember it, and the greyed-out control that explained all that is gone. The old lastDarkTheme, which existed only for that, is gone with it. The shades between the published colours are derived rather than guessed: these projects publish twelve to twenty values and ihasmail needs about thirty. scripts/build-palettes.py computes the tiers and then measures every text colour against the surface it sits on -- 4.5:1 for prose, 3:1 for borders and marks -- lifting anything short towards white on a dark ground and towards black on a light one, so a lifted tier keeps its hue. It refuses to write a palette that would not pass. Every one of the nine halves needed at least one lift. These palettes are built for code editors, not for prose at this size: Dracula's comment grey is 3.03:1 on its own background and Rosé Pine's gold is 2.7:1 on Dawn. Shipping them as published would have quietly ended the WCAG AA claim. Two things caught while checking rather than while writing. The generated blocks were appended to the end of the stylesheet, which put them after the accent variants at equal specificity -- so choosing an accent over one of the new palettes did nothing at all. They now sit before those rules, where the existing ihasmail block's own comment says they have to. And that block was unqualified, so it would have shadowed the new light half; it is now explicitly the dark one. Settings written before this carry `theme` and no palette, and are read through the old enum. `theme` is still written back, derived, because a device on an older build reads it and would otherwise be stranded on a theme nobody chose.
This commit is contained in:
+35
-6
@@ -914,12 +914,41 @@ offering to translate a page the reader cannot read.
|
||||
|
||||
## Themes
|
||||
|
||||
Follow the system, light, dark, or **ihasmail** — the palette this project's
|
||||
site is painted in, and what a new account starts on. It is a theme rather than
|
||||
an accent because it changes backgrounds, borders and text as well as the
|
||||
highlight colour. Accent colours sit on top of any of them. The top-bar toggle
|
||||
remembers which dark theme you came from, so flipping to light and back returns
|
||||
you to the one you were on.
|
||||
Two questions, asked separately: **which palette** and **light or dark**. They
|
||||
used to be one setting, which works for exactly one palette and stops working
|
||||
at two.
|
||||
|
||||
| Palette | |
|
||||
| --- | --- |
|
||||
| **Classic** | The plain light and dark this app has always had |
|
||||
| **ihasmail** | The palette this project's site is painted in, and what a new account starts on |
|
||||
| **Dracula** | Dracula, and Alucard as its light half |
|
||||
| **Gruvbox** | |
|
||||
| **Rosé Pine** | Dawn as its light half |
|
||||
| **Tokyo Night** | Day as its light half |
|
||||
|
||||
Every one has both halves, so the top-bar toggle only ever changes the side and
|
||||
never the colours. Accent colours still sit on top of any of them.
|
||||
|
||||
The four borrowed palettes are the work of their own projects and are used
|
||||
under the MIT licence — see [NOTICE](NOTICE). Only the published colour values
|
||||
are used, taken from each project's own repository; the values as fetched are
|
||||
recorded in `.palette-sources/palettes-upstream.md`.
|
||||
|
||||
**The shades between those values are derived, and every one is checked.**
|
||||
ihasmail needs about thirty tokens and these projects publish between twelve
|
||||
and twenty, so the tiers in between are computed by
|
||||
`scripts/build-palettes.py`, which then measures every text colour against the
|
||||
surface it sits on — 4.5:1 for prose, 3:1 for borders and marks — and lifts
|
||||
anything that falls short, towards white on a dark ground and towards black on
|
||||
a light one so the hue survives. The script refuses to write a palette that
|
||||
would not pass.
|
||||
|
||||
That check is not a formality. **Every one of the nine palette halves needed at
|
||||
least one lift**, because these palettes are designed for code editors rather
|
||||
than for prose at this size: Dracula's comment grey is 3.03:1 on its own
|
||||
background, and Rosé Pine's gold is 2.7:1 on Dawn. Shipping them as published
|
||||
would have quietly ended the WCAG AA claim two sections down.
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user