fix(material-experimental/button): ripple color should match state co…

…lor (#17066) (cherry picked from commit fdefae0)
angular · Sep 24, 2019 · 7e98a7e · 7e98a7e
1 parent d1ac6b0
commit 7e98a7e
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/src/material-experimental/mdc-button/_mdc-button.scss b/src/material-experimental/mdc-button/_mdc-button.scss
@@ -3,6 +3,7 @@
 @import '@material/fab/mixins';
 @import '@material/ripple/mixins';
 @import '@material/icon-button/mixins';
+@import '../../material/core/ripple/ripple';
 @import '../mdc-helpers/mdc-helpers';
 
 // Applies the disabled theme color to the text color.
@@ -23,6 +24,17 @@
   }
 }
 
+// The MDC button's ripple ink color is based on the theme color, not on the foreground base
+// which is what the ripple mixin uses. This creates a new theme that sets the color to the
+// foreground base to appropriately color the ink.
+@mixin _mat-button-ripple-ink-color($mdcColor) {
+  @include mat-ripple-theme((
+    foreground: (
+      base: mdc-theme-prop-value($mdcColor)
+    ),
+  ));
+}
+
 // Applies the disabled theme background color for raised buttons. Value is taken from
 // mixin `mdc-button--filled`.
 // TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
@@ -48,16 +60,19 @@
       &.mat-primary {
         @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query);
         @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
         @include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query);
         @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
         @include mdc-button-ink-color(error, $query: $mat-theme-styles-query);
         @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(error);
       }
     }
 
@@ -74,18 +89,21 @@
         @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query);
         @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query);
         @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
         @include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query);
         @include mdc-button-ink-color(on-secondary, $query: $mat-theme-styles-query);
         @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
         @include mdc-button-container-fill-color(error, $query: $mat-theme-styles-query);
         @include mdc-button-ink-color(on-error, $query: $mat-theme-styles-query);
         @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(on-error);
       }
 
       @include _mat-button-apply-disabled-style() {
@@ -153,18 +171,21 @@
         @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
         @include mdc-fab-container-color(primary, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(on-primary);
       }
 
       &.mat-accent {
         @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
         @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(on-secondary);
       }
 
       &.mat-warn {
         @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
         @include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
         @include mdc-fab-ink-color(on-error, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(on-error);
       }
 
       @include _mat-button-apply-disabled-style() {
@@ -197,16 +218,19 @@
       &.mat-primary {
         @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
         @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(primary);
       }
 
       &.mat-accent {
         @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
         @include mdc-icon-button-ink-color(secondary, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(secondary);
       }
 
       &.mat-warn {
         @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
         @include mdc-icon-button-ink-color(error, $query: $mat-theme-styles-query);
+        @include _mat-button-ripple-ink-color(error);
       }
 
       @include _mat-button-apply-disabled-style() {