chore(slider): remove dark theme (#2099)

BREAKING CHANGE: removed `$mdc-slider-dark-theme-assumed-bg-color` from
slider variables.

demos/slider.html

@@ -34,20 +34,11 @@
         --mdc-slider-bg-color-behind-component: #f2f2f2;
       }
 
-      .mdc-theme--dark {
-        background-color: #333;
-      }
-
       .custom-bg {
         background-color: #eee;
         --mdc-slider-bg-color-behind-component: #eee;
       }
 
-      .mdc-theme--dark.custom-bg {
-        background-color: #102027;
-        --mdc-slider-bg-color-behind-component: #102027;
-      }
-
       .slider-example {
         margin-bottom: 48px;
       }
@@ -235,10 +226,6 @@ <h2>Custom Colored Discrete Slider with Tick Marks</h2>
             <input type="checkbox" name="disabled">
             Disabled
           </label>
-          <label class="demo-param-field">
-            <input type="checkbox" name="dark-theme">
-            Dark Theme
-          </label>
           <label class="demo-param-field">
             <input type="checkbox" name="use-custom-color">
             Use Custom BG Color
@@ -264,7 +251,6 @@ <h2>Custom Colored Discrete Slider with Tick Marks</h2>
         var minInput = demoRoot.querySelector('[name="min"]');
         var maxInput = demoRoot.querySelector('[name="max"]');
         var step = demoRoot.querySelector('[name="step"]');
-        var darkTheme = demoRoot.querySelector('[name="dark-theme"]');
         var disabled = demoRoot.querySelector('[name="disabled"]');
         var useCustomColor = demoRoot.querySelector('[name="use-custom-color"]');
         var rtl = demoRoot.querySelector('[name="rtl"]');
@@ -346,12 +332,6 @@ <h2>Custom Colored Discrete Slider with Tick Marks</h2>
           customDiscreteWMarkerSlider.step = stepValue;
         });
 
-        darkTheme.addEventListener('change', function() {
-          [].forEach.call(demoRoot.querySelectorAll('.example-slider-wrapper'), function(example) {
-            example.classList[ darkTheme.checked ? 'add' : 'remove']('mdc-theme--dark');
-          });
-        });
-
         disabled.addEventListener('change', function() {
           continuousSlider.disabled = disabled.checked;
           discreteSlider.disabled = disabled.checked;

demos/slider.scss

@@ -25,8 +25,4 @@
   @include mdc-slider-thumb-color($material-color-orange-500);
   @include mdc-slider-focus-halo-color($material-color-yellow-900);
   @include mdc-slider-value-pin-fill-color-accessible($material-color-pink-500);
-
-  @include mdc-theme-dark {
-    @include mdc-slider-rail-tick-mark-color(black);
-  }
 }

packages/mdc-slider/README.md

@@ -275,8 +275,7 @@ use to build a custom MDCSlider component for their framework.
 
 ### Theming
 
-By default, all thematic elements of sliders make use of the **secondary theme color**, including when the
-component is used within a dark mode context.
+By default, all thematic elements of sliders make use of the **secondary theme color**.
 
 #### Sass Mixins
 
@@ -318,17 +317,6 @@ the color specified:
 }
 ```
 
-If you need to accomplish this in a browser which does not support custom properties (IE11 and
-older versions of Edge), you can override the Sass variables `$mdc-slider-default-assumed-bg-color`.
-
-```scss
-$mdc-slider-default-assumed-bg-color: #fafafa;
-
-@import "@material/slider/mdc-slider";
-```
-
-If you're using the `.mdc-theme--dark` classes, you'll want to override `$mdc-slider-dark-theme-assumed-bg-color` instead.
-
 ### Tips/Tricks
 
 #### Preventing [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content)

packages/mdc-slider/_variables.scss

@@ -14,7 +14,4 @@
 // limitations under the License.
 //
 
-$mdc-slider-default-assumed-bg-color: white !default;
-$mdc-slider-dark-theme-assumed-bg-color: #333 !default;
-
 $mdc-slider-baseline-rail-opacity: .26;

packages/mdc-slider/mdc-slider.scss

@@ -14,7 +14,6 @@
 // limitations under the License.
 //
 
-@import "@material/theme/mixins";
 @import "@material/typography/mixins";
 @import "@material/rtl/mixins";
 @import "./keyframes";
@@ -27,24 +26,15 @@
   @include mdc-slider-color-accessible(secondary);
 
   &--disabled {
-    $light-color: #9a9a9a;
-    $dark-color: #787878;
+    $disabled-color: #9a9a9a;
 
-    @include mdc-slider-highlight-color_($light-color);
-    @include mdc-slider-rail-color_($light-color);
-    @include mdc-slider-rail-tick-mark-color_($light-color);
-    @include mdc-slider-thumb-color_($light-color);
-    @include mdc-slider-thumb-stroke-cutout_($mdc-slider-default-assumed-bg-color);
+    @include mdc-slider-highlight-color_($disabled-color);
+    @include mdc-slider-rail-color_($disabled-color);
+    @include mdc-slider-rail-tick-mark-color_($disabled-color);
+    @include mdc-slider-thumb-color_($disabled-color);
+    @include mdc-slider-thumb-stroke-cutout_(white);
 
     cursor: auto;
-
-    @include mdc-theme-dark(".mdc-slider", true) {
-      @include mdc-slider-highlight-color_($dark-color);
-      @include mdc-slider-rail-color_($dark-color);
-      @include mdc-slider-rail-tick-mark-color_($dark-color);
-      @include mdc-slider-thumb-color_($dark-color);
-      @include mdc-slider-thumb-stroke-cutout_($mdc-slider-dark-theme-assumed-bg-color);
-    }
   }
 
   position: relative;