@mui/system 5.10.13 → 5.10.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Box/Box.js +1 -10
- package/Box/Box.spec.d.ts +1 -1
- package/Box/index.js +0 -2
- package/CHANGELOG.md +70 -2
- package/Container/Container.d.ts +13 -13
- package/Container/Container.js +2 -17
- package/Container/ContainerProps.d.ts +40 -40
- package/Container/containerClasses.d.ts +22 -22
- package/Container/containerClasses.js +0 -3
- package/Container/createContainer.d.ts +18 -18
- package/Container/createContainer.js +15 -37
- package/Container/index.js +0 -6
- package/Stack/Stack.d.ts +13 -13
- package/Stack/Stack.js +1 -12
- package/Stack/StackProps.d.ts +42 -42
- package/Stack/createStack.d.ts +21 -21
- package/Stack/createStack.js +10 -48
- package/Stack/index.d.ts +5 -5
- package/Stack/index.js +0 -9
- package/Stack/stackClasses.d.ts +8 -8
- package/Stack/stackClasses.js +0 -3
- package/ThemeProvider/ThemeProvider.js +2 -22
- package/ThemeProvider/index.js +0 -2
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/Grid.js +6 -42
- package/Unstable_Grid/GridProps.d.ts +162 -162
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/createGrid.js +19 -49
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridClasses.js +8 -7
- package/Unstable_Grid/gridGenerator.d.ts +29 -28
- package/Unstable_Grid/gridGenerator.js +22 -63
- package/Unstable_Grid/index.d.ts +5 -5
- package/Unstable_Grid/index.js +0 -9
- package/borders.js +0 -14
- package/breakpoints.js +3 -32
- package/colorManipulator.js +13 -55
- package/compose.js +0 -7
- package/createBox.js +5 -20
- package/createBox.spec.d.ts +1 -1
- package/createStyled.js +27 -71
- package/createTheme/createBreakpoints.js +22 -37
- package/createTheme/createSpacing.d.ts +10 -10
- package/createTheme/createSpacing.js +4 -8
- package/createTheme/createTheme.js +6 -16
- package/createTheme/index.js +0 -2
- package/cssGrid.js +0 -21
- package/cssVars/createCssVarsProvider.js +24 -72
- package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/createGetCssVar.js +2 -7
- package/cssVars/cssVarsParser.d.ts +65 -65
- package/cssVars/cssVarsParser.js +3 -15
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/getInitColorSchemeScript.js +0 -6
- package/cssVars/index.d.ts +3 -3
- package/cssVars/index.js +0 -3
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/cssVars/useCurrentColorScheme.js +20 -49
- package/display.js +0 -6
- package/esm/Box/Box.js +1 -6
- package/esm/Container/Container.js +3 -14
- package/esm/Container/createContainer.js +15 -25
- package/esm/Stack/Stack.js +1 -9
- package/esm/Stack/createStack.js +10 -29
- package/esm/ThemeProvider/ThemeProvider.js +2 -11
- package/esm/Unstable_Grid/Grid.js +6 -39
- package/esm/Unstable_Grid/createGrid.js +18 -35
- package/esm/Unstable_Grid/gridClasses.js +8 -4
- package/esm/Unstable_Grid/gridGenerator.js +20 -38
- package/esm/borders.js +0 -6
- package/esm/breakpoints.js +7 -22
- package/esm/colorManipulator.js +13 -43
- package/esm/compose.js +0 -5
- package/esm/createBox.js +5 -7
- package/esm/createStyled.js +27 -64
- package/esm/createTheme/createBreakpoints.js +22 -34
- package/esm/createTheme/createSpacing.js +4 -7
- package/esm/createTheme/createTheme.js +6 -9
- package/esm/cssGrid.js +0 -9
- package/esm/cssVars/createCssVarsProvider.js +24 -58
- package/esm/cssVars/createGetCssVar.js +2 -6
- package/esm/cssVars/cssVarsParser.js +3 -11
- package/esm/cssVars/useCurrentColorScheme.js +20 -44
- package/esm/getThemeValue.js +0 -2
- package/esm/index.js +1 -2
- package/esm/memoize.js +0 -1
- package/esm/merge.js +0 -3
- package/esm/palette.js +0 -3
- package/esm/propsToClassKey.js +4 -7
- package/esm/sizing.js +0 -5
- package/esm/spacing.js +3 -23
- package/esm/style.js +2 -19
- package/esm/styleFunctionSx/extendSxProp.js +3 -10
- package/esm/styleFunctionSx/styleFunctionSx.js +3 -16
- package/esm/sx/sx.js +0 -2
- package/esm/useTheme.js +0 -2
- package/esm/useThemeProps/getThemeProps.js +0 -2
- package/esm/useThemeWithoutDefault.js +0 -3
- package/flexbox.js +0 -4
- package/getThemeValue.js +0 -14
- package/index.js +1 -55
- package/index.spec.d.ts +1 -1
- package/legacy/Box/Box.js +1 -6
- package/legacy/Container/Container.js +3 -14
- package/legacy/Container/createContainer.js +29 -39
- package/legacy/Stack/Stack.js +1 -9
- package/legacy/Stack/createStack.js +17 -37
- package/legacy/ThemeProvider/ThemeProvider.js +3 -12
- package/legacy/Unstable_Grid/Grid.js +6 -39
- package/legacy/Unstable_Grid/createGrid.js +34 -53
- package/legacy/Unstable_Grid/gridGenerator.js +36 -58
- package/legacy/borders.js +0 -6
- package/legacy/breakpoints.js +9 -28
- package/legacy/colorManipulator.js +16 -48
- package/legacy/compose.js +0 -6
- package/legacy/createBox.js +9 -11
- package/legacy/createStyled.js +27 -68
- package/legacy/createTheme/createBreakpoints.js +20 -33
- package/legacy/createTheme/createSpacing.js +4 -9
- package/legacy/createTheme/createTheme.js +7 -13
- package/legacy/cssGrid.js +0 -9
- package/legacy/cssVars/createCssVarsProvider.js +90 -129
- package/legacy/cssVars/createGetCssVar.js +2 -10
- package/legacy/cssVars/cssVarsParser.js +7 -20
- package/legacy/cssVars/getInitColorSchemeScript.js +14 -15
- package/legacy/cssVars/useCurrentColorScheme.js +43 -69
- package/legacy/getThemeValue.js +0 -3
- package/legacy/index.js +2 -3
- package/legacy/memoize.js +0 -1
- package/legacy/merge.js +0 -3
- package/legacy/palette.js +0 -3
- package/legacy/propsToClassKey.js +2 -5
- package/legacy/sizing.js +0 -5
- package/legacy/spacing.js +6 -27
- package/legacy/style.js +6 -24
- package/legacy/styleFunctionSx/extendSxProp.js +3 -11
- package/legacy/styleFunctionSx/styleFunctionSx.js +6 -21
- package/legacy/sx/sx.js +0 -2
- package/legacy/useTheme.js +0 -2
- package/legacy/useThemeProps/getThemeProps.js +2 -4
- package/legacy/useThemeProps/useThemeProps.js +2 -2
- package/legacy/useThemeWithoutDefault.js +0 -3
- package/memoize.js +0 -2
- package/merge.js +0 -5
- package/modern/Box/Box.js +1 -6
- package/modern/Container/Container.js +3 -14
- package/modern/Container/createContainer.js +15 -25
- package/modern/Stack/Stack.js +1 -9
- package/modern/Stack/createStack.js +10 -29
- package/modern/ThemeProvider/ThemeProvider.js +2 -11
- package/modern/Unstable_Grid/Grid.js +6 -39
- package/modern/Unstable_Grid/createGrid.js +18 -34
- package/modern/Unstable_Grid/gridClasses.js +8 -4
- package/modern/Unstable_Grid/gridGenerator.js +20 -36
- package/modern/borders.js +0 -6
- package/modern/breakpoints.js +7 -21
- package/modern/colorManipulator.js +13 -43
- package/modern/compose.js +0 -5
- package/modern/createBox.js +5 -7
- package/modern/createStyled.js +27 -63
- package/modern/createTheme/createBreakpoints.js +22 -34
- package/modern/createTheme/createSpacing.js +4 -7
- package/modern/createTheme/createTheme.js +6 -9
- package/modern/cssGrid.js +0 -9
- package/modern/cssVars/createCssVarsProvider.js +24 -58
- package/modern/cssVars/createGetCssVar.js +2 -6
- package/modern/cssVars/cssVarsParser.js +3 -11
- package/modern/cssVars/useCurrentColorScheme.js +20 -44
- package/modern/getThemeValue.js +0 -2
- package/modern/index.js +2 -3
- package/modern/memoize.js +0 -1
- package/modern/merge.js +0 -3
- package/modern/palette.js +0 -3
- package/modern/propsToClassKey.js +4 -7
- package/modern/sizing.js +0 -4
- package/modern/spacing.js +3 -22
- package/modern/style.js +2 -19
- package/modern/styleFunctionSx/extendSxProp.js +3 -10
- package/modern/styleFunctionSx/styleFunctionSx.js +3 -16
- package/modern/sx/sx.js +0 -2
- package/modern/useTheme.js +0 -2
- package/modern/useThemeProps/getThemeProps.js +0 -2
- package/modern/useThemeWithoutDefault.js +0 -3
- package/package.json +6 -6
- package/palette.js +0 -6
- package/positions.js +0 -6
- package/propsToClassKey.js +4 -10
- package/responsivePropType.js +0 -3
- package/shadows.js +0 -3
- package/sizing.js +0 -11
- package/spacing.js +3 -37
- package/style.js +2 -24
- package/styleFunctionSx/extendSxProp.js +3 -15
- package/styleFunctionSx/index.js +0 -5
- package/styleFunctionSx/styleFunctionSx.js +3 -21
- package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
- package/styled.js +0 -3
- package/sx/index.js +0 -2
- package/sx/sx.js +0 -4
- package/typography.js +0 -4
- package/useTheme.js +0 -6
- package/useThemeProps/getThemeProps.js +0 -4
- package/useThemeProps/index.js +0 -3
- package/useThemeProps/useThemeProps.js +0 -4
- package/useThemeWithoutDefault.js +0 -4
|
@@ -17,131 +17,116 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
17
17
|
export var DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
|
|
18
18
|
export default function createCssVarsProvider(options) {
|
|
19
19
|
var _options$theme = options.theme,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
20
|
+
defaultTheme = _options$theme === void 0 ? {} : _options$theme,
|
|
21
|
+
_options$attribute = options.attribute,
|
|
22
|
+
defaultAttribute = _options$attribute === void 0 ? DEFAULT_ATTRIBUTE : _options$attribute,
|
|
23
|
+
_options$modeStorageK = options.modeStorageKey,
|
|
24
|
+
defaultModeStorageKey = _options$modeStorageK === void 0 ? DEFAULT_MODE_STORAGE_KEY : _options$modeStorageK,
|
|
25
|
+
_options$colorSchemeS = options.colorSchemeStorageKey,
|
|
26
|
+
defaultColorSchemeStorageKey = _options$colorSchemeS === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _options$colorSchemeS,
|
|
27
|
+
_options$defaultMode = options.defaultMode,
|
|
28
|
+
designSystemMode = _options$defaultMode === void 0 ? 'light' : _options$defaultMode,
|
|
29
|
+
designSystemColorScheme = options.defaultColorScheme,
|
|
30
|
+
_options$disableTrans = options.disableTransitionOnChange,
|
|
31
|
+
designSystemTransitionOnChange = _options$disableTrans === void 0 ? false : _options$disableTrans,
|
|
32
|
+
designSystemShouldSkipGeneratingVar = options.shouldSkipGeneratingVar,
|
|
33
|
+
resolveTheme = options.resolveTheme,
|
|
34
|
+
excludeVariablesFromRoot = options.excludeVariablesFromRoot;
|
|
36
35
|
if (!defaultTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !defaultTheme.colorSchemes[designSystemColorScheme] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || _typeof(designSystemColorScheme) === 'object' && !defaultTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
|
|
37
36
|
console.error("MUI: `".concat(designSystemColorScheme, "` does not exist in `theme.colorSchemes`."));
|
|
38
37
|
}
|
|
39
|
-
|
|
40
38
|
var ColorSchemeContext = /*#__PURE__*/React.createContext(undefined);
|
|
41
|
-
|
|
42
39
|
var useColorScheme = function useColorScheme() {
|
|
43
40
|
var value = React.useContext(ColorSchemeContext);
|
|
44
|
-
|
|
45
41
|
if (!value) {
|
|
46
42
|
throw new Error(process.env.NODE_ENV !== "production" ? "MUI: `useColorScheme` must be called under <CssVarsProvider />" : _formatMuiErrorMessage(19));
|
|
47
43
|
}
|
|
48
|
-
|
|
49
44
|
return value;
|
|
50
45
|
};
|
|
51
|
-
|
|
52
46
|
function CssVarsProvider(_ref) {
|
|
53
47
|
var children = _ref.children,
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
48
|
+
_ref$theme = _ref.theme,
|
|
49
|
+
themeProp = _ref$theme === void 0 ? defaultTheme : _ref$theme,
|
|
50
|
+
_ref$modeStorageKey = _ref.modeStorageKey,
|
|
51
|
+
modeStorageKey = _ref$modeStorageKey === void 0 ? defaultModeStorageKey : _ref$modeStorageKey,
|
|
52
|
+
_ref$colorSchemeStora = _ref.colorSchemeStorageKey,
|
|
53
|
+
colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? defaultColorSchemeStorageKey : _ref$colorSchemeStora,
|
|
54
|
+
_ref$attribute = _ref.attribute,
|
|
55
|
+
attribute = _ref$attribute === void 0 ? defaultAttribute : _ref$attribute,
|
|
56
|
+
_ref$defaultMode = _ref.defaultMode,
|
|
57
|
+
defaultMode = _ref$defaultMode === void 0 ? designSystemMode : _ref$defaultMode,
|
|
58
|
+
_ref$defaultColorSche = _ref.defaultColorScheme,
|
|
59
|
+
defaultColorScheme = _ref$defaultColorSche === void 0 ? designSystemColorScheme : _ref$defaultColorSche,
|
|
60
|
+
_ref$disableTransitio = _ref.disableTransitionOnChange,
|
|
61
|
+
disableTransitionOnChange = _ref$disableTransitio === void 0 ? designSystemTransitionOnChange : _ref$disableTransitio,
|
|
62
|
+
_ref$storageWindow = _ref.storageWindow,
|
|
63
|
+
storageWindow = _ref$storageWindow === void 0 ? typeof window === 'undefined' ? undefined : window : _ref$storageWindow,
|
|
64
|
+
_ref$documentNode = _ref.documentNode,
|
|
65
|
+
documentNode = _ref$documentNode === void 0 ? typeof document === 'undefined' ? undefined : document : _ref$documentNode,
|
|
66
|
+
_ref$colorSchemeNode = _ref.colorSchemeNode,
|
|
67
|
+
colorSchemeNode = _ref$colorSchemeNode === void 0 ? typeof document === 'undefined' ? undefined : document.documentElement : _ref$colorSchemeNode,
|
|
68
|
+
_ref$colorSchemeSelec = _ref.colorSchemeSelector,
|
|
69
|
+
colorSchemeSelector = _ref$colorSchemeSelec === void 0 ? ':root' : _ref$colorSchemeSelec,
|
|
70
|
+
_ref$shouldSkipGenera = _ref.shouldSkipGeneratingVar,
|
|
71
|
+
shouldSkipGeneratingVar = _ref$shouldSkipGenera === void 0 ? designSystemShouldSkipGeneratingVar : _ref$shouldSkipGenera;
|
|
78
72
|
var hasMounted = React.useRef(false);
|
|
79
|
-
|
|
80
73
|
var _themeProp$colorSchem = themeProp.colorSchemes,
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
74
|
+
colorSchemes = _themeProp$colorSchem === void 0 ? {} : _themeProp$colorSchem,
|
|
75
|
+
_themeProp$components = themeProp.components,
|
|
76
|
+
components = _themeProp$components === void 0 ? {} : _themeProp$components,
|
|
77
|
+
cssVarPrefix = themeProp.cssVarPrefix,
|
|
78
|
+
restThemeProp = _objectWithoutProperties(themeProp, ["colorSchemes", "components", "cssVarPrefix"]);
|
|
87
79
|
var allColorSchemes = Object.keys(colorSchemes);
|
|
88
80
|
var defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
|
|
89
|
-
var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
|
|
81
|
+
var defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
|
|
90
82
|
|
|
83
|
+
// 1. Get the data about the `mode`, `colorScheme`, and setter functions.
|
|
91
84
|
var _useCurrentColorSchem = useCurrentColorScheme({
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
85
|
+
supportedColorSchemes: allColorSchemes,
|
|
86
|
+
defaultLightColorScheme: defaultLightColorScheme,
|
|
87
|
+
defaultDarkColorScheme: defaultDarkColorScheme,
|
|
88
|
+
modeStorageKey: modeStorageKey,
|
|
89
|
+
colorSchemeStorageKey: colorSchemeStorageKey,
|
|
90
|
+
defaultMode: defaultMode,
|
|
91
|
+
storageWindow: storageWindow
|
|
92
|
+
}),
|
|
93
|
+
mode = _useCurrentColorSchem.mode,
|
|
94
|
+
setMode = _useCurrentColorSchem.setMode,
|
|
95
|
+
systemMode = _useCurrentColorSchem.systemMode,
|
|
96
|
+
lightColorScheme = _useCurrentColorSchem.lightColorScheme,
|
|
97
|
+
darkColorScheme = _useCurrentColorSchem.darkColorScheme,
|
|
98
|
+
colorScheme = _useCurrentColorSchem.colorScheme,
|
|
99
|
+
setColorScheme = _useCurrentColorSchem.setColorScheme;
|
|
108
100
|
var calculatedMode = function () {
|
|
109
101
|
if (!mode) {
|
|
110
102
|
// This scope occurs on the server
|
|
111
103
|
if (defaultMode === 'system') {
|
|
112
104
|
return designSystemMode;
|
|
113
105
|
}
|
|
114
|
-
|
|
115
106
|
return defaultMode;
|
|
116
107
|
}
|
|
117
|
-
|
|
118
108
|
return mode;
|
|
119
109
|
}();
|
|
120
|
-
|
|
121
110
|
var calculatedColorScheme = function () {
|
|
122
111
|
if (!colorScheme) {
|
|
123
112
|
// This scope occurs on the server
|
|
124
113
|
if (calculatedMode === 'dark') {
|
|
125
114
|
return defaultDarkColorScheme;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
115
|
+
}
|
|
116
|
+
// use light color scheme, if default mode is 'light' | 'system'
|
|
129
117
|
return defaultLightColorScheme;
|
|
130
118
|
}
|
|
131
|
-
|
|
132
119
|
return colorScheme;
|
|
133
|
-
}();
|
|
134
|
-
|
|
120
|
+
}();
|
|
135
121
|
|
|
122
|
+
// 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
|
|
136
123
|
var _cssVarsParser = cssVarsParser(restThemeProp, {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
124
|
+
prefix: cssVarPrefix,
|
|
125
|
+
shouldSkipGeneratingVar: shouldSkipGeneratingVar
|
|
126
|
+
}),
|
|
127
|
+
rootCss = _cssVarsParser.css,
|
|
128
|
+
rootVars = _cssVarsParser.vars,
|
|
129
|
+
parsedTheme = _cssVarsParser.parsedTheme; // 3. Start composing the theme object
|
|
145
130
|
var theme = _extends({}, parsedTheme, {
|
|
146
131
|
components: components,
|
|
147
132
|
colorSchemes: colorSchemes,
|
|
@@ -150,49 +135,41 @@ export default function createCssVarsProvider(options) {
|
|
|
150
135
|
getColorSchemeSelector: function getColorSchemeSelector(targetColorScheme) {
|
|
151
136
|
return "[".concat(attribute, "=\"").concat(targetColorScheme, "\"] &");
|
|
152
137
|
}
|
|
153
|
-
});
|
|
138
|
+
});
|
|
139
|
+
|
|
140
|
+
// 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
|
|
154
141
|
// The default color scheme stylesheet is constructed to have the least CSS specificity.
|
|
155
142
|
// The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet.
|
|
156
|
-
|
|
157
|
-
|
|
158
143
|
var defaultColorSchemeStyleSheet = {};
|
|
159
144
|
var otherColorSchemesStyleSheet = {};
|
|
160
145
|
Object.entries(colorSchemes).forEach(function (_ref2) {
|
|
161
146
|
var _ref3 = _slicedToArray(_ref2, 2),
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
147
|
+
key = _ref3[0],
|
|
148
|
+
scheme = _ref3[1];
|
|
165
149
|
var _cssVarsParser2 = cssVarsParser(scheme, {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
150
|
+
prefix: cssVarPrefix,
|
|
151
|
+
shouldSkipGeneratingVar: shouldSkipGeneratingVar
|
|
152
|
+
}),
|
|
153
|
+
css = _cssVarsParser2.css,
|
|
154
|
+
vars = _cssVarsParser2.vars,
|
|
155
|
+
parsedScheme = _cssVarsParser2.parsedTheme;
|
|
173
156
|
theme.vars = deepmerge(theme.vars, vars);
|
|
174
|
-
|
|
175
157
|
if (key === calculatedColorScheme) {
|
|
176
158
|
// 4.1 Merge the selected color scheme to the theme
|
|
177
159
|
theme = _extends({}, theme, parsedScheme);
|
|
178
|
-
|
|
179
160
|
if (theme.palette) {
|
|
180
161
|
theme.palette.colorScheme = key;
|
|
181
162
|
}
|
|
182
163
|
}
|
|
183
|
-
|
|
184
164
|
var resolvedDefaultColorScheme = function () {
|
|
185
165
|
if (typeof defaultColorScheme === 'string') {
|
|
186
166
|
return defaultColorScheme;
|
|
187
167
|
}
|
|
188
|
-
|
|
189
168
|
if (defaultMode === 'dark') {
|
|
190
169
|
return defaultColorScheme.dark;
|
|
191
170
|
}
|
|
192
|
-
|
|
193
171
|
return defaultColorScheme.light;
|
|
194
172
|
}();
|
|
195
|
-
|
|
196
173
|
if (key === resolvedDefaultColorScheme) {
|
|
197
174
|
if (excludeVariablesFromRoot) {
|
|
198
175
|
var excludedVariables = {};
|
|
@@ -202,39 +179,38 @@ export default function createCssVarsProvider(options) {
|
|
|
202
179
|
});
|
|
203
180
|
defaultColorSchemeStyleSheet["[".concat(attribute, "=\"").concat(key, "\"]")] = excludedVariables;
|
|
204
181
|
}
|
|
205
|
-
|
|
206
182
|
defaultColorSchemeStyleSheet["".concat(colorSchemeSelector, ", [").concat(attribute, "=\"").concat(key, "\"]")] = css;
|
|
207
183
|
} else {
|
|
208
184
|
otherColorSchemesStyleSheet["".concat(colorSchemeSelector === ':root' ? '' : colorSchemeSelector, "[").concat(attribute, "=\"").concat(key, "\"]")] = css;
|
|
209
185
|
}
|
|
210
|
-
});
|
|
211
|
-
// 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
|
|
186
|
+
});
|
|
212
187
|
|
|
188
|
+
// 5. Declaring effects
|
|
189
|
+
// 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
|
|
213
190
|
React.useEffect(function () {
|
|
214
191
|
if (colorScheme && colorSchemeNode) {
|
|
215
192
|
// attaches attribute to <html> because the css variables are attached to :root (html)
|
|
216
193
|
colorSchemeNode.setAttribute(attribute, colorScheme);
|
|
217
194
|
}
|
|
218
|
-
}, [colorScheme, attribute, colorSchemeNode]);
|
|
219
|
-
// credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
|
|
195
|
+
}, [colorScheme, attribute, colorSchemeNode]);
|
|
220
196
|
|
|
197
|
+
// 5.2 Remove the CSS transition when color scheme changes to create instant experience.
|
|
198
|
+
// credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
|
|
221
199
|
React.useEffect(function () {
|
|
222
200
|
var timer;
|
|
223
|
-
|
|
224
201
|
if (disableTransitionOnChange && hasMounted.current && documentNode) {
|
|
225
202
|
var css = documentNode.createElement('style');
|
|
226
203
|
css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION));
|
|
227
|
-
documentNode.head.appendChild(css);
|
|
204
|
+
documentNode.head.appendChild(css);
|
|
228
205
|
|
|
206
|
+
// Force browser repaint
|
|
229
207
|
(function () {
|
|
230
208
|
return window.getComputedStyle(documentNode.body);
|
|
231
209
|
})();
|
|
232
|
-
|
|
233
210
|
timer = setTimeout(function () {
|
|
234
211
|
documentNode.head.removeChild(css);
|
|
235
212
|
}, 1);
|
|
236
213
|
}
|
|
237
|
-
|
|
238
214
|
return function () {
|
|
239
215
|
clearTimeout(timer);
|
|
240
216
|
};
|
|
@@ -271,69 +247,56 @@ export default function createCssVarsProvider(options) {
|
|
|
271
247
|
})]
|
|
272
248
|
});
|
|
273
249
|
}
|
|
274
|
-
|
|
275
250
|
process.env.NODE_ENV !== "production" ? CssVarsProvider.propTypes = {
|
|
276
251
|
/**
|
|
277
252
|
* The body attribute name to attach colorScheme.
|
|
278
253
|
*/
|
|
279
254
|
attribute: PropTypes.string,
|
|
280
|
-
|
|
281
255
|
/**
|
|
282
256
|
* The component tree.
|
|
283
257
|
*/
|
|
284
258
|
children: PropTypes.node,
|
|
285
|
-
|
|
286
259
|
/**
|
|
287
260
|
* The node used to attach the color-scheme attribute
|
|
288
261
|
*/
|
|
289
262
|
colorSchemeNode: PropTypes.any,
|
|
290
|
-
|
|
291
263
|
/**
|
|
292
264
|
* The CSS selector for attaching the generated custom properties
|
|
293
265
|
*/
|
|
294
266
|
colorSchemeSelector: PropTypes.string,
|
|
295
|
-
|
|
296
267
|
/**
|
|
297
268
|
* localStorage key used to store `colorScheme`
|
|
298
269
|
*/
|
|
299
270
|
colorSchemeStorageKey: PropTypes.string,
|
|
300
|
-
|
|
301
271
|
/**
|
|
302
272
|
* The initial color scheme used.
|
|
303
273
|
*/
|
|
304
274
|
defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
305
|
-
|
|
306
275
|
/**
|
|
307
276
|
* The initial mode used.
|
|
308
277
|
*/
|
|
309
278
|
defaultMode: PropTypes.string,
|
|
310
|
-
|
|
311
279
|
/**
|
|
312
280
|
* Disable CSS transitions when switching between modes or color schemes
|
|
313
281
|
*/
|
|
314
282
|
disableTransitionOnChange: PropTypes.bool,
|
|
315
|
-
|
|
316
283
|
/**
|
|
317
284
|
* The document to attach the attribute to
|
|
318
285
|
*/
|
|
319
286
|
documentNode: PropTypes.any,
|
|
320
|
-
|
|
321
287
|
/**
|
|
322
288
|
* The key in the local storage used to store current color scheme.
|
|
323
289
|
*/
|
|
324
290
|
modeStorageKey: PropTypes.string,
|
|
325
|
-
|
|
326
291
|
/**
|
|
327
292
|
* A function to determine if the key, value should be attached as CSS Variable
|
|
328
293
|
*/
|
|
329
294
|
shouldSkipGeneratingVar: PropTypes.func,
|
|
330
|
-
|
|
331
295
|
/**
|
|
332
296
|
* The window that attaches the 'storage' event listener
|
|
333
297
|
* @default window
|
|
334
298
|
*/
|
|
335
299
|
storageWindow: PropTypes.any,
|
|
336
|
-
|
|
337
300
|
/**
|
|
338
301
|
* The calculated theme object that will be passed through context.
|
|
339
302
|
*/
|
|
@@ -341,7 +304,6 @@ export default function createCssVarsProvider(options) {
|
|
|
341
304
|
} : void 0;
|
|
342
305
|
var defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
|
|
343
306
|
var defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
|
|
344
|
-
|
|
345
307
|
var getInitColorSchemeScript = function getInitColorSchemeScript(params) {
|
|
346
308
|
return systemGetInitColorSchemeScript(_extends({
|
|
347
309
|
attribute: defaultAttribute,
|
|
@@ -352,7 +314,6 @@ export default function createCssVarsProvider(options) {
|
|
|
352
314
|
modeStorageKey: defaultModeStorageKey
|
|
353
315
|
}, params));
|
|
354
316
|
};
|
|
355
|
-
|
|
356
317
|
return {
|
|
357
318
|
CssVarsProvider: CssVarsProvider,
|
|
358
319
|
useColorScheme: useColorScheme,
|
|
@@ -1,38 +1,30 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
|
|
5
4
|
* and they does not need to remember the prefix (defined once).
|
|
6
5
|
*/
|
|
7
6
|
export default function createGetCssVar() {
|
|
8
7
|
var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
9
|
-
|
|
10
8
|
function appendVar() {
|
|
11
9
|
for (var _len = arguments.length, vars = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
12
10
|
vars[_key] = arguments[_key];
|
|
13
11
|
}
|
|
14
|
-
|
|
15
12
|
if (!vars.length) {
|
|
16
13
|
return '';
|
|
17
14
|
}
|
|
18
|
-
|
|
19
15
|
var value = vars[0];
|
|
20
|
-
|
|
21
16
|
if (typeof value === 'string' && !value.match(/(#|\(|\)|(-?(\d*\.)?\d+)(px|em|%|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc))/)) {
|
|
22
17
|
return ", var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(value).concat(appendVar.apply(void 0, _toConsumableArray(vars.slice(1))), ")");
|
|
23
18
|
}
|
|
24
|
-
|
|
25
19
|
return ", ".concat(value);
|
|
26
|
-
}
|
|
27
|
-
|
|
20
|
+
}
|
|
28
21
|
|
|
22
|
+
// AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error.
|
|
29
23
|
var getCssVar = function getCssVar(field) {
|
|
30
24
|
for (var _len2 = arguments.length, fallbacks = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
31
25
|
fallbacks[_key2 - 1] = arguments[_key2];
|
|
32
26
|
}
|
|
33
|
-
|
|
34
27
|
return "var(--".concat(prefix ? "".concat(prefix, "-") : '').concat(field).concat(appendVar.apply(void 0, fallbacks), ")");
|
|
35
28
|
};
|
|
36
|
-
|
|
37
29
|
return getCssVar;
|
|
38
30
|
}
|
|
@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
3
3
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
4
4
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
5
5
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
6
|
-
|
|
7
6
|
/**
|
|
8
7
|
* This function create an object from keys, value and then assign to target
|
|
9
8
|
*
|
|
@@ -35,11 +34,11 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
|
|
|
35
34
|
if (!temp[k]) {
|
|
36
35
|
temp[k] = arrayKeys.includes(k) ? [] : {};
|
|
37
36
|
}
|
|
38
|
-
|
|
39
37
|
temp = temp[k];
|
|
40
38
|
}
|
|
41
39
|
});
|
|
42
40
|
};
|
|
41
|
+
|
|
43
42
|
/**
|
|
44
43
|
*
|
|
45
44
|
* @param {Object} obj : source object
|
|
@@ -51,16 +50,14 @@ export var assignNestedKeys = function assignNestedKeys(obj, keys, value) {
|
|
|
51
50
|
* walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
|
|
52
51
|
* // ['palette', 'primary', 'main'] '#000000'
|
|
53
52
|
*/
|
|
54
|
-
|
|
55
53
|
export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPaths) {
|
|
56
54
|
function recurse(object) {
|
|
57
55
|
var parentKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
58
56
|
var arrayKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
59
57
|
Object.entries(object).forEach(function (_ref) {
|
|
60
58
|
var _ref2 = _slicedToArray(_ref, 2),
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
59
|
+
key = _ref2[0],
|
|
60
|
+
value = _ref2[1];
|
|
64
61
|
if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([].concat(_toConsumableArray(parentKeys), [key]))) {
|
|
65
62
|
if (value !== undefined && value !== null) {
|
|
66
63
|
if (_typeof(value) === 'object' && Object.keys(value).length > 0) {
|
|
@@ -72,10 +69,8 @@ export var walkObjectDeep = function walkObjectDeep(obj, callback, shouldSkipPat
|
|
|
72
69
|
}
|
|
73
70
|
});
|
|
74
71
|
}
|
|
75
|
-
|
|
76
72
|
recurse(obj);
|
|
77
73
|
};
|
|
78
|
-
|
|
79
74
|
var getCssValue = function getCssValue(keys, value) {
|
|
80
75
|
if (typeof value === 'number') {
|
|
81
76
|
if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(function (prop) {
|
|
@@ -84,19 +79,16 @@ var getCssValue = function getCssValue(keys, value) {
|
|
|
84
79
|
// CSS property that are unitless
|
|
85
80
|
return value;
|
|
86
81
|
}
|
|
87
|
-
|
|
88
82
|
var lastKey = keys[keys.length - 1];
|
|
89
|
-
|
|
90
83
|
if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
|
|
91
84
|
// opacity values are unitless
|
|
92
85
|
return value;
|
|
93
86
|
}
|
|
94
|
-
|
|
95
87
|
return "".concat(value, "px");
|
|
96
88
|
}
|
|
97
|
-
|
|
98
89
|
return value;
|
|
99
90
|
};
|
|
91
|
+
|
|
100
92
|
/**
|
|
101
93
|
* a function that parse theme and return { css, vars }
|
|
102
94
|
*
|
|
@@ -120,13 +112,10 @@ var getCssValue = function getCssValue(keys, value) {
|
|
|
120
112
|
* console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
|
|
121
113
|
* console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
|
|
122
114
|
*/
|
|
123
|
-
|
|
124
|
-
|
|
125
115
|
export default function cssVarsParser(theme, options) {
|
|
126
116
|
var _ref3 = options || {},
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
117
|
+
prefix = _ref3.prefix,
|
|
118
|
+
shouldSkipGeneratingVar = _ref3.shouldSkipGeneratingVar;
|
|
130
119
|
var css = {};
|
|
131
120
|
var vars = {};
|
|
132
121
|
var parsedTheme = {};
|
|
@@ -135,18 +124,16 @@ export default function cssVarsParser(theme, options) {
|
|
|
135
124
|
if (!shouldSkipGeneratingVar || !shouldSkipGeneratingVar(keys, value)) {
|
|
136
125
|
// only create css & var if `shouldSkipGeneratingVar` return false
|
|
137
126
|
var cssVar = "--".concat(prefix ? "".concat(prefix, "-") : '').concat(keys.join('-'));
|
|
138
|
-
|
|
139
127
|
_extends(css, _defineProperty({}, cssVar, getCssValue(keys, value)));
|
|
140
|
-
|
|
141
128
|
assignNestedKeys(vars, keys, "var(".concat(cssVar, ")"), arrayKeys);
|
|
142
129
|
}
|
|
143
130
|
}
|
|
144
|
-
|
|
145
131
|
assignNestedKeys(parsedTheme, keys, value, arrayKeys);
|
|
146
132
|
}, function (keys) {
|
|
147
133
|
return keys[0] === 'vars';
|
|
148
134
|
} // skip 'vars/*' paths
|
|
149
135
|
);
|
|
136
|
+
|
|
150
137
|
return {
|
|
151
138
|
css: css,
|
|
152
139
|
vars: vars,
|
|
@@ -5,21 +5,20 @@ export var DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
|
|
|
5
5
|
export var DEFAULT_ATTRIBUTE = 'data-color-scheme';
|
|
6
6
|
export default function getInitColorSchemeScript(options) {
|
|
7
7
|
var _ref = options || {},
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
8
|
+
_ref$defaultMode = _ref.defaultMode,
|
|
9
|
+
defaultMode = _ref$defaultMode === void 0 ? 'light' : _ref$defaultMode,
|
|
10
|
+
_ref$defaultLightColo = _ref.defaultLightColorScheme,
|
|
11
|
+
defaultLightColorScheme = _ref$defaultLightColo === void 0 ? 'light' : _ref$defaultLightColo,
|
|
12
|
+
_ref$defaultDarkColor = _ref.defaultDarkColorScheme,
|
|
13
|
+
defaultDarkColorScheme = _ref$defaultDarkColor === void 0 ? 'dark' : _ref$defaultDarkColor,
|
|
14
|
+
_ref$modeStorageKey = _ref.modeStorageKey,
|
|
15
|
+
modeStorageKey = _ref$modeStorageKey === void 0 ? DEFAULT_MODE_STORAGE_KEY : _ref$modeStorageKey,
|
|
16
|
+
_ref$colorSchemeStora = _ref.colorSchemeStorageKey,
|
|
17
|
+
colorSchemeStorageKey = _ref$colorSchemeStora === void 0 ? DEFAULT_COLOR_SCHEME_STORAGE_KEY : _ref$colorSchemeStora,
|
|
18
|
+
_ref$attribute = _ref.attribute,
|
|
19
|
+
attribute = _ref$attribute === void 0 ? DEFAULT_ATTRIBUTE : _ref$attribute,
|
|
20
|
+
_ref$colorSchemeNode = _ref.colorSchemeNode,
|
|
21
|
+
colorSchemeNode = _ref$colorSchemeNode === void 0 ? 'document.documentElement' : _ref$colorSchemeNode;
|
|
23
22
|
return /*#__PURE__*/_jsx("script", {
|
|
24
23
|
// eslint-disable-next-line react/no-danger
|
|
25
24
|
dangerouslySetInnerHTML: {
|