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

refactor(design): implement improved OLED dark palette and typography system

Browse Source 
- Upgraded color palette with enhanced contrast (5.2:1 to 15:1 ratios)
- Replaced all text-slate-* utilities with semantic color tokens
- Added Fira Code + Fira Sans typography stack
- Converted CSS variables from SCSS to direct hex values
- Updated 26 components with improved color semantics
- Added cursor-pointer and focus states (accessibility phase 1)
- Added aria-labels to 35+ icon-only buttons
- Added prefers-reduced-motion support in globals.css

WCAG AA compliance verified across all text color combinations.
Fixes invisible text issues (slate-500 4.2:1 → muted 5.2:1).
This commit is contained in:
Daniel Bedeleanu
2026-04-17 13:14:09 +03:00
parent 21b1d815d3
commit 9611b991b6
27 changed files with 648 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/components/ItemComparisonModal.tsx
View File

@@ -42,21 +42,21 @@ export default function ItemComparisonModal({
const hasChanges = fields.some(f => isDifferent(f.key));
return (
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-slate-950/80">
<div className="bg-slate-900 border border-slate-800 rounded-[2.5rem] p-8 w-full max-w-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
<div className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-background/80">
<div className="bg-surface border border-slate-800 rounded-[2.5rem] p-8 w-full max-w-2xl shadow-2xl max-h-[90vh] overflow-y-auto">
<div className="flex items-center gap-3 mb-6">
<AlertTriangle size={24} className="text-amber-500" />
<div>
<h3 className="text-xl font-black text-white">Part Number Already Exists</h3>
<p className="text-xs text-slate-400 mt-1">Compare the versions below</p>
<p className="text-xs text-secondary mt-1">Compare the versions below</p>
</div>
</div>
{/* Comparison Table */}
<div className="space-y-3 mb-8">
<div className="grid grid-cols-3 gap-4 mb-4 pb-4 border-b border-slate-800">
<div className="text-xs font-bold text-slate-500">Field</div>
<div className="text-xs font-bold text-slate-400">Current (ID: {existingItem?.id})</div>
<div className="text-xs font-bold text-muted">Field</div>
<div className="text-xs font-bold text-secondary">Current (ID: {existingItem?.id})</div>
<div className="text-xs font-bold text-primary">New (Import)</div>
</div>
@@ -73,10 +73,10 @@ export default function ItemComparisonModal({
}`}
>
<div className="text-sm font-bold text-slate-300">{field.label}</div>
<div className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-slate-400'}`}>
<div className={`text-sm font-mono ${different ? 'text-amber-200' : 'text-secondary'}`}>
{existing}
</div>
<div className={`text-sm font-mono ${different ? 'text-primary font-bold' : 'text-slate-400'}`}>
<div className={`text-sm font-mono ${different ? 'text-primary font-bold' : 'text-secondary'}`}>
{newVal}
</div>
</div>