@duro-app/ui 0.38.1 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.38.1",
+  "version": "0.39.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.38.1"
+    "@duro-app/tokens": "^0.39.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Button/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   base: {
@@ -17,11 +18,20 @@ export const styles = css.create({
     borderWidth: 1,
     borderStyle: 'solid',
     cursor: 'pointer',
-    transitionProperty: 'background-color, border-color, color, opacity',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionProperty: 'background-color, border-color, color, opacity, transform',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     textDecoration: 'none',
     whiteSpace: 'nowrap',
+    // Tactile press feedback. The scale is suppressed under reduced motion (and
+    // duration.fast collapses to 0ms there too), so it's inert for those users.
+    transform: {
+      default: 'scale(1)',
+      ':active': {
+        default: 'scale(0.97)',
+        '@media (prefers-reduced-motion: reduce)': 'scale(1)',
+      },
+    },
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/Card/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   base: {
@@ -41,11 +42,16 @@ export const styles = css.create({
     },
     cursor: 'pointer',
     transitionProperty: 'background-color, border-color, transform',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+    // Lift on hover; suppressed under reduced motion so there's no positional
+    // shift (the token duration also collapses to 0ms there).
     transform: {
       default: 'translateY(0)',
-      ':hover': 'translateY(-2px)',
+      ':hover': {
+        default: 'translateY(-2px)',
+        '@media (prefers-reduced-motion: reduce)': 'translateY(0)',
+      },
     },
   },
   // Sizes (padding)

package/src/components/DetailPanel/styles.css.ts

@@ -2,12 +2,11 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
-/** Apple-standard ease: aggressive deceleration, feels like "arriving" */
-const APPLE_EASE_OUT = 'cubic-bezier(0.32, 0.72, 0, 1)'
-const APPLE_EASE_IN = 'cubic-bezier(0.72, 0, 0.68, 0.28)'
-
-const OPEN_DURATION = '280ms'
+// The "Apple ease" curves and the 280ms open now live in the shared motion
+// tokens (easing.easeOut/easeIn, duration.slow). The 220ms close is specific to
+// this panel's exit, so it stays local.
 const CLOSE_DURATION = '220ms'
 
 export const styles = css.create({
@@ -24,8 +23,8 @@ export const styles = css.create({
       from: {width: 0},
       to: {width: 360},
     }),
-    animationDuration: OPEN_DURATION,
-    animationTimingFunction: APPLE_EASE_OUT,
+    animationDuration: duration.slow,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   wrapperCloseSm: {
@@ -34,7 +33,7 @@ export const styles = css.create({
       to: {width: 0},
     }),
     animationDuration: CLOSE_DURATION,
-    animationTimingFunction: APPLE_EASE_IN,
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -44,8 +43,8 @@ export const styles = css.create({
       from: {width: 0},
       to: {width: 480},
     }),
-    animationDuration: OPEN_DURATION,
-    animationTimingFunction: APPLE_EASE_OUT,
+    animationDuration: duration.slow,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   wrapperCloseMd: {
@@ -54,7 +53,7 @@ export const styles = css.create({
       to: {width: 0},
     }),
     animationDuration: CLOSE_DURATION,
-    animationTimingFunction: APPLE_EASE_IN,
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -87,8 +86,8 @@ export const styles = css.create({
         opacity: 1,
       },
     }),
-    animationDuration: OPEN_DURATION,
-    animationTimingFunction: APPLE_EASE_OUT,
+    animationDuration: duration.slow,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOut: {
@@ -103,7 +102,7 @@ export const styles = css.create({
       },
     }),
     animationDuration: CLOSE_DURATION,
-    animationTimingFunction: APPLE_EASE_IN,
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -183,7 +182,8 @@ export const styles = css.create({
     padding: 0,
     flexShrink: 0,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
 
   inlineWrapper: {

package/src/global-reset.css

@@ -33,3 +33,22 @@
     text-decoration: none;
   }
 }
+
+/*
+ * Reduced-motion safety net. Neutralizes animation/transition timing globally
+ * for users who prefer reduced motion, covering every component (dialogs,
+ * drawers, detail panels, spinners, …) without touching their per-component
+ * tuned animations. Uses 0.01ms (not 0) so animationend/transitionend still
+ * fire and any state-driven mount/unmount logic completes. Kept outside
+ * `@layer reset` so its `!important` wins regardless of cascade layers.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}