From 14b224afe5d3b5059befd9db223256db92958bda Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Thu, 21 Sep 2023 22:43:22 +0000
Subject: [PATCH] feat(material-experimental/theming): add M3 slider support

---
 src/dev-app/theme-token-api.scss              |   3 +
 .../theming/_custom-tokens.scss               |  10 ++
 .../theming/_m3-density.scss                  |   4 +-
 .../theming/_m3-tokens.scss                   |  12 +-
 src/material/core/tokens/m2/_index.scss       |   4 +
 src/material/slider/_slider-theme.scss        | 120 +++++++++++-------
 6 files changed, 108 insertions(+), 45 deletions(-)

diff --git a/src/dev-app/theme-token-api.scss b/src/dev-app/theme-token-api.scss
index 58d53fe7a095..dd6d03b45a39 100644
--- a/src/dev-app/theme-token-api.scss
+++ b/src/dev-app/theme-token-api.scss
@@ -39,6 +39,7 @@ html {
   @include mat.checkbox-theme($light-theme);
   @include mat.card-theme($light-theme);
   @include mat.toolbar-theme($light-theme);
+  @include mat.slider-theme($light-theme);
 }
 
 // Emit dark theme styles.
@@ -50,6 +51,7 @@ html {
   @include mat.checkbox-color($dark-theme);
   @include mat.card-color($dark-theme);
   @include mat.toolbar-color($dark-theme);
+  @include mat.slider-color($dark-theme);
 }
 
 // Emit density styles for each scale.
@@ -60,5 +62,6 @@ html {
     @include mat.checkbox-density($scale-theme);
     @include mat.card-density($scale-theme);
     @include mat.toolbar-density($scale-theme);
+    @include mat.slider-density($scale-theme);
   }
 }
diff --git a/src/material-experimental/theming/_custom-tokens.scss b/src/material-experimental/theming/_custom-tokens.scss
index 9c714417d0a2..dac5598bc486 100644
--- a/src/material-experimental/theming/_custom-tokens.scss
+++ b/src/material-experimental/theming/_custom-tokens.scss
@@ -43,3 +43,13 @@
       )
   );
 }
+
+/// Generates custom tokens for the mat-slider.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {Map} A set of custom tokens for the mat-slider
+@function slider($systems, $exclude-hardcoded) {
+  @return (
+    value-indicator-opacity: 1,
+  )
+}
diff --git a/src/material-experimental/theming/_m3-density.scss b/src/material-experimental/theming/_m3-density.scss
index 3fa381f0384d..e1b78bac9371 100644
--- a/src/material-experimental/theming/_m3-density.scss
+++ b/src/material-experimental/theming/_m3-density.scss
@@ -20,11 +20,13 @@ $_density-tokens: (
   ),
     (mdc, elevated-card): (),
     (mdc, outlined-card): (),
+    (mdc, slider): (),
     (mat, card): (),
     (mat, toolbar): (
     standard-height: (64px, 60px, 56px, 52px),
     mobile-height: (56px, 52px, 48px, 44px),
-  )
+  ),
+    (mat, slider): (),
 );
 
 /// Gets the value for the given density scale from the given set of density values.
diff --git a/src/material-experimental/theming/_m3-tokens.scss b/src/material-experimental/theming/_m3-tokens.scss
index abeb1f0f6a07..4505fb0f49f8 100644
--- a/src/material-experimental/theming/_m3-tokens.scss
+++ b/src/material-experimental/theming/_m3-tokens.scss
@@ -188,6 +188,11 @@
           mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
           $token-slots
       ),
+      _namespace-tokens(
+            (mdc, slider),
+          mdc-tokens.md-comp-slider-values($systems, $exclude-hardcoded),
+          $token-slots
+      ),
       // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
       // values.
       _namespace-tokens(
@@ -198,7 +203,12 @@
       _namespace-tokens(
             (mat, toolbar),
           custom-tokens.toolbar($systems, $exclude-hardcoded),
-         $token-slots,
+          $token-slots,
+      ),
+      _namespace-tokens(
+            (mat, slider),
+          custom-tokens.slider($systems, $exclude-hardcoded),
+          $token-slots
       )
   );
 
diff --git a/src/material/core/tokens/m2/_index.scss b/src/material/core/tokens/m2/_index.scss
index 7a0e9c88ddc1..dac16cba470f 100644
--- a/src/material/core/tokens/m2/_index.scss
+++ b/src/material/core/tokens/m2/_index.scss
@@ -8,6 +8,7 @@
 @use './mat/snack-bar' as tokens-mat-snack-bar;
 @use './mat/tab-header' as tokens-mat-tab-header;
 @use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
+@use './mat/slider' as tokens-mat-slider;
 @use './mdc/checkbox' as tokens-mdc-checkbox;
 @use './mdc/circular-progress' as tokens-mdc-circular-progress;
 @use './mdc/dialog' as tokens-mdc-dialog;
@@ -20,6 +21,7 @@
 @use './mdc/snack-bar' as tokens-mdc-snack-bar;
 @use './mdc/tab' as tokens-mdc-tab;
 @use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
