feat(select): removed dark theme (#2098)

Author: Matty Goo

demos/select.html

@@ -26,10 +26,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <style>
-      .mdc-theme--dark {
-        background-color: #303030;
-      }
-
       #demo-wrapper {
         padding: 4px;
         padding-left: 0;
@@ -125,10 +121,6 @@ <h2 class="mdc-typography--title">Fully-Featured Component</h2>
           </div>
         </section>
         <p>Currently selected: <span id="box-currently-selected">(none)</span></p>
-        <div>
-          <input type="checkbox" id="dark-theme">
-          <label for="dark-theme">Dark Theme</label>
-        </div>
         <div>
           <input type="checkbox" id="rtl">
           <label for="rtl">RTL</label>
@@ -187,7 +179,6 @@ <h2 class="mdc-typography--title">CSS Only</h2>
         });
 
         var boxDemoWrapper = document.getElementById('box-demo-wrapper');
-        var darkThemeCb = document.getElementById('dark-theme');
         var rtlCb = document.getElementById('rtl');
         var alternateColorsCb = document.getElementById('alternate-colors');
         var disabledCb = document.getElementById('disabled');
@@ -197,9 +188,6 @@ <h2 class="mdc-typography--title">CSS Only</h2>
         var cssAlternateColors = document.getElementById('css-alternate-colors');
         var cssDisabled = document.getElementById('css-disabled');
 
-        darkThemeCb.addEventListener('change', function() {
-          boxDemoWrapper.classList[darkThemeCb.checked ? 'add' : 'remove']('mdc-theme--dark');
-        });
         rtlCb.addEventListener('change', function() {
           if (rtlCb.checked) {
             boxDemoWrapper.setAttribute('dir', 'rtl');

packages/mdc-select/README.md

@@ -239,13 +239,13 @@ It is advised that dividers also set `role="presentation"` to disable selection
 
 ### Sass Mixins
 
-To customize the colors of any part of the select, use the following mixins. We recommend you use 
-these mixins within CSS selectors like `.foo-select` to apply styling. 
+To customize the colors of any part of the select, use the following mixins. We recommend you use
+these mixins within CSS selectors like `.foo-select` to apply styling.
 
 Mixin | Description
 --- | ---
 `mdc-select-ink-color($color)` | Customizes the color of the selected item displayed in the select. On the css version, this also customizes the color of the label.
-`mdc-select-container-fill-color($color)` | Customizes the background color of the select. 
+`mdc-select-container-fill-color($color)` | Customizes the background color of the select.
 `mdc-select-label-color($color)` | Customizes the label color of the select in the unfocused state. This mixin is only used for the JS version of the select.
 `mdc-select-focused-label-color($color, $opacity: 0.87)` | Customizes the label color of the select when focused. Changing opacity for the label when floating is optional.
 `mdc-select-bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
@@ -392,8 +392,7 @@ Enables/disables the select.
 
 ## Theming
 
-The select's bottom border is set to the current theme's primary color when focused. The select is
-fully dark theme aware.
+The select's bottom border is set to the current theme's primary color when focused.
 
 ## Tips / Tricks
 

packages/mdc-select/mdc-select.scss

@@ -18,7 +18,6 @@
 @import "@material/animation/functions";
 @import "@material/animation/variables";
 @import "@material/typography/mixins";
-@import "@material/theme/mixins";
 @import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
@@ -74,10 +73,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
     @include mdc-ripple-radius;
     @include mdc-states;
 
-    @include mdc-theme-dark(".mdc-select") {
-      @include mdc-states(white);
-    }
-
     &::-ms-expand {
       display: none;
     }
@@ -166,10 +161,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
 .mdc-select--open {
   .mdc-select__surface::before {
     opacity: map-get($mdc-ripple-dark-ink-opacities, "focus");
-
-    @include mdc-theme-dark(".mdc-select") {
-      opacity: map-get($mdc-ripple-light-ink-opacities, "focus");
-    }
   }
 
   .mdc-select__selected-text {
@@ -206,17 +197,6 @@ $mdc-select-menu-transition: transform 180ms $mdc-animation-standard-curve-timin
   }
 }
 
-@each $sel in ("mdc-select--disabled", "mdc-select[disabled]") {
-  .#{$sel} {
-    @include mdc-theme-dark(".mdc-select", true) {
-      @include mdc-theme-prop(color, text-disabled-on-dark);
-      @include mdc-select-dd-arrow-svg-bg_(ffffff, .38);
-
-      border-bottom: 1px dotted rgba(white, .38);
-    }
-  }
-}
-
 // postcss-bem-linter: end
 
 .mdc-select-scroll-lock {