opui-css 5.3.0 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 5.4.0 - 2026-06-09
+
+- Added global control for motion that lets you enable or disable all motion with a single class `.ui-motion-on`, `.ui-motion-off`, `.ui-motion-debug`. By default it will listen to `prefers-reduced-motion`. Locally each component individually has `--_motion` variable that can be changed as well.
+
 ## 5.3.0 - 2026-06-04
 
 Vue support! 🎉

package/core/normalize.css

@@ -11,6 +11,28 @@
     scrollbar-width: thin;
   }
 
+  html {
+    --motion: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      --motion: 0;
+    }
+  }
+
+  .ui-motion-off {
+    --motion: 0 !important;
+  }
+
+  .ui-motion-on {
+    --motion: 1 !important;
+  }
+
+  .ui-motion-debug {
+    --motion: 10 !important;
+  }
+
   :where(html) {
     --_page-bg-color: var(--surface-default);
 
@@ -119,19 +141,11 @@
     border-radius: var(--border-radius, 0px);
     outline: 2px solid var(--_focus-visible-color);
     outline-offset: 2px;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    :where(:focus-visible) {
-      transition: outline-offset 0.15 var(--ease-2);
-    }
-
-    :where(:not(:active):focus-visible) {
-      transition-duration: 0.15s;
-    }
+    transition: outline-offset calc(0.15s * var(--motion)) var(--ease-2);
   }
 
   :where(:not(:active):focus-visible) {
+    transition-duration: calc(0.15s * var(--motion));
     outline-offset: var(--outline-offset, 0px);
   }
 

package/core/utils.css

@@ -62,9 +62,7 @@ Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dia
           translateZ(-1px) scale(var(--thumb-scale));
         will-change: transform;
 
-        @media (prefers-reduced-motion: no-preference) {
-          transition: transform 0.2s ease;
-        }
+        transition: transform calc(0.2s * var(--motion, 1)) ease;
       }
     }
   }

package/css/components/accordion.css

