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

@@ -73,7 +73,7 @@ export function OnboardingChecklist() {
{/* Progress bar */}
<div className="h-1 w-full bg-[rgba(255,255,255,0.04)]">
<div
className="h-full bg-[#22d3ee] transition-all duration-500 ease-out"
className="h-full bg-primary transition-all duration-500 ease-out"
style={{ width: `${progressPercent}%` }}
/>
</div>
@@ -82,15 +82,15 @@ export function OnboardingChecklist() {
{/* Header */}
<div className="flex items-center justify-between mb-3">
<div>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Getting Started
</p>
<p className="text-sm text-[#e2e5eb] mt-0.5">
<p className="text-sm text-foreground mt-0.5">
{isAllDone ? (
<span className="text-[#67e8f9] font-semibold">You're all set!</span>
<span className="text-accent-text font-semibold">You're all set!</span>
) : (
<span>
<span className="text-[#67e8f9] font-semibold">{completedCount}</span>
<span className="text-accent-text font-semibold">{completedCount}</span>
{' '}of {totalCount} complete
</span>
)}
@@ -98,7 +98,7 @@ export function OnboardingChecklist() {
</div>
<button
onClick={handleDismiss}
className="rounded-md p-1 text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
aria-label="Dismiss onboarding checklist"
>
<X size={16} />
@@ -126,8 +126,8 @@ export function OnboardingChecklist() {
className={cn(
'flex h-5 w-5 shrink-0 items-center justify-center rounded-md border transition-colors',
done
? 'bg-[#22d3ee] border-transparent'
: 'border-[#1e2130]'
? 'bg-primary border-transparent'
: 'border-border'
)}
>
{done && <Check size={12} className="text-white" />}
@@ -138,8 +138,8 @@ export function OnboardingChecklist() {
className={cn(
'flex-1',
done
? 'text-[#848b9b] line-through'
: 'text-[#e2e5eb]'
? 'text-muted-foreground line-through'
: 'text-foreground'
)}
>
{item.label}
@@ -147,7 +147,7 @@ export function OnboardingChecklist() {
{/* Arrow for incomplete items */}
{!done && (
<ChevronRight size={14} className="text-[#848b9b] shrink-0" />
<ChevronRight size={14} className="text-muted-foreground shrink-0" />
)}
</button>
</li>