use core-style

Author: Yvonne Yip

bower.json

@@ -3,6 +3,7 @@
   "private": true,
   "dependencies": {
     "polymer": "Polymer/polymer#master",
-    "core-input": "Polymer/core-input#master"
+    "core-input": "Polymer/core-input#master",
+    "core-style": "Polymer/core-style#master"
   }
 }

paper-input.css

@@ -40,21 +40,6 @@
   resize: none;
 }
 
-.focusedColor {
-  color: #4059a9;
-  background: #4059a9;
-}
-
-:host(.invalid) #underline,
-:host(.invalid) #underlineHighlight,
-:host(.invalid) .focusedColor {
-  color: #d34336;
-  background: #d34336;
-}
-:host(.invalid) #floatedLabel {
-  color: #d34336;
-}
-
 #floatedLabel {
   font-size: 0.75em;
   background: transparent;
@@ -111,7 +96,6 @@
 #error {
   -webkit-flex: 1;
   flex: 1;
-  color: #d34336;
   font-size: 0.75em;
   padding: 0.5em 0;
 }

paper-input.html

@@ -16,20 +16,53 @@
     <paper-input label="Your Name"></paper-input>
     <paper-input multiline label="Enter multiple lines here"></paper-input>
 
+Theming
+--------
+
+Set `CoreStyle.g.paperInput.focusedColor` and `CoreStyle.g.paperInput.invalidColor` to theme
+the focused and invalid states.
+
 @group Paper Elements
 @element paper-input
 @extends core-input
 @homepage github.io
 -->
 <link href="../polymer/polymer.html" rel="import">
 <link href="../core-input/core-input.html" rel="import">
+<link href="../core-style/core-style.html" rel="import">
+
+<core-style id="paper-input">
+
+#label.focused,
+#floatedLabel.focused {
+  color: {{g.paperInput.focusedColor}};
+}
+
+#underlineHighlight.focused,
+#caretInner {
+  background-color: {{g.paperInput.focusedColor}};
+}
+
+#error,
+:host(.invalid) #label.focused,
+:host(.invalid) #floatedLabel.focused {
+  color: {{g.paperInput.invalidColor}};
+}
+:host(.invalid) #underlineHighlight.focused,
+:host(.invalid) #caretInner {
+  background-color: {{g.paperInput.invalidColor}};
+}
+
+</core-style>
 
 <polymer-element name="paper-input" extends="core-input" attributes="label floatingLabel maxRows error" on-down="{{downAction}}" on-up="{{upAction}}">
 
   <template>
 
     <link href="paper-input.css" rel="stylesheet">
 
+    <core-style ref="paper-input"></core-style>
+
     <div id="floatedLabel" class="hidden" hidden?="{{!floatingLabel}}"><span id="floatedLabelSpan">{{label}}</span></div>
 
     <div id="container" on-transitionend="{{transitionEndAction}}" on-webkitTransitionEnd="{{transitionEndAction}}">
@@ -71,6 +104,12 @@
 
   <script>
 
+  (function() {
+
+    var paperInput = CoreStyle.g.paperInput = CoreStyle.g.paperInput || {};
+    paperInput.focusedColor = '#4059a9';
+    paperInput.invalidColor = '#d34336';
+
     Polymer('paper-input', {
 
       /**
@@ -336,6 +375,8 @@
 
     });
 
+  }());
+
   </script>
 
 </polymer-element>