Give the app a focus state, a brand selection, and honest reduced motion (#52)
* ui: give the app a focus state, a brand selection, and honest reduced motion Four foundations the design system was missing. All of it lives in src/styles.css with no component changes, so it composes with everything currently in flight. FOCUS. Nine components clear the UA outline with `outline-none`, and nothing anywhere put a ring back — there is not one `focus-visible:` utility in the app. Measured in the running app, all eight text fields focused invisibly: the composer, sidebar search, the answer box on an approval card, both onboarding fields, and all three API key fields. A keyboard user filling in App Settings could not tell which key they were typing into. Buttons kept the browser default, which is legible but reads as an unstyled page inside a hand-tuned dark UI. The rules are deliberately unlayered. Tailwind ships utilities in @layer utilities and unlayered styles outrank every layer, so this beats `outline-none` with no !important and without editing the nine components — every one of which has an open PR against it. Verified: a mouse click still paints nothing, Tab paints a 2px accent ring. The generic ring sets no radius, because an outline already follows the element's own corners and 26 controls here are `rounded-full`. Text fields are the exception: most carry a radius already, but the composer input has none, so its ring came out a hard rectangle inside a pill. SELECTION. ::selection was never styled, so dragging over a bot's reply painted Chrome's default blue through a palette that was pixel-sampled off the real app. It now tints the accent. REDUCED MOTION. The mascot was the only thing honouring prefers-reduced-motion. Panels still flew in, cards still popped, and every hover transition still ran. Now the app stills: panel-in 0.24s and pop-in 0.2s both collapse to 0.01ms under reduce, and normal playback is untouched without it. Durations collapse rather than `animation: none`, because a spinner frozen mid-turn reads as a hung app. The scrollbar thumb also gets a hover state; it was inert. No palette values changed, no radii tokens, no type. Nothing here restyles what was already designed — it fills in what had no styling. * Address focus and reduced-motion review --------- Co-authored-by: milind-soni <milindsoni201@gmail.com>
C
Chidambaram committed
b52a42adec4ddb0cff3f53972529dcdd9651fc91
Parent: 01ab295
Committed by GitHub <noreply@github.com>
on 8/18/2026, 5:00:35 AM