🤖 Replace hardcoded colors with Tailwind semantic utilities

[kylecarbs]

Summary

Replaces ~90 common hardcoded hex colors with Tailwind semantic color utilities to improve consistency and maintainability.

Changes

Extended Tailwind Theme

Added 16 semantic color variables to @theme in globals.css:

• Text colors: muted, text-dim, text-light, text-lighter, text-subdued
• Background colors: bg-dark, bg-darker, bg-hover, separator, modal-bg
• Border colors: border-light, border-medium
• Accent colors: accent, accent-dark
• Status colors: success, danger

Replaced Colors Across 43 Files

High-impact files:

• ReviewPanel.tsx (30 colors → semantic utilities)
• ProjectSidebar.tsx (26 colors → semantic utilities)
• CostsTab.tsx, GitStatusIndicatorView.tsx, FileTree.tsx
• Plus 38+ other component files

Common Mappings

text-[#888]     → text-muted
text-[#ccc]     → text-foreground
bg-[#1e1e1e]    → bg-bg-dark
bg-[#2a2a2b]    → bg-bg-hover
border-[#3e3e42] → border-border-light
text-[#007acc]  → text-accent

Before/After

• Before: 303 hardcoded hex colors across codebase
• After: ~215 remaining (intentional/semantic-specific)
• Reduction: ~30% of generic UI colors centralized

Remaining Colors

~215 hex colors remain intentionally:

• Syntax highlighting colors (#569cd6, #f48771)
• Git indicator colors in functions
• Context-specific semantic colors (#ff5555 for delete, #ffc107 for warnings)
• Chart/visualization colors

Benefits

✅ Single source of truth for common UI colors
✅ Consistent semantic naming across codebase
✅ Theme-ready architecture
✅ Type-safe with Tailwind autocomplete
✅ Reduced cognitive load for developers

Testing

• ✅ TypeScript compilation passes
• ✅ All 43 modified files compile without errors
• ✅ No functional changes

Generated with cmux