@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.
- package/Box/Box.d.ts +12 -31
- package/CHANGELOG.md +169 -0
- package/Grid/createGrid.js +1 -2
- package/InitColorSchemeScript/InitColorSchemeScript.js +1 -1
- package/Stack/createStack.js +1 -2
- package/borders/borders.d.ts +2 -1
- package/breakpoints/breakpoints.d.ts +1 -1
- package/compose/compose.d.ts +14 -1
- package/compose/index.d.ts +1 -1
- package/createStyled/createStyled.js +9 -4
- package/createTheme/shape.d.ts +1 -1
- package/cssGrid/cssGrid.d.ts +2 -1
- package/display/display.d.ts +2 -1
- package/esm/Box/Box.d.ts +12 -31
- package/esm/Grid/createGrid.js +1 -2
- package/esm/InitColorSchemeScript/InitColorSchemeScript.js +1 -1
- package/esm/Stack/createStack.js +1 -2
- package/esm/borders/borders.d.ts +2 -1
- package/esm/breakpoints/breakpoints.d.ts +1 -1
- package/esm/compose/compose.d.ts +14 -1
- package/esm/compose/index.d.ts +1 -1
- package/esm/createStyled/createStyled.js +9 -4
- package/esm/createTheme/shape.d.ts +1 -1
- package/esm/cssGrid/cssGrid.d.ts +2 -1
- package/esm/display/display.d.ts +2 -1
- package/esm/flexbox/flexbox.d.ts +15 -1
- package/esm/index.d.ts +10 -0
- package/esm/index.js +1 -1
- package/esm/palette/palette.d.ts +2 -1
- package/esm/positions/positions.d.ts +2 -1
- package/esm/shadows/shadows.d.ts +2 -1
- package/esm/sizing/sizing.d.ts +2 -1
- package/esm/spacing/spacing.d.ts +2 -1
- package/esm/style/style.d.ts +5 -1
- package/esm/styleFunctionSx/defaultSxConfig.d.ts +1 -2
- package/esm/typography/typography.d.ts +2 -1
- package/esm/useMediaQuery/useMediaQuery.js +3 -0
- package/esm/version/index.js +3 -3
- package/flexbox/flexbox.d.ts +15 -1
- package/index.d.ts +10 -0
- package/index.js +1 -1
- package/package.json +7 -7
- package/palette/palette.d.ts +2 -1
- package/positions/positions.d.ts +2 -1
- package/shadows/shadows.d.ts +2 -1
- package/sizing/sizing.d.ts +2 -1
- package/spacing/spacing.d.ts +2 -1
- package/style/style.d.ts +5 -1
- package/styleFunctionSx/defaultSxConfig.d.ts +1 -2
- package/typography/typography.d.ts +2 -1
- package/useMediaQuery/useMediaQuery.js +3 -0
- package/version/index.js +3 -3
- package/modern/Box/Box.d.ts +0 -72
- package/modern/Box/boxClasses.d.ts +0 -7
- package/modern/Box/index.d.ts +0 -4
- package/modern/CSSProperties.d.ts +0 -7
- package/modern/Container/Container.d.ts +0 -13
- package/modern/Container/ContainerProps.d.ts +0 -40
- package/modern/Container/containerClasses.d.ts +0 -22
- package/modern/Container/createContainer.d.ts +0 -18
- package/modern/Container/index.d.ts +0 -4
- package/modern/DefaultPropsProvider/DefaultPropsProvider.d.ts +0 -18
- package/modern/DefaultPropsProvider/index.d.ts +0 -1
- package/modern/GlobalStyles/GlobalStyles.d.ts +0 -17
- package/modern/GlobalStyles/index.d.ts +0 -2
- package/modern/Grid/Grid.d.ts +0 -13
- package/modern/Grid/GridProps.d.ts +0 -103
- package/modern/Grid/createGrid.d.ts +0 -13
- package/modern/Grid/deleteLegacyGridProps.d.ts +0 -11
- package/modern/Grid/gridClasses.d.ts +0 -20
- package/modern/Grid/gridGenerator.d.ts +0 -42
- package/modern/Grid/index.d.ts +0 -7
- package/modern/Grid/traverseBreakpoints.d.ts +0 -7
- package/modern/InitColorSchemeScript/InitColorSchemeScript.d.ts +0 -51
- package/modern/InitColorSchemeScript/index.d.ts +0 -2
- package/modern/RtlProvider/index.d.ts +0 -8
- package/modern/Stack/Stack.d.ts +0 -14
- package/modern/Stack/StackProps.d.ts +0 -53
- package/modern/Stack/createStack.d.ts +0 -24
- package/modern/Stack/index.d.ts +0 -5
- package/modern/Stack/stackClasses.d.ts +0 -8
- package/modern/ThemeProvider/ThemeProvider.d.ts +0 -24
- package/modern/ThemeProvider/index.d.ts +0 -2
- package/modern/borders/borders.d.ts +0 -14
- package/modern/borders/index.d.ts +0 -2
- package/modern/breakpoints/breakpoints.d.ts +0 -19
- package/modern/breakpoints/index.d.ts +0 -2
- package/modern/colorManipulator/colorManipulator.d.ts +0 -25
- package/modern/colorManipulator/index.d.ts +0 -1
- package/modern/compose/compose.d.ts +0 -2
- package/modern/compose/index.d.ts +0 -1
- package/modern/createBox/createBox.d.ts +0 -9
- package/modern/createBox/index.d.ts +0 -1
- package/modern/createBreakpoints/createBreakpoints.d.ts +0 -78
- package/modern/createBreakpoints/index.d.ts +0 -3
- package/modern/createStyled/createStyled.d.ts +0 -27
- package/modern/createStyled/index.d.ts +0 -2
- package/modern/createTheme/applyStyles.d.ts +0 -67
- package/modern/createTheme/createSpacing.d.ts +0 -10
- package/modern/createTheme/createTheme.d.ts +0 -54
- package/modern/createTheme/index.d.ts +0 -4
- package/modern/createTheme/shape.d.ts +0 -6
- package/modern/cssContainerQueries/cssContainerQueries.d.ts +0 -23
- package/modern/cssContainerQueries/index.d.ts +0 -3
- package/modern/cssGrid/cssGrid.d.ts +0 -15
- package/modern/cssGrid/index.d.ts +0 -2
- package/modern/cssVars/createCssVarsProvider.d.ts +0 -141
- package/modern/cssVars/createCssVarsTheme.d.ts +0 -15
- package/modern/cssVars/createGetCssVar.d.ts +0 -5
- package/modern/cssVars/cssVarsParser.d.ts +0 -64
- package/modern/cssVars/getColorSchemeSelector.d.ts +0 -1
- package/modern/cssVars/index.d.ts +0 -8
- package/modern/cssVars/localStorageManager.d.ts +0 -34
- package/modern/cssVars/prepareCssVars.d.ts +0 -16
- package/modern/cssVars/prepareTypographyVars.d.ts +0 -4
- package/modern/cssVars/useCurrentColorScheme.d.ts +0 -56
- package/modern/display/display.d.ts +0 -3
- package/modern/display/index.d.ts +0 -2
- package/modern/flexbox/flexbox.d.ts +0 -3
- package/modern/flexbox/index.d.ts +0 -2
- package/modern/getThemeValue/getThemeValue.d.ts +0 -1
- package/modern/getThemeValue/index.d.ts +0 -2
- package/modern/index.d.ts +0 -80
- package/modern/memoTheme.d.ts +0 -12
- package/modern/memoize/index.d.ts +0 -1
- package/modern/memoize/memoize.d.ts +0 -1
- package/modern/merge/index.d.ts +0 -1
- package/modern/merge/merge.d.ts +0 -1
- package/modern/palette/index.d.ts +0 -2
- package/modern/palette/palette.d.ts +0 -5
- package/modern/positions/index.d.ts +0 -2
- package/modern/positions/positions.d.ts +0 -3
- package/modern/preprocessStyles.d.ts +0 -5
- package/modern/propsToClassKey/index.d.ts +0 -1
- package/modern/propsToClassKey/propsToClassKey.d.ts +0 -1
- package/modern/responsivePropType/index.d.ts +0 -1
- package/modern/responsivePropType/responsivePropType.d.ts +0 -2
- package/modern/shadows/index.d.ts +0 -1
- package/modern/shadows/shadows.d.ts +0 -3
- package/modern/sizing/index.d.ts +0 -2
- package/modern/sizing/sizing.d.ts +0 -12
- package/modern/spacing/index.d.ts +0 -2
- package/modern/spacing/spacing.d.ts +0 -19
- package/modern/style/index.d.ts +0 -2
- package/modern/style/style.d.ts +0 -19
- package/modern/styleFunctionSx/AliasesCSSProperties.d.ts +0 -269
- package/modern/styleFunctionSx/OverwriteCSSProperties.d.ts +0 -54
- package/modern/styleFunctionSx/StandardCssProperties.d.ts +0 -2
- package/modern/styleFunctionSx/defaultSxConfig.d.ts +0 -15
- package/modern/styleFunctionSx/extendSxProp.d.ts +0 -4
- package/modern/styleFunctionSx/index.d.ts +0 -9
- package/modern/styleFunctionSx/styleFunctionSx.d.ts +0 -62
- package/modern/styled/index.d.ts +0 -1
- package/modern/styled/styled.d.ts +0 -3
- package/modern/typography/index.d.ts +0 -2
- package/modern/typography/typography.d.ts +0 -12
- package/modern/useMediaQuery/index.d.ts +0 -2
- package/modern/useMediaQuery/useMediaQuery.d.ts +0 -32
- package/modern/useTheme/index.d.ts +0 -2
- package/modern/useTheme/useTheme.d.ts +0 -2
- package/modern/useThemeProps/getThemeProps.d.ts +0 -11
- package/modern/useThemeProps/index.d.ts +0 -3
- package/modern/useThemeProps/useThemeProps.d.ts +0 -14
- package/modern/useThemeWithoutDefault/index.d.ts +0 -1
- package/modern/useThemeWithoutDefault/useThemeWithoutDefault.d.ts +0 -1
- 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,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,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,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 +0,0 @@
|
|
|
1
|
-
export default function getThemeValue(prop: string, value: any, theme: object): any;
|