From ec58b6fc7b847f02aac783424147c92f4e330b15 Mon Sep 17 00:00:00 2001
From: Will Howell <will.s.howell@gmail.com>
Date: Wed, 24 May 2017 10:04:28 -0400
Subject: [PATCH 1/2] 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
---
 src/demo-app/input/input-demo.html | 14 ++++++++++++++
 src/demo-app/input/input-demo.ts   |  3 +++
 src/lib/input/_input-theme.scss    | 26 ++++++++++++++------------
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 4a24759a00b2..75b35dc052a3 100644
--- a/src/demo-app/input/input-demo.html
+++ b/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>
 
diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts
index f389aa8bbd3b..387e632dbee5 100644
--- a/src/demo-app/input/input-demo.ts
+++ b/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 },
diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
index bade74950614..8303a4628085 100644
--- a/src/lib/input/_input-theme.scss
+++ b/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,16 +52,17 @@
 
   .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;
     }
   }
 
@@ -69,9 +70,10 @@
   // 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 {
-      color: $input-underline-color-warn;
+    .mat-input-placeholder {
+      &, &.mat-accent, &.mat-float .mat-placeholder-required {
+        color: $input-underline-color-warn;
+      }
     }
 
     .mat-input-ripple {

From 1188db9da43f18a9d5aff60debff78ca0cb4013a Mon Sep 17 00:00:00 2001
From: Will Howell <will.s.howell@gmail.com>
Date: Wed, 24 May 2017 12:14:42 -0400
Subject: [PATCH 2/2] Address comments

---
 src/lib/input/_input-theme.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
index 8303a4628085..82e9dd7f0e4a 100644
--- a/src/lib/input/_input-theme.scss
+++ b/src/lib/input/_input-theme.scss
@@ -71,7 +71,10 @@
   // logic is used to style the error state and to show the error messages.
   .mat-input-invalid {
     .mat-input-placeholder {
-      &, &.mat-accent, &.mat-float .mat-placeholder-required {
+      color: $input-underline-color-warn;
+
+      &.mat-accent,
+      &.mat-float .mat-placeholder-required {
         color: $input-underline-color-warn;
       }
     }