feat(material-experimental/mdc-slider): implement slider thumb ripples (#21979)

* feat(material-experimental/mdc-slider): implement slider thumb ripples
* create MatSliderVisualThumb
* create slider-thumb.html & slider-thumb.scss

Author: wagnermaciel

src/material-experimental/mdc-slider/BUILD.bazel

@@ -38,6 +38,7 @@ sass_library(
     deps = [
         "//src/cdk/a11y:a11y_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
     ],
 )
 

src/material-experimental/mdc-slider/_slider-theme.scss

@@ -1,5 +1,6 @@
 @use '@material/slider/slider' as mdc-slider;
 @use '@material/slider/slider-theme';
+@use '@material/theme/variables' as theme-variables;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/ripple/ripple';
 @use '../../material/core/theming/theming';
@@ -106,15 +107,15 @@
     ),
     $query: mdc-helpers.$mat-theme-styles-query
   );
-  @include ripple.color((
+  @include ripple.theme((
     foreground: (
-      base: mdc-theme-prop-value($color)
+      base: theme-variables.prop-value($color)
     ),
   ));
   .mat-mdc-slider-hover-ripple {
-    background-color: rgba(mdc-theme-prop-value($color), 0.05);
+    background-color: rgba(theme-variables.prop-value($color), 0.05);
   }
   .mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
-    background-color: rgba(mdc-theme-prop-value($color), 0.2);
+    background-color: rgba(theme-variables.prop-value($color), 0.2);
   }
 }