# PHASE 10: Design Color System Implementation Plan

**Phase:** 10 - Hardcoded Color Fixes  
**Goal:** Replace 44+ hardcoded Tailwind colors with DESIGN.md semantic colors  
**Status:** READY FOR EXECUTION  
**Estimated Duration:** 2-3 hours  
**Risk Level:** LOW (color-only changes, no logic modifications)  

---

## PHASE OVERVIEW

Replace all arbitrary Tailwind colors (green-*, red-*, indigo-*, amber-*, sky-*) with DESIGN.md semantic colors across 20 component files.

### Success Criteria
- ✅ Zero arbitrary Tailwind colors remaining (green-*, red-*, blue-*, indigo-*, amber-*, sky-*, etc.)
- ✅ All colors use design system semantics (primary, secondary, tertiary, error, muted, outline)
- ✅ Build completes with zero CSS/TypeScript errors
- ✅ Test suite passes 100%
- ✅ Visual spot-check confirms correct colors at localhost:3000

---

## SEMANTIC COLOR MAPPING (Reference)

```javascript
// ENFORCE THESE MAPPINGS
const designColors = {
  // Success/Healthy Status
  "tertiary": "#00e639",        // For: ✅ success, online, quantity+, check-in, received
  
  // Error/Destructive
  "error": "#ffb4ab",           // For: ❌ errors, delete, quantity-, offline, low stock
  "on-error": "#690005",        // For: ❌ error text on light backgrounds
  "error-container": "#93000a", // For: ❌ error background boxes
  
  // Warning/Caution  
  "primary": "#ffb781",         // For: ⚠️ warnings, caution, important actions, REMOVE
  
  // Secondary/Info
  "secondary": "#c8c6c5",       // For: ℹ️ secondary actions, database ops, system info
  
  // Muted/Disabled
  "muted": "#474746",           // For: 🔇 disabled, placeholder, muted text
  
  // Outline/Border
  "outline": "#a48c7c",         // For: borders, dividers
  "outline-variant": "#564335", // For: subtle borders
}
```

---

## TASK BREAKDOWN: 20 Files, 44+ Fixes

### **Batch 1: Logs & Audit Components** (4 files, 10 fixes)

#### Task 1.1: LogsTable.tsx
**File:** `frontend/components/LogsTable.tsx`  
**Changes:** 6 color fixes

```tsx
// Line 73: CHECK_IN action
- "bg-green-500/10 text-green-500 border-green-500/20"
+ "bg-tertiary/10 text-tertiary border-tertiary/20"

// Line 75: DB & DELETE actions  
- (log.action.includes('DB') ? "bg-sky-500/10 text-sky-400 border-sky-500/20" :
-  log.action.includes('DELETE') ? "bg-red-500/10 text-red-500 border-red-500/30" :
+ (log.action.includes('DB') ? "bg-secondary/10 text-secondary border-secondary/20" :
+  log.action.includes('DELETE') ? "bg-error/10 text-error border-error/30" :

// Line 77: CREATE action
- "bg-indigo-500/10 text-indigo-400 border-indigo-500/20"
+ "bg-primary/10 text-primary border-primary/20"

// Line 99: Quantity change
- (log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500"
+ (log.quantity_change || 0) > 0 ? "text-tertiary" : ((log.quantity_change || 0) < 0 ? "text-error"

// Line 125: TRASH badge
- "bg-rose-500 text-black"
+ "bg-error text-on-error"

// Line 147: Quantity in modal
- (selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
+ (selectedLog.quantity_change || 0) > 0 ? "text-tertiary" : "text-error"
```

#### Task 1.2: LogsOverlay.tsx
**File:** `frontend/components/LogsOverlay.tsx`  
**Changes:** 2 color fixes

```tsx
// Line 43: Action type colors
- log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
+ log.action.includes('CHECK_IN') ? "text-tertiary" : (log.action.includes('TRASH') ? "text-error" : "text-primary")

// Line 70: Quantity change
- log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
+ log.quantity_change > 0 ? "text-tertiary" : "text-error"
```

#### Task 1.3: DebugRotationPanel.tsx
**File:** `frontend/components/DebugRotationPanel.tsx`  
**Changes:** 1 color fix

```tsx
// Line 384: Debug console
- <div className="bg-black text-green-400 p-2 rounded font-mono text-xs">
+ <div className="bg-surface-container-lowest text-tertiary p-2 rounded-none font-mono text-xs">
```

#### Task 1.4: ItemComparisonModal.tsx
**File:** `frontend/components/ItemComparisonModal.tsx`  
**Changes:** 1 color fix

```tsx
// Line 76: Diff highlight
- className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}
+ className={`text-sm font-mono ${different ? 'text-outline-variant' : 'text-secondary'}`}

// Line 108: Update button
- "hover:bg-blue-600 ... focus:ring-blue-400"
+ "hover:opacity-80 ... focus:ring-primary"
```

---

### **Batch 2: Dialog & Creation Components** (5 files, 10 fixes)

#### Task 2.1: NewItemDialog.tsx
**File:** `frontend/components/NewItemDialog.tsx`  
**Changes:** 1 color fix (2 instances)

