fix(text-field): Update colors to match guidance (#2597)

material-components · Apr 20, 2018 · 444f14f · 444f14f
1 parent 76854cd
commit 444f14f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 31 deletions.
diff --git a/packages/mdc-textfield/_mixins.scss b/packages/mdc-textfield/_mixins.scss
@@ -129,11 +129,11 @@
 
 @mixin mdc-text-field-disabled_ {
   @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
-  @include mdc-text-field-ink-color_(text-disabled-on-background);
-  @include mdc-text-field-label-ink-color_(text-disabled-on-background);
-  @include mdc-text-field-helper-text-color_(text-disabled-on-background);
+  @include mdc-text-field-ink-color_($mdc-text-field-disabled-ink-color);
+  @include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color);
+  @include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
   @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
-  @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-divider);
+  @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-fullwidth-bottom-line-color);
 
   pointer-events: none;
 
@@ -159,7 +159,7 @@
 }
 
 @mixin mdc-text-field-focused_ {
-  @include mdc-text-field-label-color(primary);
+  @include mdc-text-field-label-color($mdc-text-field-focused-label-color);
 
   @include mdc-required-text-field-label-asterisk_ {
     color: $mdc-text-field-error;
@@ -313,10 +313,10 @@
 @mixin mdc-text-field-box_ {
   @include mdc-ripple-surface;
   // Text Field Box intentionally omits press ripple, so each state needs to be specified individually
-  @include mdc-states-base-color(text-primary-on-background);
-  @include mdc-states-hover-opacity(mdc-states-opacity(text-primary-on-background, hover));
+  @include mdc-states-base-color($mdc-text-field-ink-color);
+  @include mdc-states-hover-opacity(mdc-states-opacity($mdc-text-field-ink-color, hover));
   @include mdc-states-focus-opacity(
-    mdc-states-opacity(text-primary-on-background, focus),
+    mdc-states-opacity($mdc-text-field-ink-color, focus),
     $has-nested-focusable-element: true
   );
   @include mdc-ripple-radius-bounded;
@@ -357,7 +357,7 @@
 @mixin mdc-text-field-box-disabled_ {
   @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-background);
+  @include mdc-text-field-label-color($mdc-text-field-disabled-label-color);
 
   border-bottom: none;
 }

diff --git a/packages/mdc-textfield/_variables.scss b/packages/mdc-textfield/_variables.scss
@@ -13,26 +13,34 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 //
-
-$mdc-text-field-error: #d50000;
-$mdc-text-field-divider: rgba(black, .12);
+$mdc-text-field-error: #c51162;
+$mdc-text-field-fullwidth-bottom-line-color: rgba(mdc-theme-prop-value(on-surface), .12);
 $mdc-text-field-disabled-border: rgba(#231f20, .26);
-$mdc-text-field-disabled-icon: rgba(black, .3);
-$mdc-text-field-underline-hover: rgba(black, 1);
-$mdc-text-field-underline-idle: rgba(black, .5);
-$mdc-text-field-label: rgba(black, .6);
-$mdc-text-field-placeholder: rgba(black, .38);
+$mdc-text-field-disabled-icon: rgba(mdc-theme-prop-value(on-surface), .3);
+$mdc-text-field-bottom-line-hover: rgba(mdc-theme-prop-value(on-surface), .87);
+$mdc-text-field-bottom-line-idle: rgba(mdc-theme-prop-value(on-surface), .42);
+$mdc-text-field-label: rgba(mdc-theme-prop-value(on-surface), .6);
+$mdc-text-field-placeholder: rgba(mdc-theme-prop-value(on-surface), .6);
+
+$mdc-text-field-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
+$mdc-text-field-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .6);
+$mdc-text-field-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
+$mdc-text-field-focused-label-color: rgba(mdc-theme-prop-value(primary), .87);
+
+$mdc-text-field-disabled-label-color: rgba(mdc-theme-prop-value(on-surface), .37);
+$mdc-text-field-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);
+$mdc-text-field-disabled-helper-text-color: rgba(mdc-theme-prop-value(on-surface), .37);
 
-$mdc-text-field-box-background: rgba(black, .04);
-$mdc-text-field-box-disabled-background: rgba(black, .02);
-$mdc-text-field-box-secondary-text: rgba(black, .6);
+$mdc-text-field-box-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 4%);
+$mdc-text-field-box-disabled-background: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 2%);
+$mdc-text-field-box-secondary-text: rgba(mdc-theme-prop-value(on-surface), .6);
 
-$mdc-text-field-outlined-idle-border: rgba(black, .12);
-$mdc-text-field-outlined-disabled-border: rgba(black, .06);
-$mdc-text-field-outlined-hover-border: rgba(black, .87);
+$mdc-text-field-outlined-idle-border: rgba(mdc-theme-prop-value(on-surface), .24);
+$mdc-text-field-outlined-disabled-border: rgba(mdc-theme-prop-value(on-surface), .06);
+$mdc-text-field-outlined-hover-border: rgba(mdc-theme-prop-value(on-surface), .87);
 
-$mdc-textarea-border: rgba(black, .73);
-$mdc-textarea-background: rgba(white, 1);
+$mdc-textarea-border: rgba(mdc-theme-prop-value(on-surface), .73);
+$mdc-textarea-background: rgba(mdc-theme-prop-value(surface), 1);
 // cannot be transparent because multiline textarea input
 // will make text unreadable
 $mdc-textarea-disabled-background: rgba(249, 249, 249, 1);

diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -33,14 +33,14 @@
 // postcss-bem-linter: define text-field
 
 .mdc-text-field {
-  @include mdc-text-field-bottom-line-color($mdc-text-field-underline-idle);
-  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-underline-hover);
+  @include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle);
+  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-bottom-line-hover);
   @include mdc-text-field-line-ripple-color_(primary);
-  @include mdc-text-field-ink-color(text-primary-on-background);
+  @include mdc-text-field-ink-color($mdc-text-field-ink-color);
   @include mdc-text-field-label-color($mdc-text-field-label);
-  @include mdc-text-field-helper-text-color(text-hint-on-background);
-  @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-divider);
-  @include mdc-text-field-icon-color($mdc-text-field-underline-hover);
+  @include mdc-text-field-helper-text-color($mdc-text-field-helper-text-color);
+  @include mdc-text-field-fullwidth-bottom-line-color($mdc-text-field-fullwidth-bottom-line-color);
+  @include mdc-text-field-icon-color($mdc-text-field-icon-color);
 
   display: inline-block;
   position: relative;