fix(button): Default to primary color (#1356)

material-components · Sep 28, 2017 · 0b808b8 · 0b808b8
1 parent b8018a9
commit 0b808b8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/demos/common.scss b/demos/common.scss
@@ -24,6 +24,9 @@
 $mdc-theme-primary: $material-color-grey-900 !default;
 $mdc-theme-secondary: $material-color-light-green-a700 !default;
 
+// Import button mixins to apply overrides for dark theme
+// TODO(kfranqueiro): Pending further design discussion around how to manage dark theme
+@import "../packages/mdc-button/mixins";
 // All demo pages have a top toolbar, and most of them use theme variables.
 // Import these *after* setting theme colors to override defaults in mdc-theme.
 @import "../packages/mdc-theme/mdc-theme";
@@ -46,6 +49,27 @@ fieldset {
   }
 }
 
+$dark-button-color: $material-color-light-green-a200;
+.mdc-button {
+  @include mdc-theme-dark {
+    @include mdc-button-ink-color($dark-button-color);
+    @include mdc-button-ripple((base-color: $dark-button-color, opacity: $mdc-unfilled-button-ripple-opacity));
+  }
+}
+
+.mdc-button--raised,
+.mdc-button--unelevated {
+  @include mdc-theme-dark(".mdc-button", true) {
+    @include mdc-button-filled-accessible($dark-button-color);
+  }
+}
+
+.mdc-button--stroked {
+  @include mdc-theme-dark(".mdc-button", true) {
+    @include mdc-button-stroke-color($dark-button-color);
+  }
+}
+
 .catalog-title {
   font-family: "Roboto Mono", monospace;
 }

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -23,23 +23,16 @@
   @include mdc-button-base_;
   @include mdc-button-corner-radius(2px);
   @include mdc-button-container-fill-color(transparent);
-  @include mdc-button-ink-color(text-primary-on-light);
-  @include mdc-button-ripple((theme-style: text-primary-on-light, opacity: $mdc-unfilled-button-ripple-opacity));
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-ink-color(text-primary-on-dark);
-    @include mdc-button-ripple((theme-style: text-primary-on-dark, opacity: $mdc-unfilled-button-ripple-opacity));
-  }
+  @include mdc-button-ink-color(primary);
+  @include mdc-button-ripple((theme-style: primary, opacity: $mdc-unfilled-button-ripple-opacity));
 }
 
 .mdc-button--raised,
 .mdc-button--unelevated {
   @include mdc-button--filled_;
-  @include mdc-button-filled-accessible(black);
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-filled-accessible(white);
-  }
+  @include mdc-button-container-fill-color(primary);
+  @include mdc-button-ink-color(text-primary-on-primary);
+  @include mdc-button-ripple((theme-style: text-primary-on-primary, opacity: $mdc-filled-button-ripple-opacity));
 }
 
 .mdc-button--raised {
@@ -49,11 +42,7 @@
 .mdc-button--stroked {
   @include mdc-button--stroked_;
   @include mdc-button-stroke-width(2px);
-  @include mdc-button-stroke-color(text-primary-on-light);
-
-  @include mdc-theme-dark(".mdc-button") {
-    @include mdc-button-stroke-color(text-primary-on-dark);
-  }
+  @include mdc-button-stroke-color(primary);
 }
 
 .mdc-button--compact {