style: prefer reduced motion (#717)

paanSinghCoder · web-flow · commit dacc5f21e2ca · 2026-04-07T14:38:17.000+05:30
* style: prefer reduced motion

* style: prefer reduced motion

* style: update motion preferences to enable transitions only when `prefers-reduced-motion: no-preference`

* style: unify transition properties across components using CSS variables
diff --git a/apps/www/src/content/docs/components/accordion/index.mdx b/apps/www/src/content/docs/components/accordion/index.mdx
@@ -90,3 +90,4 @@ The accordion content can contain any React elements, allowing for rich layouts
 - Trigger elements use `aria-expanded` to indicate open/closed state
 - Supports keyboard navigation with Enter and Space to toggle items
 - Content panels use `aria-controls` and `aria-labelledby` for association
+- Respects motion preferences: icon rotation and panel expand/collapse motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/alert-dialog/index.mdx b/apps/www/src/content/docs/components/alert-dialog/index.mdx
@@ -121,3 +121,4 @@ You can nest alert dialogs for multi-step confirmation flows. When a nested aler
 - Uses `aria-label` or `aria-labelledby` to identify the dialog
 - Uses `aria-describedby` to provide additional context
 - Focus is trapped within the alert dialog while open
+- Respects motion preferences: alert dialog panel motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/button/index.mdx b/apps/www/src/content/docs/components/button/index.mdx
@@ -75,3 +75,4 @@ The button component accepts optional leading and/or trailing icons.
 - Supports keyboard activation with Enter and Space keys
 - Disabled state is communicated via `aria-disabled` attribute
 - Loading state prevents interaction and announces status to screen readers
+- Respects motion preferences: button loader rotation is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/collapsible/index.mdx b/apps/www/src/content/docs/components/collapsible/index.mdx
@@ -72,3 +72,4 @@ The collapsible can be disabled to prevent user interaction.
 - The Trigger uses `aria-expanded` to indicate the open/closed state of the panel.
 - Supports keyboard interaction with Enter and Space to toggle the panel.
 - The Panel is automatically associated with the Trigger via `aria-controls`.
+- Respects motion preferences: panel expand/collapse motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/dialog/index.mdx b/apps/www/src/content/docs/components/dialog/index.mdx
@@ -123,3 +123,4 @@ You can nest dialogs within one another. When a nested dialog opens, the parent
 - Dialog has `role="dialog"` and `aria-modal="true"`
 - Uses `aria-label` or `aria-labelledby` to identify the dialog
 - Uses `aria-describedby` to provide additional context
+- Respects motion preferences: dialog panel motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/drawer/index.mdx b/apps/www/src/content/docs/components/drawer/index.mdx
@@ -80,4 +80,5 @@ The Drawer can slide in from different sides of the screen. Swipe-to-dismiss is
 - Focus is trapped within the drawer and restored on close
 - Supports dismissal with Escape key and swipe gestures
 - Title is announced via `aria-labelledby`
+- Respects motion preferences: drawer slide motion is enabled only when `prefers-reduced-motion: no-preference`
 
diff --git a/apps/www/src/content/docs/components/link/index.mdx b/apps/www/src/content/docs/components/link/index.mdx
@@ -65,3 +65,4 @@ The Link component follows accessibility best practices:
 - External links have aria-labels indicating they open in new tabs
 - Download links include appropriate aria-labels
 - Maintains color contrast ratios for all variants
+- Hover feedback uses an opacity transition
diff --git a/apps/www/src/content/docs/components/popover/index.mdx b/apps/www/src/content/docs/components/popover/index.mdx
@@ -61,3 +61,4 @@ Customize how the popover aligns with its trigger.
 - Trigger uses `aria-haspopup` and `aria-expanded` attributes
 - Focus is managed when opening and closing the popover
 - Supports dismissal with Escape key
+- Respects motion preferences: popover entry motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/preview-card/index.mdx b/apps/www/src/content/docs/components/preview-card/index.mdx
@@ -76,3 +76,4 @@ Control the position of the preview card relative to its trigger.
 - Closes when the pointer leaves the trigger or content area
 - Content is accessible to screen readers when open
 - Trigger renders as a semantic `<a>` element
+- Respects motion preferences: preview card open/close motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/sidebar/index.mdx b/apps/www/src/content/docs/components/sidebar/index.mdx
@@ -103,7 +103,7 @@ Set `hideCollapsedItemTooltip` to disable tooltips on navigation items when the
 
 The Sidebar implements the following accessibility features:
 
-- **Reduced motion** — Respects the user's motion preferences. When the system "Reduce motion" setting is enabled, collapse/expand and hover transitions are disabled so the sidebar updates without animation.
+- **Reduced motion** — Sidebar collapse/expand motion is enabled only when `prefers-reduced-motion: no-preference`.
 
 - Proper ARIA roles and attributes
 
diff --git a/apps/www/src/content/docs/components/skeleton/index.mdx b/apps/www/src/content/docs/components/skeleton/index.mdx
@@ -98,5 +98,5 @@ The Skeleton component follows accessibility best practices:
 - Uses semantic HTML elements
 - Provides appropriate ARIA attributes
 - Maintains sufficient color contrast
-- Animation can be disabled for users who prefer reduced motion
+- Respects motion preferences: skeleton shimmer is enabled only when `prefers-reduced-motion: no-preference`
 - Supports both block and inline layouts
diff --git a/apps/www/src/content/docs/components/spinner/index.mdx b/apps/www/src/content/docs/components/spinner/index.mdx
@@ -44,3 +44,4 @@ The Spinner component includes appropriate ARIA attributes for accessibility:
 
 - `role="status"`: Indicates that the element is a status indicator.
 - `aria-hidden="true"`: Hides the spinner from screen readers, as it's a visual indicator only.
+- Respects motion preferences: spinner rotation is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/tabs/index.mdx b/apps/www/src/content/docs/components/tabs/index.mdx
@@ -85,4 +85,4 @@ Renders the content panel for a tab.
 - Uses `role="tablist"`, `role="tab"`, and `role="tabpanel"`
 - Active tab is indicated with `aria-selected`
 - Leading icon is wrapped with `aria-hidden` so it is not announced (treated as decorative)
-- Respects `prefers-reduced-motion: reduce`: the tab indicator does not animate when the user has requested reduced motion in OS/browser settings
+- Respects motion preferences: tab indicator motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/toast/index.mdx b/apps/www/src/content/docs/components/toast/index.mdx
@@ -95,3 +95,4 @@ Create a toast, then update or close it programmatically using the returned ID.
 - Close button has `aria-label="Close toast"`
 - Supports keyboard navigation and Escape to dismiss
 - Swipe-to-dismiss gesture support
+- Respects motion preferences: toast enter/exit motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/apps/www/src/content/docs/components/tooltip/index.mdx b/apps/www/src/content/docs/components/tooltip/index.mdx
@@ -83,3 +83,7 @@ Use `trackCursorAxis` prop on the Root component to make the tooltip follow the
 Show the arrow by setting `showArrow={true}` on the Content component:
 
 <Demo data={arrowDemo} />
+
+## Accessibility
+
+- Respects motion preferences: tooltip entry motion is enabled only when `prefers-reduced-motion: no-preference`
diff --git a/packages/raystack/components/accordion/accordion.module.css b/packages/raystack/components/accordion/accordion.module.css
@@ -49,15 +49,13 @@
   color: var(--rs-color-foreground-base-secondary);
   pointer-events: none;
   flex-shrink: 0;
-  transition: transform 150ms ease-in-out;
   width: var(--rs-space-4);
   height: var(--rs-space-4);
 }
 
 .accordion-content {
   height: var(--accordion-panel-height);
   overflow: hidden;
-  transition: height 150ms ease-out;
 }
 
 .accordion-content[data-starting-style],
