docs: add color migration v6 implementation plan

7-task plan: CSS custom properties, rgba replacements, Tailwind class migration, hardcoded hex values, landing page, config, and verification. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 16:13:56 +00:00
parent 5c9772f66a
commit 98d50ff31a
1 changed files with 461 additions and 0 deletions
--- a/docs/superpowers/plans/2026-03-29-color-migration-v6.md
+++ b/docs/superpowers/plans/2026-03-29-color-migration-v6.md
@@ -0,0 +1,461 @@
+# Color Migration v5→v6 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Migrate all color values in the frontend from design system v5 (ember orange accent, shallow surfaces, yellow warning) to v6 (electric blue accent, deeper charcoal surfaces, amber warning, cyan info).
+
+**Architecture:** Layer 1 updates CSS custom properties in `index.css` (cascades to ~80% of usage). Layer 2 does find-and-replace on hardcoded `rgba(249,115,22,...)` focus border patterns across ~40 component files. Layer 3 replaces `orange-*` Tailwind classes. Layer 4 updates hardcoded hex values in specific files (BrandLogo, EmptyStateIllustrations, landing page, etc.). Each layer commits independently.
+
+**Tech Stack:** React 19, Tailwind CSS v4, CSS custom properties
+
+**Spec:** `docs/superpowers/specs/2026-03-29-color-migration-v6-design.md`
+
+---
+
+### Task 1: Update CSS Custom Properties in `index.css`
+
+This is the highest-impact change — updating the `@theme` block cascades to every component using Tailwind utility classes.
+
+**Files:**
+- Modify: `frontend/src/index.css`
+
+- [ ] **Step 1: Update surface colors in the @theme block**
+
+In `frontend/src/index.css`, replace lines 11-18 (the surface color block) with:
+
+```css
+  /* ── Surface colors (Deep Charcoal — sidebar darkest) ─ */
+  --color-bg-page: #16181f;
+  --color-bg-sidebar: #0e1016;
+  --color-bg-card: #1e2028;
+  --color-bg-card-hover: #252830;
+  --color-bg-input: #252830;
+  --color-bg-code: #12141a;
+  --color-bg-elevated: #2a2d38;
+  --color-bg-raised: #303442;
+```
+
+- [ ] **Step 2: Update border colors**
+
+Replace lines 28-29 (border colors) with:
+
+```css
+  --color-border-default: #2a2e3a;
+  --color-border-hover: #3d4252;
+```
+
+- [ ] **Step 3: Update accent colors**
+
+Replace lines 31-35 (accent block) with:
+
+```css
+  /* ── Accent (electric blue) ───────────────────────── */
+  --color-accent: #60a5fa;
+  --color-accent-hover: #3b82f6;
+  --color-accent-dim: rgba(96,165,250,0.10);
+  --color-accent-text: #93c5fd;
+```
+
+- [ ] **Step 4: Update semantic colors (warning + add info)**
+
+Replace lines 37-43 (semantic block) with:
+
+```css
+  /* ── Semantic colors ───────────────────────────── */
+  --color-success: #34d399;
+  --color-success-dim: rgba(52,211,153,0.10);
+  --color-warning: #fbbf24;
+  --color-warning-dim: rgba(251,191,36,0.10);
+  --color-danger: #f87171;
+  --color-danger-dim: rgba(248,113,113,0.10);
+  --color-info: #67e8f9;
+  --color-info-dim: rgba(103,232,249,0.10);
+```
+
+- [ ] **Step 5: Update Tailwind semantic mappings**
+
+Replace lines 46-64 (Tailwind mappings) with:
+
+```css
+  /* ── Tailwind semantic mappings ─────────────────── */
+  --color-background: #16181f;
+  --color-foreground: #e2e5eb;
+  --color-card: #1e2028;
+  --color-card-foreground: #e2e5eb;
+  --color-popover: #1e2028;
+  --color-popover-foreground: #e2e5eb;
+  --color-primary: #60a5fa;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #2a2d38;
+  --color-secondary-foreground: #e2e5eb;
+  --color-muted: #2a2d38;
+  --color-muted-foreground: #848b9b;
+  --color-accent-tw: #2a2d38;
+  --color-accent-foreground: #e2e5eb;
+  --color-destructive: #f87171;
+  --color-destructive-foreground: #ffffff;
+  --color-border: #2a2e3a;
+  --color-input: #252830;
+  --color-ring: #60a5fa;
+```
+
+- [ ] **Step 6: Update orange rgba in utility classes**
+
+Replace the `btn-primary-v4` hover/active box-shadow values (lines 194-200):
+
+```css
+  &:hover {
+    filter: brightness(1.1);
+    box-shadow: 0 2px 10px rgba(96, 165, 250, 0.2);
+    transform: translateY(-1px);
+  }
+  &:active {
+    box-shadow: 0 0 4px rgba(96, 165, 250, 0.1);
+    transform: translateY(0);
+  }
+```
+
+Replace `tab-active-shadow` (line 229):
+
+```css
+  box-shadow: 0 1px 4px rgba(96, 165, 250, 0.08);
+```
+
+Replace `card-lift` hover box-shadow (line 237):
+
+```css
+    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.06);
+```
+
+- [ ] **Step 7: Verify it compiles**
+
+Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`
+
+Expected: No errors.
+
+- [ ] **Step 8: Commit**
+
+```bash
+git add frontend/src/index.css
+git commit -m "feat: migrate index.css to design system v6 color tokens
+
+Accent: orange (#f97316) → blue (#60a5fa)
+Surfaces: deeper charcoal range (#16181f page, #1e2028 card)
+Warning: yellow (#eab308) → amber (#fbbf24)
+Info: new cyan (#67e8f9) token added
+All Tailwind semantic mappings updated to match.
+
+Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 2: Replace hardcoded `rgba(249,115,22,...)` focus borders across all components
+
+~40 files use `focus:border-[rgba(249,115,22,0.3)]` or similar patterns for input focus states. This is a mechanical find-and-replace.
+
+**Files:** All files listed in the grep output for `rgba(249,115,22` — approximately 40 component and page files.
+
+- [ ] **Step 1: Replace all `rgba(249,115,22,` with `rgba(96,165,250,` across the codebase**
+
+Run this command to do the replacement:
+
+```bash
+cd /home/coder/resolutionflow/frontend/src
+grep -rl 'rgba(249,115,22' --include='*.tsx' --include='*.ts' --include='*.css' | while read f; do
+  sed -i 's/rgba(249,115,22/rgba(96,165,250/g' "$f"
+done
+```
+
+This replaces ALL instances: `rgba(249,115,22,0.3)` → `rgba(96,165,250,0.3)`, `rgba(249,115,22,0.10)` → `rgba(96,165,250,0.10)`, etc. The opacity values stay the same.
+
+Note: `index.css` was already updated in Task 1 so this is a no-op for that file's `--color-accent-dim` line.
+
+- [ ] **Step 2: Also replace `rgba(249, 115, 22` (with spaces)**
+
+Some files may use spaced format:
+
+```bash
+grep -rl 'rgba(249, 115, 22' --include='*.tsx' --include='*.ts' --include='*.css' | while read f; do
+  sed -i 's/rgba(249, 115, 22/rgba(96, 165, 250/g' "$f"
+done
+```
+
+- [ ] **Step 3: Verify it compiles**
+
+Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`
+
+Expected: No errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd /home/coder/resolutionflow
+git add -A frontend/src/
+git commit -m "feat: replace all hardcoded orange rgba with blue rgba
+
+Mechanical find-and-replace: rgba(249,115,22,...) → rgba(96,165,250,...)
+across ~40 component and page files. Focus borders, hover glows, and
+dim backgrounds all now use the blue accent color.
+
+Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 3: Replace `orange-*` Tailwind classes
+
+~21 files use `orange-400`, `orange-500`, `orange-600` Tailwind color classes. Replace with blue equivalents.
+
+**Files:** All files with `orange-[3456]00` class references.
+
+- [ ] **Step 1: Replace orange Tailwind classes with blue equivalents**
+
+The mapping:
+- `orange-300` → `blue-300`
+- `orange-400` → `blue-400`
+- `orange-500` → `blue-500`
+- `orange-600` → `blue-600`
+
+Run:
+
+```bash
+cd /home/coder/resolutionflow/frontend/src
+grep -rl 'orange-' --include='*.tsx' --include='*.ts' | while read f; do
+  sed -i 's/orange-300/blue-300/g; s/orange-400/blue-400/g; s/orange-500/blue-500/g; s/orange-600/blue-600/g' "$f"
+done
+```
+
+- [ ] **Step 2: Verify it compiles**
+
+Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`
+
+Expected: No errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+cd /home/coder/resolutionflow
+git add -A frontend/src/
+git commit -m "feat: replace orange-* Tailwind classes with blue-* equivalents
+
+orange-400→blue-400, orange-500→blue-500, orange-600→blue-600
+across ~21 component files.
+
+Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 4: Update hardcoded hex values in specific files
+
+Several files have hardcoded `#f97316`, `#ea580c`, `#fdba74` hex values that don't go through CSS variables.
+
+**Files:**
+- Modify: `frontend/src/components/common/BrandLogo.tsx`
+- Modify: `frontend/src/components/common/EmptyStateIllustrations.tsx`
+- Modify: `frontend/src/constants/categoryColors.ts`
+- Modify: `frontend/src/styles/landing.css`
+- Modify: `frontend/src/pages/LandingPage.tsx`
+- Modify: `frontend/src/assets/brand/icon.svg`
+- Modify: `frontend/src/assets/brand/logo-horizontal.svg`
+- Modify: `frontend/src/assets/brand/logo-with-tagline.svg`
+- Modify: Any remaining files from the grep output for `#f97316|#ea580c|#fdba74`
+
+- [ ] **Step 1: Update BrandLogo.tsx gradient**
+
+In `frontend/src/components/common/BrandLogo.tsx`, replace the gradient on line 22:
+
+```tsx
+        background: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
+```
+
+Also update the JSDoc comment on line 9:
+
+```tsx
+ * Brand logo mark: gradient blue square with rounded corners
+```
+
+- [ ] **Step 2: Replace all hardcoded orange hex values across the codebase**
+
+Run:
+
+```bash
+cd /home/coder/resolutionflow/frontend/src
+# #f97316 → #60a5fa (accent)
+grep -rl '#f97316' --include='*.tsx' --include='*.ts' --include='*.css' --include='*.svg' | while read f; do
+  sed -i 's/#f97316/#60a5fa/g' "$f"
+done
+
+# #ea580c → #3b82f6 (accent-hover)
+grep -rl '#ea580c' --include='*.tsx' --include='*.ts' --include='*.css' --include='*.svg' | while read f; do
+  sed -i 's/#ea580c/#3b82f6/g' "$f"
+done
+
+# #fdba74 → #93c5fd (accent-text)
+grep -rl '#fdba74' --include='*.tsx' --include='*.ts' --include='*.css' --include='*.svg' | while read f; do
+  sed -i 's/#fdba74/#93c5fd/g' "$f"
+done
+```
+
+- [ ] **Step 3: Update warning yellow to amber**
+
+```bash
+cd /home/coder/resolutionflow/frontend/src
+# #eab308 → #fbbf24
+grep -rl '#eab308' --include='*.tsx' --include='*.ts' --include='*.css' | while read f; do
+  sed -i 's/#eab308/#fbbf24/g' "$f"
+done
+
+# rgba(234,179,8 → rgba(251,191,36
+grep -rl 'rgba(234,179,8' --include='*.tsx' --include='*.ts' --include='*.css' | while read f; do
+  sed -i 's/rgba(234,179,8/rgba(251,191,36/g' "$f"
+done
+```
+
+- [ ] **Step 4: Fix categoryColors.ts duplicates**
+
+After the sed replacements, `frontend/src/constants/categoryColors.ts` will have `#3b82f6` (from `#ea580c`) and `#60a5fa` (from `#f97316`) — but the array already had `#3b82f6` at position 0. Fix the file to have 10 unique colors:
+
+```typescript
+export const CATEGORY_COLORS = [
+  '#3b82f6', // blue
+  '#22c55e', // green
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // violet
+  '#0891b2', // cyan
+  '#ec4899', // pink
+  '#60a5fa', // sky blue
+  '#14b8a6', // teal
+  '#6366f1', // indigo
+] as const
+```
+
+This replaces the old `#ea580c` (deep orange) slot with `#0891b2` (cyan) and keeps `#60a5fa` (sky blue) in the old `#f97316` slot.
+
+- [ ] **Step 5: Verify it compiles**
+
+Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`
+
+Expected: No errors.
+
+- [ ] **Step 6: Commit**
+
+```bash
+cd /home/coder/resolutionflow
+git add -A frontend/src/
+git commit -m "feat: replace hardcoded orange hex values with blue equivalents
+
+BrandLogo gradient, EmptyStateIllustrations SVGs, categoryColors,
+landing page, brand SVG assets, and all remaining files with
+hardcoded #f97316/#ea580c/#fdba74 values.
+Also migrates warning #eab308 → #fbbf24 (amber).
+
+Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 5: Update landing.css and LandingPage.tsx
+
+The landing page has its own CSS file and inline styles with orange references.
+
+**Files:**
+- Modify: `frontend/src/styles/landing.css`
+- Modify: `frontend/src/pages/LandingPage.tsx`
+
+- [ ] **Step 1: Read landing.css and fix any remaining orange references**
+
+Read `frontend/src/styles/landing.css` and replace any remaining:
+- `#f97316` → `#60a5fa`
+- `#ea580c` → `#3b82f6`
+- `rgba(249,115,22,...)` → `rgba(96,165,250,...)`
+- Any old surface colors (`#1a1c23` → `#16181f`, `#22252e` → `#1e2028`, etc.)
+
+These should already be handled by Task 2 and Task 4's sed commands, but verify and fix any that were missed (e.g., spaced hex values, different formatting).
+
+- [ ] **Step 2: Read LandingPage.tsx and fix any remaining orange references**
+
+Read `frontend/src/pages/LandingPage.tsx` and verify all orange references were replaced by the sed commands in Tasks 2 and 4. Fix any remaining manually.
+
+- [ ] **Step 3: Verify it compiles**
+
+Run: `cd /home/coder/resolutionflow/frontend && npx tsc --noEmit --pretty 2>&1 | head -10`
+
+Expected: No errors.
+
+- [ ] **Step 4: Commit (if changes were needed)**
+
+```bash
+cd /home/coder/resolutionflow
+git add frontend/src/styles/landing.css frontend/src/pages/LandingPage.tsx
+git commit -m "fix: clean up remaining orange references in landing page
+
+Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 6: Update index.html and configuration files
+
+**Files:**
+- Modify: `frontend/index.html`
+
+- [ ] **Step 1: Update meta theme-color**
+
+In `frontend/index.html`, line 17, replace:
+
+```html
+    <meta name="theme-color" content="#10121a" />
+```
+
+with:
+
+```html
+    <meta name="theme-color" content="#0e1016" />
+```
+
+- [ ] **Step 2: Commit**
+
+```bash
+cd /home/coder/resolutionflow
+git add frontend/index.html
+git commit -m "fix: update meta theme-color to new sidebar color (#0e1016)
+
+Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>"
+```
+
+---
+
+### Task 7: Full build verification and sweep for stragglers
+
+**Files:** None (verification only)
+
+- [ ] **Step 1: Run full frontend build**
+
+Run: `cd /home/coder/resolutionflow/frontend && NODE_OPTIONS="--max-old-space-size=4096" npm run build 2>&1 | tail -20`
+
+Expected: Build succeeds with no errors.
+
+- [ ] **Step 2: Search for any remaining orange references**
+
+Run:
+
+```bash
+cd /home/coder/resolutionflow/frontend/src
+echo "=== Remaining #f97316 ===" && grep -r '#f97316' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
+echo "=== Remaining #ea580c ===" && grep -r '#ea580c' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
+echo "=== Remaining #fdba74 ===" && grep -r '#fdba74' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
+echo "=== Remaining rgba(249,115,22 ===" && grep -r 'rgba(249,115,22' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
+echo "=== Remaining orange- classes ===" && grep -r 'orange-[3456]00' --include='*.tsx' --include='*.ts' || echo "NONE"
+echo "=== Remaining #eab308 ===" && grep -r '#eab308' --include='*.tsx' --include='*.ts' --include='*.css' || echo "NONE"
+```
+
+Expected: All say "NONE". If any remain, fix them and commit.
+
+- [ ] **Step 3: Verify git status is clean**
+
+Run: `git status`
+
+Expected: Working tree clean (all changes committed).