fix(material/slide-toggle): Emit token values under current selector …

…or root (#28390) (cherry picked from commit 2d43f93)
angular · Jan 28, 2024 · 251293f · 251293f
1 parent b6a9ac8
commit 251293f
Showing 1 changed file with 26 additions and 19 deletions.
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/form-field/form-field-theme' as mdc-form-field-theme;
+@use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
@@ -12,7 +13,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
-    .mdc-switch {
+    @include sass-utils.current-selector-or-root() {
       @include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens());
     }
   }
@@ -27,26 +28,29 @@
     $mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
 
     // Add values for MDC slide toggles tokens
-    .mat-mdc-slide-toggle {
+    @include sass-utils.current-selector-or-root() {
       @include mdc-switch-theme.theme($mdc-switch-color-tokens);
-      @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
 
       // 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
-      )};
+    --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 {
-        @include mdc-switch-theme.theme(
-            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
-      }
+    .mat-mdc-slide-toggle {
+        @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-color-tokens($theme));
+
+        // Change the color palette related tokens to accent or warn if applicable
+        &.mat-accent {
+          @include mdc-switch-theme.theme(
+              tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
+        }
 
-      &.mat-warn {
-        @include mdc-switch-theme.theme(
-            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
+        &.mat-warn {
+          @include mdc-switch-theme.theme(
+              tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
+        }
       }
     }
   }
@@ -60,9 +64,12 @@
     $mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme);
 
     // Add values for MDC slide toggle tokens
-    .mat-mdc-slide-toggle {
+    @include sass-utils.current-selector-or-root() {
       @include mdc-switch-theme.theme($mdc-switch-typography-tokens);
-      @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
+
+      .mat-mdc-slide-toggle {
+        @include mdc-form-field-theme.theme(tokens-mdc-form-field.get-typography-tokens($theme));
+      }
     }
   }
 }
@@ -72,7 +79,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    .mat-mdc-slide-toggle {
+    @include sass-utils.current-selector-or-root() {
       @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
     }
   }