@mui/system 7.0.2 → 7.1.1

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 (166) hide show
  1. package/Box/Box.d.ts +12 -31
  2. package/CHANGELOG.md +169 -0
  3. package/Grid/createGrid.js +1 -2
  4. package/InitColorSchemeScript/InitColorSchemeScript.js +1 -1
  5. package/Stack/createStack.js +1 -2
  6. package/borders/borders.d.ts +2 -1
  7. package/breakpoints/breakpoints.d.ts +1 -1
  8. package/compose/compose.d.ts +14 -1
  9. package/compose/index.d.ts +1 -1
  10. package/createStyled/createStyled.js +9 -4
  11. package/createTheme/shape.d.ts +1 -1
  12. package/cssGrid/cssGrid.d.ts +2 -1
  13. package/display/display.d.ts +2 -1
  14. package/esm/Box/Box.d.ts +12 -31
  15. package/esm/Grid/createGrid.js +1 -2
  16. package/esm/InitColorSchemeScript/InitColorSchemeScript.js +1 -1
  17. package/esm/Stack/createStack.js +1 -2
  18. package/esm/borders/borders.d.ts +2 -1
  19. package/esm/breakpoints/breakpoints.d.ts +1 -1
  20. package/esm/compose/compose.d.ts +14 -1
  21. package/esm/compose/index.d.ts +1 -1
  22. package/esm/createStyled/createStyled.js +9 -4
  23. package/esm/createTheme/shape.d.ts +1 -1
  24. package/esm/cssGrid/cssGrid.d.ts +2 -1
  25. package/esm/display/display.d.ts +2 -1
  26. package/esm/flexbox/flexbox.d.ts +15 -1
  27. package/esm/index.d.ts +10 -0
  28. package/esm/index.js +1 -1
  29. package/esm/palette/palette.d.ts +2 -1
  30. package/esm/positions/positions.d.ts +2 -1
  31. package/esm/shadows/shadows.d.ts +2 -1
  32. package/esm/sizing/sizing.d.ts +2 -1
  33. package/esm/spacing/spacing.d.ts +2 -1
  34. package/esm/style/style.d.ts +5 -1
  35. package/esm/styleFunctionSx/defaultSxConfig.d.ts +1 -2
  36. package/esm/typography/typography.d.ts +2 -1
  37. package/esm/useMediaQuery/useMediaQuery.js +3 -0
  38. package/esm/version/index.js +3 -3
  39. package/flexbox/flexbox.d.ts +15 -1
  40. package/index.d.ts +10 -0
  41. package/index.js +1 -1
  42. package/package.json +7 -7
  43. package/palette/palette.d.ts +2 -1
  44. package/positions/positions.d.ts +2 -1
  45. package/shadows/shadows.d.ts +2 -1
  46. package/sizing/sizing.d.ts +2 -1
  47. package/spacing/spacing.d.ts +2 -1
  48. package/style/style.d.ts +5 -1
  49. package/styleFunctionSx/defaultSxConfig.d.ts +1 -2
  50. package/typography/typography.d.ts +2 -1
  51. package/useMediaQuery/useMediaQuery.js +3 -0
  52. package/version/index.js +3 -3
  53. package/modern/Box/Box.d.ts +0 -72
  54. package/modern/Box/boxClasses.d.ts +0 -7
  55. package/modern/Box/index.d.ts +0 -4
  56. package/modern/CSSProperties.d.ts +0 -7
  57. package/modern/Container/Container.d.ts +0 -13
  58. package/modern/Container/ContainerProps.d.ts +0 -40
  59. package/modern/Container/containerClasses.d.ts +0 -22
  60. package/modern/Container/createContainer.d.ts +0 -18
  61. package/modern/Container/index.d.ts +0 -4
  62. package/modern/DefaultPropsProvider/DefaultPropsProvider.d.ts +0 -18
  63. package/modern/DefaultPropsProvider/index.d.ts +0 -1
  64. package/modern/GlobalStyles/GlobalStyles.d.ts +0 -17
  65. package/modern/GlobalStyles/index.d.ts +0 -2
  66. package/modern/Grid/Grid.d.ts +0 -13
  67. package/modern/Grid/GridProps.d.ts +0 -103
  68. package/modern/Grid/createGrid.d.ts +0 -13
  69. package/modern/Grid/deleteLegacyGridProps.d.ts +0 -11
  70. package/modern/Grid/gridClasses.d.ts +0 -20
  71. package/modern/Grid/gridGenerator.d.ts +0 -42
  72. package/modern/Grid/index.d.ts +0 -7
  73. package/modern/Grid/traverseBreakpoints.d.ts +0 -7
  74. package/modern/InitColorSchemeScript/InitColorSchemeScript.d.ts +0 -51
  75. package/modern/InitColorSchemeScript/index.d.ts +0 -2
  76. package/modern/RtlProvider/index.d.ts +0 -8
  77. package/modern/Stack/Stack.d.ts +0 -14
  78. package/modern/Stack/StackProps.d.ts +0 -53
  79. package/modern/Stack/createStack.d.ts +0 -24
  80. package/modern/Stack/index.d.ts +0 -5
  81. package/modern/Stack/stackClasses.d.ts +0 -8
  82. package/modern/ThemeProvider/ThemeProvider.d.ts +0 -24
  83. package/modern/ThemeProvider/index.d.ts +0 -2
  84. package/modern/borders/borders.d.ts +0 -14
  85. package/modern/borders/index.d.ts +0 -2
  86. package/modern/breakpoints/breakpoints.d.ts +0 -19
  87. package/modern/breakpoints/index.d.ts +0 -2
  88. package/modern/colorManipulator/colorManipulator.d.ts +0 -25
  89. package/modern/colorManipulator/index.d.ts +0 -1
  90. package/modern/compose/compose.d.ts +0 -2
  91. package/modern/compose/index.d.ts +0 -1
  92. package/modern/createBox/createBox.d.ts +0 -9
  93. package/modern/createBox/index.d.ts +0 -1
  94. package/modern/createBreakpoints/createBreakpoints.d.ts +0 -78
  95. package/modern/createBreakpoints/index.d.ts +0 -3
  96. package/modern/createStyled/createStyled.d.ts +0 -27
  97. package/modern/createStyled/index.d.ts +0 -2
  98. package/modern/createTheme/applyStyles.d.ts +0 -67
  99. package/modern/createTheme/createSpacing.d.ts +0 -10
  100. package/modern/createTheme/createTheme.d.ts +0 -54
  101. package/modern/createTheme/index.d.ts +0 -4
  102. package/modern/createTheme/shape.d.ts +0 -6
  103. package/modern/cssContainerQueries/cssContainerQueries.d.ts +0 -23
  104. package/modern/cssContainerQueries/index.d.ts +0 -3
  105. package/modern/cssGrid/cssGrid.d.ts +0 -15
  106. package/modern/cssGrid/index.d.ts +0 -2
  107. package/modern/cssVars/createCssVarsProvider.d.ts +0 -141
  108. package/modern/cssVars/createCssVarsTheme.d.ts +0 -15
  109. package/modern/cssVars/createGetCssVar.d.ts +0 -5
  110. package/modern/cssVars/cssVarsParser.d.ts +0 -64
  111. package/modern/cssVars/getColorSchemeSelector.d.ts +0 -1
  112. package/modern/cssVars/index.d.ts +0 -8
  113. package/modern/cssVars/localStorageManager.d.ts +0 -34
  114. package/modern/cssVars/prepareCssVars.d.ts +0 -16
  115. package/modern/cssVars/prepareTypographyVars.d.ts +0 -4
  116. package/modern/cssVars/useCurrentColorScheme.d.ts +0 -56
  117. package/modern/display/display.d.ts +0 -3
  118. package/modern/display/index.d.ts +0 -2
  119. package/modern/flexbox/flexbox.d.ts +0 -3
  120. package/modern/flexbox/index.d.ts +0 -2
  121. package/modern/getThemeValue/getThemeValue.d.ts +0 -1
  122. package/modern/getThemeValue/index.d.ts +0 -2
  123. package/modern/index.d.ts +0 -80
  124. package/modern/memoTheme.d.ts +0 -12
  125. package/modern/memoize/index.d.ts +0 -1
  126. package/modern/memoize/memoize.d.ts +0 -1
  127. package/modern/merge/index.d.ts +0 -1
  128. package/modern/merge/merge.d.ts +0 -1
  129. package/modern/palette/index.d.ts +0 -2
  130. package/modern/palette/palette.d.ts +0 -5
  131. package/modern/positions/index.d.ts +0 -2
  132. package/modern/positions/positions.d.ts +0 -3
  133. package/modern/preprocessStyles.d.ts +0 -5
  134. package/modern/propsToClassKey/index.d.ts +0 -1
  135. package/modern/propsToClassKey/propsToClassKey.d.ts +0 -1
  136. package/modern/responsivePropType/index.d.ts +0 -1
  137. package/modern/responsivePropType/responsivePropType.d.ts +0 -2
  138. package/modern/shadows/index.d.ts +0 -1
  139. package/modern/shadows/shadows.d.ts +0 -3
  140. package/modern/sizing/index.d.ts +0 -2
  141. package/modern/sizing/sizing.d.ts +0 -12
  142. package/modern/spacing/index.d.ts +0 -2
  143. package/modern/spacing/spacing.d.ts +0 -19
  144. package/modern/style/index.d.ts +0 -2
  145. package/modern/style/style.d.ts +0 -19
  146. package/modern/styleFunctionSx/AliasesCSSProperties.d.ts +0 -269
  147. package/modern/styleFunctionSx/OverwriteCSSProperties.d.ts +0 -54
  148. package/modern/styleFunctionSx/StandardCssProperties.d.ts +0 -2
  149. package/modern/styleFunctionSx/defaultSxConfig.d.ts +0 -15
  150. package/modern/styleFunctionSx/extendSxProp.d.ts +0 -4
  151. package/modern/styleFunctionSx/index.d.ts +0 -9
  152. package/modern/styleFunctionSx/styleFunctionSx.d.ts +0 -62
  153. package/modern/styled/index.d.ts +0 -1
  154. package/modern/styled/styled.d.ts +0 -3
  155. package/modern/typography/index.d.ts +0 -2
  156. package/modern/typography/typography.d.ts +0 -12
  157. package/modern/useMediaQuery/index.d.ts +0 -2
  158. package/modern/useMediaQuery/useMediaQuery.d.ts +0 -32
  159. package/modern/useTheme/index.d.ts +0 -2
  160. package/modern/useTheme/useTheme.d.ts +0 -2
  161. package/modern/useThemeProps/getThemeProps.d.ts +0 -11
  162. package/modern/useThemeProps/index.d.ts +0 -3
  163. package/modern/useThemeProps/useThemeProps.d.ts +0 -14
  164. package/modern/useThemeWithoutDefault/index.d.ts +0 -1
  165. package/modern/useThemeWithoutDefault/useThemeWithoutDefault.d.ts +0 -1
  166. package/modern/version/index.d.ts +0 -6
