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