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

22
frontend/components/AdminOverlay.tsx
View File

@@ -113,8 +113,8 @@ export default function AdminOverlay({
loading={confirmState.loading}
dangerLevel={confirmState.affectedCount && confirmState.affectedCount > 10 ? 'high' : 'medium'}
/>
<div className="fixed inset-0 z-50 bg-slate-950/60 animate-in fade-in duration-300">
<div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md bg-slate-900 border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
<div className="fixed inset-0 z-50 bg-background/60 animate-in fade-in duration-300">
<div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md bg-surface border-l border-slate-800 shadow-2xl flex flex-col animate-in slide-in-from-right duration-500">
<div className="p-6 border-b border-slate-800 flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="p-2 bg-slate-800 rounded-xl text-primary">
@@ -124,7 +124,7 @@ export default function AdminOverlay({
</div>
<button
onClick={onClose}
className="p-2 hover:bg-slate-800 rounded-full transition-colors text-slate-500 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
className="p-2 hover:bg-slate-800 rounded-full transition-colors text-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Close"
>
<X size={20} />
@@ -135,8 +135,8 @@ export default function AdminOverlay({
<section className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-sm font-black text-slate-400">User Management</h3>
<p className="text-xs text-slate-500 mt-0.5">Create accounts and control access</p>
<h3 className="text-sm font-black text-secondary">User Management</h3>
<p className="text-xs text-muted mt-0.5">Create accounts and control access</p>
</div>
<button
onClick={() => setShowCreateUserModal(true)}
@@ -150,12 +150,12 @@ export default function AdminOverlay({
{users.map(u => (
<div key={u.id} className="bg-slate-800/40 border border-slate-800 p-4 rounded-2xl flex items-center justify-between">
<div className="flex items-center gap-3">
<div className={`p-2 rounded-lg ${u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-slate-700 text-slate-400"}`}>
<div className={`p-2 rounded-lg ${u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-slate-700 text-secondary"}`}>
<User size={16} />
</div>
<div>
<p className="text-sm font-bold text-white">{u.username}</p>
<p className="text-xs font-bold text-slate-500">{u.role}</p>
<p className="text-xs font-bold text-muted">{u.role}</p>
</div>
</div>
@@ -184,8 +184,8 @@ export default function AdminOverlay({
<section className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-sm font-black text-slate-400">Category Groups</h3>
<p className="text-xs text-slate-500 mt-0.5">Organize items by type or location</p>
<h3 className="text-sm font-black text-secondary">Category Groups</h3>
<p className="text-xs text-muted mt-0.5">Organize items by type or location</p>
</div>
<button
onClick={() => setShowCreateCategoryModal(true)}
@@ -204,7 +204,7 @@ export default function AdminOverlay({
</div>
<div>
<p className="text-sm font-bold text-white">{cat.name}</p>
<p className="text-xs text-slate-500 font-mono">{cat.description || 'No description'}</p>
<p className="text-xs text-muted font-mono">{cat.description || 'No description'}</p>
</div>
</div>
@@ -234,7 +234,7 @@ export default function AdminOverlay({
<AlertTriangle size={16} />
<p className="text-sm font-black">Sign Out</p>
</div>
<p className="text-xs text-slate-500">End your session and return to the login screen.</p>
<p className="text-xs text-muted">End your session and return to the login screen.</p>
<button
onClick={() => {
import('@/lib/auth').then(m => m.clearAuth());