feat(button): removed dark theme from buttons (#2038)

Author: Matty Goo

demos/button.html

@@ -30,14 +30,6 @@
         padding-bottom: 100px;
       }
 
-      .demo-wrapper.mdc-theme--dark{
-        background-color: #333;
-      }
-
-      .demo-wrapper.mdc-theme--dark fieldset legend, .demo-wrapper.mdc-theme--dark h1 {
-        color: #f0f0f0;
-      }
-
       fieldset {
         padding: 24px;
         padding-top: 0;
@@ -102,19 +94,6 @@
       </section>
 
       <section class="demo-wrapper">
-        <div class="mdc-form-field">
-          <div class="mdc-checkbox">
-            <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-dark" aria-labelledby="toggle-dark-label">
-            <div class="mdc-checkbox__background">
-              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59">
-              </svg>
-              <div class="mdc-checkbox__mixedmark"></div>
-            </div>
-          </div>
-          <label for="toggle-dark" id="toggle-dark-label">Dark Theme</label>
-        </div>
-
         <div class="mdc-form-field">
           <div class="mdc-checkbox">
             <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-disabled" aria-labelledby="toggle-disabled-label">
@@ -364,15 +343,6 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
           mdc.ripple.MDCRipple.attachTo(btn);
         }
 
-        var demoWrapper = document.querySelector('.demo-wrapper');
-        document.getElementById('toggle-dark').addEventListener('change', function() {
-          if (this.checked) {
-            demoWrapper.classList.add('mdc-theme--dark');
-          } else {
-            demoWrapper.classList.remove('mdc-theme--dark');
-          }
-        });
-
         document.getElementById('toggle-disabled').addEventListener('change', function() {
           var isDisabled = this.checked;
           [].forEach.call(document.querySelectorAll('button'), function(button) {

demos/button.scss

@@ -25,31 +25,16 @@
 .mdc-button.secondary-text-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
   @include mdc-states(secondary);
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-ink-color($mdc-theme-secondary);
-    @include mdc-states(secondary);
-  }
 }
 
 .mdc-button.secondary-filled-button {
   @include mdc-button-filled-accessible($mdc-theme-secondary);
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-filled-accessible($mdc-theme-secondary);
-  }
 }
 
 .mdc-button.secondary-stroked-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
   @include mdc-button-stroke-color($mdc-theme-secondary);
-  @include mdc-states(secondary);
 
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-ink-color($mdc-theme-secondary);
-    @include mdc-button-stroke-color($mdc-theme-secondary);
-    @include mdc-states(secondary);
-  }
 }
 
 .mdc-button.big-round-corner-button {

demos/common.scss

@@ -47,6 +47,7 @@ fieldset {
   border: 0;
 }
 
+// TODO mgoo: remove these dark theme when complete with removing other components
 .mdc-button {
   @include mdc-theme-dark {
     @include mdc-button-ink-color($dark-button-color);

packages/mdc-button/_mixins.scss

@@ -123,10 +123,6 @@
 
     cursor: default;
     pointer-events: none;
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(color, text-disabled-on-dark);
-    }
   }
 }
 
@@ -145,22 +141,13 @@
 
   &:disabled {
     @include mdc-theme-prop(border-color, text-disabled-on-light);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(border-color, text-disabled-on-dark);
-    }
   }
 }
 
 @mixin mdc-button--filled_() {
   &:disabled {
     @include mdc-theme-prop(background-color, rgba(black, .12));
     @include mdc-theme-prop(color, text-disabled-on-light);
-
-    @include mdc-theme-dark(".mdc-button") {
-      @include mdc-theme-prop(background-color, rgba(white, .12));
-      @include mdc-theme-prop(color, text-disabled-on-light);
-    }
   }
 }
 

packages/mdc-theme/_mixins.scss

@@ -109,6 +109,8 @@
 //   }
 // }
 // ```
+
+// TODO: matt goo - remove this once all dark theme is removed
 @mixin mdc-theme-dark($root-selector: null, $compound: false) {
   @if ($root-selector) {
     @at-root {