insights: render the wellness score number in the foreground colour

The centred score number painted off the band token (success/warning/
destructive), which cleared only ~1.5:1 against the dark wellness card
and read as illegible. Switch the number to the foreground colour so it
is legible on both the dark and the light card. The band semantic stays
carried by the ring arc fill, the data-band attribute, and the
aria-label, so the colour change costs no information.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.8 committed 2026-06-05 12:33:00 +02:00
1 parent f3f358b208
commit a0883bc269
1 file changed
+10 -7
+10 -7
View File
@@ -12,7 +12,6 @@ import { cn } from "@/lib/utils";
import { useCountUp } from "@/hooks/use-count-up";
import {
bandForScore,
BAND_NUMBER_CLASS,
BAND_VAR,
clampScore,
type ScoreBand,
@@ -156,12 +155,16 @@ export function ScoreRing({
className={cn(
"font-semibold tabular-nums",
dims.numberClass,
hasScore
? BAND_NUMBER_CLASS[resolvedBand].replace(
"text-",
"fill-",
)
: "fill-muted-foreground",
// v1.12.6 — the centred number reads in the
// foreground colour (white on the dark wellness
// card, near-black on the light card), never the
// band tint. The band-coloured number cleared only
// ~1.5:1 on `--card` and read as illegible. The
// band semantic is carried by the ring arc
// (`fill` = BAND_VAR) + the `data-band` attribute +
// the aria-label, so dropping it from the number
// costs no information while clearing AA.
hasScore ? "fill-foreground" : "fill-muted-foreground",
)}
>
{hasScore ? displayedRounded : "—"}