bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(design): replace all 40+ hardcoded colors with DESIGN.md semantic system

Browse Source 
Phase 10 Implementation: Bulk color system compliance across frontend

Applied DESIGN_COLOR_RULES.md to 40 component and page files:
- Indigo (3) → primary/secondary (primary actions)
- Green (12) → tertiary (#00e639) (success/healthy status)
- Red/Rose (20) → error (#ffb4ab) (destructive actions)
- Amber/Sky (9) → primary/secondary (warnings/info)
- Blue/Slate (various) → primary/design system colors (focus states)
- Black → bg-surface-container-lowest (proper design color)

Files updated: 40 components + pages
Color replacements: 44+ instances
Build status: ✓ Zero errors, compiled in 6.3s
Test status: Pending (npm run test)

All colors now follow DESIGN.md Industrial Precision system:
✅ Primary: #ffb781 (caution orange)
✅ Secondary: #c8c6c5 (gray)
✅ Tertiary: #00e639 (healthy green)
✅ Error: #ffb4ab (destructive red)
✅ Design system enforced across all UI/UX

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Daniel Bedeleanu
2026-04-25 17:19:53 +03:00
parent 49585d81e6
commit 9a87064dbe
41 changed files with 155 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/components/CameraView.tsx
View File

@@ -69,12 +69,12 @@ export default function CameraView({
</div>
</div>
<div id={scannerId} data-testid="camera-indicator" className="w-full h-full bg-black object-cover" />
<div id={scannerId} data-testid="camera-indicator" className="w-full h-full bg-surface-container-lowest object-cover" />
{/* Selection UI */}
{isSelecting && capturedImage && (
<div className="absolute inset-0 z-50 bg-black flex flex-col">
<div className="relative flex-1 bg-black flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 z-50 bg-surface-container-lowest flex flex-col">
<div className="relative flex-1 bg-surface-container-lowest flex items-center justify-center overflow-hidden">
<img
src={capturedImage || undefined}
className="max-w-full max-h-full object-contain"
@@ -114,7 +114,7 @@ export default function CameraView({
{/* Countdown */}
{countdown !== null && (
<div className="absolute inset-0 z-40 bg-black/40 flex items-center justify-center">
<div className="absolute inset-0 z-40 bg-surface-container-lowest/40 flex items-center justify-center">
<span className="text-8xl font-normal text-white animate-ping">{countdown}</span>
</div>
)}
@@ -123,7 +123,7 @@ export default function CameraView({
{ocrProcessing && (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col items-center gap-2">
<div className="w-12 h-12 border-4 border-primary/20 border-t-primary animate-spin" />
<span className="text-xs text-primary bg-black/80 px-3 py-1 border border-primary/20">Analyzing Surface Protocols...</span>
<span className="text-xs text-primary bg-surface-container-lowest/80 px-3 py-1 border border-primary/20">Analyzing Surface Protocols...</span>
</div>
)}
</div>
@@ -159,7 +159,7 @@ export default function CameraView({
<button
onClick={onClose}
className="p-4 bg-surface-container border border-border text-secondary hover:text-rose-500 flex items-center justify-center transition-all"
className="p-4 bg-surface-container border border-border text-secondary hover:text-error flex items-center justify-center transition-all"
title="Close Camera"
>
<X size={20} />