From 989c51611f96da222f904375431fac3526449675 Mon Sep 17 00:00:00 2001
From: Will Ernest <34519388+williamernest@users.noreply.github.com>
Date: Mon, 22 Jan 2018 13:15:08 -0800
Subject: [PATCH] feat(text-field): Move final JS colors to mixins. Update
 demos (#2006)

feat(text-field): Move final JS colors to mixins. Update demos
---
 demos/text-field.html                         |  91 ++++++++--
 demos/text-field.scss                         |  92 ++++++++--
 packages/mdc-textfield/README.md              |   9 +-
 packages/mdc-textfield/_mixins.scss           | 162 +++++++++---------
 .../mdc-textfield/bottom-line/_mixins.scss    |  10 +-
 .../mdc-textfield/helper-text/_mixins.scss    |   2 +-
 packages/mdc-textfield/icon/_mixins.scss      |  31 ++++
 .../icon/mdc-text-field-icon.scss             |   4 -
 packages/mdc-textfield/label/_mixins.scss     |   7 +
 packages/mdc-textfield/mdc-text-field.scss    |  54 +++---
 10 files changed, 322 insertions(+), 140 deletions(-)
 create mode 100644 packages/mdc-textfield/icon/_mixins.scss

diff --git a/demos/text-field.html b/demos/text-field.html
index 95b84903e00..41475412813 100644
--- a/demos/text-field.html
+++ b/demos/text-field.html
@@ -119,10 +119,6 @@ <h2>Full Functionality JS Component (Floating Label, Validation)</h2>
           <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>
@@ -168,8 +164,7 @@ <h2>Outlined Text Field</h2>
             </div>
             <div class="mdc-text-field__idle-outline"></div>
           </div>
-          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg"
-            id="name-validation-msg">
+          <p class="mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg">
             Must be at least 8 characters
           </p>
         </div>
@@ -221,7 +216,7 @@ <h2>Outlined Text Field</h2>
         <h2>Text Field box</h2>
         <div id="demo-tf-box-wrapper">
           <div id="tf-box-example" class="mdc-text-field mdc-text-field--box" data-demo-no-auto-js>
-            <input required pattern=".{8,}" type="text" id="tf-box" class="mdc-text-field__input"
+            <input type="text" id="tf-box" class="mdc-text-field__input"
                    aria-controls="name-validation-message">
             <label for="tf-box" class="mdc-text-field__label">Your Name</label>
             <div class="mdc-text-field__bottom-line"></div>
@@ -247,6 +242,14 @@ <h2>Text Field box</h2>
           <input id="box-dense" type="checkbox">
           <label for="box-dense">Dense</label>
         </div>
+        <div>
+          <input id="box-alternate-colors" type="checkbox">
+          <label for="box-alternate-colors">Alternate Colors</label>
+        </div>
+        <div>
+          <input id="box-required" type="checkbox">
+          <label for="box-required">Required</label>
+        </div>
         <script>
           demoReady(function() {
             var tfEl = document.getElementById('tf-box-example');
@@ -274,6 +277,17 @@ <h2>Text Field box</h2>
               tfEl.classList[evt.target.checked ? 'add' : 'remove']('mdc-text-field--dense');
               tf.layout();
             });
+
+            document.getElementById('box-alternate-colors').addEventListener('change', function (evt) {
+              var target = evt.target;
+              tfEl.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+              tfEl.classList[target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+            });
+
+            document.getElementById('box-required').addEventListener('change', function(evt) {
+              var target = evt.target;
+              tfEl.querySelector('.mdc-text-field__input').required = target.checked;
+            });
           });
         </script>
       </section>
@@ -346,6 +360,10 @@ <h2>Text Field - Leading/Trailing icons</h2>
           <input id="unclickable-leading-trailing" type="checkbox">
           <label for="unclickable-leading-trailing">Unclickable icons</label>
         </div>