@@ -78,4 +76,14 @@
   align-self: stretch;
   padding: var(--rs-space-5) var(--rs-space-4);
   border-top: 0px;
-}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .accordion-icon {
+    transition: transform 150ms ease-in-out;
+  }
+
+  .accordion-content {
+    transition: height 150ms ease-out;
+  }
+}
diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css
@@ -13,7 +13,6 @@
   padding: var(--rs-space-3) var(--rs-space-4);
   border-radius: var(--rs-radius-2);
   text-wrap: nowrap;
-  transition: all 0.2s ease-in-out;
 }
 
 .button:focus-visible {
@@ -246,7 +245,16 @@
   /* Todo: var does not exist for 10px */
   width: 10px;
   height: 10px;
-  animation: spin 1s linear infinite;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .button {
+    transition: all 0.2s ease-in-out;
+  }
+
+  .loader {
+    animation: spin 1s linear infinite;
+  }
 }
 
 .loader-text {
diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css
@@ -11,7 +11,7 @@
   border-radius: var(--rs-radius-2);
   white-space: nowrap;
   cursor: default;
-  transition: all 0.2s ease;
+  transition: var(--rs-transition-interactive);
   box-sizing: border-box;
   height: fit-content;
   width: fit-content;
diff --git a/packages/raystack/components/collapsible/collapsible.module.css b/packages/raystack/components/collapsible/collapsible.module.css
@@ -11,10 +11,15 @@
 .panel {
   height: var(--collapsible-panel-height);
   overflow: hidden;
-  transition: height 150ms ease-out;
 }
 
 .panel[data-starting-style],
 .panel[data-ending-style] {
   height: 0;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .panel {
+    transition: height 150ms ease-out;
+  }
+}
diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
@@ -23,7 +23,7 @@
   position: fixed;
   top: 50%;
   left: 50%;
-  transition: all 150ms;
+  transition: opacity 150ms;
   transform: translate(-50%, -50%);
 }
 
