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

@@ -104,7 +104,7 @@ export default function BatchStatusPage() {
<div className="flex items-center justify-between">
<button
onClick={() => treeId && navigate(`/flows/${treeId}/maintenance`)}
className="flex items-center gap-1.5 text-[0.875rem] text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
className="flex items-center gap-1.5 text-[0.875rem] text-muted-foreground hover:text-foreground transition-colors"
>
<ChevronLeft className="h-4 w-4" />
{tree?.name ?? 'Maintenance Flow'}
@@ -112,7 +112,7 @@ export default function BatchStatusPage() {
<button
onClick={() => loadSessions(true)}
disabled={isRefreshing}
className="flex items-center gap-1.5 rounded-lg border border-[#1e2130] px-3 py-1.5 text-[0.8125rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors disabled:opacity-50"
className="flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-[0.8125rem] text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-50"
>
<RefreshCw className={cn('h-3.5 w-3.5', isRefreshing && 'animate-spin')} />
Refresh
@@ -125,9 +125,9 @@ export default function BatchStatusPage() {
<Wrench className="h-5 w-5" />
</div>
<div>
<h1 className="text-xl font-semibold text-[#e2e5eb]">Batch Run</h1>
<h1 className="text-xl font-semibold text-foreground">Batch Run</h1>
{batchDate && (
<p className="text-[0.875rem] text-[#848b9b]">
<p className="text-[0.875rem] text-muted-foreground">
{batchDate.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}
</p>
)}
@@ -136,9 +136,9 @@ export default function BatchStatusPage() {
{/* Progress bar */}
{total > 0 && (
<div className="rounded-xl border border-[#1e2130] bg-[#14161d] p-5 space-y-3">
<div className="rounded-xl border border-border bg-card p-5 space-y-3">
<div className="flex items-center justify-between text-[0.875rem]">
<span className="font-medium text-[#e2e5eb]">
<span className="font-medium text-foreground">
{completed} of {total} complete
</span>
<span className={cn(
@@ -147,7 +147,7 @@ export default function BatchStatusPage() {
? 'text-emerald-400 bg-emerald-500/10'
: inProgress > 0
? 'text-amber-400 bg-amber-500/10'
: 'text-[#848b9b] bg-muted'
: 'text-muted-foreground bg-muted'
)}>
{allDone ? 'Complete' : inProgress > 0 ? `${inProgress} in progress` : 'Not started'}
</span>
@@ -175,7 +175,7 @@ export default function BatchStatusPage() {
<span className="text-[0.8125rem] text-amber-400">{outcomeCounts.workaround} workaround</span>
)}
{outcomeCounts.unresolved && (
<span className="text-[0.8125rem] text-[#848b9b]">{outcomeCounts.unresolved} unresolved</span>
<span className="text-[0.8125rem] text-muted-foreground">{outcomeCounts.unresolved} unresolved</span>
)}
</div>
)}
@@ -189,13 +189,13 @@ export default function BatchStatusPage() {
<p className="text-sm text-red-400 mb-3">{loadError}</p>
<button
onClick={() => loadSessions(true)}
className="rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
className="rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
>
Try again
</button>
</div>
) : sessions.length === 0 ? (
<p className="text-center text-[0.875rem] text-[#848b9b] py-8">
<p className="text-center text-[0.875rem] text-muted-foreground py-8">
No sessions found for this batch.
</p>
) : (