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

18
frontend/components/AdminOverlay.tsx
View File

@@ -125,7 +125,7 @@ export default function AdminOverlay({
<button
data-testid="close-admin-overlay"
onClick={onClose}
className="p-2 hover:bg-black border border-transparent hover:border-border transition-colors text-[#888888] focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="p-2 hover:bg-black border border-transparent hover:border-border transition-colors text-secondary focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Close"
>
<X size={20} />
@@ -136,8 +136,8 @@ export default function AdminOverlay({
<section className="space-y-2 md:space-y-3">
<div className="flex items-center justify-between">
<div>
<h3 className="text-sm font-normal text-[#888888]">User Management</h3>
<p className="text-xs text-[#888888] mt-0.5">Create accounts and control access</p>
<h3 className="text-sm font-normal text-secondary">User Management</h3>
<p className="text-xs text-secondary mt-0.5">Create accounts and control access</p>
</div>
<button
onClick={() => setShowCreateUserModal(true)}
@@ -151,12 +151,12 @@ export default function AdminOverlay({
{users.map(u => (
<div key={u.id} className="bg-transparent border border-border p-3 md:p-4 flex items-center justify-between transition-colors hover:border-muted">
<div className="flex items-center gap-2 md:gap-3">
<div className={`p-2 ${u.role === 'admin' ? "bg-primary/20 text-primary border border-primary/30" : "bg-black text-[#888888] border border-border"}`}>
<div className={`p-2 ${u.role === 'admin' ? "bg-primary/20 text-primary border border-primary/30" : "bg-black text-secondary border border-border"}`}>
<User size={16} />
</div>
<div>
<p className="text-sm font-normal text-white">{u.username}</p>
<p className="text-xs font-normal text-[#888888]">{u.role}</p>
<p className="text-xs font-normal text-secondary">{u.role}</p>
</div>
</div>
@@ -185,8 +185,8 @@ export default function AdminOverlay({
<section className="space-y-2 md:space-y-3">
<div className="flex items-center justify-between">
<div>
<h3 className="text-sm font-normal text-[#888888]">Category Groups</h3>
<p className="text-xs text-[#888888] mt-0.5">Organize items by type or location</p>
<h3 className="text-sm font-normal text-secondary">Category Groups</h3>
<p className="text-xs text-secondary mt-0.5">Organize items by type or location</p>
</div>
<button
onClick={() => setShowCreateCategoryModal(true)}
@@ -205,7 +205,7 @@ export default function AdminOverlay({
</div>
<div>
<p className="text-sm font-normal text-white">{cat.name}</p>
<p className="text-xs text-[#888888] font-mono">{cat.description || 'No description'}</p>
<p className="text-xs text-secondary font-mono">{cat.description || 'No description'}</p>
</div>
</div>
@@ -235,7 +235,7 @@ export default function AdminOverlay({
<AlertTriangle size={16} />
<p className="text-sm font-normal">Sign Out</p>
</div>
<p className="text-xs text-[#888888]">End your session and return to the login screen.</p>
<p className="text-xs text-secondary">End your session and return to the login screen.</p>
<button
onClick={() => {
import('@/lib/auth').then(m => m.clearAuth());