fix(input): correct invalid colors (#4771)

* fix(input): correct invalid colors

- Make ripple & placeholder use warn color even with .mat-accent class
- Make req'd asterisk warn color whenever input is invalid

* Address comments

Author: willshowell

src/demo-app/input/input-demo.html

@@ -140,6 +140,20 @@ <h4>Textarea</h4>
     <md-input-container color="warn">
       <textarea mdInput placeholder="Warn Color">example</textarea>
     </md-input-container>
+
+    <h4>With error</h4>
+    <md-input-container color="primary" >
+      <input mdInput placeholder="Default Color" [(ngModel)]="dividerColorExample1" required>
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <md-input-container color="accent">
+      <input mdInput placeholder="Accent Color" [(ngModel)]="dividerColorExample2" required>
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <md-input-container color="warn">
+      <input mdInput placeholder="Warn Color" [(ngModel)]="dividerColorExample3" required>
+      <md-error>This field is required</md-error>
+    </md-input-container>
   </md-card-content>
 </md-card>
 

src/demo-app/input/input-demo.ts

@@ -23,6 +23,9 @@ export class InputDemo {
   errorMessageExample1: string;
   errorMessageExample2: string;
   errorMessageExample3: string;
+  dividerColorExample1: string;
+  dividerColorExample2: string;
+  dividerColorExample3: string;
   items: any[] = [
     { value: 10 },
     { value: 20 },

src/lib/input/_input-theme.scss

@@ -42,7 +42,7 @@
     color: mat-color($foreground, disabled-text);
   }
 
-  // See mat-input-placeholder-floating mixin in input.scss
+  // See mat-input-placeholder-floating mixin in input-container.scss
   input.mat-input-element:-webkit-autofill + .mat-input-placeholder,
   .mat-focused .mat-input-placeholder.mat-float {
     .mat-placeholder-required {
@@ -52,26 +52,31 @@
 
   .mat-input-underline {
     border-color: $input-underline-color;
+  }
 
-    .mat-input-ripple {
-      background-color: $input-underline-focused-color;
+  .mat-input-ripple {
+    background-color: $input-underline-focused-color;
 
-      &.mat-accent {
-        background-color: $input-underline-color-accent;
-      }
-      &.mat-warn {
-        background-color: $input-underline-color-warn;
-      }
+    &.mat-accent {
+      background-color: $input-underline-color-accent;
+    }
+
+    &.mat-warn {
+      background-color: $input-underline-color-warn;
     }
   }
 
   // Styling for the error state of the input container. Note that while the same can be
   // achieved with the ng-* classes, we use this approach in order to ensure that the same
   // logic is used to style the error state and to show the error messages.
   .mat-input-invalid {
-    .mat-input-placeholder,
-    .mat-placeholder-required {
+    .mat-input-placeholder {
       color: $input-underline-color-warn;
+
+      &.mat-accent,
+      &.mat-float .mat-placeholder-required {
+        color: $input-underline-color-warn;
+      }
     }
 
     .mat-input-ripple {