@material-ui/core
Version:
React components that implement Google's Material Design.
100 lines (85 loc) • 3.97 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import { deepmerge } from '@material-ui/utils';
import createBreakpoints from './createBreakpoints';
import createMixins from './createMixins';
import createPalette from './createPalette';
import createTypography from './createTypography';
import shadows from './shadows';
import shape from './shape';
import createSpacing from './createSpacing';
import transitions from './transitions';
import zIndex from './zIndex';
function createTheme() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$breakpoints = options.breakpoints,
breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
_options$mixins = options.mixins,
mixinsInput = _options$mixins === void 0 ? {} : _options$mixins,
_options$palette = options.palette,
paletteInput = _options$palette === void 0 ? {} : _options$palette,
spacingInput = options.spacing,
_options$typography = options.typography,
typographyInput = _options$typography === void 0 ? {} : _options$typography,
other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "spacing", "typography"]);
var palette = createPalette(paletteInput);
var breakpoints = createBreakpoints(breakpointsInput);
var spacing = createSpacing(spacingInput);
var muiTheme = deepmerge({
breakpoints: breakpoints,
direction: 'ltr',
mixins: createMixins(breakpoints, spacing, mixinsInput),
overrides: {},
// Inject custom styles
palette: palette,
props: {},
// Provide default props
shadows: shadows,
typography: createTypography(palette, typographyInput),
spacing: spacing,
shape: shape,
transitions: transitions,
zIndex: zIndex
}, other);
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
muiTheme = args.reduce(function (acc, argument) {
return deepmerge(acc, argument);
}, muiTheme);
if (process.env.NODE_ENV !== 'production') {
var pseudoClasses = ['checked', 'disabled', 'error', 'focused', 'focusVisible', 'required', 'expanded', 'selected'];
var traverse = function traverse(node, parentKey) {
var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var key; // eslint-disable-next-line guard-for-in, no-restricted-syntax
for (key in node) {
var child = node[key];
if (depth === 1) {
if (key.indexOf('Mui') === 0 && child) {
traverse(child, key, depth + 1);
}
} else if (pseudoClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
if (process.env.NODE_ENV !== 'production') {
console.error(["Material-UI: The `".concat(parentKey, "` component increases ") + "the CSS specificity of the `".concat(key, "` internal state."), 'You can not override it like this: ', JSON.stringify(node, null, 2), '', 'Instead, you need to use the $ruleName syntax:', JSON.stringify({
root: _defineProperty({}, "&$".concat(key), child)
}, null, 2), '', 'https://mui.com/r/pseudo-classes-guide'].join('\n'));
} // Remove the style to prevent global conflicts.
node[key] = {};
}
}
};
traverse(muiTheme.overrides);
}
return muiTheme;
}
var warnedOnce = false;
export function createMuiTheme() {
if (process.env.NODE_ENV !== 'production') {
if (!warnedOnce) {
warnedOnce = true;
console.error(['Material-UI: the createMuiTheme function was renamed to createTheme.', '', "You should use `import { createTheme } from '@material-ui/core/styles'`"].join('\n'));
}
}
return createTheme.apply(void 0, arguments);
}
export default createTheme;