material-ui
Version:
React Components that Implement Google's Material Design.
382 lines (351 loc) • 13.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
exports.default = getMuiTheme;
var _lodash = require('lodash.merge');
var _lodash2 = _interopRequireDefault(_lodash);
var _colorManipulator = require('../utils/colorManipulator');
var _lightBaseTheme = require('./baseThemes/lightBaseTheme');
var _lightBaseTheme2 = _interopRequireDefault(_lightBaseTheme);
var _zIndex = require('./zIndex');
var _zIndex2 = _interopRequireDefault(_zIndex);
var _autoprefixer = require('../utils/autoprefixer');
var _autoprefixer2 = _interopRequireDefault(_autoprefixer);
var _callOnce = require('../utils/callOnce');
var _callOnce2 = _interopRequireDefault(_callOnce);
var _rtl = require('../utils/rtl');
var _rtl2 = _interopRequireDefault(_rtl);
var _compose = require('recompose/compose');
var _compose2 = _interopRequireDefault(_compose);
var _typography = require('./typography');
var _typography2 = _interopRequireDefault(_typography);
var _colors = require('./colors');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* 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.
*/
function getMuiTheme(muiTheme) {
for (var _len = arguments.length, more = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
more[_key - 1] = arguments[_key];
}
muiTheme = _lodash2.default.apply(undefined, [{
zIndex: _zIndex2.default,
isRtl: false,
userAgent: undefined
}, _lightBaseTheme2.default, muiTheme].concat(more));
var _muiTheme = muiTheme,
spacing = _muiTheme.spacing,
fontFamily = _muiTheme.fontFamily,
palette = _muiTheme.palette;
var baseTheme = { spacing: spacing, fontFamily: fontFamily, palette: palette };
muiTheme = (0, _lodash2.default)({
appBar: {
color: palette.primary1Color,
textColor: palette.alternateTextColor,
height: spacing.desktopKeylineIncrement,
titleFontWeight: _typography2.default.fontWeightNormal,
padding: spacing.desktopGutter
},
avatar: {
color: palette.canvasColor,
backgroundColor: (0, _colorManipulator.emphasize)(palette.canvasColor, 0.26)
},
badge: {
color: palette.alternateTextColor,
textColor: palette.textColor,
primaryColor: palette.primary1Color,
primaryTextColor: palette.alternateTextColor,
secondaryColor: palette.accent1Color,
secondaryTextColor: palette.alternateTextColor,
fontWeight: _typography2.default.fontWeightMedium
},
bottomNavigation: {
backgroundColor: palette.canvasColor,
unselectedColor: (0, _colorManipulator.fade)(palette.textColor, 0.54),
selectedColor: palette.primary1Color,
height: 56,
unselectedFontSize: 12,
selectedFontSize: 14
},
button: {
height: 36,
minWidth: 88,
iconButtonSize: spacing.iconSize * 2
},
card: {
titleColor: (0, _colorManipulator.fade)(palette.textColor, 0.87),
subtitleColor: (0, _colorManipulator.fade)(palette.textColor, 0.54),
fontWeight: _typography2.default.fontWeightMedium
},
cardMedia: {
color: _colors.darkWhite,
overlayContentBackground: _colors.lightBlack,
titleColor: _colors.darkWhite,
subtitleColor: _colors.lightWhite
},
cardText: {
textColor: palette.textColor
},
checkbox: {
boxColor: palette.textColor,
checkedColor: palette.primary1Color,
requiredColor: palette.primary1Color,
disabledColor: palette.disabledColor,
labelColor: palette.textColor,
labelDisabledColor: palette.disabledColor
},
chip: {
backgroundColor: (0, _colorManipulator.emphasize)(palette.canvasColor, 0.12),
deleteIconColor: (0, _colorManipulator.fade)(palette.textColor, 0.26),
textColor: (0, _colorManipulator.fade)(palette.textColor, 0.87),
fontSize: 14,
fontWeight: _typography2.default.fontWeightNormal,
shadow: '0 1px 6px ' + (0, _colorManipulator.fade)(palette.shadowColor, 0.12) + ',\n 0 1px 4px ' + (0, _colorManipulator.fade)(palette.shadowColor, 0.12)
},
datePicker: {
color: palette.primary1Color,
textColor: palette.alternateTextColor,
calendarTextColor: palette.textColor,
selectColor: palette.primary2Color,
selectTextColor: palette.alternateTextColor,
calendarYearBackgroundColor: palette.canvasColor,
headerColor: palette.pickerHeaderColor || palette.primary1Color
},
dialog: {
titleFontSize: 22,
bodyFontSize: 16,
bodyColor: (0, _colorManipulator.fade)(palette.textColor, 0.6)
},
dropDownMenu: {
accentColor: palette.borderColor
},
enhancedButton: {
tapHighlightColor: _colors.transparent
},
flatButton: {
color: _colors.transparent,
buttonFilterColor: '#999999',
disabledTextColor: (0, _colorManipulator.fade)(palette.textColor, 0.3),
textColor: palette.textColor,
primaryTextColor: palette.primary1Color,
secondaryTextColor: palette.accent1Color,
fontSize: _typography2.default.fontStyleButtonFontSize,
fontWeight: _typography2.default.fontWeightMedium
},
floatingActionButton: {
buttonSize: 56,
miniSize: 40,
color: palette.primary1Color,
iconColor: palette.alternateTextColor,
secondaryColor: palette.accent1Color,
secondaryIconColor: palette.alternateTextColor,
disabledTextColor: palette.disabledColor,
disabledColor: (0, _colorManipulator.emphasize)(palette.canvasColor, 0.12)
},
gridTile: {
textColor: _colors.white
},
icon: {
color: palette.canvasColor,
backgroundColor: palette.primary1Color
},
inkBar: {
backgroundColor: palette.accent1Color
},
drawer: {
width: spacing.desktopKeylineIncrement * 4,
color: palette.canvasColor
},
listItem: {
nestedLevelDepth: 18,
secondaryTextColor: palette.secondaryTextColor,
leftIconColor: _colors.grey600,
rightIconColor: _colors.grey600
},
menu: {
backgroundColor: palette.canvasColor,
containerBackgroundColor: palette.canvasColor
},
menuItem: {
dataHeight: 32,
height: 48,
hoverColor: (0, _colorManipulator.fade)(palette.textColor, 0.1),
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,
zDepthShadows: [[1, 6, 0.12, 1, 4, 0.12], [3, 10, 0.16, 3, 10, 0.23], [10, 30, 0.19, 6, 10, 0.23], [14, 45, 0.25, 10, 18, 0.22], [19, 60, 0.30, 15, 20, 0.22]].map(function (d) {
return '0 ' + d[0] + 'px ' + d[1] + 'px ' + (0, _colorManipulator.fade)(palette.shadowColor, d[2]) + ',\n 0 ' + d[3] + 'px ' + d[4] + 'px ' + (0, _colorManipulator.fade)(palette.shadowColor, d[5]);
})
},
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.primary1Color,
primaryTextColor: palette.alternateTextColor,
secondaryColor: palette.accent1Color,
secondaryTextColor: palette.alternateTextColor,
disabledColor: (0, _colorManipulator.darken)(palette.alternateTextColor, 0.1),
disabledTextColor: (0, _colorManipulator.fade)(palette.textColor, 0.3),
fontSize: _typography2.default.fontStyleButtonFontSize,
fontWeight: _typography2.default.fontWeightMedium
},
refreshIndicator: {
strokeColor: palette.borderColor,
loadingStrokeColor: palette.primary1Color
},
ripple: {
color: (0, _colorManipulator.fade)(palette.textColor, 0.87)
},
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
},
subheader: {
color: (0, _colorManipulator.fade)(palette.textColor, 0.54),
fontWeight: _typography2.default.fontWeightMedium
},
stepper: {
backgroundColor: 'transparent',
hoverBackgroundColor: (0, _colorManipulator.fade)(_colors.black, 0.06),
iconColor: palette.primary1Color,
hoveredIconColor: _colors.grey700,
inactiveIconColor: _colors.grey500,
textColor: (0, _colorManipulator.fade)(_colors.black, 0.87),
disabledTextColor: (0, _colorManipulator.fade)(_colors.black, 0.26),
connectorLineColor: _colors.grey400
},
svgIcon: {
color: palette.textColor
},
table: {
backgroundColor: palette.canvasColor
},
tableFooter: {
borderColor: palette.borderColor,
textColor: palette.accent3Color
},
tableHeader: {
borderColor: palette.borderColor
},
tableHeaderColumn: {
textColor: palette.accent3Color,
height: 56,
spacing: 24
},
tableRow: {
hoverColor: palette.accent2Color,
stripeColor: (0, _colorManipulator.fade)((0, _colorManipulator.lighten)(palette.primary1Color, 0.5), 0.4),
selectedColor: palette.borderColor,
textColor: palette.textColor,
borderColor: palette.borderColor,
height: 48
},
tableRowColumn: {
height: 48,
spacing: 24
},
tabs: {
backgroundColor: palette.primary1Color,
textColor: (0, _colorManipulator.fade)(palette.alternateTextColor, 0.7),
selectedTextColor: palette.alternateTextColor
},
textField: {
textColor: palette.textColor,
hintColor: palette.disabledColor,
floatingLabelColor: palette.disabledColor,
disabledTextColor: palette.disabledColor,
errorColor: _colors.red500,
focusColor: palette.primary1Color,
backgroundColor: 'transparent',
borderColor: palette.borderColor
},
timePicker: {
color: palette.alternateTextColor,
textColor: palette.alternateTextColor,
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: (0, _colorManipulator.fade)(palette.primary1Color, 0.5),
trackOffColor: palette.primary3Color,
trackDisabledColor: palette.primary3Color,
labelColor: palette.textColor,
labelDisabledColor: palette.disabledColor,
trackRequiredColor: (0, _colorManipulator.fade)(palette.primary1Color, 0.5)
},
toolbar: {
color: (0, _colorManipulator.fade)(palette.textColor, 0.54),
hoverColor: (0, _colorManipulator.fade)(palette.textColor, 0.87),
backgroundColor: (0, _colorManipulator.darken)(palette.accent2Color, 0.05),
height: 56,
titleFontSize: 20,
iconColor: (0, _colorManipulator.fade)(palette.textColor, 0.4),
separatorColor: (0, _colorManipulator.fade)(palette.textColor, 0.175),
menuHoverColor: (0, _colorManipulator.fade)(palette.textColor, 0.1)
},
tooltip: {
color: _colors.white,
rippleBackgroundColor: _colors.grey700,
opacity: 0.9
}
}, muiTheme, {
baseTheme: baseTheme, // To provide backward compatibility.
rawTheme: baseTheme // To provide backward compatibility.
});
var transformers = [_autoprefixer2.default, _rtl2.default, _callOnce2.default].map(function (t) {
return t(muiTheme);
}).filter(function (t) {
return t;
});
muiTheme.prepareStyles = _compose2.default.apply(undefined, (0, _toConsumableArray3.default)(transformers));
return muiTheme;
}