@@ -1,5 +1,6 @@
 @layer components.extended {
   :where(details.ui-accordion) {
+    --_motion: var(--motion, 1);
     --_actions-gap: var(--size-1);
     --_actions-margin-block-start: var(--size-3);
     --_actions-padding-block-end: var(--size-1);
@@ -15,8 +16,8 @@
     --_shadow: none;
     --_summary-padding-block: var(--size-3);
     --_summary-padding-inline: var(--_padding-inline);
-    --_svg-transition: 0.2s var(--ease-1);
-    --_transition: 0.2s;
+    --_svg-transition: calc(0.2s * var(--_motion)) var(--ease-1);
+    --_transition: calc(0.2s * var(--_motion));
 
     background-color: var(--_bg-color);
     border: var(--_border-width) solid var(--_border-color);
@@ -49,9 +50,7 @@
 
     /* Accordion animation */
     /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
-    @media (prefers-reduced-motion: no-preference) {
-      interpolate-size: allow-keywords;
-    }
+    interpolate-size: allow-keywords;
 
     &::details-content {
       block-size: 0;

package/css/components/button.css

@@ -1,5 +1,6 @@
 @layer components.root {
   :where(.ui-button) {
+    --_motion: var(--motion, 1);
     --_color: light-dark(var(--color-16), var(--color-1));
     --_color-contrast: light-dark(var(--color-1), var(--color-16));
     --_color-tonal: var(--surface-tonal);
@@ -54,10 +55,10 @@
     text-align: center;
     text-decoration: none;
     transition:
-      background-color 0.1s ease,
-      color 0.1s ease,
-      border-color 0.1s ease,
-      box-shadow 0.1s ease;
+      background-color calc(0.1s * var(--_motion)) ease,
+      color calc(0.1s * var(--_motion)) ease,
+      border-color calc(0.1s * var(--_motion)) ease,
+      box-shadow calc(0.1s * var(--_motion)) ease;
     user-select: none;
 
     /* Colors — shared interaction model for critical and primary.

package/css/components/dialog.css

@@ -1,5 +1,6 @@
 @layer components.extended {
   :where(.ui-dialog) {
+    --_motion: var(--motion, 1);
     inline-size: 100%;
     inset: 0;
     margin: auto;
@@ -20,10 +21,6 @@
     &::backdrop {
       backdrop-filter: blur(1px);
       background-color: rgba(0, 0, 0, 0.5);
-
-      @media (prefers-reduced-motion: reduce) {
-        backdrop-filter: none;
-      }
     }
 
     &:not([open]) {
@@ -42,22 +39,20 @@
     &[open] {
       opacity: 1;
       transition:
-        display 0.2s allow-discrete,
-        overlay 0.2s allow-discrete,
-        opacity 0.2s var(--ease-out-1);
+        display calc(0.2s * var(--_motion)) allow-discrete,
+        overlay calc(0.2s * var(--_motion)) allow-discrete,
+        opacity calc(0.2s * var(--_motion)) var(--ease-out-1);
 
       @starting-style {
         opacity: 0;
       }
     }
 
-    @media (prefers-reduced-motion: no-preference) {
-      &[open] {
-        margin-block-start: 15%;
+    &[open] {
+      margin-block-start: 15%;
 
-        @starting-style {
-          opacity: 0;
-        }
+      @starting-style {
+        opacity: 0;
       }
     }
   }

package/css/components/drawer.css

@@ -1,5 +1,6 @@
 @layer components.root {
   :where(dialog.ui-drawer) {
+    --_motion: var(--motion, 1);
     --_backdrop-bg-color: transparent;
     --_backdrop-blur: blur(2px);
     --_bg-color: var(--surface-default);
@@ -14,7 +15,7 @@
     --_header-padding: var(--size-3);
     --_inline-size: min(375px, 100vi);
     --_shadow: var(--shadow-2);
-    --_transition-duration: 0.2s;
+    --_transition-duration: calc(0.2s * var(--_motion));
     --_transition-timing: var(--ease-out-3);
 
     background-color: var(--_bg-color);

package/css/components/icon-button.css

@@ -1,5 +1,6 @@
 @layer components.root {
   :where(.ui-icon-button) {
+    --_motion: var(--motion, 1);
     --_color: light-dark(var(--color-16), var(--color-1));
     --_color-contrast: light-dark(var(--color-1), var(--color-16));
     --_color-tonal: var(--surface-tonal);
@@ -44,10 +45,10 @@
     padding: 0;
     transform-style: preserve-3d;
     transition:
-      background-color 0.1s ease,
-      color 0.1s ease,
-      border-color 0.1s ease,
-      box-shadow 0.1s ease;
+      background-color calc(0.1s * var(--_motion)) ease,
+      color calc(0.1s * var(--_motion)) ease,
+      border-color calc(0.1s * var(--_motion)) ease,
+      box-shadow calc(0.1s * var(--_motion)) ease;
 
     &:where([disabled]) {
       --_text-color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
@@ -67,12 +68,9 @@
     &::before {
       --highlight-size: 130%;
       background-color: transparent;
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition:
-          transform 0.2s ease,
-          background-color 0.1s ease;
-      }
+      transition:
+        transform calc(0.2s * var(--_motion)) ease,
+        background-color calc(0.1s * var(--_motion)) ease;
     }
 
     /* Colors — shared interaction model for critical and primary.

package/css/components/progress.css

@@ -1,5 +1,6 @@
 @layer components.root {
   :where(.ui-progress) {
+    --_motion: var(--motion, 1);
     --_accent-color: var(--primary);
     --_bg-color: var(--surface-tonal);
 
@@ -40,11 +41,8 @@
 
       &[value]::-webkit-progress-value {
         background-color: var(--_accent-color);
-
-        @media (prefers-reduced-motion: no-preference) {
-          transition: inline-size 0.2s
-            var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
-        }
+        transition: inline-size calc(0.2s * var(--_motion))
+          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
       }
 
       &::-moz-progress-bar {
@@ -53,33 +51,31 @@
     }
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    :where(.ui-progress):has(> progress:indeterminate) {
-      &::after {
-        animation: indeterminate 2s linear infinite;
-        background-color: var(--_accent-color);
-        content: "";
-        inset: 0 auto 0 0;
-        position: absolute;
-        will-change: inset-inline-start, inset-inline-end;
-      }
+  :where(.ui-progress):has(> progress:indeterminate) {
+    &::after {
+      animation: indeterminate calc(2s * var(--motion, 1)) linear infinite;
+      background-color: var(--_accent-color);
+      content: "";
+      inset: 0 auto 0 0;
+      position: absolute;
+      will-change: inset-inline-start, inset-inline-end;
+    }
 
-      & > progress {
-        &::-webkit-progress-value {
-          background-color: transparent;
-        }
+    & > progress {
+      &::-webkit-progress-value {
+        background-color: transparent;
+      }
 
-        &::-moz-progress-bar {
-          background-color: transparent;
-        }
+      &::-moz-progress-bar {
+        background-color: transparent;
       }
     }
+  }
 
-    [dir="rtl"] {
-      :where(.ui-progress):has(> progress:indeterminate) {
-        &::after {
-          animation-direction: reverse;
-        }
+  [dir="rtl"] {
+    :where(.ui-progress):has(> progress:indeterminate) {
+      &::after {
+        animation-direction: reverse;
       }
     }
   }

package/css/components/range.css

@@ -1,5 +1,6 @@
 @layer components.root {
   :where(.ui-range) {
+    --_motion: var(--motion, 1);
     display: grid;
     gap: var(--size-1) 0;
     /* Two-column base so the optional .value cell can sit next to the
@@ -273,9 +274,7 @@
         inline-size: var(--_thumb-size);
         margin-block-start: var(--_thumb-offset);
 
-        @media (prefers-reduced-motion: no-preference) {
-          transition: box-shadow 0.1s ease;
-        }
+        transition: box-shadow calc(0.1s * var(--_motion)) ease;
 
         .ui-fieldset-item:focus-within & {
           border-color: var(--gray-14);
@@ -294,9 +293,7 @@
         inline-size: var(--_thumb-size);
         margin-block-start: var(--_thumb-offset);
 
-        @media (prefers-reduced-motion: no-preference) {
-          transition: box-shadow 0.1s ease;
-        }
+        transition: box-shadow calc(0.1s * var(--_motion)) ease;
 
         .ui-fieldset-item:focus-within & {
           border-color: var(--gray-14);

package/css/components/select.css

@@ -1,5 +1,6 @@
 @layer components.extended {
   :where(.ui-select select) {
+    --_motion: var(--motion, 1);
     position: relative;
 
     /* Default arrow */
@@ -37,13 +38,11 @@
         transform: scale(0.9);
       }
 
-      @media (prefers-reduced-motion: no-preference) {
-        transition:
-          display 0.2s allow-discrete,
-          opacity 0.2s var(--ease-3),
-          overlay 0.2s allow-discrete,
-          scale 0.2s var(--ease-3);
-      }
+      transition:
+        display calc(0.2s * var(--_motion)) allow-discrete,
+        opacity calc(0.2s * var(--_motion)) var(--ease-3),
+        overlay calc(0.2s * var(--_motion)) allow-discrete,
+        scale calc(0.2s * var(--_motion)) var(--ease-3);
     }
 
     /* Animation off-stage styles */

package/css/components/switch.css

@@ -1,5 +1,6 @@
 @layer components.root {
   :where(.ui-switch) {
+    --_motion: var(--motion, 1);
     --_accent-color: var(--primary);
     --_accent-contrast: var(--primary-contrast);
 
@@ -12,7 +13,7 @@
     --_track-height: var(--size-5);
     --_track-width: var(--size-8);
     --_transition-tf: var(--ease-4);
-    --_transition-time: 0.2s;
+    --_transition-time: calc(0.2s * var(--_motion));
 
     align-items: center;
     color: var(--text-primary);
@@ -84,28 +85,26 @@
       }
 
       /* Animation */
-      @media (prefers-reduced-motion: no-preference) {
-        /* Track */
-        &::before {
-          transition:
-            background-color var(--_transition-time) var(--_transition-tf),
-            border-color var(--_transition-time) var(--_transition-tf);
-        }
+      /* Track */
+      &::before {
+        transition:
+          background-color var(--_transition-time) var(--_transition-tf),
+          border-color var(--_transition-time) var(--_transition-tf);
+      }
 
-        /* Dot */
-        &::after {
-          transition: all var(--_transition-time) var(--_transition-tf);
-        }
+      /* Dot */
+      &::after {
+        transition: all var(--_transition-time) var(--_transition-tf);
+      }
 
+      &:active:after {
+        --_dot-outline-size: calc(var(--size-1) + 1px);
+      }
+
+      &:checked {
         &:active:after {
           --_dot-outline-size: calc(var(--size-1) + 1px);
         }
-
-        &:checked {
-          &:active:after {
-            --_dot-outline-size: calc(var(--size-1) + 1px);
-          }
-        }
       }
     }
 

package/css/components/text-field.css

@@ -4,6 +4,7 @@
 - Form related styles such as: label, supporting text, error handling
 */
   :where(.ui-text-field, .ui-textarea, .ui-select) {
+    --_motion: var(--motion, 1);
     --_accent-color: var(--primary);
     --_bg-color: var(--surface-default);
     --_border-color: var(--field-border-color);
@@ -33,9 +34,8 @@
         "footer footer footer";
       min-block-size: var(--_height);
 
-      @media (prefers-reduced-motion: no-preference) {
-        transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      }
+      transition: border-color calc(0.2s * var(--_motion))
+        cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     :where(.ui-field) :where(input, textarea, select) {