Skip to content

Commit 00c8be1

Browse files
OneStepAt4timeOneStepAt4time
committed
refactor(dashboard): replace all hardcoded slate-* colors in Layout.tsx with CSS design tokens
Addresses #3284. Replaced 19 hardcoded slate-* Tailwind color classes with CSS custom property references (var(--color-*)). Removed all corresponding dark: prefix overrides since CSS vars handle both themes natively. Mappings applied: - text-slate-600/700/500 → var(--color-text-primary/muted) - bg-slate-100/50 → var(--color-surface-hover) - border-slate-200/300 → var(--color-border-strong) Preserved intentional glassmorphism effects (border-white/5, bg-white/5) — these are opacity-based blur effects, not color tokens. Bundle: 129.72 → 129.21 kB (-0.4%, unused Tailwind slate purged). tsc clean. 31 a11y tests pass. Build clean.
1 parent 35fde64 commit 00c8be1

1 file changed

Lines changed: 17 additions & 17 deletions

File tree

‎dashboard/src/components/Layout.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,7 @@ export default function Layout() {
430430
onClick={closeMobile}
431431
tabIndex={hiddenMobileSidebarControlTabIndex}
432432
disabled={isMobileSidebarHidden}
433-
className="md:hidden inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)]"
433+
className="md:hidden inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
434434
aria-label={t("aria.closeMenu")}
435435
aria-hidden={isMobileSidebarHidden ? 'true' : undefined}
436436
>
@@ -443,7 +443,7 @@ export default function Layout() {
443443
{NAV_GROUPS.map((group) => (
444444
<div key={group.label} className="flex flex-col gap-1">
445445
{!isCollapsed && (
446-
<span className="px-3 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">
446+
<span className="px-3 pt-1 pb-0.5 text-[10px] font-bold uppercase tracking-widest text-[var(--color-text-muted)] select-none">
447447
{group.label}
448448
</span>
449449
)}
@@ -458,7 +458,7 @@ export default function Layout() {
458458
`flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-all min-h-[44px] ${
459459
isActive
460460
? 'border-l-2 border-[var(--color-accent-on-light)] bg-[var(--color-accent-on-light)]/10 text-[var(--color-accent-on-light)] dark:border-cyan dark:bg-cyan/10 dark:text-cyan glow-nav-active'
461-
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 border-l-2 border-transparent dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)]'
461+
: 'text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] border-l-2 border-transparent'
462462
} ${isCollapsed ? 'justify-center' : ''}`
463463
}
464464
title={isCollapsed ? label : undefined}
@@ -475,8 +475,8 @@ export default function Layout() {
475475
<div className="border-t border-white/5 px-3 py-4 flex flex-col gap-2">
476476
{identityLabel && identityDetailLabel && !isCollapsed && (
477477
<div className="px-3 py-2" aria-label={t("aria.signedInUser")}>
478-
<p className="truncate text-xs font-medium text-slate-700 dark:text-[var(--color-text-primary)]">{identityLabel}</p>
479-
<p className="truncate text-[11px] text-slate-500 dark:text-[var(--color-text-muted)]">
478+
<p className="truncate text-xs font-medium text-[var(--color-text-primary)]">{identityLabel}</p>
479+
<p className="truncate text-[11px] text-[var(--color-text-muted)]">
480480
{identityDetailLabel}
481481
</p>
482482
</div>
@@ -491,7 +491,7 @@ export default function Layout() {
491491
`flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-all min-h-[44px] ${
492492
isActive
493493
? 'border-l-2 border-[var(--color-accent-on-light)] bg-[var(--color-accent-on-light)]/10 text-[var(--color-accent-on-light)] dark:border-cyan dark:bg-cyan/10 dark:text-cyan glow-nav-active'
494-
: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 border-l-2 border-transparent dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)]'
494+
: 'text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] border-l-2 border-transparent'
495495
} ${isCollapsed ? 'justify-center' : ''}`
496496
}
497497
title={isCollapsed ? 'Settings' : undefined}
@@ -504,7 +504,7 @@ export default function Layout() {
504504
<button
505505
type="button"
506506
onClick={toggleSidebar}
507-
className="hidden min-h-[44px] md:flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)] transition-colors w-full"
507+
className="hidden min-h-[44px] md:flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-colors w-full"
508508
aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
509509
title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
510510
>
@@ -521,7 +521,7 @@ export default function Layout() {
521521
type="button"
522522
onClick={handleLogout}
523523
tabIndex={hiddenMobileSidebarControlTabIndex}
524-
className={`flex items-center gap-2.5 rounded-lg px-3 py-3 min-h-[44px] text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)] transition-colors w-full ${isCollapsed ? 'justify-center' : ''}`}
524+
className={`flex items-center gap-2.5 rounded-lg px-3 py-3 min-h-[44px] text-sm font-medium text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-colors w-full ${isCollapsed ? 'justify-center' : ''}`}
525525
aria-label={t("aria.signOut")}
526526
>
527527
<LogOut className="h-4 w-4 shrink-0" />
@@ -542,7 +542,7 @@ export default function Layout() {
542542
onClick={toggleMobile}
543543
tabIndex={isMobileDrawerOpen ? -1 : undefined}
544544
aria-hidden={isMobileDrawerOpen ? 'true' : undefined}
545-
className="md:hidden inline-flex h-11 w-11 items-center justify-center rounded-lg text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)] transition-colors"
545+
className="md:hidden inline-flex h-11 w-11 items-center justify-center rounded-lg text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-colors"
546546
aria-label={t("aria.openMenu")}
547547
>
548548
<Menu className="h-5 w-5" />
@@ -564,7 +564,7 @@ export default function Layout() {
564564
onClick={openNewSession}
565565
aria-label={t("aria.newSessionCmd")}
566566
title="New Session (⌘N)"
567-
className="inline-flex h-11 w-11 items-center justify-center rounded-lg p-2.5 min-h-[44px] min-w-[44px] text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)] transition-colors"
567+
className="inline-flex h-11 w-11 items-center justify-center rounded-lg p-2.5 min-h-[44px] min-w-[44px] text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-colors"
568568
>
569569
<Plus className="h-4 w-4" />
570570
</button>
@@ -573,19 +573,19 @@ export default function Layout() {
573573
<button
574574
type="button"
575575
onClick={() => setPaletteOpen(true)}
576-
className="hidden min-h-[44px] sm:inline-flex items-center gap-2 rounded-md border border-slate-200 bg-white px-3 py-1.5 text-xs text-[var(--color-text-muted)] hover:bg-slate-50 hover:text-[var(--color-text-primary)] dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10 transition-all"
576+
className="hidden min-h-[44px] sm:inline-flex items-center gap-2 rounded-md border border-[var(--color-border-strong)] bg-[var(--color-surface)] px-3 py-1.5 text-xs text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] transition-all"
577577
>
578578
<Search className="h-3 w-3" />
579579
<span>Search…</span>
580580
<kbd className="ml-1 font-mono text-[10px] text-[var(--color-text-primary)] border border-white/10 rounded px-1">⌘K</kbd>
581581
</button>
582582

583583
{/* Version + theme toggle */}
584-
<div className="inline-flex items-center gap-1 sm:gap-2 rounded-md border border-slate-200 bg-white px-1.5 py-1 sm:px-2 text-xs text-slate-700 dark:border-void-lighter dark:bg-void dark:text-[var(--color-text-primary)]">
584+
<div className="inline-flex items-center gap-1 sm:gap-2 rounded-md border border-[var(--color-border-strong)] bg-[var(--color-surface)] px-1.5 py-1 sm:px-2 text-xs text-[var(--color-text-primary)]">
585585
<button
586586
type="button"
587587
onClick={toggleTheme}
588-
className="inline-flex h-11 w-11 items-center justify-center rounded p-2 sm:p-2.5 min-h-[44px] min-w-[44px] text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)]"
588+
className="inline-flex h-11 w-11 items-center justify-center rounded p-2 sm:p-2.5 min-h-[44px] min-w-[44px] text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]"
589589
aria-label={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
590590
title={resolvedTheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
591591
>
@@ -599,7 +599,7 @@ export default function Layout() {
599599
type="button"
600600
onClick={handleCheckUpdates}
601601
disabled={updateCheckLoading || aegisVersion === '...'}
602-
className="hidden min-h-[44px] sm:inline-flex items-center gap-1 rounded-md border border-slate-200 px-2 py-1 text-xs text-[var(--color-text-primary)] hover:bg-slate-100 dark:border-void-lighter dark:hover:bg-void-lighter disabled:cursor-not-allowed disabled:border-slate-300 disabled:bg-slate-50 disabled:text-slate-700 dark:disabled:border-void-lighter dark:disabled:bg-transparent dark:disabled:text-[var(--color-text-muted)]"
602+
className="hidden min-h-[44px] sm:inline-flex items-center gap-1 rounded-md border border-[var(--color-border-strong)] px-2 py-1 text-xs text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] disabled:cursor-not-allowed disabled:border-[var(--color-border-strong)] disabled:bg-[var(--color-surface)] disabled:text-[var(--color-text-muted)]"
603603
>
604604
<RefreshCw className={`h-3 w-3 ${updateCheckLoading ? 'animate-spin' : ''}`} />
605605
{updateCheckLoading ? 'Checking…' : 'Check updates'}
@@ -661,13 +661,13 @@ export default function Layout() {
661661
className={`status-dot shrink-0 ${sseConnected ? 'status-dot--idle' : ''}`}
662662
style={sseConnected ? undefined : { backgroundColor: '#666' }}
663663
/>
664-
<span className="text-[11px] text-slate-500 truncate">{sseIndicatorLabel}</span>
664+
<span className="text-[11px] text-[var(--color-text-muted)] truncate">{sseIndicatorLabel}</span>
665665
</>
666666
)}
667667
</div>
668668

669669
{/* Center: version — hidden on very small screens */}
670-
<span className="hidden sm:block text-[11px] text-slate-600 font-mono">aegis v{aegisVersion}</span>
670+
<span className="hidden sm:block text-[11px] text-[var(--color-text-muted)] font-mono">aegis v{aegisVersion}</span>
671671

672672
{/* Right: keyboard hint — desktop only */}
673673
<button
@@ -680,7 +680,7 @@ export default function Layout() {
680680
</button>
681681

682682
{/* Mobile: compact version on the right */}
683-
<span className="sm:hidden text-[11px] text-slate-600 font-mono truncate">v{aegisVersion}</span>
683+
<span className="sm:hidden text-[11px] text-[var(--color-text-muted)] font-mono truncate">v{aegisVersion}</span>
684684
</footer>
685685
</div>
686686
{/* Toast notifications */}

0 commit comments

Comments
 (0)