+        <div>
+          <input id="leading-trailing-alternate-colors" type="checkbox">
+          <label for="leading-trailing-alternate-colors">Alternate Colors</label>
+        </div>
         <div>
           <input id="required-leading-trailing" type="checkbox">
           <label for="required-leading-trailing">Required and must be at least 8 characters</label>
@@ -383,6 +401,10 @@ <h2>Textarea</h2>
           <input id="textarea-dark-theme" type="checkbox">
           <label for="textarea-dark-theme">Dark Theme</label>
         </div>
+        <div>
+          <input id="textarea-alternate-colors" type="checkbox">
+          <label for="textarea-alternate-colors">Alternate Colors</label>
+        </div>
         <div>
           <input id="textarea-required" type="checkbox">
           <label for="textarea-required">Required</label>
@@ -413,6 +435,14 @@ <h2>Full-Width Text Field and Textarea</h2>
           <input type="checkbox" id="fullwidth-dark-theme">
           <label for="fullwidth-dark-theme">Dark Theme</label>
         </div>
+        <div>
+          <input id="fullwidth-required" type="checkbox">
+          <label for="fullwidth-required">Required</label>
+        </div>
+        <div>
+          <input id="fullwidth-alternate-colors" type="checkbox">
+          <label for="fullwidth-alternate-colors">Alternate Colors</label>
+        </div>
       </section>
     </main>
 
@@ -447,6 +477,7 @@ <h2>Full-Width Text Field and Textarea</h2>
         var wrapperOutlinedTrailing = document.getElementById('demo-tf-outlined-trailing-wrapper');
 
         var tfIcons = document.querySelectorAll('.mdc-text-field__icon');
+        var tfInputs = tfIconContainer.querySelectorAll('.mdc-text-field__input');
 
         document.getElementById('disable-leading-trailing').addEventListener('change', function(evt) {
           tfBoxLeading.disabled = evt.target.checked;
@@ -498,12 +529,26 @@ <h2>Full-Width Text Field and Textarea</h2>
         });
 
         document.getElementById('required-leading-trailing').addEventListener('change', function(evt) {
-          tfIconContainer.querySelectorAll('.mdc-text-field__input')
-              .forEach(function(input) {
+          [].slice.call(tfInputs).forEach(function(input) {
                 input.required = evt.target.checked;
                 input.pattern = evt.target.checked ? '.{8,}' : '.*';
               });
         });
+
+        document.getElementById('leading-trailing-alternate-colors').addEventListener('change', function(evt) {
+          tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+          tfBoxLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+          tfBoxLeading.layout();
+          tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+          tfBoxTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+          tfBoxTrailing.layout();
+          tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+          tfOutlinedLeadingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+          tfOutlinedLeading.layout();
+          tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-colors');
+          tfOutlinedTrailingEl.classList[evt.target.checked ? 'add' : 'remove']('demo-text-field-custom-error-colors');
+          tfOutlinedTrailing.layout();
+        });
       });
 
       demoReady(function() {
@@ -539,9 +584,6 @@ <h2>Full-Width Text Field and Textarea</h2>
         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) {
@@ -584,9 +626,18 @@ <h2>Full-Width Text Field and Textarea</h2>
           var target = evt.target;
           section.classList[target.checked ? 'add' : 'remove']('mdc-theme--dark');
         });
+
+        document.getElementById('textarea-alternate-colors').addEventListener('change', function (evt) {
+          var target = evt.target;
+          tfRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
+        });
+
         document.getElementById('textarea-required').addEventListener('change', function(evt) {
           var target = evt.target;
-          tfRoot.querySelector('.mdc-text-field__input').required = target.checked;
+          [].slice.call(tfRoot.querySelectorAll('.mdc-text-field__input'))
+              .forEach(function(input) {
+                input.required = target.checked;
+              })
         });
       });
 
