@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.
Files changed (49) hide show
  1. package/Box/Box.d.ts +15 -9
  2. package/CHANGELOG.md +253 -4
  3. package/Container/Container.d.ts +13 -13
  4. package/Container/ContainerProps.d.ts +40 -40
  5. package/Container/containerClasses.d.ts +22 -22
  6. package/Container/createContainer.d.ts +18 -18
  7. package/GlobalStyles/GlobalStyles.d.ts +13 -13
  8. package/GlobalStyles/index.d.ts +2 -2
  9. package/Stack/Stack.d.ts +14 -14
  10. package/Stack/StackProps.d.ts +53 -53
  11. package/Stack/createStack.d.ts +21 -21
  12. package/Stack/createStack.js +5 -1
  13. package/Stack/index.d.ts +5 -5
  14. package/Stack/stackClasses.d.ts +8 -8
  15. package/Unstable_Grid/Grid.d.ts +12 -12
  16. package/Unstable_Grid/Grid.js +23 -0
  17. package/Unstable_Grid/GridProps.d.ts +185 -185
  18. package/Unstable_Grid/createGrid.d.ts +11 -11
  19. package/Unstable_Grid/gridClasses.d.ts +20 -20
  20. package/Unstable_Grid/gridGenerator.d.ts +33 -33
  21. package/Unstable_Grid/index.d.ts +6 -6
  22. package/Unstable_Grid/traverseBreakpoints.d.ts +7 -7
  23. package/createStyled.d.ts +6 -6
  24. package/createStyled.js +23 -4
  25. package/createTheme/createSpacing.d.ts +10 -10
  26. package/cssVars/createCssVarsTheme.d.ts +15 -15
  27. package/cssVars/createGetCssVar.d.ts +5 -5
  28. package/cssVars/cssVarsParser.d.ts +64 -64
  29. package/cssVars/getInitColorSchemeScript.d.ts +42 -42
  30. package/cssVars/index.d.ts +5 -5
  31. package/cssVars/prepareCssVars.d.ts +16 -16
  32. package/cssVars/useCurrentColorScheme.d.ts +53 -53
  33. package/esm/Stack/createStack.js +5 -1
  34. package/esm/Unstable_Grid/Grid.js +23 -0
  35. package/esm/createStyled.js +24 -5
  36. package/esm/styleFunctionSx/styleFunctionSx.js +2 -0
  37. package/index.js +1 -1
  38. package/legacy/Stack/createStack.js +5 -2
  39. package/legacy/Unstable_Grid/Grid.js +23 -0
  40. package/legacy/createStyled.js +25 -5
  41. package/legacy/index.js +1 -1
  42. package/legacy/styleFunctionSx/styleFunctionSx.js +2 -0
  43. package/modern/Stack/createStack.js +5 -1
  44. package/modern/Unstable_Grid/Grid.js +23 -0
  45. package/modern/createStyled.js +24 -5
  46. package/modern/index.js +1 -1
  47. package/modern/styleFunctionSx/styleFunctionSx.js +2 -0
  48. package/package.json +4 -4
  49. 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 {};
@@ -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<T extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
28
- MUIStyledCommonProps<T>,
27
+ export type CreateMUIStyled<Theme extends object = DefaultTheme> = CreateMUIStyledStyledEngine<
28
+ MUIStyledCommonProps<Theme>,
29
29
  MuiStyledOptions,
30
- T
30
+ Theme
31
31
  >;
32
32
 
33
- export default function createStyled<T extends object = DefaultTheme>(options?: {
33
+ export default function createStyled<Theme extends object = DefaultTheme>(options?: {
34
34
  themeId?: string;
35
- defaultTheme?: T;
35
+ defaultTheme?: Theme;
36
36
  rootShouldForwardProp?: (prop: PropertyKey) => boolean;
37
37
  slotShouldForwardProp?: (prop: PropertyKey) => boolean;
38
38
  styleFunctionSx?: typeof styleFunctionSx;
39
- }): CreateMUIStyled<T>;
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
- overridesResolver
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 : componentSlot && componentSlot !== 'Root' || false;
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
- if (componentSlot === 'Root') {
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;
@@ -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;