mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: dimmed text on the light palette keeps enough of the text colour to pass AA contrast

Browse source
This commit is contained in:
iris 2026-11-05 00:53:28 +01:00 • committed by mara
commit b82d4d4722
3 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/web-ui/css-vars.md
View file

@ -71,6 +71,12 @@ default palette). Default hexes shown are Catppuccin Mocha.
| `--muted` | `mix(base05 55.5%, base00)` | `#7f849c` | secondary / dimmed text | | `--muted` | `mix(base05 55.5%, base00)` | `#7f849c` | secondary / dimmed text |
| `--subtext0` | `mix(base05 77.7%, base00)` | `#a6adc8` | toolbar/status text; dimmer than `--fg`, lighter than `--muted` | | `--subtext0` | `mix(base05 77.7%, base00)` | `#a6adc8` | toolbar/status text; dimmer than `--fg`, lighter than `--muted` |
The shares in the `--muted` and `--subtext0` rows are the dark palette's. The light
palette keeps more of the text colour (85% and 93%, set in `colors.css` as
`--muted-share` and `--subtext0-share`), because the dark shares leave its dimmed
text at 2.4:1 against a card, short of the 4.5:1 AA asks for. A palette that sets
neither variable, such as a generated one, keeps the dark shares.
## Common mistakes ## Common mistakes
The Catppuccin colour names **don't** map 1:1 to the variable names. The Catppuccin colour names **don't** map 1:1 to the variable names.

6
frontend/packages/shared/src/colors.css
View file

@ -128,6 +128,9 @@
--base0D: var(--latte-base0D); --base0D: var(--latte-base0D);
--base0E: var(--latte-base0E); --base0E: var(--latte-base0E);
--base0F: var(--latte-base0F); --base0F: var(--latte-base0F);
/* Dimmed text on the light palette: see `--muted-share` in theme.css. */
--muted-share: 85%;
--subtext0-share: 93%;
} }
} }
@ -159,6 +162,9 @@
--base0D: var(--latte-base0D); --base0D: var(--latte-base0D);
--base0E: var(--latte-base0E); --base0E: var(--latte-base0E);
--base0F: var(--latte-base0F); --base0F: var(--latte-base0F);
/* Dimmed text on the light palette: see `--muted-share` in theme.css. */
--muted-share: 85%;
--subtext0-share: 93%;
} }
:root[data-theme="dark"] { :root[data-theme="dark"] {
--base00: var(--mocha-base00); --base00: var(--mocha-base00);

9
frontend/packages/shared/src/theme.css
View file

@ -36,14 +36,19 @@
); /* terminal / code bg, below --bg */ ); /* terminal / code bg, below --bg */
--muted: color-mix( --muted: color-mix(
in srgb, in srgb,
var(--base05) 55.5%, var(--base05) var(--muted-share, 55.5%),
var(--base00) var(--base00)
); /* secondary / dimmed text */ ); /* secondary / dimmed text */
--subtext0: color-mix( --subtext0: color-mix(
in srgb, in srgb,
var(--base05) 77.7%, var(--base05) var(--subtext0-share, 77.7%),
var(--base00) var(--base00)
); /* toolbar/status text; dimmer than --fg, lighter than --muted */ ); /* toolbar/status text; dimmer than --fg, lighter than --muted */
/* `--muted-share` and `--subtext0-share` are how much of the text colour each
mix keeps. A palette whose background is light sets them higher in
`colors.css`: at the dark palette's 55.5% the light one's muted text was
2.4:1 against its card background, short of the 4.5:1 AA asks for. A palette
that sets neither keeps the shares above. */
/* `--muted`, above, is mixed toward `--base00`/`--bg` — correct for /* `--muted`, above, is mixed toward `--base00`/`--bg` — correct for
dimmed text on the page background, wrong for dimmed text sitting on dimmed text on the page background, wrong for dimmed text sitting on