TextField:

- add text field component theme;
- bind text field component with its theme;
- introduce hint and label colors in text field theme (need author permit);
- customize textfield hint or float label with custom line height.

src/styles/themes/light-theme.js

@@ -149,6 +149,16 @@ var LightTheme = {
       },
       tabs: {
         backgroundColor: palette.primary1Color,
+      },
+      textField: {
+        textColor: palette.textColor,
+        hintColor: palette.disabledColor,
+        floatingLabelColor: palette.textColor,
+        disabledTextColor: palette.disabledColor,
+        errorColor: Colors.red500,
+        focusColor: palette.primary1Color,
+        backgroundColor: 'transparent',
+        borderColor: palette.borderColor
       }
     };
 

src/text-field.jsx

@@ -1,6 +1,5 @@
 var React = require('react');
 var ColorManipulator = require('./utils/color-manipulator');
-var Colors = require('./styles/colors');
 var StylePropable = require('./mixins/style-propable');
 var Transitions = require('./styles/transitions');
 var UniqueId = require('./utils/unique-id');
@@ -48,6 +47,10 @@ var TextField = React.createClass({
     };
   },
 
+  getTheme: function() {
+    return this.context.muiTheme.component.textField;
+  },
+
   componentDidMount: function() {
     this._uniqueId = UniqueId.generate();
   },
@@ -71,11 +74,7 @@ var TextField = React.createClass({
     if (newState) this.setState(newState);
   },
 
-  errorColor: Colors.red500,
-
   getStyles: function() {
-    var palette = this.context.muiTheme.palette;
-    var disabledTextColor = palette.disabledColor;
     var props = this.props;
 
     var styles = {
@@ -94,14 +93,14 @@ var TextField = React.createClass({
         bottom: -10,
         fontSize: 12,
         lineHeight: '12px',
-        color: this.errorColor,
+        color: this.getTheme().errorColor,
         transition: Transitions.easeOut(),
       },
       hint: {
         position: 'absolute',
         lineHeight: '48px',
         opacity: 1,
-        color: disabledTextColor,
+        color: this.getTheme().hintColor,
         transition: Transitions.easeOut()
       },
       input: {
@@ -111,13 +110,13 @@ var TextField = React.createClass({
         height: '100%',
         border: 'none',
         outline: 'none',
-        backgroundColor: 'transparent',
-        color: props.disabled ? disabledTextColor : palette.textColor,
+        backgroundColor: this.getTheme().backgroundColor,
+        color: props.disabled ? this.getTheme().disabledTextColor : this.getTheme().textColor,
         font: 'inherit'
       },
       underline: {
         border: 'none',
-        borderBottom: 'solid 1px ' + palette.borderColor,
+        borderBottom: 'solid 1px ' + this.getTheme().borderColor,
         position: 'absolute',
         width: '100%',
         bottom: 8,
@@ -133,7 +132,7 @@ var TextField = React.createClass({
         userSelect: 'none',
         cursor: 'default',
         bottom: 0,
-        color: disabledTextColor
+        color: this.getTheme().disabledTextColor
       }
     };
 
@@ -153,19 +152,19 @@ var TextField = React.createClass({
 
     styles.focusUnderline= this.mergeStyles(styles.underline, {
       borderBottom: 'solid 2px',
-      borderColor: palette.primary1Color,
+      borderColor: this.getTheme().focusColor,
       transform: 'scaleX(0)',
       transition: Transitions.easeOut(),
     });
 
     if (this.state.isFocused) {
-      styles.floatingLabel.color = palette.primary1Color;
+      styles.floatingLabel.color = this.getTheme().focusColor;
       styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0, -18px, 0)';
       styles.focusUnderline.transform = 'scaleX(1)';
     }
 
     if (this.state.hasValue) {
-      styles.floatingLabel.color = ColorManipulator.fade(palette.textColor, 0.5);
+      styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? this.getTheme().disabledTextColor : this.getTheme().floatingLabelColor, 0.5);
       styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0, -18px, 0)';
       styles.hint.opacity = 0;
     }
@@ -177,11 +176,15 @@ var TextField = React.createClass({
       if (this.state.isFocused && !this.state.hasValue) styles.hint.opacity = 1;
     }
 
-    if (props.errorText && this.state.isFocused) styles.floatingLabel.color = this.errorColor;
+    if (props.style && props.style.height) {
+      styles.hint.lineHeight = props.style.height;
+    }
+
+    if (props.errorText && this.state.isFocused) styles.floatingLabel.color = this.getTheme().errorColor;
     if (props.floatingLabelText && !props.multiLine) styles.input.paddingTop = 26;
 
     if (props.errorText) {
-      styles.focusUnderline.borderColor = this.errorColor;
+      styles.focusUnderline.borderColor = this.getTheme().errorColor;
       styles.focusUnderline.transform = 'scaleX(1)';
     }