From 0137d858f570e100ce954253b22c930aed4eed94 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Tue, 30 Jan 2024 17:10:15 -0500
Subject: [PATCH] fixup! fix(material/slide-toggle): fix m3 width, height, and
 margin

---
 .../theming/_custom-tokens.scss                  | 12 ++++--------
 src/material/core/tokens/m2/mat/_switch.scss     | 12 ++++--------
 src/material/slide-toggle/slide-toggle.scss      | 16 ++++++++--------
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
index 601da96fd1d3..d245ff1d47cb 100644
--- a/src/material-experimental/theming/_custom-tokens.scss
+++ b/src/material-experimental/theming/_custom-tokens.scss
@@ -1089,14 +1089,10 @@
 /// @return {Map} A set of custom tokens for the mat-slide-toggle
 @function switch($systems, $exclude-hardcoded) {
   @return ((
-    unselected-handle-width: 16px,
-    unselected-handle-height: 16px,
-    selected-handle-width: 24px,
-    selected-handle-height: 24px,
-    with-icon-handle-width: 24px,
-    with-icon-handle-height: 24px,
-    pressed-handle-width: 28px,
-    pressed-handle-height: 28px,
+    unselected-handle-size: 16px,
+    selected-handle-size: 24px,
+    with-icon-handle-size: 24px,
+    pressed-handle-size: 28px,
     selected-handle-margin-left: 24px,
     selected-with-icon-handle-margin-left: 24px,
     selected-pressed-handle-margin-left: 22px,
diff --git a/src/material/core/tokens/m2/mat/_switch.scss b/src/material/core/tokens/m2/mat/_switch.scss
index 21936340426c..f6b3045d9b9c 100644
--- a/src/material/core/tokens/m2/mat/_switch.scss
+++ b/src/material/core/tokens/m2/mat/_switch.scss
@@ -8,14 +8,10 @@ $prefix: (mat, switch);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
-    unselected-handle-width: 20px,
-    unselected-handle-height: 20px,
-    selected-handle-width: 20px,
-    selected-handle-height: 20px,
-    pressed-handle-width: 20px,
-    pressed-handle-height: 20px,
-    with-icon-handle-width: 20px,
-    with-icon-handle-height: 20px,
+    unselected-handle-size: 20px,
+    selected-handle-size: 20px,
+    pressed-handle-size: 20px,
+    with-icon-handle-size: 20px,
 
     selected-handle-margin-left: 0,
     selected-with-icon-handle-margin-left: 0,
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 49e0693ef8cf..8807711b5909 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/src/material/slide-toggle/slide-toggle.scss
@@ -130,23 +130,23 @@
 @include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
   .mat-mdc-slide-toggle {
     .mdc-switch--unselected .mdc-switch__handle {
-      @include token-utils.create-token-slot(width, unselected-handle-width);
-      @include token-utils.create-token-slot(height, unselected-handle-height);
+      @include token-utils.create-token-slot(width, unselected-handle-size);
+      @include token-utils.create-token-slot(height, unselected-handle-size);
     }
 
     .mdc-switch--selected .mdc-switch__handle {
-      @include token-utils.create-token-slot(width, selected-handle-width);
-      @include token-utils.create-token-slot(height, selected-handle-height);
+      @include token-utils.create-token-slot(width, selected-handle-size);
+      @include token-utils.create-token-slot(height, selected-handle-size);
     }
 
     .mdc-switch__handle:has(.mdc-switch__icons) {
-      @include token-utils.create-token-slot(width, with-icon-handle-width);
-      @include token-utils.create-token-slot(height, with-icon-handle-height);
+      @include token-utils.create-token-slot(width, with-icon-handle-size);
+      @include token-utils.create-token-slot(height, with-icon-handle-size);
     }
 
     &:active .mdc-switch:not(.mdc-switch--disabled) .mdc-switch__handle {
-      @include token-utils.create-token-slot(width, pressed-handle-width);
-      @include token-utils.create-token-slot(height, pressed-handle-height);
+      @include token-utils.create-token-slot(width, pressed-handle-size);
+      @include token-utils.create-token-slot(height, pressed-handle-size);
     }
   }
 }