@@ -615,6 +666,20 @@ <h2>Full-Width Text Field and Textarea</h2>
           var target = evt.target;
           section.classList[target.checked ? 'add' : 'remove']('mdc-theme--dark');
         });
+
+        document.getElementById('fullwidth-required').addEventListener('change', function(evt) {
+          var target = evt.target;
+          [].slice.call(section.querySelectorAll('.mdc-text-field__input'))
+              .forEach(function(input) {
+                input.required = target.checked;
+              })
+        });
+
+        document.getElementById('fullwidth-alternate-colors').addEventListener('change', function (evt) {
+          var target = evt.target;
+          tfRoot.classList[target.checked ? 'add' : 'remove']('demo-fullwidth-input');
+          tfMultiRoot.classList[target.checked ? 'add' : 'remove']('demo-textarea');
+        });
       });
     </script>
   </body>
diff --git a/demos/text-field.scss b/demos/text-field.scss
index f25f0b74807..9be6aed9df1 100644
--- a/demos/text-field.scss
+++ b/demos/text-field.scss
@@ -20,30 +20,94 @@
 
 // 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);
+  $idle-border: rgba(blue, .38);
+  $hover-border: rgba(blue, .6);
+  $focused-border: rgba(blue, 1);
+
+  @include mdc-text-field-bottom-line-color($idle-border);
+  @include mdc-text-field-hover-bottom-line-color($hover-border);
+  @include mdc-text-field-focused-bottom-line-color($focused-border);
   @include mdc-text-field-ink-color(black);
   @include mdc-text-field-label-color(rgba(blue, .5));
-  @include mdc-text-field-outline-color(rgba(blue, .38));
-  @include mdc-text-field-hover-outline-color(rgba(blue, .6));
-  @include mdc-text-field-focused-outline-color(rgba(blue, 1));
-  @include mdc-text-field-helper-text-color(rgba(blue, .38));
+  @include mdc-text-field-outline-color($idle-border);
+  @include mdc-text-field-hover-outline-color($hover-border);
+  @include mdc-text-field-focused-outline-color($focused-border);
+  @include mdc-text-field-helper-text-color($idle-border);
+  @include mdc-text-field-textarea-stroke-color($idle-border);
+  @include mdc-text-field-icon-color($hover-border);
 
   &.mdc-text-field--focused {
     @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-text-field-icon-color($focused-border);
   }
 }
 
