@duro-app/ui 0.38.1 → 0.40.0

package/package.json

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

package/src/components/ActionBar/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({
   overlay: {
@@ -63,8 +64,8 @@ export const styles = css.create({
     },
     cursor: 'pointer',
     transitionProperty: 'color, background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

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/Checkbox/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({
   root: {
@@ -28,8 +29,8 @@ export const styles = css.create({
     justifyContent: 'center',
     flexShrink: 0,
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   boxUnchecked: {
     backgroundColor: colors.bg,

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

@@ -1,6 +1,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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   button: {
@@ -22,8 +23,8 @@ export const styles = css.create({
     color: colors.text,
     cursor: 'pointer',
     transitionProperty: 'background-color, border-color, color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {default: 0, ':focus-visible': 2},
     outlineStyle: 'solid',
     outlineColor: colors.accent,

package/src/components/Combobox/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} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -24,7 +25,7 @@ export const styles = css.create({
     },
     borderRadius: radii.sm,
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   inputWrapperFocused: {
     borderColor: colors.accent,
@@ -94,7 +95,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemSelected: {
     color: colors.accent,

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/components/Dialog/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({
   // --- Backdrop ---
@@ -19,7 +20,7 @@ export const styles = css.create({
       to: {opacity: 1},
     }),
     animationDuration: '180ms',
-    animationTimingFunction: 'ease-out',
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   backdropClosing: {
@@ -29,7 +30,7 @@ export const styles = css.create({
       to: {opacity: 0},
     }),
     animationDuration: '140ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -75,7 +76,7 @@ export const styles = css.create({
       },
     }),
     animationDuration: '180ms',
-    animationTimingFunction: 'ease-out',
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   popupClosing: {
@@ -91,7 +92,7 @@ export const styles = css.create({
       },
     }),
     animationDuration: '140ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -174,7 +175,7 @@ export const styles = css.create({
     padding: 0,
     flexShrink: 0,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
 
   // --- Inline wrapper (for Trigger / Close children) ---

package/src/components/Drawer/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({
   // --- Backdrop ---
@@ -17,8 +18,8 @@ export const styles = css.create({
       from: {opacity: 0},
       to: {opacity: 1},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   backdropClosing: {
@@ -27,7 +28,7 @@ export const styles = css.create({
       to: {opacity: 0},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -104,8 +105,8 @@ export const styles = css.create({
       from: {transform: 'translateX(100%)'},
       to: {transform: 'translateX(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutRight: {
@@ -114,7 +115,7 @@ export const styles = css.create({
       to: {transform: 'translateX(100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -124,8 +125,8 @@ export const styles = css.create({
       from: {transform: 'translateX(-100%)'},
       to: {transform: 'translateX(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutLeft: {
@@ -134,7 +135,7 @@ export const styles = css.create({
       to: {transform: 'translateX(-100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -144,8 +145,8 @@ export const styles = css.create({
       from: {transform: 'translateY(100%)'},
       to: {transform: 'translateY(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutBottom: {
@@ -154,7 +155,7 @@ export const styles = css.create({
       to: {transform: 'translateY(100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -232,7 +233,7 @@ export const styles = css.create({
     padding: 0,
     flexShrink: 0,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
 
   // --- Inline wrapper ---

package/src/components/Input/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: {
@@ -19,8 +20,8 @@ export const styles = css.create({
     borderStyle: 'solid',
     borderRadius: radii.sm,
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/InputGroup/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({
   wrapper: {
@@ -16,8 +17,8 @@ export const styles = css.create({
     borderRadius: radii.sm,
     overflow: 'hidden',
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   addon: {
     display: 'inline-flex',
@@ -51,8 +52,8 @@ export const styles = css.create({
       ':active': colors.bg,
     },
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   addonDisabled: {
     opacity: 0.4,

package/src/components/LinkButton/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,8 +18,8 @@ export const styles = css.create({
     cursor: 'pointer',
     textDecoration: 'none',
     transitionProperty: 'background-color, border-color, color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   sizeDefault: {
     paddingTop: spacing.sm,

package/src/components/Menu/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} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -30,7 +31,7 @@ export const styles = css.create({
     borderRadius: radii.sm,
     cursor: 'pointer',
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   backdrop: {
     position: 'fixed',
@@ -74,7 +75,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemHighlighted: {
     backgroundColor: colors.bgCardHover,

package/src/components/RadioGroup/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({
   root: {
@@ -36,8 +37,8 @@ export const styles = css.create({
     justifyContent: 'center',
     flexShrink: 0,
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   circleUnchecked: {
     backgroundColor: colors.bg,

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

@@ -1,6 +1,7 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -26,8 +27,8 @@ export const styles = css.create({
     touchAction: 'none',
     userSelect: 'none',
     transitionProperty: 'opacity',
-    transitionDuration: '200ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.base,
+    transitionTimingFunction: easing.standard,
   },
   scrollbarVertical: {
     top: 0,
@@ -64,7 +65,7 @@ export const styles = css.create({
     },
     borderRadius: radii.full,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   // Dynamic styles — simple identifier params only (StyleX constraint)
   viewportMaxHeight: (maxHeight: number | string) => ({

package/src/components/Select/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} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -31,7 +32,7 @@ export const styles = css.create({
     borderRadius: radii.sm,
     cursor: 'pointer',
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   value: {
     color: colors.text,
@@ -94,7 +95,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemSelected: {
     color: colors.accent,

package/src/components/SideNav/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({
   root: {
@@ -34,8 +35,8 @@ export const styles = css.create({
     borderWidth: 0,
     cursor: 'pointer',
     transitionProperty: 'color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   groupTriggerActive: {
     color: colors.text,
@@ -44,8 +45,8 @@ export const styles = css.create({
     display: 'inline-flex',
     alignItems: 'center',
     transitionProperty: 'transform',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   chevronOpen: {
     transform: 'rotate(90deg)',
@@ -72,8 +73,8 @@ export const styles = css.create({
     borderRadius: radii.sm,
     cursor: 'pointer',
     transitionProperty: 'color, background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     textAlign: 'left' as const,
     outlineWidth: {
       default: 0,

package/src/components/Switch/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({
   root: {
@@ -26,8 +27,8 @@ export const styles = css.create({
     padding: 0,
     cursor: 'inherit',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {default: 0, ':focus-visible': 2},
     outlineStyle: 'solid',
     outlineColor: colors.accent,
@@ -55,8 +56,8 @@ export const styles = css.create({
     borderRadius: radii.full,
     backgroundColor: '#fff',
     transitionProperty: 'transform',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   thumbChecked: {
     transform: 'translateX(16px)',

package/src/components/Table/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'
 
 // Container-query thresholds. Picked for typical 5-7 column admin tables —
 // see Table.stories.tsx "Responsive" for the visual reasoning. Defined
@@ -129,8 +130,8 @@ export const styles = css.create({
       ':hover': colors.bgCardHover,
     },
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     // Stack-mode card chrome
     padding: {
       default: 0,