refactor(material/slide-toggle): simplify structural styles (angular#29407)

Reworks the structural styles for the slide toggle to be smaller and easier to maintain.

Author: crisbeto

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

@@ -53,12 +53,16 @@ $prefix: (mdc, switch);
     unselected-hover-state-layer-opacity: 0.04,
     // Opacity of ripple when unselected and pressed.
     unselected-pressed-state-layer-opacity: 0.1,
+
+    // Unused tokens
+    handle-elevation: null,
+    handle-shadow-color: null,
+    disabled-handle-elevation: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $elevation: inspection.get-theme-color($theme, foreground, elevation);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #f5f5f5, #424242);
   $hairline: if($is-dark, #616161, #e0e0e0);
@@ -87,12 +91,6 @@ $prefix: (mdc, switch);
       disabled-unselected-track-color: $on-surface,
       // Color of slide-toggle handle's surface.
       handle-surface-color: surface,
-      // Elevation level for handle.
-      handle-elevation: 1,
-      // Color of handle's shadow
-      handle-shadow-color: if($elevation != null, $elevation, elevation.$color),
-      // Elevation level for handle when disabled.
-      disabled-handle-elevation: 0,
       // Color of icon (ex. checkmark) when selected
       selected-icon-color: $icon-color,
       // Color of handle when unselected and focused.
@@ -119,6 +117,10 @@ $prefix: (mdc, switch);
       unselected-pressed-track-color: $hairline,
       // Color of track when selected.
       unselected-track-color: $hairline,
+      // Elevation level for handle.
+      handle-elevation-shadow: elevation.get-box-shadow(1),
+      // Elevation level for handle when disabled.
+      disabled-handle-elevation-shadow: elevation.get-box-shadow(0),
     )
   );
 }

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

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -10,7 +11,17 @@ $prefix: (mdc, switch);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC switch
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('switch', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('switch', $systems, $exclude-hardcoded);
+  $elevation-tokens: (handle-elevation, disabled-handle-elevation);
+
+  @each $token in $elevation-tokens {
+    $elevation: map.get($tokens, $token);
+
+    @if ($elevation != null) {
+      $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation));
+    }
+  }
+
   $variant-tokens: (
     primary: (), // Default, no overrides needed
     secondary: (
@@ -66,5 +77,5 @@ $prefix: (mdc, switch);
     ),
   );
 
-  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+  @return token-utils.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots);
 }

src/material/core/tokens/tests/test-validate-tokens.scss

@@ -13,7 +13,6 @@
 @use '@material/list/list-theme' as mdc-list-theme;
 @use '@material/tooltip/plain-tooltip-theme' as mdc-plaintip-tooltip-theme;
 @use '@material/radio/radio-theme' as mdc-radio-theme;
-@use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
 @use '@material/snackbar/snackbar-theme' as mdc-snackbar-theme;
 @use '@material/slider/slider-theme' as mdc-slider-theme;
@@ -34,7 +33,6 @@
 @use '../m2/mdc/outlined-card' as tokens-mdc-outlined-card;
 @use '../m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
 @use '../m2/mdc/radio' as tokens-mdc-radio;
-@use '../m2/mdc/switch' as tokens-mdc-switch;
 @use '../m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
 @use '../m2/mdc/snack-bar' as tokens-mdc-snack-bar;
 @use '../m2/mdc/slider' as tokens-mdc-slider;
@@ -99,11 +97,6 @@
   $slots: tokens-mdc-radio.get-token-slots(),
   $reference: mdc-radio-theme.$light-theme
 );
-@include validate-slots(
-  $component: 'm2.mdc.switch',
-  $slots: tokens-mdc-switch.get-token-slots(),
-  $reference: mdc-switch-theme.$light-theme
-);
 @include validate-slots(
   $component: 'm2.mdc.tab-indicator',
   $slots: tokens-mdc-tab-indicator.get-token-slots(),

src/material/slide-toggle/BUILD.bazel

@@ -42,6 +42,7 @@ sass_binary(
     src = "slide-toggle.scss",
     deps = [
         "//:mdc_sass_lib",
+        "//src/cdk:sass_lib",
         "//src/material/core:core_scss_lib",
     ],
 )

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

@@ -1,4 +1,3 @@
-@use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,12 +15,12 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-switch.get-unthemable-tokens();
-      $mdc-tokens: tokens-mdc-switch.get-unthemable-tokens();
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-unthemable-tokens());
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-unthemable-tokens());
       }
     }
   }
@@ -36,13 +35,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $mat-tokens: tokens-mat-switch.get-color-tokens($theme);
     $mdc-tokens: tokens-mdc-switch.get-color-tokens($theme);
 
     // Add values for MDC slide toggles tokens
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.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(
@@ -52,19 +50,18 @@
         )};
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.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)
-          );
+          @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+            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)
-          );
+          @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
         }
       }
     }
@@ -77,15 +74,13 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
-    $mat-tokens: tokens-mat-switch.get-typography-tokens($theme);
-    $mdc-tokens: tokens-mdc-switch.get-typography-tokens($theme);
-
-    // Add values for MDC slide toggle tokens
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-typography-tokens($theme));
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-typography-tokens($theme));
       }
     }
   }
@@ -98,12 +93,12 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-switch.get-density-tokens($theme);
-      $mdc-tokens: tokens-mdc-switch.get-density-tokens($theme);
-      @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-density-tokens($theme));
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-density-tokens($theme));
       }
     }
   }
@@ -158,6 +153,6 @@
   // only the mdc-switch does.
   $mat-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix);
 
-  @include mdc-switch-theme.theme($mdc-switch-tokens);
+  @include token-utils.create-token-values(tokens-mdc-switch.$prefix, $mdc-switch-tokens);
   @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-switch-tokens);
 }