Reduce motion for press effect (#2758)

* pressEffect mixin

* apply pressEffect mixin

Author: katarzynatobis

src/components/buttons/_buttons.scss

@@ -19,6 +19,7 @@ $largeButtonSize: componentSize(l);
 
 .sg-button {
   @include applyFocus();
+  @include applyPressEffect();
 
   position: relative;
   display: inline-flex;
@@ -36,26 +37,17 @@ $largeButtonSize: componentSize(l);
   color: $white;
   text-transform: uppercase;
   padding: 0 20px;
-  will-change: background-color, border-color;
-  transition-property: background-color, border-color;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-in-out;
   box-sizing: border-box;
   touch-action: manipulation;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   user-select: none;
-  transition: transform $durationModerate2 $easingRegular;
   cursor: default;
 
   &[href] {
     cursor: pointer;
   }
 
-  &:active:not([disabled]) {
-    transform: scale(0.96);
-  }
-
   &:disabled {
     @media (forced-colors: active) {
       color: GrayText;
@@ -401,6 +393,7 @@ $largeButtonSize: componentSize(l);
   &--icon-only {
     padding: 0;
     width: $mediumButtonSize;
+    --pressScale: 0.92;
 
     &.sg-button--s {
       width: $smallButtonSize;
@@ -429,10 +422,6 @@ $largeButtonSize: componentSize(l);
       clip: rect(0, 0, 0, 0);
       border: none;
     }
-
-    &:active:not([disabled]) {
-      transform: scale(0.92);
-    }
   }
 
   @media (forced-colors: active) {

src/components/buttons/_buttons_lite.scss

@@ -1,4 +1,6 @@
 .sg-button-lite {
+  @include applyPressEffect();
+
   // color variables
   --button-lite-solid-background-color: transparent;
   --button-lite-hover-background-color: var(--gray-50);
@@ -20,7 +22,6 @@
   justify-content: center;
   align-items: center;
   color: var(--button-lite-label-color);
-  transition: transform $durationModerate2 $easingRegular;
   touch-action: manipulation;
   -webkit-user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -80,8 +81,6 @@
     }
 
     &:active {
-      transform: scale(0.96);
-
       &::before {
         background: var(--button-lite-active-background-color);
         opacity: 0.2;

src/components/chip/_chip.scss

@@ -10,6 +10,8 @@
   user-select: none;
 
   &__input {
+    @include applyPressEffect('+ .sg-chip__pill');
+
     width: 100%;
     height: 100%;
     z-index: 1;
@@ -77,7 +79,6 @@
 
       &:active + .sg-chip__pill {
         background-color: rgba($gray-40, 0.2);
-        transform: scale(0.96);
       }
     }
   }
@@ -94,7 +95,7 @@
     border-radius: var(--border-radius-xs);
     transition: box-shadow $durationQuick1 $easingExit,
       border-color $durationModerate1 $easingLinear,
-      transform $durationModerate2 $easingRegular,
+      transform var(--pressTransitionDuration) var(--pressTransitionEasing),
       background-color $durationModerate1 $easingLinear;
 
     @media (forced-colors: active) {

src/components/select-menu/_select-menu.scss

@@ -292,6 +292,8 @@
     }
 
     &__option {
+      @include applyPressEffect();
+
       padding: 8px 12px;
       width: 100%;
       display: flex;
@@ -301,11 +303,7 @@
       border-radius: var(--border-radius-xs);
       cursor: default;
       transition: background-color $durationModerate1 $easingLinear,
-        transform $durationModerate2 $easingRegular;
-
-      &:active:not([disabled]) {
-        transform: scale(0.96);
-      }
+        transform var(--pressTransitionDuration) var(--pressTransitionEasing);
 
       &:hover {
         background-color: var(--gray-10);

src/sass/_basics.scss

@@ -36,6 +36,13 @@ $includeHtml: false !default;
     --focusInnerWidth: 2px;
     --focusOuterWidth: 2px;
 
+    --pressTransitionDuration: #{$durationModerate2};
+    --pressTransitionEasing: #{$easingRegular};
+    --pressScale: 0.96;
+    @media (prefers-reduced-motion) {
+      --pressScale: 1;
+    }
+
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 

src/sass/_mixins.scss

@@ -151,3 +151,25 @@
 @mixin sgButtonHoverMix($color1, $color2, $percent) {
   background-color: mix($color1, $color2, $percent);
 }
+
+@mixin applyPressEffect($nestingSelector: null) {
+  @if ($nestingSelector) {
+    & #{$nestingSelector} {
+      transition-property: transform;
+      transition-duration: var(--pressTransitionDuration);
+      transition-timing-function: var(--pressTransitionEasing);
+    }
+
+    &:active:not([disabled]) #{$nestingSelector} {
+      transform: scale(var(--pressScale));
+    }
+  } @else {
+    transition-property: transform;
+    transition-duration: var(--pressTransitionDuration);
+    transition-timing-function: var(--pressTransitionEasing);
+
+    &:active:not([disabled]) {
+      transform: scale(var(--pressScale));
+    }
+  }
+}