fix(material/slide-toggle): use token system for label text (#31366)

Author: andrewseguin

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

@@ -69,6 +69,8 @@
   @return map.merge(
       private-get-color-palette-color-tokens($theme, primary),
       (
+        slide-toggle-disabled-label-text-color:
+            m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
         slide-toggle-disabled-handle-elevation-shadow: elevation.get-box-shadow(0),
         slide-toggle-disabled-selected-handle-color: map.get($system, on-surface),
         slide-toggle-disabled-selected-track-color: map.get($system, on-surface),

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

@@ -60,6 +60,7 @@
       slide-toggle-handle-height: null,
     ),
     color: (
+      slide-toggle-disabled-label-text-color: map.get($system, on-surface),
       slide-toggle-disabled-selected-handle-color: map.get($system, surface),
       slide-toggle-disabled-selected-icon-color: map.get($system, on-surface),
       slide-toggle-disabled-selected-track-color: map.get($system, on-surface),

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

@@ -6,7 +6,6 @@
 @use './m2-slide-toggle';
 @use './m3-slide-toggle';
 @use '../core/tokens/m2-utils';
-@use '../core/tokens/m3-utils';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-slide-toggle.
@@ -35,20 +34,7 @@
     $mat-tokens: m2-slide-toggle.get-color-tokens($theme);
     $system: m2-utils.get-system($theme);
 
-    @include sass-utils.current-selector-or-root() {
-      // TODO(andrewjs): Remove this once all tokens are migrated to
-      // mat internally.
-      --mdc-slide-toggle-disabled-label-text-color: #{
-          m3-utils.color-with-opacity(map.get($system, on-surface), 38%)};
-      // TODO(wagnermaciel): Use our token system to define this css variable.
-      --mat-slide-toggle-disabled-label-text-color: #{
-          m3-utils.color-with-opacity(map.get($system, on-surface), 38%)};
-    }
-
     .mat-mdc-slide-toggle {
-      // TODO(wagnermaciel): Use our token system to define this css variable.
-      --mat-slide-toggle-label-text-color: #{map.get($system, on-surface)};
-
       // Change the color palette related tokens to accent or warn if applicable
       &.mat-accent {
         $tokens: m2-slide-toggle.private-get-color-palette-color-tokens($theme, secondary);

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

@@ -538,8 +538,7 @@ $fallbacks: m3-slide-toggle.get-tokens();
     cursor: pointer;
   }
 
-  // TODO(wagnermaciel): Use our custom token system to emit this css rule.
   .mdc-switch--disabled + label {
-    color: var(--mat-slide-toggle-disabled-label-text-color);
+    color: token-utils.slot(slide-toggle-disabled-label-text-color, $fallbacks);
   }
 }