-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
createTheme.js
144 lines (128 loc) · 4.23 KB
/
createTheme.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import deepmerge from '@mui/utils/deepmerge';
import styleFunctionSx, {
unstable_defaultSxConfig as defaultSxConfig,
} from '@mui/system/styleFunctionSx';
import systemCreateTheme from '@mui/system/createTheme';
import MuiError from '@mui/internal-babel-macros/MuiError.macro';
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import createMixins from './createMixins';
import createPalette from './createPalette';
import createTypography from './createTypography';
import shadows from './shadows';
import createTransitions from './createTransitions';
import zIndex from './zIndex';
function createTheme(options = {}, ...args) {
const {
breakpoints: breakpointsInput,
mixins: mixinsInput = {},
spacing: spacingInput,
palette: paletteInput = {},
transitions: transitionsInput = {},
typography: typographyInput = {},
shape: shapeInput,
...other
} = options;
if (options.vars) {
throw new MuiError(
'MUI: `vars` is a private field used for CSS variables support.\n' +
'Please use another name.',
);
}
const palette = createPalette(paletteInput);
const systemTheme = systemCreateTheme(options);
let muiTheme = deepmerge(systemTheme, {
mixins: createMixins(systemTheme.breakpoints, mixinsInput),
palette,
// Don't use [...shadows] until you've verified its transpiled code is not invoking the iterator protocol.
shadows: shadows.slice(),
typography: createTypography(palette, typographyInput),
transitions: createTransitions(transitionsInput),
zIndex: { ...zIndex },
});
muiTheme = deepmerge(muiTheme, other);
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
if (process.env.NODE_ENV !== 'production') {
// TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
const stateClasses = [
'active',
'checked',
'completed',
'disabled',
'error',
'expanded',
'focused',
'focusVisible',
'required',
'selected',
];
const traverse = (node, component) => {
let key;
// eslint-disable-next-line guard-for-in, no-restricted-syntax
for (key in node) {
const child = node[key];
if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
if (process.env.NODE_ENV !== 'production') {
const stateClass = generateUtilityClass('', key);
console.error(
[
`MUI: The \`${component}\` component increases ` +
`the CSS specificity of the \`${key}\` internal state.`,
'You can not override it like this: ',
JSON.stringify(node, null, 2),
'',
`Instead, you need to use the '&.${stateClass}' syntax:`,
JSON.stringify(
{
root: {
[`&.${stateClass}`]: child,
},
},
null,
2,
),
'',
'https://mui.com/r/state-classes-guide',
].join('\n'),
);
}
// Remove the style to prevent global conflicts.
node[key] = {};
}
}
};
Object.keys(muiTheme.components).forEach((component) => {
const styleOverrides = muiTheme.components[component].styleOverrides;
if (styleOverrides && component.indexOf('Mui') === 0) {
traverse(styleOverrides, component);
}
});
}
muiTheme.unstable_sxConfig = {
...defaultSxConfig,
...other?.unstable_sxConfig,
};
muiTheme.unstable_sx = function sx(props) {
return styleFunctionSx({
sx: props,
theme: this,
});
};
return muiTheme;
}
let warnedOnce = false;
export function createMuiTheme(...args) {
if (process.env.NODE_ENV !== 'production') {
if (!warnedOnce) {
warnedOnce = true;
console.error(
[
'MUI: the createMuiTheme function was renamed to createTheme.',
'',
"You should use `import { createTheme } from '@mui/material/styles'`",
].join('\n'),
);
}
}
return createTheme(...args);
}
export default createTheme;