feat/tabs/sass color mixins

demos/tabs.scss

@@ -17,3 +17,138 @@
 @import "./common";
 @import "../packages/mdc-button/mdc-button";
 @import "../packages/mdc-tabs/mdc-tabs";
+
+fieldset {
+  padding: 0 24px 16px;
+}
+
+.demo-theme-dark fieldset {
+  background-color: #333;
+}
+
+.demo-theme-dark fieldset legend {
+  color: #f0f0f0;
+}
+
+.demo-theme-dark .demo-tabs__scroller {
+  background-color: #333;
+}
+
+.demo-theme-dark .demo-tabs__scroller .demo-title {
+  color: #f0f0f0;
+}
+
+.demo-header-toolbar {
+  z-index: 10;
+}
+
+.hero button {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
+.demo-buttons {
+  padding: 40px 40px 0 40px;
+}
+
+fieldset legend {
+  display: block;
+  padding: 64px 16px 24px;
+}
+
+.demo-tabs__scroller {
+  margin-top: 64px;
+  padding-bottom: 1px;
+}
+
+.demo-title {
+  padding: 0 40px 40px;
+}
+
+.demo-tab-bar-scroller {
+  margin-bottom: 16px;
+}
+
+.demo-note {
+  padding: 20px;
+  margin: 20px 0;
+  background-color: #f2f2f2;
+}
+
+#dynamic-demo-toolbar h1 {
+  margin-left: 64px;
+}
+
+.panels {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-top: 8px;
+}
+
+.panel {
+  display: none;
+}
+
+.panel.active {
+  display: block;
+}
+
+.dots {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 4px;
+  padding-bottom: 16px;
+}
+
+.dot {
+  margin: 0 4px;
+  border-radius: 50%;
+  border: 1px solid #64DD17;
+  width: 20px;
+  height: 20px;
+}
+
+.dot:last-child {
+  margin-right: 0;
+}
+
+.dot.active {
+  background-color: #64DD17;
+  border-color: #64DD17;
+}
+
+.my-modified-toolbar-section {
+  position: absolute;
+  right: 0;
+  bottom: -16px;
+}
+
+[dir="rtl"] .my-modified-toolbar-section {
+  right: auto;
+  left: 0;
+}
+
+.demo-tab-bar--indicator-accent {
+  &,
+  .demo-toolbar-accent & {
+    @include mdc-tab-activated-ink-color(secondary);
+
+    @include mdc-theme-dark(".mdc-tab-bar") {
+      @include mdc-tab-activated-ink-color(secondary);
+    }
+  }
+}
+
+.demo-tab-bar--custom-label {
+  @include mdc-tab-label-ink-color($material-color-indigo-500);
+}
+
+.demo-tab-bar--custom-label-activated,
+.demo-tab-bar--custom-icon-activated {
+  @include mdc-tab-activated-ink-color($material-color-indigo-500);
+}
+
+.demo-tab-bar--custom-icon {
+  @include mdc-tab-icon-ink-color($material-color-indigo-500);
+}

demos/theme/index.html

@@ -737,7 +737,7 @@ <h2 class="mdc-typography--headline demo-component-section__heading">
         <figure>
           <figcaption>Primary Color</figcaption>
 
-          <nav class="mdc-tab-bar mdc-tab-bar--icons-with-text mdc-tab-bar--indicator-primary">
+          <nav class="mdc-tab-bar mdc-tab-bar--icons-with-text demo-tab-bar--indicator-primary">
             <a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="javascript:">
               <i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
               <span class="mdc-tab__icon-text">Recents</span>
@@ -756,7 +756,7 @@ <h2 class="mdc-typography--headline demo-component-section__heading">
         <figure>
           <figcaption>Secondary Color</figcaption>
 
-          <nav class="mdc-tab-bar mdc-tab-bar--icons-with-text mdc-tab-bar--indicator-accent">
+          <nav class="mdc-tab-bar mdc-tab-bar--icons-with-text demo-tab-bar--indicator-accent">
             <a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="javascript:">
               <i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
               <span class="mdc-tab__icon-text">Recents</span>

packages/mdc-tabs/README.md