+@use './mdc/slider' as tokens-mdc-slider;
 
 /// Gets the tokens for the given theme, m2 tokens module, and theming system.
 /// @param {Map} $theme The Angular Material theme object to generate token values from.
@@ -70,6 +72,7 @@
       _get-tokens-for-module($theme, tokens-mat-tab-header),
       _get-tokens-for-module($theme, tokens-mat-tab-header-with-background),
       _get-tokens-for-module($theme, tokens-mat-toolbar),
+      _get-tokens-for-module($theme, tokens-mat-slider),
       _get-tokens-for-module($theme, tokens-mdc-checkbox),
       _get-tokens-for-module($theme, tokens-mdc-circular-progress),
       _get-tokens-for-module($theme, tokens-mdc-dialog),
@@ -82,5 +85,6 @@
       _get-tokens-for-module($theme, tokens-mdc-snack-bar),
       _get-tokens-for-module($theme, tokens-mdc-tab),
       _get-tokens-for-module($theme, tokens-mdc-tab-indicator),
+      _get-tokens-for-module($theme, tokens-mdc-slider),
   );
 }
diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss
index 889df1e6e45b..1cd5defc2e2d 100644
--- a/src/material/slider/_slider-theme.scss
+++ b/src/material/slider/_slider-theme.scss
@@ -1,78 +1,104 @@
+@use 'sass:map';
 @use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mat/slider' as m2-mat-slider;
-@use '../core/tokens/m2/mdc/slider' as m2-mdc-slider;
+@use '../core/tokens/m2/mat/slider' as tokens-mat-slider;
+@use '../core/tokens/m2/mdc/slider' as tokens-mdc-slider;
 
 @mixin base($theme) {
-  // Add default values for tokens not related to color, typography, or density.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-slider-theme.theme(m2-mdc-slider.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @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() {
+      @include mdc-slider-theme.theme(tokens-mdc-slider.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    $is-dark: inspection.get-theme-type($theme) == dark;
 
-  $mdc-color-tokens: token-utils.resolve-elevation(
-    m2-mdc-slider.get-color-tokens($theme),
-    handle-elevation,
-    handle-shadow-color
-  );
+    $mdc-color-tokens: token-utils.resolve-elevation(
+        tokens-mdc-slider.get-color-tokens($theme),
+        handle-elevation,
+        handle-shadow-color
+    );
 
-  $mat-slider-color-tokens: m2-mat-slider.get-color-tokens($theme);
+    $mat-slider-color-tokens: tokens-mat-slider.get-color-tokens($theme);
 
-  // Add values for MDC slider tokens.
-  .mat-mdc-slider {
-    @include mdc-slider-theme.theme($mdc-color-tokens);
-    @include _slider-ripple-color($theme, primary);
-    @include token-utils.create-token-values(
-      m2-mat-slider.$prefix,
-      $mat-slider-color-tokens
-    );
+    // Add values for MDC slider tokens.
+    .mat-mdc-slider {
+      @include mdc-slider-theme.theme($mdc-color-tokens);
+      @include _slider-ripple-color($theme, primary);
+      @include token-utils.create-token-values(
+          tokens-mat-slider.$prefix,
+          $mat-slider-color-tokens
+      );
 
-    &.mat-accent {
-      @include mdc-slider-theme.theme(
-          m2-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
-      @include _slider-ripple-color($theme, accent);
-    }
+      &.mat-accent {
+        @include mdc-slider-theme.theme(
+            tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
+        @include _slider-ripple-color($theme, accent);
+      }
 
-    &.mat-warn {
-      @include mdc-slider-theme.theme(
-          m2-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
-      @include _slider-ripple-color($theme, warn);
+      &.mat-warn {
+        @include mdc-slider-theme.theme(
+            tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include _slider-ripple-color($theme, warn);
+      }
     }
   }
 }
 
 @mixin typography($theme) {
-  // Add values for MDC slider tokens.
-  .mat-mdc-slider {
-    @include mdc-slider-theme.theme(m2-mdc-slider.get-typography-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    // Add values for MDC slider tokens.
+    .mat-mdc-slider {
+      @include mdc-slider-theme.theme(tokens-mdc-slider.get-typography-tokens($theme));
+    }
   }
 }
 
 @mixin density($theme) {
-  // Add values for MDC slider tokens.
-  .mat-mdc-slider {
-    @include mdc-slider-theme.theme(m2-mdc-slider.get-density-tokens($theme));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    // Add values for MDC slider tokens.
+    .mat-mdc-slider {
+      @include mdc-slider-theme.theme(tokens-mdc-slider.get-density-tokens($theme));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
@@ -85,3 +111,11 @@
   --mat-mdc-slider-hover-ripple-color: #{rgba($color, 0.05)};
   --mat-mdc-slider-focus-ripple-color: #{rgba($color, 0.2)};
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-slider-theme.theme(map.get($tokens, tokens-mdc-slider.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mat-slider.$prefix, map.get($tokens, tokens-mat-slider.$prefix));
+  }
+}