From 92ee0a0a0dd30e6a48856ad3142af8c8b2e5fa13 Mon Sep 17 00:00:00 2001 From: mbrookes Date: Tue, 15 Dec 2015 22:56:29 +0000 Subject: [PATCH] major improvement to theme handling --- docs/src/app/components/master.jsx | 2 +- .../components/pages/customization/themes.jsx | 4 +- docs/src/app/components/pages/home.jsx | 2 +- package.json | 5 +- src/styles/baseThemes/darkBaseTheme.js | 23 ++ src/styles/baseThemes/lightBaseTheme.js | 29 ++ src/styles/getMuiTheme.js | 226 ++++++++++++++ src/styles/index.js | 4 + src/styles/raw-themes/dark-raw-theme.js | 29 +- src/styles/raw-themes/light-raw-theme.js | 35 +-- src/styles/theme-manager.js | 277 ++---------------- 11 files changed, 324 insertions(+), 312 deletions(-) create mode 100644 src/styles/baseThemes/darkBaseTheme.js create mode 100644 src/styles/baseThemes/lightBaseTheme.js create mode 100644 src/styles/getMuiTheme.js diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index 185733effd4af0..2af306d8e507c2 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -14,7 +14,7 @@ import {AppBar, const {StylePropable} = Mixins; const {Colors, Spacing, Typography} = Styles; const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; +const DefaultRawTheme = Styles.lightBaseTheme; const Master = React.createClass({ diff --git a/docs/src/app/components/pages/customization/themes.jsx b/docs/src/app/components/pages/customization/themes.jsx index 1eee46fdf3f5c4..39c9a789d7b9f6 100644 --- a/docs/src/app/components/pages/customization/themes.jsx +++ b/docs/src/app/components/pages/customization/themes.jsx @@ -30,8 +30,8 @@ const { const {StylePropable, StyleResizable} = Mixins; const {Typography} = Styles; const ThemeManager = Styles.ThemeManager; -const DefaultRawTheme = Styles.LightRawTheme; -const DarkRawTheme = Styles.DarkRawTheme; +const DefaultRawTheme = Styles.lightBaseTheme; +const DarkRawTheme = Styles.darkBaseTheme; const ThemesPage = React.createClass({ diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx index c2f12ed584f532..57e269103e1126 100644 --- a/docs/src/app/components/pages/home.jsx +++ b/docs/src/app/components/pages/home.jsx @@ -6,7 +6,7 @@ import FullWidthSection from '../full-width-section'; const {StylePropable, StyleResizable} = Mixins; const {Colors, Spacing, Typography} = Styles; -const DefaultRawTheme = Styles.LightRawTheme; +const DefaultRawTheme = Styles.lightBaseTheme; const HomePage = React.createClass({ diff --git a/package.json b/package.json index d5a7abff928019..4f56452d187d92 100644 --- a/package.json +++ b/package.json @@ -31,11 +31,12 @@ "homepage": "http://material-ui.com/", "dependencies": { "inline-style-prefixer": "^0.5.2", + "lodash.merge": "^3.3.2", "lodash.throttle": "~3.0.4", - "react-addons-transition-group": "^0.14.0", - "react-addons-update": "^0.14.0", "react-addons-create-fragment": "^0.14.0", "react-addons-pure-render-mixin": "^0.14.0", + "react-addons-transition-group": "^0.14.0", + "react-addons-update": "^0.14.0", "warning": "^2.1.0" }, "peerDependencies": { diff --git a/src/styles/baseThemes/darkBaseTheme.js b/src/styles/baseThemes/darkBaseTheme.js new file mode 100644 index 00000000000000..e140f554056c96 --- /dev/null +++ b/src/styles/baseThemes/darkBaseTheme.js @@ -0,0 +1,23 @@ +import Colors from '../colors'; +import ColorManipulator from '../../utils/color-manipulator'; +import Spacing from '../spacing'; + +export default { + spacing: Spacing, + fontFamily: 'Roboto, sans-serif', + palette: { + primary1Color: Colors.cyan700, + primary2Color: Colors.cyan700, + primary3Color: Colors.grey600, + accent1Color: Colors.pinkA200, + accent2Color: Colors.pinkA400, + accent3Color: Colors.pinkA100, + textColor: Colors.fullWhite, + alternateTextColor: '#303030', + canvasColor: '#303030', + borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3), + disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3), + pickerHeaderColor: ColorManipulator.fade(Colors.fullWhite, 0.12), + clockCircleColor: ColorManipulator.fade(Colors.fullWhite, 0.12), + }, +}; diff --git a/src/styles/baseThemes/lightBaseTheme.js b/src/styles/baseThemes/lightBaseTheme.js new file mode 100644 index 00000000000000..aa739f5b9218ea --- /dev/null +++ b/src/styles/baseThemes/lightBaseTheme.js @@ -0,0 +1,29 @@ +import Colors from '../colors'; +import ColorManipulator from '../../utils/color-manipulator'; +import Spacing from '../spacing'; + +/* + * Light Theme is the default theme used in material-ui. It is guaranteed to + * have all theme variables needed for every component. Variables not defined + * in a custom theme will default to these values. + */ + +export default { + spacing: Spacing, + fontFamily: 'Roboto, sans-serif', + palette: { + primary1Color: Colors.cyan500, + primary2Color: Colors.cyan700, + primary3Color: Colors.grey400, + accent1Color: Colors.pinkA200, + accent2Color: Colors.grey100, + accent3Color: Colors.grey500, + textColor: Colors.darkBlack, + alternateTextColor: Colors.white, + canvasColor: Colors.white, + borderColor: Colors.grey300, + disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), + pickerHeaderColor: Colors.cyan500, + clockCircleColor: ColorManipulator.fade(Colors.darkBlack, 0.07), + }, +}; diff --git a/src/styles/getMuiTheme.js b/src/styles/getMuiTheme.js new file mode 100644 index 00000000000000..95d4f6d8f3e3e8 --- /dev/null +++ b/src/styles/getMuiTheme.js @@ -0,0 +1,226 @@ +import merge from 'lodash.merge'; +import Colors from './colors'; +import ColorManipulator from '../utils/color-manipulator'; +import lightBaseTheme from './baseThemes/lightBaseTheme'; +import zIndex from './zIndex'; + +/** + * Get the MUI theme corresponding to a base theme. + * It's possible to override the computed theme values + * by providing a second argument. The calculated + * theme will be deeply merged with the second argument. + */ +export default function getMuiTheme(baseTheme, muiTheme) { + baseTheme = merge({}, lightBaseTheme, baseTheme); + const {palette, spacing} = baseTheme; + + return merge({ + isRtl: false, + zIndex, + baseTheme, + rawTheme: baseTheme, // To provide backward compatibility. + appBar: { + color: palette.primary1Color, + textColor: palette.alternateTextColor, + height: spacing.desktopKeylineIncrement, + }, + avatar: { + borderColor: 'rgba(0, 0, 0, 0.08)', + }, + badge: { + color: palette.alternateTextColor, + textColor: palette.textColor, + primaryColor: palette.accent1Color, + primaryTextColor: palette.alternateTextColor, + secondaryColor: palette.primary1Color, + secondaryTextColor: palette.alternateTextColor, + }, + button: { + height: 36, + minWidth: 88, + iconButtonSize: spacing.iconSize * 2, + }, + cardText: { + textColor: palette.textColor, + }, + checkbox: { + boxColor: palette.textColor, + checkedColor: palette.primary1Color, + requiredColor: palette.primary1Color, + disabledColor: palette.disabledColor, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor, + }, + datePicker: { + color: palette.primary1Color, + textColor: palette.alternateTextColor, + calendarTextColor: palette.textColor, + selectColor: palette.primary2Color, + selectTextColor: palette.alternateTextColor, + }, + dropDownMenu: { + accentColor: palette.borderColor, + }, + flatButton: { + color: Colors.transparent, + buttonFilterColor: '#999999', + disabledTextColor: ColorManipulator.fade(palette.textColor, 0.3), + textColor: palette.textColor, + primaryTextColor: palette.accent1Color, + secondaryTextColor: palette.primary1Color, + }, + floatingActionButton: { + buttonSize: 56, + miniSize: 40, + color: palette.accent1Color, + iconColor: palette.alternateTextColor, + secondaryColor: palette.primary1Color, + secondaryIconColor: palette.alternateTextColor, + disabledTextColor: palette.disabledColor, + }, + gridTile: { + textColor: Colors.white, + }, + inkBar: { + backgroundColor: palette.accent1Color, + }, + leftNav: { + width: spacing.desktopKeylineIncrement * 4, + color: palette.canvasColor, + }, + listItem: { + nestedLevelDepth: 18, + }, + menu: { + backgroundColor: palette.canvasColor, + containerBackgroundColor: palette.canvasColor, + }, + menuItem: { + dataHeight: 32, + height: 48, + hoverColor: 'rgba(0, 0, 0, .035)', + padding: spacing.desktopGutter, + selectedTextColor: palette.accent1Color, + }, + menuSubheader: { + padding: spacing.desktopGutter, + borderColor: palette.borderColor, + textColor: palette.primary1Color, + }, + paper: { + backgroundColor: palette.canvasColor, + }, + radioButton: { + borderColor: palette.textColor, + backgroundColor: palette.alternateTextColor, + checkedColor: palette.primary1Color, + requiredColor: palette.primary1Color, + disabledColor: palette.disabledColor, + size: 24, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor, + }, + raisedButton: { + color: palette.alternateTextColor, + textColor: palette.textColor, + primaryColor: palette.accent1Color, + primaryTextColor: palette.alternateTextColor, + secondaryColor: palette.primary1Color, + secondaryTextColor: palette.alternateTextColor, + disabledColor: ColorManipulator.darken(palette.alternateTextColor, 0.1), + disabledTextColor: ColorManipulator.fade(palette.textColor, 0.3), + }, + refreshIndicator: { + strokeColor: palette.borderColor, + loadingStrokeColor: palette.primary1Color, + }, + slider: { + trackSize: 2, + trackColor: palette.primary3Color, + trackColorSelected: palette.accent3Color, + handleSize: 12, + handleSizeDisabled: 8, + handleSizeActive: 18, + handleColorZero: palette.primary3Color, + handleFillColor: palette.alternateTextColor, + selectionColor: palette.primary1Color, + rippleColor: palette.primary1Color, + }, + snackbar: { + textColor: palette.alternateTextColor, + backgroundColor: palette.textColor, + actionColor: palette.accent1Color, + }, + table: { + backgroundColor: palette.canvasColor, + }, + tableHeader: { + borderColor: palette.borderColor, + }, + tableHeaderColumn: { + textColor: palette.accent3Color, + height: 56, + spacing: 24, + }, + tableFooter: { + borderColor: palette.borderColor, + textColor: palette.accent3Color, + }, + tableRow: { + hoverColor: palette.accent2Color, + stripeColor: ColorManipulator.lighten(palette.primary1Color, 0.55), + selectedColor: palette.borderColor, + textColor: palette.textColor, + borderColor: palette.borderColor, + }, + tableRowColumn: { + height: 48, + spacing: 24, + }, + timePicker: { + color: palette.alternateTextColor, + textColor: palette.accent3Color, + accentColor: palette.primary1Color, + clockColor: palette.textColor, + clockCircleColor: palette.clockCircleColor, + headerColor: palette.pickerHeaderColor || palette.primary1Color, + selectColor: palette.primary2Color, + selectTextColor: palette.alternateTextColor, + }, + toggle: { + thumbOnColor: palette.primary1Color, + thumbOffColor: palette.accent2Color, + thumbDisabledColor: palette.borderColor, + thumbRequiredColor: palette.primary1Color, + trackOnColor: ColorManipulator.fade(palette.primary1Color, 0.5), + trackOffColor: palette.primary3Color, + trackDisabledColor: palette.primary3Color, + labelColor: palette.textColor, + labelDisabledColor: palette.disabledColor, + trackRequiredColor: ColorManipulator.fade(palette.primary1Color, 0.5), + }, + toolbar: { + 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)', + }, + tabs: { + backgroundColor: palette.primary1Color, + textColor: ColorManipulator.fade(palette.alternateTextColor, 0.6), + selectedTextColor: palette.alternateTextColor, + }, + textField: { + textColor: palette.textColor, + hintColor: palette.disabledColor, + floatingLabelColor: palette.textColor, + disabledTextColor: palette.disabledColor, + errorColor: Colors.red500, + focusColor: palette.primary1Color, + backgroundColor: 'transparent', + borderColor: palette.borderColor, + }, + }, muiTheme); +} diff --git a/src/styles/index.js b/src/styles/index.js index 1061383dcf5902..6c004240846645 100644 --- a/src/styles/index.js +++ b/src/styles/index.js @@ -5,7 +5,9 @@ import ThemeManager from './theme-manager'; import Transitions from './transitions'; import Typography from './typography'; import LightRawTheme from './raw-themes/light-raw-theme'; +import lightBaseTheme from './baseThemes/lightBaseTheme'; import DarkRawTheme from './raw-themes/dark-raw-theme'; +import darkBaseTheme from './baseThemes/darkBaseTheme'; import ThemeDecorator from './theme-decorator'; import ZIndex from './zIndex'; @@ -27,7 +29,9 @@ export default { ThemeManager, Transitions, Typography, + lightBaseTheme, LightRawTheme, + darkBaseTheme, DarkRawTheme, ThemeDecorator, ZIndex, diff --git a/src/styles/raw-themes/dark-raw-theme.js b/src/styles/raw-themes/dark-raw-theme.js index e140f554056c96..5d612f93c8adb1 100644 --- a/src/styles/raw-themes/dark-raw-theme.js +++ b/src/styles/raw-themes/dark-raw-theme.js @@ -1,23 +1,8 @@ -import Colors from '../colors'; -import ColorManipulator from '../../utils/color-manipulator'; -import Spacing from '../spacing'; +export {default} from '../baseThemes/darkBaseTheme'; +// import deprecatedExport from '../../utils/deprecatedExport'; -export default { - spacing: Spacing, - fontFamily: 'Roboto, sans-serif', - palette: { - primary1Color: Colors.cyan700, - primary2Color: Colors.cyan700, - primary3Color: Colors.grey600, - accent1Color: Colors.pinkA200, - accent2Color: Colors.pinkA400, - accent3Color: Colors.pinkA100, - textColor: Colors.fullWhite, - alternateTextColor: '#303030', - canvasColor: '#303030', - borderColor: ColorManipulator.fade(Colors.fullWhite, 0.3), - disabledColor: ColorManipulator.fade(Colors.fullWhite, 0.3), - pickerHeaderColor: ColorManipulator.fade(Colors.fullWhite, 0.12), - clockCircleColor: ColorManipulator.fade(Colors.fullWhite, 0.12), - }, -}; +// export default deprecatedExport( +// darkBaseTheme, +// 'material-ui/lib/styles/raw-themes/dark-raw-theme', +// 'material-ui/lib/styles/baseThemes/darkBaseTheme' +// ); diff --git a/src/styles/raw-themes/light-raw-theme.js b/src/styles/raw-themes/light-raw-theme.js index aa739f5b9218ea..0f8303b0a50540 100644 --- a/src/styles/raw-themes/light-raw-theme.js +++ b/src/styles/raw-themes/light-raw-theme.js @@ -1,29 +1,8 @@ -import Colors from '../colors'; -import ColorManipulator from '../../utils/color-manipulator'; -import Spacing from '../spacing'; +export {default} from '../baseThemes/lightBaseTheme'; +// import deprecatedExport from '../../utils/deprecatedExport'; -/* - * Light Theme is the default theme used in material-ui. It is guaranteed to - * have all theme variables needed for every component. Variables not defined - * in a custom theme will default to these values. - */ - -export default { - spacing: Spacing, - fontFamily: 'Roboto, sans-serif', - palette: { - primary1Color: Colors.cyan500, - primary2Color: Colors.cyan700, - primary3Color: Colors.grey400, - accent1Color: Colors.pinkA200, - accent2Color: Colors.grey100, - accent3Color: Colors.grey500, - textColor: Colors.darkBlack, - alternateTextColor: Colors.white, - canvasColor: Colors.white, - borderColor: Colors.grey300, - disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), - pickerHeaderColor: Colors.cyan500, - clockCircleColor: ColorManipulator.fade(Colors.darkBlack, 0.07), - }, -}; +// export default deprecatedExport( +// lightBaseTheme, +// 'material-ui/lib/styles/raw-themes/light-raw-theme', +// 'material-ui/lib/styles/baseThemes/lightBaseTheme' +// ); diff --git a/src/styles/theme-manager.js b/src/styles/theme-manager.js index fdbd8f2cdce4f1..9b95d13b1b4087 100644 --- a/src/styles/theme-manager.js +++ b/src/styles/theme-manager.js @@ -1,257 +1,22 @@ -import Colors from './colors'; -import ColorManipulator from '../utils/color-manipulator'; -import Extend from '../utils/extend'; import update from 'react-addons-update'; -import zIndex from './zIndex'; - -export default { - - //get the MUI theme corresponding to a raw theme - getMuiTheme: function(rawTheme) { - let returnObj = { - appBar: { - color: rawTheme.palette.primary1Color, - textColor: rawTheme.palette.alternateTextColor, - height: rawTheme.spacing.desktopKeylineIncrement, - }, - avatar: { - borderColor: 'rgba(0, 0, 0, 0.08)', - }, - badge: { - color: rawTheme.palette.alternateTextColor, - textColor: rawTheme.palette.textColor, - primaryColor: rawTheme.palette.accent1Color, - primaryTextColor: rawTheme.palette.alternateTextColor, - secondaryColor: rawTheme.palette.primary1Color, - secondaryTextColor: rawTheme.palette.alternateTextColor, - }, - button: { - height: 36, - minWidth: 88, - iconButtonSize: rawTheme.spacing.iconSize * 2, - }, - cardText: { - textColor: rawTheme.palette.textColor, - }, - checkbox: { - boxColor: rawTheme.palette.textColor, - checkedColor: rawTheme.palette.primary1Color, - requiredColor: rawTheme.palette.primary1Color, - disabledColor: rawTheme.palette.disabledColor, - labelColor: rawTheme.palette.textColor, - labelDisabledColor: rawTheme.palette.disabledColor, - }, - datePicker: { - color: rawTheme.palette.primary1Color, - textColor: rawTheme.palette.alternateTextColor, - calendarTextColor: rawTheme.palette.textColor, - selectColor: rawTheme.palette.primary2Color, - selectTextColor: rawTheme.palette.alternateTextColor, - }, - dropDownMenu: { - accentColor: rawTheme.palette.borderColor, - }, - flatButton: { - color: Colors.transparent, - buttonFilterColor: '#999999', - textColor: rawTheme.palette.textColor, - primaryTextColor: rawTheme.palette.accent1Color, - secondaryTextColor: rawTheme.palette.primary1Color, - }, - floatingActionButton: { - buttonSize: 56, - miniSize: 40, - color: rawTheme.palette.accent1Color, - iconColor: rawTheme.palette.alternateTextColor, - secondaryColor: rawTheme.palette.primary1Color, - secondaryIconColor: rawTheme.palette.alternateTextColor, - disabledTextColor: rawTheme.palette.disabledColor, - }, - gridTile: { - textColor: Colors.white, - }, - inkBar: { - backgroundColor: rawTheme.palette.accent1Color, - }, - leftNav: { - width: rawTheme.spacing.desktopKeylineIncrement * 4, - color: rawTheme.palette.canvasColor, - }, - listItem: { - nestedLevelDepth: 18, - }, - menu: { - backgroundColor: rawTheme.palette.canvasColor, - containerBackgroundColor: rawTheme.palette.canvasColor, - }, - menuItem: { - dataHeight: 32, - height: 48, - hoverColor: 'rgba(0, 0, 0, .035)', - padding: rawTheme.spacing.desktopGutter, - selectedTextColor: rawTheme.palette.accent1Color, - }, - menuSubheader: { - padding: rawTheme.spacing.desktopGutter, - borderColor: rawTheme.palette.borderColor, - textColor: rawTheme.palette.primary1Color, - }, - paper: { - backgroundColor: rawTheme.palette.canvasColor, - }, - radioButton: { - borderColor: rawTheme.palette.textColor, - backgroundColor: rawTheme.palette.alternateTextColor, - checkedColor: rawTheme.palette.primary1Color, - requiredColor: rawTheme.palette.primary1Color, - disabledColor: rawTheme.palette.disabledColor, - size: 24, - labelColor: rawTheme.palette.textColor, - labelDisabledColor: rawTheme.palette.disabledColor, - }, - raisedButton: { - color: rawTheme.palette.alternateTextColor, - textColor: rawTheme.palette.textColor, - primaryColor: rawTheme.palette.accent1Color, - primaryTextColor: rawTheme.palette.alternateTextColor, - secondaryColor: rawTheme.palette.primary1Color, - secondaryTextColor: rawTheme.palette.alternateTextColor, - }, - refreshIndicator: { - strokeColor: rawTheme.palette.borderColor, - loadingStrokeColor: rawTheme.palette.primary1Color, - }, - slider: { - trackSize: 2, - trackColor: rawTheme.palette.primary3Color, - trackColorSelected: rawTheme.palette.accent3Color, - handleSize: 12, - handleSizeDisabled: 8, - handleSizeActive: 18, - handleColorZero: rawTheme.palette.primary3Color, - handleFillColor: rawTheme.palette.alternateTextColor, - selectionColor: rawTheme.palette.primary1Color, - rippleColor: rawTheme.palette.primary1Color, - }, - snackbar: { - textColor: rawTheme.palette.alternateTextColor, - backgroundColor: rawTheme.palette.textColor, - actionColor: rawTheme.palette.accent1Color, - }, - table: { - backgroundColor: rawTheme.palette.canvasColor, - }, - tableHeader: { - borderColor: rawTheme.palette.borderColor, - }, - tableHeaderColumn: { - textColor: rawTheme.palette.accent3Color, - height: 56, - spacing: 24, - }, - tableFooter: { - borderColor: rawTheme.palette.borderColor, - textColor: rawTheme.palette.accent3Color, - }, - tableRow: { - hoverColor: rawTheme.palette.accent2Color, - stripeColor: ColorManipulator.lighten(rawTheme.palette.primary1Color, 0.55), - selectedColor: rawTheme.palette.borderColor, - textColor: rawTheme.palette.textColor, - borderColor: rawTheme.palette.borderColor, - }, - tableRowColumn: { - height: 48, - spacing: 24, - }, - timePicker: { - color: rawTheme.palette.alternateTextColor, - textColor: rawTheme.palette.accent3Color, - accentColor: rawTheme.palette.primary1Color, - clockColor: rawTheme.palette.textColor, - clockCircleColor: rawTheme.palette.clockCircleColor, - headerColor: rawTheme.palette.pickerHeaderColor || rawTheme.palette.primary1Color, - selectColor: rawTheme.palette.primary2Color, - selectTextColor: rawTheme.palette.alternateTextColor, - }, - toggle: { - thumbOnColor: rawTheme.palette.primary1Color, - thumbOffColor: rawTheme.palette.accent2Color, - thumbDisabledColor: rawTheme.palette.borderColor, - thumbRequiredColor: rawTheme.palette.primary1Color, - trackOnColor: ColorManipulator.fade(rawTheme.palette.primary1Color, 0.5), - trackOffColor: rawTheme.palette.primary3Color, - trackDisabledColor: rawTheme.palette.primary3Color, - labelColor: rawTheme.palette.textColor, - labelDisabledColor: rawTheme.palette.disabledColor, - }, - toolbar: { - backgroundColor: ColorManipulator.darken(rawTheme.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)', - }, - tabs: { - backgroundColor: rawTheme.palette.primary1Color, - textColor: ColorManipulator.fade(rawTheme.palette.alternateTextColor, 0.6), - selectedTextColor: rawTheme.palette.alternateTextColor, - }, - textField: { - textColor: rawTheme.palette.textColor, - hintColor: rawTheme.palette.disabledColor, - floatingLabelColor: rawTheme.palette.textColor, - disabledTextColor: rawTheme.palette.disabledColor, - errorColor: Colors.red500, - focusColor: rawTheme.palette.primary1Color, - backgroundColor: 'transparent', - borderColor: rawTheme.palette.borderColor, - }, - isRtl: false, - zIndex: zIndex, - }; - - //add properties to objects inside 'returnObj' that depend on existing properties - returnObj.flatButton.disabledTextColor = ColorManipulator.fade(returnObj.flatButton.textColor, 0.3); - returnObj.raisedButton.disabledColor = ColorManipulator.darken(returnObj.raisedButton.color, 0.1); - returnObj.raisedButton.disabledTextColor = ColorManipulator.fade(returnObj.raisedButton.textColor, 0.3); - returnObj.toggle.trackRequiredColor = ColorManipulator.fade(returnObj.toggle.thumbRequiredColor, 0.5); - - //append the raw theme object to 'returnObj' - returnObj.rawTheme = rawTheme; - - //set 'static' key as true (by default) on return object. This is to support the ContextPure mixin. - returnObj.static = true; - - return returnObj; - }, - - //functions to modify properties of raw theme, namely spacing, palette - //and font family. These functions use the React update immutability helper - //to create a new object for the raw theme, and return a new MUI theme object - - //function to modify the spacing of the raw theme. This function recomputes - //the MUI theme and returns it based on the new theme. - modifyRawThemeSpacing: function(muiTheme, newSpacing) { - let newRawTheme = update(muiTheme.rawTheme, {spacing: {$set: newSpacing}}); - return this.getMuiTheme(newRawTheme); - }, - - - //function to modify the palette of the raw theme. This function recomputes - //the MUI theme and returns it based on the new raw theme. - //keys inside 'newPalette' override values for existing keys in palette - modifyRawThemePalette: function(muiTheme, newPaletteKeys) { - let newPalette = Extend(muiTheme.rawTheme.palette, newPaletteKeys); - let newRawTheme = update(muiTheme.rawTheme, {palette: {$set: newPalette}}); - return this.getMuiTheme(newRawTheme); - }, - - //function to modify the font family of the raw theme. This function recomputes - //the MUI theme and returns it based on the new raw theme. - modifyRawThemeFontFamily: function(muiTheme, newFontFamily) { - let newRawTheme = update(muiTheme.rawTheme, {fontFamily: {$set: newFontFamily}}); - return this.getMuiTheme(newRawTheme); - }, -}; +import extend from '../utils/extend'; +import getMuiTheme from './getMuiTheme'; +// import deprecatedExport from '../utils/deprecatedExport'; + +export default// deprecatedExport( + { + getMuiTheme, + modifyRawThemeSpacing(muiTheme, spacing) { + return getMuiTheme(update(muiTheme.baseTheme, {spacing: {$set: spacing}})); + }, + modifyRawThemePalette(muiTheme, palette) { + const newPalette = extend(muiTheme.baseTheme.palette, palette); + return getMuiTheme(update(muiTheme.baseTheme, {palette: {$set: newPalette}})); + }, + modifyRawThemeFontFamily(muiTheme, fontFamily) { + return getMuiTheme(update(muiTheme.baseTheme, {fontFamily: {$set: fontFamily}})); + }, + };// , +// 'material-ui/lib/styles/theme-manager', +// 'material-ui/lib/styles/themeManager' +//);