@mui/system 5.4.2 → 5.4.3
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 +47 -0
- package/createBox.spec.d.ts +1 -1
- package/createTheme/createSpacing.d.ts +10 -10
- package/cssVars/createCssVarsProvider.d.ts +34 -101
- package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +68 -68
- package/cssVars/getInitColorSchemeScript.d.ts +12 -12
- package/cssVars/index.d.ts +1 -2
- package/cssVars/useCurrentColorScheme.d.ts +50 -50
- package/index.js +1 -1
- package/index.spec.d.ts +1 -1
- package/legacy/index.js +1 -1
- package/modern/index.js +1 -1
- package/package.json +1 -1
- package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
package/Box/Box.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,52 @@
|
|
|
1
1
|
# [Versions](https://mui.com/versions/)
|
|
2
2
|
|
|
3
|
+
## 5.4.3
|
|
4
|
+
|
|
5
|
+
<!-- generated comparing v5.4.2..master -->
|
|
6
|
+
|
|
7
|
+
_Feb 21, 2022_
|
|
8
|
+
|
|
9
|
+
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
|
|
10
|
+
|
|
11
|
+
- 🛠 @hbjORbj made components use theme duration/easing values by default (#30894)
|
|
12
|
+
- A meaningful number of 🐛 bug fixes and 📚 documentation improvements
|
|
13
|
+
|
|
14
|
+
### `@mui/material@5.4.3`
|
|
15
|
+
|
|
16
|
+
- ​<!-- 18 -->[ButtonBase] Fix typo (#31135) @Jastor11
|
|
17
|
+
- ​<!-- 05 -->[Stepper] Export useStepContext (#31021) @michaldudak
|
|
18
|
+
- ​<!-- 04 -->[Transitions] Some components do not use transition duration/easing values from theme (#30894) @hbjORbj
|
|
19
|
+
|
|
20
|
+
### `@mui/icons-material@5.4.3`
|
|
21
|
+
|
|
22
|
+
- ​<!-- 11 -->[icons] Add "circle" icon synonyms (#31118) @gnowland
|
|
23
|
+
|
|
24
|
+
### `@mui/joy@5.0.0-alpha.16`
|
|
25
|
+
|
|
26
|
+
- ​<!-- 10 -->[Joy] `List` second iteration (#31134) @siriwatknp
|
|
27
|
+
- ​<!-- 09 -->[Joy] Fix typings (#31120) @siriwatknp
|
|
28
|
+
- ​<!-- 08 -->[Joy] Add initial `List` components (#30987) @siriwatknp
|
|
29
|
+
|
|
30
|
+
### Docs
|
|
31
|
+
|
|
32
|
+
- ​<!-- 19 -->[website] Improve full-stack role job description (#31160) @Janpot
|
|
33
|
+
- ​<!-- 14 -->[docs] Fix typo of migration guides v4 (#31136) @pppp606
|
|
34
|
+
- ​<!-- 13 -->[docs] Update on the support page to account for v4 LTS support (#31029) @danilo-leal
|
|
35
|
+
- ​<!-- 12 -->[docs] Fix small typo in chips.md (#31092) @cameliaben
|
|
36
|
+
- ​<!-- 07 -->[l10n] Add it-IT translation for labelDisplayedRows (#31131) @frab90
|
|
37
|
+
- ​<!-- 06 -->[l10n] Add pl-PL translation for labelDisplayedRows (#31088) @ThomasTheHuman
|
|
38
|
+
- ​<!-- 03 -->[website] Sync MUI X table feature (#30913) @alexfauquette
|
|
39
|
+
- ​<!-- 02 -->[website] Prefill source in job application links (#31036) @oliviertassinari
|
|
40
|
+
- ​<!-- 01 -->[website] Fix a grammar mistake (#31099) @huyenltnguyen
|
|
41
|
+
|
|
42
|
+
### Core
|
|
43
|
+
|
|
44
|
+
- ​<!-- 17 -->[core] Add jsx, html, css and prisma to prettier extensions (#31161) @Janpot
|
|
45
|
+
- ​<!-- 16 -->[core] Allow to run material-ui.com/store alongside mui.com/store (#31065) @oliviertassinari
|
|
46
|
+
- ​<!-- 15 -->[core] Polish design tokens (#31095) @oliviertassinari
|
|
47
|
+
|
|
48
|
+
All contributors of this release in alphabetical order: @alexfauquette, @cameliaben, @danilo-leal, @frab90, @gnowland, @hbjORbj, @huyenltnguyen, @Janpot, @Jastor11, @michaldudak, @oliviertassinari, @pppp606, @siriwatknp, @ThomasTheHuman
|
|
49
|
+
|
|
3
50
|
## 5.4.2
|
|
4
51
|
|
|
5
52
|
_Feb 15, 2022_
|
package/createBox.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
|
|
2
|
-
export declare type SpacingArgument = number | string;
|
|
3
|
-
export interface Spacing {
|
|
4
|
-
(): string;
|
|
5
|
-
(value: number): string;
|
|
6
|
-
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
|
|
7
|
-
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
|
|
8
|
-
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
|
|
9
|
-
}
|
|
10
|
-
export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
|
|
1
|
+
export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
|
|
2
|
+
export declare type SpacingArgument = number | string;
|
|
3
|
+
export interface Spacing {
|
|
4
|
+
(): string;
|
|
5
|
+
(value: number): string;
|
|
6
|
+
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
|
|
7
|
+
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
|
|
8
|
+
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
|
|
9
|
+
}
|
|
10
|
+
export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
|
|
@@ -2,73 +2,16 @@ import * as React from 'react';
|
|
|
2
2
|
import getInitColorSchemeScript from './getInitColorSchemeScript';
|
|
3
3
|
import { Mode, Result } from './useCurrentColorScheme';
|
|
4
4
|
|
|
5
|
-
export type BuildCssVarsTheme<ThemeInput> = ThemeInput extends {
|
|
6
|
-
colorSchemes: Record<string, infer ColorSystems>;
|
|
7
|
-
}
|
|
8
|
-
? Omit<ThemeInput, 'colorSchemes'> &
|
|
9
|
-
ColorSystems & { vars: Omit<ThemeInput, 'colorSchemes'> & ColorSystems }
|
|
10
|
-
: never;
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* DesignSystemColorScheme: is what a design system provide by default. Mostly, `light` and `dark`
|
|
14
|
-
* ApplicationColorScheme: is what developer can extend from a design system. Ex, `comfort` `trueDark` ...any name that they want
|
|
15
|
-
*
|
|
16
|
-
* This type enhance customization experience by checking if developer has extended the colorScheme or not (usually via module augmentation)
|
|
17
|
-
* If yes, they must provide the palette of the extended colorScheme. Otherwise `theme` is optional.
|
|
18
|
-
*/
|
|
19
|
-
type DecideTheme<
|
|
20
|
-
DesignSystemTheme extends { colorSchemes: Record<DesignSystemColorScheme, any> },
|
|
21
|
-
DesignSystemColorScheme extends string,
|
|
22
|
-
ApplicationTheme extends { colorSchemes: Record<ApplicationColorScheme, any> },
|
|
23
|
-
ApplicationColorScheme extends string | never,
|
|
24
|
-
> = [ApplicationColorScheme] extends [never]
|
|
25
|
-
? {
|
|
26
|
-
theme?: Omit<DesignSystemTheme, 'colorSchemes'> & {
|
|
27
|
-
colorSchemes?: Partial<
|
|
28
|
-
Record<
|
|
29
|
-
DesignSystemColorScheme,
|
|
30
|
-
DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
|
|
31
|
-
>
|
|
32
|
-
>;
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
: {
|
|
36
|
-
theme: Omit<ApplicationTheme, 'colorSchemes'> & {
|
|
37
|
-
colorSchemes: Partial<
|
|
38
|
-
Record<
|
|
39
|
-
DesignSystemColorScheme,
|
|
40
|
-
DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
|
|
41
|
-
>
|
|
42
|
-
> &
|
|
43
|
-
Record<ApplicationColorScheme, ApplicationTheme['colorSchemes'][ApplicationColorScheme]>;
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
|
|
47
5
|
export interface ColorSchemeContextValue<SupportedColorScheme extends string>
|
|
48
6
|
extends Result<SupportedColorScheme> {
|
|
49
7
|
allColorSchemes: SupportedColorScheme[];
|
|
50
8
|
}
|
|
51
9
|
|
|
52
|
-
export
|
|
53
|
-
DesignSystemThemeInput extends {
|
|
54
|
-
colorSchemes: Record<DesignSystemColorScheme, any>;
|
|
55
|
-
},
|
|
56
|
-
DesignSystemColorScheme extends string,
|
|
57
|
-
ApplicationThemeInput extends {
|
|
58
|
-
colorSchemes: Record<ApplicationColorScheme, any>;
|
|
59
|
-
} = never,
|
|
60
|
-
ApplicationColorScheme extends string = never,
|
|
61
|
-
>(options: {
|
|
62
|
-
/**
|
|
63
|
-
* Design system default theme
|
|
64
|
-
*/
|
|
65
|
-
theme: DesignSystemThemeInput;
|
|
10
|
+
export interface CssVarsProviderConfig<ColorScheme extends string> {
|
|
66
11
|
/**
|
|
67
12
|
* Design system default color scheme
|
|
68
13
|
*/
|
|
69
|
-
defaultColorScheme:
|
|
70
|
-
| DesignSystemColorScheme
|
|
71
|
-
| { light: DesignSystemColorScheme; dark: DesignSystemColorScheme };
|
|
14
|
+
defaultColorScheme: ColorScheme | { light: ColorScheme; dark: ColorScheme };
|
|
72
15
|
/**
|
|
73
16
|
* Design system default mode
|
|
74
17
|
* @default 'light'
|
|
@@ -89,39 +32,38 @@ export default function createCssVarsProvider<
|
|
|
89
32
|
* @default ''
|
|
90
33
|
*/
|
|
91
34
|
prefix?: string;
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export default function createCssVarsProvider<
|
|
38
|
+
ColorScheme extends string,
|
|
39
|
+
ThemeInput extends { colorSchemes?: Partial<Record<ColorScheme, any>> },
|
|
40
|
+
>(
|
|
41
|
+
options: CssVarsProviderConfig<ColorScheme> & {
|
|
42
|
+
/**
|
|
43
|
+
* Design system default theme
|
|
44
|
+
*/
|
|
45
|
+
theme: any;
|
|
46
|
+
/**
|
|
47
|
+
* A function to determine if the key, value should be attached as CSS Variable
|
|
48
|
+
* `keys` is an array that represents the object path keys.
|
|
49
|
+
* Ex, if the theme is { foo: { bar: 'var(--test)' } }
|
|
50
|
+
* then, keys = ['foo', 'bar']
|
|
51
|
+
* value = 'var(--test)'
|
|
52
|
+
*/
|
|
53
|
+
shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
|
|
54
|
+
/**
|
|
55
|
+
* A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
|
|
56
|
+
*
|
|
57
|
+
* The example usage is the variant generation in Joy. We need to combine the token from user-input and the default theme first, then generate
|
|
58
|
+
* variants from those tokens.
|
|
59
|
+
*/
|
|
60
|
+
resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
|
|
61
|
+
},
|
|
62
|
+
): {
|
|
108
63
|
CssVarsProvider: (
|
|
109
64
|
props: React.PropsWithChildren<
|
|
110
|
-
{
|
|
111
|
-
|
|
112
|
-
* Application default mode (overrides design system `defaultMode` if specified)
|
|
113
|
-
*/
|
|
114
|
-
defaultMode?: Mode;
|
|
115
|
-
/**
|
|
116
|
-
* Application default colorScheme (overrides design system `defaultColorScheme` if specified)
|
|
117
|
-
*/
|
|
118
|
-
defaultColorScheme?:
|
|
119
|
-
| DesignSystemColorScheme
|
|
120
|
-
| ApplicationColorScheme
|
|
121
|
-
| {
|
|
122
|
-
light: DesignSystemColorScheme | ApplicationColorScheme;
|
|
123
|
-
dark: DesignSystemColorScheme | ApplicationColorScheme;
|
|
124
|
-
};
|
|
65
|
+
Partial<CssVarsProviderConfig<ColorScheme>> & {
|
|
66
|
+
theme?: ThemeInput;
|
|
125
67
|
/**
|
|
126
68
|
* localStorage key used to store application `mode`
|
|
127
69
|
* @default 'mui-mode'
|
|
@@ -132,19 +74,10 @@ export default function createCssVarsProvider<
|
|
|
132
74
|
* @default 'data-mui-color-scheme'
|
|
133
75
|
*/
|
|
134
76
|
attribute?: string;
|
|
135
|
-
|
|
136
|
-
* CSS variable prefix (overrides design system `prefix` if specified)
|
|
137
|
-
*/
|
|
138
|
-
prefix?: string;
|
|
139
|
-
} & DecideTheme<
|
|
140
|
-
DesignSystemThemeInput,
|
|
141
|
-
DesignSystemColorScheme,
|
|
142
|
-
ApplicationThemeInput,
|
|
143
|
-
ApplicationColorScheme
|
|
144
|
-
>
|
|
77
|
+
}
|
|
145
78
|
>,
|
|
146
79
|
) => React.ReactElement;
|
|
147
|
-
useColorScheme: () => ColorSchemeContextValue<
|
|
80
|
+
useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
|
|
148
81
|
getInitColorSchemeScript: typeof getInitColorSchemeScript;
|
|
149
82
|
};
|
|
150
83
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
|
|
3
|
-
* and they does not need to remember the prefix (defined once).
|
|
4
|
-
*/
|
|
5
|
-
export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;
|
|
1
|
+
/**
|
|
2
|
+
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
|
|
3
|
+
* and they does not need to remember the prefix (defined once).
|
|
4
|
+
*/
|
|
5
|
+
export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;
|
|
@@ -1,68 +1,68 @@
|
|
|
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: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => 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, scope: Record<string, string | number>) => 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
|
-
* basePrefix?: string,
|
|
41
|
-
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
|
42
|
-
* }} options.
|
|
43
|
-
* `basePrefix`: defined by design system.
|
|
44
|
-
* `prefix`: defined by application
|
|
45
|
-
*
|
|
46
|
-
* This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
|
|
47
|
-
*
|
|
48
|
-
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
|
|
49
|
-
*
|
|
50
|
-
* @example
|
|
51
|
-
* const { css, vars } = parser({
|
|
52
|
-
* fontSize: 12,
|
|
53
|
-
* lineHeight: 1.2,
|
|
54
|
-
* palette: { primary: { 500: '#000000' } }
|
|
55
|
-
* })
|
|
56
|
-
*
|
|
57
|
-
* console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
|
|
58
|
-
* console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
|
|
59
|
-
*/
|
|
60
|
-
export default function cssVarsParser(theme: Record<string, any>, options?: {
|
|
61
|
-
prefix?: string;
|
|
62
|
-
basePrefix?: string;
|
|
63
|
-
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
64
|
-
}): {
|
|
65
|
-
css: NestedRecord<string>;
|
|
66
|
-
vars: NestedRecord<string>;
|
|
67
|
-
};
|
|
68
|
-
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: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => 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, scope: Record<string, string | number>) => 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
|
+
* basePrefix?: string,
|
|
41
|
+
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
|
42
|
+
* }} options.
|
|
43
|
+
* `basePrefix`: defined by design system.
|
|
44
|
+
* `prefix`: defined by application
|
|
45
|
+
*
|
|
46
|
+
* This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
|
|
47
|
+
*
|
|
48
|
+
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* const { css, vars } = parser({
|
|
52
|
+
* fontSize: 12,
|
|
53
|
+
* lineHeight: 1.2,
|
|
54
|
+
* palette: { primary: { 500: '#000000' } }
|
|
55
|
+
* })
|
|
56
|
+
*
|
|
57
|
+
* console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
|
|
58
|
+
* console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
|
|
59
|
+
*/
|
|
60
|
+
export default function cssVarsParser(theme: Record<string, any>, options?: {
|
|
61
|
+
prefix?: string;
|
|
62
|
+
basePrefix?: string;
|
|
63
|
+
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
64
|
+
}): {
|
|
65
|
+
css: NestedRecord<string>;
|
|
66
|
+
vars: NestedRecord<string>;
|
|
67
|
+
};
|
|
68
|
+
export {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
|
|
3
|
-
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
|
|
4
|
-
export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
|
|
5
|
-
export default function getInitColorSchemeScript(options?: {
|
|
6
|
-
enableSystem?: boolean;
|
|
7
|
-
defaultLightColorScheme?: string;
|
|
8
|
-
defaultDarkColorScheme?: string;
|
|
9
|
-
modeStorageKey?: string;
|
|
10
|
-
colorSchemeStorageKey?: string;
|
|
11
|
-
attribute?: string;
|
|
12
|
-
}): JSX.Element;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
|
|
3
|
+
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
|
|
4
|
+
export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
|
|
5
|
+
export default function getInitColorSchemeScript(options?: {
|
|
6
|
+
enableSystem?: boolean;
|
|
7
|
+
defaultLightColorScheme?: string;
|
|
8
|
+
defaultDarkColorScheme?: string;
|
|
9
|
+
modeStorageKey?: string;
|
|
10
|
+
colorSchemeStorageKey?: string;
|
|
11
|
+
attribute?: string;
|
|
12
|
+
}): JSX.Element;
|
package/cssVars/index.d.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
export { default } from './createCssVarsProvider';
|
|
2
|
-
export type { BuildCssVarsTheme } from './createCssVarsProvider';
|
|
1
|
+
export { default } from './createCssVarsProvider';
|
|
@@ -1,50 +1,50 @@
|
|
|
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
|
-
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
|
|
44
|
-
defaultLightColorScheme: SupportedColorScheme;
|
|
45
|
-
defaultDarkColorScheme: SupportedColorScheme;
|
|
46
|
-
supportedColorSchemes: Array<SupportedColorScheme>;
|
|
47
|
-
defaultMode?: Mode;
|
|
48
|
-
modeStorageKey?: string;
|
|
49
|
-
colorSchemeStorageKey?: string;
|
|
50
|
-
}): Result<SupportedColorScheme>;
|
|
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
|
+
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
|
|
44
|
+
defaultLightColorScheme: SupportedColorScheme;
|
|
45
|
+
defaultDarkColorScheme: SupportedColorScheme;
|
|
46
|
+
supportedColorSchemes: Array<SupportedColorScheme>;
|
|
47
|
+
defaultMode?: Mode;
|
|
48
|
+
modeStorageKey?: string;
|
|
49
|
+
colorSchemeStorageKey?: string;
|
|
50
|
+
}): Result<SupportedColorScheme>;
|
package/index.js
CHANGED
package/index.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/legacy/index.js
CHANGED
package/modern/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|