diff --git a/src/app/globals.css b/src/app/globals.css index 73a7dd6d9..80d94a203 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; diff --git a/src/components/measurement-reminders/vorsorge-section.tsx b/src/components/measurement-reminders/vorsorge-section.tsx index 359192b65..fef044321 100644 --- a/src/components/measurement-reminders/vorsorge-section.tsx +++ b/src/components/measurement-reminders/vorsorge-section.tsx @@ -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 = (