fix(button): font color incorrect for buttons with background

Right now, the font-color for buttons with a background color (raised, fab, mini-fab) with the default `color` palette is not set properly. This is because the `currentColor` CSS property overwrites the font color from the theme for those buttons.

To fix the issue, the `currentColor` can be only used on buttons without a background color (normal and icon-buttons). While being at it, using `inherited` as value is more readable and results in the same behavior.

Fixes #4614.

Author: devversion

src/demo-app/toolbar/toolbar-demo.html

@@ -1,40 +1,58 @@
 <div class="demo-toolbar">
-
   <p>
     <mat-toolbar>
-      <mat-icon class="demo-toolbar-icon">menu</mat-icon>
-      <span>Default Toolbar</span>
+      <button mat-icon-button>
+        <mat-icon>menu</mat-icon>
+      </button>
 
+      <span>Default Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
-      <mat-icon>code</mat-icon>
+      <button mat-icon-button>
+        <mat-icon>code</mat-icon>
+      </button>
+
+      <button mat-icon-button color="warn">
+        <mat-icon>code</mat-icon>
+      </button>
     </mat-toolbar>
   </p>
 
   <p>
     <mat-toolbar color="primary">
-      <mat-icon class="demo-toolbar-icon">menu</mat-icon>
-      <span>Primary Toolbar</span>
+      <button mat-icon-button>
+        <mat-icon>menu</mat-icon>
+      </button>
 
+      <span>Primary Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
-      <mat-icon>code</mat-icon>
+      <button mat-raised-button>Text</button>
+      <button mat-raised-button color="accent">Accent</button>
     </mat-toolbar>
   </p>
 
   <p>
     <mat-toolbar color="accent">
-      <mat-icon class="demo-toolbar-icon">menu</mat-icon>
-      <span>Accent Toolbar</span>
+      <button mat-icon-button>
+        <mat-icon>menu</mat-icon>
+      </button>
 
+      <span>Accent Toolbar</span>
       <span class="demo-fill-remaining"></span>
 
-      <mat-icon>code</mat-icon>
+      <button mat-raised-button>Text</button>
+      <button mat-mini-fab color="">
+        <mat-icon>done</mat-icon>
+      </button>
+      <button mat-mini-fab color="primary">
+        <mat-icon>done</mat-icon>
+      </button>
     </mat-toolbar>
   </p>
 
   <p>
-    <mat-toolbar color="accent">
+    <mat-toolbar>
       <mat-toolbar-row>First Row</mat-toolbar-row>
       <mat-toolbar-row>Second Row</mat-toolbar-row>
     </mat-toolbar>

src/demo-app/toolbar/toolbar-demo.scss

@@ -9,4 +9,7 @@
     flex: 1 1 auto;
   }
 
+  button {
+    margin: 0 4px;
+  }
 }

src/lib/button/button.scss

@@ -52,12 +52,16 @@
 
 // The text and icon should be vertical aligned inside a button
 .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
-  color: currentColor;
   .mat-button-wrapper > * {
     vertical-align: middle;
   }
 }
 
+// Buttons that don't have a background color can inherit the color from its parent.
+.mat-button, .mat-icon-button {
+  color: inherit;
+}
+
 // The ripple container should match the bounds of the entire button.
 .mat-button-ripple, .mat-button-focus-overlay {
   @include mat-fill;