@@ -84,11 +84,9 @@
   z-index: var(--rs-z-index-portal);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .dialogOverlay,
+@media (prefers-reduced-motion: no-preference) {
   .dialogContent {
-    animation: none;
-    transition: none;
+    transition: opacity 150ms, transform 150ms;
   }
 }
 
diff --git a/packages/raystack/components/drawer/drawer.module.css b/packages/raystack/components/drawer/drawer.module.css
@@ -73,7 +73,6 @@
 .drawerPopup-right {
   width: 250px;
   height: 100%;
-  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateX(var(--drawer-swipe-movement-x));
 }
 
@@ -90,7 +89,6 @@
 .drawerPopup-left {
   width: 250px;
   height: 100%;
-  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateX(var(--drawer-swipe-movement-x));
 }
 
@@ -107,7 +105,6 @@
 .drawerPopup-top {
   width: 100%;
   height: 300px;
-  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateY(var(--drawer-swipe-movement-y));
 }
 
@@ -124,7 +121,6 @@
 .drawerPopup-bottom {
   width: 100%;
   height: 300px;
-  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   transform: translateY(var(--drawer-swipe-movement-y));
 }
 
@@ -201,9 +197,11 @@
   border-top: 1px solid var(--rs-color-border-base-primary);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .drawerPopup,
-  .backdrop {
-    transition: none;
+@media (prefers-reduced-motion: no-preference) {
+  .drawerPopup-right,
+  .drawerPopup-left,
+  .drawerPopup-top,
+  .drawerPopup-bottom {
+    transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
   }
 }
diff --git a/packages/raystack/components/icon-button/icon-button.module.css b/packages/raystack/components/icon-button/icon-button.module.css
@@ -8,7 +8,7 @@
   border: none;
   color: var(--rs-color-foreground-base-primary);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: var(--rs-transition-interactive);
   padding: var(--rs-space-1);
 }
 
diff --git a/packages/raystack/components/input-field/input-field.module.css b/packages/raystack/components/input-field/input-field.module.css
@@ -29,7 +29,7 @@
   border-radius: var(--rs-radius-2);
   border: 0.5px solid var(--rs-color-border-base-tertiary);
   background: var(--rs-color-background-base-primary);
-  transition: all 0.2s ease;
+  transition: var(--rs-transition-interactive);
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -155,7 +155,7 @@
 
 .has-chips {
   background: var(--rs-color-background-base-primary);
-  transition: all 0.2s ease;
+  transition: var(--rs-transition-interactive);
 }
 
 .has-chips:hover {
diff --git a/packages/raystack/components/meter/meter.module.css b/packages/raystack/components/meter/meter.module.css
@@ -42,7 +42,6 @@
 .indicator {
   height: 100%;
   background-color: var(--rs-color-background-accent-emphasis);
-  transition: width 500ms;
 }
 
 /* Circular variant — viewBox is 72×72, SVG scales to container size */
@@ -83,7 +82,16 @@
     (1 - var(--rs-meter-percentage, 0) / 100)
   );
   stroke-linecap: butt;
