fix: no down state for reduced motion

adobe · Feb 29, 2024 · ba2e79f · ba2e79f
1 parent 42629dc
commit ba2e79f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/components/button/index.css b/components/button/index.css
@@ -150,19 +150,23 @@ governing permissions and limitations under the License.
   &:active {
     /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */
     transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down));
+
+    @media (prefers-reduced-motion: reduce) {
+      transform: none;
+    }
   }
 
   .spectrum-Icon {
     /* Any block-size difference between the intended workflow icon size and actual icon used.
        Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
     --_icon-size-difference: max(0px,
-      var(--spectrum-button-intended-icon-size) - 
+      var(--spectrum-button-intended-icon-size) -
       var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))
     );
 
     margin-block-start: var(--mod-button-icon-margin-block-start,
       max(0px,
-        var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - 
+        var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) -
         var(--mod-button-border-width, var(--spectrum-button-border-width)) +
         (var(--_icon-size-difference, 0px) / 2)
       )

diff --git a/components/checkbox/index.css b/components/checkbox/index.css
@@ -139,6 +139,10 @@ governing permissions and limitations under the License.
   &:active {
     .spectrum-Checkbox-box {
       transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
+
+      @media (prefers-reduced-motion: reduce) {
+        transform: none;
+      }
     }
 
     .spectrum-Checkbox-box::before {