plan: create Phase 10 execution plan - 44+ color fixes across 20 files
This commit is contained in:
465
.planning/PHASE_10_PLAN.md
Normal file
465
.planning/PHASE_10_PLAN.md
Normal file
@@ -0,0 +1,465 @@
|
|||||||
|
# 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** ✅
|
||||||
Reference in New Issue
Block a user