fix(input,select): align colors with spec (#5155)

Fixes #5114.

Author: crisbeto

src/lib/core/style/_form-common.scss

@@ -1,12 +1,8 @@
-
-// Gradient for showing the dashed line when the input is disabled.
+// Renders a gradient for showing the dashed line when the input is disabled.
 // Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
 // to match the Material Design spec.
-$mat-underline-disabled-background-image:
-        linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);
-
-@mixin mat-control-disabled-underline {
-  background-image: $mat-underline-disabled-background-image;
+@mixin mat-control-disabled-underline($color) {
+  background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);
   background-size: 4px 1px;
   background-repeat: repeat-x;
 }

src/lib/input/_input-theme.scss

@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/style/form-common';
 @import '../core/typography/typography-utils';
 
 
@@ -9,14 +10,15 @@
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
 
   // Placeholder colors. Required is used for the `*` star shown in the placeholder.
-  $input-placeholder-color: mat-color($foreground, hint-text);
+  $input-placeholder-color: mat-color($foreground, secondary-text);
   $input-floating-placeholder-color: mat-color($primary);
   $input-required-placeholder-color: mat-color($accent);
 
   // Underline colors.
-  $input-underline-color: mat-color($foreground, divider);
+  $input-underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
   $input-underline-color-accent: mat-color($accent);
   $input-underline-color-warn: mat-color($warn);
   $input-underline-focused-color: mat-color($primary);
@@ -25,6 +27,10 @@
     color: $input-placeholder-color;
   }
 
+  .mat-hint {
+    color: mat-color($foreground, secondary-text);
+  }
+
   // :focus is applied to the input, but we apply mat-focused to the other elements
   // that need to listen to it.
   .mat-focused .mat-input-placeholder {
@@ -40,7 +46,7 @@
   }
 
   .mat-input-element:disabled {
-    color: mat-color($foreground, disabled-text);
+    color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.42));
   }
 
   // See _mat-input-placeholder-floating mixin in input-container.scss
@@ -53,6 +59,10 @@
 
   .mat-input-underline {
     background-color: $input-underline-color;
+
+    &.mat-disabled {
+      @include mat-control-disabled-underline($input-underline-color);
+    }
   }
 
   .mat-input-ripple {

src/lib/input/input-container.scss

@@ -1,6 +1,5 @@
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
-@import '../core/style/form-common';
 
 
 // Min amount of space between start and end hint.
@@ -201,7 +200,6 @@ textarea.mat-input-element {
   width: 100%;
 
   &.mat-disabled {
-    @include mat-control-disabled-underline();
     background-position: 0;
     background-color: transparent;
   }

src/lib/select/_select-theme.scss

@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/style/form-common';
 @import '../core/typography/typography-utils';
 
 @mixin _mat-select-inner-content-theme($palette) {
@@ -20,20 +21,27 @@
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
+  $is-dark-theme: map-get($theme, is-dark);
+  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
 
   .mat-select-trigger,
   .mat-select-arrow {
-    color: mat-color($foreground, hint-text);
+    color: mat-color($foreground, secondary-text);
   }
 
   .mat-select-underline {
-    background-color: mat-color($foreground, divider);
+    background-color: $underline-color;
+  }
+
+  [aria-disabled='true'] .mat-select-underline {
+    // Since this is a dotted line, we need to make it slightly darker to get it to stand out.
+    @include mat-control-disabled-underline($underline-color);
   }
 
   .mat-select-disabled .mat-select-value,
   .mat-select-arrow,
   .mat-select-trigger {
-    color: mat-color($foreground, hint-text);
+    color: mat-color($foreground, secondary-text);
   }
 
   .mat-select-content, .mat-select-panel-done-animating {

src/lib/select/select.scss

@@ -1,6 +1,5 @@
 @import '../core/style/menu-common';
 @import '../core/style/list-common';
-@import '../core/style/form-common';
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
 @import '../core/a11y/a11y';
@@ -44,7 +43,6 @@ $mat-select-trigger-underline-height: 1px !default;
   }
 
   .mat-select-disabled & {
-    @include mat-control-disabled-underline();
     background-color: transparent;
     background-position: 0 bottom;
   }