feat(tab): Implement a base states color mixin for Tab (#4421)

* Add a base states color mixin
* Add an ink color mixin for base states, text label, and icon color

demos/tab-bar.scss

@@ -47,10 +47,7 @@
     @include mdc-tab-fixed-width(120px);
     @include mdc-tab-text-label-color($material-color-blue-600);
     @include mdc-tab-icon-color($material-color-blue-600);
-  }
-
-  .mdc-tab__ripple {
-    @include mdc-states($material-color-yellow-700);
+    @include mdc-tab-states-color($material-color-yellow-700);
   }
 
   .mdc-tab--active {

packages/mdc-tab/README.md

@@ -134,6 +134,8 @@ Mixin | Description
 --- | ---
 `mdc-tab-text-label-color($color)` | Customizes the color of the tab text label.
 `mdc-tab-icon-color($color)` | Customizes the color of the tab icon.
+`mdc-tab-states-color($color)`| Customizes the base states color, which affects hover/focus states and the press ripple.
+`mdc-tab-ink-color($color)` | Customizes the text label, icon, and base states color.
 `mdc-tab-parent-positioning` | Sets the positioning of the MDCTab's parent element so that `MDCTab.computeDimensions()` reports the same values in all browsers.
 `mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.
 

packages/mdc-tab/_mixins.scss

@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 //
 
+@import "@material/ripple/mixins";
 @import "@material/theme/mixins";
 
 // Public mixins
@@ -36,6 +37,18 @@
   }
 }
 
+@mixin mdc-tab-states-color($color) {
+  .mdc-tab__ripple {
+    @include mdc-states($color);
+  }
+}
+
+@mixin mdc-tab-ink-color($color) {
+  @include mdc-tab-icon-color($color);
+  @include mdc-tab-states-color($color);
+  @include mdc-tab-text-label-color($color);
+}
+
 @mixin mdc-tab-parent-positioning {
   position: relative;
 }