refactor: replace hardcoded hex values with Tailwind semantic tokens

3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 04:34:35 -04:00
parent 123fc50af9
commit 303a558432
251 changed files with 3310 additions and 3310 deletions

View File

@@ -8,11 +8,11 @@ interface AISessionListItemProps {
}
const STATUS_CONFIG = {
active: { icon: Clock, color: 'text-[#22d3ee]', label: 'Active' },
active: { icon: Clock, color: 'text-primary', label: 'Active' },
paused: { icon: Pause, color: 'text-amber-400', label: 'Paused' },
resolved: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Resolved' },
escalated: { icon: ArrowUpRight, color: 'text-amber-400', label: 'Escalated' },
abandoned: { icon: AlertCircle, color: 'text-[#5a6170]', label: 'Abandoned' },
abandoned: { icon: AlertCircle, color: 'text-text-muted', label: 'Abandoned' },
} as const
export function AISessionListItem({ session }: AISessionListItemProps) {
@@ -26,12 +26,12 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
>
<div className="flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-[#e2e5eb] truncate">
<p className="text-sm font-medium text-foreground truncate">
{session.problem_summary || 'Untitled session'}
</p>
<div className="mt-1.5 flex items-center gap-3 flex-wrap">
{session.problem_domain && (
<span className="font-sans text-xs rounded-md bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-[#22d3ee]">
<span className="font-sans text-xs rounded-md bg-accent-dim px-2 py-0.5 text-[0.625rem] uppercase tracking-wider text-primary">
{session.problem_domain}
</span>
)}
@@ -39,10 +39,10 @@ export function AISessionListItem({ session }: AISessionListItemProps) {
<StatusIcon size={12} />
{config.label}
</span>
<span className="text-xs text-[#848b9b]">
<span className="text-xs text-muted-foreground">
{session.step_count} steps
</span>
<span className="text-xs text-[#5a6170]">
<span className="text-xs text-text-muted">
{new Date(session.created_at).toLocaleDateString(undefined, {
month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
})}