@@ -1,67 +0,0 @@
1
- import { CSSObject } from '@mui/styled-engine';
2
- export interface ApplyStyles<K extends string> {
3
- (key: K, styles: CSSObject): CSSObject;
4
- }
5
- /**
6
- * A universal utility to style components with multiple color modes. Always use it from the theme object.
7
- * It works with:
8
- * - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
9
- * - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
10
- * - Zero-runtime engine
11
- *
12
- * Tips: Use an array over object spread and place `theme.applyStyles()` last.
13
- *
14
- * With the styled function:
15
- * ✅ [{ background: '#e5e5e5' }, theme.applyStyles('dark', { background: '#1c1c1c' })]
16
- * 🚫 { background: '#e5e5e5', ...theme.applyStyles('dark', { background: '#1c1c1c' })}
17
- *
18
- * With the sx prop:
19
- * ✅ [{ background: '#e5e5e5' }, theme => theme.applyStyles('dark', { background: '#1c1c1c' })]
20
- * 🚫 { background: '#e5e5e5', ...theme => theme.applyStyles('dark', { background: '#1c1c1c' })}
21
- *
22
- * @example
23
- * 1. using with `styled`:
24
- * ```jsx
25
- * const Component = styled('div')(({ theme }) => [
26
- * { background: '#e5e5e5' },
27
- * theme.applyStyles('dark', {
28
- * background: '#1c1c1c',
29
- * color: '#fff',
30
- * }),
31
- * ]);
32
- * ```
33
- *
34
- * @example
35
- * 2. using with `sx` prop:
36
- * ```jsx
37
- * <Box sx={[
38
- * { background: '#e5e5e5' },
39
- * theme => theme.applyStyles('dark', {
40
- * background: '#1c1c1c',
41
- * color: '#fff',
42
- * }),
43
- * ]}
44
- * />
45
- * ```
46
- *
47
- * @example
48
- * 3. theming a component:
49
- * ```jsx
50
- * extendTheme({
51
- * components: {
52
- * MuiButton: {
53
- * styleOverrides: {
54
- * root: ({ theme }) => [
55
- * { background: '#e5e5e5' },
56
- * theme.applyStyles('dark', {
57
- * background: '#1c1c1c',
58
- * color: '#fff',
59
- * }),
60
- * ],
61
- * },
62
- * }
63
- * }
64
- * })
65
- *```
66
- */
67
- export default function applyStyles<K extends string>(key: K, styles: CSSObject): CSSObject;
@@ -1,10 +0,0 @@
1
- export type SpacingOptions = number | string | 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: SpacingArgument): 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, transform?: Spacing | (() => undefined) | ((abs: number | string) => number | number)): Spacing;
@@ -1,54 +0,0 @@
1
- import { CSSObject } from '@mui/styled-engine';
2
- import { Breakpoints, BreakpointsOptions } from "../createBreakpoints/createBreakpoints.js";
3
- import { Shape, ShapeOptions } from "./shape.js";
4
- import { Spacing, SpacingOptions } from "./createSpacing.js";
5
- import { SxConfig, SxProps } from "../styleFunctionSx/index.js";
6
- import { ApplyStyles } from "./applyStyles.js";
7
- import { CssContainerQueries } from "../cssContainerQueries/index.js";
8
- export { Breakpoint, Breakpoints, BreakpointOverrides } from "../createBreakpoints/createBreakpoints.js";
9
- export type Direction = 'ltr' | 'rtl';
10
- export interface Typography {}
11
- export interface Mixins {}
12
- export interface Shadows {}
13
- export interface Transitions {}
14
- export interface ZIndex {}
15
- export interface ThemeOptions {
16
- shape?: ShapeOptions;
17
- breakpoints?: BreakpointsOptions;
18
- direction?: Direction;
19
- mixins?: Mixins;
20
- palette?: Record<string, any>;
21
- shadows?: Shadows;
22
- spacing?: SpacingOptions;
23
- transitions?: Transitions;
24
- components?: Record<string, any>;
25
- typography?: Typography;
26
- zIndex?: ZIndex;
27
- unstable_sxConfig?: SxConfig;
28
- }
29
- export interface Theme extends CssContainerQueries {
30
- shape: Shape;
31
- breakpoints: Breakpoints;
32
- direction: Direction;
33
- palette: Record<string, any> & {
34
- mode: 'light' | 'dark';
35
- };
36
- shadows?: Shadows;
37
- spacing: Spacing;
38
- transitions?: Transitions;
39
- components?: Record<string, any>;
40
- mixins?: Mixins;
41
- typography?: Typography;
42
- zIndex?: ZIndex;
43
- applyStyles: ApplyStyles<'light' | 'dark'>;
44
- unstable_sxConfig: SxConfig;
45
- unstable_sx: (props: SxProps<Theme>) => CSSObject;
46
- }
47
-
48
- /**
49
- * Generate a theme base on the options received.
50
- * @param options Takes an incomplete theme object and adds the missing parts.
51
- * @param args Deep merge the arguments with the about to be returned theme.
52
- * @returns A complete, ready-to-use theme object.
53
- */
54
- export default function createTheme(options?: ThemeOptions, ...args: object[]): Theme;
@@ -1,4 +0,0 @@
1
- export { default } from "./createTheme.js";
2
- export * from "./createTheme.js";
3
- export { default as unstable_applyStyles } from "./applyStyles.js";
4
- export * from "./applyStyles.js";
@@ -1,6 +0,0 @@
1
- export interface Shape {
2
- borderRadius: number;
3
- }
4
- export type ShapeOptions = Partial<Shape>;
5
- declare const shape: Shape;
6
- export default shape;
@@ -1,23 +0,0 @@
1
- import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
2
- export interface ContainerQueries {
3
- up: Breakpoints['up'];
4
- down: Breakpoints['down'];
5
- between: Breakpoints['between'];
6
- only: Breakpoints['only'];
7
- not: Breakpoints['not'];
8
- }
9
- export interface CssContainerQueries {
10
- containerQueries: ((name: string) => ContainerQueries) & ContainerQueries;
11
- }
12
- /**
13
- * For using in `sx` prop to sort the breakpoint from low to high.
14
- * Note: this function does not work and will not support multiple units.
15
- * e.g. input: { '@container (min-width:300px)': '1rem', '@container (min-width:40rem)': '2rem' }
16
- * output: { '@container (min-width:40rem)': '2rem', '@container (min-width:300px)': '1rem' } // since 40 < 300 eventhough 40rem > 300px
17
- */
18
- export declare function sortContainerQueries(theme: Partial<CssContainerQueries>, css: Record<string, any>): Record<string, any>;
19
- export declare function isCqShorthand(breakpointKeys: string[], value: string): boolean;
20
- export declare function getContainerQuery(theme: CssContainerQueries, shorthand: string): string | null;
21
- export default function cssContainerQueries<T extends {
22
- breakpoints: Breakpoints;
23
- }>(themeInput: T): T & CssContainerQueries;
@@ -1,3 +0,0 @@
1
- export { default } from "./cssContainerQueries.js";
2
- export { isCqShorthand, getContainerQuery, sortContainerQueries } from "./cssContainerQueries.js";
3
- export type { CssContainerQueries } from "./cssContainerQueries.js";
@@ -1,15 +0,0 @@
1
- import { PropsFor, grid, SimpleStyleFunction } from "../Box/index.js";
2
- export const gap: SimpleStyleFunction<'gap'>;
3
- export const columnGap: SimpleStyleFunction<'columnGap'>;
4
- export const rowGap: SimpleStyleFunction<'rowGap'>;
5
- export const gridColumn: SimpleStyleFunction<'gridColumn'>;
6
- export const gridRow: SimpleStyleFunction<'gridRow'>;
7
- export const gridAutoFlow: SimpleStyleFunction<'gridAutoFlow'>;
8
- export const gridAutoColumns: SimpleStyleFunction<'gridAutoColumns'>;
9
- export const gridAutoRows: SimpleStyleFunction<'gridAutoRows'>;
10
- export const gridTemplateColumns: SimpleStyleFunction<'gridTemplateColumns'>;
11
- export const gridTemplateRows: SimpleStyleFunction<'gridTemplateRows'>;
12
- export const gridTemplateAreas: SimpleStyleFunction<'gridTemplateAreas'>;
13
- export const gridArea: SimpleStyleFunction<'gridArea'>;
14
- export type CssGridProps = PropsFor<typeof grid>;
15
- export default grid;
@@ -1,2 +0,0 @@
1
- export { default } from "./cssGrid.js";
2
- export * from "./cssGrid.js";
@@ -1,141 +0,0 @@
1
- import * as React from 'react';
2
- import InitColorSchemeScript from "../InitColorSchemeScript/index.js";
3
- import { Result } from "./useCurrentColorScheme.js";
4
- import type { StorageManager } from "./localStorageManager.js";
5
- export interface ColorSchemeContextValue<SupportedColorScheme extends string> extends Result<SupportedColorScheme> {
6
- allColorSchemes: SupportedColorScheme[];
7
- }
8
- export interface CssVarsProviderConfig<ColorScheme extends string> {
9
- /**
10
- * DOM attribute for applying color scheme
11
- * @default 'data-color-scheme'
12
- */
13
- attribute?: string;
14
- /**
15
- * localStorage key used to store application `mode`
16
- * @default 'mode'
17
- */
18
- modeStorageKey?: string;
19
- /**
20
- * localStorage key used to store `colorScheme`
21
- * @default 'color-scheme'
22
- */
23
- colorSchemeStorageKey?: string;
24
- /**
25
- * Design system default color scheme.
26
- * - provides string if the design system has one default color scheme (either light or dark)
27
- * - provides object if the design system has default light & dark color schemes
28
- */
29
- defaultColorScheme: ColorScheme | {
30
- light: ColorScheme;
31
- dark: ColorScheme;
32
- };
33
- /**
34
- * Disable CSS transitions when switching between modes or color schemes
35
- * @default false
36
- */
37
- disableTransitionOnChange?: boolean;
38
- /**
39
- * If `true`, theme values are recalculated when the mode changes.
40
- * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
41
- * @default false
42
- */
43
- forceThemeRerender?: boolean;
44
- }
45
- type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
46
- export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {
47
- CssVarsProvider: (props: React.PropsWithChildren<Partial<CssVarsProviderConfig<ColorScheme>> & {
48
- theme?: Identify<Identifier, {
49
- cssVariables?: false;
50
- cssVarPrefix?: string;
51
- colorSchemes: Partial<Record<ColorScheme, any>>;
52
- colorSchemeSelector?: 'media' | 'class' | 'data' | string;
53
- }>;
54
- /**
55
- * The default mode when the storage is empty,
56
- * require the theme to have `colorSchemes` with light and dark.
57
- * @default 'system'
58
- */
59
- defaultMode?: 'light' | 'dark' | 'system';
60
- /**
61
- * The document used to perform `disableTransitionOnChange` feature
62
- * @default document
63
- */
64
- documentNode?: Document | null;
65
- /**
66
- * The node used to attach the color-scheme attribute
67
- * @default document
68
- */
69
- colorSchemeNode?: Element | null;
70
- /**
71
- * The storage manager to be used for storing the mode and color scheme.
72
- * @default using `window.localStorage`
73
- */
74
- storageManager?: StorageManager | null;
75
- /**
76
- * The window that attaches the 'storage' event listener
77
- * @default window
78
- */
79
- storageWindow?: Window | null;
80
- /**
81
- * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
82
- */
83
- disableNestedContext?: boolean;
84
- /**
85
- * If `true`, the style sheet won't be generated.
86
- *
87
- * This is useful for controlling nested CssVarsProvider behavior.
88
- * @default false
89
- */
90
- disableStyleSheetGeneration?: boolean;
91
- }>) => React.JSX.Element;
92
- useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
93
- getInitColorSchemeScript: typeof InitColorSchemeScript;
94
- }
95
- export default function createCssVarsProvider<ColorScheme extends string, Identifier extends string | undefined = undefined>(options: CssVarsProviderConfig<ColorScheme> & {
96
- /**
97
- * The design system's unique id for getting the corresponded theme when there are multiple design systems.
98
- */
99
- themeId?: Identifier;
100
- /**
101
- * Design system default theme
102
- *
103
- * - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
104
- * those object of the color scheme will be used when the color scheme is active.
105
- *
106
- * {
107
- * colorSchemes: {
108
- * light: { ...lightColorSchemeValues },
109
- * dark: { ...darkColorSchemeValues }
110
- * }
111
- * }
112
- *
113
- * - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
114
- * likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
115
- *
116
- * - If the theme contains the same keys as the color scheme, their values will be merged.
117
- * Ex. {
118
- * colorSchemes: {
119
- * light: { palette: { primary: { ... } } },
120
- * dark: { palette: { primary: { ...} } }
121
- * },
122
- * palette: { shared: { ... } }
123
- * }
124
- *
125
- * becomes: {
126
- * colorSchemes: { ... },
127
- * palette: { shared: { ... }, primary: { ... } }
128
- * }
129
- */
130
- theme: any;
131
- /**
132
- * A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
133
- *
134
- * 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
135
- * variants from those tokens.
136
- */
137
- resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
138
- }): CreateCssVarsProviderResult<ColorScheme, Identifier>;
139
-
140
- // disable automatic export
141
- export {};
@@ -1,15 +0,0 @@
1
- import { DefaultCssVarsTheme } from "./prepareCssVars.js";
2
- interface Theme extends DefaultCssVarsTheme {
3
- cssVarPrefix?: string;
4
- colorSchemeSelector?: 'media' | string;
5
- shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
6
- }
7
- declare function createCssVarsTheme<T extends Theme, ThemeVars extends Record<string, any>>({
8
- colorSchemeSelector,
9
- ...theme
10
- }: T): T & {
11
- vars: ThemeVars;
12
- generateThemeVars: () => ThemeVars;
13
- generateStyleSheets: () => Record<string, any>[];
14
- };
15
- export default createCssVarsTheme;
@@ -1,5 +0,0 @@
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 +0,0 @@
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 Record<string, any> | null | undefined | string = NestedRecord, 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) => 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 +0,0 @@
1
- export declare function createGetColorSchemeSelector<T extends string>(selector: 'media' | 'class' | 'data' | string): (colorScheme: T) => string;
@@ -1,8 +0,0 @@
1
- export { default } from "./createCssVarsProvider.js";
2
- export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue } from "./createCssVarsProvider.js";
3
- export { default as prepareCssVars } from "./prepareCssVars.js";
4
- export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
5
- export type { ExtractTypographyTokens } from "./prepareTypographyVars.js";
6
- export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
7
- export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
8
- export type { StorageManager } from "./localStorageManager.js";
@@ -1,34 +0,0 @@
1
- export interface StorageManager {
2
- (options: {
3
- key: string;
4
- storageWindow?: Window | null;
5
- }): {
6
- /**
7
- * Function to get the value from the storage
8
- * @param defaultValue The default value to be returned if the key is not found
9
- * @returns The value from the storage or the default value
10
- */
11
- get(defaultValue: any): any;
12
- /**
13
- * Function to set the value in the storage
14
- * @param value The value to be set
15
- * @returns void
16
- */
17
- set(value: any): void;
18
- /**
19
- * Function to subscribe to the value of the specified key triggered by external events
20
- * @param handler The function to be called when the value changes
21
- * @returns A function to unsubscribe the handler
22
- * @example
23
- * React.useEffect(() => {
24
- * const unsubscribe = storageManager.subscribe((value) => {
25
- * console.log(value);
26
- * });
27
- * return unsubscribe;
28
- * }, []);
29
- */
30
- subscribe(handler: (value: any) => void): () => void;
31
- };
32
- }
33
- declare const localStorageManager: StorageManager;
34
- export default localStorageManager;
@@ -1,16 +0,0 @@
1
- export interface DefaultCssVarsTheme {
2
- colorSchemes?: Record<string, any>;
3
- defaultColorScheme?: string;
4
- }
5
- declare function prepareCssVars<T extends DefaultCssVarsTheme, ThemeVars extends Record<string, any>>(theme: T, parserConfig?: {
6
- prefix?: string;
7
- colorSchemeSelector?: 'media' | 'class' | 'data' | string;
8
- disableCssColorScheme?: boolean;
9
- shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
10
- getSelector?: (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | Record<string, any>;
11
- }): {
12
- vars: ThemeVars;
13
- generateThemeVars: () => ThemeVars;
14
- generateStyleSheets: () => Record<string, any>[];
15
- };
16
- export default prepareCssVars;
@@ -1,4 +0,0 @@
1
- type RecordPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? never : T[K] extends Record<string, any> ? K : never }[keyof T];
2
- export type ExtractTypographyTokens<T> = { [K in RecordPropertyNames<T>]: string };
3
- export default function prepareTypographyVars<T extends Record<string, any>>(typography: T): ExtractTypographyTokens<T>;
4
- export {};
@@ -1,56 +0,0 @@
1
- import type { StorageManager } from "./localStorageManager.js";
2
- export type Mode = 'light' | 'dark' | 'system';
3
- export type SystemMode = Exclude<Mode, 'system'>;
4
- export interface State<SupportedColorScheme extends string> {
5
- /**
6
- * User selected mode.
7
- * Note: on the server, mode is always undefined
8
- */
9
- mode: 'light' | 'dark' | 'system' | undefined;
10
- /**
11
- * Only valid if `mode: 'system'`, either 'light' | 'dark'.
12
- */
13
- systemMode: 'light' | 'dark' | undefined;
14
- /**
15
- * The color scheme for the light mode.
16
- */
17
- lightColorScheme: SupportedColorScheme;
18
- /**
19
- * The color scheme for the dark mode.
20
- */
21
- darkColorScheme: SupportedColorScheme;
22
- }
23
- export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
24
- /**
25
- * The current application color scheme. It is always `undefined` on the server.
26
- */
27
- colorScheme: SupportedColorScheme | undefined;
28
- /**
29
- * `mode` is saved to internal state and localStorage
30
- * If `mode` is null, it will be reset to the defaultMode
31
- */
32
- setMode: (mode: Mode | null) => void;
33
- /**
34
- * `colorScheme` is saved to internal state and localStorage
35
- * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
36
- */
37
- setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
38
- light: SupportedColorScheme | null;
39
- dark: SupportedColorScheme | null;
40
- }> | null) => void;
41
- };
42
- export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
43
- export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
44
- interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
45
- defaultLightColorScheme: SupportedColorScheme;
46
- defaultDarkColorScheme: SupportedColorScheme;
47
- supportedColorSchemes: Array<SupportedColorScheme>;
48
- defaultMode?: Mode;
49
- modeStorageKey?: string;
50
- colorSchemeStorageKey?: string;
51
- storageWindow?: Window | null;
52
- storageManager?: StorageManager | null;
53
- noSsr?: boolean;
54
- }
55
- export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
56
- export {};
@@ -1,3 +0,0 @@
1
- import { PropsFor, display } from "../Box/index.js";
2
- export type DisplayProps = PropsFor<typeof display>;
3
- export default display;
@@ -1,2 +0,0 @@
1
- export { default } from "./display.js";
2
- export * from "./display.js";
@@ -1,3 +0,0 @@
1
- import { PropsFor, flexbox } from "../Box/index.js";
2
- export type FlexboxProps = PropsFor<typeof flexbox>;
3
- export default flexbox;
@@ -1,2 +0,0 @@
1
- export { default } from "./flexbox.js";
2
- export * from "./flexbox.js";
@@ -1 +0,0 @@
1
- export default function getThemeValue(prop: string, value: any, theme: object): any;
@@ -1,2 +0,0 @@
1
- export { default } from "./getThemeValue.js";
2
- export * from "./getThemeValue.js";