Fix a number of unthemeable elements.

Replace hard-coded color values with colors derived from either text or canvas color. Closes #3135
mui · Feb 6, 2016 · 69335df · 69335df
1 parent 2867e20
commit 69335df
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 49 deletions.
diff --git a/src/Subheader/Subheader.jsx b/src/Subheader/Subheader.jsx
@@ -42,10 +42,12 @@ let Subheader = (props) => {
     prepareStyles,
   } = muiTheme;
 
+  const theme = muiTheme.subheader;
+
   const styles = {
     root: {
       boxSizing: 'border-box',
-      color: Typography.textLightBlack,
+      color: theme.color,
       fontSize: 14,
       fontWeight: Typography.fontWeightMedium,
       lineHeight: '48px',

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 getMuiTheme from './styles/getMuiTheme';
 
 const Avatar = React.createClass({
@@ -60,8 +59,6 @@ const Avatar = React.createClass({
 
   getDefaultProps() {
     return {
-      backgroundColor: Colors.grey400,
-      color: Colors.white,
       size: 40,
     };
   },
@@ -86,6 +83,8 @@ const Avatar = React.createClass({
   },
 
   render() {
+    const theme = this.state.muiTheme.avatar;
+
     let {
       backgroundColor,
       color,
@@ -108,7 +107,7 @@ const Avatar = React.createClass({
     };
 
     if (src) {
-      const borderColor = this.state.muiTheme.avatar.borderColor;
+      const borderColor = theme.borderColor;
 
       if (borderColor) {
         styles.root = this.mergeStyles(styles.root, {
@@ -128,19 +127,19 @@ const Avatar = React.createClass({
       );
     } else {
       styles.root = this.mergeStyles(styles.root, {
-        backgroundColor: backgroundColor,
+        backgroundColor: backgroundColor || theme.backgroundColor,
         textAlign: 'center',
         lineHeight: size + 'px',
         fontSize: size / 2 + 4,
-        color: color,
+        color: color || theme.color,
       });
 
       const styleIcon = {
         margin: 8,
       };
 
       const iconElement = icon ? React.cloneElement(icon, {
-        color: color,
+        color: color || theme.color,
         style: this.mergeStyles(styleIcon, icon.props.style),
       }) : null;
 

diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx
@@ -41,8 +41,6 @@ const CardHeader = React.createClass({
 
   getDefaultProps() {
     return {
-      titleColor: Styles.Colors.darkBlack,
-      subtitleColor: Styles.Colors.lightBlack,
       avatar: null,
     };
   },
@@ -67,6 +65,8 @@ const CardHeader = React.createClass({
   },
 
   getStyles() {
+    const theme = this.state.muiTheme.card;
+
     return {
       root: {
         height: 72,
@@ -83,12 +83,12 @@ const CardHeader = React.createClass({
         marginRight: 16,
       },
       title: {
-        color: this.props.titleColor,
+        color: this.props.titleColor || theme.titleColor,
         display: 'block',
         fontSize: 15,
       },
       subtitle: {
-        color: this.props.subtitleColor,
+        color: this.props.subtitleColor || theme.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 getMuiTheme from '../styles/getMuiTheme';
 
@@ -36,13 +35,6 @@ const CardTitle = React.createClass({
     StylePropable,
   ],
 
-  getDefaultProps() {
-    return {
-      titleColor: Styles.Colors.darkBlack,
-      subtitleColor: Styles.Colors.lightBlack,
-    };
-  },
-
   getInitialState() {
     return {
       muiTheme: this.context.muiTheme || getMuiTheme(),
@@ -65,20 +57,22 @@ const CardTitle = React.createClass({
   },
 
   getStyles() {
+    const theme = this.state.muiTheme.card;
+
     return {
       root: {
         padding: 16,
         position: 'relative',
       },
       title: {
         fontSize: 24,
-        color: this.props.titleColor,
+        color: this.props.titleColor || theme.titleColor,
         display: 'block',
         lineHeight: '36px',
       },
       subtitle: {
         fontSize: 14,
-        color: this.props.subtitleColor,
+        color: this.props.subtitleColor || theme.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';
@@ -122,7 +121,6 @@ const FloatingActionButton = React.createClass({
   getDefaultProps() {
     return {
       disabled: false,
-      disabledColor: Colors.grey300,
       mini: false,
       secondary: false,
     };

diff --git a/src/ripples/circle-ripple.jsx b/src/ripples/circle-ripple.jsx
@@ -4,7 +4,6 @@ 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';
 
 const CircleRipple = React.createClass({
 
@@ -31,7 +30,6 @@ const CircleRipple = React.createClass({
 
   getDefaultProps() {
     return {
-      color: Colors.darkBlack,
       opacity: 0.16,
     };
   },

diff --git a/src/ripples/focus-ripple.jsx b/src/ripples/focus-ripple.jsx
@@ -3,7 +3,6 @@ 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';
 
@@ -34,12 +33,6 @@ const FocusRipple = React.createClass({
     StylePropable,
   ],
 
-  getDefaultProps() {
-    return {
-      color: Colors.darkBlack,
-    };
-  },
-
   componentDidMount() {
     if (this.props.show) {
       this._setRippleSize();
@@ -57,6 +50,8 @@ const FocusRipple = React.createClass({
   },
 
   _getRippleElement(props) {
+    const theme = this.props.muiTheme.ripple;
+
     const {
       color,
       innerStyle,
@@ -69,7 +64,7 @@ const FocusRipple = React.createClass({
       width: '100%',
       borderRadius: '50%',
       opacity: opacity ? opacity : 0.16,
-      backgroundColor: color,
+      backgroundColor: color || theme.color,
       transition: Transitions.easeOut(pulsateDuration + 'ms', 'transform', null, Transitions.easeInOutFunction),
     }, innerStyle);
 

diff --git a/src/ripples/touch-ripple.jsx b/src/ripples/touch-ripple.jsx
@@ -59,6 +59,8 @@ const TouchRipple = React.createClass({
   },
 
   start(e, isRippleTouchGenerated) {
+    const theme = this.props.muiTheme.ripple;
+
     if (this._ignoreNextMouseDown && !isRippleTouchGenerated) {
       this._ignoreNextMouseDown = false;
       return;
@@ -72,7 +74,7 @@ const TouchRipple = React.createClass({
         key={this.state.nextKey}
         muiTheme={this.props.muiTheme}
         style={!this.props.centerRipple ? this._getRippleStyle(e) : {}}
-        color={this.props.color}
+        color={this.props.color || theme.color}
         opacity={this.props.opacity}
         touchGenerated={isRippleTouchGenerated}
       />

diff --git a/src/styles/getMuiTheme.js b/src/styles/getMuiTheme.js
@@ -31,7 +31,11 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       height: spacing.desktopKeylineIncrement,
     },
     avatar: {
-      borderColor: 'rgba(0, 0, 0, 0.08)',
+      color: palette.canvasColor,
+      backgroundColor: ColorManipulator.luminance(palette.canvasColor) > 0.5 ?
+        ColorManipulator.darken(palette.canvasColor, 0.26) :
+        ColorManipulator.lighten(palette.canvasColor, 1.26, 1.0),
+      borderColor: ColorManipulator.fade(palette.textColor, 0.08),
     },
     badge: {
       color: palette.alternateTextColor,
@@ -46,6 +50,10 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       minWidth: 88,
       iconButtonSize: spacing.iconSize * 2,
     },
+    card: {
+      titleColor: ColorManipulator.fade(palette.textColor, 0.87),
+      subtitleColor: ColorManipulator.fade(palette.textColor, 0.54),
+    },
     cardText: {
       textColor: palette.textColor,
     },
@@ -83,6 +91,9 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       secondaryColor: palette.primary1Color,
       secondaryIconColor: palette.alternateTextColor,
       disabledTextColor: palette.disabledColor,
+      disabledColor: ColorManipulator.luminance(palette.canvasColor) > 0.5 ?
+        ColorManipulator.darken(palette.canvasColor, 0.12) :
+        ColorManipulator.lighten(palette.canvasColor, 1.12, 1.0),
     },
     gridTile: {
       textColor: Colors.white,
@@ -104,7 +115,7 @@ export default function getMuiTheme(baseTheme, muiTheme) {
     menuItem: {
       dataHeight: 32,
       height: 48,
-      hoverColor: 'rgba(0, 0, 0, .035)',
+      hoverColor: ColorManipulator.fade(palette.textColor, 0.035),
       padding: spacing.desktopGutter,
       selectedTextColor: palette.accent1Color,
     },
@@ -150,6 +161,9 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       strokeColor: palette.borderColor,
       loadingStrokeColor: palette.primary1Color,
     },
+    ripple: {
+      color: ColorManipulator.fade(palette.textColor, 0.87),
+    },
     slider: {
       trackSize: 2,
       trackColor: palette.primary3Color,
@@ -167,6 +181,9 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       backgroundColor: palette.textColor,
       actionColor: palette.accent1Color,
     },
+    subheader: {
+      color: ColorManipulator.fade(palette.textColor, 0.54),
+    },
     table: {
       backgroundColor: palette.canvasColor,
     },
@@ -217,12 +234,14 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       trackRequiredColor: ColorManipulator.fade(palette.primary1Color, 0.5),
     },
     toolbar: {
+      color: ColorManipulator.fade(palette.textColor, 0.54),
+      hoverColor: ColorManipulator.fade(palette.textColor, 0.87),
       backgroundColor: ColorManipulator.darken(palette.accent2Color, 0.05),
       height: 56,
       titleFontSize: 20,
-      iconColor: 'rgba(0, 0, 0, .40)',
-      separatorColor: 'rgba(0, 0, 0, .175)',
-      menuHoverColor: 'rgba(0, 0, 0, .10)',
+      iconColor: ColorManipulator.fade(palette.textColor, 0.4),
+      separatorColor: ColorManipulator.fade(palette.textColor, 0.175),
+      menuHoverColor: ColorManipulator.fade(palette.textColor, 0.1),
     },
     tabs: {
       backgroundColor: palette.primary1Color,

diff --git a/src/toolbar/toolbar-group.jsx b/src/toolbar/toolbar-group.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Colors from '../styles/colors';
 import getMuiTheme from '../styles/getMuiTheme';
 
 function getStyles(props, state) {
@@ -28,7 +27,7 @@ function getStyles(props, state) {
     dropDownMenu: {
       root: {
         float: 'left',
-        color: Colors.lightBlack, // removes hover color change, we want to keep it
+        color: toolbar.color, // removes hover color change, we want to keep it
         display: 'inline-block',
         marginRight: baseTheme.spacing.desktopGutter,
       },
@@ -54,7 +53,7 @@ function getStyles(props, state) {
         paddingLeft: baseTheme.spacing.desktopGutter,
       },
       hover: {
-        color: Colors.darkBlack,
+        color: toolbar.hoverColor,
       },
     },
     span: {

diff --git a/src/utils/color-manipulator.js b/src/utils/color-manipulator.js
@@ -14,7 +14,7 @@ export default {
    *
    * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
    */
-  _luminance(color) {
+  luminance(color) {
     color = this._decomposeColor(color);
 
     if (color.type.indexOf('rgb') > -1) {
@@ -97,8 +97,8 @@ export default {
     return this._convertColorToString(color, amount);
   },
 
-  // Desaturates rgb and sets opacity to 0.15
-  lighten(color, amount) {
+  // Desaturates rgb and sets opacity (defaults to 0.15)
+  lighten(color, amount, opacity = '0.15') {
     color = this._decomposeColor(color);
 
     if (color.type.indexOf('hsl') > -1) {
@@ -113,7 +113,7 @@ export default {
 
     if (color.type.indexOf('a') <= -1) color.type += 'a';
 
-    return this._convertColorToString(color, '0.15');
+    return this._convertColorToString(color, opacity);
   },
 
   darken(color, amount) {
@@ -137,8 +137,8 @@ export default {
   //
   // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
   contrastRatio(background, foreground) {
-    let lumA = this._luminance(background);
-    let lumB = this._luminance(foreground);
+    let lumA = this.luminance(background);
+    let lumB = this.luminance(foreground);
 
     if (lumA >= lumB) {
       return ((lumA + 0.05) / (lumB + 0.05)).toFixed(2);