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

material-components · Jan 5, 2018 · 45c9ae3 · 45c9ae3
1 parent f007b9c
commit 45c9ae3
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 42 deletions.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -63,36 +63,79 @@
   }
 }
 
+@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-bottom-line-hover-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-bottom-line-hover-color_($color);
+  }
+}
+
+@mixin mdc-text-field-bottom-line-focused-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-bottom-line-focused-color_($color);
+  }
+}
+
+@mixin mdc-text-field-label-ink-color($color) {
+  &:not(.mdc-text-field--disabled) {
+    @include mdc-text-field-label-ink-color_($color);
+  }
+}
+
+@mixin mdc-text-field-input-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);
+  }
+}
+
 // 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-input-ink-color_(text-disabled-on-light);
+  @include mdc-text-field-label-ink-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);
+  }
+
   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 +151,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-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);
 
   .mdc-text-field__idle-outline {
     border-color: $mdc-text-field-error-on-light;
@@ -239,3 +275,47 @@
     }
   }
 }
+
+// Private Color Mixins
+
+@mixin mdc-text-field-bottom-line-color_($color) {
+  .mdc-text-field__input {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-text-field-bottom-line-hover-color_($color) {
+  .mdc-text-field__input:hover {
+    @include mdc-theme-prop(border-color, $color);
+  }
+}
+
+@mixin mdc-text-field-bottom-line-focused-color_($color) {
+  .mdc-text-field__bottom-line {
+    @include mdc-theme-prop(background-color, $color);
+  }
+}
+
+@mixin mdc-text-field-label-ink-color_($color) {
+  .mdc-text-field__label {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-text-field-input-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/label/mdc-text-field-label.scss b/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;

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -42,10 +42,17 @@
   position: relative;
   margin-bottom: 8px;
   will-change: opacity, transform, color;
+
+  @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);
 }
 
 .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 +67,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 +88,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 {