-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
defaultTheme.ts
85 lines (79 loc) · 1.77 KB
/
defaultTheme.ts
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
import { deepmerge } from '@mui/utils';
import { unstable_styleFunctionSx as styleFunctionSx, SxProps } from '@mui/system';
import extendTheme from './extendTheme';
import type { Theme, CssVarsThemeOptions, ColorSystemOptions } from './Theme.types';
import defaultSxConfig from './sxConfig';
export const getThemeWithVars = (
themeInput?: Omit<CssVarsThemeOptions, 'colorSchemes'> & ColorSystemOptions,
) => {
const {
colorSchemes,
opacity,
overlays,
shape,
ref,
sys,
palette: paletteInput,
...restTheme
} = extendTheme(themeInput);
const colorSchemePalette = deepmerge(
colorSchemes[paletteInput?.colorScheme || 'light'].palette,
paletteInput,
);
const {
mode = 'light',
colorScheme = 'light',
// @ts-ignore md3 specific token
ref: colorSchemeRef,
// @ts-ignore md3 specific token
sys: colorSchemeSys,
...palette
} = colorSchemePalette;
return {
opacity,
overlays,
shape,
ref: {
...ref,
...colorSchemeRef,
},
sys: {
...sys,
...colorSchemeSys,
},
...restTheme,
colorSchemes: {
...colorSchemes,
[colorScheme]: {
palette,
ref: colorSchemeRef,
sys: colorSchemeSys,
},
},
palette: {
...palette,
mode,
colorScheme,
},
vars: {
opacity,
overlays,
shape,
ref: {
...ref,
...colorSchemeRef,
},
sys: {
...sys,
...colorSchemeSys,
},
palette,
},
} as unknown as Theme;
};
const defaultTheme = getThemeWithVars();
defaultTheme.unstable_sxConfig = defaultSxConfig;
defaultTheme.unstable_sx = function sx(props: SxProps<Theme>) {
return styleFunctionSx({ sx: props, theme: this });
};
export default defaultTheme;