fix(a11y): give the due-reminder action a readable foreground

The Vorsorge "Jetzt messen" / mark-done button hard-coded white text on a
solid green fill. In the dark theme the fill is the bright Dracula green, so
white-on-green reads about 1.37:1 — below the WCAG AA floor.

Add a theme-aware `--success-foreground` token (near-black glyph on the dark
fill, white on the darker light-mode green) mirroring the existing
`--primary-foreground` pattern, and use `text-success-foreground` on both the
card and list variants. Green stays only on the action button; the card
surface remains neutral.
This commit is contained in:
Marc-André Bombeck committed 2026-06-18 22:41:31 +02:00
1 parent 6acc3a72df
commit 547a7f8904
2 files changed
+25 -6

No files matched your search

+17
View File
@@ -96,6 +96,7 @@
* - info → dracula-cyan (neutral informational note)
*/
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-info: var(--info);
@@ -155,6 +156,17 @@
--warning: var(--dracula-orange);
--info: var(--dracula-cyan);
/*
* Foreground for glyphs/labels painted on a solid `bg-success` fill. The
* raw Dracula green (`#50fa7b`) is a bright tone, so white-on-green reads
* ~1.37:1 in dark mode — well under AA. The dark theme below pairs it with
* the near-black Dracula background (`#282a36`, ~10.4:1); the light theme
* keeps white on the darker light-mode green (`#14720a`, ~6.1:1). Mirrors
* the `--primary-foreground` pattern. Default here keeps the dark-theme
* value so an un-themed root never falls back to an unreadable pairing.
*/
--success-foreground: #282a36;
--radius: 0.625rem;
}
@@ -212,6 +224,9 @@
--status-pill-near: #ffb86c;
--status-pill-out: #ff8a8a;
/* Dark glyph on the bright Dracula-green fill — ~10.4:1 on `#50fa7b`. */
--success-foreground: #282a36;
/*
* Dose accent in dark mode — the exact Tailwind `text-purple-400`
* (`oklch(0.714 0.203 305.504)`) the cards used before, so the dark card
@@ -297,6 +312,8 @@
--success: #14720a;
--warning: #a34d14;
--info: #036a96;
/* White glyph on the darker light-mode green — ~6.1:1 on `#14720a`. */
--success-foreground: #ffffff;
--border: #cfcfde;
--input: #cfcfde;
--ring: #644ac9;