From 48ce73d12cf9810271baf79255527108314a86f9 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Tue, 6 Sep 2016 10:00:40 +0200
Subject: [PATCH 1/3] Update demo

---
 demo/index.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/demo/index.html b/demo/index.html
index f84799de..b88f2eae 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -140,6 +140,27 @@ <h3>Inputs can have custom logic</h3>
         </paper-input-container>
       </template>
     </demo-snippet>
+    
+    <h3>Inputs can have custom error styling</h3>
+    <demo-snippet>
+      <template>
+        <style is="custom-style">
+          .styled-error-input {
+            --paper-input-container-label-invalid: {
+              color: var(--paper-indigo-500);
+            };
+            --paper-input-container-underline-invalid: {
+              background: var(--paper-orange-500);
+            };
+            --paper-input-container-add-on-invalid: {
+              color: var(--paper-blue-grey-600);
+            };
+          }
+        </style>
+        <paper-input class="styled-error-input" label="this input requires some text" required auto-validate error-message="needs some text!"></paper-input>
+        <paper-input class="styled-error-input" label="this input requires letters only" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
+      </template>
+    </demo-snippet>
   </div>
 
   <script>

From e2609700b66eebf668b54caa1729d5168c64af87 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Tue, 6 Sep 2016 10:07:35 +0200
Subject: [PATCH 2/3] Added mixins for different error-color styling

Added mixins for label, underline and error message
---
 paper-input-container.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/paper-input-container.html b/paper-input-container.html
index 72c3410d..cfb834b1 100644
--- a/paper-input-container.html
+++ b/paper-input-container.html
@@ -88,13 +88,16 @@
 `--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
 `--paper-input-container-label` | Mixin applied to the label | `{}`
 `--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}`
+`--paper-input-container-label-invalid` | Mixin applied to the label when the input is invalid | `{}`
 `--paper-input-container-label-floating` | Mixin applied to the label when floating | `{}`
 `--paper-input-container-input` | Mixin applied to the input | `{}`
 `--paper-input-container-underline` | Mixin applied to the underline | `{}`
 `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}`
+`--paper-input-container-underline-invalid` | Mixin applied to the underline when the input is invalid | `{}`
 `--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`
 `--paper-input-prefix` | Mixin applied to the input prefix | `{}`
 `--paper-input-suffix` | Mixin applied to the input suffix | `{}`
+`--paper-input-container-add-on-invalid` | Mixin applied to the add-on when the input is invalid | `{}`
 
 This element is `display:block` by default, but you can set the `inline` attribute to make it
 `display:inline-block`.
@@ -164,6 +167,7 @@
         transition: transform 0.25s;
 
         @apply(--paper-transition-easing);
+        @apply(--paper-input-container-underline-invalid);
       }
 
       .unfocused-line {
@@ -250,6 +254,8 @@
       .input-content.is-invalid ::content label,
       .input-content.is-invalid ::content .paper-input-label {
         color: var(--paper-input-container-invalid-color, --error-color);
+
+        @apply(--paper-input-container-label-invalid);
       }
 
       .input-content.label-is-hidden ::content label,
@@ -306,6 +312,8 @@
 
       .add-on-content.is-invalid ::content * {
         color: var(--paper-input-container-invalid-color, --error-color);
+
+        @apply(--paper-input-container-add-on-invalid);
       }
 
       .add-on-content.is-highlighted ::content * {

From 35f98917ac2bc3c71cb15e9a8c5359ea09ba1b4f Mon Sep 17 00:00:00 2001
From: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
Date: Tue, 6 Sep 2016 10:18:36 +0200
Subject: [PATCH 3/3] Update readme with mixin changes

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 0561f76e..a83de065 100644
--- a/README.md
+++ b/README.md
@@ -176,13 +176,16 @@ The following custom properties and mixins are available for styling:
 | `--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}` |
 | `--paper-input-container-label` | Mixin applied to the label | `{}` |
 | `--paper-input-container-label-focus` | Mixin applied to the label when the input is focused | `{}` |
+| `--paper-input-container-label-invalid` | Mixin applied to the label when the input is invalid | `{}` |
 | `--paper-input-container-label-floating` | Mixin applied to the label when floating | `{}` |
 | `--paper-input-container-input` | Mixin applied to the input | `{}` |
 | `--paper-input-container-underline` | Mixin applied to the underline | `{}` |
 | `--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}` |
+| `--paper-input-container-underline-invalid` | Mixin applied to the underline when the input is invalid | `{}` |
 | `--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}` |
 | `--paper-input-prefix` | Mixin applied to the input prefix | `{}` |
 | `--paper-input-suffix` | Mixin applied to the input suffix | `{}` |
+|`--paper-input-container-add-on-invalid` | Mixin applied to the add-on when the input is invalid | `{}` |
 
 This element is `display:block` by default, but you can set the `inline` attribute to make it
 `display:inline-block`.