feat(tab): Add Tab Sass mixins targeting active state colors (#4522)

Author: bwobrien

demos/tab-bar.scss

@@ -48,11 +48,8 @@
     @include mdc-tab-text-label-color($material-color-blue-600);
     @include mdc-tab-icon-color($material-color-blue-600);
     @include mdc-tab-states-color($material-color-yellow-700);
-  }
-
-  .mdc-tab--active {
-    @include mdc-tab-text-label-color($material-color-blue-900);
-    @include mdc-tab-icon-color($material-color-blue-900);
+    @include mdc-tab-active-text-label-color($material-color-blue-900);
+    @include mdc-tab-active-icon-color($material-color-blue-900);
   }
 
   .mdc-tab-indicator {

packages/mdc-tab/README.md

@@ -136,6 +136,8 @@ Mixin | Description
 `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-active-text-label-color($color)`  | Customizes the color of the active tab's text label.
+`mdc-tab-active-icon-color($color)`  | Customizes the color of the active tab's icon.
 `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

@@ -49,6 +49,18 @@
   @include mdc-tab-text-label-color($color);
 }
 
+@mixin mdc-tab-active-text-label-color($color) {
+  &.mdc-tab--active {
+    @include mdc-tab-text-label-color($color);
+  }
+}
+
+@mixin mdc-tab-active-icon-color($color) {
+  &.mdc-tab--active {
+    @include mdc-tab-icon-color($color);
+  }
+}
+
 @mixin mdc-tab-parent-positioning {
   position: relative;
 }