fix(text-field): Update outline and label styles according to spec (#1855)

Author: bonniezhou

packages/mdc-textfield/_variables.scss

@@ -34,7 +34,7 @@ $mdc-text-field-dark-background: rgba(48, 48, 48, 1);
 $mdc-text-field-dark-label: rgba(white, .6);
 $mdc-text-field-dark-placeholder: rgba(white, .3);
 $mdc-text-field-light-background: rgba(white, 1);
-$mdc-text-field-light-label: rgba(white, .7);
+$mdc-text-field-light-label: rgba(black, .6);
 $mdc-text-field-light-placeholder: rgba(black, .38);
 
 $mdc-text-field-box-background: rgba(black, .04);

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

@@ -29,7 +29,7 @@
   left: 0;
   transform-origin: left top;
   transition: mdc-text-field-transition(transform), mdc-text-field-transition(color);
-  color: $mdc-text-field-underline-on-light-idle;
+  color: $mdc-text-field-light-label;
   cursor: text;
 
   // stylelint-disable plugin/selector-bem-pattern

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

@@ -147,8 +147,6 @@
     z-index: 2;
 
     &--float-above {
-      @include mdc-theme-prop(color, primary);
-
       transform: scale(.75) translateY(-170%);
 
       &.mdc-text-field__label--shake {
@@ -173,6 +171,17 @@
     stroke-width: 2px;
   }
 
+  &:not(.mdc-text-field--invalid) {
+    &.mdc-text-field--focused .mdc-text-field__label {
+      @include mdc-theme-prop(color, primary);
+    }
+
+    // stylelint-disable-next-line selector-max-specificity
+    .mdc-text-field__input:hover ~ .mdc-text-field__outline .mdc-text-field__outline-path {
+      stroke: $mdc-text-field-outlined-hover-border;
+    }
+  }
+
   &.mdc-text-field--disabled {
     @include mdc-theme-prop(color, $mdc-text-field-light-placeholder);