From 76f43e4df0a2f9af5f3288ebd0635fb6945180c0 Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Wed, 24 Jan 2024 16:41:18 +0000
Subject: [PATCH] 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
---
 src/material/slide-toggle/_slide-toggle-theme.scss | 10 ++++++----
 src/material/slide-toggle/slide-toggle.scss        |  5 +++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
index 3a071fa53048..0e32e75b9df4 100644
--- a/src/material/slide-toggle/_slide-toggle-theme.scss
+++ b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -39,10 +39,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 {
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
index 7f1a9bd0f037..f75c5ca50c29 100644
--- a/src/material/slide-toggle/slide-toggle.scss
+++ b/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);