@sanity/ui 3.1.11 → 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/theme.d.ts CHANGED
@@ -1,1500 +1,1203 @@
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
-
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
- 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
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
- export declare const COLOR_CONFIG_INPUT_STATES: readonly [
128
- '*',
129
- 'enabled',
130
- 'hovered',
131
- 'readOnly',
132
- 'disabled',
133
- ]
134
-
24
+ declare const THEME_COLOR_SCHEMES: readonly ["light", "dark"];
135
25
  /** @public */
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
-
26
+ declare const THEME_COLOR_BLEND_MODES: readonly ["multiply", "screen"];
153
27
  /** @public */
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
-
28
+ declare const THEME_COLOR_CARD_TONES: readonly ["transparent", "default", "neutral", "primary", "suggest", "positive", "caution", "critical"];
165
29
  /** @public */
166
- export declare const COLOR_CONFIG_STATES: readonly [
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
- export declare type ColorBlendModeTokenValue = [ThemeColorBlendModeKey, ThemeColorBlendModeKey]
177
-
32
+ declare const THEME_COLOR_STATES: readonly ["enabled", "hovered", "pressed", "selected", "disabled"];
178
33
  /** @public */
179
- export declare type ColorConfigAvatarColor = (typeof COLOR_CONFIG_AVATAR_COLORS)[number]
180
-
34
+ declare const THEME_COLOR_BUTTON_MODES: readonly ["default", "ghost", "bleed"];
181
35
  /** @public */
182
- export declare type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
183
-
36
+ declare const THEME_COLOR_INPUT_MODES: readonly ["default", "invalid"];
184
37
  /** @public */
185
- export declare type ColorConfigCardKey = (typeof COLOR_CONFIG_CARD_KEYS)[number]
186
-
38
+ declare const THEME_COLOR_INPUT_STATES: readonly ["enabled", "hovered", "readOnly", "disabled"];
187
39
  /** @public */
188
- export declare type ColorConfigCardTone = (typeof COLOR_CONFIG_CARD_TONES)[number]
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
- export declare type ColorConfigInputMode = (typeof COLOR_CONFIG_INPUT_MODES)[number]
192
-
46
+ type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number];
193
47
  /** @public */
194
- export declare type ColorConfigInputState = (typeof COLOR_CONFIG_INPUT_STATES)[number]
195
-
48
+ type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number];
196
49
  /** @public */
197
- export declare type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
198
-
50
+ type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number];
199
51
  /** @public */
200
- export declare type ColorConfigState = (typeof COLOR_CONFIG_STATES)[number]
201
-
52
+ type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number];
202
53
  /** @public */
203
- export declare type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
204
-
54
+ type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number];
205
55
  /** @public */
206
- export declare type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
207
-
56
+ type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number];
208
57
  /** @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
-
58
+ type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number];
248
59
  /** @public */
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
-
60
+ type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number];
291
61
  /** @internal */
292
- export declare function isColorConfigStateKey(str: string): str is ColorConfigStateKey
293
-
62
+ declare function isColorBlendModeValue(str: string): str is ThemeColorBlendModeKey;
294
63
  /** @internal */
295
- export declare function isColorConfigStateTone(str: string): str is ColorConfigStateTone
296
-
64
+ declare function isColorHueKey(str: string): str is ColorHueKey;
297
65
  /** @internal */
298
- export declare function isColorHueKey(str: string): str is ColorHueKey
299
-
66
+ declare function isColorTintKey(str: string): str is ColorTintKey;
300
67
  /** @internal */
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
-
68
+ declare function isColorButtonMode(str: string): str is ThemeColorButtonModeKey;
312
69
  /**
313
- * Apply the \`mix\` blend mode
314
- * @internal
70
+ * @public
315
71
  */
316
- export declare function mix(b: RGB | RGBA, s: RGB | RGBA, weight: number): RGB
317
-
72
+ interface ThemeColorAvatarHue_v2 {
73
+ _blend?: ThemeColorBlendModeKey;
74
+ bg: string;
75
+ fg: string;
76
+ }
318
77
  /**
319
- * Apply the \`multiply\` blend mode
320
- * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
321
- * @internal
78
+ * @public
322
79
  */
323
- export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
324
-
80
+ type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>;
325
81
  /**
326
- * @internal
82
+ * @public
327
83
  */
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
-
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
- export declare type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
341
-
93
+ type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>;
342
94
  /**
343
- * @internal
95
+ * @public
344
96
  */
