From 14d0184b63725defc37a9c71873f9fb04863cd74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Fri, 23 Oct 2026 08:18:33 +0200 Subject: [PATCH] fix(ui): give the neutral score pill a label colour that passes AA The neutral tone set muted text on the secondary fill, which measures 3.6:1 in the dark theme. The secondary surface's own foreground reads the same in light and passes in dark. --- src/components/ui/__tests__/score-pill.test.tsx | 2 +- src/components/ui/score-pill.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ui/__tests__/score-pill.test.tsx b/src/components/ui/__tests__/score-pill.test.tsx index 402a06172..10dfc0daf 100644 --- a/src/components/ui/__tests__/score-pill.test.tsx +++ b/src/components/ui/__tests__/score-pill.test.tsx @@ -17,7 +17,7 @@ describe("", () => { it("defaults to the neutral tone", () => { const html = renderToStaticMarkup(Low); - expect(html).toContain("bg-secondary text-muted-foreground"); + expect(html).toContain("bg-secondary text-secondary-foreground"); expect(html).toContain('data-tone="neutral"'); }); diff --git a/src/components/ui/score-pill.tsx b/src/components/ui/score-pill.tsx index c503c561d..33ba2931d 100644 --- a/src/components/ui/score-pill.tsx +++ b/src/components/ui/score-pill.tsx @@ -30,7 +30,10 @@ const scorePillVariants = cva( info: "bg-info/15 text-info", warning: "bg-warning/15 text-warning", destructive: "bg-destructive/15 text-destructive", - neutral: "bg-secondary text-muted-foreground", + // The secondary surface's own foreground: muted text on the secondary + // fill measured 3.6:1 in the dark theme, under the AA floor a pill + // label needs. + neutral: "bg-secondary text-secondary-foreground", }, numeric: { true: "font-semibold tabular-nums",