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

@@ -49,7 +49,7 @@ export function ActivityItem({
className={cn(
'flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors',
'hover:bg-[rgba(255,255,255,0.03)]',
isRecent ? 'text-[#6b7280] text-[0.72rem]' : 'text-[#e2e8f0] text-[0.8rem]'
isRecent ? 'text-text-rail-label text-[0.72rem]' : 'text-[#e2e8f0] text-[0.8rem]'
)}
title={`${treeName}${ticketNumber ? ` (${ticketNumber})` : ''} — click to resume`}
aria-label={
@@ -83,7 +83,7 @@ export function ActivityItem({
/>
)}
{status === 'recent' && (
<span className="h-1 w-1 shrink-0 rounded-full bg-[#3d4350]" />
<span className="h-1 w-1 shrink-0 rounded-full bg-muted-foreground" />
)}
{/* Flow name */}
@@ -96,7 +96,7 @@ export function ActivityItem({
</span>
)}
{isRecent && timestamp && (
<span className="shrink-0 font-label text-[0.5625rem] text-[#5a6170]">
<span className="shrink-0 font-label text-[0.5625rem] text-text-muted">
{formatRelativeTime(timestamp)}
</span>
)}

View File

@@ -22,7 +22,7 @@ export function SidebarActivityFeed({
{/* Header */}
<div className="flex items-center gap-1.5 px-2.5 py-1 mb-0.5">
<Clock size={10} style={{ color: '#34d399' }} />
<span className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-[#5a6170]">
<span className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-text-muted">
Activity
</span>
</div>

View File

@@ -61,7 +61,7 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
>
{resolved}
</div>
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-[#3d4350]">
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
Resolved
</div>
</div>
@@ -73,7 +73,7 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
>
{active}
</div>
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-[#3d4350]">
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
Active
</div>
</div>
@@ -84,7 +84,7 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
>
{formatDuration(totalSeconds)}
</div>
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-[#3d4350]">
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
Total Time
</div>
</div>