bc518174
 王天杨
提交两个项目文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
import * as React from 'react';
import InitColorSchemeScript from "../InitColorSchemeScript/index.js";
import { Result } from "./useCurrentColorScheme.js";
import type { StorageManager } from "./localStorageManager.js";
export interface ColorSchemeContextValue<SupportedColorScheme extends string> extends Result<SupportedColorScheme> {
allColorSchemes: SupportedColorScheme[];
}
export interface CssVarsProviderConfig<ColorScheme extends string> {
/**
* DOM attribute for applying color scheme
* @default 'data-color-scheme'
*/
attribute?: string | undefined;
/**
* localStorage key used to store application `mode`
* @default 'mode'
*/
modeStorageKey?: string | undefined;
/**
* localStorage key used to store `colorScheme`
* @default 'color-scheme'
*/
colorSchemeStorageKey?: string | undefined;
/**
* Design system default color scheme.
* - provides string if the design system has one default color scheme (either light or dark)
* - provides object if the design system has default light & dark color schemes
*/
defaultColorScheme: ColorScheme | {
light: ColorScheme;
dark: ColorScheme;
};
/**
* Disable CSS transitions when switching between modes or color schemes
* @default false
*/
disableTransitionOnChange?: boolean | undefined;
/**
* If `true`, theme values are recalculated when the mode changes.
* The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
* @default false
*/
forceThemeRerender?: boolean | undefined;
}
type Identify<I extends string | undefined, T> = I extends string ? T | { [k in I]: T } : T;
export interface CreateCssVarsProviderResult<ColorScheme extends string, Identifier extends string | undefined = undefined> {
CssVarsProvider: (props: React.PropsWithChildren<Partial<CssVarsProviderConfig<ColorScheme>> & {
theme?: Identify<Identifier, {
cssVariables?: false | undefined;
cssVarPrefix?: string | undefined;
colorSchemes: Partial<Record<ColorScheme, any>>;
colorSchemeSelector?: 'media' | 'class' | 'data' | string | undefined;
}> | undefined;
/**
* The default mode when the storage is empty,
* require the theme to have `colorSchemes` with light and dark.
* @default 'system'
*/
defaultMode?: 'light' | 'dark' | 'system' | undefined;
/**
* The document used to perform `disableTransitionOnChange` feature
* @default document
*/
documentNode?: Document | null | undefined;
/**
* The node used to attach the color-scheme attribute
* @default document
*/
colorSchemeNode?: Element | null | undefined;
/**
* The storage manager to be used for storing the mode and color scheme.
* @default using `window.localStorage`
*/
storageManager?: StorageManager | null | undefined;
/**
* The window that attaches the 'storage' event listener
* @default window
*/
storageWindow?: Window | null | undefined;
/**
* If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
*/
disableNestedContext?: boolean | undefined;
/**
* If `true`, the style sheet won't be generated.
*
* This is useful for controlling nested CssVarsProvider behavior.
* @default false
*/
disableStyleSheetGeneration?: boolean | undefined;
}>) => React.JSX.Element;
useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
getInitColorSchemeScript: typeof InitColorSchemeScript;
}
export default function createCssVarsProvider<ColorScheme extends string, Identifier extends string | undefined = undefined>(options: CssVarsProviderConfig<ColorScheme> & {
/**
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
*/
themeId?: Identifier | undefined;
/**
* Design system default theme
*
* - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
* those object of the color scheme will be used when the color scheme is active.
*
* {
* colorSchemes: {
* light: { ...lightColorSchemeValues },
* dark: { ...darkColorSchemeValues }
* }
* }
*
* - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
* likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
*
* - If the theme contains the same keys as the color scheme, their values will be merged.
* Ex. {
* colorSchemes: {
* light: { palette: { primary: { ... } } },
* dark: { palette: { primary: { ...} } }
* },
* palette: { shared: { ... } }
* }
*
* becomes: {
* colorSchemes: { ... },
* palette: { shared: { ... }, primary: { ... } }
* }
*/
theme: any;
/**
* A function to be called after the CSS variables are attached. The result of this function will be the final theme pass to ThemeProvider.
*
* 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
* variants from those tokens.
*/
resolveTheme?: ((theme: any) => any) | undefined; // the type is any because it depends on the design system.
}): CreateCssVarsProviderResult<ColorScheme, Identifier>;
// disable automatic export
export {};
|
