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

+5 -1
View File
@@ -1,6 +1,10 @@
export function Badge({ count, tone = "default" }: { count: number; tone?: "default" | "warn" | "danger" }) {
if (count <= 0) return null;
const toneClass = tone === "danger" ? "bg-destructive text-primary-foreground" : tone === "warn" ? "bg-warning text-primary-foreground" : "bg-[color:var(--muted-foreground)] text-primary-foreground";
const toneClass = tone === "danger"
? "bg-destructive text-destructive-foreground"
: tone === "warn"
? "bg-warning text-warning-foreground"
: "bg-muted text-muted-foreground";
return (
<span className={`ml-auto inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1.5 text-[10px] font-bold ${toneClass}`}>
{count > 99 ? "99+" : count}
+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);