feat(material-experimental/mdc-slider): add slider styles

* implement _MatSliderMixinBase
* add color input to MatSlider
* extend _MatSliderMixinBase from MatSlider
* use without-ripple mixin for slider.scss
* @include all other mdc-slider mixins except thumb-ripple-color in _slider-theme.scss
* implement primary, accent, and warn colors in _slider-theme.scss

Author: wagnermaciel

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

@@ -1,22 +1,43 @@
-// TODO: disabled until we implement the new MDC slider.
-// @import '@material/slider/mixins.import';
+@import '@material/slider/slider';
+@import '@material/slider/slider-theme';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/core/ripple/ripple';
 
 @mixin mat-mdc-slider-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
   @include mat-using-mdc-theme($config) {
-    // TODO: disabled until we implement the new MDC slider.
-    // @include mdc-slider-core-styles($query: $mat-theme-styles-query);
+    @include without-ripple($query: $mat-theme-styles-query);
 
     .mat-mdc-slider {
+      &.mat-primary, &.mat-accent, &.mat-warn {
+        @include value-indicator-color(
+          $color: #000,
+          $opacity: 0.6,
+          $query: $mat-theme-styles-query
+        );
+        @include value-indicator-text-color(
+          $color: on-primary,
+          $query: $mat-theme-styles-query
+        );
+        @include tick-mark-active-color(
+          $color-or-map: (
+            default: on-primary,
+            disabled: on-primary,
+          ),
+          $query: $mat-theme-styles-query
+        );
+      }
+
       &.mat-primary {
-        // TODO: disabled until we implement the new MDC slider.
-        // @include mdc-slider-color-accessible(primary, $mat-theme-styles-query);
+        @include custom-slider-color(primary);
+      }
+
+      &.mat-accent {
+        @include custom-slider-color(secondary);
       }
 
       &.mat-warn {
-        // TODO: disabled until we implement the new MDC slider.
-        // @include mdc-slider-color-accessible(error, $mat-theme-styles-query);
+        @include custom-slider-color(error);
       }
     }
   }
@@ -25,8 +46,7 @@
 @mixin mat-mdc-slider-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
   @include mat-using-mdc-typography($config) {
-    // TODO: disabled until we implement the new MDC slider.
-    // @include mdc-slider-core-styles($query: $mat-typography-styles-query);
+    @include without-ripple($query: $mat-typography-styles-query);
   }
 }
 
@@ -51,3 +71,38 @@
   }
 }
 
+@mixin custom-slider-color($color) {
+  @include thumb-color(
+    $color-or-map: (
+      default: $color,
+      disabled: on-surface,
+    ),
+    $query: $mat-theme-styles-query
+  );
+  @include track-active-color(
+    $color-or-map: (
+      default: $color,
+      disabled: on-surface,
+    ),
+    $query: $mat-theme-styles-query
+  );
+  @include track-inactive-color(
+    $color-or-map: (
+      default: $color,
+      disabled: on-surface,
+    ),
+    $query: $mat-theme-styles-query
+  );
+  @include tick-mark-inactive-color(
+    $color-or-map: (
+      default: $color,
+      disabled: on-primary,
+    ),
+    $query: $mat-theme-styles-query
+  );
+  @include mat-ripple-color((
+    foreground: (
+      base: mdc-theme-prop-value($color)
+    ),
+  ));
+}

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

@@ -1,5 +1,7 @@
 @import '@material/slider/slider';
-@include core-styles;
+@import '../mdc-helpers/mdc-helpers';
+
+@include without-ripple($query: $mat-base-styles-query);
 
 .mdc-slider {
   display: block;

src/material-experimental/mdc-slider/slider.ts

@@ -32,6 +32,7 @@ import {
   ViewChildren,
   ViewEncapsulation,
 } from '@angular/core';
+import {CanColorCtor, mixinColor} from '@angular/material/core';
 import {SpecificEventListener, EventType} from '@material/base';
 import {MDCSliderAdapter, MDCSliderFoundation, Thumb, TickMark} from '@material/slider';
 
@@ -196,6 +197,16 @@ export class MatSliderThumb implements AfterViewInit {
   static ngAcceptInputType_value: NumberInput;
 }
 
+// Boilerplate for applying mixins to MatSlider.
+/** @docs-private */
+class MatSliderBase {
+  constructor(public _elementRef: ElementRef<HTMLElement>) {}
+}
+const _MatSliderMixinBase:
+    CanColorCtor &
+    typeof MatSliderBase =
+        mixinColor(MatSliderBase, 'primary');
+
 /**
  * Allows users to select from a range of values by moving the slider thumb. It is similar in
  * behavior to the native `<input type="range">` element.
@@ -214,8 +225,9 @@ export class MatSliderThumb implements AfterViewInit {
   exportAs: 'matSlider',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  inputs: ['color'],
 })
-export class MatSlider implements AfterViewInit, OnDestroy {
+export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnDestroy {
   /** The slider thumb(s). */
   @ViewChildren('thumb') _thumbs: QueryList<ElementRef<HTMLElement>>;
 
@@ -314,6 +326,7 @@ export class MatSlider implements AfterViewInit, OnDestroy {
     readonly _elementRef: ElementRef<HTMLElement>,
     private readonly _platform: Platform,
     @Inject(DOCUMENT) document: any) {
+      super(_elementRef);
       this._document = document;
       this._window = this._document.defaultView || window;
     }