From dc6744bf71d28ada7703115771c1d760e5cc2a50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Tue, 21 Apr 2026 14:09:44 -0400
Subject: [PATCH] fix(design): make sidebar badges readable in dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/renderer/components/ui/Badge.tsx | 6 +++++-
 src/renderer/styles.css              | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/ui/Badge.tsx b/src/renderer/components/ui/Badge.tsx
index 7519ec6d..244f6485 100644
--- a/src/renderer/components/ui/Badge.tsx
+++ b/src/renderer/components/ui/Badge.tsx
@@ -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}
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 7f125960..d3c9e1f0 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -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);