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

16
frontend/components/LogsTable.tsx
View File

@@ -70,11 +70,11 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className="mb-2 md:mb-0">
<div className={cn(
"text-[10px] font-normal px-2 py-0.5 border text-center inline-block min-w-[100px]",
log.action.includes('CHECK_IN') ? "bg-green-500/10 text-green-500 border-green-500/20" :
(log.action.includes('TRASH') ? "bg-rose-500/10 text-rose-500 border-rose-500/20" :
(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('CREATE') ? "bg-indigo-500/10 text-indigo-400 border-indigo-500/20" : "bg-primary/10 text-primary border-primary/20"))))
log.action.includes('CHECK_IN') ? "bg-tertiary/10 text-tertiary border-tertiary/20" :
(log.action.includes('TRASH') ? "bg-error/10 text-error border-error/20" :
(log.action.includes('DB') ? "bg-secondary/10 text-secondary border-secondary/20" :
(log.action.includes('DELETE') ? "bg-error/10 text-error border-error/30" :
(log.action.includes('CREATE') ? "bg-primary/10 text-primary border-primary/20" : "bg-primary/10 text-primary border-primary/20"))))
)}>
{log.action.replace('_', ' ').toLowerCase().replace(/\b\w/g, l => l.toUpperCase())}
</div>
@@ -96,7 +96,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className={cn(
"text-base md:text-sm font-normal tabular-nums text-right",
(log.quantity_change || 0) > 0 ? "text-green-500" : ((log.quantity_change || 0) < 0 ? "text-rose-500" : "text-primary/50")
(log.quantity_change || 0) > 0 ? "text-tertiary" : ((log.quantity_change || 0) < 0 ? "text-error" : "text-primary/50")
)}>
{log.quantity_change ? (log.quantity_change > 0 ? `+${log.quantity_change}` : log.quantity_change) : (log.action.includes('DB') ? 'SYS' : '±')}
</div>
@@ -122,7 +122,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<div className={cn(
"text-xs font-normal px-3 py-1 border inline-block",
selectedLog.action.includes('CHECK_IN') ? "status-success" :
(selectedLog.action.includes('TRASH') ? "bg-rose-500 text-black" : "status-alert")
(selectedLog.action.includes('TRASH') ? "bg-error text-on-error" : "status-alert")
)}>
{selectedLog.action.replace('_', ' ').toLowerCase()}
</div>
@@ -144,7 +144,7 @@ export default function LogsTable({ logs, loading }: LogsTableProps) {
<p className="text-[10px] font-normal text-secondary">Quantity Delta</p>
<p className={cn(
"text-xl font-normal tabular-nums",
(selectedLog.quantity_change || 0) > 0 ? "text-green-500" : "text-rose-500"
(selectedLog.quantity_change || 0) > 0 ? "text-tertiary" : "text-error"
)}>
{selectedLog.quantity_change
? `${selectedLog.quantity_change > 0 ? '+' : ''}${selectedLog.quantity_change}`