refactor(material/slider): simplify structural styles

Reworks the slider styles to be smaller and easier to maintain.

Author: crisbeto

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

@@ -39,6 +39,8 @@ $prefix: (mdc, slider);
     with-tick-marks-container-size: 2px,
     // Opacity of inactive container with tick marks.
     with-tick-marks-inactive-container-opacity: 0.6,
+    // Elevation for the handle.
+    handle-elevation: elevation.get-box-shadow(1),
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -49,6 +51,7 @@ $prefix: (mdc, slider);
     focus-state-layer-opacity: null,
     hover-state-layer-opacity: null,
     pressed-state-layer-opacity: null,
+    handle-shadow-color: null,
     // MDC does not seem to use these tokens.
     hover-state-layer-color: null,
     pressed-handle-color: null,
@@ -81,12 +84,6 @@ $prefix: (mdc, slider);
       with-overlap-handle-outline-color: #fff,
       // Color of container with tick marks when disabled.
       with-tick-marks-disabled-container-color: $on-surface,
-      // (Part of the color tokens because it needs to be combined with the
-      // shadow color to generate the box-shadow.)
-      // Elevation level for handle.
-      handle-elevation: 1,
-      // Color of handle shadow.
-      handle-shadow-color: if($elevation != null, $elevation, elevation.$color),
     )
   );
 }

src/material/core/tokens/m3/mdc/_slider.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,13 @@ $prefix: (mdc, slider);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of tokens for the MDC slider
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $mdc-tokens: token-utils.get-mdc-tokens('slider', $systems, $exclude-hardcoded);
+  $tokens: token-utils.get-mdc-tokens('slider', $systems, $exclude-hardcoded);
+  $handle-elevation: map.get($tokens, 'handle-elevation');
+
+  @if ($handle-elevation != null) {
+    $tokens: map.set($tokens, 'handle-elevation', elevation.get-box-shadow($handle-elevation));
+  }
+
   $variant-tokens: (
     primary: (), // Default, no overrides needed
     secondary: (
@@ -57,5 +64,5 @@ $prefix: (mdc, slider);
     ),
   );
 
-  @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/slider/BUILD.bazel

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

src/material/slider/_slider-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -16,11 +15,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
-    // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-slider.get-unthemable-tokens();
-      @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-tokens);
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+        tokens-mat-slider.get-unthemable-tokens());
     }
   }
 }
@@ -35,40 +34,24 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-
-    $mdc-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-slider.get-color-tokens($theme),
-        handle-elevation,
-        handle-shadow-color
-    );
-
-    $mat-slider-color-tokens: tokens-mat-slider.get-color-tokens($theme);
-
-  // Add values for MDC slider tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-slider-theme.theme($mdc-color-tokens);
-    @include token-utils.create-token-values(
-      tokens-mat-slider.$prefix,
-      $mat-slider-color-tokens
-    );
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+        tokens-mat-slider.get-color-tokens($theme));
 
-    .mat-accent {
-      @include token-utils.create-token-values(
-        tokens-mat-slider.$prefix,
-        tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent),
-      );
-      @include mdc-slider-theme.theme(
-        tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
-    }
+      .mat-accent {
+        @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
+        @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent));
+      }
 
       .mat-warn {
-        @include token-utils.create-token-values(
-          tokens-mat-slider.$prefix,
-          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn),
-        );
-        @include mdc-slider-theme.theme(
-            tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn));
       }
     }
   }
@@ -82,9 +65,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    // Add values for MDC slider tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-typography-tokens($theme));
     }
   }
 }
@@ -97,9 +80,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    // Add values for MDC slider tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-density-tokens($theme));
     }
   }
 }
@@ -144,6 +127,6 @@
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...);
   $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...);
-  @include mdc-slider-theme.theme($mdc-slider-tokens);
+  @include token-utils.create-token-values(tokens-mdc-slider.$prefix, $mdc-slider-tokens);
   @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-slider-tokens);
 }