mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
fix(medications): repoint dose accent onto an AA-safe theme token
The medication cards stamped the upcoming schedule dose with Tailwind stock text-purple-400, which reads ~3.1:1 on the white Alucard light card and fails WCAG AA for body text. Add a theme-aware --dose-accent token: the exact text-purple-400 oklch in dark mode (so the dark card stays pixel-identical) and a darker AA-safe purple on the light card, mirroring how the semantic feedback tokens land each tone above AA in both themes. The cards switch to text-dose-accent in the follow-up commit.
This commit is contained in:
1 parent
e4bec11c2f
commit
0255dbad7d
1 file changed
+27
@@ -109,6 +109,18 @@
|
||||
--color-status-pill-in: var(--status-pill-in);
|
||||
--color-status-pill-near: var(--status-pill-near);
|
||||
--color-status-pill-out: var(--status-pill-out);
|
||||
|
||||
/*
|
||||
* Dose-accent token. The medication cards stamp the upcoming schedule
|
||||
* dose in purple. They previously hard-coded Tailwind stock
|
||||
* `text-purple-400` (`oklch(0.714 0.203 305.504)`), which reads ~3.1:1 on
|
||||
* the white Alucard card and fails WCAG AA (4.5:1) for body text. This
|
||||
* theme-aware token keeps the exact dark-mode purple and swaps to a darker
|
||||
* AA-safe purple on the light card — mirroring how the semantic feedback
|
||||
* tokens (`--success` / `--warning` / `--info`) land each tone above AA in
|
||||
* both themes.
|
||||
*/
|
||||
--color-dose-accent: var(--dose-accent);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -189,6 +201,13 @@
|
||||
--status-pill-near: #ffb86c;
|
||||
--status-pill-out: #ff8a8a;
|
||||
|
||||
/*
|
||||
* 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
|
||||
* stays pixel-identical. AA on the dark card at ~6.8:1.
|
||||
*/
|
||||
--dose-accent: oklch(0.714 0.203 305.504);
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -245,6 +264,14 @@
|
||||
--status-pill-near: #a34d14;
|
||||
--status-pill-out: #b32d1e;
|
||||
|
||||
/*
|
||||
* Dose accent in light mode (Alucard). The bright `text-purple-400` reads
|
||||
* ~3.1:1 on the white card and fails AA; this darker purple — the same
|
||||
* family as the light-mode `--primary` (#644ac9) — clears 4.5:1 on both
|
||||
* the white card and the muted panel while keeping the purple identity.
|
||||
*/
|
||||
--dose-accent: #6f42c1;
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user