From b104e75bea1f4342e2900dad9582e3f09250370f Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Thu, 8 Nov 2018 18:05:06 +0000
Subject: [PATCH] fix(button): ripple color not correct for standard, icon and
 stroked buttons (#13235)

With https://github.com/angular/material2/commit/c3a8d0cab118cadf647954f610cb54df5cac6bf0, we already ensured that the text color is **inherited** in order to make sure that buttons without a background color are readable on various themed backgrounds (e.g. themed toolbars)

This is a follow-up that ensures that the ripple color for such transparent buttons is contrasting to the background color (e.g. in themed toolbars).

Fixes #13232
---
 src/demo-app/toolbar/toolbar-demo.html |  1 +
 src/lib/button/_button-theme.scss      | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/demo-app/toolbar/toolbar-demo.html
index 7fe869b4ea3..fb5f6a7517a 100644
--- a/src/demo-app/toolbar/toolbar-demo.html
+++ b/src/demo-app/toolbar/toolbar-demo.html
@@ -8,6 +8,7 @@
       <span>Default Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
+      <button mat-button color="accent">Text</button>
       <button mat-button>Text</button>
       <button mat-icon-button>
         <mat-icon>code</mat-icon>
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
index 2f526e5969a..aeb43c96174 100644
--- a/src/lib/button/_button-theme.scss
+++ b/src/lib/button/_button-theme.scss
@@ -2,6 +2,8 @@
 @import '../core/style/elevation';
 @import '../core/typography/typography-utils';
 
+$_mat-button-ripple-opacity: 0.1;
+
 // Applies a focus style to an mat-button element for each of the supported palettes.
 @mixin _mat-button-focus-overlay-color($theme) {
   $primary: map-get($theme, primary);
@@ -25,7 +27,7 @@
   }
 }
 
-@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.1) {
+@mixin _mat-button-ripple-color($theme, $hue, $opacity: $_mat-button-ripple-opacity) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
@@ -87,9 +89,13 @@
     @include _mat-button-theme-property($theme, 'color', default);
     @include _mat-button-focus-overlay-color($theme);
 
-    // Setup the ripple color to be based on the color palette. The opacity can be a bit weaker
-    // than for icon-buttons, because normal and stroked buttons have a focus overlay.
-    @include _mat-button-ripple-color($theme, default);
+    // Setup the ripple color to be based on the text color. This ensures that the ripples
+    // are matching with the current theme palette and are in contrast to the background color
+    // (e.g in themed toolbars).
+    .mat-ripple-element {
+      opacity: $_mat-button-ripple-opacity;
+      background-color: currentColor;
+    }
   }
 
   .mat-button-focus-overlay {
@@ -112,12 +118,6 @@
     @include _mat-button-ripple-color($theme, default-contrast);
   }
 
-  // Since icon buttons don't have a focus overlay, the ripple opacity should be the higher
-  // than the default value.
-  .mat-icon-button {
-    @include _mat-button-ripple-color($theme, default, 0.2);
-  }
-
   .mat-stroked-button, .mat-flat-button {
     @include _mat-theme-overridable-elevation(0, $theme);
   }