feat: add button press feedback

2026-07-21 15:10:08 +02:00
parent 801f847ec4
commit 4c9424f1e3
6 changed files with 178 additions and 1 deletions
@@ -0,0 +1,19 @@
+# Button Press Feedback Design
+
+## Context
+
+Buttons currently change on hover, but many provide little or no visible acknowledgment while the pointer is pressed. The interface mixes a shared Base UI button with native buttons, so changing only the shared component would leave inconsistent behavior.
+
+## Chosen interaction
+
+Apply one CSS press vocabulary to every enabled native button. During `:active`, the button compresses to `scale(0.97)`, loses raised shadow, and receives a restrained brightness change. The transition lasts 140 ms and uses an ease-out-quint curve (`cubic-bezier(0.22, 1, 0.36, 1)`). This reads as a physical press without bounce, ripple, layout movement, or JavaScript state.
+
+The existing one-pixel translation on the shared button is removed so shared and native buttons do not combine two motion patterns.
+
+## Accessibility
+
+Under `prefers-reduced-motion: reduce`, scale is disabled. The brightness and shadow change remain, providing a clear pressed state without kinetic motion. Disabled buttons receive no press treatment.
+
+## Verification
+
+A focused contract test checks the global enabled-button selector, scale, timing, easing, and reduced-motion override. The full frontend suite and typecheck guard regressions. Playwright then holds a real button in the active state and confirms its computed transform, followed by a visual screenshot/snapshot check.