Theme manager improvements

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({

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({
 

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({

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": {

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),
+  },
+};

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),
+  },
+};

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);
+}

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,

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'
+// );