feat(button): Use mdc-states mixin for button styles (#1668)

BREAKING CHANGE: The $mdc-*-button-ripple-opacity variables have been removed, as these values are now available via the state opacity maps in mdc-ripple.
material-components · Dec 5, 2017 · 55fbba9 · 55fbba9
1 parent dab612c
commit 55fbba9
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 19 deletions.
diff --git a/demos/button.scss b/demos/button.scss
@@ -24,11 +24,11 @@
 
 .mdc-button.secondary-text-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
-  @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity);
+  @include mdc-states(secondary);
 
   @include mdc-theme-dark(".mdc-button") {
     @include mdc-button-ink-color($mdc-theme-secondary);
-    @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity);
+    @include mdc-states(secondary);
   }
 }
 
@@ -43,12 +43,12 @@
 .mdc-button.secondary-stroked-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
   @include mdc-button-stroke-color($mdc-theme-secondary);
-  @include mdc-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity);
+  @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-ripple-color(secondary, $mdc-unfilled-button-ripple-opacity);
+    @include mdc-states(secondary);
   }
 }
 

diff --git a/demos/common.scss b/demos/common.scss
@@ -51,7 +51,7 @@ $dark-button-color: $material-color-light-green-a200;
 .mdc-button {
   @include mdc-theme-dark {
     @include mdc-button-ink-color($dark-button-color);
-    @include mdc-ripple-color($dark-button-color, $mdc-unfilled-button-ripple-opacity);
+    @include mdc-states($dark-button-color);
   }
 }
 

diff --git a/demos/theme/index.scss b/demos/theme/index.scss
@@ -135,11 +135,11 @@ figure {
 
 .mdc-button.secondary-text-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
-  @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity);
+  @include mdc-states($mdc-theme-secondary);
 
   @include mdc-theme-dark(".mdc-button") {
     @include mdc-button-ink-color($mdc-theme-secondary);
-    @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity);
+    @include mdc-states($mdc-theme-secondary);
   }
 }
 
@@ -154,12 +154,12 @@ figure {
 .mdc-button.secondary-stroked-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
   @include mdc-button-stroke-color($mdc-theme-secondary);
-  @include mdc-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity);
+  @include mdc-states($mdc-theme-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-ripple-color($mdc-theme-secondary, $mdc-unfilled-button-ripple-opacity);
+    @include mdc-states($mdc-theme-secondary);
   }
 }
 
@@ -400,15 +400,15 @@ figure {
 }
 
 .demo-ripple-surface--primary {
-  @include mdc-ripple-color(primary, $mdc-ripple-pressed-dark-ink-opacity);
+  @include mdc-states(primary);
 }
 
 .demo-ripple-surface--secondary {
-  @include mdc-ripple-color(secondary, $mdc-ripple-pressed-dark-ink-opacity);
+  @include mdc-states(secondary);
 }
 
 .demo-ripple-surface--custom {
-  @include mdc-ripple-color($demo-custom-color, $mdc-ripple-pressed-dark-ink-opacity);
+  @include mdc-states($demo-custom-color);
 }
 
 .mdc-ripple-surface[data-mdc-ripple-is-unbounded] {

diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -28,10 +28,10 @@
 
   @if ($fill-tone == "dark") {
     @include mdc-button-ink-color(text-primary-on-dark);
-    @include mdc-ripple-color(text-primary-on-dark, $mdc-filled-button-ripple-opacity);
+    @include mdc-states(text-primary-on-dark);
   } @else {
     @include mdc-button-ink-color(text-primary-on-light);
-    @include mdc-ripple-color(text-primary-on-light, $mdc-filled-button-ripple-opacity);
+    @include mdc-states(text-primary-on-light);
   }
 }
 

diff --git a/packages/mdc-button/_variables.scss b/packages/mdc-button/_variables.scss
@@ -18,6 +18,3 @@ $mdc-button-height: 36px;
 $mdc-button-horizontal-padding: 16px;
 $mdc-dense-button-height: 32px;
 $mdc-compact-button-horizontal-padding: 8px;
-
-$mdc-unfilled-button-ripple-opacity: .16;
-$mdc-filled-button-ripple-opacity: .32;
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -25,15 +25,15 @@
   @include mdc-button-corner-radius(2px);
   @include mdc-button-container-fill-color(transparent);
   @include mdc-button-ink-color(primary);
-  @include mdc-ripple-color(primary, $mdc-unfilled-button-ripple-opacity);
+  @include mdc-states(primary);
 }
 
 .mdc-button--raised,
 .mdc-button--unelevated {
   @include mdc-button--filled_;
   @include mdc-button-container-fill-color(primary);
   @include mdc-button-ink-color(text-primary-on-primary);
-  @include mdc-ripple-color(text-primary-on-primary, $mdc-filled-button-ripple-opacity);
+  @include mdc-states(text-primary-on-primary);
 }
 
 .mdc-button--raised {