From 227012ba1a6564fad9ebbc97dc01d92aaa1324d1 Mon Sep 17 00:00:00 2001 From: zenchantlive Date: Thu, 26 Feb 2026 15:23:42 -0800 Subject: [PATCH] refactor(theme): simplify gradients while preserving status colors on cards --- src/components/graph/graph-node-card.tsx | 4 ++-- src/components/graph/task-card-grid.tsx | 12 +++++----- src/components/shared/status-utils.tsx | 14 ++++++------ src/components/social/social-card.tsx | 29 +++++++++++------------- 4 files changed, 28 insertions(+), 31 deletions(-) diff --git a/src/components/graph/graph-node-card.tsx b/src/components/graph/graph-node-card.tsx index bfbc3fb..7b8018e 100644 --- a/src/components/graph/graph-node-card.tsx +++ b/src/components/graph/graph-node-card.tsx @@ -71,8 +71,8 @@ function statusDot(status: BeadIssue['status']): string { */ function nodeStyle(kind: GraphNodeData['kind']): string { return kind === 'epic' - ? 'bg-[linear-gradient(160deg,rgba(56,189,248,0.06),rgba(15,23,42,0.9))] border-sky-400/15' - : 'bg-[linear-gradient(160deg,rgba(255,255,255,0.03),rgba(15,23,42,0.85))] border-white/8'; + ? 'bg-sky-500/10 border-sky-400/30' + : 'bg-slate-800/60 border-white/10'; } /** diff --git a/src/components/graph/task-card-grid.tsx b/src/components/graph/task-card-grid.tsx index 5e0a932..87485af 100644 --- a/src/components/graph/task-card-grid.tsx +++ b/src/components/graph/task-card-grid.tsx @@ -75,17 +75,17 @@ function statusDot(status: BeadIssue['status']): string { function statusGradient(status: BeadIssue['status']): string { switch (status) { case 'open': - return 'border-l-2 border-emerald-400/60 bg-emerald-400/8'; + return 'border-l-2 border-emerald-400 bg-emerald-500/15'; case 'in_progress': - return 'border-l-2 border-amber-400/60 bg-amber-400/8'; + return 'border-l-2 border-amber-400 bg-amber-500/15'; case 'blocked': - return 'border-l-2 border-rose-400/60 bg-rose-400/8'; + return 'border-l-2 border-rose-400 bg-rose-500/15'; case 'closed': - return 'border-l-2 border-slate-400/40 bg-slate-400/5 opacity-70'; + return 'border-l-2 border-slate-400/60 bg-slate-500/10 opacity-80'; case 'deferred': - return 'border-l-2 border-slate-400/40 bg-slate-400/5'; + return 'border-l-2 border-slate-400/60 bg-slate-500/10'; default: - return 'border-l-2 border-slate-400/40 bg-slate-400/5'; + return 'border-l-2 border-slate-400/60 bg-slate-500/10'; } } diff --git a/src/components/shared/status-utils.tsx b/src/components/shared/status-utils.tsx index 7f75ff0..7dd91e1 100644 --- a/src/components/shared/status-utils.tsx +++ b/src/components/shared/status-utils.tsx @@ -1,19 +1,19 @@ export function statusGradient(status: string): string { switch (status) { case 'ready': - return 'border-l-2 border-emerald-400/60 bg-emerald-400/8'; + return 'border-l-2 border-emerald-400 bg-emerald-500/15'; case 'in_progress': - return 'border-l-2 border-amber-400/60 bg-amber-400/8'; + return 'border-l-2 border-amber-400 bg-amber-500/15'; case 'blocked': - return 'border-l-2 border-rose-400/60 bg-rose-400/8'; + return 'border-l-2 border-rose-400 bg-rose-500/15'; case 'closed': - return 'border-l-2 border-slate-400/40 bg-slate-400/5 opacity-70'; + return 'border-l-2 border-slate-400/60 bg-slate-500/10 opacity-80'; case 'open': - return 'border-l-2 border-sky-400/60 bg-sky-400/8'; + return 'border-l-2 border-sky-400 bg-sky-500/15'; case 'deferred': - return 'border-l-2 border-slate-400/40 bg-slate-400/5'; + return 'border-l-2 border-slate-400/60 bg-slate-500/10'; default: - return 'border-l-2 border-slate-400/40 bg-slate-400/5'; + return 'border-l-2 border-slate-400/60 bg-slate-500/10'; } } diff --git a/src/components/social/social-card.tsx b/src/components/social/social-card.tsx index ee88a21..1558b3e 100644 --- a/src/components/social/social-card.tsx +++ b/src/components/social/social-card.tsx @@ -34,10 +34,9 @@ function handleCardKeyDown(event: KeyboardEvent, onClick?: Mouse function statusVisual(status: SocialCardData['status']) { if (status === 'blocked') { return { - border: 'color-mix(in srgb, var(--ui-accent-blocked) 50%, var(--ui-border-soft))', - cardBg: - 'linear-gradient(160deg, color-mix(in srgb, var(--ui-accent-blocked) 20%, #1a0f15), color-mix(in srgb, var(--ui-bg-shell) 92%, black))', - badgeBg: 'color-mix(in srgb, var(--ui-accent-blocked) 24%, transparent)', + border: 'rgba(255, 76, 114, 0.5)', + cardBg: 'rgba(255, 76, 114, 0.08)', + badgeBg: 'rgba(255, 76, 114, 0.2)', badgeText: '#ffd5df', chipText: 'Blocked', }; @@ -45,10 +44,9 @@ function statusVisual(status: SocialCardData['status']) { if (status === 'in_progress') { return { - border: 'color-mix(in srgb, var(--ui-accent-warning) 50%, var(--ui-border-soft))', - cardBg: - 'linear-gradient(160deg, color-mix(in srgb, var(--ui-accent-warning) 16%, #1a1510), color-mix(in srgb, var(--ui-bg-shell) 92%, black))', - badgeBg: 'color-mix(in srgb, var(--ui-accent-warning) 24%, transparent)', + border: 'rgba(255, 178, 74, 0.5)', + cardBg: 'rgba(255, 178, 74, 0.08)', + badgeBg: 'rgba(255, 178, 74, 0.2)', badgeText: '#ffe5c7', chipText: 'Active', }; @@ -56,10 +54,9 @@ function statusVisual(status: SocialCardData['status']) { if (status === 'ready') { return { - border: 'color-mix(in srgb, var(--ui-accent-ready) 50%, var(--ui-border-soft))', - cardBg: - 'linear-gradient(160deg, color-mix(in srgb, var(--ui-accent-ready) 16%, #101a15), color-mix(in srgb, var(--ui-bg-shell) 92%, black))', - badgeBg: 'color-mix(in srgb, var(--ui-accent-ready) 24%, transparent)', + border: 'rgba(53, 217, 143, 0.5)', + cardBg: 'rgba(53, 217, 143, 0.08)', + badgeBg: 'rgba(53, 217, 143, 0.2)', badgeText: '#d6ffe7', chipText: 'Ready', }; @@ -67,8 +64,8 @@ function statusVisual(status: SocialCardData['status']) { return { border: 'var(--ui-border-strong)', - cardBg: 'linear-gradient(160deg, color-mix(in srgb, var(--ui-bg-card) 95%, black), color-mix(in srgb, var(--ui-bg-shell) 90%, black))', - badgeBg: 'color-mix(in srgb, var(--ui-border-strong) 24%, transparent)', + cardBg: 'var(--ui-bg-card)', + badgeBg: 'rgba(143, 156, 175, 0.15)', badgeText: 'var(--ui-text-muted)', chipText: 'Closed', }; @@ -141,8 +138,8 @@ export function SocialCard({ background: status.cardBg, borderColor: selected ? status.border : 'var(--ui-border-soft)', boxShadow: selected - ? '0 24px 40px -26px rgba(0,0,0,0.85), 0 0 0 1px color-mix(in srgb, var(--ui-border-strong) 66%, transparent)' - : '0 12px 26px -24px rgba(0,0,0,0.82)', + ? `0 0 0 1px ${status.border}, 0 20px 40px -20px rgba(0,0,0,0.6)` + : '0 8px 24px -16px rgba(0,0,0,0.5)', }} >