-  transition: stroke-dashoffset 500ms;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .indicator {
+    transition: width 500ms;
+  }
+
+  .circularIndicatorCircle {
+    transition: stroke-dashoffset 500ms;
+  }
 }
 
 .meter-variant-circular .value {
diff --git a/packages/raystack/components/navbar/navbar.module.css b/packages/raystack/components/navbar/navbar.module.css
@@ -7,7 +7,12 @@
   box-shadow: var(--rs-shadow-feather);
   box-sizing: border-box;
   min-height: var(--rs-space-11);
-  transition: transform 0.2s ease-in-out;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .root {
+    transition: transform 0.2s ease-in-out;
+  }
 }
 
 .root[data-sticky="true"] {
diff --git a/packages/raystack/components/popover/popover.module.css b/packages/raystack/components/popover/popover.module.css
@@ -16,7 +16,6 @@
   box-shadow: var(--rs-shadow-soft);
   border: 1px solid var(--rs-color-border-base-primary);
   color: var(--rs-color-foreground-base-primary);
-  animation: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @keyframes slideUpAndFade {
@@ -29,3 +28,9 @@
     transform: translateY(0);
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .popover {
+    animation: slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
diff --git a/packages/raystack/components/preview-card/preview-card.module.css b/packages/raystack/components/preview-card/preview-card.module.css
@@ -6,9 +6,7 @@
   height: var(--positioner-height);
   width: var(--positioner-width);
   max-width: var(--available-width);
-  transition-property: top, left, right, bottom, transform;
-  transition-timing-function: var(--easing);
-  transition-duration: var(--animation-duration);
+  transition: opacity var(--animation-duration) var(--easing);
 }
 
 .popup {
@@ -25,9 +23,7 @@
   width: var(--popup-width, auto);
   height: var(--popup-height, auto);
 
-  transition-property: width, height, opacity, transform;
-  transition-timing-function: var(--easing);
-  transition-duration: var(--animation-duration);
+  transition: opacity var(--animation-duration) var(--easing);
 }
 
 .popup[data-starting-style],
@@ -79,9 +75,7 @@
   width: var(--popup-width);
   translate: 0;
   opacity: 1;
-  transition:
-    translate var(--animation-duration) var(--easing),
-    opacity calc(var(--animation-duration) / 2) var(--easing);
+  transition: opacity calc(var(--animation-duration) / 2) var(--easing);
 }
 
 .viewport[data-activation-direction~="left"]
@@ -107,3 +101,30 @@
   translate: -30% 0;
   opacity: 0;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .positioner {
+    transition:
+      top var(--animation-duration) var(--easing),
+      left var(--animation-duration) var(--easing),
+      right var(--animation-duration) var(--easing),
+      bottom var(--animation-duration) var(--easing),
+      transform var(--animation-duration) var(--easing),
+      opacity var(--animation-duration) var(--easing);
+  }
+
+  .popup {
+    transition:
+      width var(--animation-duration) var(--easing),
+      height var(--animation-duration) var(--easing),
+      opacity var(--animation-duration) var(--easing),
+      transform var(--animation-duration) var(--easing);
+  }
+
+  .viewport [data-previous],
+  .viewport [data-current] {
+    transition:
+      translate var(--animation-duration) var(--easing),
+      opacity calc(var(--animation-duration) / 2) var(--easing);
+  }
+}
diff --git a/packages/raystack/components/progress/progress.module.css b/packages/raystack/components/progress/progress.module.css
diff --git a/packages/raystack/components/scroll-area/scroll-area.module.css b/packages/raystack/components/scroll-area/scroll-area.module.css
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
diff --git a/packages/raystack/components/skeleton/skeleton.module.css b/packages/raystack/components/skeleton/skeleton.module.css
diff --git a/packages/raystack/components/spinner/spinner.module.css b/packages/raystack/components/spinner/spinner.module.css
diff --git a/packages/raystack/components/switch/switch.module.css b/packages/raystack/components/switch/switch.module.css
diff --git a/packages/raystack/components/tabs/tabs.module.css b/packages/raystack/components/tabs/tabs.module.css
diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css
diff --git a/packages/raystack/components/toast/toast.module.css b/packages/raystack/components/toast/toast.module.css
diff --git a/packages/raystack/components/tooltip/tooltip.module.css b/packages/raystack/components/tooltip/tooltip.module.css
diff --git a/packages/raystack/styles/effects.css b/packages/raystack/styles/effects.css
