refactor(ui): design system audit — score 12→19/20

[paulovitin]

Summary

Systematic design-system audit across accessibility, performance, theming, and anti-pattern compliance. Took the impeccable audit score from 12/20 (Acceptable) to 19/20 (Excellent) in a single pass.

This PR enforces the design principles documented in DESIGN.md — specifically the absolute bans on side-stripe borders, glassmorphism, and layout-property animations — while completing the semantic token migration and adding keyboard accessibility to all interactive elements.

Why these changes matter

Side-stripe borders removed (7 instances)

The left-border accent pattern (border-left: 3px solid var(--accent)) is an absolute ban in our design system. It's a common AI-generated cliché that signals "someone used a template." Our active states now use background tints with subtle border rings — visually distinctive without the stripe.

Impact: Every active/selected state in Settings, FileBrowser, Sidebar, ActivityDashboard, WorktreeManager, and PromptDrawer now respects the design spec.

Glassmorphism eliminated (3 mobile overlays)

backdrop-filter: blur(12px) on mobile is both a design-ban violation AND a performance problem. Each blur composites the entire underlying layer on the GPU every frame. Replaced with opaque backgrounds + elevation shadows per DESIGN.md's shadow vocabulary.

Impact: CommandWidget, NewSessionSheet, IdeasOverlay — smoother rendering on mobile, spec-compliant.

Layout animations → GPU transforms (9 components)

Progress bars used transition: width 0.3s which forces the browser to recalculate layout on every frame (reflow). Converted to transform: scaleX() which runs entirely on the GPU compositor — zero layout cost.

Same treatment for TriStateToggle (left → translateX).

Impact: Eliminates layout thrashing during progress animations across TabBar, ClaudeUsageDashboard, ProcessManager, UpdateProgress, DictationSettings, SessionCard, SessionDetail, and Settings.

Token system completed — zero orphan hex

Before this PR, ~50 hard-coded hex values and ~35 var(--token, #fallback) redundancies existed across the CSS. All resolved:

• Created missing tokens: --changes, --urgent, --search-match, --search-match-active, --search-match-border, --tweak-highlight
• Fixed wrong token names: --green/--red/--yellow/--danger/--ok/--color-error → proper --success/--error/--changes
• Converted raw rgba(r,g,b,a) → color-mix(in srgb, var(--token) N%, transparent)

Impact: The entire desktop CSS now uses the token vocabulary exclusively. Theme changes propagate consistently. No more drift.

Keyboard accessibility (26 interactive divs)

Interactive <div onClick={...}> elements are invisible to keyboard navigation and screen readers. Added role="button" tabIndex={0} onKeyDown={Enter/Space} to all collapsible headers, clickable rows, and toggle elements.

Created src/utils/a11y.ts with a reusable onClickKeyDown helper.

Impact: Full keyboard navigation for GitPanel sections, Sidebar headers, Settings tabs, MCP items, commit rows, toast dismiss, task queue items, and more. WCAG 2.1.1 (Keyboard) and 4.1.2 (Name/Role/Value) compliance.

Visual diff

Before	After
Side-stripe border-left: 3px accent	Background tint + border ring
backdrop-filter: blur(12px)	Opaque var(--bg-secondary) + shadow
transition: width 0.3s	transition: transform 0.3s (GPU)
var(--green, #3fb950)	var(--success)
No keyboard handlers on divs	role="button" tabIndex={0} onKeyDown

Test plan

• bun run build passes clean (TypeScript + Vite)
• Visual verification: Settings nav active state
• Visual verification: FileBrowser active entry
• Visual verification: Sidebar branch active state
• Visual verification: Progress bar animation smoothness
• Visual verification: Toast styling
• Keyboard test: Tab through GitPanel section headers, press Enter/Space
• Mobile: CommandWidget/NewSessionSheet render without blur artifacts

🤖 Generated with Claude Code