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

@@ -753,9 +753,9 @@ function VorsorgeCard({
: "";
const isCoach = reminder.origin === "COACH";
const isLinked = reminder.measurementType != null;
// Due now / overdue ⇒ the action button takes the green "do it now" tone,
// analogous to the medication card's due affordance. The CARD stays neutral
// (no tint) per the project rule — only the action button goes green.
// Due now / overdue ⇒ the action button takes the green "do it now" tone.
// The CARD stays neutral (no tint) per the project rule — only the action
// button goes green; the surface follows the medication-card grammar.
const isDue =
due.key === "nextDue.today" || due.key === "overdueByDays";
const progress = intervalProgress(reminder, now);
@@ -817,13 +817,15 @@ function VorsorgeCard({
// v1.18.6 (MOD-06) — the green "Jetzt messen" / mark-done action. Green only
// on the action button (never the card surface). When not due it stays the
// calm default tone so the green reads as "now is the time".
// calm default tone so the green reads as "now is the time". `bg-success`
// pairs with the theme-aware `text-success-foreground` (dark glyph in dark,
// white in light) so the label clears WCAG AA in both themes.
const primaryButton = (
<Button
type="button"
className={cn(
"min-h-11 w-full",
isDue && "bg-success text-white hover:bg-success/90",
isDue && "bg-success text-success-foreground hover:bg-success/90",
)}
onClick={onPrimaryAction}
disabled={busy}
@@ -889,7 +891,7 @@ function VorsorgeCard({
size="sm"
className={cn(
"min-h-9",
isDue && "bg-success text-white hover:bg-success/90",
isDue && "bg-success text-success-foreground hover:bg-success/90",
)}
onClick={onPrimaryAction}
disabled={busy}