@mui/system 5.10.10 → 5.10.13
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.spec.d.ts +1 -1
- package/CHANGELOG.md +414 -194
- package/Container/Container.d.ts +13 -13
- package/Container/ContainerProps.d.ts +40 -40
- package/Container/containerClasses.d.ts +22 -22
- package/Container/createContainer.d.ts +18 -18
- package/Stack/Stack.d.ts +13 -13
- package/Stack/StackProps.d.ts +42 -42
- package/Stack/createStack.d.ts +21 -21
- package/Stack/index.d.ts +5 -5
- package/Stack/stackClasses.d.ts +8 -8
- package/ThemeProvider/ThemeProvider.js +3 -1
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/GridProps.d.ts +162 -162
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridGenerator.d.ts +28 -28
- package/Unstable_Grid/index.d.ts +5 -5
- package/createBox.spec.d.ts +1 -1
- package/createTheme/createSpacing.d.ts +10 -10
- package/createTheme/createSpacing.js +1 -1
- package/cssVars/createCssVarsProvider.js +11 -10
- package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +65 -65
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/getInitColorSchemeScript.js +1 -1
- package/cssVars/index.d.ts +3 -3
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/esm/ThemeProvider/ThemeProvider.js +2 -1
- package/esm/createTheme/createSpacing.js +1 -1
- package/esm/cssVars/createCssVarsProvider.js +11 -10
- package/esm/cssVars/getInitColorSchemeScript.js +1 -1
- package/index.js +1 -1
- package/index.spec.d.ts +1 -1
- package/legacy/ThemeProvider/ThemeProvider.js +2 -1
- package/legacy/createTheme/createSpacing.js +1 -1
- package/legacy/cssVars/createCssVarsProvider.js +6 -3
- package/legacy/cssVars/getInitColorSchemeScript.js +1 -1
- package/legacy/index.js +1 -1
- package/modern/ThemeProvider/ThemeProvider.js +2 -1
- package/modern/createTheme/createSpacing.js +1 -1
- package/modern/cssVars/createCssVarsProvider.js +11 -10
- package/modern/cssVars/getInitColorSchemeScript.js +1 -1
- package/modern/index.js +1 -1
- package/package.json +1 -1
- package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
declare type NestedRecord<V = any> = {
|
|
2
|
-
[k: string | number]: NestedRecord<V> | V;
|
|
3
|
-
};
|
|
4
|
-
/**
|
|
5
|
-
* This function create an object from keys, value and then assign to target
|
|
6
|
-
*
|
|
7
|
-
* @param {Object} obj : the target object to be assigned
|
|
8
|
-
* @param {string[]} keys
|
|
9
|
-
* @param {string | number} value
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* const source = {}
|
|
13
|
-
* assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
|
|
14
|
-
* console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* const source = { palette: { primary: 'var(--palette-primary)' } }
|
|
18
|
-
* assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
|
|
19
|
-
* console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
|
|
20
|
-
*/
|
|
21
|
-
export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
|
|
22
|
-
/**
|
|
23
|
-
*
|
|
24
|
-
* @param {Object} obj : source object
|
|
25
|
-
* @param {Function} callback : a function that will be called when
|
|
26
|
-
* - the deepest key in source object is reached
|
|
27
|
-
* - the value of the deepest key is NOT `undefined` | `null`
|
|
28
|
-
*
|
|
29
|
-
* @example
|
|
30
|
-
* walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
|
|
31
|
-
* // ['palette', 'primary', 'main'] '#000000'
|
|
32
|
-
*/
|
|
33
|
-
export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
|
|
34
|
-
/**
|
|
35
|
-
* a function that parse theme and return { css, vars }
|
|
36
|
-
*
|
|
37
|
-
* @param {Object} theme
|
|
38
|
-
* @param {{
|
|
39
|
-
* prefix?: string,
|
|
40
|
-
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
|
41
|
-
* }} options.
|
|
42
|
-
* `prefix`: The prefix of the generated CSS variables. This function does not change the value.
|
|
43
|
-
*
|
|
44
|
-
* @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
|
|
45
|
-
*
|
|
46
|
-
* @example
|
|
47
|
-
* const { css, vars, parsedTheme } = parser({
|
|
48
|
-
* fontSize: 12,
|
|
49
|
-
* lineHeight: 1.2,
|
|
50
|
-
* palette: { primary: { 500: 'var(--color)' } }
|
|
51
|
-
* }, { prefix: 'foo' })
|
|
52
|
-
*
|
|
53
|
-
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
|
|
54
|
-
* console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
|
|
55
|
-
* console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
|
|
56
|
-
*/
|
|
57
|
-
export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
|
|
58
|
-
prefix?: string;
|
|
59
|
-
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
60
|
-
}): {
|
|
61
|
-
css: Record<string, string | number>;
|
|
62
|
-
vars: NestedRecord<string>;
|
|
63
|
-
parsedTheme: T;
|
|
64
|
-
};
|
|
65
|
-
export {};
|
|
1
|
+
declare type NestedRecord<V = any> = {
|
|
2
|
+
[k: string | number]: NestedRecord<V> | V;
|
|
3
|
+
};
|
|
4
|
+
/**
|
|
5
|
+
* This function create an object from keys, value and then assign to target
|
|
6
|
+
*
|
|
7
|
+
* @param {Object} obj : the target object to be assigned
|
|
8
|
+
* @param {string[]} keys
|
|
9
|
+
* @param {string | number} value
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* const source = {}
|
|
13
|
+
* assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
|
|
14
|
+
* console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* const source = { palette: { primary: 'var(--palette-primary)' } }
|
|
18
|
+
* assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
|
|
19
|
+
* console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
|
|
20
|
+
*/
|
|
21
|
+
export declare const assignNestedKeys: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => void;
|
|
22
|
+
/**
|
|
23
|
+
*
|
|
24
|
+
* @param {Object} obj : source object
|
|
25
|
+
* @param {Function} callback : a function that will be called when
|
|
26
|
+
* - the deepest key in source object is reached
|
|
27
|
+
* - the value of the deepest key is NOT `undefined` | `null`
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
|
|
31
|
+
* // ['palette', 'primary', 'main'] '#000000'
|
|
32
|
+
*/
|
|
33
|
+
export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, arrayKeys: Array<string>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
|
|
34
|
+
/**
|
|
35
|
+
* a function that parse theme and return { css, vars }
|
|
36
|
+
*
|
|
37
|
+
* @param {Object} theme
|
|
38
|
+
* @param {{
|
|
39
|
+
* prefix?: string,
|
|
40
|
+
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
|
41
|
+
* }} options.
|
|
42
|
+
* `prefix`: The prefix of the generated CSS variables. This function does not change the value.
|
|
43
|
+
*
|
|
44
|
+
* @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* const { css, vars, parsedTheme } = parser({
|
|
48
|
+
* fontSize: 12,
|
|
49
|
+
* lineHeight: 1.2,
|
|
50
|
+
* palette: { primary: { 500: 'var(--color)' } }
|
|
51
|
+
* }, { prefix: 'foo' })
|
|
52
|
+
*
|
|
53
|
+
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
|
|
54
|
+
* console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
|
|
55
|
+
* console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--color)' } } }
|
|
56
|
+
*/
|
|
57
|
+
export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
|
|
58
|
+
prefix?: string;
|
|
59
|
+
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
60
|
+
}): {
|
|
61
|
+
css: Record<string, string | number>;
|
|
62
|
+
vars: NestedRecord<string>;
|
|
63
|
+
parsedTheme: T;
|
|
64
|
+
};
|
|
65
|
+
export {};
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
|
|
3
|
-
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
|
|
4
|
-
export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
|
|
5
|
-
export interface GetInitColorSchemeScriptOptions {
|
|
6
|
-
/**
|
|
7
|
-
* The mode to be used for the first visit
|
|
8
|
-
* @default 'light'
|
|
9
|
-
*/
|
|
10
|
-
defaultMode?: 'light' | 'dark' | 'system';
|
|
11
|
-
/**
|
|
12
|
-
* The default color scheme to be used on the light mode
|
|
13
|
-
* @default 'light'
|
|
14
|
-
*/
|
|
15
|
-
defaultLightColorScheme?: string;
|
|
16
|
-
/**
|
|
17
|
-
* The default color scheme to be used on the dark mode
|
|
18
|
-
* * @default 'dark'
|
|
19
|
-
*/
|
|
20
|
-
defaultDarkColorScheme?: string;
|
|
21
|
-
/**
|
|
22
|
-
* The node (provided as string) used to attach the color-scheme attribute
|
|
23
|
-
* @default 'document.documentElement'
|
|
24
|
-
*/
|
|
25
|
-
colorSchemeNode?: string;
|
|
26
|
-
/**
|
|
27
|
-
* localStorage key used to store `mode`
|
|
28
|
-
* @default 'mode'
|
|
29
|
-
*/
|
|
30
|
-
modeStorageKey?: string;
|
|
31
|
-
/**
|
|
32
|
-
* localStorage key used to store `colorScheme`
|
|
33
|
-
* @default 'color-scheme'
|
|
34
|
-
*/
|
|
35
|
-
colorSchemeStorageKey?: string;
|
|
36
|
-
/**
|
|
37
|
-
* DOM attribute for applying color scheme
|
|
38
|
-
* @default 'data-color-scheme'
|
|
39
|
-
*/
|
|
40
|
-
attribute?: string;
|
|
41
|
-
}
|
|
42
|
-
export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
|
|
3
|
+
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
|
|
4
|
+
export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
|
|
5
|
+
export interface GetInitColorSchemeScriptOptions {
|
|
6
|
+
/**
|
|
7
|
+
* The mode to be used for the first visit
|
|
8
|
+
* @default 'light'
|
|
9
|
+
*/
|
|
10
|
+
defaultMode?: 'light' | 'dark' | 'system';
|
|
11
|
+
/**
|
|
12
|
+
* The default color scheme to be used on the light mode
|
|
13
|
+
* @default 'light'
|
|
14
|
+
*/
|
|
15
|
+
defaultLightColorScheme?: string;
|
|
16
|
+
/**
|
|
17
|
+
* The default color scheme to be used on the dark mode
|
|
18
|
+
* * @default 'dark'
|
|
19
|
+
*/
|
|
20
|
+
defaultDarkColorScheme?: string;
|
|
21
|
+
/**
|
|
22
|
+
* The node (provided as string) used to attach the color-scheme attribute
|
|
23
|
+
* @default 'document.documentElement'
|
|
24
|
+
*/
|
|
25
|
+
colorSchemeNode?: string;
|
|
26
|
+
/**
|
|
27
|
+
* localStorage key used to store `mode`
|
|
28
|
+
* @default 'mode'
|
|
29
|
+
*/
|
|
30
|
+
modeStorageKey?: string;
|
|
31
|
+
/**
|
|
32
|
+
* localStorage key used to store `colorScheme`
|
|
33
|
+
* @default 'color-scheme'
|
|
34
|
+
*/
|
|
35
|
+
colorSchemeStorageKey?: string;
|
|
36
|
+
/**
|
|
37
|
+
* DOM attribute for applying color scheme
|
|
38
|
+
* @default 'data-color-scheme'
|
|
39
|
+
*/
|
|
40
|
+
attribute?: string;
|
|
41
|
+
}
|
|
42
|
+
export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
|
package/cssVars/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { default } from './createCssVarsProvider';
|
|
2
|
-
export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
|
|
3
|
-
export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
|
|
1
|
+
export { default } from './createCssVarsProvider';
|
|
2
|
+
export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
|
|
3
|
+
export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
export declare type Mode = 'light' | 'dark' | 'system';
|
|
2
|
-
export declare type SystemMode = Exclude<Mode, 'system'>;
|
|
3
|
-
export interface State<SupportedColorScheme extends string> {
|
|
4
|
-
/**
|
|
5
|
-
* User selected mode.
|
|
6
|
-
* Note: on the server, mode is always undefined
|
|
7
|
-
*/
|
|
8
|
-
mode: Mode | undefined;
|
|
9
|
-
/**
|
|
10
|
-
* Only valid if `mode: 'system'`, either 'light' | 'dark'.
|
|
11
|
-
*/
|
|
12
|
-
systemMode: SystemMode | undefined;
|
|
13
|
-
/**
|
|
14
|
-
* The color scheme for the light mode.
|
|
15
|
-
*/
|
|
16
|
-
lightColorScheme: SupportedColorScheme;
|
|
17
|
-
/**
|
|
18
|
-
* The color scheme for the dark mode.
|
|
19
|
-
*/
|
|
20
|
-
darkColorScheme: SupportedColorScheme;
|
|
21
|
-
}
|
|
22
|
-
export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
|
|
23
|
-
/**
|
|
24
|
-
* The current application color scheme. It is always `undefined` on the server.
|
|
25
|
-
*/
|
|
26
|
-
colorScheme: SupportedColorScheme | undefined;
|
|
27
|
-
/**
|
|
28
|
-
* `mode` is saved to internal state and localStorage
|
|
29
|
-
* If `mode` is null, it will be reset to the defaultMode
|
|
30
|
-
*/
|
|
31
|
-
setMode: (mode: Mode | null) => void;
|
|
32
|
-
/**
|
|
33
|
-
* `colorScheme` is saved to internal state and localStorage
|
|
34
|
-
* If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
|
|
35
|
-
*/
|
|
36
|
-
setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
|
|
37
|
-
light: SupportedColorScheme | null;
|
|
38
|
-
dark: SupportedColorScheme | null;
|
|
39
|
-
}> | null) => void;
|
|
40
|
-
};
|
|
41
|
-
export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
|
|
42
|
-
export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
|
|
43
|
-
interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
|
|
44
|
-
defaultLightColorScheme: SupportedColorScheme;
|
|
45
|
-
defaultDarkColorScheme: SupportedColorScheme;
|
|
46
|
-
supportedColorSchemes: Array<SupportedColorScheme>;
|
|
47
|
-
defaultMode?: Mode;
|
|
48
|
-
modeStorageKey?: string;
|
|
49
|
-
colorSchemeStorageKey?: string;
|
|
50
|
-
storageWindow?: Window | null;
|
|
51
|
-
}
|
|
52
|
-
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
|
|
53
|
-
export {};
|
|
1
|
+
export declare type Mode = 'light' | 'dark' | 'system';
|
|
2
|
+
export declare type SystemMode = Exclude<Mode, 'system'>;
|
|
3
|
+
export interface State<SupportedColorScheme extends string> {
|
|
4
|
+
/**
|
|
5
|
+
* User selected mode.
|
|
6
|
+
* Note: on the server, mode is always undefined
|
|
7
|
+
*/
|
|
8
|
+
mode: Mode | undefined;
|
|
9
|
+
/**
|
|
10
|
+
* Only valid if `mode: 'system'`, either 'light' | 'dark'.
|
|
11
|
+
*/
|
|
12
|
+
systemMode: SystemMode | undefined;
|
|
13
|
+
/**
|
|
14
|
+
* The color scheme for the light mode.
|
|
15
|
+
*/
|
|
16
|
+
lightColorScheme: SupportedColorScheme;
|
|
17
|
+
/**
|
|
18
|
+
* The color scheme for the dark mode.
|
|
19
|
+
*/
|
|
20
|
+
darkColorScheme: SupportedColorScheme;
|
|
21
|
+
}
|
|
22
|
+
export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
|
|
23
|
+
/**
|
|
24
|
+
* The current application color scheme. It is always `undefined` on the server.
|
|
25
|
+
*/
|
|
26
|
+
colorScheme: SupportedColorScheme | undefined;
|
|
27
|
+
/**
|
|
28
|
+
* `mode` is saved to internal state and localStorage
|
|
29
|
+
* If `mode` is null, it will be reset to the defaultMode
|
|
30
|
+
*/
|
|
31
|
+
setMode: (mode: Mode | null) => void;
|
|
32
|
+
/**
|
|
33
|
+
* `colorScheme` is saved to internal state and localStorage
|
|
34
|
+
* If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
|
|
35
|
+
*/
|
|
36
|
+
setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
|
|
37
|
+
light: SupportedColorScheme | null;
|
|
38
|
+
dark: SupportedColorScheme | null;
|
|
39
|
+
}> | null) => void;
|
|
40
|
+
};
|
|
41
|
+
export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
|
|
42
|
+
export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
|
|
43
|
+
interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
|
|
44
|
+
defaultLightColorScheme: SupportedColorScheme;
|
|
45
|
+
defaultDarkColorScheme: SupportedColorScheme;
|
|
46
|
+
supportedColorSchemes: Array<SupportedColorScheme>;
|
|
47
|
+
defaultMode?: Mode;
|
|
48
|
+
modeStorageKey?: string;
|
|
49
|
+
colorSchemeStorageKey?: string;
|
|
50
|
+
storageWindow?: Window | null;
|
|
51
|
+
}
|
|
52
|
+
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
|
|
53
|
+
export {};
|
|
@@ -5,11 +5,12 @@ import { exactProp } from '@mui/utils';
|
|
|
5
5
|
import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
|
|
6
6
|
import useTheme from '../useTheme';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
const EMPTY_THEME = {};
|
|
8
9
|
|
|
9
10
|
function InnerThemeProvider(props) {
|
|
10
11
|
const theme = useTheme();
|
|
11
12
|
return /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
|
|
12
|
-
value: typeof theme === 'object' ? theme :
|
|
13
|
+
value: typeof theme === 'object' ? theme : EMPTY_THEME,
|
|
13
14
|
children: props.children
|
|
14
15
|
});
|
|
15
16
|
}
|
|
@@ -7,7 +7,7 @@ export default function createSpacing(spacingInput = 8) {
|
|
|
7
7
|
return spacingInput;
|
|
8
8
|
} // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
|
|
9
9
|
// Smaller components, such as icons, can align to a 4dp grid.
|
|
10
|
-
// https://material.io/design/layout/understanding-layout.html
|
|
10
|
+
// https://m2.material.io/design/layout/understanding-layout.html
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
const transform = createUnarySpacing({
|
|
@@ -221,17 +221,18 @@ export default function createCssVarsProvider(options) {
|
|
|
221
221
|
hasMounted.current = false;
|
|
222
222
|
};
|
|
223
223
|
}, []);
|
|
224
|
+
const contextValue = React.useMemo(() => ({
|
|
225
|
+
mode,
|
|
226
|
+
systemMode,
|
|
227
|
+
setMode,
|
|
228
|
+
lightColorScheme,
|
|
229
|
+
darkColorScheme,
|
|
230
|
+
colorScheme,
|
|
231
|
+
setColorScheme,
|
|
232
|
+
allColorSchemes
|
|
233
|
+
}), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
|
|
224
234
|
return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
|
|
225
|
-
value:
|
|
226
|
-
mode,
|
|
227
|
-
systemMode,
|
|
228
|
-
setMode,
|
|
229
|
-
lightColorScheme,
|
|
230
|
-
darkColorScheme,
|
|
231
|
-
colorScheme,
|
|
232
|
-
setColorScheme,
|
|
233
|
-
allColorSchemes
|
|
234
|
-
},
|
|
235
|
+
value: contextValue,
|
|
235
236
|
children: [/*#__PURE__*/_jsx(GlobalStyles, {
|
|
236
237
|
styles: {
|
|
237
238
|
[colorSchemeSelector]: rootCss
|
package/index.js
CHANGED
package/index.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -6,11 +6,12 @@ import { exactProp } from '@mui/utils';
|
|
|
6
6
|
import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
|
|
7
7
|
import useTheme from '../useTheme';
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
var EMPTY_THEME = {};
|
|
9
10
|
|
|
10
11
|
function InnerThemeProvider(props) {
|
|
11
12
|
var theme = useTheme();
|
|
12
13
|
return /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
|
|
13
|
-
value: _typeof(theme) === 'object' ? theme :
|
|
14
|
+
value: _typeof(theme) === 'object' ? theme : EMPTY_THEME,
|
|
14
15
|
children: props.children
|
|
15
16
|
});
|
|
16
17
|
}
|
|
@@ -9,7 +9,7 @@ export default function createSpacing() {
|
|
|
9
9
|
return spacingInput;
|
|
10
10
|
} // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
|
|
11
11
|
// Smaller components, such as icons, can align to a 4dp grid.
|
|
12
|
-
// https://material.io/design/layout/understanding-layout.html
|
|
12
|
+
// https://m2.material.io/design/layout/understanding-layout.html
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
var transform = createUnarySpacing({
|
|
@@ -245,8 +245,8 @@ export default function createCssVarsProvider(options) {
|
|
|
245
245
|
hasMounted.current = false;
|
|
246
246
|
};
|
|
247
247
|
}, []);
|
|
248
|
-
|
|
249
|
-
|
|
248
|
+
var contextValue = React.useMemo(function () {
|
|
249
|
+
return {
|
|
250
250
|
mode: mode,
|
|
251
251
|
systemMode: systemMode,
|
|
252
252
|
setMode: setMode,
|
|
@@ -255,7 +255,10 @@ export default function createCssVarsProvider(options) {
|
|
|
255
255
|
colorScheme: colorScheme,
|
|
256
256
|
setColorScheme: setColorScheme,
|
|
257
257
|
allColorSchemes: allColorSchemes
|
|
258
|
-
}
|
|
258
|
+
};
|
|
259
|
+
}, [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
|
|
260
|
+
return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
|
|
261
|
+
value: contextValue,
|
|
259
262
|
children: [/*#__PURE__*/_jsx(GlobalStyles, {
|
|
260
263
|
styles: _defineProperty({}, colorSchemeSelector, rootCss)
|
|
261
264
|
}), /*#__PURE__*/_jsx(GlobalStyles, {
|
|
@@ -25,5 +25,5 @@ export default function getInitColorSchemeScript(options) {
|
|
|
25
25
|
dangerouslySetInnerHTML: {
|
|
26
26
|
__html: "(function() { try {\n var mode = localStorage.getItem('".concat(modeStorageKey, "') || '").concat(defaultMode, "';\n var cssColorScheme = mode;\n var colorScheme = '';\n if (mode === 'system') {\n // handle system mode\n var mql = window.matchMedia('(prefers-color-scheme: dark)');\n if (mql.matches) {\n cssColorScheme = 'dark';\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n } else {\n cssColorScheme = 'light';\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n }\n }\n if (mode === 'light') {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-light') || '").concat(defaultLightColorScheme, "';\n }\n if (mode === 'dark') {\n colorScheme = localStorage.getItem('").concat(colorSchemeStorageKey, "-dark') || '").concat(defaultDarkColorScheme, "';\n }\n if (colorScheme) {\n ").concat(colorSchemeNode, ".setAttribute('").concat(attribute, "', colorScheme);\n }\n } catch (e) {} })();")
|
|
27
27
|
}
|
|
28
|
-
});
|
|
28
|
+
}, "mui-color-scheme-init");
|
|
29
29
|
}
|
package/legacy/index.js
CHANGED
|
@@ -5,11 +5,12 @@ import { exactProp } from '@mui/utils';
|
|
|
5
5
|
import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
|
|
6
6
|
import useTheme from '../useTheme';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
+
const EMPTY_THEME = {};
|
|
8
9
|
|
|
9
10
|
function InnerThemeProvider(props) {
|
|
10
11
|
const theme = useTheme();
|
|
11
12
|
return /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
|
|
12
|
-
value: typeof theme === 'object' ? theme :
|
|
13
|
+
value: typeof theme === 'object' ? theme : EMPTY_THEME,
|
|
13
14
|
children: props.children
|
|
14
15
|
});
|
|
15
16
|
}
|
|
@@ -7,7 +7,7 @@ export default function createSpacing(spacingInput = 8) {
|
|
|
7
7
|
return spacingInput;
|
|
8
8
|
} // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
|
|
9
9
|
// Smaller components, such as icons, can align to a 4dp grid.
|
|
10
|
-
// https://material.io/design/layout/understanding-layout.html
|
|
10
|
+
// https://m2.material.io/design/layout/understanding-layout.html
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
const transform = createUnarySpacing({
|
|
@@ -221,17 +221,18 @@ export default function createCssVarsProvider(options) {
|
|
|
221
221
|
hasMounted.current = false;
|
|
222
222
|
};
|
|
223
223
|
}, []);
|
|
224
|
+
const contextValue = React.useMemo(() => ({
|
|
225
|
+
mode,
|
|
226
|
+
systemMode,
|
|
227
|
+
setMode,
|
|
228
|
+
lightColorScheme,
|
|
229
|
+
darkColorScheme,
|
|
230
|
+
colorScheme,
|
|
231
|
+
setColorScheme,
|
|
232
|
+
allColorSchemes
|
|
233
|
+
}), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
|
|
224
234
|
return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
|
|
225
|
-
value:
|
|
226
|
-
mode,
|
|
227
|
-
systemMode,
|
|
228
|
-
setMode,
|
|
229
|
-
lightColorScheme,
|
|
230
|
-
darkColorScheme,
|
|
231
|
-
colorScheme,
|
|
232
|
-
setColorScheme,
|
|
233
|
-
allColorSchemes
|
|
234
|
-
},
|
|
235
|
+
value: contextValue,
|
|
235
236
|
children: [/*#__PURE__*/_jsx(GlobalStyles, {
|
|
236
237
|
styles: {
|
|
237
238
|
[colorSchemeSelector]: rootCss
|
package/modern/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|