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:
1 parent
72851ebea3
commit
dc6744bf71
2 files changed
+7
-3
No files matched your search
@@ -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}
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in new issue
Block a user