```tsx
// Lines 29-31: Upload prompt
- "bg-indigo-500/5 border-indigo-500/20 ... text-indigo-400"
- "bg-indigo-500/10"
+ "bg-secondary/5 border-secondary/20 ... text-secondary"
+ "bg-secondary/10"
```

#### Task 2.2: ConfirmationModal.tsx
**File:** `frontend/components/ConfirmationModal.tsx`  
**Changes:** 2 color fixes

```tsx
// Line 62: Error alert
- "bg-rose-500/10 text-rose-50..."
+ "bg-error/10 text-error..."

// Line 149: Delete button
- "bg-red-600 hover:bg-red-700"
+ "bg-error hover:opacity-80"
```

#### Task 2.3: StockAdjustmentPanel.tsx
**File:** `frontend/components/StockAdjustmentPanel.tsx`  
**Changes:** 4 color fixes

```tsx
// Line 88: Delete action hover
- "hover:bg-red-500/20 ... text-red-500"
+ "hover:bg-error/20 ... text-error"

// Lines 235-236: Action colors
- { id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
- { id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
+ { id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-primary' },
+ { id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-error' }

// Line 273: Error alert
- "bg-red-500/5 border-red-500/20"
+ "bg-error/5 border-error/20"
```

#### Task 2.4: AIOnboarding.tsx
**File:** `frontend/components/AIOnboarding.tsx`  
**Changes:** 4 color fixes

```tsx
// Line 120: Camera button
- "focus:ring-blue-400"
+ "focus:ring-primary"

// Line 181: Capture button
- "text-slate-950 ... ring-offset-slate-950 ... hover:bg-surface-200"
+ "text-on-background ... ring-offset-surface-container-high ... hover:opacity-80"

// Line 221: Extract button
- "hover:bg-blue-500 ... focus:ring-blue-400"
+ "hover:opacity-80 ... focus:ring-primary"

// Line 464: Delete button
- "hover:text-red-500 ... focus:ring-red-500"
+ "hover:text-error ... focus:ring-error"

// Line 405: Confirm button
- "hover:bg-blue-500 ... focus:ring-blue-400"
+ "hover:opacity-80 ... focus:ring-primary"

// Line 200: Sparkles icon
- "text-amber-400"
+ "text-primary/80"
```

#### Task 2.5: PhotoModal.tsx
**File:** `frontend/components/PhotoModal.tsx`  
**Changes:** 1 color fix

```tsx
// Line 48: Close icon
- <X size={20} className="text-rose-500" />
+ <X size={20} className="text-error" />
```

---

### **Batch 3: Modal & Item Management** (4 files, 8 fixes)

#### Task 3.1: ItemDetailModal.tsx
**File:** `frontend/components/ItemDetailModal.tsx`  
**Changes:** 1 color fix

```tsx
// Line 144: Destructive button
- "bg-rose-500/10 border-rose-500/30 text-rose-500 hover:bg-rose-500/20"
+ "bg-error/10 border-error/30 text-error hover:bg-error/20"
```

#### Task 3.2: ItemPhotoUpload.tsx
**File:** `frontend/components/ItemPhotoUpload.tsx`  
**Changes:** 1 color fix

```tsx
// Line 151: Error message
- <div className="text-sm text-rose-500">{localError}</div>
+ <div className="text-sm text-error">{localError}</div>
```

#### Task 3.3: InventoryTable.tsx
**File:** `frontend/components/InventoryTable.tsx`  
**Changes:** 1 color fix

```tsx
// Line 136: Low quantity indicator
- item.quantity <= (item.min_quantity || 0) ? "text-rose-500" : "text-primary"
+ item.quantity <= (item.min_quantity || 0) ? "text-error" : "text-primary"
```

#### Task 3.4: ScannerSection.tsx
**File:** `frontend/components/ScannerSection.tsx`  
**Changes:** 1 color fix

```tsx
// Line 59: Cancel button
- className="... hover:text-rose-500 ..."
+ className="... hover:text-error ..."
```

---

### **Batch 4: Pages & Layout** (4 files, 6 fixes)

#### Task 4.1: page.tsx
**File:** `frontend/app/page.tsx`  
**Changes:** 2 color fixes

```tsx
// Lines 282-283: Scanner ready
- <div className="w-1.5 h-1.5 bg-green-500" />
- <span className="... text-green-500/90 ...">Scanner: Ready</span>
+ <div className="w-1.5 h-1.5 bg-tertiary" />
+ <span className="... text-tertiary/90 ...">Scanner: Ready</span>

// Lines 287-288: Online status
- <div className={`... ${isOnline ? 'bg-green-500 animate-pulse' : 'bg-rose-500'}`} />
- <span className={`... ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`}>
+ <div className={`... ${isOnline ? 'bg-tertiary animate-pulse' : 'bg-error'}`} />
+ <span className={`... ${isOnline ? 'text-tertiary/90' : 'text-error/90'}`}>
```

#### Task 4.2: create.tsx
**File:** `frontend/app/items/create.tsx`  
**Changes:** 2 color fixes

