Merge pull request #3314 from heetvachhani/migrate_colors

[Core] Migrate color to muiTheme

src/app-bar.jsx

@@ -9,7 +9,6 @@ import warning from 'warning';
 function getStyles(props, state) {
   const {
     appBar,
-    baseTheme,
     button: {
       iconButtonSize,
     },
@@ -26,8 +25,8 @@ function getStyles(props, state) {
       display: 'flex',
       minHeight: appBar.height,
       backgroundColor: appBar.color,
-      paddingLeft: baseTheme.spacing.desktopGutter,
-      paddingRight: baseTheme.spacing.desktopGutter,
+      paddingLeft: appBar.padding,
+      paddingRight: appBar.padding,
     },
     title: {
       whiteSpace: 'nowrap',

src/date-picker/calendar-year.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Colors from '../styles/colors';
 import DateTime from '../utils/date-time';
 import YearButton from './year-button';
+import getMuiTheme from '../styles/getMuiTheme';
 
 const CalendarYear = React.createClass({
 
@@ -14,6 +14,26 @@ const CalendarYear = React.createClass({
     selectedDate: React.PropTypes.object.isRequired,
   },
 
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  childContextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  getInitialState() {
+    return {
+      muiTheme: this.context.muiTheme || getMuiTheme(),
+    };
+  },
+
+  getChildContext() {
+    return {
+      muiTheme: this.state.muiTheme,
+    };
+  },
+
   componentDidMount() {
     this._scrollToSelectedYear();
   },
@@ -72,13 +92,14 @@ const CalendarYear = React.createClass({
 
   render() {
     const years = this._getYears();
+    const backgroundColor = this.state.muiTheme.datePicker.calendarYearBackgroundColor;
     const styles = {
       position: 'relative',
       height: 'inherit',
       lineHeight: '36px',
       textAlign: 'center',
       padding: '8px 14px 0 14px',
-      backgroundColor: Colors.white,
+      backgroundColor: backgroundColor,
       overflowX: 'hidden',
       overflowY: 'scroll',
     };

src/enhanced-button.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Colors from './styles/colors';
 import Children from './utils/children';
 import Events from './utils/events';
 import KeyCode from './utils/key-code';
@@ -274,6 +273,7 @@ const EnhancedButton = React.createClass({
 
     const {
       prepareStyles,
+      enhancedButton,
     } = this.state.muiTheme;
 
     const mergedStyles = Object.assign({
@@ -283,7 +283,7 @@ const EnhancedButton = React.createClass({
       display: 'inline-block',
       font: 'inherit',
       fontFamily: this.state.muiTheme.rawTheme.fontFamily,
-      tapHighlightColor: Colors.transparent,
+      tapHighlightColor: enhancedButton.tapHighlightColor,
       cursor: disabled ? 'default' : 'pointer',
       textDecoration: 'none',
       outline: 'none',

src/lists/list-item.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ColorManipulator from '../utils/color-manipulator';
-import Colors from '../styles/colors';
 import Transitions from '../styles/transitions';
 import EnhancedButton from '../enhanced-button';
 import IconButton from '../icon-button';
@@ -424,14 +423,17 @@ const ListItem = React.createClass({
       ...other,
     } = this.props;
 
+    const{
+      listItem,
+    } = this.state.muiTheme;
+
     const textColor = this.state.muiTheme.rawTheme.palette.textColor;
     const hoverColor = ColorManipulator.fade(textColor, 0.1);
     const singleAvatar = !secondaryText && (leftAvatar || rightAvatar);
     const singleNoAvatar = !secondaryText && !(leftAvatar || rightAvatar);
     const twoLine = secondaryText && secondaryTextLines === 1;
     const threeLine = secondaryText && secondaryTextLines > 1;
     const hasCheckbox = leftCheckbox || rightToggle;
-    const secondaryTextColor = this.state.muiTheme.listItem.secondaryTextColor;
 
     const styles = {
       root: {
@@ -466,14 +468,14 @@ const ListItem = React.createClass({
       },
 
       leftIcon: {
-        color: Colors.grey600,
-        fill: Colors.grey600,
+        color: listItem.leftIconColor,
+        fill: listItem.leftIconColor,
         left: 4,
       },
 
       rightIcon: {
-        color: Colors.grey400,
-        fill: Colors.grey400,
+        color: listItem.rightIconColor,
+        fill: listItem.rightIconColor,
         right: 4,
       },
 
@@ -526,7 +528,7 @@ const ListItem = React.createClass({
         height: threeLine ? 36 : 16,
         margin: 0,
         marginTop: 4,
-        color: secondaryTextColor,
+        color: listItem.secondaryTextColor,
 
         //needed for 2 and 3 line ellipsis
         overflow: 'hidden',

src/menus/menu-item.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
-import Colors from '../styles/colors';
 import Popover from '../popover/popover';
 import CheckIcon from '../svg-icons/navigation/check';
 import ListItem from '../lists/list-item';
@@ -212,6 +211,7 @@ const MenuItem = React.createClass({
 
     const {
       prepareStyles,
+      menuItem,
     } = this.state.muiTheme;
 
     const disabledColor = this.state.muiTheme.rawTheme.palette.disabledColor;
@@ -248,7 +248,7 @@ const MenuItem = React.createClass({
         margin: 0,
         right: 24,
         top: 4,
-        fill: Colors.grey600,
+        fill: menuItem.rightIconDesktopFill,
       },
     };
 

src/overlay.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import getMuiTheme from './styles/getMuiTheme';
 import Transitions from './styles/transitions';
-import Colors from './styles/colors';
 
-function getStyles(props) {
+function getStyles(props, state) {
+  const {overlay} = state.muiTheme;
+
   const style = {
     root: {
       position: 'fixed',
@@ -12,7 +13,7 @@ function getStyles(props) {
       top: 0,
       left: '-100%',
       opacity: 0,
-      backgroundColor: Colors.lightBlack,
+      backgroundColor: overlay.backgroundColor,
       WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
 
       // Two ways to promote overlay to its own render layer

src/styles/getMuiTheme.js

@@ -31,6 +31,7 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       textColor: palette.alternateTextColor,
       height: spacing.desktopKeylineIncrement,
       titleFontWeight: Typography.fontWeightNormal,
+      padding: spacing.desktopGutter,
     },
     avatar: {
       color: palette.canvasColor,
@@ -81,10 +82,14 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       calendarTextColor: palette.textColor,
       selectColor: palette.primary2Color,
       selectTextColor: palette.alternateTextColor,
+      calendarYearBackgroundColor: Colors.white,
     },
     dropDownMenu: {
       accentColor: palette.borderColor,
     },
+    enhancedButton: {
+      tapHighlightColor: Colors.transparent,
+    },
     flatButton: {
       color: Colors.transparent,
       buttonFilterColor: '#999999',
@@ -120,6 +125,8 @@ export default function getMuiTheme(baseTheme, muiTheme) {
     listItem: {
       nestedLevelDepth: 18,
       secondaryTextColor: Colors.lightBlack,
+      leftIconColor: Colors.grey600,
+      rightIconColor: Colors.grey400,
     },
     menu: {
       backgroundColor: palette.canvasColor,
@@ -131,12 +138,16 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       hoverColor: ColorManipulator.fade(palette.textColor, 0.035),
       padding: spacing.desktopGutter,
       selectedTextColor: palette.accent1Color,
+      rightIconDesktopFill: Colors.grey600,
     },
     menuSubheader: {
       padding: spacing.desktopGutter,
       borderColor: palette.borderColor,
       textColor: palette.primary1Color,
     },
+    overlay: {
+      backgroundColor: Colors.lightBlack,
+    },
     paper: {
       color: palette.textColor,
       backgroundColor: palette.canvasColor,
@@ -259,6 +270,10 @@ export default function getMuiTheme(baseTheme, muiTheme) {
       separatorColor: ColorManipulator.fade(palette.textColor, 0.175),
       menuHoverColor: ColorManipulator.fade(palette.textColor, 0.1),
     },
+    tooltip: {
+      color: Colors.white,
+      rippleBackgroundColor: Colors.grey700,
+    },
     tabs: {
       backgroundColor: palette.primary1Color,
       textColor: ColorManipulator.fade(palette.alternateTextColor, 0.7),

src/tooltip.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Transitions from './styles/transitions';
-import Colors from './styles/colors';
 import getMuiTheme from './styles/getMuiTheme';
 
 function getStyles(props, state) {
@@ -14,6 +13,7 @@ function getStyles(props, state) {
   const {
     baseTheme,
     zIndex,
+    tooltip,
   } = state.muiTheme;
 
   const styles = {
@@ -24,7 +24,7 @@ function getStyles(props, state) {
       lineHeight: '22px',
       padding: '0 8px',
       zIndex: zIndex.tooltip,
-      color: Colors.white,
+      color: tooltip.color,
       overflow: 'hidden',
       top: -10000,
       borderRadius: 2,
@@ -68,7 +68,7 @@ function getStyles(props, state) {
       padding: '0 16px',
     },
     rippleWhenShown: {
-      backgroundColor: Colors.grey700,
+      backgroundColor: tooltip.rippleBackgroundColor,
       transition: `${Transitions.easeOut('450ms', 'width', '0ms')}, ${
         Transitions.easeOut('450ms', 'height', '0ms')}, ${
         Transitions.easeOut('450ms', 'backgroundColor', '0ms')}`,