🤖 Replace hardcoded colors with Tailwind semantic utilities (#388)

## 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`_

Author: kylecarbs

src/App.tsx

@@ -662,7 +662,7 @@ function AppInner() {
 
   return (
     <>
-      <div className="flex h-screen overflow-hidden bg-[#1e1e1e] [@media(max-width:768px)]:flex-col">
+      <div className="flex h-screen overflow-hidden bg-bg-dark [@media(max-width:768px)]:flex-col">
         <LeftSidebar
           projects={projects}
           workspaceMetadata={workspaceMetadata}
@@ -701,7 +701,7 @@ function AppInner() {
               </ErrorBoundary>
             ) : (
               <div
-                className="text-center max-w-[800px] mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-[#888] [&_p]:leading-[1.6]"
+                className="text-center max-w-[800px] mx-auto w-full [&_h2]:text-white [&_h2]:mb-4 [&_h2]:font-bold [&_h2]:tracking-tight [&_p]:text-muted [&_p]:leading-[1.6]"
                 style={{
                   padding: "clamp(40px, 10vh, 100px) 20px",
                   fontSize: "clamp(14px, 2vw, 16px)",

src/components/AIView.tsx

@@ -245,7 +245,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -286,7 +286,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -302,7 +302,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -320,7 +320,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-[#1e1e1e] text-[#d4d4d4] overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 flex-row bg-bg-dark text-text-light overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         className
       )}
       style={{ containerType: "inline-size" }}
@@ -329,8 +329,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
         ref={chatAreaRef}
         className="flex-1 min-w-[400px] flex flex-col [@media(max-width:768px)]:min-w-0 [@media(max-width:768px)]:w-full [@media(max-width:768px)]:max-h-full"
       >
-        <div className="py-1 px-[15px] bg-[#252526] border-b border-[#3e3e42] flex justify-between items-center [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px] [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2">
-          <div className="font-semibold text-[#ccc] flex items-center gap-2 min-w-0 overflow-hidden">
+        <div className="py-1 px-[15px] bg-separator border-b border-border-light flex justify-between items-center [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px] [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2">
+          <div className="font-semibold text-foreground flex items-center gap-2 min-w-0 overflow-hidden">
             <StatusIndicator
               streaming={canInterrupt}
               title={
@@ -345,13 +345,13 @@ const AIViewInner: React.FC<AIViewProps> = ({
             <span className="font-mono text-xs whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
               {projectName} / {branch}
             </span>
-            <span className="font-mono text-[#888] font-normal text-[11px] whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
+            <span className="font-mono text-muted font-normal text-[11px] whitespace-nowrap overflow-hidden text-ellipsis min-w-0">
               {namedWorkspacePath}
             </span>
             <TooltipWrapper inline>
               <button
                 onClick={handleOpenTerminal}
-                className="bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-[#888] transition-colors hover:text-[#ccc] [&_svg]:w-4 [&_svg]:h-4"
+                className="bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-muted transition-colors hover:text-foreground [&_svg]:w-4 [&_svg]:h-4"
               >
                 <svg viewBox="0 0 16 16" fill="currentColor">
                   <path d="M0 2.75C0 1.784.784 1 1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75zm1.75-.25a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25H1.75zM7.25 8a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 01-1.06-1.06L5.44 8 3.72 6.28a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm1.5 1.5a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z" />

src/components/ChatInput.tsx

@@ -704,7 +704,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div
-      className="relative pt-[5px] px-[15px] pb-[15px] bg-[#252526] border-t border-[#3e3e42] flex flex-col gap-1"
+      className="relative pt-[5px] px-[15px] pb-[15px] bg-separator border-t border-border-light flex flex-col gap-1"
       style={{ containerType: "inline-size" }}
       data-component="ChatInputSection"
     >

src/components/ChatInputToast.tsx

@@ -71,9 +71,9 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
             <span className="text-sm leading-none">⚠</span>
             <div className="flex-1">
               {toast.title && <div className="font-semibold mb-1.5">{toast.title}</div>}
-              <div className="text-[#d4d4d4] leading-[1.4] mt-1.5">{toast.message}</div>
+              <div className="text-text-light leading-[1.4] mt-1.5">{toast.message}</div>
               {toast.solution && (
-                <div className="bg-[#1e1e1e] rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
+                <div className="bg-bg-dark rounded px-2 py-1.5 mt-2 font-monospace text-[11px] text-[#9cdcfe]">
                   {toast.solution}
                 </div>
               )}

src/components/ChatMetaSidebar.tsx

@@ -59,7 +59,7 @@ const ChatMetaSidebarComponent: React.FC<ChatMetaSidebarProps> = ({ workspaceId,
   return (
     <div
       className={cn(
-        "bg-[#252526] border-l border-[#3e3e42] flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
+        "bg-separator border-l border-border-light flex flex-col overflow-hidden transition-[width] duration-200 flex-shrink-0",
         showCollapsed ? "w-5 sticky right-0 z-10 shadow-[-2px_0_4px_rgba(0,0,0,0.2)]" : "w-[300px]"
       )}
       role="complementary"

src/components/CommandSuggestions.tsx

@@ -93,7 +93,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
         activeSuggestion ? `${resolvedListId}-option-${activeSuggestion.id}` : undefined
       }
       data-command-suggestions
-      className="absolute bottom-full left-0 right-0 mb-2 bg-[#252526] border border-[#3e3e42] rounded shadow-[0_-4px_12px_rgba(0,0,0,0.4)] max-h-[200px] overflow-y-auto z-[100] flex flex-col"
+      className="absolute bottom-full left-0 right-0 mb-2 bg-separator border border-border-light rounded shadow-[0_-4px_12px_rgba(0,0,0,0.4)] max-h-[200px] overflow-y-auto z-[100] flex flex-col"
     >
       {suggestions.map((suggestion, index) => (
         <div
@@ -116,7 +116,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
           </div>
         </div>
       ))}
-      <div className="px-2.5 py-1 border-t border-[#3e3e42] bg-[#1e1e1e] text-[#6b6b6b] text-[10px] text-center flex-shrink-0 [&_span]:text-[#969696] [&_span]:font-medium">
+      <div className="px-2.5 py-1 border-t border-border-light bg-bg-dark text-[#6b6b6b] text-[10px] text-center flex-shrink-0 [&_span]:text-[#969696] [&_span]:font-medium">
         <span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
       </div>
     </div>

src/components/Context1MCheckbox.tsx

@@ -17,19 +17,17 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
 
   return (
     <div className="flex items-center gap-1.5 ml-2">
-      <label className="flex items-center gap-1 text-[10px] text-[#ccc] cursor-pointer select-none whitespace-nowrap overflow-hidden text-ellipsis hover:text-white">
+      <label className="flex items-center gap-1 text-[10px] text-foreground cursor-pointer select-none whitespace-nowrap overflow-hidden text-ellipsis hover:text-white">
         <input
           type="checkbox"
           checked={use1M}
           onChange={(e) => setUse1M(e.target.checked)}
-          className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-[#3e3e42] rounded-sm bg-[#1e1e1e] relative hover:border-[#007acc] checked:bg-[#007acc] checked:border-[#007acc] checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
+          className="cursor-pointer w-[11px] h-[11px] m-0 appearance-none border border-border-light rounded-sm bg-bg-dark relative hover:border-accent checked:bg-accent checked:border-accent checked:after:content-[''] checked:after:absolute checked:after:left-[3px] checked:after:top-0 checked:after:w-[3px] checked:after:h-[6px] checked:after:border-solid checked:after:border-white checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:rotate-45"
         />
         1M Context
       </label>
       <TooltipWrapper inline>
-        <span className="cursor-help text-[#888] text-[10px] leading-none flex items-center">
-          ?
-        </span>
+        <span className="cursor-help text-muted text-[10px] leading-none flex items-center">?</span>
         <Tooltip className="tooltip" align="center" width="auto">
           Enable 1M token context window (beta feature for Claude Sonnet 4/4.5)
         </Tooltip>

src/components/DirectorySelectModal.tsx

@@ -82,7 +82,7 @@ export const DirectorySelectModal: React.FC = () => {
         onKeyDown={handleKeyDown}
         placeholder="/home/user/projects/my-project"
         autoFocus
-        className="w-full px-3 py-2 bg-[#2d2d2d] border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-[#007acc] placeholder:text-[#888]"
+        className="w-full px-3 py-2 bg-modal-bg border border-[#444] rounded text-white text-sm font-mono mb-5 focus:outline-none focus:border-accent placeholder:text-muted"
       />
       {error && <div className="text-error text-xs -mt-3 mb-3">{error}</div>}
       <ModalActions>

src/components/GitStatusIndicatorView.tsx

@@ -110,7 +110,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
               ))}
               <span style={{ color: getIndicatorColor(header.columnIndex) }}>!</span>
             </span>
-            <span className="text-[#cccccc]">[{header.branch}]</span>
+            <span className="text-foreground">[{header.branch}]</span>
           </div>
         ))}
       </div>
@@ -134,7 +134,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
           {displayFiles.map((line, index) => (
             <div
               key={index}
-              className="text-[#cccccc] font-mono text-[11px] leading-snug whitespace-pre"
+              className="text-foreground font-mono text-[11px] leading-snug whitespace-pre"
             >
               {line}
             </div>
@@ -174,7 +174,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
                 {renderIndicators(commit.indicators)}
                 <span className="text-[#569cd6] flex-shrink-0 select-all">{commit.hash}</span>
                 <span className="text-[#808080] flex-shrink-0">{commit.date}</span>
-                <span className="text-[#cccccc] flex-1 break-words">{commit.subject}</span>
+                <span className="text-foreground flex-1 break-words">{commit.subject}</span>
               </div>
             </div>
           ))}
@@ -187,7 +187,7 @@ export const GitStatusIndicatorView: React.FC<GitStatusIndicatorViewProps> = ({
   const tooltipElement = (
     <div
       className={cn(
-        "fixed z-[10000] bg-[#2d2d30] text-[#cccccc] border border-[#464647] rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
+        "fixed z-[10000] bg-modal-bg text-foreground border border-[#464647] rounded px-3 py-2 text-[11px] font-mono whitespace-pre max-w-[600px] max-h-[400px] overflow-auto shadow-[0_4px_12px_rgba(0,0,0,0.5)] pointer-events-auto transition-opacity duration-200",
         showTooltip ? "opacity-100 visible" : "opacity-0 invisible"
       )}
       style={{

src/components/ImageAttachments.tsx

@@ -19,7 +19,7 @@ export const ImageAttachments: React.FC<ImageAttachmentsProps> = ({ images, onRe
       {images.map((image) => (
         <div
           key={image.id}
-          className="relative w-20 h-20 rounded overflow-hidden border border-[#3e3e42] bg-[#1e1e1e]"
+          className="relative w-20 h-20 rounded overflow-hidden border border-border-light bg-bg-dark"
         >
           <img src={image.url} alt="Attached image" className="w-full h-full object-cover" />
           <button