-.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));
+.demo-textarea:not(.mdc-text-field--invalid) {
+  $idle-border: rgba(blue, .38);
+  $hover-border: rgba(blue, .6);
+  $focused-border: rgba(blue, 1);
+
+  @include mdc-text-field-ink-color(black);
+  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-text-field-textarea-stroke-color($idle-border);
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(blue, .87));
+    @include mdc-text-field-textarea-stroke-color($focused-border);
+  }
+}
+
+.demo-textarea.mdc-text-field--invalid {
+  @include mdc-text-field-ink-color(orange);
+  @include mdc-text-field-label-color(rgba(orange, .5));
+  @include mdc-text-field-textarea-stroke-color(orange);
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(orange, .87));
+    @include mdc-text-field-textarea-stroke-color(orange);
+  }
+}
+
+.demo-fullwidth-input:not(.mdc-text-field--invalid) {
+  @include mdc-text-field-ink-color(black);
+  @include mdc-text-field-label-color(rgba(blue, .5));
+  @include mdc-text-field-focused-bottom-line-color(blue);
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(blue, .87));
+  }
+}
+
+.demo-fullwidth-input.mdc-text-field--invalid {
+  @include mdc-text-field-ink-color(orange);
+  @include mdc-text-field-label-color(rgba(orange, .5));
   @include mdc-text-field-focused-bottom-line-color(orange);
+
+  &.mdc-text-field--focused {
+    @include mdc-text-field-label-color(rgba(orange, .87));
+    @include mdc-text-field-fullwidth-bottom-line-color(orange);
+  }
+}
+
+.demo-text-field-custom-error-colors.mdc-text-field--invalid {
+  $idle-border: rgba(orange, .38);
+  $hover-border: rgba(orange, .6);
+  $focused-border: rgba(orange, 1);
+
+  @include mdc-text-field-bottom-line-color($idle-border);
+  @include mdc-text-field-hover-bottom-line-color($hover-border);
+  @include mdc-text-field-focused-bottom-line-color($focused-border);
   @include mdc-text-field-ink-color(orange);
   @include mdc-text-field-label-color(rgba(orange, .87));
-  @include mdc-text-field-outline-color(rgba(orange, .38));
-  @include mdc-text-field-hover-outline-color(rgba(orange, .6));
-  @include mdc-text-field-focused-outline-color(rgba(orange, 1));
-  @include mdc-text-field-helper-text-validation-color(rgba(orange, .6));
+  @include mdc-text-field-outline-color($idle-border);
+  @include mdc-text-field-hover-outline-color($hover-border);
+  @include mdc-text-field-focused-outline-color($focused-border);
+  @include mdc-text-field-helper-text-validation-color($hover-border);
+  @include mdc-text-field-textarea-stroke-color($idle-border);
+
+  @include mdc-text-field-icon-color($focused-border);
+
+  // Example for --invalid textfield when helper text is not a validation message.
+  @include mdc-text-field-helper-text-color(rgba(blue, .6));
 }
 // stylelint-enable selector-class-pattern
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
index 0175cc0d173..ca42496a84b 100644
--- a/packages/mdc-textfield/README.md
+++ b/packages/mdc-textfield/README.md
@@ -172,14 +172,19 @@ 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-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. 
 `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. 
 `mdc-text-field-outline-color($color)` | Customizes the color of the border of the outlined text-field. 
 `mdc-text-field-hover-outline-color($color)` | Customizes the hover color of the border of the outlined text-field.
 `mdc-text-field-focused-outline-color($color)` | Customizes the outlined border color when the text-field is focused.
+`mdc-text-field-box-fill-color($color)` | Customizes the background color of the text-field box. 
+`mdc-text-field-textarea-stroke-color($color)` | Customizes the color of the border of the textarea. 
+`mdc-text-field-textarea-fill-color($color)` | Customizes the color of the background of the textarea. 
+`mdc-text-field-fullwidth-bottom-line-color($color)` | Customizes the bottom line under a fullwidth text field. Doesn't apply to a textarea.
+`mdc-text-field-icon-color($color)` | Customizes the color for the leading/trailing icons.
 `mdc-text-field-helper-text-color($color)` | Customizes the color of the helper text following a text-field.
 `mdc-text-field-helper-text-validation-color($color)` | Customizes the color of the helper text when it's used as a validation message.
 
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
index 329a577b0d7..b7e69c7770e 100644
--- a/packages/mdc-textfield/_mixins.scss
+++ b/packages/mdc-textfield/_mixins.scss
@@ -18,6 +18,7 @@
 @import "outline/mixins";
 @import "label/mixins";
 @import "helper-text/mixins";
+@import "icon/mixins";
 
 @mixin mdc-text-field-outlined-corner-radius($radius) {
   border-radius: $radius;
@@ -83,6 +84,33 @@
   }
 }
 
+@mixin mdc-text-field-box-fill-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-box-fill-color_($color);
+  }
+}
+
+@mixin mdc-text-field-textarea-stroke-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-textarea-stroke-color_($color);
+  }
+}
+
+@mixin mdc-text-field-textarea-fill-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-textarea-fill-color_($color);
+    // Automatically add label background color the same color as well to ensure
+    // the label can be seen if the input scrolls behind the label
+    @include mdc-text-field-label-background-color_($color);
+  }
+}
+
+@mixin mdc-text-field-fullwidth-bottom-line-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-fullwidth-bottom-line-color_($color);
+  }
+}
+
 // Private mixins
 
 // Common
@@ -92,6 +120,8 @@
   @include mdc-text-field-ink-color_(text-disabled-on-light);
   @include mdc-text-field-label-color_(text-disabled-on-light);
   @include mdc-text-field-helper-text-color_(text-disabled-on-light);
+  @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon-on-light);
+  @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-divider-on-light);
 
   @include mdc-theme-dark(".mdc-text-field") {
     @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border-on-dark);
@@ -130,11 +160,6 @@
   @include mdc-text-field-label-color($mdc-text-field-error-on-light);
   @include mdc-text-field-helper-text-validation-color($mdc-text-field-error-on-light);
 
-  // Outline specific mixins
-  @include mdc-text-field-outline-color($mdc-text-field-error-on-light);
-  @include mdc-text-field-hover-outline-color($mdc-text-field-error-on-light);
-  @include mdc-text-field-focused-outline-color($mdc-text-field-error-on-light);
-
   + .mdc-text-field-helper-text--validation-msg {
     opacity: 1;
   }
@@ -147,9 +172,7 @@
 }
 
 @mixin mdc-text-field-focused_ {
-  &:not(.mdc-text-field--invalid) {
-    @include mdc-text-field-label-color(primary);
-  }
+  @include mdc-text-field-label-color(primary);
 
   @include mdc-required-text-field-label-asterix_ {
     color: $mdc-text-field-error-on-light;
@@ -187,10 +210,13 @@
   .mdc-text-field__label {
     bottom: 20px;
   }
+}
 
-  .mdc-text-field__icon {
-    @include mdc-theme-prop(color, $mdc-text-field-disabled-icon-on-light);
-  }
+@mixin mdc-text-field-outlined-invalid_ {
+  // Outline specific mixins
+  @include mdc-text-field-outline-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-error-on-light);
+  @include mdc-text-field-focused-outline-color($mdc-text-field-error-on-light);
 }
 
 @mixin mdc-text-field-outlined-focused_ {
@@ -232,6 +258,11 @@
 }
 
 @mixin mdc-text-field-outlined_ {
+  // Outline specific colors
+  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
+  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
+  @include mdc-text-field-focused-outline-color(primary);
+
   height: 56px;
   border: none;
 
@@ -281,35 +312,22 @@
   .mdc-text-field__label--float-above ~ .mdc-text-field__outline {
     opacity: 1;
   }
+
   // stylelint-enable plugin/selector-bem-pattern
 }
 
 // Box
 
 @mixin mdc-text-field-box-disabled_ {
-  @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);
+  @include mdc-text-field-box-fill-color_($mdc-text-field-box-disabled-background);
+  @include mdc-text-field-bottom-line-color_($mdc-text-field-outlined-disabled-border);
+  @include mdc-text-field-label-color(text-hint-on-light);
 
   border-bottom: none;
-  background-color: $mdc-text-field-box-disabled-background;
-
-  @include mdc-theme-dark(".mdc-text-field", true) {
-    @include mdc-theme-prop(background-color, $mdc-text-field-dark-background);
-    @include mdc-theme-prop(color, $mdc-text-field-dark-placeholder);
-
-    border-bottom: none;
-  }
 
   .mdc-text-field__label {
     bottom: 20px;
   }
-
-  .mdc-text-field__icon {
-    @include mdc-theme-prop(color, $mdc-text-field-disabled-icon-on-light);
-
-    @include mdc-theme-dark() {
-      @include mdc-theme-prop(color, $mdc-text-field-disabled-icon-on-dark);
-    }
-  }
 }
 
 @mixin mdc-text-field-box-dense_ {
@@ -333,34 +351,29 @@
 // Textarea
 
 @mixin mdc-text-field-textarea-disabled_ {
+  @include mdc-text-field-label-background-color_($mdc-textarea-disabled-background-on-light);
+  @include mdc-text-field-textarea-stroke-color_($mdc-text-field-disabled-border-on-light);
+  @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background-on-light);
+
   border-style: solid;
-  border-color: $mdc-text-field-disabled-border-on-light;
-  background-color: $mdc-textarea-disabled-background-on-light;
 
-  @include mdc-theme-dark(".mdc-text-field") {
-    border-color: $mdc-text-field-disabled-border-on-dark;
-    background-color: $mdc-textarea-disabled-background-on-dark;
+  .mdc-text-field__input {
+    border: 1px solid transparent;
   }
 
-  .mdc-text-field__label {
-    background-color: $mdc-textarea-disabled-background-on-light;
-
-    @include mdc-theme-dark(".mdc-text-field") {
-      background-color: $mdc-textarea-disabled-background-on-dark;
-    }
+  @include mdc-theme-dark(".mdc-text-field") {
+    background-color: $mdc-textarea-disabled-background-on-dark;
   }
 }
 
 @mixin mdc-text-field-textarea-invalid_ {
-  border-color: $mdc-text-field-error-on-light;
-}
-
-@mixin mdc-text-field-textarea-focused_ {
-  @include mdc-theme-prop(border-color, primary);
+  @include mdc-text-field-textarea-stroke-color($mdc-text-field-error-on-light);
 }
 
 @mixin mdc-text-field-textarea_ {
   @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
+  @include mdc-text-field-label-background-color_($mdc-textarea-light-background);
+  @include mdc-text-field-textarea-stroke-color($mdc-textarea-border-on-light);
 
   $padding-inset: 16px;
   $label-offset-y: $padding-inset + 2;
@@ -370,7 +383,7 @@
   width: fit-content;
   height: initial;
   transition: none;
-  border: 1px solid $mdc-textarea-border-on-light;
+  border: 1px solid;
   overflow: hidden;
 
   @include mdc-theme-dark(".mdc-text-field") {
@@ -383,28 +396,6 @@
     padding: $padding-inset;
     padding-top: $padding-inset * 2;
     border: 1px solid transparent;
-
-    &:focus {
-      @include mdc-theme-prop(border-color, primary);
-    }
-
-    &:invalid:not(:focus) {
-      border-color: $mdc-text-field-error-on-light;
-    }
-
-    @include mdc-theme-dark(".mdc-text-field") {
-      &:hover {
-        border-bottom-color: transparent;
-      }
-
-      &:focus {
-        @include mdc-theme-prop(border-color, secondary);
-      }
-
-      &:invalid:not(:focus) {
-        border-color: $mdc-text-field-error-on-dark;
-      }
-    }
   }
 
   .mdc-text-field__label {
@@ -415,7 +406,6 @@
     margin-top: 2px;
     margin-left: 8px;
     padding: 8px;
-    background-color: $mdc-textarea-light-background;
     line-height: 1.15;
 
     @include mdc-theme-dark(".mdc-text-field") {
@@ -434,21 +424,9 @@
     animation: invalid-shake-float-above-textarea 250ms 1;
   }
 
-  &.mdc-text-field--disabled {
-    @include mdc-text-field-textarea-disabled_;
-  }
-
-  &.mdc-text-field--invalid {
-    @include mdc-text-field-textarea-invalid_;
-  }
-
-  &.mdc-text-field--focused {
-    @include mdc-text-field-textarea-focused_;
-  }
+  // stylelint-enable plugin/selector-bem-pattern
 }
 
-// stylelint-enable plugin/selector-bem-pattern
-
 // Private Color Mixins
 
 @mixin mdc-text-field-ink-color_($color) {
@@ -456,3 +434,25 @@
     @include mdc-theme-prop(color, $color);
   }
 }
+
+@mixin mdc-text-field-box-fill-color_($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-text-field-textarea-stroke-color_($color) {
+  @include mdc-theme-prop(border-color, $color);
+
+  .mdc-text-field__input:focus {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-text-field-textarea-fill-color_($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-text-field-fullwidth-bottom-line-color_($color) {
+  &:not(.mdc-text-field--textarea) {
+    @include mdc-theme-prop(border-bottom-color, $color);
+  }
+}
diff --git a/packages/mdc-textfield/bottom-line/_mixins.scss b/packages/mdc-textfield/bottom-line/_mixins.scss
index ff07f4a7dcd..9620538abfa 100644
--- a/packages/mdc-textfield/bottom-line/_mixins.scss
+++ b/packages/mdc-textfield/bottom-line/_mixins.scss
@@ -17,19 +17,19 @@
 //Public
 
 @mixin mdc-text-field-bottom-line-color($color) {
-  &:not(.mdc-text-field--disabled) {
+  &:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
     @include mdc-text-field-bottom-line-color_($color);
   }
 }
 
 @mixin mdc-text-field-hover-bottom-line-color($color) {
-  &:not(.mdc-text-field--disabled) {
+  &:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
     @include mdc-text-field-hover-bottom-line-color_($color);
   }
 }
 
 @mixin mdc-text-field-focused-bottom-line-color($color) {
-  &:not(.mdc-text-field--disabled) {
+  &:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
     @include mdc-text-field-focused-bottom-line-color_($color);
   }
 }
@@ -38,13 +38,13 @@
 
 @mixin mdc-text-field-bottom-line-color_($color) {
   .mdc-text-field__input {
-    @include mdc-theme-prop(border-color, $color);
+    @include mdc-theme-prop(border-bottom-color, $color);
   }
 }
 
 @mixin mdc-text-field-hover-bottom-line-color_($color) {
   .mdc-text-field__input:hover {
-    @include mdc-theme-prop(border-color, $color);
+    @include mdc-theme-prop(border-bottom-color, $color);
   }
 }
 
diff --git a/packages/mdc-textfield/helper-text/_mixins.scss b/packages/mdc-textfield/helper-text/_mixins.scss
index 6d52ef599d4..4f117183efe 100644
--- a/packages/mdc-textfield/helper-text/_mixins.scss
+++ b/packages/mdc-textfield/helper-text/_mixins.scss
@@ -37,7 +37,7 @@
 }
 
 @mixin mdc-text-field-helper-text-validation-color_($color) {
-  + .mdc-text-field-helper-text--validation-msg {
+  &.mdc-text-field--invalid + .mdc-text-field-helper-text--validation-msg {
     @include mdc-theme-prop(color, $color);
   }
 }
diff --git a/packages/mdc-textfield/icon/_mixins.scss b/packages/mdc-textfield/icon/_mixins.scss
new file mode 100644
index 00000000000..faaa6accb03
--- /dev/null
+++ b/packages/mdc-textfield/icon/_mixins.scss
@@ -0,0 +1,31 @@
+//
+// 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 mixins
+
+@mixin mdc-text-field-icon-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-icon-color_($color);
+  }
+}
+
+// Private mixins
+
+@mixin mdc-text-field-icon-color_($color) {
+  .mdc-text-field__icon {
+    @include mdc-theme-prop(color, $color);
+  }
+}
diff --git a/packages/mdc-textfield/icon/mdc-text-field-icon.scss b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
index a78ab12f1a6..42ce1e6b82c 100644
--- a/packages/mdc-textfield/icon/mdc-text-field-icon.scss
+++ b/packages/mdc-textfield/icon/mdc-text-field-icon.scss
@@ -22,10 +22,6 @@
   position: absolute;
   bottom: 16px;
   cursor: pointer;
-
-  @include mdc-theme-dark(".mdc-text-field") {
-    @include mdc-theme-prop(color, text-secondary-on-dark);
-  }
 }
 
 .mdc-text-field__icon:not([tabindex]),
diff --git a/packages/mdc-textfield/label/_mixins.scss b/packages/mdc-textfield/label/_mixins.scss
index be41785b1db..11986f592b7 100644
--- a/packages/mdc-textfield/label/_mixins.scss
+++ b/packages/mdc-textfield/label/_mixins.scss
@@ -30,3 +30,10 @@
     @include mdc-theme-prop(color, $color);
   }
 }
+
+// Used for textarea in case of scrolling
+@mixin mdc-text-field-label-background-color_($color) {
+  .mdc-text-field__label {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
index 590bbbcdaef..2cddea874d0 100644
--- a/packages/mdc-textfield/mdc-text-field.scss
+++ b/packages/mdc-textfield/mdc-text-field.scss
@@ -40,11 +40,8 @@
   @include mdc-text-field-ink-color(text-primary-on-light);
   @include mdc-text-field-label-color($mdc-text-field-light-label);
   @include mdc-text-field-helper-text-color(text-hint-on-light);
-
-  // Outline specific colors
-  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
-  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
-  @include mdc-text-field-focused-outline-color(primary);
+  @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-divider-on-light);
+  @include mdc-text-field-icon-color($mdc-text-field-underline-on-light);
 
   display: inline-block;
   position: relative;
@@ -134,11 +131,13 @@
   @include mdc-ripple-radius;
   @include mdc-text-field-box-corner-radius($mdc-text-field-border-radius);
 
+  // Colors
+  @include mdc-text-field-box-fill-color($mdc-text-field-box-background);
+
   display: inline-flex;
   position: relative;
   height: 56px;
   margin-top: 16px;
-  background-color: $mdc-text-field-box-background;
   overflow: hidden;
 
   @include mdc-theme-dark(".mdc-text-field", true) {
@@ -167,7 +166,6 @@
     position: absolute;
     bottom: 20px;
     width: calc(100% - #{$mdc-text-field-icon-padding});
-    color: $mdc-text-field-box-secondary-text;
     text-overflow: ellipsis;
     white-space: nowrap;
     pointer-events: none;
@@ -309,10 +307,6 @@
   }
 }
 
-.mdc-text-field--invalid {
-  @include mdc-text-field-invalid_;
-}
-
 .mdc-text-field--dense {
   margin-top: 12px;
   margin-bottom: 4px;
@@ -324,19 +318,11 @@
   }
 }
 
-.mdc-text-field--disabled {
-  @include mdc-text-field-disabled_;
-}
-
 @include mdc-required-text-field-label-asterix_ {
   margin-left: 1px;
   content: "*";
 }
 
-.mdc-text-field--focused {
-  @include mdc-text-field-focused_;
-}
-
 .mdc-text-field--textarea {
   @include mdc-text-field-textarea_;
 }
@@ -352,7 +338,7 @@
     height: 56px;
     margin: 0;
     border: none;
-    border-bottom: 1px solid $mdc-text-field-divider-on-light;
+    border-bottom: 1px solid;
     outline: none;
 
     .mdc-text-field__input {
@@ -400,3 +386,31 @@
   align-self: flex-start;
 }
 // stylelint-enable selector-max-type
+
+.mdc-text-field--focused {
+  @include mdc-text-field-focused_;
+}
+
+.mdc-text-field--textarea.mdc-text-field--focused {
+  @include mdc-text-field-textarea-stroke-color(primary);
+}
+
+.mdc-text-field--invalid {
+  @include mdc-text-field-invalid_;
+}
+
+.mdc-text-field--textarea.mdc-text-field--invalid {
+  @include mdc-text-field-textarea-invalid_;
+}
+
+.mdc-text-field--outlined.mdc-text-field--invalid {
+  @include mdc-text-field-outlined-invalid_;
+}
+
+.mdc-text-field--disabled {
+  @include mdc-text-field-disabled_;
+}
+
+.mdc-text-field--textarea.mdc-text-field--disabled {
+  @include mdc-text-field-textarea-disabled_;
+}