fix(button): ripple color not correct for standard, icon and stroked buttons (#13235)

With c3a8d0c, 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

Author: devversion

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>

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);
   }