fix(material/slide-toggle): use css var for disabled label color (#28471)

* fix(material/slide-toggle): use css var for disabled label color

* Create a css var to allow teams to override the label text color of a disabled switch

* fixup! fix(material/slide-toggle): use css var for disabled label color

* fixup! fix(material/slide-toggle): use css var for disabled label color

(cherry picked from commit 76f43e4)

Author: wagnermaciel

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

@@ -31,10 +31,12 @@
       @include mdc-switch-theme.theme($mdc-switch-color-tokens);
       @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
 
-      // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-      .mdc-switch--disabled + label {
-        color: inspection.get-theme-color($theme, foreground, disabled-text);
-      }
+      // TODO(wagnermaciel): Use our token system to define this css variable.
+      --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
+        $theme,
+        foreground,
+        disabled-text
+      )};
 
       // Change the color palette related tokens to accent or warn if applicable
       &.mat-accent {

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

@@ -13,6 +13,11 @@
   // Add the MDC switch static styles.
   @include mdc-switch.static-styles-without-ripple();
 
+  // TODO(wagnermaciel): Use our custom token system to emit this css rule.
+  .mat-mdc-slide-toggle .mdc-switch--disabled + label {
+    color: var(--mdc-switch-disabled-label-text-color);
+  }
+
   .mdc-switch {
     // Add the official slots for the MDC switch
     @include mdc-switch-theme.theme-styles($mdc-switch-token-slots);