fix(swaync): palette-safe pairings — text was invisible on summer-day (item 25)
All checks were successful
Check / eval (push) Successful in 2m52s

Palette roles aren't uniform: summer-day and flexoki-light use subtext
as text-ON-surface (== base) and surface as a dark chip (== text), so
swaync's @subtext-on-@base body text and @surface/@text buttons were
self-colored (caught on the Latitude).

- body/summary: @text on @base — the one text pairing that passes in
  every palette (survey: worst WCAG ratio 5.18 across all 21 themes;
  subtext/base bottomed at 1.00 twice, muted/base at 1.27).
- hover rows + widget-title buttons: alpha(@text, 0.1) tints —
  contrast by construction; subtext/surface defines dropped.
- NEW checks.theme-contrast (tools/check-theme-contrast.py): asserts
  the hex-on-hex text pairings across themes/*.json, cheap (no VM).

The audit also found the generated waybar/rofi CSS shares the bug
class, live on flexoki-light (no whole-swap) → BACKLOG item 27.

Verified: V0; V1 (checks.theme-contrast builds green, 21 themes;
rendered services.swaync.style has zero @subtext/@surface). Honesty:
NOT visually verified — V3 queued (notify-send on summer-day).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Bernardo Magri
2026-07-04 18:53:01 +01:00
parent 63136a8cb1
commit a643391d3d
7 changed files with 142 additions and 24 deletions

View File

@@ -29,11 +29,14 @@ in
};
style = ''
/* Palette baked from theme-state.json */
/* Palette baked from theme-state.json. Only roles guaranteed to
contrast @base in EVERY palette are used: subtext/surface mean
"on-surface" in some light themes (summer-day: subtext==base,
surface==text body text was invisible on hardware, item 25).
Chips/hovers are alpha(@text) tints contrast by construction.
tools/check-theme-contrast.py guards the hex-on-hex pairings. */
@define-color base ${c.base};
@define-color surface ${c.surface};
@define-color text ${c.text};
@define-color subtext ${c.subtext};
@define-color accent ${c.accent};
@define-color bad ${c.bad};
@@ -50,7 +53,7 @@ in
}
.notification-content .body {
color: @subtext;
color: @text;
}
.notification.critical {
@@ -66,7 +69,7 @@ in
.control-center .notification-row:focus,
.control-center .notification-row:hover {
background: alpha(@surface, 0.6);
background: alpha(@text, 0.1);
border-radius: ${r}px;
}
@@ -76,7 +79,7 @@ in
}
.widget-title > button {
background: @surface;
background: alpha(@text, 0.1);
color: @text;
border: none;
border-radius: ${r}px;