feat(text-field): Move color for default text-field to mixins.

demos/text-field.html

@@ -114,6 +114,14 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
           <input id="required" type="checkbox">
           <label for="required">Required</label>
         </div>
+        <div>
+          <input id="alternate-colors" type="checkbox">
+          <label for="alternate-colors">Alternate Colors</label>
+        </div>
+        <div>
+          <input id="alternate-error-colors" type="checkbox">
+          <label for="alternate-error-colors">Alternate Error Colors</label>
+        </div>
         <div>
           <input id="use-helper-text" type="checkbox">
           <label for="use-helper-text">Use Helper Text</label>
@@ -579,6 +587,14 @@ <h2>Full-Width Text Field and Textarea</h2>
           var target = evt.target;
           tfRoot.querySelector('.mdc-text-field__input').required = target.checked;
         });
+        document.getElementById('alternate-colors').addEventListener('change', function (evt) {
+          var target = evt.target;
+          tfRoot.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+        });
+        document.getElementById('alternate-error-colors').addEventListener('change', function (evt) {
+          var target = evt.target;
+          tfRoot.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+        });
         document.getElementById('use-helper-text').addEventListener('change', function(evt) {
           var target = evt.target;
           tf.helperTextElement = target.checked ? helperText : null;

demos/text-field.scss

@@ -17,3 +17,25 @@
 @import "./common";
 @import "../packages/mdc-form-field/mdc-form-field";
 @import "../packages/mdc-textfield/mdc-text-field";
+
+// stylelint-disable selector-class-pattern
+.demo-text-field-custom-colors:not(.mdc-text-field--invalid) {
+  @include mdc-text-field-bottom-line-color(rgba(blue, .38));
+  @include mdc-text-field-hover-bottom-line-color(rgba(blue, .6));
+  @include mdc-text-field-focused-bottom-line-color(blue);
+  @include mdc-text-field-ink-color(black);
+  @include mdc-text-field-label-color(rgba(blue, .5));
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(blue, .87));
+  }
+}
+
+.demo-text-field-custom-error-colors.mdc-text-field--invalid {
+  @include mdc-text-field-bottom-line-color(rgba(orange, .38));
+  @include mdc-text-field-hover-bottom-line-color(rgba(orange, .6));
+  @include mdc-text-field-focused-bottom-line-color(orange);
+  @include mdc-text-field-ink-color(orange);
+  @include mdc-text-field-label-color(rgba(orange, .87));
+}
+// stylelint-enable selector-class-pattern

packages/mdc-textfield/README.md

@@ -194,10 +194,23 @@ CSS Class | Description
 
 ### Sass Mixins
 
+To customize the colors of any part of the text-field, use the following mixins. We recommend you apply 
+these mixins within CSS selectors like `.foo-text-field:not(.mdc-text-field--focused)` to select your unfocused text fields, 
+and `.foo-tab.mdc-text-field--focused` to select your focused text-fields. To change the invalid state of your text fields, 
+apply these mixins with CSS selectors such as `.foo-text-field.mdc-text-field--invalid`.
+
+> _NOTE_: the `mdc-text-field-focused-bottom-line-color` mixin should be applied from the not focused class `foo-text-field:not(.mdc-tab--focused)`). 
+
 Mixin | Description
 --- | ---
 `mdc-text-field-box-corner-radius($radius)` | Customizes the border radius for a box text field
 `mdc-text-field-textarea-corner-radius($radius)` | Customizes the border radius for a `<textarea>` text field
+`mdc-text-field-bottom-line-color($color)` | Customizes the color of the default bottom line of the text-field.
+`mdc-text-field-hover-bottom-line-color($color)` | Customizes the hover color of the bottom line of the text-field. 
+`mdc-text-field-focused-bottom-line-color($color)` | Customizes the bottom-line ripple color when the text-field is focused.  
+`mdc-text-field-ink-color($color)` | Customizes the text entered into the text-field. 
+`mdc-text-field-label-color($color)` | Customizes the label color of the text-field. 
+}
 
 ### `MDCTextField`
 

packages/mdc-textfield/_mixins.scss

@@ -14,6 +14,9 @@
 // limitations under the License.
 //
 
+@import "bottom-line/mixins";
+@import "label/mixins";
+
 @mixin mdc-text-field-outlined-corner-radius($radius) {
   border-radius: $radius;
 }
@@ -63,36 +66,43 @@
   }
 }
 
+@mixin mdc-text-field-ink-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-ink-color_($color);
+  }
+}
+
 // Private mixins
 
 // Common
 
 @mixin mdc-text-field-disabled_ {
+  @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border-on-light);
+  @include mdc-text-field-ink-color_(text-disabled-on-light);
+  @include mdc-text-field-label-color_(text-disabled-on-light);
+
+  @include mdc-theme-dark(".mdc-text-field") {
+    @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border-on-dark);
+    @include mdc-text-field-ink-color_(text-disabled-on-dark);
+    @include mdc-text-field-label-color_(text-disabled-on-dark);
+  }
+
   pointer-events: none;
 
   .mdc-text-field__input {
-    border-bottom: 1px dotted $mdc-text-field-disabled-border-on-light;
+    border-bottom: 1px dotted;
 
     @include mdc-theme-dark(".mdc-text-field", true) {
-      border-bottom: 1px dotted $mdc-text-field-disabled-border-on-dark;
+      border-bottom: 1px dotted;
     }
   }
 
   // stylelint-disable plugin/selector-bem-pattern
