🤖 refactor: replace hardcoded hex colors with CSS variables (#1197)

Replace hardcoded hex colors in React components with CSS variables from
`globals.css` for consistency and maintainability.

## Changes

### New CSS Variables (globals.css)
- `--color-code-string`: `hsl(40 53% 67%)` - string literals (#d7ba7d)
- `--color-syntax-error`: `hsl(355 65% 65%)` - One Dark error red
(#e06c75)
- `--color-terminal-bg/fg`: terminal colors for xterm.js
- `--color-info`: `hsl(207 90% 54%)` - info blue (#2196f3)
- `--color-init-bg/border`: init message styling
- `--color-init-error-bg/border`: error state styling
- `--color-text-lighter`: `hsl(0 0% 87%)` - lighter text (#ddd)

### Components Updated (9 files)
| File | Before | After |
|------|--------|-------|
| FileEditToolCall.tsx | `#888` | `var(--color-muted)` |
| TerminalView.tsx | `#1e1e1e`, `#d4d4d4` | getComputedStyle() for
xterm.js canvas |
| FileTree.tsx | `#666` | `var(--color-dim)` |
| ThresholdSlider.tsx | `#2d2d30`, `#cccccc` | `var(--color-modal-bg)`,
`var(--color-bright)` |
| TodoList.tsx | `#4caf50`, `#2196f3`, `#888`, `#666` | semantic
variables |
| InitMessage.tsx | Tailwind arbitrary values | Tailwind theme classes |
| Mermaid.tsx | `#e06c75` | `var(--color-syntax-error)` |
| AIView.tsx | `#888`, `#2d2d30`, `#d7ba7d` | semantic variables |

### AGENTS.md Fix
Corrected styling directive from non-existent `src/styles/colors.tsx` to
actual location `src/browser/styles/globals.css`.

## Verification
All color mappings verified to produce identical or imperceptibly
different colors (±1-2 RGB units max for new variables).

---
_Generated with `mux` • Model: `anthropic:claude-opus-4-5` • Thinking:
`high`_

Author: ethanndickson

docs/AGENTS.md

@@ -113,7 +113,7 @@ Avoid mock-heavy tests that verify implementation details rather than behavior.
 
 ## Styling
 
-- Colors defined in `src/styles/colors.tsx`; fonts in `src/styles/fonts.tsx`. Reference them via CSS variables (e.g., `var(--color-plan-mode)`), never hardcode values.
+- Colors defined in `src/browser/styles/globals.css` (`:root @theme` block). Reference via CSS variables (e.g., `var(--color-plan-mode)`), never hardcode hex values.
 
 ## TypeScript Discipline
 

src/browser/components/AIView.tsx

@@ -594,9 +594,9 @@ const AIViewInner: React.FC<AIViewProps> = ({
                 <div className="text-placeholder flex h-full flex-1 flex-col items-center justify-center text-center [&_h3]:m-0 [&_h3]:mb-2.5 [&_h3]:text-base [&_h3]:font-medium [&_p]:m-0 [&_p]:text-[13px]">
                   <h3>No Messages Yet</h3>
                   <p>Send a message below to begin</p>
-                  <p className="mt-5 text-xs text-[#888]">
+                  <p className="text-muted mt-5 text-xs">
                     💡 Tip: Add a{" "}
-                    <code className="rounded-[3px] bg-[#2d2d30] px-1.5 py-0.5 font-mono text-[11px] text-[#d7ba7d]">
+                    <code className="bg-inline-code-dark-bg text-code-string rounded-[3px] px-1.5 py-0.5 font-mono text-[11px]">
                       .mux/init
                     </code>{" "}
                     hook to your project to run setup commands

src/browser/components/Messages/InitMessage.tsx

@@ -13,12 +13,12 @@ export const InitMessage = React.memo<InitMessageProps>(({ message, className })
   return (
     <div
       className={cn(
-        "flex flex-col gap-1.5 border-b p-3 font-mono text-xs text-[#ddd]",
-        isError ? "bg-[#3a1e1e] border-[#653737]" : "bg-[#1e2a3a] border-[#2f3f52]",
+        "flex flex-col gap-1.5 border-b p-3 font-mono text-xs text-text-lighter",
+        isError ? "bg-init-error-bg border-init-error-border" : "bg-init-bg border-init-border",
         className
       )}
     >
-      <div className="flex items-center gap-2 text-[#ccc]">
+      <div className="text-bright flex items-center gap-2">
         <span>🔧</span>
         <div>
           {message.status === "running" ? (
@@ -31,7 +31,7 @@ export const InitMessage = React.memo<InitMessageProps>(({ message, className })
               failed.
             </span>
           )}
-          <div className="mt-0.5 font-mono text-[11px] text-[#888]">{message.hookPath}</div>
+          <div className="text-muted mt-0.5 font-mono text-[11px]">{message.hookPath}</div>
         </div>
       </div>
       {message.lines.length > 0 && (

src/browser/components/Messages/Mermaid.tsx

@@ -204,7 +204,13 @@ export const Mermaid: React.FC<{ chart: string }> = ({ chart }) => {
 
     // Not streaming - show actual error
     return (
-      <pre style={{ color: "#e06c75", background: "rgba(224, 108, 117, 0.1)", padding: "12px" }}>
+      <pre
+        style={{
+          color: "var(--color-syntax-error)",
+          background: "hsl(from var(--color-syntax-error) h s l / 0.1)",
+          padding: "12px",
+        }}
+      >
         Mermaid Error: {error}
       </pre>
     );

src/browser/components/RightSidebar/CodeReview/FileTree.tsx

@@ -162,7 +162,7 @@ const TreeNodeContent: React.FC<{
               (node.totalStats.additions > 0 || node.totalStats.deletions > 0) && (
                 <span
                   className="flex gap-2 text-[11px] opacity-70"
-                  style={{ color: isOpen ? "#666" : "inherit" }}
+                  style={{ color: isOpen ? "var(--color-dim)" : "inherit" }}
                 >
                   {node.totalStats.additions > 0 &&
                     (isOpen ? (

src/browser/components/RightSidebar/ThresholdSlider.tsx

@@ -101,8 +101,8 @@ const VerticalSliderTooltip: React.FC<VerticalSliderTooltipProps> = ({
   const style: React.CSSProperties = {
     position: "fixed",
     zIndex: 9999,
-    background: "#2d2d30",
-    color: "#cccccc",
+    background: "var(--color-modal-bg)",
+    color: "var(--color-bright)",
     padding: "6px 10px",
     borderRadius: 4,
     fontSize: 12,

src/browser/components/TerminalView.tsx

@@ -81,13 +81,18 @@ export function TerminalView({ workspaceId, sessionId, visible }: TerminalViewPr
         // Initialize ghostty-web WASM module (idempotent, safe to call multiple times)
         await init();
 
+        // Resolve CSS variables for xterm.js (canvas rendering doesn't support CSS vars)
+        const styles = getComputedStyle(document.documentElement);
+        const terminalBg = styles.getPropertyValue("--color-terminal-bg").trim() || "#1e1e1e";
+        const terminalFg = styles.getPropertyValue("--color-terminal-fg").trim() || "#d4d4d4";
+
         terminal = new Terminal({
           fontSize: 14,
           fontFamily: "JetBrains Mono, Menlo, Monaco, monospace",
           cursorBlink: true,
           theme: {
-            background: "#1e1e1e",
-            foreground: "#d4d4d4",
+            background: terminalBg,
+            foreground: terminalFg,
           },
         });
 
@@ -231,7 +236,7 @@ export function TerminalView({ workspaceId, sessionId, visible }: TerminalViewPr
       style={{
         width: "100%",
         height: "100%",
-        backgroundColor: "#1e1e1e",
+        backgroundColor: "var(--color-terminal-bg)",
       }}
     >
       {errorMessage && (

src/browser/components/TodoList.tsx

@@ -3,20 +3,20 @@ import { cn } from "@/common/lib/utils";
 import type { TodoItem } from "@/common/types/tools";
 
 const statusBgColors: Record<TodoItem["status"], string> = {
-  completed: "color-mix(in srgb, #4caf50, transparent 92%)",
-  in_progress: "color-mix(in srgb, #2196f3, transparent 92%)",
-  pending: "color-mix(in srgb, #888, transparent 96%)",
+  completed: "color-mix(in srgb, var(--color-success), transparent 92%)",
+  in_progress: "color-mix(in srgb, var(--color-info), transparent 92%)",
+  pending: "color-mix(in srgb, var(--color-muted), transparent 96%)",
 };
 
 const statusBorderColors: Record<TodoItem["status"], string> = {
-  completed: "#4caf50",
-  in_progress: "#2196f3",
-  pending: "#666",
+  completed: "var(--color-success)",
+  in_progress: "var(--color-info)",
+  pending: "var(--color-dim)",
 };
 
 const statusTextColors: Record<TodoItem["status"], string> = {
-  completed: "#888",
-  in_progress: "#2196f3",
+  completed: "var(--color-muted)",
+  in_progress: "var(--color-info)",
   pending: "var(--color-text)",
 };
 

src/browser/components/tools/FileEditToolCall.tsx

@@ -53,7 +53,7 @@ function renderDiff(
   try {
     const patches = parsePatch(diff);
     if (patches.length === 0) {
-      return <div style={{ padding: "8px", color: "#888" }}>No changes</div>;
+      return <div style={{ padding: "8px", color: "var(--color-muted)" }}>No changes</div>;
     }
 
     // Render each hunk using SelectableDiffRenderer if we have a callback, otherwise DiffRenderer

src/browser/styles/globals.css

@@ -193,6 +193,7 @@
     --color-subtle: hsl(0 0% 60%); /* #999 - subtle */
     --color-dim: hsl(0 0% 42%); /* #666 - dimmed */
     --color-light: hsl(0 0% 83%); /* #d4d4d4 - light */
+    --color-text-lighter: hsl(0 0% 87%); /* #dddddd - lighter text */
     --color-lighter: hsl(0 0% 90%); /* #e5e5e5 - lighter */
     --color-bright: hsl(0 0% 80%); /* #cccccc - bright */
     --color-subdued: hsl(0 0% 60%); /* #9a9a9a - subdued */
@@ -217,6 +218,7 @@
     --color-separator: #262626; /* neutral-800 - dividers/separators */
     --color-separator-light: hsl(0 0% 27%); /* #464647 - lighter separator */
     --color-modal-bg: hsl(0 0% 18%); /* #2d2d30 - modal backgrounds */
+    --color-inline-code-dark-bg: hsl(0 0% 18%); /* #2d2d30 - always dark, for inline code that should stay dark in all themes */
 
     --color-accent: hsl(207 100% 40%); /* #007acc - VS Code blue */
     --color-accent-hover: hsl(207 100% 45%); /* #1177bb - accent hover */
@@ -239,6 +241,21 @@
     /* Code syntax highlighting */
     --color-code-type: hsl(197 71% 73%); /* #9cdcfe - type annotations */
     --color-code-keyword: hsl(210 59% 63%); /* #6496ff - keywords */
+    --color-code-string: hsl(40 53% 67%); /* #d7ba7d - string literals */
+    --color-syntax-error: hsl(355 65% 65%); /* #e06c75 - One Dark error red */
+
+    /* Terminal */
+    --color-terminal-bg: hsl(0 0% 12%); /* #1e1e1e */
+    --color-terminal-fg: hsl(0 0% 83%); /* #d4d4d4 */
+
+    /* Info (blue accent for in-progress states) */
+    --color-info: hsl(207 90% 54%); /* #2196f3 */
+
+    /* Init message surfaces */
+    --color-init-bg: hsl(210 33% 17%); /* #1e2a3a */
+    --color-init-border: hsl(210 27% 25%); /* #2f3f52 */
+    --color-init-error-bg: hsl(0 33% 17%); /* #3a1e1e */
+    --color-init-error-border: hsl(0 28% 30%); /* #653737 */
 
     /* Toast and notification backgrounds */
     --color-toast-success-bg: hsl(207 100% 37% / 0.13); /* #0e639c with 20% opacity */