@sanity/ui 3.1.10 → 3.1.12-canary.0
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/dist/_chunks-cjs/_visual-editing.js +6 -6
- package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
- package/dist/_chunks-dts/useTheme.d.mts +1431 -0
- package/dist/_chunks-dts/useTheme.d.mts.map +1 -0
- package/dist/_chunks-dts/useTheme.d.ts +1431 -0
- package/dist/_chunks-dts/useTheme.d.ts.map +1 -0
- package/dist/_chunks-es/_visual-editing.mjs +1 -1
- package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
- package/dist/_visual-editing.d.mts +2 -1007
- package/dist/_visual-editing.d.ts +2 -1007
- package/dist/index.d.mts +464 -2655
- package/dist/index.d.mts.map +1 -0
- package/dist/index.d.ts +464 -2655
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/theme.d.mts +925 -1222
- package/dist/theme.d.mts.map +1 -0
- package/dist/theme.d.ts +925 -1222
- package/dist/theme.d.ts.map +1 -0
- package/package.json +41 -55
- package/src/core/components/toast/toast.tsx +1 -1
- package/src/core/components/toast/toastProvider.tsx +1 -1
- package/src/core/constants.ts +1 -1
- package/src/core/primitives/popover/popover.tsx +1 -1
- package/src/core/primitives/popover/popoverCard.tsx +1 -1
- package/src/core/primitives/tooltip/tooltip.tsx +1 -1
- package/src/core/primitives/tooltip/tooltipCard.tsx +1 -1
package/dist/theme.d.ts
CHANGED
|
@@ -1,1500 +1,1203 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
3
|
-
import {ColorTintKey} from
|
|
4
|
-
import type {StyledObject} from 'styled-components'
|
|
5
|
-
|
|
1
|
+
import { StyledObject } from "styled-components";
|
|
2
|
+
import * as _sanity_color0 from "@sanity/color";
|
|
3
|
+
import { ColorHueKey, ColorTint, ColorTintKey } from "@sanity/color";
|
|
6
4
|
/**
|
|
7
5
|
* @public
|
|
8
6
|
*/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
color: ThemeColorSchemes
|
|
25
|
-
/**
|
|
26
|
-
* @deprecated Use `v2.container` instead
|
|
27
|
-
*/
|
|
28
|
-
container: number[]
|
|
29
|
-
/**
|
|
30
|
-
* @deprecated Use component-specific `v2.{button | card | input}.focusRing` values instead
|
|
31
|
-
*/
|
|
32
|
-
focusRing: {
|
|
33
|
-
offset: number
|
|
34
|
-
width: number
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* @deprecated Use `v2.font` instead
|
|
38
|
-
*/
|
|
39
|
-
fonts: ThemeFonts
|
|
40
|
-
/**
|
|
41
|
-
* @deprecated Use `v2.input` instead
|
|
42
|
-
*/
|
|
43
|
-
input: ThemeInput
|
|
44
|
-
/**
|
|
45
|
-
* THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
|
|
46
|
-
* @beta
|
|
47
|
-
* @deprecated Use `v2.layer` instead
|
|
48
|
-
*/
|
|
49
|
-
layer?: ThemeLayer
|
|
50
|
-
/**
|
|
51
|
-
* @deprecated Use `v2.media` instead
|
|
52
|
-
*/
|
|
53
|
-
media: number[]
|
|
54
|
-
/**
|
|
55
|
-
* @deprecated Use `v2.radius` instead
|
|
56
|
-
*/
|
|
57
|
-
radius: number[]
|
|
58
|
-
/**
|
|
59
|
-
* @deprecated Use `v2.shadow` instead
|
|
60
|
-
*/
|
|
61
|
-
shadows: Array<ThemeShadow | null>
|
|
62
|
-
/**
|
|
63
|
-
* @deprecated Use `v2.space` instead
|
|
64
|
-
*/
|
|
65
|
-
space: number[]
|
|
66
|
-
/**
|
|
67
|
-
* @internal
|
|
68
|
-
* @deprecated Use `v2.style` instead
|
|
69
|
-
*/
|
|
70
|
-
styles?: ThemeStyles
|
|
71
|
-
v2?: RootTheme_v2
|
|
7
|
+
interface ThemeFocusRing {
|
|
8
|
+
offset: number;
|
|
9
|
+
width: number;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* @public
|
|
13
|
+
*/
|
|
14
|
+
interface ThemeAvatar_v2 {
|
|
15
|
+
sizes: {
|
|
16
|
+
/** Spacing between avatars in an <AvatarStack> component (px) */
|
|
17
|
+
distance: number;
|
|
18
|
+
/** Diameter of the avatar (px) */
|
|
19
|
+
size: number;
|
|
20
|
+
}[];
|
|
21
|
+
focusRing: ThemeFocusRing;
|
|
72
22
|
}
|
|
73
|
-
|
|
74
|
-
/** @internal */
|
|
75
|
-
export declare function buildTheme(config?: ThemeConfig): RootTheme
|
|
76
|
-
|
|
77
|
-
/** @public */
|
|
78
|
-
export declare const COLOR_CONFIG_AVATAR_COLORS: readonly ['*', ...ColorHueKey[]]
|
|
79
|
-
|
|
80
|
-
/** @public */
|
|
81
|
-
export declare const COLOR_CONFIG_BLEND_KEYS: readonly ['_blend']
|
|
82
|
-
|
|
83
|
-
/** @public */
|
|
84
|
-
export declare const COLOR_CONFIG_CARD_KEYS: readonly [
|
|
85
|
-
'_hue',
|
|
86
|
-
'bg',
|
|
87
|
-
'fg',
|
|
88
|
-
'border',
|
|
89
|
-
'focusRing',
|
|
90
|
-
'muted/fg',
|
|
91
|
-
'accent/fg',
|
|
92
|
-
'link/fg',
|
|
93
|
-
'code/bg',
|
|
94
|
-
'code/fg',
|
|
95
|
-
'skeleton/from',
|
|
96
|
-
'skeleton/to',
|
|
97
|
-
'status/dot',
|
|
98
|
-
'status/icon',
|
|
99
|
-
'_hue',
|
|
100
|
-
'bg',
|
|
101
|
-
'fg',
|
|
102
|
-
'border',
|
|
103
|
-
'focusRing',
|
|
104
|
-
'shadow/outline',
|
|
105
|
-
'shadow/umbra',
|
|
106
|
-
'shadow/penumbra',
|
|
107
|
-
'shadow/ambient',
|
|
108
|
-
]
|
|
109
|
-
|
|
110
|
-
/** @public */
|
|
111
|
-
export declare const COLOR_CONFIG_CARD_TONES: readonly [
|
|
112
|
-
'*',
|
|
113
|
-
'transparent',
|
|
114
|
-
'default',
|
|
115
|
-
'neutral',
|
|
116
|
-
'primary',
|
|
117
|
-
'suggest',
|
|
118
|
-
'positive',
|
|
119
|
-
'caution',
|
|
120
|
-
'critical',
|
|
121
|
-
]
|
|
122
|
-
|
|
123
|
-
/** @public */
|
|
124
|
-
export declare const COLOR_CONFIG_INPUT_MODES: readonly ['*', 'default', 'invalid']
|
|
125
|
-
|
|
126
23
|
/** @public */
|
|
127
|
-
|
|
128
|
-
'*',
|
|
129
|
-
'enabled',
|
|
130
|
-
'hovered',
|
|
131
|
-
'readOnly',
|
|
132
|
-
'disabled',
|
|
133
|
-
]
|
|
134
|
-
|
|
24
|
+
declare const THEME_COLOR_SCHEMES: readonly ["light", "dark"];
|
|
135
25
|
/** @public */
|
|
136
|
-
|
|
137
|
-
'_hue',
|
|
138
|
-
'bg',
|
|
139
|
-
'fg',
|
|
140
|
-
'border',
|
|
141
|
-
'focusRing',
|
|
142
|
-
'muted/fg',
|
|
143
|
-
'accent/fg',
|
|
144
|
-
'link/fg',
|
|
145
|
-
'code/bg',
|
|
146
|
-
'code/fg',
|
|
147
|
-
'skeleton/from',
|
|
148
|
-
'skeleton/to',
|
|
149
|
-
'status/dot',
|
|
150
|
-
'status/icon',
|
|
151
|
-
]
|
|
152
|
-
|
|
26
|
+
declare const THEME_COLOR_BLEND_MODES: readonly ["multiply", "screen"];
|
|
153
27
|
/** @public */
|
|
154
|
-
|
|
155
|
-
'*',
|
|
156
|
-
'default',
|
|
157
|
-
'neutral',
|
|
158
|
-
'primary',
|
|
159
|
-
'suggest',
|
|
160
|
-
'positive',
|
|
161
|
-
'caution',
|
|
162
|
-
'critical',
|
|
163
|
-
]
|
|
164
|
-
|
|
28
|
+
declare const THEME_COLOR_CARD_TONES: readonly ["transparent", "default", "neutral", "primary", "suggest", "positive", "caution", "critical"];
|
|
165
29
|
/** @public */
|
|
166
|
-
|
|
167
|
-
'*',
|
|
168
|
-
'enabled',
|
|
169
|
-
'hovered',
|
|
170
|
-
'pressed',
|
|
171
|
-
'selected',
|
|
172
|
-
'disabled',
|
|
173
|
-
]
|
|
174
|
-
|
|
30
|
+
declare const THEME_COLOR_STATE_TONES: readonly ["default", "neutral", "primary", "suggest", "positive", "caution", "critical"];
|
|
175
31
|
/** @public */
|
|
176
|
-
|
|
177
|
-
|
|
32
|
+
declare const THEME_COLOR_STATES: readonly ["enabled", "hovered", "pressed", "selected", "disabled"];
|
|
178
33
|
/** @public */
|
|
179
|
-
|
|
180
|
-
|
|
34
|
+
declare const THEME_COLOR_BUTTON_MODES: readonly ["default", "ghost", "bleed"];
|
|
181
35
|
/** @public */
|
|
182
|
-
|
|
183
|
-
|
|
36
|
+
declare const THEME_COLOR_INPUT_MODES: readonly ["default", "invalid"];
|
|
184
37
|
/** @public */
|
|
185
|
-
|
|
186
|
-
|
|
38
|
+
declare const THEME_COLOR_INPUT_STATES: readonly ["enabled", "hovered", "readOnly", "disabled"];
|
|
187
39
|
/** @public */
|
|
188
|
-
|
|
189
|
-
|
|
40
|
+
declare const THEME_COLOR_AVATAR_COLORS: _sanity_color0.ColorHueKey[];
|
|
41
|
+
/**
|
|
42
|
+
* @public
|
|
43
|
+
*/
|
|
44
|
+
type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number];
|
|
190
45
|
/** @public */
|
|
191
|
-
|
|
192
|
-
|
|
46
|
+
type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number];
|
|
193
47
|
/** @public */
|
|
194
|
-
|
|
195
|
-
|
|
48
|
+
type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number];
|
|
196
49
|
/** @public */
|
|
197
|
-
|
|
198
|
-
|
|
50
|
+
type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number];
|
|
199
51
|
/** @public */
|
|
200
|
-
|
|
201
|
-
|
|
52
|
+
type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number];
|
|
202
53
|
/** @public */
|
|
203
|
-
|
|
204
|
-
|
|
54
|
+
type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number];
|
|
205
55
|
/** @public */
|
|
206
|
-
|
|
207
|
-
|
|
56
|
+
type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number];
|
|
208
57
|
/** @public */
|
|
209
|
-
|
|
210
|
-
| `black`
|
|
211
|
-
| `white`
|
|
212
|
-
| `black/${ColorConfigOpacityValue}`
|
|
213
|
-
| `white/${ColorConfigOpacityValue}`
|
|
214
|
-
| `${ColorHueKey}`
|
|
215
|
-
| `${ColorHueKey} ${number}%`
|
|
216
|
-
| `${ColorHueKey}/${ColorTintKey}`
|
|
217
|
-
| `${ColorHueKey}/${ColorTintKey} ${number}%`
|
|
218
|
-
| `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}`
|
|
219
|
-
| `${ColorTintKey}`
|
|
220
|
-
| `${ColorTintKey} ${number}%`
|
|
221
|
-
| `${ColorTintKey}/${ColorConfigOpacityValue}`
|
|
222
|
-
|
|
223
|
-
/**
|
|
224
|
-
* @public
|
|
225
|
-
* @deprecated Use `buildColorTheme` instead.
|
|
226
|
-
*/
|
|
227
|
-
export declare function createColorTheme(
|
|
228
|
-
partialOpts?: PartialThemeColorBuilderOpts,
|
|
229
|
-
): ThemeColorSchemes
|
|
230
|
-
|
|
231
|
-
/**
|
|
232
|
-
* Work around types that are missing in `styled-components@6`
|
|
233
|
-
* https://github.com/styled-components/styled-components/issues/4062
|
|
234
|
-
* @internal
|
|
235
|
-
*/
|
|
236
|
-
export declare type CSSObject = StyledObject<any>
|
|
237
|
-
|
|
238
|
-
/** @internal */
|
|
239
|
-
export declare function getContrastRatio(bg: string, fg: string): number
|
|
240
|
-
|
|
241
|
-
/** @internal */
|
|
242
|
-
export declare function getScopedTheme(
|
|
243
|
-
themeProp: RootTheme | RootTheme_v2,
|
|
244
|
-
scheme: ThemeColorSchemeKey,
|
|
245
|
-
tone: ThemeColorCardToneKey,
|
|
246
|
-
): Theme
|
|
247
|
-
|
|
58
|
+
type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number];
|
|
248
59
|
/** @public */
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
/**
|
|
252
|
-
* @internal
|
|
253
|
-
*/
|
|
254
|
-
export declare function hexToRgb(hex: string): RGB
|
|
255
|
-
|
|
256
|
-
/**
|
|
257
|
-
* @internal
|
|
258
|
-
*/
|
|
259
|
-
export declare interface HSL {
|
|
260
|
-
h: number
|
|
261
|
-
s: number
|
|
262
|
-
l: number
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
/**
|
|
266
|
-
* @internal
|
|
267
|
-
*/
|
|
268
|
-
export declare function hslToRgb(hsl: HSL): RGB
|
|
269
|
-
|
|
270
|
-
/** @internal */
|
|
271
|
-
export declare function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme
|
|
272
|
-
|
|
273
|
-
/** @internal */
|
|
274
|
-
export declare function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2
|
|
275
|
-
|
|
276
|
-
/** @internal */
|
|
277
|
-
export declare function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey
|
|
278
|
-
|
|
279
|
-
/** @internal */
|
|
280
|
-
export declare function isColorButtonMode(str: string): str is ThemeColorButtonModeKey
|
|
281
|
-
|
|
282
|
-
/** @internal */
|
|
283
|
-
export declare function isColorConfigBaseKey(str: string): str is ColorConfigCardKey
|
|
284
|
-
|
|
285
|
-
/** @internal */
|
|
286
|
-
export declare function isColorConfigBaseTone(str: string): str is ColorConfigCardTone
|
|
287
|
-
|
|
288
|
-
/** @internal */
|
|
289
|
-
export declare function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey
|
|
290
|
-
|
|
60
|
+
type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number];
|
|
291
61
|
/** @internal */
|
|
292
|
-
|
|
293
|
-
|
|
62
|
+
declare function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey;
|
|
294
63
|
/** @internal */
|
|
295
|
-
|
|
296
|
-
|
|
64
|
+
declare function isColorHueKey(str: string): str is ColorHueKey;
|
|
297
65
|
/** @internal */
|
|
298
|
-
|
|
299
|
-
|
|
66
|
+
declare function isColorTintKey(str: string): str is ColorTintKey;
|
|
300
67
|
/** @internal */
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
/** @internal */
|
|
304
|
-
export declare function isColorTintKey(str: string): str is ColorTintKey
|
|
305
|
-
|
|
306
|
-
/** @internal */
|
|
307
|
-
export declare function isColorTokenValue(str: string): str is ColorConfigValue
|
|
308
|
-
|
|
309
|
-
/** @internal */
|
|
310
|
-
export declare function isColorValue(str: string): str is 'black' | 'white'
|
|
311
|
-
|
|
68
|
+
declare function isColorButtonMode(str: string): str is ThemeColorButtonModeKey;
|
|
312
69
|
/**
|
|
313
|
-
*
|
|
314
|
-
* @internal
|
|
70
|
+
* @public
|
|
315
71
|
*/
|
|
316
|
-
|
|
317
|
-
|
|
72
|
+
interface ThemeColorAvatarHue_v2 {
|
|
73
|
+
_blend?: ThemeColorBlendModeKey;
|
|
74
|
+
bg: string;
|
|
75
|
+
fg: string;
|
|
76
|
+
}
|
|
318
77
|
/**
|
|
319
|
-
*
|
|
320
|
-
* Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
|
|
321
|
-
* @internal
|
|
78
|
+
* @public
|
|
322
79
|
*/
|
|
323
|
-
|
|
324
|
-
|
|
80
|
+
type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>;
|
|
325
81
|
/**
|
|
326
|
-
* @
|
|
82
|
+
* @public
|
|
327
83
|
*/
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
export declare function parseTokenValue(str: string): TokenValueNode | undefined
|
|
335
|
-
|
|
84
|
+
interface ThemeColorBadgeTone_v2 {
|
|
85
|
+
bg: string;
|
|
86
|
+
fg: string;
|
|
87
|
+
dot: string;
|
|
88
|
+
icon: string;
|
|
89
|
+
}
|
|
336
90
|
/**
|
|
337
91
|
* @public
|
|
338
|
-
* @deprecated Use `ThemeConfig` instead.
|
|
339
92
|
*/
|
|
340
|
-
|
|
341
|
-
|
|
93
|
+
type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>;
|
|
342
94
|
/**
|
|
343
|
-
* @
|
|
95
|
+
* @public
|
|
344
96
|
*/
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
a?: undefined
|
|
97
|
+
interface ThemeColorKBD {
|
|
98
|
+
bg: string;
|
|
99
|
+
fg: string;
|
|
100
|
+
border: string;
|
|
350
101
|
}
|
|
351
|
-
|
|
352
102
|
/**
|
|
353
|
-
* @
|
|
103
|
+
* @public
|
|
354
104
|
*/
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
105
|
+
interface ThemeColorState_v2 {
|
|
106
|
+
/** @internal */
|
|
107
|
+
_blend?: ThemeColorBlendModeKey;
|
|
108
|
+
accent: {
|
|
109
|
+
fg: string;
|
|
110
|
+
};
|
|
111
|
+
/**
|
|
112
|
+
* @internal This may be removed in a future release
|
|
113
|
+
* */
|
|
114
|
+
avatar: ThemeColorAvatar_v2;
|
|
115
|
+
/**
|
|
116
|
+
* @internal This may be removed in a future release
|
|
117
|
+
* */
|
|
118
|
+
badge: ThemeColorBadge_v2;
|
|
119
|
+
bg: string;
|
|
120
|
+
border: string;
|
|
121
|
+
code: {
|
|
122
|
+
bg: string;
|
|
123
|
+
fg: string;
|
|
124
|
+
};
|
|
125
|
+
fg: string;
|
|
126
|
+
icon: string;
|
|
127
|
+
kbd: ThemeColorKBD;
|
|
128
|
+
link: {
|
|
129
|
+
fg: string;
|
|
130
|
+
};
|
|
131
|
+
muted: {
|
|
132
|
+
bg: string;
|
|
133
|
+
fg: string;
|
|
134
|
+
};
|
|
135
|
+
skeleton: {
|
|
136
|
+
from: string;
|
|
137
|
+
to: string;
|
|
138
|
+
};
|
|
360
139
|
}
|
|
361
|
-
|
|
362
|
-
/**
|
|
363
|
-
* @internal
|
|
364
|
-
*/
|
|
365
|
-
export declare function rgba(color: unknown, a: number): string
|
|
366
|
-
|
|
367
140
|
/**
|
|
368
|
-
* @
|
|
369
|
-
*/
|
|
370
|
-
export declare function rgbaToRGBA(rgba: string): RGBA
|
|
371
|
-
|
|
372
|
-
/**
|
|
373
|
-
* @internal
|
|
141
|
+
* @public
|
|
374
142
|
*/
|
|
375
|
-
|
|
376
|
-
|
|
143
|
+
type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>;
|
|
377
144
|
/**
|
|
378
|
-
* @
|
|
379
|
-
* @see https://css-tricks.com/converting-color-spaces-in-javascript/
|
|
145
|
+
* @public
|
|
380
146
|
*/
|
|
381
|
-
|
|
382
|
-
|
|
147
|
+
type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>;
|
|
383
148
|
/**
|
|
384
149
|
* @public
|
|
385
150
|
*/
|
|
386
|
-
|
|
387
|
-
|
|
151
|
+
type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>;
|
|
388
152
|
/**
|
|
389
153
|
* @public
|
|
390
154
|
*/
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
}
|
|
401
|
-
card: {
|
|
402
|
-
border: {
|
|
403
|
-
width: number
|
|
404
|
-
}
|
|
405
|
-
focusRing: ThemeFocusRing
|
|
406
|
-
shadow: {
|
|
407
|
-
outline: number
|
|
408
|
-
}
|
|
409
|
-
}
|
|
410
|
-
color: ThemeColorSchemes_v2
|
|
411
|
-
container: number[]
|
|
412
|
-
font: ThemeFonts
|
|
413
|
-
input: ThemeInput_v2
|
|
414
|
-
layer: ThemeLayer
|
|
415
|
-
media: number[]
|
|
416
|
-
radius: number[]
|
|
417
|
-
shadow: Array<ThemeShadow | null>
|
|
418
|
-
space: number[]
|
|
419
|
-
/** @internal */
|
|
420
|
-
style?: ThemeStyles
|
|
155
|
+
interface ThemeColorInputState_v2 {
|
|
156
|
+
_blend?: ThemeColorBlendModeKey;
|
|
157
|
+
bg: string;
|
|
158
|
+
border: string;
|
|
159
|
+
fg: string;
|
|
160
|
+
muted: {
|
|
161
|
+
bg: string;
|
|
162
|
+
};
|
|
163
|
+
placeholder: string;
|
|
421
164
|
}
|
|
422
|
-
|
|
423
|
-
/**
|
|
424
|
-
* Apply the \`screen\` blend mode
|
|
425
|
-
* Source: https://www.w3.org/TR/compositing-1/#blendingscreen
|
|
426
|
-
* @internal
|
|
427
|
-
*/
|
|
428
|
-
declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
|
|
429
|
-
export {screen_2 as screen}
|
|
430
|
-
|
|
431
165
|
/**
|
|
432
166
|
* @public
|
|
433
167
|
*/
|
|
434
|
-
|
|
435
|
-
sanity: Omit<RootTheme, 'color' | 'v2'> & {
|
|
436
|
-
/**
|
|
437
|
-
* @deprecated Use `v2.color` instead
|
|
438
|
-
*/
|
|
439
|
-
color: ThemeColor
|
|
440
|
-
v2?: Theme_v2
|
|
441
|
-
}
|
|
442
|
-
}
|
|
443
|
-
|
|
444
|
-
/** @public */
|
|
445
|
-
export declare const THEME_COLOR_AVATAR_COLORS: ColorHueKey[]
|
|
446
|
-
|
|
447
|
-
/** @public */
|
|
448
|
-
export declare const THEME_COLOR_BLEND_MODES: readonly ['multiply', 'screen']
|
|
449
|
-
|
|
450
|
-
/** @public */
|
|
451
|
-
export declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed']
|
|
452
|
-
|
|
453
|
-
/** @public */
|
|
454
|
-
export declare const THEME_COLOR_CARD_TONES: readonly [
|
|
455
|
-
'transparent',
|
|
456
|
-
'default',
|
|
457
|
-
'neutral',
|
|
458
|
-
'primary',
|
|
459
|
-
'suggest',
|
|
460
|
-
'positive',
|
|
461
|
-
'caution',
|
|
462
|
-
'critical',
|
|
463
|
-
]
|
|
464
|
-
|
|
465
|
-
/** @public */
|
|
466
|
-
export declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid']
|
|
467
|
-
|
|
468
|
-
/** @public */
|
|
469
|
-
export declare const THEME_COLOR_INPUT_STATES: readonly [
|
|
470
|
-
'enabled',
|
|
471
|
-
'hovered',
|
|
472
|
-
'readOnly',
|
|
473
|
-
'disabled',
|
|
474
|
-
]
|
|
475
|
-
|
|
476
|
-
/** @public */
|
|
477
|
-
export declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark']
|
|
478
|
-
|
|
479
|
-
/** @public */
|
|
480
|
-
export declare const THEME_COLOR_STATE_TONES: readonly [
|
|
481
|
-
'default',
|
|
482
|
-
'neutral',
|
|
483
|
-
'primary',
|
|
484
|
-
'suggest',
|
|
485
|
-
'positive',
|
|
486
|
-
'caution',
|
|
487
|
-
'critical',
|
|
488
|
-
]
|
|
489
|
-
|
|
490
|
-
/** @public */
|
|
491
|
-
export declare const THEME_COLOR_STATES: readonly [
|
|
492
|
-
'enabled',
|
|
493
|
-
'hovered',
|
|
494
|
-
'pressed',
|
|
495
|
-
'selected',
|
|
496
|
-
'disabled',
|
|
497
|
-
]
|
|
498
|
-
|
|
168
|
+
type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>;
|
|
499
169
|
/**
|
|
500
170
|
* @public
|
|
501
171
|
*/
|
|
502
|
-
|
|
503
|
-
color: ThemeColorCard_v2
|
|
504
|
-
/**
|
|
505
|
-
* Indicates whether the theme is resolved or raw, it's necessary to avoid issues
|
|
506
|
-
* with sanity V2 components accessing a v1 <ThemeProvider>.
|
|
507
|
-
* See https://github.com/sanity-io/ui/pull/1203 for more info.
|
|
508
|
-
*/
|
|
509
|
-
_resolved: boolean
|
|
510
|
-
}
|
|
511
|
-
|
|
172
|
+
type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>;
|
|
512
173
|
/**
|
|
513
174
|
* @public
|
|
514
|
-
* @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
|
|
515
175
|
*/
|
|
516
|
-
|
|
517
|
-
sizes: {
|
|
518
|
-
distance: number
|
|
519
|
-
size: number
|
|
520
|
-
}[]
|
|
521
|
-
}
|
|
522
|
-
|
|
176
|
+
type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>;
|
|
523
177
|
/**
|
|
524
178
|
* @public
|
|
525
179
|
*/
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
focusRing: ThemeFocusRing
|
|
180
|
+
type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>;
|
|
181
|
+
/** @public */
|
|
182
|
+
interface ThemeColorShadow {
|
|
183
|
+
outline: string;
|
|
184
|
+
umbra: string;
|
|
185
|
+
penumbra: string;
|
|
186
|
+
ambient: string;
|
|
534
187
|
}
|
|
535
|
-
|
|
536
188
|
/**
|
|
537
189
|
* @public
|
|
538
190
|
*/
|
|
539
|
-
|
|
540
|
-
|
|
191
|
+
interface ThemeColorSyntax {
|
|
192
|
+
atrule: string;
|
|
193
|
+
attrName: string;
|
|
194
|
+
attrValue: string;
|
|
195
|
+
attribute: string;
|
|
196
|
+
boolean: string;
|
|
197
|
+
builtin: string;
|
|
198
|
+
cdata: string;
|
|
199
|
+
char: string;
|
|
200
|
+
class: string;
|
|
201
|
+
className: string;
|
|
202
|
+
comment: string;
|
|
203
|
+
constant: string;
|
|
204
|
+
deleted: string;
|
|
205
|
+
doctype: string;
|
|
206
|
+
entity: string;
|
|
207
|
+
function: string;
|
|
208
|
+
hexcode: string;
|
|
209
|
+
id: string;
|
|
210
|
+
important: string;
|
|
211
|
+
inserted: string;
|
|
212
|
+
keyword: string;
|
|
213
|
+
number: string;
|
|
214
|
+
operator: string;
|
|
215
|
+
prolog: string;
|
|
216
|
+
property: string;
|
|
217
|
+
pseudoClass: string;
|
|
218
|
+
pseudoElement: string;
|
|
219
|
+
punctuation: string;
|
|
220
|
+
regex: string;
|
|
221
|
+
selector: string;
|
|
222
|
+
string: string;
|
|
223
|
+
symbol: string;
|
|
224
|
+
tag: string;
|
|
225
|
+
unit: string;
|
|
226
|
+
url: string;
|
|
227
|
+
variable: string;
|
|
228
|
+
}
|
|
541
229
|
/**
|
|
542
230
|
* @public
|
|
543
|
-
* @deprecated Use `ThemeColor_v2` instead.
|
|
544
231
|
*/
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
syntax: ThemeColorSyntax
|
|
232
|
+
interface ThemeColorCard_v2 extends ThemeColorState_v2 {
|
|
233
|
+
/** @internal */
|
|
234
|
+
_blend: ThemeColorBlendModeKey;
|
|
235
|
+
_dark: boolean;
|
|
236
|
+
backdrop: string;
|
|
237
|
+
button: ThemeColorButton_v2;
|
|
238
|
+
focusRing: string;
|
|
239
|
+
input: ThemeColorInput_v2;
|
|
240
|
+
selectable: ThemeColorSelectable_v2;
|
|
241
|
+
shadow: ThemeColorShadow;
|
|
242
|
+
syntax: ThemeColorSyntax;
|
|
556
243
|
}
|
|
557
|
-
|
|
558
244
|
/**
|
|
559
245
|
* @public
|
|
560
246
|
*/
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
/** @public */
|
|
564
|
-
export declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
|
|
565
|
-
|
|
247
|
+
type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>;
|
|
566
248
|
/**
|
|
567
249
|
* @public
|
|
568
250
|
*/
|
|
569
|
-
|
|
570
|
-
_blend?: ThemeColorBlendModeKey
|
|
571
|
-
bg: string
|
|
572
|
-
fg: string
|
|
573
|
-
}
|
|
574
|
-
|
|
575
|
-
/** @public */
|
|
576
|
-
export declare interface ThemeColorAvatarHueTokens {
|
|
577
|
-
_blend?: ColorBlendModeTokenValue
|
|
578
|
-
_hue?: ColorHueKey
|
|
579
|
-
bg?: ThemeColorTokenValue
|
|
580
|
-
fg?: ThemeColorTokenValue
|
|
581
|
-
}
|
|
582
|
-
|
|
583
|
-
/** @public */
|
|
584
|
-
export declare interface ThemeColorAvatarTokens {
|
|
585
|
-
'*'?: ThemeColorAvatarHueTokens
|
|
586
|
-
'gray'?: ThemeColorAvatarHueTokens
|
|
587
|
-
'blue'?: ThemeColorAvatarHueTokens
|
|
588
|
-
'purple'?: ThemeColorAvatarHueTokens
|
|
589
|
-
'magenta'?: ThemeColorAvatarHueTokens
|
|
590
|
-
'red'?: ThemeColorAvatarHueTokens
|
|
591
|
-
'orange'?: ThemeColorAvatarHueTokens
|
|
592
|
-
'yellow'?: ThemeColorAvatarHueTokens
|
|
593
|
-
'green'?: ThemeColorAvatarHueTokens
|
|
594
|
-
'cyan'?: ThemeColorAvatarHueTokens
|
|
595
|
-
}
|
|
596
|
-
|
|
251
|
+
type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>;
|
|
597
252
|
/**
|
|
598
|
-
* @
|
|
253
|
+
* Work around types that are missing in `styled-components@6`
|
|
254
|
+
* https://github.com/styled-components/styled-components/issues/4062
|
|
255
|
+
* @internal
|
|
599
256
|
*/
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
/** @public */
|
|
603
|
-
export declare type ThemeColorBadgeTokens = Partial<
|
|
604
|
-
Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
|
|
605
|
-
>
|
|
606
|
-
|
|
257
|
+
type CSSObject = StyledObject<any>;
|
|
607
258
|
/**
|
|
608
259
|
* @public
|
|
609
260
|
*/
|
|
610
|
-
|
|
611
|
-
bg: string
|
|
612
|
-
fg: string
|
|
613
|
-
dot: string
|
|
614
|
-
icon: string
|
|
615
|
-
}
|
|
616
|
-
|
|
617
|
-
/** @public */
|
|
618
|
-
export declare interface ThemeColorBadgeToneTokens {
|
|
619
|
-
_blend?: ColorBlendModeTokenValue
|
|
620
|
-
_hue?: ColorHueKey
|
|
621
|
-
bg?: ThemeColorTokenValue
|
|
622
|
-
dot?: ThemeColorTokenValue
|
|
623
|
-
fg?: ThemeColorTokenValue
|
|
624
|
-
icon?: ThemeColorTokenValue
|
|
625
|
-
}
|
|
626
|
-
|
|
261
|
+
type ThemeFontKey = 'code' | 'heading' | 'label' | 'text';
|
|
627
262
|
/**
|
|
628
263
|
* @public
|
|
629
|
-
* @deprecated Use `ThemeColorCard_v2` instead.
|
|
630
264
|
*/
|
|
631
|
-
|
|
632
|
-
bg: string
|
|
633
|
-
fg: string
|
|
634
|
-
border: string
|
|
635
|
-
focusRing: string
|
|
636
|
-
backdrop?: string
|
|
637
|
-
shadow: {
|
|
638
|
-
outline: string
|
|
639
|
-
umbra: string
|
|
640
|
-
penumbra: string
|
|
641
|
-
ambient: string
|
|
642
|
-
}
|
|
643
|
-
skeleton?: {
|
|
644
|
-
from: string
|
|
645
|
-
to: string
|
|
646
|
-
}
|
|
647
|
-
}
|
|
648
|
-
|
|
649
|
-
/** @public */
|
|
650
|
-
export declare interface ThemeColorBaseTokens extends ThemeColorStateTokens {
|
|
651
|
-
focusRing?: ThemeColorTokenValue
|
|
652
|
-
backdrop?: ThemeColorTokenValue
|
|
653
|
-
shadow?: {
|
|
654
|
-
outline?: ThemeColorTokenValue
|
|
655
|
-
umbra?: ThemeColorTokenValue
|
|
656
|
-
penumbra?: ThemeColorTokenValue
|
|
657
|
-
ambient?: ThemeColorTokenValue
|
|
658
|
-
}
|
|
659
|
-
}
|
|
660
|
-
|
|
661
|
-
/** @public */
|
|
662
|
-
export declare type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
|
|
663
|
-
|
|
265
|
+
type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold';
|
|
664
266
|
/**
|
|
665
267
|
* @public
|
|
666
|
-
* @deprecated Use `buildColorTheme` instead.
|
|
667
268
|
*/
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
|
|
676
|
-
}) => ThemeColorGenericState
|
|
677
|
-
muted: (opts: {
|
|
678
|
-
base: ThemeColorBase
|
|
679
|
-
dark: boolean
|
|
680
|
-
tone: ThemeColorToneKey
|
|
681
|
-
name: ThemeColorName
|
|
682
|
-
state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
|
|
683
|
-
}) => ThemeColorGenericState
|
|
684
|
-
card: (opts: {
|
|
685
|
-
base: ThemeColorBase
|
|
686
|
-
dark: boolean
|
|
687
|
-
muted: ThemeColorMuted
|
|
688
|
-
name: ThemeColorName
|
|
689
|
-
solid: ThemeColorSolid
|
|
690
|
-
state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
|
|
691
|
-
}) => ThemeColorGenericState
|
|
692
|
-
button: (opts: {
|
|
693
|
-
dark: boolean
|
|
694
|
-
mode: ThemeColorButtonModeKey
|
|
695
|
-
base: ThemeColorBase
|
|
696
|
-
solid: ThemeColorSolidTone
|
|
697
|
-
muted: ThemeColorMutedTone
|
|
698
|
-
}) => ThemeColorButtonStates
|
|
699
|
-
input: (opts: {
|
|
700
|
-
base: ThemeColorBase
|
|
701
|
-
solid: ThemeColorSolidTone
|
|
702
|
-
muted: ThemeColorMutedTone
|
|
703
|
-
dark: boolean
|
|
704
|
-
mode: 'default' | 'invalid'
|
|
705
|
-
state: 'enabled' | 'disabled' | 'hovered' | 'readOnly'
|
|
706
|
-
}) => ThemeColorInputState
|
|
707
|
-
selectable: (opts: {
|
|
708
|
-
dark: boolean
|
|
709
|
-
base: ThemeColorBase
|
|
710
|
-
solid: ThemeColorSolid
|
|
711
|
-
muted: ThemeColorMuted
|
|
712
|
-
state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
|
|
713
|
-
tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
|
|
714
|
-
}) => ThemeColorGenericState
|
|
715
|
-
syntax: (opts: {base: ThemeColorBase; dark: boolean}) => ThemeColorSyntax
|
|
716
|
-
spot: (opts: {base: ThemeColorBase; dark: boolean; key: ThemeColorSpotKey}) => string
|
|
269
|
+
interface ThemeFontSize {
|
|
270
|
+
ascenderHeight: number;
|
|
271
|
+
descenderHeight: number;
|
|
272
|
+
fontSize: number;
|
|
273
|
+
iconSize: number;
|
|
274
|
+
letterSpacing: number;
|
|
275
|
+
lineHeight: number;
|
|
717
276
|
}
|
|
718
|
-
|
|
719
277
|
/**
|
|
720
278
|
* @public
|
|
721
|
-
* @deprecated Use `ThemeColorButton_v2` instead.
|
|
722
279
|
*/
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
280
|
+
interface ThemeFontWeight {
|
|
281
|
+
regular: number;
|
|
282
|
+
medium: number;
|
|
283
|
+
semibold: number;
|
|
284
|
+
bold: number;
|
|
727
285
|
}
|
|
728
|
-
|
|
729
286
|
/**
|
|
730
287
|
* @public
|
|
731
288
|
*/
|
|
732
|
-
|
|
733
|
-
|
|
289
|
+
interface ThemeFont {
|
|
290
|
+
family: string;
|
|
291
|
+
weights: ThemeFontWeight;
|
|
292
|
+
sizes: ThemeFontSize[];
|
|
293
|
+
/** @deprecated No longer supported. */
|
|
294
|
+
horizontalOffset?: number;
|
|
295
|
+
}
|
|
734
296
|
/**
|
|
735
297
|
* @public
|
|
736
298
|
*/
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
export declare type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
|
|
744
|
-
|
|
299
|
+
interface ThemeFonts {
|
|
300
|
+
code: ThemeFont;
|
|
301
|
+
heading: ThemeFont;
|
|
302
|
+
label: ThemeFont;
|
|
303
|
+
text: ThemeFont;
|
|
304
|
+
}
|
|
745
305
|
/**
|
|
746
306
|
* @public
|
|
747
|
-
* @deprecated Use `ThemeColorState_v2` instead.
|
|
748
307
|
*/
|
|
749
|
-
|
|
750
|
-
|
|
308
|
+
interface ThemeInput_v2 {
|
|
309
|
+
checkbox: {
|
|
310
|
+
size: number;
|
|
311
|
+
focusRing: ThemeFocusRing;
|
|
312
|
+
};
|
|
313
|
+
radio: {
|
|
314
|
+
size: number;
|
|
315
|
+
markSize: number;
|
|
316
|
+
focusRing: ThemeFocusRing;
|
|
317
|
+
};
|
|
318
|
+
switch: {
|
|
319
|
+
width: number;
|
|
320
|
+
height: number;
|
|
321
|
+
padding: number;
|
|
322
|
+
transitionDurationMs: number;
|
|
323
|
+
transitionTimingFunction: string;
|
|
324
|
+
focusRing: ThemeFocusRing;
|
|
325
|
+
};
|
|
326
|
+
border: {
|
|
327
|
+
width: number;
|
|
328
|
+
};
|
|
329
|
+
select: {
|
|
330
|
+
focusRing: ThemeFocusRing;
|
|
331
|
+
};
|
|
332
|
+
text: {
|
|
333
|
+
focusRing: ThemeFocusRing;
|
|
334
|
+
};
|
|
335
|
+
}
|
|
751
336
|
/**
|
|
752
337
|
* @public
|
|
753
|
-
* @deprecated Use `ThemeColorButtonStates_v2` instead.
|
|
754
338
|
*/
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
}
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
|
|
766
|
-
_hue?: ColorHueKey
|
|
339
|
+
interface ThemeLayer {
|
|
340
|
+
dialog: {
|
|
341
|
+
zOffset: number;
|
|
342
|
+
};
|
|
343
|
+
popover: {
|
|
344
|
+
zOffset: number;
|
|
345
|
+
};
|
|
346
|
+
tooltip: {
|
|
347
|
+
zOffset: number;
|
|
348
|
+
};
|
|
767
349
|
}
|
|
768
|
-
|
|
769
350
|
/**
|
|
770
351
|
* @public
|
|
771
352
|
*/
|
|
772
|
-
|
|
773
|
-
|
|
353
|
+
type ThemeBoxShadow = [number, number, number, number];
|
|
774
354
|
/**
|
|
775
|
-
* TODO: Rename to `ThemeColorButtonMode`.
|
|
776
355
|
* @public
|
|
777
|
-
* @deprecated Use `ThemeColorButtonTones_v2` instead.
|
|
778
356
|
*/
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
caution: ThemeColorButtonStates
|
|
784
|
-
critical: ThemeColorButtonStates
|
|
357
|
+
interface ThemeShadow {
|
|
358
|
+
umbra: ThemeBoxShadow;
|
|
359
|
+
penumbra: ThemeBoxShadow;
|
|
360
|
+
ambient: ThemeBoxShadow;
|
|
785
361
|
}
|
|
786
|
-
|
|
787
362
|
/**
|
|
788
|
-
* @
|
|
789
|
-
* @deprecated Use `ThemeColorSelectable_v2` instead.
|
|
363
|
+
* @internal
|
|
790
364
|
*/
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
365
|
+
interface ThemeStyles {
|
|
366
|
+
button?: {
|
|
367
|
+
root?: CSSObject;
|
|
368
|
+
};
|
|
369
|
+
card?: {
|
|
370
|
+
root?: CSSObject;
|
|
371
|
+
};
|
|
797
372
|
}
|
|
798
|
-
|
|
799
373
|
/**
|
|
800
374
|
* @public
|
|
375
|
+
* @deprecated Use `ThemeAvatar_v2` from `@sanity/ui/theme` instead.
|
|
801
376
|
*/
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
button: ThemeColorButton_v2
|
|
808
|
-
focusRing: string
|
|
809
|
-
input: ThemeColorInput_v2
|
|
810
|
-
selectable: ThemeColorSelectable_v2
|
|
811
|
-
shadow: ThemeColorShadow
|
|
812
|
-
syntax: ThemeColorSyntax
|
|
377
|
+
interface ThemeAvatar {
|
|
378
|
+
sizes: {
|
|
379
|
+
distance: number;
|
|
380
|
+
size: number;
|
|
381
|
+
}[];
|
|
813
382
|
}
|
|
814
|
-
|
|
815
383
|
/**
|
|
816
384
|
* @public
|
|
817
385
|
* @deprecated Use `ThemeColorState_v2` instead.
|
|
818
386
|
*/
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
/** @public */
|
|
822
|
-
export declare type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
|
|
823
|
-
|
|
824
|
-
/**
|
|
825
|
-
* @public
|
|
826
|
-
* @deprecated Use `ThemeColorState_v2` instead.
|
|
827
|
-
*/
|
|
828
|
-
export declare interface ThemeColorGenericState {
|
|
387
|
+
interface ThemeColorGenericState {
|
|
829
388
|
/** @internal */
|
|
830
|
-
_blend?: ThemeColorBlendModeKey
|
|
831
|
-
bg: string
|
|
389
|
+
_blend?: ThemeColorBlendModeKey;
|
|
390
|
+
bg: string;
|
|
832
391
|
/**
|
|
833
392
|
* @beta
|
|
834
393
|
*/
|
|
835
|
-
bg2?: string
|
|
836
|
-
border: string
|
|
837
|
-
fg: string
|
|
838
|
-
icon: string
|
|
394
|
+
bg2?: string;
|
|
395
|
+
border: string;
|
|
396
|
+
fg: string;
|
|
397
|
+
icon: string;
|
|
839
398
|
muted: {
|
|
840
|
-
fg: string
|
|
841
|
-
}
|
|
399
|
+
fg: string;
|
|
400
|
+
};
|
|
842
401
|
accent: {
|
|
843
|
-
fg: string
|
|
844
|
-
}
|
|
402
|
+
fg: string;
|
|
403
|
+
};
|
|
845
404
|
link: {
|
|
846
|
-
fg: string
|
|
847
|
-
}
|
|
405
|
+
fg: string;
|
|
406
|
+
};
|
|
848
407
|
code: {
|
|
849
|
-
bg: string
|
|
850
|
-
fg: string
|
|
851
|
-
}
|
|
408
|
+
bg: string;
|
|
409
|
+
fg: string;
|
|
410
|
+
};
|
|
852
411
|
skeleton?: {
|
|
853
|
-
from: string
|
|
854
|
-
to: string
|
|
855
|
-
}
|
|
412
|
+
from: string;
|
|
413
|
+
to: string;
|
|
414
|
+
};
|
|
856
415
|
}
|
|
857
|
-
|
|
858
416
|
/**
|
|
859
417
|
* @public
|
|
860
|
-
* @deprecated Use `
|
|
418
|
+
* @deprecated Use `ThemeColorCardToneKey` instead.
|
|
861
419
|
*/
|
|
862
|
-
|
|
863
|
-
default: ThemeColorInputStates
|
|
864
|
-
invalid: ThemeColorInputStates
|
|
865
|
-
}
|
|
866
|
-
|
|
420
|
+
type ThemeColorName = 'transparent' | 'default' | 'primary' | 'positive' | 'caution' | 'critical';
|
|
867
421
|
/**
|
|
868
422
|
* @public
|
|
423
|
+
* @deprecated Use `ThemeColorCardToneKey` instead.
|
|
869
424
|
*/
|
|
870
|
-
|
|
871
|
-
|
|
425
|
+
type ThemeColorToneKey = ThemeColorName;
|
|
872
426
|
/**
|
|
873
427
|
* @public
|
|
428
|
+
* @deprecated Use `ThemeColorCard_v2` instead.
|
|
874
429
|
*/
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
430
|
+
interface ThemeColorBase {
|
|
431
|
+
bg: string;
|
|
432
|
+
fg: string;
|
|
433
|
+
border: string;
|
|
434
|
+
focusRing: string;
|
|
435
|
+
backdrop?: string;
|
|
436
|
+
shadow: {
|
|
437
|
+
outline: string;
|
|
438
|
+
umbra: string;
|
|
439
|
+
penumbra: string;
|
|
440
|
+
ambient: string;
|
|
441
|
+
};
|
|
442
|
+
skeleton?: {
|
|
443
|
+
from: string;
|
|
444
|
+
to: string;
|
|
445
|
+
};
|
|
446
|
+
}
|
|
883
447
|
/**
|
|
884
448
|
* @public
|
|
885
|
-
* @deprecated Use `
|
|
449
|
+
* @deprecated Use `ThemeColorState_v2` instead.
|
|
886
450
|
*/
|
|
887
|
-
|
|
888
|
-
_blend?: ThemeColorBlendModeKey
|
|
889
|
-
bg: string
|
|
890
|
-
bg2: string
|
|
891
|
-
border: string
|
|
892
|
-
fg: string
|
|
893
|
-
placeholder: string
|
|
894
|
-
}
|
|
895
|
-
|
|
451
|
+
type ThemeColorButtonState = ThemeColorGenericState;
|
|
896
452
|
/**
|
|
897
453
|
* @public
|
|
454
|
+
* @deprecated Use `ThemeColorButtonStates_v2` instead.
|
|
898
455
|
*/
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
bg: string
|
|
906
|
-
}
|
|
907
|
-
placeholder: string
|
|
456
|
+
interface ThemeColorButtonStates {
|
|
457
|
+
enabled: ThemeColorGenericState;
|
|
458
|
+
hovered: ThemeColorGenericState;
|
|
459
|
+
pressed: ThemeColorGenericState;
|
|
460
|
+
selected: ThemeColorGenericState;
|
|
461
|
+
disabled: ThemeColorGenericState;
|
|
908
462
|
}
|
|
909
|
-
|
|
910
|
-
/** @public */
|
|
911
|
-
export declare type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
|
|
912
|
-
|
|
913
463
|
/**
|
|
464
|
+
* TODO: Rename to `ThemeColorButtonMode`.
|
|
914
465
|
* @public
|
|
915
|
-
* @deprecated Use `
|
|
466
|
+
* @deprecated Use `ThemeColorButtonTones_v2` instead.
|
|
916
467
|
*/
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
468
|
+
interface ThemeColorButtonTones {
|
|
469
|
+
default: ThemeColorButtonStates;
|
|
470
|
+
primary: ThemeColorButtonStates;
|
|
471
|
+
positive: ThemeColorButtonStates;
|
|
472
|
+
caution: ThemeColorButtonStates;
|
|
473
|
+
critical: ThemeColorButtonStates;
|
|
922
474
|
}
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
muted?: {
|
|
932
|
-
bg?: ThemeColorTokenValue
|
|
933
|
-
}
|
|
934
|
-
placeholder?: ThemeColorTokenValue
|
|
475
|
+
/**
|
|
476
|
+
* @public
|
|
477
|
+
* @deprecated Use `ThemeColorButton_v2` instead.
|
|
478
|
+
*/
|
|
479
|
+
interface ThemeColorButton {
|
|
480
|
+
default: ThemeColorButtonTones;
|
|
481
|
+
ghost: ThemeColorButtonTones;
|
|
482
|
+
bleed: ThemeColorButtonTones;
|
|
935
483
|
}
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
484
|
+
/**
|
|
485
|
+
* @public
|
|
486
|
+
* @deprecated Use `ThemeColorState_v2` instead.
|
|
487
|
+
*/
|
|
488
|
+
type ThemeColorCardState = ThemeColorGenericState;
|
|
489
|
+
/**
|
|
490
|
+
* @public
|
|
491
|
+
* @deprecated Use `ThemeColorSelectable_v2` instead.
|
|
492
|
+
*/
|
|
493
|
+
interface ThemeColorCard {
|
|
494
|
+
enabled: ThemeColorGenericState;
|
|
495
|
+
hovered: ThemeColorGenericState;
|
|
496
|
+
pressed: ThemeColorGenericState;
|
|
497
|
+
selected: ThemeColorGenericState;
|
|
498
|
+
disabled: ThemeColorGenericState;
|
|
941
499
|
}
|
|
942
|
-
|
|
943
500
|
/**
|
|
944
501
|
* @public
|
|
502
|
+
* @deprecated Use `ThemeColorInputState_v2` instead.
|
|
945
503
|
*/
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
504
|
+
interface ThemeColorInputState {
|
|
505
|
+
_blend?: ThemeColorBlendModeKey;
|
|
506
|
+
bg: string;
|
|
507
|
+
bg2: string;
|
|
508
|
+
border: string;
|
|
509
|
+
fg: string;
|
|
510
|
+
placeholder: string;
|
|
950
511
|
}
|
|
951
|
-
|
|
952
512
|
/**
|
|
953
513
|
* @public
|
|
954
|
-
* @deprecated Use `
|
|
514
|
+
* @deprecated Use `ThemeColorInputMode_v2` instead.
|
|
955
515
|
*/
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
caution: ThemeColorMutedTone
|
|
962
|
-
critical: ThemeColorMutedTone
|
|
516
|
+
interface ThemeColorInputStates {
|
|
517
|
+
enabled: ThemeColorInputState;
|
|
518
|
+
disabled: ThemeColorInputState;
|
|
519
|
+
hovered: ThemeColorInputState;
|
|
520
|
+
readOnly: ThemeColorInputState;
|
|
963
521
|
}
|
|
964
|
-
|
|
965
522
|
/**
|
|
966
523
|
* @public
|
|
967
|
-
* @deprecated Use `
|
|
524
|
+
* @deprecated Use `ThemeColorInput_v2` instead.
|
|
968
525
|
*/
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
hovered: ThemeColorGenericState
|
|
973
|
-
pressed: ThemeColorGenericState
|
|
974
|
-
selected: ThemeColorGenericState
|
|
526
|
+
interface ThemeColorInput {
|
|
527
|
+
default: ThemeColorInputStates;
|
|
528
|
+
invalid: ThemeColorInputStates;
|
|
975
529
|
}
|
|
976
|
-
|
|
977
530
|
/**
|
|
978
531
|
* @public
|
|
979
|
-
* @deprecated Use `
|
|
532
|
+
* @deprecated Use `ThemeColorSelectableTone_v2` instead.
|
|
980
533
|
*/
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
/** @public */
|
|
990
|
-
export declare type ThemeColorPalette = {
|
|
991
|
-
black: string | ColorTint
|
|
992
|
-
white: string | ColorTint
|
|
993
|
-
} & Record<ColorHueKey, Record<ColorTintKey, string | ColorTint>>
|
|
994
|
-
|
|
534
|
+
interface ThemeColorMutedTone {
|
|
535
|
+
enabled: ThemeColorGenericState;
|
|
536
|
+
disabled: ThemeColorGenericState;
|
|
537
|
+
hovered: ThemeColorGenericState;
|
|
538
|
+
pressed: ThemeColorGenericState;
|
|
539
|
+
selected: ThemeColorGenericState;
|
|
540
|
+
}
|
|
995
541
|
/**
|
|
996
542
|
* @public
|
|
997
|
-
* @deprecated Use `
|
|
543
|
+
* @deprecated Use `ThemeColorSelectable_v2` instead.
|
|
998
544
|
*/
|
|
999
|
-
|
|
1000
|
-
|
|
545
|
+
interface ThemeColorMuted {
|
|
546
|
+
default: ThemeColorMutedTone;
|
|
547
|
+
transparent: ThemeColorMutedTone;
|
|
548
|
+
primary: ThemeColorMutedTone;
|
|
549
|
+
positive: ThemeColorMutedTone;
|
|
550
|
+
caution: ThemeColorMutedTone;
|
|
551
|
+
critical: ThemeColorMutedTone;
|
|
552
|
+
}
|
|
1001
553
|
/**
|
|
1002
554
|
* @public
|
|
555
|
+
* @deprecated Use `ThemeColorState_v2` instead.
|
|
1003
556
|
*/
|
|
1004
|
-
|
|
1005
|
-
|
|
557
|
+
type ThemeColorSelectableState = ThemeColorGenericState;
|
|
1006
558
|
/**
|
|
1007
559
|
* @public
|
|
560
|
+
* @deprecated Use `ThemeColorSelectableStates_v2` instead.
|
|
1008
561
|
*/
|
|
1009
|
-
|
|
1010
|
-
|
|
562
|
+
interface ThemeColorSelectableStates {
|
|
563
|
+
enabled: ThemeColorSelectableState;
|
|
564
|
+
hovered: ThemeColorSelectableState;
|
|
565
|
+
pressed: ThemeColorSelectableState;
|
|
566
|
+
selected: ThemeColorSelectableState;
|
|
567
|
+
disabled: ThemeColorSelectableState;
|
|
568
|
+
}
|
|
1011
569
|
/**
|
|
1012
570
|
* @public
|
|
1013
|
-
* @deprecated Use `
|
|
571
|
+
* @deprecated Use `ThemeColorSelectable_v2` instead.
|
|
1014
572
|
*/
|
|
1015
|
-
|
|
1016
|
-
|
|
573
|
+
interface ThemeColorSelectable {
|
|
574
|
+
default: ThemeColorSelectableStates;
|
|
575
|
+
primary: ThemeColorSelectableStates;
|
|
576
|
+
positive: ThemeColorSelectableStates;
|
|
577
|
+
caution: ThemeColorSelectableStates;
|
|
578
|
+
critical: ThemeColorSelectableStates;
|
|
579
|
+
}
|
|
1017
580
|
/**
|
|
1018
581
|
* @public
|
|
582
|
+
* @deprecated Use `ThemeColorSelectableTone_v2` instead.
|
|
1019
583
|
*/
|
|
1020
|
-
|
|
1021
|
-
|
|
584
|
+
interface ThemeColorSolidTone {
|
|
585
|
+
enabled: ThemeColorGenericState;
|
|
586
|
+
disabled: ThemeColorGenericState;
|
|
587
|
+
hovered: ThemeColorGenericState;
|
|
588
|
+
pressed: ThemeColorGenericState;
|
|
589
|
+
selected: ThemeColorGenericState;
|
|
590
|
+
}
|
|
1022
591
|
/**
|
|
1023
592
|
* @public
|
|
1024
593
|
* @deprecated Use `ThemeColorSelectable_v2` instead.
|
|
1025
594
|
*/
|
|
1026
|
-
|
|
1027
|
-
default:
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
595
|
+
interface ThemeColorSolid {
|
|
596
|
+
default: ThemeColorSolidTone;
|
|
597
|
+
transparent: ThemeColorSolidTone;
|
|
598
|
+
primary: ThemeColorSolidTone;
|
|
599
|
+
positive: ThemeColorSolidTone;
|
|
600
|
+
caution: ThemeColorSolidTone;
|
|
601
|
+
critical: ThemeColorSolidTone;
|
|
1032
602
|
}
|
|
1033
|
-
|
|
1034
603
|
/**
|
|
1035
604
|
* @public
|
|
605
|
+
* @deprecated Use `ThemeColorAvatarColorKey` instead
|
|
1036
606
|
*/
|
|
1037
|
-
|
|
1038
|
-
ThemeColorStateToneKey,
|
|
1039
|
-
ThemeColorSelectableTone_v2
|
|
1040
|
-
>
|
|
1041
|
-
|
|
607
|
+
type ThemeColorSpotKey = ThemeColorAvatarColorKey;
|
|
1042
608
|
/**
|
|
1043
609
|
* @public
|
|
1044
|
-
* @deprecated Use `
|
|
610
|
+
* @deprecated Use `ThemeColorAvatar_v2` instead
|
|
1045
611
|
*/
|
|
1046
|
-
|
|
1047
|
-
|
|
612
|
+
type ThemeColorSpot = Record<ThemeColorSpotKey, string>;
|
|
1048
613
|
/**
|
|
1049
614
|
* @public
|
|
1050
|
-
* @deprecated Use `
|
|
615
|
+
* @deprecated Use `ThemeColor_v2` instead.
|
|
1051
616
|
*/
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
617
|
+
interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'>> {
|
|
618
|
+
base: ThemeColorBase;
|
|
619
|
+
button: ThemeColorButton;
|
|
620
|
+
card: ThemeColorCard;
|
|
621
|
+
dark: boolean;
|
|
622
|
+
input: ThemeColorInput;
|
|
623
|
+
muted: ThemeColorMuted;
|
|
624
|
+
selectable?: ThemeColorSelectable;
|
|
625
|
+
solid: ThemeColorSolid;
|
|
626
|
+
spot: ThemeColorSpot;
|
|
627
|
+
syntax: ThemeColorSyntax;
|
|
1058
628
|
}
|
|
1059
|
-
|
|
1060
629
|
/**
|
|
1061
630
|
* @public
|
|
631
|
+
* @deprecated Use `ThemeColorScheme_v2` instead.
|
|
1062
632
|
*/
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
/** @public */
|
|
1066
|
-
export declare interface ThemeColorShadow {
|
|
1067
|
-
outline: string
|
|
1068
|
-
umbra: string
|
|
1069
|
-
penumbra: string
|
|
1070
|
-
ambient: string
|
|
1071
|
-
}
|
|
1072
|
-
|
|
633
|
+
type ThemeColorScheme = Record<ThemeColorName, ThemeColor>;
|
|
1073
634
|
/**
|
|
1074
635
|
* @public
|
|
1075
|
-
* @deprecated Use `
|
|
636
|
+
* @deprecated Use `ThemeColorSchemes_v2` instead.
|
|
1076
637
|
*/
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
638
|
+
type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>;
|
|
639
|
+
/**
|
|
640
|
+
* @public
|
|
641
|
+
* @deprecated Use `ThemeInput_v2` instead
|
|
642
|
+
*/
|
|
643
|
+
interface ThemeInput {
|
|
644
|
+
checkbox: {
|
|
645
|
+
size: number;
|
|
646
|
+
};
|
|
647
|
+
radio: {
|
|
648
|
+
size: number;
|
|
649
|
+
markSize: number;
|
|
650
|
+
};
|
|
651
|
+
switch: {
|
|
652
|
+
width: number;
|
|
653
|
+
height: number;
|
|
654
|
+
padding: number;
|
|
655
|
+
transitionDurationMs: number;
|
|
656
|
+
transitionTimingFunction: string;
|
|
657
|
+
};
|
|
658
|
+
border: {
|
|
659
|
+
width: number;
|
|
660
|
+
};
|
|
1084
661
|
}
|
|
1085
|
-
|
|
1086
662
|
/**
|
|
1087
663
|
* @public
|
|
1088
|
-
* @deprecated Use `ThemeColorSelectableTone_v2` instead.
|
|
1089
664
|
*/
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
665
|
+
interface RootTheme_v2 {
|
|
666
|
+
_version: 2;
|
|
667
|
+
avatar: ThemeAvatar_v2;
|
|
668
|
+
button: {
|
|
669
|
+
border: {
|
|
670
|
+
width: number;
|
|
671
|
+
};
|
|
672
|
+
focusRing: ThemeFocusRing;
|
|
673
|
+
textWeight: ThemeFontWeightKey;
|
|
674
|
+
};
|
|
675
|
+
card: {
|
|
676
|
+
border: {
|
|
677
|
+
width: number;
|
|
678
|
+
};
|
|
679
|
+
focusRing: ThemeFocusRing;
|
|
680
|
+
shadow: {
|
|
681
|
+
outline: number;
|
|
682
|
+
};
|
|
683
|
+
};
|
|
684
|
+
color: ThemeColorSchemes_v2;
|
|
685
|
+
container: number[];
|
|
686
|
+
font: ThemeFonts;
|
|
687
|
+
input: ThemeInput_v2;
|
|
688
|
+
layer: ThemeLayer;
|
|
689
|
+
media: number[];
|
|
690
|
+
radius: number[];
|
|
691
|
+
shadow: Array<ThemeShadow | null>;
|
|
692
|
+
space: number[];
|
|
693
|
+
/** @internal */
|
|
694
|
+
style?: ThemeStyles;
|
|
1096
695
|
}
|
|
1097
|
-
|
|
1098
696
|
/**
|
|
1099
697
|
* @public
|
|
1100
|
-
* @deprecated Use `ThemeColorAvatar_v2` instead
|
|
1101
698
|
*/
|
|
1102
|
-
|
|
1103
|
-
|
|
699
|
+
interface BaseTheme {
|
|
700
|
+
_version?: 0;
|
|
701
|
+
/**
|
|
702
|
+
* @deprecated Use `v2.avatar` instead
|
|
703
|
+
*/
|
|
704
|
+
avatar: ThemeAvatar;
|
|
705
|
+
/**
|
|
706
|
+
* @deprecated Use `v2.button` instead
|
|
707
|
+
*/
|
|
708
|
+
button: {
|
|
709
|
+
textWeight: ThemeFontWeightKey;
|
|
710
|
+
};
|
|
711
|
+
/**
|
|
712
|
+
* @deprecated Use `v2.color` instead
|
|
713
|
+
*/
|
|
714
|
+
color: ThemeColorSchemes;
|
|
715
|
+
/**
|
|
716
|
+
* @deprecated Use `v2.container` instead
|
|
717
|
+
*/
|
|
718
|
+
container: number[];
|
|
719
|
+
/**
|
|
720
|
+
* @deprecated Use component-specific `v2.{button | card | input}.focusRing` values instead
|
|
721
|
+
*/
|
|
722
|
+
focusRing: {
|
|
723
|
+
offset: number;
|
|
724
|
+
width: number;
|
|
725
|
+
};
|
|
726
|
+
/**
|
|
727
|
+
* @deprecated Use `v2.font` instead
|
|
728
|
+
*/
|
|
729
|
+
fonts: ThemeFonts;
|
|
730
|
+
/**
|
|
731
|
+
* @deprecated Use `v2.input` instead
|
|
732
|
+
*/
|
|
733
|
+
input: ThemeInput;
|
|
734
|
+
/**
|
|
735
|
+
* THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
|
|
736
|
+
* @beta
|
|
737
|
+
* @deprecated Use `v2.layer` instead
|
|
738
|
+
*/
|
|
739
|
+
layer?: ThemeLayer;
|
|
740
|
+
/**
|
|
741
|
+
* @deprecated Use `v2.media` instead
|
|
742
|
+
*/
|
|
743
|
+
media: number[];
|
|
744
|
+
/**
|
|
745
|
+
* @deprecated Use `v2.radius` instead
|
|
746
|
+
*/
|
|
747
|
+
radius: number[];
|
|
748
|
+
/**
|
|
749
|
+
* @deprecated Use `v2.shadow` instead
|
|
750
|
+
*/
|
|
751
|
+
shadows: Array<ThemeShadow | null>;
|
|
752
|
+
/**
|
|
753
|
+
* @deprecated Use `v2.space` instead
|
|
754
|
+
*/
|
|
755
|
+
space: number[];
|
|
756
|
+
/**
|
|
757
|
+
* @internal
|
|
758
|
+
* @deprecated Use `v2.style` instead
|
|
759
|
+
*/
|
|
760
|
+
styles?: ThemeStyles;
|
|
761
|
+
v2?: RootTheme_v2;
|
|
762
|
+
}
|
|
1104
763
|
/**
|
|
1105
764
|
* @public
|
|
1106
|
-
* @deprecated Use `ThemeColorAvatarColorKey` instead
|
|
1107
765
|
*/
|
|
1108
|
-
|
|
1109
|
-
|
|
766
|
+
type RootTheme = BaseTheme;
|
|
1110
767
|
/**
|
|
1111
768
|
* @public
|
|
1112
769
|
*/
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
_blend?: ThemeColorBlendModeKey
|
|
1116
|
-
accent: {
|
|
1117
|
-
fg: string
|
|
1118
|
-
}
|
|
770
|
+
type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
|
|
771
|
+
color: ThemeColorCard_v2;
|
|
1119
772
|
/**
|
|
1120
|
-
*
|
|
1121
|
-
*
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
}
|
|
773
|
+
* Indicates whether the theme is resolved or raw, it's necessary to avoid issues
|
|
774
|
+
* with sanity V2 components accessing a v1 <ThemeProvider>.
|
|
775
|
+
* See https://github.com/sanity-io/ui/pull/1203 for more info.
|
|
776
|
+
*/
|
|
777
|
+
_resolved: boolean;
|
|
778
|
+
};
|
|
779
|
+
/**
|
|
780
|
+
* @public
|
|
781
|
+
*/
|
|
782
|
+
interface Theme {
|
|
783
|
+
sanity: Omit<RootTheme, 'color' | 'v2'> & {
|
|
784
|
+
/**
|
|
785
|
+
* @deprecated Use `v2.color` instead
|
|
786
|
+
*/
|
|
787
|
+
color: ThemeColor;
|
|
788
|
+
v2?: Theme_v2;
|
|
789
|
+
};
|
|
790
|
+
}
|
|
791
|
+
/**
|
|
792
|
+
* @public
|
|
793
|
+
* @deprecated Use `buildColorTheme` instead.
|
|
794
|
+
*/
|
|
795
|
+
interface ThemeColorBuilderOpts {
|
|
796
|
+
base: (opts: {
|
|
797
|
+
dark: boolean;
|
|
798
|
+
name: ThemeColorName;
|
|
799
|
+
}) => ThemeColorBase;
|
|
800
|
+
solid: (opts: {
|
|
801
|
+
base: ThemeColorBase;
|
|
802
|
+
dark: boolean;
|
|
803
|
+
tone: ThemeColorName;
|
|
804
|
+
name: ThemeColorName;
|
|
805
|
+
state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected';
|
|
806
|
+
}) => ThemeColorGenericState;
|
|
807
|
+
muted: (opts: {
|
|
808
|
+
base: ThemeColorBase;
|
|
809
|
+
dark: boolean;
|
|
810
|
+
tone: ThemeColorToneKey;
|
|
811
|
+
name: ThemeColorName;
|
|
812
|
+
state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected';
|
|
813
|
+
}) => ThemeColorGenericState;
|
|
814
|
+
card: (opts: {
|
|
815
|
+
base: ThemeColorBase;
|
|
816
|
+
dark: boolean;
|
|
817
|
+
muted: ThemeColorMuted;
|
|
818
|
+
name: ThemeColorName;
|
|
819
|
+
solid: ThemeColorSolid;
|
|
820
|
+
state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected';
|
|
821
|
+
}) => ThemeColorGenericState;
|
|
822
|
+
button: (opts: {
|
|
823
|
+
dark: boolean;
|
|
824
|
+
mode: ThemeColorButtonModeKey;
|
|
825
|
+
base: ThemeColorBase;
|
|
826
|
+
solid: ThemeColorSolidTone;
|
|
827
|
+
muted: ThemeColorMutedTone;
|
|
828
|
+
}) => ThemeColorButtonStates;
|
|
829
|
+
input: (opts: {
|
|
830
|
+
base: ThemeColorBase;
|
|
831
|
+
solid: ThemeColorSolidTone;
|
|
832
|
+
muted: ThemeColorMutedTone;
|
|
833
|
+
dark: boolean;
|
|
834
|
+
mode: 'default' | 'invalid';
|
|
835
|
+
state: 'enabled' | 'disabled' | 'hovered' | 'readOnly';
|
|
836
|
+
}) => ThemeColorInputState;
|
|
837
|
+
selectable: (opts: {
|
|
838
|
+
dark: boolean;
|
|
839
|
+
base: ThemeColorBase;
|
|
840
|
+
solid: ThemeColorSolid;
|
|
841
|
+
muted: ThemeColorMuted;
|
|
842
|
+
state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected';
|
|
843
|
+
tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical';
|
|
844
|
+
}) => ThemeColorGenericState;
|
|
845
|
+
syntax: (opts: {
|
|
846
|
+
base: ThemeColorBase;
|
|
847
|
+
dark: boolean;
|
|
848
|
+
}) => ThemeColorSyntax;
|
|
849
|
+
spot: (opts: {
|
|
850
|
+
base: ThemeColorBase;
|
|
851
|
+
dark: boolean;
|
|
852
|
+
key: ThemeColorSpotKey;
|
|
853
|
+
}) => string;
|
|
854
|
+
}
|
|
855
|
+
/**
|
|
856
|
+
* @public
|
|
857
|
+
* @deprecated Use `ThemeConfig` instead.
|
|
858
|
+
*/
|
|
859
|
+
type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>;
|
|
860
|
+
/**
|
|
861
|
+
* @public
|
|
862
|
+
* @deprecated Use `buildColorTheme` instead.
|
|
863
|
+
*/
|
|
864
|
+
declare function createColorTheme(partialOpts?: PartialThemeColorBuilderOpts): ThemeColorSchemes;
|
|
865
|
+
/** @public */
|
|
866
|
+
declare const COLOR_CONFIG_STATE_KEYS: readonly ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "accent/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to", "status/dot", "status/icon"];
|
|
867
|
+
/** @public */
|
|
868
|
+
type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number];
|
|
869
|
+
/** @public */
|
|
870
|
+
declare const COLOR_CONFIG_CARD_KEYS: readonly ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "accent/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to", "status/dot", "status/icon", "_hue", "bg", "fg", "border", "focusRing", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient"];
|
|
871
|
+
/** @public */
|
|
872
|
+
type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number];
|
|
873
|
+
/** @public */
|
|
874
|
+
declare const COLOR_CONFIG_BLEND_KEYS: readonly ["_blend"];
|
|
875
|
+
/** @public */
|
|
876
|
+
type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number];
|
|
877
|
+
/** @public */
|
|
878
|
+
type ColorConfigOpacityValue = `0` | `0.${number}` | `1`;
|
|
879
|
+
/** @public */
|
|
880
|
+
type ColorConfigValue = `black` | `white` | `black/${ColorConfigOpacityValue}` | `white/${ColorConfigOpacityValue}` | `${ColorHueKey}` | `${ColorHueKey} ${number}%` | `${ColorHueKey}/${ColorTintKey}` | `${ColorHueKey}/${ColorTintKey} ${number}%` | `${ColorHueKey}/${ColorTintKey}/${ColorConfigOpacityValue}` | `${ColorTintKey}` | `${ColorTintKey} ${number}%` | `${ColorTintKey}/${ColorConfigOpacityValue}`;
|
|
881
|
+
/** @public */
|
|
882
|
+
type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue];
|
|
883
|
+
/** @public */
|
|
884
|
+
type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey];
|
|
885
|
+
/** @public */
|
|
886
|
+
declare const COLOR_CONFIG_AVATAR_COLORS: readonly ["*", ...ColorHueKey[]];
|
|
887
|
+
/** @public */
|
|
888
|
+
type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number];
|
|
889
|
+
/** @public */
|
|
890
|
+
declare const COLOR_CONFIG_CARD_TONES: readonly ["*", "transparent", "default", "neutral", "primary", "suggest", "positive", "caution", "critical"];
|
|
891
|
+
/** @public */
|
|
892
|
+
type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number];
|
|
893
|
+
/** @public */
|
|
894
|
+
declare const COLOR_CONFIG_STATE_TONES: readonly ["*", "default", "neutral", "primary", "suggest", "positive", "caution", "critical"];
|
|
895
|
+
/** @public */
|
|
896
|
+
type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number];
|
|
897
|
+
/** @public */
|
|
898
|
+
declare const COLOR_CONFIG_STATES: readonly ["*", "enabled", "hovered", "pressed", "selected", "disabled"];
|
|
899
|
+
/** @public */
|
|
900
|
+
type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number];
|
|
901
|
+
/** @public */
|
|
902
|
+
declare const COLOR_CONFIG_INPUT_MODES: readonly ["*", "default", "invalid"];
|
|
903
|
+
/** @public */
|
|
904
|
+
type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number];
|
|
905
|
+
/** @public */
|
|
906
|
+
declare const COLOR_CONFIG_INPUT_STATES: readonly ["*", "enabled", "hovered", "readOnly", "disabled"];
|
|
907
|
+
/** @public */
|
|
908
|
+
type ColorConfigInputState = (typeof COLOR_CONFIG_INPUT_STATES)[number];
|
|
909
|
+
/** @internal */
|
|
910
|
+
declare function isColorConfigBaseTone(str: string): str is ColorConfigCardTone;
|
|
911
|
+
/** @internal */
|
|
912
|
+
declare function isColorConfigBaseKey(str: string): str is ColorConfigCardKey;
|
|
913
|
+
/** @internal */
|
|
914
|
+
declare function isColorConfigStateKey(str: string): str is ColorConfigStateKey;
|
|
915
|
+
/** @internal */
|
|
916
|
+
declare function isColorConfigStateTone(str: string): str is ColorConfigStateTone;
|
|
917
|
+
/** @internal */
|
|
918
|
+
declare function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey;
|
|
919
|
+
/** @internal */
|
|
920
|
+
declare function isColorTokenValue(str: string): str is ColorConfigValue;
|
|
921
|
+
/** @internal */
|
|
922
|
+
declare function isColorValue(str: string): str is 'black' | 'white';
|
|
923
|
+
/** @internal */
|
|
924
|
+
declare function isColorOpacityValue(str: string): str is ColorConfigOpacityValue;
|
|
925
|
+
/** @public */
|
|
926
|
+
interface ThemeColorAvatarHueTokens {
|
|
927
|
+
_blend?: ColorBlendModeTokenValue;
|
|
928
|
+
_hue?: ColorHueKey;
|
|
929
|
+
bg?: ThemeColorTokenValue;
|
|
930
|
+
fg?: ThemeColorTokenValue;
|
|
931
|
+
}
|
|
932
|
+
/** @public */
|
|
933
|
+
interface ThemeColorAvatarTokens {
|
|
934
|
+
'*'?: ThemeColorAvatarHueTokens;
|
|
935
|
+
'gray'?: ThemeColorAvatarHueTokens;
|
|
936
|
+
'blue'?: ThemeColorAvatarHueTokens;
|
|
937
|
+
'purple'?: ThemeColorAvatarHueTokens;
|
|
938
|
+
'magenta'?: ThemeColorAvatarHueTokens;
|
|
939
|
+
'red'?: ThemeColorAvatarHueTokens;
|
|
940
|
+
'orange'?: ThemeColorAvatarHueTokens;
|
|
941
|
+
'yellow'?: ThemeColorAvatarHueTokens;
|
|
942
|
+
'green'?: ThemeColorAvatarHueTokens;
|
|
943
|
+
'cyan'?: ThemeColorAvatarHueTokens;
|
|
944
|
+
}
|
|
945
|
+
/** @public */
|
|
946
|
+
interface ThemeColorBaseTokens extends ThemeColorStateTokens {
|
|
947
|
+
focusRing?: ThemeColorTokenValue;
|
|
948
|
+
backdrop?: ThemeColorTokenValue;
|
|
949
|
+
shadow?: {
|
|
950
|
+
outline?: ThemeColorTokenValue;
|
|
951
|
+
umbra?: ThemeColorTokenValue;
|
|
952
|
+
penumbra?: ThemeColorTokenValue;
|
|
953
|
+
ambient?: ThemeColorTokenValue;
|
|
954
|
+
};
|
|
1147
955
|
}
|
|
1148
|
-
|
|
1149
956
|
/** @public */
|
|
1150
|
-
|
|
1151
|
-
|
|
957
|
+
interface ThemeColorBadgeToneTokens {
|
|
958
|
+
_blend?: ColorBlendModeTokenValue;
|
|
959
|
+
_hue?: ColorHueKey;
|
|
960
|
+
bg?: ThemeColorTokenValue;
|
|
961
|
+
dot?: ThemeColorTokenValue;
|
|
962
|
+
fg?: ThemeColorTokenValue;
|
|
963
|
+
icon?: ThemeColorTokenValue;
|
|
964
|
+
}
|
|
1152
965
|
/** @public */
|
|
1153
|
-
|
|
1154
|
-
Record<ColorConfigState, ThemeColorStateTokens>
|
|
1155
|
-
>
|
|
1156
|
-
|
|
966
|
+
type ThemeColorBadgeTokens = Partial<Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>>;
|
|
1157
967
|
/** @public */
|
|
1158
|
-
|
|
1159
|
-
_blend?: ColorBlendModeTokenValue
|
|
1160
|
-
_hue?: ColorHueKey
|
|
968
|
+
interface ThemeColorStateTokens {
|
|
969
|
+
_blend?: ColorBlendModeTokenValue;
|
|
970
|
+
_hue?: ColorHueKey;
|
|
1161
971
|
accent?: {
|
|
1162
|
-
fg?: ThemeColorTokenValue
|
|
1163
|
-
}
|
|
1164
|
-
avatar?: ThemeColorAvatarTokens
|
|
1165
|
-
badge?: ThemeColorBadgeTokens
|
|
1166
|
-
bg?: ThemeColorTokenValue
|
|
1167
|
-
border?: ThemeColorTokenValue
|
|
972
|
+
fg?: ThemeColorTokenValue;
|
|
973
|
+
};
|
|
974
|
+
avatar?: ThemeColorAvatarTokens;
|
|
975
|
+
badge?: ThemeColorBadgeTokens;
|
|
976
|
+
bg?: ThemeColorTokenValue;
|
|
977
|
+
border?: ThemeColorTokenValue;
|
|
1168
978
|
code?: {
|
|
1169
|
-
bg?: ThemeColorTokenValue
|
|
1170
|
-
fg?: ThemeColorTokenValue
|
|
1171
|
-
}
|
|
1172
|
-
fg?: ThemeColorTokenValue
|
|
1173
|
-
icon?: ThemeColorTokenValue
|
|
979
|
+
bg?: ThemeColorTokenValue;
|
|
980
|
+
fg?: ThemeColorTokenValue;
|
|
981
|
+
};
|
|
982
|
+
fg?: ThemeColorTokenValue;
|
|
983
|
+
icon?: ThemeColorTokenValue;
|
|
1174
984
|
kbd?: {
|
|
1175
|
-
bg?: ThemeColorTokenValue
|
|
1176
|
-
fg?: ThemeColorTokenValue
|
|
1177
|
-
border?: ThemeColorTokenValue
|
|
1178
|
-
}
|
|
985
|
+
bg?: ThemeColorTokenValue;
|
|
986
|
+
fg?: ThemeColorTokenValue;
|
|
987
|
+
border?: ThemeColorTokenValue;
|
|
988
|
+
};
|
|
1179
989
|
link?: {
|
|
1180
|
-
fg?: ThemeColorTokenValue
|
|
1181
|
-
}
|
|
990
|
+
fg?: ThemeColorTokenValue;
|
|
991
|
+
};
|
|
1182
992
|
muted?: {
|
|
1183
|
-
bg?: ThemeColorTokenValue
|
|
1184
|
-
fg?: ThemeColorTokenValue
|
|
1185
|
-
}
|
|
993
|
+
bg?: ThemeColorTokenValue;
|
|
994
|
+
fg?: ThemeColorTokenValue;
|
|
995
|
+
};
|
|
1186
996
|
skeleton?: {
|
|
1187
|
-
from?: ThemeColorTokenValue
|
|
1188
|
-
to?: ThemeColorTokenValue
|
|
1189
|
-
}
|
|
997
|
+
from?: ThemeColorTokenValue;
|
|
998
|
+
to?: ThemeColorTokenValue;
|
|
999
|
+
};
|
|
1190
1000
|
}
|
|
1191
|
-
|
|
1192
1001
|
/** @public */
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
*/
|
|
1198
|
-
export declare interface ThemeColorSyntax {
|
|
1199
|
-
atrule: string
|
|
1200
|
-
attrName: string
|
|
1201
|
-
attrValue: string
|
|
1202
|
-
attribute: string
|
|
1203
|
-
boolean: string
|
|
1204
|
-
builtin: string
|
|
1205
|
-
cdata: string
|
|
1206
|
-
char: string
|
|
1207
|
-
class: string
|
|
1208
|
-
className: string
|
|
1209
|
-
comment: string
|
|
1210
|
-
constant: string
|
|
1211
|
-
deleted: string
|
|
1212
|
-
doctype: string
|
|
1213
|
-
entity: string
|
|
1214
|
-
function: string
|
|
1215
|
-
hexcode: string
|
|
1216
|
-
id: string
|
|
1217
|
-
important: string
|
|
1218
|
-
inserted: string
|
|
1219
|
-
keyword: string
|
|
1220
|
-
number: string
|
|
1221
|
-
operator: string
|
|
1222
|
-
prolog: string
|
|
1223
|
-
property: string
|
|
1224
|
-
pseudoClass: string
|
|
1225
|
-
pseudoElement: string
|
|
1226
|
-
punctuation: string
|
|
1227
|
-
regex: string
|
|
1228
|
-
selector: string
|
|
1229
|
-
string: string
|
|
1230
|
-
symbol: string
|
|
1231
|
-
tag: string
|
|
1232
|
-
unit: string
|
|
1233
|
-
url: string
|
|
1234
|
-
variable: string
|
|
1002
|
+
type ThemeColorStatesTokens = Partial<Record<ColorConfigState, ThemeColorStateTokens>>;
|
|
1003
|
+
/** @public */
|
|
1004
|
+
interface ThemeColorButtonTokens extends Partial<Record<ColorConfigStateTone, ThemeColorStatesTokens>> {
|
|
1005
|
+
_hue?: ColorHueKey;
|
|
1235
1006
|
}
|
|
1236
|
-
|
|
1237
1007
|
/** @public */
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
>
|
|
1249
|
-
>
|
|
1250
|
-
syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>
|
|
1008
|
+
interface ThemeColorInputStateTokens {
|
|
1009
|
+
_blend?: ColorBlendModeTokenValue;
|
|
1010
|
+
_hue?: ColorHueKey;
|
|
1011
|
+
bg?: ThemeColorTokenValue;
|
|
1012
|
+
border?: ThemeColorTokenValue;
|
|
1013
|
+
fg?: ThemeColorTokenValue;
|
|
1014
|
+
muted?: {
|
|
1015
|
+
bg?: ThemeColorTokenValue;
|
|
1016
|
+
};
|
|
1017
|
+
placeholder?: ThemeColorTokenValue;
|
|
1251
1018
|
}
|
|
1252
|
-
|
|
1253
1019
|
/** @public */
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1020
|
+
interface ThemeColorInputTokens extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
|
|
1021
|
+
_hue?: ColorHueKey;
|
|
1022
|
+
}
|
|
1023
|
+
/** @public */
|
|
1024
|
+
interface ThemeColorTokens {
|
|
1025
|
+
base?: Partial<Record<ColorConfigCardTone, ThemeColorBaseTokens>>;
|
|
1026
|
+
button?: Partial<Record<ThemeColorButtonModeKey, ThemeColorButtonTokens>>;
|
|
1027
|
+
input?: Partial<Record<ColorConfigInputMode, ThemeColorInputTokens>>;
|
|
1028
|
+
selectable?: Partial<Record<ColorConfigStateTone, {
|
|
1029
|
+
_hue?: ColorHueKey;
|
|
1030
|
+
} & ThemeColorStatesTokens>>;
|
|
1031
|
+
syntax?: Partial<Record<keyof ThemeColorSyntax, ThemeColorTokenValue>>;
|
|
1032
|
+
}
|
|
1033
|
+
/** @internal */
|
|
1034
|
+
interface TokenBaseKeyNode {
|
|
1035
|
+
type: 'base';
|
|
1036
|
+
tone: ColorConfigCardTone;
|
|
1037
|
+
key: ColorConfigCardKey | ColorConfigBlendKey;
|
|
1038
|
+
}
|
|
1039
|
+
/** @internal */
|
|
1040
|
+
interface TokenButtonKeyNode {
|
|
1041
|
+
type: 'button';
|
|
1042
|
+
tone: ColorConfigStateTone;
|
|
1043
|
+
mode: ThemeColorButtonModeKey;
|
|
1044
|
+
key: ColorConfigStateKey | ColorConfigBlendKey;
|
|
1045
|
+
}
|
|
1046
|
+
/** @internal */
|
|
1047
|
+
type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode;
|
|
1048
|
+
/** @internal */
|
|
1049
|
+
interface TokenColorValueNode {
|
|
1050
|
+
type: 'color';
|
|
1051
|
+
key?: 'black' | 'white';
|
|
1052
|
+
hue?: ColorHueKey;
|
|
1053
|
+
mix?: number;
|
|
1054
|
+
opacity?: number;
|
|
1055
|
+
tint?: ColorTintKey;
|
|
1056
|
+
}
|
|
1057
|
+
/** @internal */
|
|
1058
|
+
interface TokenHueValueNode {
|
|
1059
|
+
type: 'hue';
|
|
1060
|
+
value?: ColorHueKey;
|
|
1061
|
+
}
|
|
1062
|
+
/** @internal */
|
|
1063
|
+
interface TokenBlendModeValueNode {
|
|
1064
|
+
type: 'blendMode';
|
|
1065
|
+
value?: ThemeColorBlendModeKey;
|
|
1066
|
+
}
|
|
1067
|
+
/** @internal */
|
|
1068
|
+
type TokenValueNode = TokenColorValueNode | TokenHueValueNode | TokenBlendModeValueNode;
|
|
1069
|
+
/** @internal */
|
|
1070
|
+
declare function parseTokenKey(str: string): TokenKeyNode | undefined;
|
|
1071
|
+
/** @internal */
|
|
1072
|
+
declare function parseTokenValue(str: string): TokenValueNode | undefined;
|
|
1073
|
+
/** @public */
|
|
1074
|
+
type ThemeColorPalette = {
|
|
1075
|
+
black: string | ColorTint;
|
|
1076
|
+
white: string | ColorTint;
|
|
1077
|
+
} & Record<ColorHueKey, Record<ColorTintKey, string | ColorTint>>;
|
|
1262
1078
|
/** @public */
|
|
1263
|
-
|
|
1264
|
-
avatar?: ThemeAvatar_v2
|
|
1079
|
+
interface ThemeConfig {
|
|
1080
|
+
avatar?: ThemeAvatar_v2;
|
|
1265
1081
|
button?: {
|
|
1266
1082
|
border: {
|
|
1267
|
-
width: number
|
|
1268
|
-
}
|
|
1269
|
-
focusRing: ThemeFocusRing
|
|
1270
|
-
textWeight: ThemeFontWeightKey
|
|
1271
|
-
}
|
|
1083
|
+
width: number;
|
|
1084
|
+
};
|
|
1085
|
+
focusRing: ThemeFocusRing;
|
|
1086
|
+
textWeight: ThemeFontWeightKey;
|
|
1087
|
+
};
|
|
1272
1088
|
card?: {
|
|
1273
1089
|
border: {
|
|
1274
|
-
width: number
|
|
1275
|
-
}
|
|
1276
|
-
focusRing: ThemeFocusRing
|
|
1090
|
+
width: number;
|
|
1091
|
+
};
|
|
1092
|
+
focusRing: ThemeFocusRing;
|
|
1277
1093
|
shadow: {
|
|
1278
|
-
outline: number
|
|
1279
|
-
}
|
|
1280
|
-
}
|
|
1281
|
-
color?: ThemeColorTokens
|
|
1282
|
-
container?: number[]
|
|
1283
|
-
font?: ThemeFonts
|
|
1284
|
-
input?: ThemeInput_v2
|
|
1285
|
-
layer?: ThemeLayer
|
|
1286
|
-
media?: number[]
|
|
1287
|
-
palette?: ThemeColorPalette
|
|
1288
|
-
radius?: number[]
|
|
1289
|
-
shadow?: Array<ThemeShadow | null
|
|
1290
|
-
space?: number[]
|
|
1094
|
+
outline: number;
|
|
1095
|
+
};
|
|
1096
|
+
};
|
|
1097
|
+
color?: ThemeColorTokens;
|
|
1098
|
+
container?: number[];
|
|
1099
|
+
font?: ThemeFonts;
|
|
1100
|
+
input?: ThemeInput_v2;
|
|
1101
|
+
layer?: ThemeLayer;
|
|
1102
|
+
media?: number[];
|
|
1103
|
+
palette?: ThemeColorPalette;
|
|
1104
|
+
radius?: number[];
|
|
1105
|
+
shadow?: Array<ThemeShadow | null>;
|
|
1106
|
+
space?: number[];
|
|
1291
1107
|
/** @internal */
|
|
1292
|
-
style?: ThemeStyles
|
|
1108
|
+
style?: ThemeStyles;
|
|
1293
1109
|
}
|
|
1294
|
-
|
|
1110
|
+
/** @internal */
|
|
1111
|
+
declare function buildTheme(config?: ThemeConfig): RootTheme;
|
|
1295
1112
|
/**
|
|
1296
|
-
* @
|
|
1113
|
+
* @internal
|
|
1297
1114
|
*/
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1115
|
+
interface RGB {
|
|
1116
|
+
r: number;
|
|
1117
|
+
g: number;
|
|
1118
|
+
b: number;
|
|
1119
|
+
a?: undefined;
|
|
1301
1120
|
}
|
|
1302
|
-
|
|
1303
1121
|
/**
|
|
1304
|
-
* @
|
|
1122
|
+
* @internal
|
|
1305
1123
|
*/
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
horizontalOffset?: number
|
|
1124
|
+
interface RGBA {
|
|
1125
|
+
r: number;
|
|
1126
|
+
g: number;
|
|
1127
|
+
b: number;
|
|
1128
|
+
a: number;
|
|
1312
1129
|
}
|
|
1313
|
-
|
|
1314
1130
|
/**
|
|
1315
|
-
* @
|
|
1131
|
+
* @internal
|
|
1316
1132
|
*/
|
|
1317
|
-
|
|
1318
|
-
|
|
1133
|
+
interface HSL {
|
|
1134
|
+
h: number;
|
|
1135
|
+
s: number;
|
|
1136
|
+
l: number;
|
|
1137
|
+
}
|
|
1319
1138
|
/**
|
|
1320
|
-
*
|
|
1139
|
+
* Apply the \`mix\` blend mode
|
|
1140
|
+
* @internal
|
|
1321
1141
|
*/
|
|
1322
|
-
|
|
1323
|
-
code: ThemeFont
|
|
1324
|
-
heading: ThemeFont
|
|
1325
|
-
label: ThemeFont
|
|
1326
|
-
text: ThemeFont
|
|
1327
|
-
}
|
|
1328
|
-
|
|
1142
|
+
declare function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB;
|
|
1329
1143
|
/**
|
|
1330
|
-
*
|
|
1144
|
+
* Apply the \`multiply\` blend mode
|
|
1145
|
+
* Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
|
|
1146
|
+
* @internal
|
|
1331
1147
|
*/
|
|
1332
|
-
|
|
1333
|
-
ascenderHeight: number
|
|
1334
|
-
descenderHeight: number
|
|
1335
|
-
fontSize: number
|
|
1336
|
-
iconSize: number
|
|
1337
|
-
letterSpacing: number
|
|
1338
|
-
lineHeight: number
|
|
1339
|
-
}
|
|
1340
|
-
|
|
1148
|
+
declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB;
|
|
1341
1149
|
/**
|
|
1342
|
-
*
|
|
1150
|
+
* Apply the \`screen\` blend mode
|
|
1151
|
+
* Source: https://www.w3.org/TR/compositing-1/#blendingscreen
|
|
1152
|
+
* @internal
|
|
1343
1153
|
*/
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
semibold: number
|
|
1348
|
-
bold: number
|
|
1349
|
-
}
|
|
1350
|
-
|
|
1154
|
+
declare function screen(b: RGB | RGBA, s: RGB | RGBA): RGB;
|
|
1155
|
+
/** @internal */
|
|
1156
|
+
declare function getContrastRatio(bg: string, fg: string): number;
|
|
1351
1157
|
/**
|
|
1352
|
-
* @
|
|
1158
|
+
* @internal
|
|
1353
1159
|
*/
|
|
1354
|
-
|
|
1355
|
-
|
|
1160
|
+
declare function hexToRgb(hex: string): RGB;
|
|
1356
1161
|
/**
|
|
1357
|
-
* @
|
|
1358
|
-
* @deprecated Use `ThemeInput_v2` instead
|
|
1162
|
+
* @internal
|
|
1359
1163
|
*/
|
|
1360
|
-
|
|
1361
|
-
checkbox: {
|
|
1362
|
-
size: number
|
|
1363
|
-
}
|
|
1364
|
-
radio: {
|
|
1365
|
-
size: number
|
|
1366
|
-
markSize: number
|
|
1367
|
-
}
|
|
1368
|
-
switch: {
|
|
1369
|
-
width: number
|
|
1370
|
-
height: number
|
|
1371
|
-
padding: number
|
|
1372
|
-
transitionDurationMs: number
|
|
1373
|
-
transitionTimingFunction: string
|
|
1374
|
-
}
|
|
1375
|
-
border: {
|
|
1376
|
-
width: number
|
|
1377
|
-
}
|
|
1378
|
-
}
|
|
1379
|
-
|
|
1164
|
+
declare function rgbaToRGBA(rgba: string): RGBA;
|
|
1380
1165
|
/**
|
|
1381
|
-
* @
|
|
1166
|
+
* @internal
|
|
1382
1167
|
*/
|
|
1383
|
-
|
|
1384
|
-
checkbox: {
|
|
1385
|
-
size: number
|
|
1386
|
-
focusRing: ThemeFocusRing
|
|
1387
|
-
}
|
|
1388
|
-
radio: {
|
|
1389
|
-
size: number
|
|
1390
|
-
markSize: number
|
|
1391
|
-
focusRing: ThemeFocusRing
|
|
1392
|
-
}
|
|
1393
|
-
switch: {
|
|
1394
|
-
width: number
|
|
1395
|
-
height: number
|
|
1396
|
-
padding: number
|
|
1397
|
-
transitionDurationMs: number
|
|
1398
|
-
transitionTimingFunction: string
|
|
1399
|
-
focusRing: ThemeFocusRing
|
|
1400
|
-
}
|
|
1401
|
-
border: {
|
|
1402
|
-
width: number
|
|
1403
|
-
}
|
|
1404
|
-
select: {
|
|
1405
|
-
focusRing: ThemeFocusRing
|
|
1406
|
-
}
|
|
1407
|
-
text: {
|
|
1408
|
-
focusRing: ThemeFocusRing
|
|
1409
|
-
}
|
|
1410
|
-
}
|
|
1411
|
-
|
|
1168
|
+
declare function rgbToHex(color: RGB | RGBA): string;
|
|
1412
1169
|
/**
|
|
1413
|
-
* @
|
|
1170
|
+
* @internal
|
|
1171
|
+
* @see https://css-tricks.com/converting-color-spaces-in-javascript/
|
|
1414
1172
|
*/
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
zOffset: number
|
|
1421
|
-
}
|
|
1422
|
-
tooltip: {
|
|
1423
|
-
zOffset: number
|
|
1424
|
-
}
|
|
1425
|
-
}
|
|
1426
|
-
|
|
1173
|
+
declare function rgbToHsl({
|
|
1174
|
+
r,
|
|
1175
|
+
g,
|
|
1176
|
+
b
|
|
1177
|
+
}: RGB): HSL;
|
|
1427
1178
|
/**
|
|
1428
|
-
* @
|
|
1179
|
+
* @internal
|
|
1429
1180
|
*/
|
|
1430
|
-
|
|
1431
|
-
umbra: ThemeBoxShadow
|
|
1432
|
-
penumbra: ThemeBoxShadow
|
|
1433
|
-
ambient: ThemeBoxShadow
|
|
1434
|
-
}
|
|
1435
|
-
|
|
1181
|
+
declare function hslToRgb(hsl: HSL): RGB;
|
|
1436
1182
|
/**
|
|
1437
1183
|
* @internal
|
|
1438
1184
|
*/
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
root?: CSSObject
|
|
1445
|
-
}
|
|
1446
|
-
}
|
|
1447
|
-
|
|
1448
|
-
/** @internal */
|
|
1449
|
-
export declare interface TokenBaseKeyNode {
|
|
1450
|
-
type: 'base'
|
|
1451
|
-
tone: ColorConfigCardTone
|
|
1452
|
-
key: ColorConfigCardKey | ColorConfigBlendKey
|
|
1453
|
-
}
|
|
1454
|
-
|
|
1455
|
-
/** @internal */
|
|
1456
|
-
export declare interface TokenBlendModeValueNode {
|
|
1457
|
-
type: 'blendMode'
|
|
1458
|
-
value?: ThemeColorBlendModeKey
|
|
1459
|
-
}
|
|
1460
|
-
|
|
1461
|
-
/** @internal */
|
|
1462
|
-
export declare interface TokenButtonKeyNode {
|
|
1463
|
-
type: 'button'
|
|
1464
|
-
tone: ColorConfigStateTone
|
|
1465
|
-
mode: ThemeColorButtonModeKey
|
|
1466
|
-
key: ColorConfigStateKey | ColorConfigBlendKey
|
|
1467
|
-
}
|
|
1468
|
-
|
|
1469
|
-
/** @internal */
|
|
1470
|
-
export declare interface TokenColorValueNode {
|
|
1471
|
-
type: 'color'
|
|
1472
|
-
key?: 'black' | 'white'
|
|
1473
|
-
hue?: ColorHueKey
|
|
1474
|
-
mix?: number
|
|
1475
|
-
opacity?: number
|
|
1476
|
-
tint?: ColorTintKey
|
|
1477
|
-
}
|
|
1478
|
-
|
|
1185
|
+
declare function parseColor(color: unknown): RGB | RGBA;
|
|
1186
|
+
/**
|
|
1187
|
+
* @internal
|
|
1188
|
+
*/
|
|
1189
|
+
declare function rgba(color: unknown, a: number): string;
|
|
1479
1190
|
/** @internal */
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
}
|
|
1484
|
-
|
|
1191
|
+
declare function getScopedTheme(themeProp: RootTheme | RootTheme_v2, scheme: ThemeColorSchemeKey, tone: ThemeColorCardToneKey): Theme;
|
|
1192
|
+
/** @public */
|
|
1193
|
+
declare function getTheme_v2(theme: Theme): Theme_v2;
|
|
1485
1194
|
/** @internal */
|
|
1486
|
-
|
|
1487
|
-
|
|
1195
|
+
declare function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme;
|
|
1488
1196
|
/** @internal */
|
|
1489
|
-
|
|
1490
|
-
| TokenColorValueNode
|
|
1491
|
-
| TokenHueValueNode
|
|
1492
|
-
| TokenBlendModeValueNode
|
|
1493
|
-
|
|
1197
|
+
declare function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2;
|
|
1494
1198
|
/** @internal */
|
|
1495
|
-
|
|
1496
|
-
|
|
1199
|
+
declare function v0_v2(v0: RootTheme): RootTheme_v2;
|
|
1497
1200
|
/** @internal */
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1201
|
+
declare function v2_v0(v2: RootTheme_v2): RootTheme;
|
|
1202
|
+
export { BaseTheme, COLOR_CONFIG_AVATAR_COLORS, COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_CARD_KEYS, COLOR_CONFIG_CARD_TONES, COLOR_CONFIG_INPUT_MODES, COLOR_CONFIG_INPUT_STATES, COLOR_CONFIG_STATES, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, CSSObject, ColorBlendModeTokenValue, ColorConfigAvatarColor, ColorConfigBlendKey, ColorConfigCardKey, ColorConfigCardTone, ColorConfigInputMode, ColorConfigInputState, ColorConfigOpacityValue, ColorConfigState, ColorConfigStateKey, ColorConfigStateTone, ColorConfigValue, HSL, PartialThemeColorBuilderOpts, RGB, RGBA, RootTheme, RootTheme_v2, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_CARD_TONES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_SCHEMES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES, Theme, ThemeAvatar, ThemeAvatar_v2, ThemeBoxShadow, ThemeColor, ThemeColorAvatarColorKey, ThemeColorAvatarHueTokens, ThemeColorAvatarHue_v2, ThemeColorAvatarTokens, ThemeColorAvatar_v2, ThemeColorBadgeTokens, ThemeColorBadgeToneTokens, ThemeColorBadgeTone_v2, ThemeColorBadge_v2, ThemeColorBase, ThemeColorBaseTokens, ThemeColorBlendModeKey, ThemeColorBuilderOpts, ThemeColorButton, ThemeColorButtonModeKey, ThemeColorButtonMode_v2, ThemeColorButtonState, ThemeColorButtonStates, ThemeColorButtonTokens, ThemeColorButtonTone_v2, ThemeColorButtonTones, ThemeColorButton_v2, ThemeColorCard, ThemeColorCardState, ThemeColorCardToneKey, ThemeColorCard_v2, ThemeColorGenericState, ThemeColorInput, ThemeColorInputModeKey, ThemeColorInputMode_v2, ThemeColorInputState, ThemeColorInputStateKey, ThemeColorInputStateTokens, ThemeColorInputState_v2, ThemeColorInputStates, ThemeColorInputTokens, ThemeColorInput_v2, ThemeColorKBD, ThemeColorMuted, ThemeColorMutedTone, ThemeColorName, ThemeColorPalette, ThemeColorScheme, ThemeColorSchemeKey, ThemeColorScheme_v2, ThemeColorSchemes, ThemeColorSchemes_v2, ThemeColorSelectable, ThemeColorSelectableState, ThemeColorSelectableStates, ThemeColorSelectableTone_v2, ThemeColorSelectable_v2, ThemeColorShadow, ThemeColorSolid, ThemeColorSolidTone, ThemeColorSpot, ThemeColorSpotKey, ThemeColorStateKey, ThemeColorStateTokens, ThemeColorStateToneKey, ThemeColorState_v2, ThemeColorStatesTokens, ThemeColorSyntax, ThemeColorTokenValue, ThemeColorTokens, ThemeColorToneKey, ThemeConfig, ThemeFocusRing, ThemeFont, ThemeFontKey, ThemeFontSize, ThemeFontWeight, ThemeFontWeightKey, ThemeFonts, ThemeInput, ThemeInput_v2, ThemeLayer, ThemeShadow, ThemeStyles, Theme_v2, TokenBaseKeyNode, TokenBlendModeValueNode, TokenButtonKeyNode, TokenColorValueNode, TokenHueValueNode, TokenKeyNode, TokenValueNode, buildTheme, createColorTheme, getContrastRatio, getScopedTheme, getTheme_v2, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueKey, isColorOpacityValue, isColorTintKey, isColorTokenValue, isColorValue, is_v0, is_v2, mix, multiply, parseColor, parseTokenKey, parseTokenValue, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen, v0_v2, v2_v0 };
|
|
1203
|
+
//# sourceMappingURL=theme.d.ts.map
|