-  .mdc-text-field__input,
-  .mdc-text-field__label,
   + .mdc-text-field-helper-text {
     @include mdc-theme-prop(color, text-disabled-on-light);
   }
   // stylelint-enable plugin/selector-bem-pattern
 
-  .mdc-text-field__input,
-  .mdc-text-field__label {
-    @include mdc-theme-dark(".mdc-text-field") {
-      @include mdc-theme-prop(color, text-disabled-on-dark);
-    }
-  }
-
   @include mdc-theme-dark(".mdc-text-field", true) {
     // stylelint-disable plugin/selector-bem-pattern
     + .mdc-text-field-helper-text {
@@ -108,17 +118,10 @@
 }
 
 @mixin mdc-text-field-invalid_ {
-  .mdc-text-field__label {
-    color: $mdc-text-field-error-on-light;
-  }
-
-  .mdc-text-field__input {
-    border-color: $mdc-text-field-error-on-light;
-  }
-
-  .mdc-text-field__bottom-line {
-    background-color: $mdc-text-field-error-on-light;
-  }
+  @include mdc-text-field-bottom-line-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-focused-bottom-line-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-label-color($mdc-text-field-error-on-light);
 
   .mdc-text-field__idle-outline {
     border-color: $mdc-text-field-error-on-light;
@@ -239,3 +242,11 @@
     }
   }
 }
+
+// Private Color Mixins
+
+@mixin mdc-text-field-ink-color_($color) {
+  .mdc-text-field__input {
+    @include mdc-theme-prop(color, $color);
+  }
+}

packages/mdc-textfield/bottom-line/_mixins.scss

@@ -0,0 +1,55 @@
+//
+// Copyright 2018 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.
+//
+
+//Public
+
+@mixin mdc-text-field-bottom-line-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-bottom-line-color_($color);
+  }
+}
+
+@mixin mdc-text-field-hover-bottom-line-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-hover-bottom-line-color_($color);
+  }
+}
+
+@mixin mdc-text-field-focused-bottom-line-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-focused-bottom-line-color_($color);
+  }
+}
+
+// Private
+
+@mixin mdc-text-field-bottom-line-color_($color) {
+  .mdc-text-field__input {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-text-field-hover-bottom-line-color($color) {
+  .mdc-text-field__input:hover {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-text-field-focused-bottom-line-color($color) {
+  .mdc-text-field__bottom-line {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}

packages/mdc-textfield/label/_mixins.scss

@@ -0,0 +1,32 @@
+//
+// Copyright 2018 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.
+//
+
+// Public
+
+@mixin mdc-text-field-label-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-label-color_($color);
+  }
+}
+
+// Private
+
+@mixin mdc-text-field-label-color_($color) {
+  .mdc-text-field__label,
+  .mdc-text-field__input::placeholder { // placeholder used in place of label on css only version
+    @include mdc-theme-prop(color, $color);
+  }
+}

packages/mdc-textfield/label/mdc-text-field-label.scss

@@ -29,7 +29,6 @@
   left: 0;
   transform-origin: left top;
   transition: mdc-text-field-transition(transform), mdc-text-field-transition(color);
-  color: $mdc-text-field-light-label;
   cursor: text;
 
   // stylelint-disable plugin/selector-bem-pattern
@@ -40,10 +39,6 @@
   }
   // stylelint-enable plugin/selector-bem-pattern
 
-  @include mdc-theme-dark(".mdc-text-field") {
-    @include mdc-theme-prop(color, $mdc-text-field-dark-label);
-  }
-
   &--float-above {
     transform: translateY(-100%) scale(.75, .75);
     cursor: auto;

packages/mdc-textfield/mdc-text-field.scss

@@ -38,14 +38,19 @@
 // postcss-bem-linter: define text-field
 
 .mdc-text-field {
+  @include mdc-text-field-bottom-line-color($mdc-text-field-underline-on-light-idle);
+  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-underline-on-light);
+  @include mdc-text-field-focused-bottom-line-color(primary);
+  @include mdc-text-field-ink-color(text-primary-on-light);
+  @include mdc-text-field-label-color($mdc-text-field-light-label);
+
   display: inline-block;
   position: relative;
   margin-bottom: 8px;
   will-change: opacity, transform, color;
 }
 
 .mdc-text-field__input {
-  @include mdc-theme-prop(color, text-primary-on-light);
   @include mdc-typography-base;
   // We use only a subset of the MDC typography values here as changing things such as line-height
   // affects how the labels are transformed.
@@ -60,29 +65,19 @@
   padding: 0 0 8px;
   transition: mdc-text-field-transition(opacity);
   border: none;
-  border-bottom: 1px solid $mdc-text-field-underline-on-light-idle;
+  border-bottom: 1px solid;
   border-radius: 0;
   background: none;
   font-size: inherit;
   appearance: none;
 
   &::placeholder {
-    @include mdc-theme-prop(color, text-hint-on-light);
-
     transition: mdc-text-field-transition(color);
     opacity: 1;
   }
 
-  &:hover {
-    border-color: $mdc-text-field-underline-on-light;
-  }
-
   &:focus {
     outline: none;
-
-    &::placeholder {
-      @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
-    }
   }
 
   // Remove red outline on firefox
@@ -91,12 +86,10 @@
   }
 
   @include mdc-theme-dark {
-    @include mdc-theme-prop(color, text-primary-on-dark);
-
     border-bottom: 1px solid $mdc-text-field-underline-on-dark-idle;
 
     &:hover {
-      border-bottom: 1px solid $mdc-text-field-underline-on-dark;
+      border-bottom: 1px solid;
     }
 
     &::placeholder {