From 35c37218bdd4f1bcadec59de1d0c02ccb50bd0de Mon Sep 17 00:00:00 2001
From: Brendan O'Brien <obrien@google.com>
Date: Tue, 19 Feb 2019 13:11:18 -0800
Subject: [PATCH] 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            |  5 +----
 packages/mdc-tab/README.md    |  2 ++
 packages/mdc-tab/_mixins.scss | 13 +++++++++++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/demos/tab-bar.scss b/demos/tab-bar.scss
index af639659477..1e1122da2af 100644
--- a/demos/tab-bar.scss
+++ b/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 {
diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md
index f9e655c2ff9..3969bea82a9 100644
--- a/packages/mdc-tab/README.md
+++ b/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.
 
diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss
index 5b4c31b3d98..ae1fdd9c4a2 100644
--- a/packages/mdc-tab/_mixins.scss
+++ b/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;
 }