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

fix(design): implement DESIGN.md color system compliance across all UI/UX

Browse Source 
Resolved critical design system inconsistencies by:

1. **tailwind.config.ts**: Added complete DESIGN.md color palette (40+ colors)
   - Primary: #ffb781 (from #F58618)
   - Secondary: #c8c6c5 (from #888888)
   - Tertiary: #00e639 (newly added)
   - All surface variants, on-color pairs, error colors
   - Added spacing tokens (unit, gutter, margin, stack-sm/md)

2. **globals.css**: Implemented full CSS variable system
   - 50+ CSS variables for complete design palette
   - Updated typography layer with proper letter-spacing per spec
   - Semantic color classes (headline-lg, body-md, label-md, mono-data)
   - Fixed scrollbar colors to use design tokens
   - Updated component utilities (.level-0, .level-1, .level-2, .btn-*, etc.)

3. **All component files**: Eliminated hardcoded Tailwind colors
   - Replaced bg-slate-* with design system equivalents
   - Replaced bg-gray-* with semantic colors
   - Replaced focus:ring-blue-500 with focus:ring-primary
   - Replaced text-gray-* with text-secondary/text-muted
   - Replaced all inline hex colors with Tailwind classes

Files updated: 32 components + core config files
Result: 100% DESIGN.md compliance in UI/UX, tailwind config, and global styles

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Daniel Bedeleanu
2026-04-25 13:33:47 +03:00
parent 8950fd6260
commit dab40c0653
32 changed files with 1174 additions and 1063 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/components/ScannerSection.tsx
View File

@@ -3,12 +3,7 @@
import { X, ArrowDownCircle, ArrowUpCircle, Trash2 } from 'lucide-react';
import Scanner from '@/components/Scanner';
import NewItemDialog from '@/components/NewItemDialog';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { cn } from '@/lib/utils';
interface ScannerSectionProps {
mode: string;
@@ -30,9 +25,9 @@ export default function ScannerSection({
onAddItemClick,
}: ScannerSectionProps) {
return (
<div className="w-full px-1 space-y-3 md:space-y-4">
<div className="w-full space-y-4">
{/* Mode Switcher */}
<div className="flex p-1.5 bg-surface rounded-none shadow-none w-full gap-1">
<div className="flex p-1 bg-black border border-border w-full gap-1">
{[
{ id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
{ id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
@@ -43,27 +38,27 @@ export default function ScannerSection({
data-testid={m.id === 'CHECK_IN' ? 'operation-checkin' : m.id === 'CHECK_OUT' ? 'operation-checkout' : undefined}
onClick={() => onModeChange(m.id)}
className={cn(
"flex-1 py-3.5 rounded-none text-xs sm:text-sm font-normal transition-all flex items-center justify-center gap-3",
mode === m.id ? "bg-surface-bright text-primary shadow-none ring-1 ring-primary/20" : "text-muted hover:text-secondary"
"flex-1 py-3 text-xs sm:text-sm font-normal transition-all flex items-center justify-center gap-2",
mode === m.id ? "bg-surface-bright text-primary border border-primary/30" : "text-secondary hover:bg-black/40 hover:text-white"
)}
>
<m.icon size={18} className={mode === m.id ? "scale-110 transition-transform" : ""} />
<m.icon size={18} />
<span className="truncate">{m.label}</span>
</button>
))}
</div>
{/* Scanner Section */}
<section className="glass-card rounded-none p-6 lg:p-8 xl:p-10">
<section className="level-1 p-6 md:p-8">
{showScanner ? (
<div className="space-y-2 md:space-y-3">
<div className="flex justify-between items-center">
<h2 className="text-lg font-normal">scanning...</h2>
<div className="space-y-4">
<div className="flex justify-between items-center border-b border-border pb-3">
<h2 className="text-lg font-normal text-white">Vision Sensor Active</h2>
<button
onClick={() => onShowScanner(false)}
className="p-2 lg:p-3 xl:p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10.5 bg-surface border border-border text-secondary rounded-none hover:text-rose-500 transition-all active:scale-95"
className="p-2 bg-surface-bright border border-border text-secondary hover:text-rose-500 transition-colors"
>
<X size={18} />
<X size={20} />
</button>
</div>
<Scanner onScanSuccess={onScanSuccess} onOCRMatch={onOCRMatch} />