From 24e9efa5eba73af5530a6a3e4c388712ce31f57b Mon Sep 17 00:00:00 2001
From: GiftLanga <glanga@retrorabbit.co.za>
Date: Thu, 18 Jul 2024 15:42:37 +0200
Subject: [PATCH] fix(material/slide-toggle): Increase slide-toggle transition
 time

Increases the animation transition time to 300ms

Fixes #28916
---
 src/material/core/tokens/m2/mat/_switch.scss |  4 ++--
 src/material/core/tokens/m3/mat/_switch.scss |  4 ++--
 src/material/slide-toggle/slide-toggle.scss  | 12 ++++++------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss
index 993f82655c97..e535c3116b42 100644
--- a/src/material/core/tokens/m2/mat/_switch.scss
+++ b/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,
diff --git a/src/material/core/tokens/m3/mat/_switch.scss b/src/material/core/tokens/m3/mat/_switch.scss
index 21d1c0a260d5..90830b2c4b48 100644
--- a/src/material/core/tokens/m3/mat/_switch.scss
+++ b/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),
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 9e2cc83ee952..c2f2be05930a 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/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;