fix(button): ripple color for raised buttons

* Fixes the incorrect ripple color for raised buttons. Currently the ripple color is always based on black. This is incorrect on palettes like Indigo.

Fixes #2901

Author: devversion

src/lib/button/_button-theme.scss

@@ -23,21 +23,21 @@
   }
 }
 
-@mixin _mat-button-ripple-color($theme) {
+@mixin _mat-button-ripple-color($theme, $hue: default) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
 
   &.mat-primary .mat-ripple-element {
-    background-color: mat-color($primary, 0.26);
+    background-color: mat-color($primary, $hue, 0.26);
   }
 
   &.mat-accent .mat-ripple-element {
-    background-color: mat-color($accent, 0.26);
+    background-color: mat-color($accent, $hue, 0.26);
   }
 
   &.mat-warn .mat-ripple-element {
-    background-color: mat-color($warn, 0.26);
+    background-color: mat-color($warn, $hue, 0.26);
   }
 }
 
@@ -97,11 +97,19 @@
 
     @include _mat-button-theme-color($theme, 'color', default-contrast);
     @include _mat-button-theme-color($theme, 'background-color');
+    @include _mat-button-ripple-color($theme, default-contrast);
   }
 
+  // TODO(devversion): The color class accent should be just set from TS code. No need for this.
   .mat-fab, .mat-mini-fab {
     background-color: mat-color($accent);
     color: mat-color($accent, default-contrast);
+
+    // Button fab elements are using the accent palette by default. The color classes won't
+    // be set on the element. To have a proper ripple color for those, we set the ripple color.
+    .mat-ripple-element {
+      background-color: mat-color($accent, default-contrast, 0.26);
+    }
   }
 }
 

src/lib/core/theming/_theming.scss

@@ -44,15 +44,15 @@
 // @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
 //     be treated as opacity.
 // @param $opacity The alpha channel value for the color.
-@function mat-color($palette, $hue: default, $opacity: 1) {
+@function mat-color($palette, $hue: default, $opacity: null) {
   // If hueKey is a number between zero and one, then it actually contains an
   // opacity value, so recall this function with the default hue and that given opacity.
   @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
     @return mat-color($palette, default, $hue);
   }
 
   $color: map-get($palette, $hue);
-  $opacity: if(opacity($color) < 1, opacity($color), $opacity);
+  $opacity: if($opacity == null, opacity($color), $opacity);
 
   @return rgba($color, $opacity);
 }