SIGN IN SIGN UP

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