|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382 |
- '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;
- }
|