345
- export declare interface RGB {
346
- r: number
347
- g: number
348
- b: number
349
- a?: undefined
97
+ interface ThemeColorKBD {
98
+ bg: string;
99
+ fg: string;
100
+ border: string;
350
101
  }
351
-
352
102
  /**
353
- * @internal
103
+ * @public
354
104
  */
355
- export declare interface RGBA {
356
- r: number
357
- g: number
358
- b: number
359
- a: number
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
- * @internal
369
- */
370
- export declare function rgbaToRGBA(rgba: string): RGBA
371
-
372
- /**
373
- * @internal
141
+ * @public
374
142
  */
375
- export declare function rgbToHex(color: RGB | RGBA): string
376
-
143
+ type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>;
377
144
  /**
378
- * @internal
379
- * @see https://css-tricks.com/converting-color-spaces-in-javascript/
145
+ * @public
380
146
  */
381
- export declare function rgbToHsl({r, g, b}: RGB): HSL
382
-
147
+ type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>;
383
148
  /**
384
149
  * @public
385
150
  */
386
- export declare type RootTheme = BaseTheme
387
-
151
+ type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>;
388
152
  /**
389
153
  * @public
390
154
  */
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
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
- 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
-
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
- 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
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
- export declare interface ThemeAvatar {
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
- 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
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
- export declare type ThemeBoxShadow = [number, number, number, number]
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
- 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
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
- export declare type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>
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
- 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
-
251
+ type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>;
597
252
  /**
598
- * @public
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
- export declare type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
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
- 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
625
- }
626
-
261
+ type ThemeFontKey = 'code' | 'heading' | 'label' | 'text';
627
262
  /**
628
263
  * @public
629
- * @deprecated Use `ThemeColorCard_v2` instead.
630
264
  */
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
- }
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
- 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
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
- export declare interface ThemeColorButton {
724
- default: ThemeColorButtonTones
725
- ghost: ThemeColorButtonTones
726
- bleed: ThemeColorButtonTones
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
- export declare type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>
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
- 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
-
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
- export declare type ThemeColorButtonState = ThemeColorGenericState
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
- export declare interface ThemeColorButtonStates {
756
- enabled: ThemeColorGenericState
757
- hovered: ThemeColorGenericState
758
- pressed: ThemeColorGenericState
759
- selected: ThemeColorGenericState
760
- disabled: ThemeColorGenericState
761
- }
762
-
763
- /** @public */
764
- export declare interface ThemeColorButtonTokens
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
- export declare type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
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
- export declare interface ThemeColorButtonTones {
780
- default: ThemeColorButtonStates
781
- primary: ThemeColorButtonStates
782
- positive: ThemeColorButtonStates
783
- caution: ThemeColorButtonStates
784
- critical: ThemeColorButtonStates
357
+ interface ThemeShadow {
358
+ umbra: ThemeBoxShadow;
359
+ penumbra: ThemeBoxShadow;
360
+ ambient: ThemeBoxShadow;
785
361
  }
786
-
787
362
  /**
788
- * @public
789
- * @deprecated Use `ThemeColorSelectable_v2` instead.
363
+ * @internal
790
364
  */
791
- export declare interface ThemeColorCard {
792
- enabled: ThemeColorGenericState
793
- hovered: ThemeColorGenericState
794
- pressed: ThemeColorGenericState
795
- selected: ThemeColorGenericState
796
- disabled: ThemeColorGenericState
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
- 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
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
- 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 {
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 `ThemeColorInput_v2` instead.
418
+ * @deprecated Use `ThemeColorCardToneKey` instead.
861
419
  */
862
- export declare interface ThemeColorInput {
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
- export declare type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>
871
-
425
+ type ThemeColorToneKey = ThemeColorName;
872
426
  /**
873
427
  * @public
428
+ * @deprecated Use `ThemeColorCard_v2` instead.
874
429
  */
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
-
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 `ThemeColorInputState_v2` instead.
449
+ * @deprecated Use `ThemeColorState_v2` instead.
886
450
  */
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
-
451
+ type ThemeColorButtonState = ThemeColorGenericState;
896
452
  /**
897
453
  * @public
454
+ * @deprecated Use `ThemeColorButtonStates_v2` instead.
898
455
  */
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
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 `ThemeColorInputMode_v2` instead.
466
+ * @deprecated Use `ThemeColorButtonTones_v2` instead.
916
467
  */
917
- export declare interface ThemeColorInputStates {
918
- enabled: ThemeColorInputState
919
- disabled: ThemeColorInputState
920
- hovered: ThemeColorInputState
921
- readOnly: ThemeColorInputState
468
+ interface ThemeColorButtonTones {
469
+ default: ThemeColorButtonStates;
470
+ primary: ThemeColorButtonStates;
471
+ positive: ThemeColorButtonStates;
472
+ caution: ThemeColorButtonStates;
473
+ critical: ThemeColorButtonStates;
922
474
  }
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
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
- /** @public */
938
- export declare interface ThemeColorInputTokens
939
- extends Partial<Record<ColorConfigInputState, ThemeColorInputStateTokens>> {
940
- _hue?: ColorHueKey
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
- export declare interface ThemeColorKBD {
947
- bg: string
948
- fg: string
949
- border: string
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 `ThemeColorSelectable_v2` instead.
514
+ * @deprecated Use `ThemeColorInputMode_v2` instead.
955
515
  */
956
- export declare interface ThemeColorMuted {
957
- default: ThemeColorMutedTone
958
- transparent: ThemeColorMutedTone
959
- primary: ThemeColorMutedTone
960
- positive: ThemeColorMutedTone
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 `ThemeColorSelectableTone_v2` instead.
524
+ * @deprecated Use `ThemeColorInput_v2` instead.
968
525
  */
969
- export declare interface ThemeColorMutedTone {
970
- enabled: ThemeColorGenericState
971
- disabled: ThemeColorGenericState
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 `ThemeColorCardToneKey` instead.
532
+ * @deprecated Use `ThemeColorSelectableTone_v2` instead.
980
533
  */
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
-
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 `ThemeColorScheme_v2` instead.
543
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
998
544
  */
999
- export declare type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
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
- export declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
1005
-
557
+ type ThemeColorSelectableState = ThemeColorGenericState;
1006
558
  /**
1007
559
  * @public
560
+ * @deprecated Use `ThemeColorSelectableStates_v2` instead.
1008
561
  */
1009
- export declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
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 `ThemeColorSchemes_v2` instead.
571
+ * @deprecated Use `ThemeColorSelectable_v2` instead.
1014
572
  */
1015
- export declare type ThemeColorSchemes = Record<ThemeColorSchemeKey, ThemeColorScheme>
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
- export declare type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>
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
- export declare interface ThemeColorSelectable {
1027
- default: ThemeColorSelectableStates
1028
- primary: ThemeColorSelectableStates
1029
- positive: ThemeColorSelectableStates
1030
- caution: ThemeColorSelectableStates
1031
- critical: ThemeColorSelectableStates
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
- export declare type ThemeColorSelectable_v2 = Record<
1038
- ThemeColorStateToneKey,
1039
- ThemeColorSelectableTone_v2
1040
- >
1041
-
607
+ type ThemeColorSpotKey = ThemeColorAvatarColorKey;
1042
608
  /**
1043
609
  * @public
1044
- * @deprecated Use `ThemeColorState_v2` instead.
610
+ * @deprecated Use `ThemeColorAvatar_v2` instead
1045
611
  */
1046
- export declare type ThemeColorSelectableState = ThemeColorGenericState
1047
-
612
+ type ThemeColorSpot = Record<ThemeColorSpotKey, string>;
1048
613
  /**
1049
614
  * @public
1050
- * @deprecated Use `ThemeColorSelectableStates_v2` instead.
615
+ * @deprecated Use `ThemeColor_v2` instead.
1051
616
  */
1052
- export declare interface ThemeColorSelectableStates {
1053
- enabled: ThemeColorSelectableState
1054
- hovered: ThemeColorSelectableState
1055
- pressed: ThemeColorSelectableState
1056
- selected: ThemeColorSelectableState
1057
- disabled: ThemeColorSelectableState
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
- 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
1071
- }
1072
-
633
+ type ThemeColorScheme = Record<ThemeColorName, ThemeColor>;
1073
634
  /**
1074
635
  * @public
1075
- * @deprecated Use `ThemeColorSelectable_v2` instead.
636
+ * @deprecated Use `ThemeColorSchemes_v2` instead.
1076
637
  */
1077
- export declare interface ThemeColorSolid {
1078
- default: ThemeColorSolidTone
1079
- transparent: ThemeColorSolidTone
1080
- primary: ThemeColorSolidTone
1081
- positive: ThemeColorSolidTone
1082
- caution: ThemeColorSolidTone
1083
- critical: ThemeColorSolidTone
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
- export declare interface ThemeColorSolidTone {
1091
- enabled: ThemeColorGenericState
1092
- disabled: ThemeColorGenericState
1093
- hovered: ThemeColorGenericState
1094
- pressed: ThemeColorGenericState
1095
- selected: ThemeColorGenericState
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
- export declare type ThemeColorSpot = Record<ThemeColorSpotKey, string>
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
- export declare type ThemeColorSpotKey = ThemeColorAvatarColorKey
1109
-
766
+ type RootTheme = BaseTheme;
1110
767
  /**
1111
768
  * @public
1112
769
  */
1113
- export declare interface ThemeColorState_v2 {
1114
- /** @internal */
1115
- _blend?: ThemeColorBlendModeKey
1116
- accent: {
1117
- fg: string
1118
- }
770
+ type Theme_v2 = Omit<RootTheme_v2, 'color'> & {
771
+ color: ThemeColorCard_v2;
1119
772
  /**
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
- }
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
- export declare type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
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
- export declare type ThemeColorStatesTokens = Partial<
1154
- Record<ColorConfigState, ThemeColorStateTokens>
1155
- >
1156
-
966
+ type ThemeColorBadgeTokens = Partial<Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>>;
1157
967
  /** @public */
1158
- export declare interface ThemeColorStateTokens {
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
- 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
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
- 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>>
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
- export declare type ThemeColorTokenValue = [ColorConfigValue, ColorConfigValue]
1255
-
1256
- /**
1257
- * @public
1258
- * @deprecated Use `ThemeColorCardToneKey` instead.
1259
- */
1260
- export declare type ThemeColorToneKey = ThemeColorName
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
- export declare interface ThemeConfig {
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
- * @public
1113
+ * @internal
1297
1114
  */
1298
- export declare interface ThemeFocusRing {
1299
- offset: number
1300
- width: number
1115
+ interface RGB {
1116
+ r: number;
1117
+ g: number;
1118
+ b: number;
1119
+ a?: undefined;
1301
1120
  }
1302
-
1303
1121
  /**
1304
- * @public
1122
+ * @internal
1305
1123
  */
1306
- export declare interface ThemeFont {
1307
- family: string
1308
- weights: ThemeFontWeight
1309
- sizes: ThemeFontSize[]
1310
- /** @deprecated No longer supported. */
1311
- horizontalOffset?: number
1124
+ interface RGBA {
1125
+ r: number;
1126
+ g: number;
1127
+ b: number;
1128
+ a: number;
1312
1129
  }
1313
-
1314
1130
  /**
1315
- * @public
1131
+ * @internal
1316
1132
  */
1317
- export declare type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
1318
-
1133
+ interface HSL {
1134
+ h: number;
1135
+ s: number;
1136
+ l: number;
1137
+ }
1319
1138
  /**
1320
- * @public
1139
+ * Apply the \`mix\` blend mode
1140
+ * @internal
1321
1141
  */
1322
- export declare interface ThemeFonts {
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
- * @public
1144
+ * Apply the \`multiply\` blend mode
1145
+ * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
1146
+ * @internal
1331
1147
  */
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
-
1148
+ declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB;
1341
1149
  /**
1342
- * @public
1150
+ * Apply the \`screen\` blend mode
1151
+ * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
1152
+ * @internal
1343
1153
  */
1344
- export declare interface ThemeFontWeight {
1345
- regular: number
1346
- medium: number
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
- * @public
1158
+ * @internal
1353
1159
  */
1354
- export declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
1355
-
1160
+ declare function hexToRgb(hex: string): RGB;
1356
1161
  /**
1357
- * @public
1358
- * @deprecated Use `ThemeInput_v2` instead
1162
+ * @internal
1359
1163
  */
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
-
1164
+ declare function rgbaToRGBA(rgba: string): RGBA;
1380
1165
  /**
1381
- * @public
1166
+ * @internal
1382
1167
  */
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
-
1168
+ declare function rgbToHex(color: RGB | RGBA): string;
1412
1169
  /**
1413
- * @public
1170
+ * @internal
1171
+ * @see https://css-tricks.com/converting-color-spaces-in-javascript/
1414
1172
  */
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
-
1173
+ declare function rgbToHsl({
1174
+ r,
1175
+ g,
1176
+ b
1177
+ }: RGB): HSL;
1427
1178
  /**
1428
- * @public
1179
+ * @internal
1429
1180
  */
1430
- export declare interface ThemeShadow {
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
- export declare interface ThemeStyles {
1440
- button?: {
1441
- root?: CSSObject
1442
- }
1443
- card?: {
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
- export declare interface TokenHueValueNode {
1481
- type: 'hue'
1482
- value?: ColorHueKey
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
- export declare type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
1487
-
1195
+ declare function is_v0(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme;
1488
1196
  /** @internal */
1489
- export declare type TokenValueNode =
1490
- | TokenColorValueNode
1491
- | TokenHueValueNode
1492
- | TokenBlendModeValueNode
1493
-
1197
+ declare function is_v2(themeProp: RootTheme | RootTheme_v2): themeProp is RootTheme_v2;
1494
1198
  /** @internal */
1495
- export declare function v0_v2(v0: RootTheme): RootTheme_v2
1496
-
1199
+ declare function v0_v2(v0: RootTheme): RootTheme_v2;
1497
1200
  /** @internal */
1498
- export declare function v2_v0(v2: RootTheme_v2): RootTheme
1499
-
1500
- export {}
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