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/InventoryTable.tsx
View File

@@ -62,11 +62,11 @@ export default function InventoryTable({
return (
<div key={cat} className="level-1 transition-all">
<div
className="w-full p-4 flex items-center justify-between hover:bg-black/30 transition-colors cursor-pointer"
className="w-full p-4 flex items-center justify-between hover:bg-surface-container-lowest/30 transition-colors cursor-pointer"
onClick={() => onExpandCategory(expandedCategory === cat ? null : cat)}
>
<div className="flex items-center gap-4">
<div className="w-10 h-10 bg-black flex items-center justify-center text-primary border border-primary/20 transition-colors">
<div className="w-10 h-10 bg-surface-container-lowest flex items-center justify-center text-primary border border-primary/20 transition-colors">
<Layers size={20} />
</div>
<div className="text-left">
@@ -84,7 +84,7 @@ export default function InventoryTable({
e.stopPropagation();
onEditCategory(cat);
}}
className="p-2 hover:bg-black text-secondary hover:text-primary transition-colors border border-transparent hover:border-border"
className="p-2 hover:bg-surface-container-lowest text-secondary hover:text-primary transition-colors border border-transparent hover:border-border"
>
<EditIcon size={16} />
</button>
@@ -97,7 +97,7 @@ export default function InventoryTable({
{categoryItems.map(item => (
<div
key={item.id}
className="bg-black/40 p-4 flex items-center justify-between hover:bg-black/20 transition-colors"
className="bg-surface-container-lowest/40 p-4 flex items-center justify-between hover:bg-surface-container-lowest/20 transition-colors"
>
<div
onClick={() => handleItemClick(item)}
@@ -119,7 +119,7 @@ export default function InventoryTable({
/>
</div>
) : (
<div className="w-12 h-12 bg-black flex items-center justify-center text-primary shrink-0 border border-primary/20">
<div className="w-12 h-12 bg-surface-container-lowest flex items-center justify-center text-primary shrink-0 border border-primary/20">
<Package size={20} />
</div>
)}
@@ -133,7 +133,7 @@ export default function InventoryTable({
<div className="text-right shrink-0">
<p className={cn(
"text-xl font-normal tabular-nums leading-none",
item.quantity <= (item.min_quantity || 0) ? "text-rose-500" : "text-primary"
item.quantity <= (item.min_quantity || 0) ? "text-error" : "text-primary"
)}>
{item.quantity}
</p>