fix(material/slide-toggle): m3 track outline and handle opacity (#28565)

* fix(material/slide-toggle): m3 track outline

* fix(material/slide-toggle): m3 disabled handle color and opacity

* fix(material/slide-toggle): wrap hardcoded custom tokens

* fixup! fix(material/slide-toggle): m3 track outline

Author: wagnermaciel

src/material-experimental/theming/_custom-tokens.scss

@@ -1174,6 +1174,8 @@
 /// @return {Map} A set of custom tokens for the mat-slide-toggle
 @function switch($systems, $exclude-hardcoded) {
   @return (
+    disabled-selected-handle-opacity: _hardcode(1, $exclude-hardcoded),
+    disabled-unselected-handle-opacity: _hardcode(0.38, $exclude-hardcoded),
     unselected-handle-size: _hardcode(16px, $exclude-hardcoded),
     selected-handle-size: _hardcode(24px, $exclude-hardcoded),
     with-icon-handle-size: _hardcode(24px, $exclude-hardcoded),
@@ -1194,7 +1196,11 @@
     hidden-track-opacity: _hardcode(0, $exclude-hardcoded),
     visible-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
     hidden-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
-  );
+    track-outline-width: _hardcode(2px, $exclude-hardcoded),
+    track-outline-color:  map.get($systems, md-sys-color, outline),
+    disabled-unselected-track-outline-width: _hardcode(2px, $exclude-hardcoded),
+    disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface),
+  ), ();
 }
 
 /// Generates custom tokens for the mat-snack-bar.

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

@@ -8,6 +8,9 @@ $prefix: (mat, switch);
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
   @return (
+    disabled-selected-handle-opacity: 0.38,
+    disabled-unselected-handle-opacity: 0.38,
+
     unselected-handle-size: 20px,
     selected-handle-size: 20px,
     pressed-handle-size: 20px,
@@ -31,6 +34,11 @@ $prefix: (mat, switch);
     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),
+
+    track-outline-width: 1px,
+    track-outline-color: transparent,
+    disabled-unselected-track-outline-width: 1px,
+    disabled-unselected-track-outline-color: transparent,
   );
 }
 

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

@@ -18,7 +18,7 @@ $prefix: (mdc, switch);
 @function get-unthemable-tokens() {
   @return (
     // Opacity of handle when disabled.
-    disabled-handle-opacity: 0.38,
+    disabled-handle-opacity: null,
     // Opacity of icon when disabled and selected.
     disabled-selected-icon-opacity: 0.38,
     // Opacity of track when disabled.

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

@@ -212,3 +212,27 @@
     }
   }
 }
+
+@include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
+  .mdc-switch__track::after,
+  .mdc-switch__track::before {
+    @include token-utils.create-token-slot(border-width, track-outline-width);
+    @include token-utils.create-token-slot(border-color, track-outline-color);
+  }
+
+  .mdc-switch--disabled .mdc-switch__track::after,
+  .mdc-switch--disabled .mdc-switch__track::before {
+    @include token-utils.create-token-slot(border-width, disabled-unselected-track-outline-width);
+    @include token-utils.create-token-slot(border-color, disabled-unselected-track-outline-color);
+  }
+}
+
+@include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
+  .mdc-switch--disabled.mdc-switch--selected .mdc-switch__handle::after {
+    @include token-utils.create-token-slot(opacity, disabled-selected-handle-opacity);
+  }
+
+  .mdc-switch--disabled.mdc-switch--unselected .mdc-switch__handle::after {
+    @include token-utils.create-token-slot(opacity, disabled-unselected-handle-opacity);
+  }
+}