fix(design): make sidebar badges readable in dark mode

Badge text color was hard-coded to text-primary-foreground for every
tone, which renders as parchment light. Pairing light text with the
amber warning background (L=0.82) or the warm-silver muted background
(L=0.77) produced light-on-light collisions — the "9" on the active
Messages row and the "4" count on Work were nearly unreadable.

Route each tone through its own semantic foreground token:

  danger  -> bg-destructive text-destructive-foreground
  warn    -> bg-warning     text-warning-foreground    (dark text on amber)
  default -> bg-muted        text-muted-foreground

Also pull .dark --muted and --secondary off the --card lightness
(0.296 -> 0.360) so bg-muted is actually visible against the sidebar
card surface. This fixes not just the count pill but every hover/muted
fill across the app (toggle rest state, subtle button backgrounds, etc)
that previously vanished into the card.

Typecheck and build:verify clean.
This commit is contained in:
ZacharyZhang-NY committed 2026-04-21 14:09:44 -04:00
1 parent 72851ebea3
commit dc6744bf71
2 files changed
+7 -3

No files matched your search

+2 -2
View File
@@ -142,9 +142,9 @@
--popover-foreground: oklch(0.959 0.008 95);
--primary: oklch(0.462 0.096 255);
--primary-foreground: oklch(0.959 0.008 95);
--secondary: oklch(0.296 0.014 80);
--secondary: oklch(0.360 0.014 80);
--secondary-foreground: oklch(0.770 0.015 85);
--muted: oklch(0.296 0.014 80);
--muted: oklch(0.360 0.014 80);
--muted-foreground: oklch(0.770 0.015 85);
--accent: oklch(0.320 0.035 245);
--accent-foreground: oklch(0.959 0.008 95);