```tsx
// Line 412: Upload status
- <span className="font-normal text-green-400">Uploaded</span>
+ <span className="font-normal text-tertiary">Uploaded</span>

// Line 439: Upload button
- className="... bg-green-600 ... hover:bg-green-700 ..."
+ className="... bg-tertiary ... hover:opacity-80 ..."
```

#### Task 4.3: SearchErrorModal.tsx
**File:** `frontend/components/SearchErrorModal.tsx`  
**Changes:** 1 color fix

```tsx
// Line 17: Error heading
- <h2 className="... text-rose-500 ...">Search failed</h2>
+ <h2 className="... text-error ...">Search failed</h2>
```

#### Task 4.4: SearchModal.tsx
**File:** `frontend/components/inventory/SearchModal.tsx`  
**Changes:** 1 color fix

```tsx
// Line 144: Error message
- <div className="... text-rose-500 bg-rose-500/10 border-rose-500/20 ...">
+ <div className="... text-error bg-error/10 border-error/20 ...">
```

---

### **Batch 5: Admin & Navigation** (3 files, 4 fixes)

#### Task 5.1: DatabaseManager.tsx
**File:** `frontend/components/admin/DatabaseManager.tsx`  
**Changes:** 1 color fix

```tsx
// Line 50: Status indicator
- <div className="w-2 h-2 bg-green-500 animate-pulse" />
+ <div className="w-2 h-2 bg-tertiary animate-pulse" />
```

#### Task 5.2: AiManager.tsx
**File:** `frontend/components/admin/AiManager.tsx`  
**Changes:** 1 color fix

```tsx
// Line 71: Provider status
- : (p.configured ? "text-emerald-500" : "text-rose-500")
+ : (p.configured ? "text-tertiary" : "text-error")
```

#### Task 5.3: BottomNav.tsx
**File:** `frontend/components/BottomNav.tsx`  
**Changes:** 1 color fix

```tsx
// Line 82: Delete action nav
- className="... text-rose-500 hover:text-rose-400 ... focus:ring-rose-500 ..."
+ className="... text-error hover:opacity-80 ... focus:ring-error ..."
```

---

## IMPLEMENTATION STRATEGY

### **Phase 1: Batch Processing** (Order by dependency)
1. **Batch 1:** Logs & Audit (no component dependencies)
2. **Batch 2:** Dialogs & Creation (depends on color system)
3. **Batch 3:** Item Management (isolated components)
4. **Batch 4:** Pages & Layout (affects multiple components)
5. **Batch 5:** Admin & Nav (cleanup)

### **Phase 2: Verification**
```bash
# After each batch or all batches:
cd frontend && npm run build
# Zero errors expected

npm run test
# All tests should pass

# Visual spot-check
npm run dev
# Open localhost:3000, verify colors
```

### **Phase 3: Commit**
```bash
git add -A
git commit -m "fix(design): replace all 44+ hardcoded colors with DESIGN.md system

Applied DESIGN_COLOR_RULES.md to 20 component files:
- Indigo (3) → primary/secondary
- Green (12) → tertiary (success)
- Red/Rose (20) → error (destructive)
- Amber/Sky (9) → primary/secondary

Fixes map all status colors to semantic design system.
Build: zero errors verified."
```

---

## PARALLEL EXECUTION OPTION

All color fixes are **independent** - can be done in parallel:

```bash
# Option 1: Use search-and-replace with verification
grep -r "bg-green-500\|text-green-500" frontend/components --include="*.tsx"
# Replace in batches, verify after each batch

# Option 2: Manual file-by-file (recommended for accuracy)
# Follow task breakdown above, verify build after Batch 2
```

---

## ROLLBACK PLAN

If issues arise:
```bash
# Single file rollback
git checkout frontend/components/{filename}

# Full phase rollback
git reset --hard HEAD~1

# Verify
npm run build
```

---

## SUCCESS CHECKLIST

Before marking phase complete:
- [ ] All 44+ color fixes applied
- [ ] Build completes with zero CSS errors
- [ ] Build completes with zero TypeScript errors
- [ ] All tests pass (npm run test)
- [ ] Visual verification at localhost:3000
- [ ] All colors match DESIGN.md palette
- [ ] No arbitrary Tailwind colors remain
- [ ] Commit created with detailed message
- [ ] SESSION_STATE.md updated

---

## ESTIMATED TIMELINE

| Task | Duration |
|------|----------|
| Batch 1 (4 files, 10 fixes) | 20 min |
| Batch 2 (5 files, 10 fixes) | 25 min |
| Batch 3 (4 files, 8 fixes) | 20 min |
| Batch 4 (4 files, 6 fixes) | 15 min |
| Batch 5 (3 files, 4 fixes) | 10 min |
| Build & test verification | 10 min |
| Commit & documentation | 10 min |
| **Total** | **~2 hours** |

---

## NEXT PHASE (Phase 11)

After Phase 10 completion:
1. Visual testing at localhost:3000
2. Version bump: `python3 scripts/save_version.py`
3. Push to dev branch
4. Create PR for merge review

---

**Phase 10 is READY FOR EXECUTION** ✅