fix(material/slide-toggle): Increase slide-toggle transition time

Increases the animation transition time to 300ms

Fixes #28916

Author: GiftLanga

src/material/core/tokens/m2/mat/_switch.scss

@@ -32,8 +32,8 @@ $prefix: (mat, switch);
     // the m3 slide-toggle uses opacity.
     visible-track-opacity: 1,
     hidden-track-opacity: 1,
-    visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1),
-    hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
+    visible-track-transition: transform 300ms 0ms cubic-bezier(0, 0, 0.2, 1),
+    hidden-track-transition: transform 300ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
     track-outline-width: 1px,
     track-outline-color: transparent,
     selected-track-outline-width: 1px,

src/material/core/tokens/m3/mat/_switch.scss

@@ -31,8 +31,8 @@ $prefix: (mat, switch);
     // the m3 slide-toggle uses opacity.
     visible-track-opacity: token-utils.hardcode(1, $exclude-hardcoded),
     hidden-track-opacity: token-utils.hardcode(0, $exclude-hardcoded),
-    visible-track-transition: token-utils.hardcode(opacity 75ms, $exclude-hardcoded),
-    hidden-track-transition: token-utils.hardcode(opacity 75ms, $exclude-hardcoded),
+    visible-track-transition: token-utils.hardcode(opacity 300ms, $exclude-hardcoded),
+    hidden-track-transition: token-utils.hardcode(opacity 300ms, $exclude-hardcoded),
     track-outline-width: token-utils.hardcode(2px, $exclude-hardcoded),
     track-outline-color: map.get($systems, md-sys-color, outline),
     selected-track-outline-width: token-utils.hardcode(2px, $exclude-hardcoded),

src/material/slide-toggle/slide-toggle.scss

@@ -78,11 +78,11 @@ $_mat-slots: (tokens-mat-switch.$prefix, tokens-mat-switch.get-token-slots());
   }
 
   &::before {
-    transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
+    transition: transform 300ms 0ms cubic-bezier(0, 0, 0.2, 1);
     transform: translateX(0);
 
     .mdc-switch--selected & {
-      transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
+      transition: transform 300ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
       transform: translateX(100%);
 
       [dir='rtl'] .mdc-switch--selected & {
@@ -173,7 +173,7 @@ $_mat-slots: (tokens-mat-switch.$prefix, tokens-mat-switch.get-token-slots());
   pointer-events: none;
   position: absolute;
   top: 0;
-  transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 300ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
   left: 0;
   right: auto;
   transform: translateX(0);
@@ -208,9 +208,9 @@ $_mat-slots: (tokens-mat-switch.$prefix, tokens-mat-switch.get-token-slots());
   // Used for M3 animations. Does not affect the M2 slide-toggle
   // because the width and height are static, and the margin is unused.
   transition:
-    width 75ms cubic-bezier(0.4, 0, 0.2, 1),
-    height 75ms cubic-bezier(0.4, 0, 0.2, 1),
-    margin 75ms cubic-bezier(0.4, 0, 0.2, 1);
+    width 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    height 300ms cubic-bezier(0.4, 0, 0.2, 1),
+    margin 300ms cubic-bezier(0.4, 0, 0.2, 1);
 
   [dir='rtl'] & {
     left: auto;