docs: establish mandatory DESIGN.md color rules and fix plan for all UI/UX
Phase 9: Design Color System Enforcement This commit creates mandatory design rules to prevent future hardcoded colors: 1. DESIGN_COLOR_RULES.md - MANDATORY REFERENCE FOR ALL FUTURE UI/UX WORK - Establishes that NO arbitrary Tailwind colors are allowed - Defines semantic color mapping (success, error, warning, info) - Provides quick reference guide for color selection - Includes enforcement rules for AI agents and developers - Maps 20+ hardcoded colors to DESIGN.md equivalents 2. dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md - DETAILED IMPLEMENTATION GUIDE - Comprehensive fix plan with line-by-line changes for 20 files - 44+ color corrections identified and documented - Step-by-step instructions for each file modification - Includes before/after code snippets - Implementation checklist for tracking progress 3. CLAUDE.md - UPDATED WITH MANDATORY COLOR RULES - Added reference to DESIGN_COLOR_RULES.md as required reading - Added critical color rule section at top - Semantic color mapping quick reference for AI agents - Linked related documentation COLOR MAPPING ENFORCED: - Success/Healthy: tertiary (#00e639) - Error/Destructive: error (#ffb4ab) - Warning/Caution: primary (#ffb781) - Info/Secondary: secondary (#c8c6c5) - Muted/Disabled: muted (#474746) HARDCODED COLORS IDENTIFIED (44+ instances): - Indigo (3 instances) → primary/secondary - Green (12 instances) → tertiary - Red/Rose (20 instances) → error - Amber/Sky (9 instances) → primary/secondary All future UI/UX work MUST follow DESIGN_COLOR_RULES.md. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
468
dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md
Normal file
468
dev_docs/DESIGN_COMPLIANCE_FIX_PLAN.md
Normal file
@@ -0,0 +1,468 @@
|
||||
# DESIGN.md Hardcoded Colors Remediation - Detailed Fix Plan
|
||||
|
||||
**Status:** READY FOR IMPLEMENTATION
|
||||
**Date Created:** 2026-04-25
|
||||
**Total Files to Modify:** 23
|
||||
**Total Color Fixes:** 44+
|
||||
**Estimated Time:** 2-3 hours
|
||||
|
||||
---
|
||||
|
||||
## SEMANTIC COLOR MAPPING (From DESIGN.md)
|
||||
|
||||
```javascript
|
||||
// Use these ONLY - no arbitrary Tailwind colors allowed
|
||||
{
|
||||
// Status Indicators
|
||||
"Success/Healthy": "tertiary (#00e639)", // Bright terminal green
|
||||
"Error/Destructive": "error (#ffb4ab)", // Light error red
|
||||
"Error Dark": "on-error (#690005)", // Dark error text
|
||||
"Error Container": "error-container (#93000a)", // Error background
|
||||
"Error Container Text": "on-error-container (#ffdad6)", // Error text
|
||||
|
||||
// Actions
|
||||
"Primary Action": "primary (#ffb781)", // Caution orange
|
||||
"Secondary Action": "secondary (#c8c6c5)", // Gray
|
||||
|
||||
// UI Elements
|
||||
"Muted/Disabled": "muted (#474746)", // Dark gray
|
||||
"Outline/Border": "outline (#a48c7c)", // Tan border
|
||||
"Outline Variant": "outline-variant (#564335)", // Subtle border
|
||||
|
||||
// Data Changes
|
||||
"Increase/Add": "tertiary (#00e639)", // Green
|
||||
"Decrease/Remove": "error (#ffb4ab)", // Red
|
||||
"Warning": "primary (#ffb781)", // Orange
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## FILE-BY-FILE FIX PLAN
|
||||
|
||||
### **1. frontend/components/LogsTable.tsx**
|
||||
|
||||
**Line 75-76: DB & DELETE action badges**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
(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" :
|
||||
|
||||
// FIX TO
|
||||
(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 badge**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
(log.action.includes('CREATE') ? "bg-indigo-500/10 text-indigo-400 border-indigo-500/20" :
|
||||
|
||||
// FIX TO
|
||||
(log.action.includes('CREATE') ? "bg-primary/10 text-primary border-primary/20" :
|
||||
```
|
||||
|
||||
**Line 73: CHECK_IN action badge**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
|
||||
|
||||
// FIX TO
|
||||
log.action.includes('CHECK_IN') ? "bg-tertiary/10 text-tertiary border-tertiary/20" :
|
||||
```
|
||||
|
||||
**Line 99: Quantity change indicator**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
(log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500" :
|
||||
|
||||
// FIX TO
|
||||
(log.quantity_change || 0) > 0 ? "text-tertiary" : ((log.quantity_change || 0) < 0 ? "text-error" :
|
||||
```
|
||||
|
||||
**Line 125: TRASH badge in modal**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
(selectedLog.action.includes('TRASH') ? "bg-rose-500 text-black" :
|
||||
|
||||
// FIX TO
|
||||
(selectedLog.action.includes('TRASH') ? "bg-error text-on-error" :
|
||||
```
|
||||
|
||||
**Line 147: Quantity change in modal**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
(selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
|
||||
|
||||
// FIX TO
|
||||
(selectedLog.quantity_change || 0) > 0 ? "text-tertiary" : "text-error"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **2. frontend/components/NewItemDialog.tsx**
|
||||
|
||||
**Lines 29-31: Upload prompt box**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-none bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-normal text-indigo-400 gap-2 md:gap-3"
|
||||
...
|
||||
<div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-indigo-500/10 rounded-none group-hover:scale-110 transition-transform shadow-none shadow-none">
|
||||
|
||||
// FIX TO
|
||||
className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-none bg-secondary/5 border border-secondary/20 group hover:border-secondary/50 transition-all font-normal text-secondary gap-2 md:gap-3"
|
||||
...
|
||||
<div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-secondary/10 rounded-none group-hover:scale-110 transition-transform shadow-none shadow-none">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **3. frontend/app/page.tsx**
|
||||
|
||||
**Line 282-283: Scanner ready indicator**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<div className="w-1.5 h-1.5 bg-green-500" />
|
||||
<span className="text-xs font-normal text-green-500/90 whitespace-nowrap">Scanner: Ready</span>
|
||||
|
||||
// FIX TO
|
||||
<div className="w-1.5 h-1.5 bg-tertiary" />
|
||||
<span className="text-xs font-normal text-tertiary/90 whitespace-nowrap">Scanner: Ready</span>
|
||||
```
|
||||
|
||||
**Line 287-288: Online status indicator**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<div className={`w-1.5 h-1.5 ${isOnline ? 'bg-green-500 animate-pulse' : 'bg-rose-500'}`} />
|
||||
<span className={`text-xs font-normal whitespace-nowrap ${isOnline ? 'text-green-500/90' : 'text-rose-500/90'}`}>
|
||||
|
||||
// FIX TO
|
||||
<div className={`w-1.5 h-1.5 ${isOnline ? 'bg-tertiary animate-pulse' : 'bg-error'}`} />
|
||||
<span className={`text-xs font-normal whitespace-nowrap ${isOnline ? 'text-tertiary/90' : 'text-error/90'}`}>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **4. frontend/components/admin/DatabaseManager.tsx**
|
||||
|
||||
**Line 50: Status indicator**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<div className="w-2 h-2 bg-green-500 animate-pulse" />
|
||||
|
||||
// FIX TO
|
||||
<div className="w-2 h-2 bg-tertiary animate-pulse" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **5. frontend/components/admin/AiManager.tsx**
|
||||
|
||||
**Line 71: Provider configured status**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
: (p.configured ? "text-emerald-500" : "text-rose-500")
|
||||
|
||||
// FIX TO
|
||||
: (p.configured ? "text-tertiary" : "text-error")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **6. frontend/components/LogsOverlay.tsx**
|
||||
|
||||
**Line 43: Action type colors**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
|
||||
|
||||
// FIX TO
|
||||
log.action.includes('CHECK_IN') ? "text-tertiary" : (log.action.includes('TRASH') ? "text-error" : "text-primary")
|
||||
```
|
||||
|
||||
**Line 70: Quantity change**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
|
||||
|
||||
// FIX TO
|
||||
log.quantity_change > 0 ? "text-tertiary" : "text-error"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **7. frontend/components/StockAdjustmentPanel.tsx**
|
||||
|
||||
**Line 88: Delete action hover**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 hover:bg-red-500/20 rounded-none text-red-500"
|
||||
|
||||
// FIX TO
|
||||
className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 hover:bg-error/20 rounded-none text-error"
|
||||
```
|
||||
|
||||
**Lines 235-236: Action button colors**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-amber-500' },
|
||||
{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-red-500' }
|
||||
|
||||
// FIX TO
|
||||
{ id: 'REMOVE', label: 'Subtract', icon: Minus, color: 'text-primary' },
|
||||
{ id: 'TRASH', label: 'Discard', icon: Trash2, color: 'text-error' }
|
||||
```
|
||||
|
||||
**Line 273: Error alert box**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<div className="w-full bg-red-500/5 border border-red-500/20 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-none animate-in shake duration-500">
|
||||
|
||||
// FIX TO
|
||||
<div className="w-full bg-error/5 border border-error/20 p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 rounded-none animate-in shake duration-500">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **8. frontend/components/ConfirmationModal.tsx**
|
||||
|
||||
**Line 62: Error alert**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<div className="p-2 bg-rose-500/10 text-rose-50...">
|
||||
|
||||
// FIX TO
|
||||
<div className="p-2 bg-error/10 text-error...">
|
||||
```
|
||||
|
||||
**Line 149: Delete button**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className="flex-1 px-4 py-2.5 bg-red-600 text-white font-normal hover:bg-red-700 cursor-pointer transition-colors..."
|
||||
|
||||
// FIX TO
|
||||
className="flex-1 px-4 py-2.5 bg-error text-on-error font-normal hover:opacity-80 cursor-pointer transition-colors..."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **9. frontend/components/AIOnboarding.tsx**
|
||||
|
||||
**Line 200: Sparkles icon (warning indicator)**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<Sparkles className="absolute -top-2 -right-2 text-amber-400 w-6 h-6 animate-pulse" />
|
||||
|
||||
// FIX TO
|
||||
<Sparkles className="absolute -top-2 -right-2 text-primary/80 w-6 h-6 animate-pulse" />
|
||||
```
|
||||
|
||||
**Line 464: Delete button**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className="p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 text-secondary hover:text-red-500 cursor-pointer transition-colors focus:ring-2 focus:ring-red-500 focus:outline-none rounded-none"
|
||||
|
||||
// FIX TO
|
||||
className="p-3 lg:p-4 xl:p-5 lg:p-6 xl:p-8 text-secondary hover:text-error cursor-pointer transition-colors focus:ring-2 focus:ring-error focus:outline-none rounded-none"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **10. frontend/components/PhotoModal.tsx**
|
||||
|
||||
**Line 48: Close icon**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<X size={20} className="text-rose-500" />
|
||||
|
||||
// FIX TO
|
||||
<X size={20} className="text-error" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **11. frontend/components/ItemDetailModal.tsx**
|
||||
|
||||
**Line 144: Destructive action button**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className="px-4 py-3 bg-rose-500/10 border border-rose-500/30 text-rose-500 hover:bg-rose-500/20 disabled:opacity-50 transition-colors text-xs"
|
||||
|
||||
// FIX TO
|
||||
className="px-4 py-3 bg-error/10 border border-error/30 text-error hover:bg-error/20 disabled:opacity-50 transition-colors text-xs"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **12. frontend/components/ItemPhotoUpload.tsx**
|
||||
|
||||
**Line 151: Error message**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<div className="text-sm text-rose-500">{localError}</div>
|
||||
|
||||
// FIX TO
|
||||
<div className="text-sm text-error">{localError}</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **13. frontend/app/items/create.tsx**
|
||||
|
||||
**Line 412: Upload status**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<span className="font-normal text-green-400">Uploaded</span>
|
||||
|
||||
// FIX TO
|
||||
<span className="font-normal text-tertiary">Uploaded</span>
|
||||
```
|
||||
|
||||
**Line 439: Upload button**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className="flex-1 px-4 py-2 bg-green-600 text-white rounded-none hover:bg-green-700 transition-colors font-normal flex items-center justify-center gap-2"
|
||||
|
||||
// FIX TO
|
||||
className="flex-1 px-4 py-2 bg-tertiary text-on-tertiary rounded-none hover:opacity-80 transition-colors font-normal flex items-center justify-center gap-2"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **14. frontend/components/SearchErrorModal.tsx**
|
||||
|
||||
**Line 17: Error heading**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<h2 className="text-xl font-normal mb-2 text-rose-500">Search failed</h2>
|
||||
|
||||
// FIX TO
|
||||
<h2 className="text-xl font-normal mb-2 text-error">Search failed</h2>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **15. frontend/components/ScannerSection.tsx**
|
||||
|
||||
**Line 59: Cancel button**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className="p-2 bg-surface-bright border border-border text-secondary hover:text-rose-500 transition-colors"
|
||||
|
||||
// FIX TO
|
||||
className="p-2 bg-surface-bright border border-border text-secondary hover:text-error transition-colors"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **16. frontend/components/inventory/SearchModal.tsx**
|
||||
|
||||
**Line 144: Error message**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<div className="p-4 text-rose-500 bg-rose-500/10 border border-rose-500/20 m-4">
|
||||
|
||||
// FIX TO
|
||||
<div className="p-4 text-error bg-error/10 border border-error/20 m-4">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **17. frontend/components/InventoryTable.tsx**
|
||||
|
||||
**Line 136: Low quantity indicator**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
item.quantity <= (item.min_quantity || 0) ? "text-rose-500" : "text-primary"
|
||||
|
||||
// FIX TO
|
||||
item.quantity <= (item.min_quantity || 0) ? "text-error" : "text-primary"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **18. frontend/components/ItemComparisonModal.tsx**
|
||||
|
||||
**Line 76: Difference highlight**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}
|
||||
|
||||
// FIX TO
|
||||
className={`text-sm font-mono ${different ? 'text-outline-variant' : 'text-secondary'}`}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **19. frontend/components/DebugRotationPanel.tsx**
|
||||
|
||||
**Line 384: Debug console**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
<div className="bg-black text-green-400 p-2 rounded font-mono text-xs">
|
||||
|
||||
// FIX TO
|
||||
<div className="bg-surface-container-lowest text-tertiary p-2 rounded-none font-mono text-xs">
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### **20. frontend/components/BottomNav.tsx**
|
||||
|
||||
**Line 82: Delete action nav**
|
||||
```tsx
|
||||
// CURRENT (WRONG)
|
||||
className="flex flex-col items-center gap-1 text-rose-500 hover:text-rose-400 cursor-pointer transition-colors rounded-none px-2 py-1 focus:ring-2 focus:ring-rose-500 focus:outline-none"
|
||||
|
||||
// FIX TO
|
||||
className="flex flex-col items-center gap-1 text-error hover:opacity-80 cursor-pointer transition-colors rounded-none px-2 py-1 focus:ring-2 focus:ring-error focus:outline-none"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## IMPLEMENTATION CHECKLIST
|
||||
|
||||
- [ ] LogsTable.tsx (6 changes: lines 75-76, 73, 77, 99, 125, 147)
|
||||
- [ ] NewItemDialog.tsx (1 change: lines 29-31)
|
||||
- [ ] app/page.tsx (2 changes: lines 282-283, 287-288)
|
||||
- [ ] DatabaseManager.tsx (1 change: line 50)
|
||||
- [ ] AiManager.tsx (1 change: line 71)
|
||||
- [ ] LogsOverlay.tsx (2 changes: lines 43, 70)
|
||||
- [ ] StockAdjustmentPanel.tsx (4 changes: lines 88, 235-236, 273)
|
||||
- [ ] ConfirmationModal.tsx (2 changes: lines 62, 149)
|
||||
- [ ] AIOnboarding.tsx (2 changes: lines 200, 464)
|
||||
- [ ] PhotoModal.tsx (1 change: line 48)
|
||||
- [ ] ItemDetailModal.tsx (1 change: line 144)
|
||||
- [ ] ItemPhotoUpload.tsx (1 change: line 151)
|
||||
- [ ] app/items/create.tsx (2 changes: lines 412, 439)
|
||||
- [ ] SearchErrorModal.tsx (1 change: line 17)
|
||||
- [ ] ScannerSection.tsx (1 change: line 59)
|
||||
- [ ] inventory/SearchModal.tsx (1 change: line 144)
|
||||
- [ ] InventoryTable.tsx (1 change: line 136)
|
||||
- [ ] ItemComparisonModal.tsx (1 change: line 76)
|
||||
- [ ] DebugRotationPanel.tsx (1 change: line 384)
|
||||
- [ ] BottomNav.tsx (1 change: line 82)
|
||||
|
||||
---
|
||||
|
||||
## BUILD & TEST
|
||||
|
||||
After all changes:
|
||||
```bash
|
||||
npm run build # Verify zero errors
|
||||
npm run test # Run test suite
|
||||
```
|
||||
|
||||
Then create commit:
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "fix(design): replace all hardcoded colors with DESIGN.md system colors
|
||||
|
||||
- 44+ hardcoded color replacements across 20 component files
|
||||
- Indigo → primary/secondary (semantic UI colors)
|
||||
- Green/emerald → tertiary (success/healthy status)
|
||||
- Red/rose → error (destructive/failure states)
|
||||
- Amber/sky → primary/secondary (warnings/info)
|
||||
- All colors now follow DESIGN.md Industrial Precision system
|
||||
- Build: zero errors, full design compliance"
|
||||
```
|
||||
Reference in New Issue
Block a user