@@ -211,6 +211,38 @@ dots.addEventListener('click', function (evt) {
 })
 ```
 
+### Sass Mixins
+
+To customize the label ink color, the icon ink color or the indicator ink color you can use the following mixins.
+
+#### `mdc-tab-ink-color`
+
+Use this mixin to set the deactivated state of icon and label colors to be the same color. Do not use this if you are using the `mdc-tab-label-ink-color` or `mdc-tab-icon-ink-color` mixins.
+
+#### `mdc-tab-activated-ink-color`
+
+This mixin is to set the activated state of the icon, label and indicator color to all be the same color. Do not use this if you are using the `mdc-tab-activated-label-ink-color`, `mdc-tab-activated-icon-ink-color` or `mdc-tab-indicator-ink-color` mixins.
+
+#### `mdc-tab-label-ink-color($color)`
+
+This mixin customizes the label ink color of the tabs.
+
+#### `mdc-tab-label-activated-ink-color($color)`
+
+This mixin customizes the label ink color in the activated state.
+
+#### `mdc-tab-icon-ink-color($color)`
+
+This mixin customizes the icon ink color of the drawer.
+
+#### `mdc-tab-icon-activated-ink-color($color)`
+
+This mixin customizes the icon color in the activated state.
+
+#### `mdc-tab-indicator-ink-color($color)`
+
+This mixin customizes the indicator ink color in the activated state.
+
 ### Using the CSS-Only Component
 
 `mdc-tab-bar` ships with css for styling a tab layout according to the Material

packages/mdc-tabs/_mixins.scss

@@ -0,0 +1,65 @@
+// Copyright 2016 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import "@material/theme/mixins";
+@import "../variables";
+
+@mixin mdc-tab-ink-color($color) {
+  @include mdc-tab-label-ink-color($color);
+  @include mdc-tab-icon-ink-color($color);
+}
+
+@mixin mdc-tab-activated-ink-color($color) {
+  @include mdc-tab-label-activated-ink-color($color);
+  @include mdc-tab-icon-activated-ink-color($color);
+  @include mdc-tab-indicator-ink-color($color);
+}
+
+@mixin mdc-tab-label-ink-color($color) {
+  .mdc-tab:not(.mdc-tab--active) {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-tab-label-activated-ink-color($color) {
+  .mdc-tab--active,
+  .mdc-tab:hover {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-tab-icon-ink-color($color) {
+  .mdc-tab:not(.mdc-tab--active),
+  .mdc-tab:hover {
+    .mdc-tab__icon {
+      @include mdc-theme-prop(color, $color);
+    }
+  }
+}
+
+@mixin mdc-tab-icon-activated-ink-color($color) {
+  .mdc-tab.mdc-tab--active .mdc-tab__icon {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-tab-indicator-ink-color($color) {
+  .mdc-tab-bar__indicator {
+    @include mdc-theme-prop(background-color, $color);
+  }
+
+  &:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}

packages/mdc-tabs/_variables.scss

@@ -0,0 +1,16 @@
+// Copyright 2016 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+$mdc-tab-with-text-height: 48px;
+$mdc-tab-with-icon-and-text-height: 72px;

packages/mdc-tabs/tab-bar/mdc-tab-bar.scss

@@ -17,9 +17,14 @@
 @import "@material/animation/functions";
 @import "@material/theme/mixins";
 @import "@material/rtl/mixins";
+@import "../mixins";
+@import "../variables";
 
 // postcss-bem-linter: define tab-bar
 .mdc-tab-bar {
+  @include mdc-tab-ink-color(text-secondary-on-light);
+  @include mdc-tab-activated-ink-color(text-primary-on-light);
+
   display: table;
   position: relative;
   height: 48px;
@@ -33,8 +38,6 @@
     width: 100%;
     height: 2px;
 
-    @include mdc-theme-prop(background-color, text-primary-on-light);
-
     @include mdc-theme-dark(".mdc-tab-bar") {
       @include mdc-theme-prop(background-color, text-primary-on-dark);
     }
@@ -47,27 +50,25 @@
 
   // postcss-bem-linter: ignore
   .mdc-toolbar & {
-    .mdc-tab {
-      @include mdc-theme-prop(color, text-secondary-on-primary);
+    @include mdc-tab-label-ink-color(text-secondary-on-primary);
+    @include mdc-tab-label-activated-ink-color(text-primary-on-primary);
+    @include mdc-tab-indicator-ink-color(text-primary-on-primary);
 
+    .mdc-tab {
       @include mdc-theme-dark(".mdc-tab-bar") {
         @include mdc-theme-prop(color, text-secondary-on-dark);
       }
     }
 
     .mdc-tab--active,
     .mdc-tab:hover {
-      @include mdc-theme-prop(color, text-primary-on-primary);
-
       @include mdc-theme-dark(".mdc-tab-bar") {
         @include mdc-theme-prop(color, text-primary-on-dark);
       }
     }
 
     // postcss-bem-linter: ignore
     .mdc-tab-bar__indicator {
-      @include mdc-theme-prop(background-color, text-primary-on-primary);
-
       @include mdc-theme-dark(".mdc-tab-bar") {
         @include mdc-theme-prop(background-color, text-primary-on-dark);
       }
@@ -76,36 +77,7 @@
 }
 
 .mdc-tab-bar--icons-with-text {
-  height: 72px;
-}
-
-.mdc-tab-bar--indicator-primary,
-.mdc-toolbar .mdc-tab-bar--indicator-primary {
-  .mdc-tab-bar__indicator {
-    @include mdc-theme-prop(background-color, primary);
-
-    @include mdc-theme-dark(".mdc-tab-bar") {
-      @include mdc-theme-prop(background-color, primary);
-    }
-  }
-
-  &.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
-    @include mdc-theme-prop(background-color, primary);
-  }
+  height: $mdc-tab-with-icon-and-text-height;
 }
 
-.mdc-tab-bar--indicator-accent,
-.mdc-toolbar .mdc-tab-bar--indicator-accent {
-  .mdc-tab-bar__indicator {
-    @include mdc-theme-prop(background-color, secondary);
-
-    @include mdc-theme-dark(".mdc-tab-bar") {
-      @include mdc-theme-prop(background-color, secondary);
-    };
-  }
-
-  &.mdc-tab-bar:not(.mdc-tab-bar-upgraded) .mdc-tab::after {
-    @include mdc-theme-prop(background-color, secondary);
-  }
-}
 // postcss-bem-linter: end