githubnext/chopinPublic

Let's compose rich plans together

Scale buttons down on press

Nothing in the app acknowledged a click. Every control had a hover state and
then went straight from hovered to done, so the one moment the user is certain
they did something passed without being drawn at all.

Two scales rather than one. Four percent of a full-width row is several pixels
at each edge and reads as the row jumping; the same four percent on a 28-pixel
toolbar cell is one pixel, which is exactly right. Scale is a proportion, so
only the width tells us which case we are in, and `data-press="wide"` marks it —
on all six row-shaped controls: two reveal buttons, the history toggle, a
slash-menu command, a quoted passage, and a decision pointing into the plan.

The transition sits at zero specificity so any `transition` utility on the
element wins instead. That meant moving fourteen sites off `transition-colors`,
which covers the colours and pointedly not `scale`, onto the bare `transition`
utility that covers both. Buttons carrying no transition of their own fall back
to the theme's rather than snapping.

Disabled controls are excluded: a press that animates and then does nothing
says the opposite of what disabled is trying to say. The whole of it sits behind
`prefers-reduced-motion`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
CCMAMaggie Appleton and Claude Opus 5 (1M context) authored
87e93fcPatch
Parent7d56a20
11 files changed+45-14
StackedSplit
apps/web/src/chat/chat.tsx+1 −0
apps/web/src/chat/transcript.tsx+1 −0
apps/web/src/theme.css+25 −0
apps/web/src/workspace.tsx+1 −1
packages/editor/src/comments.tsx+1 −0
packages/editor/src/decisions.tsx+1 −0
packages/editor/src/toolbar/bubble.tsx+5 −5
packages/editor/src/toolbar/slash.tsx+2 −1
packages/editor/src/widgets/render-blocks.tsx+1 −1
packages/editor/src/widgets/tabs.tsx+1 −1
packages/question/src/react/question-view.tsx+6 −5