Fix a few unthemable elements

Adjust textColor or canvasColor to find suitable replacements for hard-coded blacks/whites/greys
mui · Jan 13, 2016 · 3082089 · 3082089
1 parent d359ad5
commit 3082089
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 45 deletions.
diff --git a/src/avatar.jsx b/src/avatar.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import StylePropable from './mixins/style-propable';
-import Colors from './styles/colors';
 import DefaultRawTheme from './styles/raw-themes/light-raw-theme';
 import ThemeManager from './styles/theme-manager';
 
@@ -61,8 +60,6 @@ const Avatar = React.createClass({
 
   getDefaultProps() {
     return {
-      backgroundColor: Colors.grey400,
-      color: Colors.white,
       size: 40,
     };
   },
@@ -86,6 +83,10 @@ const Avatar = React.createClass({
     this.setState({muiTheme: newMuiTheme});
   },
 
+  getTheme() {
+    return this.state.muiTheme.avatar;
+  },
+
   render() {
     let {
       backgroundColor,
@@ -109,7 +110,7 @@ const Avatar = React.createClass({
     };
 
     if (src) {
-      const borderColor = this.state.muiTheme.avatar.borderColor;
+      const borderColor = this.getTheme().borderColor;
 
       if (borderColor) {
         styles.root = this.mergeStyles(styles.root, {
@@ -129,19 +130,19 @@ const Avatar = React.createClass({
       );
     } else {
       styles.root = this.mergeStyles(styles.root, {
-        backgroundColor: backgroundColor,
+        backgroundColor: backgroundColor || this.getTheme().backgroundColor,
         textAlign: 'center',
         lineHeight: size + 'px',
         fontSize: size / 2 + 4,
-        color: color,
+        color: color || this.getTheme().color,
       });
 
       const styleIcon = {
         margin: 8,
       };
 
       const iconElement = icon ? React.cloneElement(icon, {
-        color: color,
+        color: color || this.getTheme().color,
         style: this.mergeStyles(styleIcon, icon.props.style),
       }) : null;
 

diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx
@@ -42,8 +42,6 @@ const CardHeader = React.createClass({
 
   getDefaultProps() {
     return {
-      titleColor: Styles.Colors.darkBlack,
-      subtitleColor: Styles.Colors.lightBlack,
       avatar: null,
     };
   },
@@ -67,6 +65,10 @@ const CardHeader = React.createClass({
     this.setState({muiTheme: newMuiTheme});
   },
 
+  getTheme() {
+    return this.state.muiTheme.card;
+  },
+
   getStyles() {
     return {
       root: {
@@ -84,12 +86,12 @@ const CardHeader = React.createClass({
         marginRight: 16,
       },
       title: {
-        color: this.props.titleColor,
+        color: this.props.titleColor || this.getTheme().titleColor,
         display: 'block',
         fontSize: 15,
       },
       subtitle: {
-        color: this.props.subtitleColor,
+        color: this.props.subtitleColor || this.getTheme().subtitleColor,
         display: 'block',
         fontSize: 14,
       },

diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Styles from '../styles';
 import StylePropable from '../mixins/style-propable';
 import ThemeManager from '../styles/theme-manager';
 import DefaultRawTheme from '../styles/raw-themes/light-raw-theme';
@@ -37,13 +36,6 @@ const CardTitle = React.createClass({
     StylePropable,
   ],
 
-  getDefaultProps() {
-    return {
-      titleColor: Styles.Colors.darkBlack,
-      subtitleColor: Styles.Colors.lightBlack,
-    };
-  },
-
   getInitialState() {
     return {
       muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
@@ -65,6 +57,10 @@ const CardTitle = React.createClass({
     });
   },
 
+  getTheme() {
+    return this.state.muiTheme.card;
+  },
+
   getStyles() {
     return {
       root: {
@@ -73,13 +69,13 @@ const CardTitle = React.createClass({
       },
       title: {
         fontSize: 24,
-        color: this.props.titleColor,
+        color: this.props.titleColor || this.getTheme().titleColor,
         display: 'block',
         lineHeight: '36px',
       },
       subtitle: {
         fontSize: 14,
-        color: this.props.subtitleColor,
+        color: this.props.subtitleColor || this.getTheme().subtitleColor,
         display: 'block',
       },
     };

diff --git a/src/floating-action-button.jsx b/src/floating-action-button.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import StylePropable from './mixins/style-propable';
 import Transitions from './styles/transitions';
-import Colors from './styles/colors';
 import ColorManipulator from './utils/color-manipulator';
 import EnhancedButton from './enhanced-button';
 import FontIcon from './font-icon';
@@ -113,7 +112,6 @@ const FloatingActionButton = React.createClass({
   getDefaultProps() {
     return {
       disabled: false,
-      disabledColor: Colors.grey300,
       mini: false,
       secondary: false,
     };

diff --git a/src/lists/list.jsx b/src/lists/list.jsx
@@ -82,6 +82,10 @@ const List = React.createClass({
     this.setState({muiTheme: newMuiTheme});
   },
 
+  getTheme() {
+    return this.state.muiTheme.list;
+  },
+
   render() {
     const {
       children,
@@ -101,7 +105,7 @@ const List = React.createClass({
       },
 
       subheader: {
-        color: Typography.textLightBlack,
+        color: this.getTheme().subheaderTextColor,
         fontSize: 14,
         fontWeight: Typography.fontWeightMedium,
         lineHeight: '48px',

diff --git a/src/ripples/circle-ripple.jsx b/src/ripples/circle-ripple.jsx
@@ -4,7 +4,8 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
 import StylePropable from '../mixins/style-propable';
 import AutoPrefix from '../styles/auto-prefix';
 import Transitions from '../styles/transitions';
-import Colors from '../styles/colors';
+import ThemeManager from '../styles/theme-manager.js';
+import DefaultRawTheme from '../styles/raw-themes/light-raw-theme';
 
 const CircleRipple = React.createClass({
 
@@ -18,18 +19,45 @@ const CircleRipple = React.createClass({
     style: React.PropTypes.object,
   },
 
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  //for passing default theme context to children
+  childContextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
   mixins: [
     PureRenderMixin,
     StylePropable,
   ],
 
   getDefaultProps() {
     return {
-      color: Colors.darkBlack,
       opacity: 0.16,
     };
   },
 
+  getInitialState() {
+    return {
+      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
+    };
+  },
+
+  getChildContext() {
+    return {
+      muiTheme: this.state.muiTheme,
+    };
+  },
+
+  //to update theme inside state whenever a new theme is passed down
+  //from the parent / owner using context
+  componentWillReceiveProps(nextProps, nextContext) {
+    const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    this.setState({muiTheme: newMuiTheme});
+  },
+
   componentWillAppear(callback) {
     this._initializeAnimation(callback);
   },
@@ -54,6 +82,10 @@ const CircleRipple = React.createClass({
     }, 2000);
   },
 
+  getTheme() {
+    return this.state.muiTheme.ripple;
+  },
+
   _animate() {
     let style = ReactDOM.findDOMNode(this).style;
     const transitionValue = (
@@ -88,7 +120,7 @@ const CircleRipple = React.createClass({
       height: '100%',
       width: '100%',
       borderRadius: '50%',
-      backgroundColor: color,
+      backgroundColor: color || this.getTheme().circleColor,
     }, style);
 
     return (

diff --git a/src/ripples/focus-ripple.jsx b/src/ripples/focus-ripple.jsx
@@ -3,9 +3,10 @@ import ReactDOM from 'react-dom';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import StylePropable from '../mixins/style-propable';
 import AutoPrefix from '../styles/auto-prefix';
-import Colors from '../styles/colors';
 import Transitions from '../styles/transitions';
 import ScaleInTransitionGroup from '../transition-groups/scale-in';
+import ThemeManager from '../styles/theme-manager.js';
+import DefaultRawTheme from '../styles/raw-themes/light-raw-theme';
 
 const pulsateDuration = 750;
 
@@ -23,14 +24,29 @@ const FocusRipple = React.createClass({
     style: React.PropTypes.object,
   },
 
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  //for passing default theme context to children
+  childContextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
   mixins: [
     PureRenderMixin,
     StylePropable,
   ],
 
-  getDefaultProps() {
+  getInitialState() {
+    return {
+      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
+    };
+  },
+
+  getChildContext() {
     return {
-      color: Colors.darkBlack,
+      muiTheme: this.state.muiTheme,
     };
   },
 
@@ -41,6 +57,13 @@ const FocusRipple = React.createClass({
     }
   },
 
+  //to update theme inside state whenever a new theme is passed down
+  //from the parent / owner using context
+  componentWillReceiveProps(nextProps, nextContext) {
+    const newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+    this.setState({muiTheme: newMuiTheme});
+  },
+
   componentDidUpdate() {
     if (this.props.show) {
       this._setRippleSize();
@@ -50,6 +73,10 @@ const FocusRipple = React.createClass({
     }
   },
 
+  getTheme() {
+    return this.state.muiTheme.ripple;
+  },
+
   _getRippleElement(props) {
     const {
       color,
@@ -63,7 +90,7 @@ const FocusRipple = React.createClass({
       width: '100%',
       borderRadius: '50%',
       opacity: opacity ? opacity : 0.16,
-      backgroundColor: color,
+      backgroundColor: color || this.getTheme().focusColor,
       transition: Transitions.easeOut(pulsateDuration + 'ms', 'transform', null, Transitions.easeInOutFunction),
     }, innerStyle);