fix(slider): make slider work with dark themes (#4489)

Author: mmalerba

src/lib/core/theming/_palette.scss

@@ -679,30 +679,34 @@ $mat-dark-theme-background: (
 
 // Foreground palette for light themes.
 $mat-light-theme-foreground: (
-  base:            black,
-  divider:         $black-12-opacity,
-  dividers:        $black-12-opacity,
-  disabled:        rgba(black, 0.38),
-  disabled-button: rgba(black, 0.38),
-  disabled-text:   rgba(black, 0.38),
-  hint-text:       rgba(black, 0.38),
-  secondary-text:  rgba(black, 0.54),
-  icon:            rgba(black, 0.54),
-  icons:           rgba(black, 0.54),
-  text:            rgba(black, 0.87)
+  base:              black,
+  divider:           $black-12-opacity,
+  dividers:          $black-12-opacity,
+  disabled:          rgba(black, 0.38),
+  disabled-button:   rgba(black, 0.38),
+  disabled-text:     rgba(black, 0.38),
+  hint-text:         rgba(black, 0.38),
+  secondary-text:    rgba(black, 0.54),
+  icon:              rgba(black, 0.54),
+  icons:             rgba(black, 0.54),
+  text:              rgba(black, 0.87),
+  slider-off:        rgba(black, 0.26),
+  slider-off-active: rgba(black, 0.38),
 );
 
 // Foreground palette for dark themes.
 $mat-dark-theme-foreground: (
-  base:            white,
-  divider:         $white-12-opacity,
-  dividers:        $white-12-opacity,
-  disabled:        rgba(white, 0.3),
-  disabled-button: rgba(white, 0.3),
-  disabled-text:   rgba(white, 0.3),
-  hint-text:       rgba(white, 0.3),
-  secondary-text:  rgba(white, 0.7),
-  icon:            white,
-  icons:           white,
-  text:            white
+  base:              white,
+  divider:           $white-12-opacity,
+  dividers:          $white-12-opacity,
+  disabled:          rgba(white, 0.3),
+  disabled-button:   rgba(white, 0.3),
+  disabled-text:     rgba(white, 0.3),
+  hint-text:         rgba(white, 0.3),
+  secondary-text:    rgba(white, 0.7),
+  icon:              white,
+  icons:             white,
+  text:              white,
+  slider-off:        rgba(white, 0.3),
+  slider-off-active: rgba(white, 0.3),
 );

src/lib/slider/_slider-theme.scss

@@ -17,14 +17,18 @@
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
-
-  $mat-slider-off-color: rgba(black, 0.26);
-  $mat-slider-off-focused-color: rgba(black, 0.38);
-  $mat-slider-disabled-color: rgba(black, 0.26);
-  $mat-slider-labeled-min-value-thumb-color: black;
-  $mat-slider-labeled-min-value-thumb-label-color: rgba(black, 0.26);
-  $mat-slider-focus-ring-color: rgba(mat-color($accent), 0.2);
-  $mat-slider-focus-ring-min-value-color: rgba(black, 0.12);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  $mat-slider-off-color: mat-color($foreground, slider-off);
+  $mat-slider-off-focused-color: mat-color($foreground, slider-off-active);
+  $mat-slider-disabled-color: mat-color($foreground, slider-off);
+  $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, base);
+  $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);
+  $mat-slider-focus-ring-color: mat-color($accent, default, 0.2);
+  $mat-slider-focus-ring-min-value-color: mat-color($foreground, base, 0.12);
+  $mat-slider-tick-color: mat-color($foreground, base, 0.7);
+  $mat-slider-tick-size: 2px;
 
   .mat-slider-track-background {
     background-color: $mat-slider-off-color;
@@ -104,4 +108,22 @@
       }
     }
   }
+
+  .mat-slider-has-ticks .mat-slider-wrapper::after {
+    border-color: $mat-slider-tick-color;
+  }
+
+  .mat-slider-horizontal .mat-slider-ticks {
+    background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,
+        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
+    // Firefox doesn't draw the gradient correctly with 'to right'
+    // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
+    background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,
+        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
+  }
+
+  .mat-slider-vertical .mat-slider-ticks {
+    background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,
+        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
+  }
 }

src/lib/slider/slider.scss

@@ -22,7 +22,6 @@ $mat-slider-thumb-arrow-gap: 12px !default;
 
 $mat-slider-thumb-label-size: 28px !default;
 
-$mat-slider-tick-color: rgba(0, 0, 0, 0.6) !default;
 $mat-slider-tick-size: 2px !default;
 
 $mat-slider-focus-ring-size: 30px !default;
@@ -70,6 +69,8 @@ $mat-slider-focus-ring-size: 30px !default;
 }
 
 .mat-slider-ticks {
+  background-repeat: repeat;
+  background-clip: content-box;
   box-sizing: border-box;
   opacity: 0;
   transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
@@ -168,7 +169,8 @@ $mat-slider-focus-ring-size: 30px !default;
   .mat-slider-wrapper::after {
     content: '';
     position: absolute;
-    border: 0 solid $mat-slider-tick-color;
+    border-width: 0;
+    border-style: solid;
     opacity: 0;
     transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
   }
@@ -298,13 +300,6 @@ $mat-slider-focus-ring-size: 30px !default;
   }
 
   .mat-slider-ticks {
-    background: repeating-linear-gradient(to right, $mat-slider-tick-color,
-        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat;
-    // Firefox doesn't draw the gradient correctly with 'to right'
-    // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
-    background: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,
-        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat;
-    background-clip: content-box;
     height: $mat-slider-track-thickness;
     width: 100%;
   }
@@ -386,9 +381,6 @@ $mat-slider-focus-ring-size: 30px !default;
   }
 
   .mat-slider-ticks {
-    background: repeating-linear-gradient(to bottom, $mat-slider-tick-color,
-        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent) repeat;
-    background-clip: content-box;
     width: $mat-slider-track-thickness;
     height: 100%;
   }