opui-css 5.3.0 → 5.4.0

package/dist/opui.components.css

@@ -6,6 +6,7 @@
 
 @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);
@@ -60,10 +61,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.
@@ -347,6 +348,7 @@
 
 @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);
@@ -391,10 +393,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));
@@ -414,12 +416,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.
@@ -1343,6 +1342,7 @@
 
 @layer components.root {
   :where(.ui-progress) {
+    --_motion: var(--motion, 1);
     --_accent-color: var(--primary);
     --_bg-color: var(--surface-tonal);
 
@@ -1383,11 +1383,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 {
@@ -1396,33 +1393,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;
       }
     }
   }
@@ -1869,6 +1864,7 @@
 
 @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
@@ -2142,9 +2138,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);
@@ -2163,9 +2157,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);
@@ -2212,6 +2204,7 @@
 
 @layer components.root {
   :where(.ui-switch) {
+    --_motion: var(--motion, 1);
     --_accent-color: var(--primary);
     --_accent-contrast: var(--primary-contrast);
 
@@ -2224,7 +2217,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);
@@ -2296,28 +2289,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);
-          }
-        }
       }
     }
 
@@ -3536,6 +3527,7 @@
 
 @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);
@@ -3551,8 +3543,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);
@@ -3585,9 +3577,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;
@@ -4055,6 +4045,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
 @layer components.extended {
   :where(.ui-dialog) {
+    --_motion: var(--motion, 1);
     inline-size: 100%;
     inset: 0;
     margin: auto;
@@ -4075,10 +4066,6 @@ Lists meant to be used stand-alone or as part of Select elements
     &::backdrop {
       backdrop-filter: blur(1px);
       background-color: rgba(0, 0, 0, 0.5);
-
-      @media (prefers-reduced-motion: reduce) {
-        backdrop-filter: none;
-      }
     }
 
     &:not([open]) {
@@ -4097,22 +4084,20 @@ Lists meant to be used stand-alone or as part of Select elements
     &[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;
       }
     }
   }
@@ -4125,6 +4110,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
 @layer components.root {
   :where(dialog.ui-drawer) {
+    --_motion: var(--motion, 1);
     --_backdrop-bg-color: transparent;
     --_backdrop-blur: blur(2px);
     --_bg-color: var(--surface-default);
@@ -4139,7 +4125,7 @@ Lists meant to be used stand-alone or as part of Select elements
     --_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);
@@ -4449,6 +4435,7 @@ Lists meant to be used stand-alone or as part of Select elements
 - 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);
@@ -4478,9 +4465,8 @@ Lists meant to be used stand-alone or as part of Select elements
         "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) {
@@ -4895,6 +4881,7 @@ Lists meant to be used stand-alone or as part of Select elements
 
 @layer components.extended {
   :where(.ui-select select) {
+    --_motion: var(--motion, 1);
     position: relative;
 
     /* Default arrow */
@@ -4932,13 +4919,11 @@ Lists meant to be used stand-alone or as part of Select elements
         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 */