@mui/system 5.14.1 → 5.14.4
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.d.ts +15 -9
- package/CHANGELOG.md +253 -4
- 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/GlobalStyles/GlobalStyles.d.ts +13 -13
- package/GlobalStyles/index.d.ts +2 -2
- package/Stack/Stack.d.ts +14 -14
- package/Stack/StackProps.d.ts +53 -53
- package/Stack/createStack.d.ts +21 -21
- package/Stack/createStack.js +5 -1
- package/Stack/index.d.ts +5 -5
- package/Stack/stackClasses.d.ts +8 -8
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/Grid.js +23 -0
- package/Unstable_Grid/GridProps.d.ts +185 -185
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridGenerator.d.ts +33 -33
- package/Unstable_Grid/index.d.ts +6 -6
- package/Unstable_Grid/traverseBreakpoints.d.ts +7 -7
- package/createStyled.d.ts +6 -6
- package/createStyled.js +23 -4
- package/createTheme/createSpacing.d.ts +10 -10
- package/cssVars/createCssVarsTheme.d.ts +15 -15
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +64 -64
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/index.d.ts +5 -5
- package/cssVars/prepareCssVars.d.ts +16 -16
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/esm/Stack/createStack.js +5 -1
- package/esm/Unstable_Grid/Grid.js +23 -0
- package/esm/createStyled.js +24 -5
- package/esm/styleFunctionSx/styleFunctionSx.js +2 -0
- package/index.js +1 -1
- package/legacy/Stack/createStack.js +5 -2
- package/legacy/Unstable_Grid/Grid.js +23 -0
- package/legacy/createStyled.js +25 -5
- package/legacy/index.js +1 -1
- package/legacy/styleFunctionSx/styleFunctionSx.js +2 -0
- package/modern/Stack/createStack.js +5 -1
- package/modern/Unstable_Grid/Grid.js +23 -0
- package/modern/createStyled.js +24 -5
- package/modern/index.js +1 -1
- package/modern/styleFunctionSx/styleFunctionSx.js +2 -0
- package/package.json +4 -4
- package/styleFunctionSx/styleFunctionSx.js +2 -0
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
export interface GridClasses {
|
|
2
|
-
/** Styles applied to the root element. */
|
|
3
|
-
root: string;
|
|
4
|
-
/** Styles applied to the root element if `container={true}`. */
|
|
5
|
-
container: string;
|
|
6
|
-
/** Styles applied to the root element if `direction="column"`. */
|
|
7
|
-
'direction-xs-column': string;
|
|
8
|
-
/** Styles applied to the root element if `direction="column-reverse"`. */
|
|
9
|
-
'direction-xs-column-reverse': string;
|
|
10
|
-
/** Styles applied to the root element if `direction="row-reverse"`. */
|
|
11
|
-
'direction-xs-row-reverse': string;
|
|
12
|
-
/** Styles applied to the root element if `wrap="nowrap"`. */
|
|
13
|
-
'wrap-xs-nowrap': string;
|
|
14
|
-
/** Styles applied to the root element if `wrap="reverse"`. */
|
|
15
|
-
'wrap-xs-wrap-reverse': string;
|
|
16
|
-
}
|
|
17
|
-
export type GridClassKey = keyof GridClasses;
|
|
18
|
-
export declare function getGridUtilityClass(slot: string): string;
|
|
19
|
-
declare const gridClasses: GridClasses;
|
|
20
|
-
export default gridClasses;
|
|
1
|
+
export interface GridClasses {
|
|
2
|
+
/** Styles applied to the root element. */
|
|
3
|
+
root: string;
|
|
4
|
+
/** Styles applied to the root element if `container={true}`. */
|
|
5
|
+
container: string;
|
|
6
|
+
/** Styles applied to the root element if `direction="column"`. */
|
|
7
|
+
'direction-xs-column': string;
|
|
8
|
+
/** Styles applied to the root element if `direction="column-reverse"`. */
|
|
9
|
+
'direction-xs-column-reverse': string;
|
|
10
|
+
/** Styles applied to the root element if `direction="row-reverse"`. */
|
|
11
|
+
'direction-xs-row-reverse': string;
|
|
12
|
+
/** Styles applied to the root element if `wrap="nowrap"`. */
|
|
13
|
+
'wrap-xs-nowrap': string;
|
|
14
|
+
/** Styles applied to the root element if `wrap="reverse"`. */
|
|
15
|
+
'wrap-xs-wrap-reverse': string;
|
|
16
|
+
}
|
|
17
|
+
export type GridClassKey = keyof GridClasses;
|
|
18
|
+
export declare function getGridUtilityClass(slot: string): string;
|
|
19
|
+
declare const gridClasses: GridClasses;
|
|
20
|
+
export default gridClasses;
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { Breakpoints } from '../createTheme/createBreakpoints';
|
|
2
|
-
import { Spacing } from '../createTheme/createSpacing';
|
|
3
|
-
import { ResponsiveStyleValue } from '../styleFunctionSx';
|
|
4
|
-
import { GridDirection, GridOwnerState } from './GridProps';
|
|
5
|
-
interface Props {
|
|
6
|
-
theme: {
|
|
7
|
-
breakpoints: Breakpoints;
|
|
8
|
-
spacing?: Spacing;
|
|
9
|
-
};
|
|
10
|
-
ownerState: GridOwnerState & {
|
|
11
|
-
parentDisableEqualOverflow?: boolean;
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
|
|
15
|
-
export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
|
|
16
|
-
export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {
|
|
17
|
-
[x: string]: string;
|
|
18
|
-
'--Grid-columns'?: undefined;
|
|
19
|
-
} | {
|
|
20
|
-
'--Grid-columns': number;
|
|
21
|
-
};
|
|
22
|
-
export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
|
|
23
|
-
[x: string]: string;
|
|
24
|
-
};
|
|
25
|
-
export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {
|
|
26
|
-
[x: string]: string;
|
|
27
|
-
};
|
|
28
|
-
export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
|
|
29
|
-
export declare const generateGridStyles: ({ ownerState }: Props) => {};
|
|
30
|
-
export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
|
|
31
|
-
export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
|
|
32
|
-
export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
|
|
33
|
-
export {};
|
|
1
|
+
import { Breakpoints } from '../createTheme/createBreakpoints';
|
|
2
|
+
import { Spacing } from '../createTheme/createSpacing';
|
|
3
|
+
import { ResponsiveStyleValue } from '../styleFunctionSx';
|
|
4
|
+
import { GridDirection, GridOwnerState } from './GridProps';
|
|
5
|
+
interface Props {
|
|
6
|
+
theme: {
|
|
7
|
+
breakpoints: Breakpoints;
|
|
8
|
+
spacing?: Spacing;
|
|
9
|
+
};
|
|
10
|
+
ownerState: GridOwnerState & {
|
|
11
|
+
parentDisableEqualOverflow?: boolean;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
|
|
15
|
+
export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
|
|
16
|
+
export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {
|
|
17
|
+
[x: string]: string;
|
|
18
|
+
'--Grid-columns'?: undefined;
|
|
19
|
+
} | {
|
|
20
|
+
'--Grid-columns': number;
|
|
21
|
+
};
|
|
22
|
+
export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
|
|
23
|
+
[x: string]: string;
|
|
24
|
+
};
|
|
25
|
+
export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {
|
|
26
|
+
[x: string]: string;
|
|
27
|
+
};
|
|
28
|
+
export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
|
|
29
|
+
export declare const generateGridStyles: ({ ownerState }: Props) => {};
|
|
30
|
+
export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
|
|
31
|
+
export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
|
|
32
|
+
export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
|
|
33
|
+
export {};
|
package/Unstable_Grid/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default } from './Grid';
|
|
2
|
-
export { default as createGrid } from './createGrid';
|
|
3
|
-
export * from './GridProps';
|
|
4
|
-
export { default as gridClasses } from './gridClasses';
|
|
5
|
-
export * from './gridClasses';
|
|
6
|
-
export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
|
|
1
|
+
export { default } from './Grid';
|
|
2
|
+
export { default as createGrid } from './createGrid';
|
|
3
|
+
export * from './GridProps';
|
|
4
|
+
export { default as gridClasses } from './gridClasses';
|
|
5
|
+
export * from './gridClasses';
|
|
6
|
+
export { traverseBreakpoints as unstable_traverseBreakpoints } from './traverseBreakpoints';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
|
|
2
|
-
export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
|
|
3
|
-
interface Iterator<T> {
|
|
4
|
-
(appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
|
|
5
|
-
}
|
|
6
|
-
export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
|
|
7
|
-
export {};
|
|
1
|
+
import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
|
|
2
|
+
export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
|
|
3
|
+
interface Iterator<T> {
|
|
4
|
+
(appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
|
|
5
|
+
}
|
|
6
|
+
export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
|
|
7
|
+
export {};
|
package/createStyled.d.ts
CHANGED
|
@@ -24,16 +24,16 @@ export interface MuiStyledOptions {
|
|
|
24
24
|
skipSx?: boolean;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
export type CreateMUIStyled<
|
|
28
|
-
MUIStyledCommonProps<
|
|
27
|
+
export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
|
|
28
|
+
MUIStyledCommonProps<Theme>,
|
|
29
29
|
MuiStyledOptions,
|
|
30
|
-
|
|
30
|
+
Theme
|
|
31
31
|
>;
|
|
32
32
|
|
|
33
|
-
export default function createStyled<
|
|
33
|
+
export default function createStyled<Theme extends object = DefaultTheme>(options?: {
|
|
34
34
|
themeId?: string;
|
|
35
|
-
defaultTheme?:
|
|
35
|
+
defaultTheme?: Theme;
|
|
36
36
|
rootShouldForwardProp?: (prop: PropertyKey) => boolean;
|
|
37
37
|
slotShouldForwardProp?: (prop: PropertyKey) => boolean;
|
|
38
38
|
styleFunctionSx?: typeof styleFunctionSx;
|
|
39
|
-
}): CreateMUIStyled<
|
|
39
|
+
}): CreateMUIStyled<Theme>;
|
package/createStyled.js
CHANGED
|
@@ -78,6 +78,9 @@ function shouldForwardProp(prop) {
|
|
|
78
78
|
const systemDefaultTheme = (0, _createTheme.default)();
|
|
79
79
|
exports.systemDefaultTheme = systemDefaultTheme;
|
|
80
80
|
const lowercaseFirstLetter = string => {
|
|
81
|
+
if (!string) {
|
|
82
|
+
return string;
|
|
83
|
+
}
|
|
81
84
|
return string.charAt(0).toLowerCase() + string.slice(1);
|
|
82
85
|
};
|
|
83
86
|
function resolveTheme({
|
|
@@ -87,6 +90,12 @@ function resolveTheme({
|
|
|
87
90
|
}) {
|
|
88
91
|
return isEmpty(theme) ? defaultTheme : theme[themeId] || theme;
|
|
89
92
|
}
|
|
93
|
+
function defaultOverridesResolver(slot) {
|
|
94
|
+
if (!slot) {
|
|
95
|
+
return null;
|
|
96
|
+
}
|
|
97
|
+
return (props, styles) => styles[slot];
|
|
98
|
+
}
|
|
90
99
|
function createStyled(input = {}) {
|
|
91
100
|
const {
|
|
92
101
|
themeId,
|
|
@@ -111,21 +120,31 @@ function createStyled(input = {}) {
|
|
|
111
120
|
slot: componentSlot,
|
|
112
121
|
skipVariantsResolver: inputSkipVariantsResolver,
|
|
113
122
|
skipSx: inputSkipSx,
|
|
114
|
-
|
|
123
|
+
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
|
|
124
|
+
// For more details: https://github.com/mui/material-ui/pull/37908
|
|
125
|
+
overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot))
|
|
115
126
|
} = inputOptions,
|
|
116
127
|
options = (0, _objectWithoutPropertiesLoose2.default)(inputOptions, _excluded);
|
|
117
128
|
|
|
118
129
|
// if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
|
|
119
|
-
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
|
|
130
|
+
const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
|
|
131
|
+
// TODO v6: remove `Root` in the next major release
|
|
132
|
+
// For more details: https://github.com/mui/material-ui/pull/37908
|
|
133
|
+
componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
|
|
120
134
|
const skipSx = inputSkipSx || false;
|
|
121
135
|
let label;
|
|
122
136
|
if (process.env.NODE_ENV !== 'production') {
|
|
123
137
|
if (componentName) {
|
|
138
|
+
// TODO v6: remove `lowercaseFirstLetter()` in the next major release
|
|
139
|
+
// For more details: https://github.com/mui/material-ui/pull/37908
|
|
124
140
|
label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
|
|
125
141
|
}
|
|
126
142
|
}
|
|
127
143
|
let shouldForwardPropOption = shouldForwardProp;
|
|
128
|
-
|
|
144
|
+
|
|
145
|
+
// TODO v6: remove `Root` in the next major release
|
|
146
|
+
// For more details: https://github.com/mui/material-ui/pull/37908
|
|
147
|
+
if (componentSlot === 'Root' || componentSlot === 'root') {
|
|
129
148
|
shouldForwardPropOption = rootShouldForwardProp;
|
|
130
149
|
} else if (componentSlot) {
|
|
131
150
|
// any other slot specified
|
|
@@ -207,7 +226,7 @@ function createStyled(input = {}) {
|
|
|
207
226
|
if (process.env.NODE_ENV !== 'production') {
|
|
208
227
|
let displayName;
|
|
209
228
|
if (componentName) {
|
|
210
|
-
displayName = `${componentName}${componentSlot || ''}`;
|
|
229
|
+
displayName = `${componentName}${(0, _utils.unstable_capitalize)(componentSlot || '')}`;
|
|
211
230
|
}
|
|
212
231
|
if (displayName === undefined) {
|
|
213
232
|
displayName = `Styled(${(0, _utils.getDisplayName)(tag)})`;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
|
|
2
|
-
export 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 type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
|
|
2
|
+
export 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,15 +1,15 @@
|
|
|
1
|
-
import { DefaultCssVarsTheme } from './prepareCssVars';
|
|
2
|
-
interface Theme extends DefaultCssVarsTheme {
|
|
3
|
-
cssVarPrefix?: string;
|
|
4
|
-
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
5
|
-
}
|
|
6
|
-
declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>(theme: T): T & {
|
|
7
|
-
vars: ThemeVars;
|
|
8
|
-
generateCssVars: (colorScheme?: string | undefined) => {
|
|
9
|
-
css: {
|
|
10
|
-
[x: string]: string | number;
|
|
11
|
-
};
|
|
12
|
-
vars: ThemeVars;
|
|
13
|
-
};
|
|
14
|
-
};
|
|
15
|
-
export default createCssVarsTheme;
|
|
1
|
+
import { DefaultCssVarsTheme } from './prepareCssVars';
|
|
2
|
+
interface Theme extends DefaultCssVarsTheme {
|
|
3
|
+
cssVarPrefix?: string;
|
|
4
|
+
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
5
|
+
}
|
|
6
|
+
declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>(theme: T): T & {
|
|
7
|
+
vars: ThemeVars;
|
|
8
|
+
generateCssVars: (colorScheme?: string | undefined) => {
|
|
9
|
+
css: {
|
|
10
|
+
[x: string]: string | number;
|
|
11
|
+
};
|
|
12
|
+
vars: ThemeVars;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default createCssVarsTheme;
|
|
@@ -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, ...fallbacks: (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, ...fallbacks: (T | AdditionalVars)[]) => string;
|
|
@@ -1,64 +1,64 @@
|
|
|
1
|
-
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 }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
|
|
45
|
-
*
|
|
46
|
-
* @example
|
|
47
|
-
* const { css, vars } = 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
|
-
*/
|
|
56
|
-
export default function cssVarsParser<T extends Record<string, any>>(theme: Record<string, any>, options?: {
|
|
57
|
-
prefix?: string;
|
|
58
|
-
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
59
|
-
}): {
|
|
60
|
-
css: Record<string, string | number>;
|
|
61
|
-
vars: T;
|
|
62
|
-
varsWithDefaults: {};
|
|
63
|
-
};
|
|
64
|
-
export {};
|
|
1
|
+
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 }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* const { css, vars } = 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
|
+
*/
|
|
56
|
+
export default function cssVarsParser<T extends Record<string, any>>(theme: Record<string, any>, options?: {
|
|
57
|
+
prefix?: string;
|
|
58
|
+
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
59
|
+
}): {
|
|
60
|
+
css: Record<string, string | number>;
|
|
61
|
+
vars: T;
|
|
62
|
+
varsWithDefaults: {};
|
|
63
|
+
};
|
|
64
|
+
export {};
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
import * as React from '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): React.JSX.Element;
|
|
1
|
+
import * as React from '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): React.JSX.Element;
|
package/cssVars/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { default } from './createCssVarsProvider';
|
|
2
|
-
export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
|
|
3
|
-
export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
|
|
4
|
-
export { default as prepareCssVars } from './prepareCssVars';
|
|
5
|
-
export { default as createCssVarsTheme } from './createCssVarsTheme';
|
|
1
|
+
export { default } from './createCssVarsProvider';
|
|
2
|
+
export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
|
|
3
|
+
export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
|
|
4
|
+
export { default as prepareCssVars } from './prepareCssVars';
|
|
5
|
+
export { default as createCssVarsTheme } from './createCssVarsTheme';
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
export interface DefaultCssVarsTheme {
|
|
2
|
-
colorSchemes: Record<string, any>;
|
|
3
|
-
}
|
|
4
|
-
declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
|
|
5
|
-
prefix?: string;
|
|
6
|
-
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
7
|
-
}): {
|
|
8
|
-
vars: ThemeVars;
|
|
9
|
-
generateCssVars: (colorScheme?: string) => {
|
|
10
|
-
css: {
|
|
11
|
-
[x: string]: string | number;
|
|
12
|
-
};
|
|
13
|
-
vars: ThemeVars;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
export default prepareCssVars;
|
|
1
|
+
export interface DefaultCssVarsTheme {
|
|
2
|
+
colorSchemes: Record<string, any>;
|
|
3
|
+
}
|
|
4
|
+
declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
|
|
5
|
+
prefix?: string;
|
|
6
|
+
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
7
|
+
}): {
|
|
8
|
+
vars: ThemeVars;
|
|
9
|
+
generateCssVars: (colorScheme?: string) => {
|
|
10
|
+
css: {
|
|
11
|
+
[x: string]: string | number;
|
|
12
|
+
};
|
|
13
|
+
vars: ThemeVars;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export default prepareCssVars;
|