WIP: Update color mixin names. Make placeholder color same as label c…

…olor, remove hover placeholder color change. Add demos for Alternate Colors and Alternate Error Colors
material-components · Jan 6, 2018 · 8abecc7 · 8abecc7
1 parent 07205bd
commit 8abecc7
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 50 deletions.
diff --git a/demos/text-field.html b/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;

diff --git a/demos/text-field.scss b/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
diff --git a/packages/mdc-textfield/README.md b/packages/mdc-textfield/README.md
@@ -198,6 +198,12 @@ 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 selected. 
+`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`
 

diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -69,39 +69,27 @@
   }
 }
 
-@mixin mdc-text-field-bottom-line-hover-color($color) {
+@mixin mdc-text-field-hover-bottom-line-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-bottom-line-hover-color_($color);
+    @include mdc-text-field-hover-bottom-line-color_($color);
   }
 }
 
-@mixin mdc-text-field-bottom-line-focused-color($color) {
+@mixin mdc-text-field-focused-bottom-line-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-bottom-line-focused-color_($color);
+    @include mdc-text-field-focused-bottom-line-color_($color);
   }
 }
 
-@mixin mdc-text-field-label-ink-color($color) {
+@mixin mdc-text-field-label-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-label-ink-color_($color);
+    @include mdc-text-field-label-color_($color);
   }
 }
 
-@mixin mdc-text-field-input-ink-color($color) {
+@mixin mdc-text-field-ink-color($color) {
   &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-input-ink-color_($color);
-  }
-}
-
-@mixin mdc-text-field-input-placeholder-ink-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-input-placeholder-ink-color_($color);
-  }
-}
-
-@mixin mdc-text-field-input-placeholder-hover-ink-color($color) {
-  &:not(.mdc-text-field--disabled) {
-    @include mdc-text-field-input-placeholder-hover-ink-color_($color);
+    @include mdc-text-field-ink-color_($color);
   }
 }
 
@@ -111,13 +99,13 @@
 
 @mixin mdc-text-field-disabled_ {
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border-on-light);
-  @include mdc-text-field-input-ink-color_(text-disabled-on-light);
-  @include mdc-text-field-label-ink-color_(text-disabled-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-input-ink-color_(text-disabled-on-dark);
-    @include mdc-text-field-label-ink-color_(text-disabled-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;
@@ -152,9 +140,9 @@
 
 @mixin mdc-text-field-invalid_ {
   @include mdc-text-field-bottom-line-color($mdc-text-field-error-on-light);
-  @include mdc-text-field-bottom-line-hover-color($mdc-text-field-error-on-light);
-  @include mdc-text-field-bottom-line-focused-color($mdc-text-field-error-on-light);
-  @include mdc-text-field-label-ink-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;
@@ -279,43 +267,32 @@
 // Private Color Mixins
 
 @mixin mdc-text-field-bottom-line-color_($color) {
-  .mdc-text-field__input {
+  .mdc-text-field__input,
+  .mdc-text-field__input::placeholder {
     @include mdc-theme-prop(border-color, $color);
   }
 }
 
-@mixin mdc-text-field-bottom-line-hover-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-bottom-line-focused-color_($color) {
+@mixin mdc-text-field-focused-bottom-line-color($color) {
   .mdc-text-field__bottom-line {
     @include mdc-theme-prop(background-color, $color);
   }
 }
 
-@mixin mdc-text-field-label-ink-color_($color) {
+@mixin mdc-text-field-label-color_($color) {
   .mdc-text-field__label {
     @include mdc-theme-prop(color, $color);
   }
 }
 
-@mixin mdc-text-field-input-ink-color_($color) {
+@mixin mdc-text-field-ink-color_($color) {
   .mdc-text-field__input {
     @include mdc-theme-prop(color, $color);
   }
 }
-
-@mixin mdc-text-field-input-placeholder-ink-color_($color) {
-  .mdc-text-field__input::placeholder {
-    @include mdc-theme-prop(color, $color);
-  }
-}
-
-@mixin mdc-text-field-input-placeholder-hover-ink-color_($color) {
-  .mdc-text-field__input:focus::placeholder {
-    @include mdc-theme-prop(color, $color);
-  }
-}
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -39,12 +39,10 @@
 
 .mdc-text-field {
   @include mdc-text-field-bottom-line-color($mdc-text-field-underline-on-light-idle);
-  @include mdc-text-field-bottom-line-hover-color($mdc-text-field-underline-on-light);
-  @include mdc-text-field-bottom-line-focused-color(primary);
-  @include mdc-text-field-label-ink-color($mdc-text-field-light-label);
-  @include mdc-text-field-input-ink-color(text-primary-on-light);
-  @include mdc-text-field-input-placeholder-ink-color(text-hint-on-light);
-  @include mdc-text-field-input-placeholder-hover-ink-color($mdc-text-field-light-placeholder);
+  @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;