@sanity/ui 3.0.0-static.3 → 3.0.0-static.5

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.
Files changed (68) hide show
  1. package/dist/_chunks-cjs/_visual-editing.js +98 -64
  2. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  3. package/dist/_chunks-cjs/buildCommand.js +1 -1
  4. package/dist/_chunks-cjs/buildCommand.js.map +1 -1
  5. package/dist/_chunks-es/_visual-editing.mjs +99 -65
  6. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  7. package/dist/_visual-editing.d.mts +4 -1
  8. package/dist/_visual-editing.d.ts +4 -1
  9. package/dist/cli.js +1 -1
  10. package/dist/css.d.mts +145 -893
  11. package/dist/css.d.ts +145 -893
  12. package/dist/css.js +182 -191
  13. package/dist/css.js.map +1 -1
  14. package/dist/css.mjs +182 -191
  15. package/dist/css.mjs.map +1 -1
  16. package/dist/index.d.mts +4 -1
  17. package/dist/index.d.ts +4 -1
  18. package/dist/index.js +12 -14
  19. package/dist/index.js.map +1 -1
  20. package/dist/index.mjs +12 -14
  21. package/dist/index.mjs.map +1 -1
  22. package/dist/sanity-palette.css +1 -9
  23. package/dist/sanity-theme.css +1 -1
  24. package/dist/system.css +114 -109
  25. package/dist/theme.d.mts +1 -43
  26. package/dist/theme.d.ts +1 -43
  27. package/dist/theme.js +291 -102
  28. package/dist/theme.js.map +1 -1
  29. package/dist/theme.mjs +272 -85
  30. package/dist/theme.mjs.map +1 -1
  31. package/package.json +1 -1
  32. package/src/cli/buildCommand.ts +2 -2
  33. package/src/css/_comp.ts +1 -0
  34. package/src/css/aspects/flex/flexJustify.style.ts +3 -3
  35. package/src/css/aspects/grid/types.ts +2 -2
  36. package/src/css/aspects/textOverflow/textOverflow.ts +2 -2
  37. package/src/css/compile/compilePalette.ts +8 -41
  38. package/src/css/compile/compileTheme_v3.ts +0 -18
  39. package/src/css/index.ts +2 -2
  40. package/src/css/primitives/_selectable/_contants.ts +1 -1
  41. package/src/css/primitives/box/box.ts +3 -0
  42. package/src/css/primitives/button/_constants.ts +1 -1
  43. package/src/css/primitives/button/button.style.ts +12 -13
  44. package/src/css/primitives/card/_constants.ts +2 -2
  45. package/src/css/primitives/card/card.ts +1 -1
  46. package/src/css/primitives/stack/index.ts +1 -0
  47. package/src/css/primitives/stack/stack.style.ts +9 -0
  48. package/src/css/primitives/stack/stack.ts +6 -0
  49. package/src/css/system.style.ts +2 -0
  50. package/src/theme/defaults/config.ts +2 -2
  51. package/src/theme/defaults/fonts.ts +4 -4
  52. package/src/theme/palette/constants.ts +1 -3
  53. package/src/theme/palette/types.ts +0 -12
  54. package/src/theme/v3/buildTheme_v3.ts +1 -2
  55. package/src/theme/v3/defaults.ts +12 -31
  56. package/src/theme/v3/types.ts +0 -3
  57. package/src/ui/StyleTags.tsx +1 -1
  58. package/src/ui/primitives/box/box.tsx +6 -0
  59. package/src/ui/primitives/button/button.tsx +12 -11
  60. package/src/ui/primitives/card/card.tsx +5 -2
  61. package/src/ui/primitives/heading/heading.tsx +1 -1
  62. package/src/ui/primitives/select/select.tsx +3 -3
  63. package/src/ui/primitives/stack/stack.tsx +10 -5
  64. package/src/ui/primitives/text/text.tsx +1 -1
  65. package/dist/_chunks-cjs/v3_v2.js +0 -251
  66. package/dist/_chunks-cjs/v3_v2.js.map +0 -1
  67. package/dist/_chunks-es/v3_v2.mjs +0 -252
  68. package/dist/_chunks-es/v3_v2.mjs.map +0 -1
package/dist/css.d.mts CHANGED
@@ -1,5 +1,4 @@
1
1
  import {AvatarSize} from '@sanity/ui/theme'
2
- import {ColorHueKey} from '@sanity/color'
3
2
  import {ContainerWidth} from '@sanity/ui/theme'
4
3
  import {default as CSS_2} from 'csstype'
5
4
  import {FontCodeSize} from '@sanity/ui/theme'
@@ -7,20 +6,18 @@ import {FontHeadingSize} from '@sanity/ui/theme'
7
6
  import {FontLabelSize} from '@sanity/ui/theme'
8
7
  import {FontTextSize} from '@sanity/ui/theme'
9
8
  import {FontWeight} from '@sanity/ui/theme'
10
- import {Hue as Hue_2} from '@sanity/ui/theme'
11
- import {PaletteConfig as PaletteConfig_2} from '@sanity/ui/theme'
9
+ import {Hue} from '@sanity/ui/theme'
12
10
  import {Radius} from '@sanity/ui/theme'
13
11
  import {RootTheme} from '@sanity/ui/theme'
14
12
  import {Shadow} from '@sanity/ui/theme'
15
13
  import {Space} from '@sanity/ui/theme'
16
- import type {StyledObject} from 'styled-components'
17
- import {ThemeBoxShadow as ThemeBoxShadow_2} from '@sanity/ui/theme'
18
- import {ThemeColorAvatarColorKey as ThemeColorAvatarColorKey_2} from '@sanity/ui/theme'
19
- import {ThemeColorButtonModeKey as ThemeColorButtonModeKey_2} from '@sanity/ui/theme'
20
- import {ThemeColorCardToneKey as ThemeColorCardToneKey_2} from '@sanity/ui/theme'
21
- import {ThemeColorSchemeKey as ThemeColorSchemeKey_2} from '@sanity/ui/theme'
22
- import {ThemeColorStateToneKey as ThemeColorStateToneKey_2} from '@sanity/ui/theme'
23
- import {Tint as Tint_2} from '@sanity/ui/theme'
14
+ import {ThemeBoxShadow} from '@sanity/ui/theme'
15
+ import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
16
+ import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
17
+ import {ThemeColorCardToneKey} from '@sanity/ui/theme'
18
+ import {ThemeColorSchemeKey} from '@sanity/ui/theme'
19
+ import {ThemeColorStateToneKey} from '@sanity/ui/theme'
20
+ import {Tint} from '@sanity/ui/theme'
24
21
 
25
22
  export declare function animatedSpinnerIcon(): string | undefined
26
23
 
@@ -50,7 +47,7 @@ export declare type AvatarScopedVarName =
50
47
  export declare function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined
51
48
 
52
49
  export declare interface AvatarStyleProps {
53
- color: ThemeColorAvatarColorKey_2
50
+ color: ThemeColorAvatarColorKey
54
51
  size: ResponsiveProp<AvatarSize>
55
52
  }
56
53
 
@@ -59,7 +56,7 @@ export declare function badge(props: BadgeStyleProps): string | undefined
59
56
 
60
57
  /** @public */
61
58
  export declare interface BadgeStyleProps extends RadiusStyleProps {
62
- tone: ThemeColorStateToneKey_2
59
+ tone: ThemeColorStateToneKey
63
60
  }
64
61
 
65
62
  /** @public */
@@ -127,91 +124,21 @@ export declare interface ButtonStyleProps
127
124
  FlexItemStyleProps,
128
125
  RadiusStyleProps,
129
126
  WidthStyleProps {
130
- mode?: ThemeColorButtonModeKey_2
131
- tone?: ThemeColorStateToneKey_2
127
+ mode?: ThemeColorButtonModeKey
128
+ tone?: ThemeColorStateToneKey
132
129
  }
133
130
 
134
131
  export declare function card(props: CardStyleProps): string | undefined
135
132
 
136
- /** @public */
137
- declare interface CardColorTokens {
138
- _hue: Hue
139
- avatar: Record<
140
- Hue,
141
- {
142
- _hue: Hue
143
- bg: [ColorToken, ColorToken]
144
- fg: [ColorToken, ColorToken]
145
- }
146
- >
147
- backdrop: [ColorToken, ColorToken]
148
- focusRing: [ColorToken, ColorToken]
149
- link: {
150
- fg: [ColorToken, ColorToken]
151
- }
152
- shadow: {
153
- outline: [ColorToken, ColorToken]
154
- umbra: [ColorToken, ColorToken]
155
- penumbra: [ColorToken, ColorToken]
156
- ambient: [ColorToken, ColorToken]
157
- }
158
- skeleton: {
159
- from: [ColorToken, ColorToken]
160
- to: [ColorToken, ColorToken]
161
- }
162
- token: {
163
- atrule: [ColorToken, ColorToken]
164
- attrName: [ColorToken, ColorToken]
165
- attrValue: [ColorToken, ColorToken]
166
- attribute: [ColorToken, ColorToken]
167
- boolean: [ColorToken, ColorToken]
168
- builtin: [ColorToken, ColorToken]
169
- cdata: [ColorToken, ColorToken]
170
- char: [ColorToken, ColorToken]
171
- class: [ColorToken, ColorToken]
172
- className: [ColorToken, ColorToken]
173
- comment: [ColorToken, ColorToken]
174
- constant: [ColorToken, ColorToken]
175
- deleted: [ColorToken, ColorToken]
176
- doctype: [ColorToken, ColorToken]
177
- entity: [ColorToken, ColorToken]
178
- function: [ColorToken, ColorToken]
179
- hexcode: [ColorToken, ColorToken]
180
- id: [ColorToken, ColorToken]
181
- important: [ColorToken, ColorToken]
182
- inserted: [ColorToken, ColorToken]
183
- keyword: [ColorToken, ColorToken]
184
- number: [ColorToken, ColorToken]
185
- operator: [ColorToken, ColorToken]
186
- prolog: [ColorToken, ColorToken]
187
- property: [ColorToken, ColorToken]
188
- pseudoClass: [ColorToken, ColorToken]
189
- pseudoElement: [ColorToken, ColorToken]
190
- punctuation: [ColorToken, ColorToken]
191
- regex: [ColorToken, ColorToken]
192
- selector: [ColorToken, ColorToken]
193
- string: [ColorToken, ColorToken]
194
- symbol: [ColorToken, ColorToken]
195
- tag: [ColorToken, ColorToken]
196
- unit: [ColorToken, ColorToken]
197
- url: [ColorToken, ColorToken]
198
- variable: [ColorToken, ColorToken]
199
- }
200
- variant: {
201
- solid: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
202
- tinted: Record<'*' | ThemeColorStateToneKey, ElementColorTokens>
203
- }
204
- }
205
-
206
133
  /** @public */
207
134
  export declare type CardScopedVarName =
208
135
  | `--color-accent-fg`
209
136
  | `--color-avatar-bg`
210
137
  | `--color-avatar-fg`
211
- | `--color-avatar-${ThemeColorAvatarColorKey_2}-bg`
212
- | `--color-avatar-${ThemeColorAvatarColorKey_2}-fg`
138
+ | `--color-avatar-${ThemeColorAvatarColorKey}-bg`
139
+ | `--color-avatar-${ThemeColorAvatarColorKey}-fg`
213
140
  | `--color-backdrop`
214
- | `--color-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
141
+ | `--color-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
215
142
  | `--color-bg`
216
143
  | `--color-border`
217
144
  | `--color-code-bg`
@@ -292,8 +219,8 @@ export declare type CardScopedVarName =
292
219
  export declare interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
293
220
  checkered?: boolean
294
221
  selectable?: boolean
295
- scheme?: ThemeColorSchemeKey_2
296
- tone?: ThemeColorCardToneKey_2 | 'inherit'
222
+ scheme?: ThemeColorSchemeKey
223
+ tone?: ThemeColorCardToneKey | 'inherit'
297
224
  }
298
225
 
299
226
  export declare function checkbox(): string | undefined
@@ -330,7 +257,7 @@ export declare interface ColorAvatarColorVars {
330
257
  }
331
258
 
332
259
  /** @public */
333
- export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVars>
260
+ export declare type ColorAvatarVars = Record<ThemeColorAvatarColorKey, ColorAvatarColorVars>
334
261
 
335
262
  /** @public */
336
263
  export declare interface ColorBadgeToneVars {
@@ -341,120 +268,120 @@ export declare interface ColorBadgeToneVars {
341
268
  }
342
269
 
343
270
  /** @public */
344
- export declare type ColorBadgeVars = Record<ThemeColorStateToneKey_2, ColorBadgeToneVars>
271
+ export declare type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
345
272
 
346
273
  export declare type ColorCardToneScopedVarName =
347
- | `--color-${ThemeColorCardToneKey_2}-accent-fg`
348
- | `--color-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-bg`
349
- | `--color-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-fg`
350
- | `--color-${ThemeColorCardToneKey_2}-backdrop`
351
- | `--color-${ThemeColorCardToneKey_2}-focus-ring`
352
- | `--color-${ThemeColorCardToneKey_2}-link-fg`
353
- | `--color-${ThemeColorCardToneKey_2}-muted-bg`
354
- | `--color-${ThemeColorCardToneKey_2}-muted-fg`
355
- | `--color-${ThemeColorCardToneKey_2}-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
356
- | `--color-${ThemeColorCardToneKey_2}-shadow-outline`
357
- | `--color-${ThemeColorCardToneKey_2}-shadow-umbra`
358
- | `--color-${ThemeColorCardToneKey_2}-shadow-penumbra`
359
- | `--color-${ThemeColorCardToneKey_2}-shadow-ambient`
360
- | `--color-${ThemeColorCardToneKey_2}-skeleton-from`
361
- | `--color-${ThemeColorCardToneKey_2}-skeleton-to`
362
- | `--color-${ThemeColorCardToneKey_2}-token-atrule`
363
- | `--color-${ThemeColorCardToneKey_2}-token-attr-name`
364
- | `--color-${ThemeColorCardToneKey_2}-token-attr-value`
365
- | `--color-${ThemeColorCardToneKey_2}-token-attribute`
366
- | `--color-${ThemeColorCardToneKey_2}-token-boolean`
367
- | `--color-${ThemeColorCardToneKey_2}-token-builtin`
368
- | `--color-${ThemeColorCardToneKey_2}-token-cdata`
369
- | `--color-${ThemeColorCardToneKey_2}-token-char`
370
- | `--color-${ThemeColorCardToneKey_2}-token-class`
371
- | `--color-${ThemeColorCardToneKey_2}-token-class-name`
372
- | `--color-${ThemeColorCardToneKey_2}-token-comment`
373
- | `--color-${ThemeColorCardToneKey_2}-token-constant`
374
- | `--color-${ThemeColorCardToneKey_2}-token-deleted`
375
- | `--color-${ThemeColorCardToneKey_2}-token-doctype`
376
- | `--color-${ThemeColorCardToneKey_2}-token-entity`
377
- | `--color-${ThemeColorCardToneKey_2}-token-function`
378
- | `--color-${ThemeColorCardToneKey_2}-token-hexcode`
379
- | `--color-${ThemeColorCardToneKey_2}-token-id`
380
- | `--color-${ThemeColorCardToneKey_2}-token-important`
381
- | `--color-${ThemeColorCardToneKey_2}-token-inserted`
382
- | `--color-${ThemeColorCardToneKey_2}-token-keyword`
383
- | `--color-${ThemeColorCardToneKey_2}-token-number`
384
- | `--color-${ThemeColorCardToneKey_2}-token-operator`
385
- | `--color-${ThemeColorCardToneKey_2}-token-prolog`
386
- | `--color-${ThemeColorCardToneKey_2}-token-property`
387
- | `--color-${ThemeColorCardToneKey_2}-token-pseudo-class`
388
- | `--color-${ThemeColorCardToneKey_2}-token-pseudo-element`
389
- | `--color-${ThemeColorCardToneKey_2}-token-punctuation`
390
- | `--color-${ThemeColorCardToneKey_2}-token-regex`
391
- | `--color-${ThemeColorCardToneKey_2}-token-selector`
392
- | `--color-${ThemeColorCardToneKey_2}-token-string`
393
- | `--color-${ThemeColorCardToneKey_2}-token-symbol`
394
- | `--color-${ThemeColorCardToneKey_2}-token-tag`
395
- | `--color-${ThemeColorCardToneKey_2}-token-unit`
396
- | `--color-${ThemeColorCardToneKey_2}-token-url`
397
- | `--color-${ThemeColorCardToneKey_2}-token-variable`
274
+ | `--color-${ThemeColorCardToneKey}-accent-fg`
275
+ | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
276
+ | `--color-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
277
+ | `--color-${ThemeColorCardToneKey}-backdrop`
278
+ | `--color-${ThemeColorCardToneKey}-focus-ring`
279
+ | `--color-${ThemeColorCardToneKey}-link-fg`
280
+ | `--color-${ThemeColorCardToneKey}-muted-bg`
281
+ | `--color-${ThemeColorCardToneKey}-muted-fg`
282
+ | `--color-${ThemeColorCardToneKey}-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
283
+ | `--color-${ThemeColorCardToneKey}-shadow-outline`
284
+ | `--color-${ThemeColorCardToneKey}-shadow-umbra`
285
+ | `--color-${ThemeColorCardToneKey}-shadow-penumbra`
286
+ | `--color-${ThemeColorCardToneKey}-shadow-ambient`
287
+ | `--color-${ThemeColorCardToneKey}-skeleton-from`
288
+ | `--color-${ThemeColorCardToneKey}-skeleton-to`
289
+ | `--color-${ThemeColorCardToneKey}-token-atrule`
290
+ | `--color-${ThemeColorCardToneKey}-token-attr-name`
291
+ | `--color-${ThemeColorCardToneKey}-token-attr-value`
292
+ | `--color-${ThemeColorCardToneKey}-token-attribute`
293
+ | `--color-${ThemeColorCardToneKey}-token-boolean`
294
+ | `--color-${ThemeColorCardToneKey}-token-builtin`
295
+ | `--color-${ThemeColorCardToneKey}-token-cdata`
296
+ | `--color-${ThemeColorCardToneKey}-token-char`
297
+ | `--color-${ThemeColorCardToneKey}-token-class`
298
+ | `--color-${ThemeColorCardToneKey}-token-class-name`
299
+ | `--color-${ThemeColorCardToneKey}-token-comment`
300
+ | `--color-${ThemeColorCardToneKey}-token-constant`
301
+ | `--color-${ThemeColorCardToneKey}-token-deleted`
302
+ | `--color-${ThemeColorCardToneKey}-token-doctype`
303
+ | `--color-${ThemeColorCardToneKey}-token-entity`
304
+ | `--color-${ThemeColorCardToneKey}-token-function`
305
+ | `--color-${ThemeColorCardToneKey}-token-hexcode`
306
+ | `--color-${ThemeColorCardToneKey}-token-id`
307
+ | `--color-${ThemeColorCardToneKey}-token-important`
308
+ | `--color-${ThemeColorCardToneKey}-token-inserted`
309
+ | `--color-${ThemeColorCardToneKey}-token-keyword`
310
+ | `--color-${ThemeColorCardToneKey}-token-number`
311
+ | `--color-${ThemeColorCardToneKey}-token-operator`
312
+ | `--color-${ThemeColorCardToneKey}-token-prolog`
313
+ | `--color-${ThemeColorCardToneKey}-token-property`
314
+ | `--color-${ThemeColorCardToneKey}-token-pseudo-class`
315
+ | `--color-${ThemeColorCardToneKey}-token-pseudo-element`
316
+ | `--color-${ThemeColorCardToneKey}-token-punctuation`
317
+ | `--color-${ThemeColorCardToneKey}-token-regex`
318
+ | `--color-${ThemeColorCardToneKey}-token-selector`
319
+ | `--color-${ThemeColorCardToneKey}-token-string`
320
+ | `--color-${ThemeColorCardToneKey}-token-symbol`
321
+ | `--color-${ThemeColorCardToneKey}-token-tag`
322
+ | `--color-${ThemeColorCardToneKey}-token-unit`
323
+ | `--color-${ThemeColorCardToneKey}-token-url`
324
+ | `--color-${ThemeColorCardToneKey}-token-variable`
398
325
 
399
326
  export declare type ColorCardVarName =
400
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-accent-fg`
401
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-bg`
402
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-avatar-${ThemeColorAvatarColorKey_2}-fg`
403
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-backdrop`
404
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-focus-ring`
405
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-link-fg`
406
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-muted-bg`
407
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-muted-fg`
408
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-${ElementColorVariant}-${ThemeColorStateToneKey_2}-${ElementColorVariantKey}`
409
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-outline`
410
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-umbra`
411
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-penumbra`
412
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-shadow-ambient`
413
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-skeleton-from`
414
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-skeleton-to`
415
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-atrule`
416
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attr-name`
417
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attr-value`
418
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-attribute`
419
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-boolean`
420
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-builtin`
421
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-cdata`
422
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-char`
423
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-class`
424
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-class-name`
425
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-comment`
426
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-constant`
427
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-deleted`
428
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-doctype`
429
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-entity`
430
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-function`
431
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-hexcode`
432
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-id`
433
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-important`
434
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-inserted`
435
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-keyword`
436
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-number`
437
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-operator`
438
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-prolog`
439
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-property`
440
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-pseudo-class`
441
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-pseudo-element`
442
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-punctuation`
443
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-regex`
444
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-selector`
445
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-string`
446
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-symbol`
447
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-tag`
448
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-unit`
449
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-url`
450
- | `--color-${ThemeColorSchemeKey_2}-${ThemeColorCardToneKey_2}-token-variable`
327
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-accent-fg`
328
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-bg`
329
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-avatar-${ThemeColorAvatarColorKey}-fg`
330
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-backdrop`
331
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-focus-ring`
332
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-link-fg`
333
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-bg`
334
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-muted-fg`
335
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-${ElementColorVariant}-${ThemeColorStateToneKey}-${ElementColorVariantKey}`
336
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-outline`
337
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-umbra`
338
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-penumbra`
339
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-shadow-ambient`
340
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-from`
341
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-skeleton-to`
342
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-atrule`
343
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-attr-name`
344
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-attr-value`
345
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-attribute`
346
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-boolean`
347
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-builtin`
348
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-cdata`
349
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-char`
350
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-class`
351
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-class-name`
352
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-comment`
353
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-constant`
354
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-deleted`
355
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-doctype`
356
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-entity`
357
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-function`
358
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-hexcode`
359
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-id`
360
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-important`
361
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-inserted`
362
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-keyword`
363
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-number`
364
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-operator`
365
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-prolog`
366
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-property`
367
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-pseudo-class`
368
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-pseudo-element`
369
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-punctuation`
370
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-regex`
371
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-selector`
372
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-string`
373
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-symbol`
374
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-tag`
375
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-unit`
376
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-url`
377
+ | `--color-${ThemeColorSchemeKey}-${ThemeColorCardToneKey}-token-variable`
451
378
 
452
379
  /** @public */
453
380
  export declare interface ColorCardVarNames {
454
381
  accent: {
455
382
  fg: VarName
456
383
  }
457
- avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames>
384
+ avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames>
458
385
  backdrop: VarName
459
386
  focusRing: VarName
460
387
  link: {
@@ -645,42 +572,23 @@ export declare interface ColorInputStateVars {
645
572
  }
646
573
 
647
574
  /** @public */
648
- export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey_2, ColorCardVarNames>
649
-
650
- /** @public */
651
- export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey_2, ColorCardVars> {}
652
-
653
- /** @public */
654
- declare type ColorToken =
655
- | `black`
656
- | `black/${ColorTokenOpacityValue}`
657
- | `white`
658
- | `white/${ColorTokenOpacityValue}`
659
- | `${Hue}/${Tint}`
660
- | `${Hue}/${Tint}/${ColorTokenOpacityValue}`
661
- | `${Hue}/${Tint} ${number}%`
662
- | `${Tint}`
663
- | `${Tint}/${ColorTokenOpacityValue}`
664
- | `${Tint} ${number}%`
665
-
666
- /** @public */
667
- declare type ColorTokenOpacityValue = `0` | `0.${number}` | `1`
575
+ export declare type ColorSchemeVarNames = Record<ThemeColorCardToneKey, ColorCardVarNames>
668
576
 
669
577
  /** @public */
670
- declare type ColorTokens = Record<'*' | ThemeColorCardToneKey, CardColorTokens>
578
+ export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey, ColorCardVars> {}
671
579
 
672
580
  export declare interface ColorVariantVarNames
673
581
  extends ColorElementVarNames,
674
- Record<ThemeColorStateToneKey_2, ColorElementVarNames> {}
582
+ Record<ThemeColorStateToneKey, ColorElementVarNames> {}
675
583
 
676
584
  /** @public */
677
585
  export declare interface ColorVariantVars
678
- extends Record<ThemeColorStateToneKey_2, ColorElementVars>,
586
+ extends Record<ThemeColorStateToneKey, ColorElementVars>,
679
587
  ColorElementVars {}
680
588
 
681
- export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
589
+ export declare type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
682
590
 
683
- export declare function compilePalette(config: PaletteConfig_2): string
591
+ export declare function compilePalette(): string
684
592
 
685
593
  /** @public */
686
594
  export declare function compileSystem(): string
@@ -697,13 +605,6 @@ export declare interface ContainerStyleProps {
697
605
  width?: ResponsiveProp<ContainerWidth>
698
606
  }
699
607
 
700
- /**
701
- * Work around types that are missing in `styled-components@6`
702
- * https://github.com/styled-components/styled-components/issues/4062
703
- * @internal
704
- */
705
- declare type CSSObject = StyledObject<any>
706
-
707
608
  /** @public */
708
609
  export declare type CSSVar = `var(${VarName})`
709
610
 
@@ -742,23 +643,6 @@ export declare interface DisplayStyleProps {
742
643
  display?: ResponsiveProp<Display>
743
644
  }
744
645
 
745
- /** @public */
746
- declare interface ElementColorTokens {
747
- _hue: Hue
748
- bg: {
749
- 0: [ColorToken, ColorToken]
750
- 4: [ColorToken, ColorToken]
751
- }
752
- border: {
753
- 0: [ColorToken, ColorToken]
754
- 4: [ColorToken, ColorToken]
755
- }
756
- fg: {
757
- 0: [ColorToken, ColorToken]
758
- 4: [ColorToken, ColorToken]
759
- }
760
- }
761
-
762
646
  /** @public */
763
647
  export declare type ElementColorVariant = 'solid' | 'tinted'
764
648
 
@@ -996,20 +880,6 @@ export declare interface HeightStyleProps {
996
880
  height?: ResponsiveProp<BoxHeight>
997
881
  }
998
882
 
999
- declare type Hue = (typeof HUES)[number]
1000
-
1001
- declare const HUES: readonly [
1002
- 'gray',
1003
- 'blue',
1004
- 'purple',
1005
- 'magenta',
1006
- 'red',
1007
- 'orange',
1008
- 'yellow',
1009
- 'green',
1010
- 'cyan',
1011
- ]
1012
-
1013
883
  /** @internal */
1014
884
  export declare function _input(props: InputStyleProps): string | undefined
1015
885
 
@@ -1083,13 +953,13 @@ export declare interface LabelStyleProps extends FontStyleProps {
1083
953
 
1084
954
  export declare type LegacyCardScopedVarName =
1085
955
  | `--card-accent-fg-color`
1086
- | `--card-avatar-${ThemeColorAvatarColorKey_2}-bg-color`
1087
- | `--card-avatar-${ThemeColorAvatarColorKey_2}-fg-color`
956
+ | `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
957
+ | `--card-avatar-${ThemeColorAvatarColorKey}-fg-color`
1088
958
  | `--card-backdrop-color`
1089
- | `--card-badge-${ThemeColorStateToneKey_2}-bg-color`
1090
- | `--card-badge-${ThemeColorStateToneKey_2}-dot-color`
1091
- | `--card-badge-${ThemeColorStateToneKey_2}-fg-color`
1092
- | `--card-badge-${ThemeColorStateToneKey_2}-icon-color`
959
+ | `--card-badge-${ThemeColorStateToneKey}-bg-color`
960
+ | `--card-badge-${ThemeColorStateToneKey}-dot-color`
961
+ | `--card-badge-${ThemeColorStateToneKey}-fg-color`
962
+ | `--card-badge-${ThemeColorStateToneKey}-icon-color`
1093
963
  | `--card-bg-color`
1094
964
  | `--card-bg-image`
1095
965
  | `--card-bg2-color`
@@ -1159,26 +1029,8 @@ export declare interface PaddingStyleProps {
1159
1029
  paddingY?: ResponsiveProp<Space>
1160
1030
  }
1161
1031
 
1162
- declare type PaletteConfig = {
1163
- chroma: {
1164
- min: number
1165
- max: number
1166
- }
1167
- luminosity: {
1168
- min: number
1169
- max: number
1170
- }
1171
- hues: Record<
1172
- Hue,
1173
- {
1174
- h: number
1175
- c: number
1176
- }
1177
- >
1178
- }
1179
-
1180
1032
  /** @public */
1181
- export declare type PaletteVarName = `--black` | `--white` | `--${Hue_2}-${Tint_2}`
1033
+ export declare type PaletteVarName = `--black` | `--white` | `--${Hue}-${Tint}`
1182
1034
 
1183
1035
  /** @public */
1184
1036
  export declare type PointerEvents = 'auto' | 'none'
@@ -1235,42 +1087,7 @@ export declare function rem(value: number): string
1235
1087
  /** @public */
1236
1088
  export declare type ResponsiveProp<T> = T | Array<T | null | undefined>
1237
1089
 
1238
- /**
1239
- * @public
1240
- */
1241
- declare interface RootTheme_v2 {
1242
- _version: 2
1243
- avatar: ThemeAvatar_v2
1244
- button: {
1245
- border: {
1246
- width: number
1247
- }
1248
- focusRing: ThemeFocusRing
1249
- textWeight: ThemeFontWeightKey
1250
- }
1251
- card: {
1252
- border: {
1253
- width: number
1254
- }
1255
- focusRing: ThemeFocusRing
1256
- shadow: {
1257
- outline: number
1258
- }
1259
- }
1260
- color: ThemeColorSchemes_v2
1261
- container: number[]
1262
- font: ThemeFonts
1263
- input: ThemeInput_v2
1264
- layer: ThemeLayer
1265
- media: number[]
1266
- radius: number[]
1267
- shadow: Array<ThemeShadow | null>
1268
- space: number[]
1269
- /** @internal */
1270
- style?: ThemeStyles
1271
- }
1272
-
1273
- export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
1090
+ export declare type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
1274
1091
 
1275
1092
  /** @public */
1276
1093
  export declare interface Rules {
@@ -1283,7 +1100,7 @@ export declare interface ScopedColorVarNames extends Omit<ColorCardVarNames, 'av
1283
1100
  accent: {
1284
1101
  fg: VarName
1285
1102
  }
1286
- avatar: Record<ThemeColorAvatarColorKey_2, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
1103
+ avatar: Record<ThemeColorAvatarColorKey, ColorAvatarColorVarNames> & ColorAvatarColorVarNames
1287
1104
  bg: VarName
1288
1105
  border: VarName
1289
1106
  fg: VarName
@@ -1315,7 +1132,7 @@ export declare function _selectable(props: SelectableStyleProps): string | undef
1315
1132
 
1316
1133
  /** @internal */
1317
1134
  export declare interface SelectableStyleProps extends RadiusStyleProps {
1318
- tone?: ThemeColorStateToneKey_2
1135
+ tone?: ThemeColorStateToneKey
1319
1136
  }
1320
1137
 
1321
1138
  export declare function selectPresentation(): string | undefined
@@ -1340,6 +1157,9 @@ export declare function spinner(): string | undefined
1340
1157
 
1341
1158
  export declare function srOnly(): string | undefined
1342
1159
 
1160
+ /** @public */
1161
+ export declare function stack(): string | undefined
1162
+
1343
1163
  /** @public */
1344
1164
  export declare type Style = {
1345
1165
  keyframes?: StyleKeyframes
@@ -1420,543 +1240,6 @@ export declare interface TextStyleProps extends FlexItemStyleProps, FontStylePro
1420
1240
  size?: ResponsiveProp<TextSize>
1421
1241
  }
1422
1242
 
1423
- /** @public */
1424
- declare const THEME_COLOR_AVATAR_COLORS: ColorHueKey[]
1425
-
1426
- /** @public */
1427
- declare const THEME_COLOR_BLEND_MODES: readonly ['multiply', 'screen']
1428
-
1429
- /** @public */
1430
- declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed']
1431
-
1432
- /** @public */
1433
- declare const THEME_COLOR_CARD_TONES: readonly [
1434
- 'transparent',
1435
- 'default',
1436
- 'neutral',
1437
- 'primary',
1438
- 'suggest',
1439
- 'positive',
1440
- 'caution',
1441
- 'critical',
1442
- ]
1443
-
1444
- /** @public */
1445
- declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid']
1446
-
1447
- /** @public */
1448
- declare const THEME_COLOR_INPUT_STATES: readonly ['enabled', 'hovered', 'readOnly', 'disabled']
1449
-
1450
- /** @public */
1451
- declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark']
1452
-
1453
- /** @public */
1454
- declare const THEME_COLOR_STATE_TONES: readonly [
1455
- 'default',
1456
- 'neutral',
1457
- 'primary',
1458
- 'suggest',
1459
- 'positive',
1460
- 'caution',
1461
- 'critical',
1462
- ]
1463
-
1464
- /** @public */
1465
- declare const THEME_COLOR_STATES: readonly ['enabled', 'hovered', 'pressed', 'selected', 'disabled']
1466
-
1467
- /**
1468
- * Supersedes `RootTheme` and `RootTheme_v2`.
1469
- *
1470
- * @public
1471
- */
1472
- declare interface Theme_v3 {
1473
- _version: 3
1474
- _palette: PaletteConfig
1475
- _tokens: Tokens
1476
- avatar: ThemeAvatar_v2
1477
- button: {
1478
- border: {
1479
- width: number
1480
- }
1481
- focusRing: ThemeFocusRing
1482
- textWeight: ThemeFontWeightKey
1483
- }
1484
- card: {
1485
- border: {
1486
- width: number
1487
- }
1488
- focusRing: ThemeFocusRing
1489
- shadow: {
1490
- outline: number
1491
- }
1492
- }
1493
- color: ThemeColor_v3
1494
- container: number[]
1495
- font: ThemeFonts
1496
- input: ThemeInput_v2
1497
- layer: ThemeLayer
1498
- media: number[]
1499
- radius: number[]
1500
- shadow: Array<ThemeShadow | null>
1501
- space: number[]
1502
- }
1503
-
1504
- /**
1505
- * @public
1506
- */
1507
- declare interface ThemeAvatar_v2 {
1508
- sizes: {
1509
- /** Spacing between avatars in an <AvatarStack> component (px) */
1510
- distance: number
1511
- /** Diameter of the avatar (px) */
1512
- size: number
1513
- }[]
1514
- focusRing: ThemeFocusRing
1515
- }
1516
-
1517
- /**
1518
- * @public
1519
- */
1520
- declare type ThemeBoxShadow = [number, number, number, number]
1521
-
1522
- declare type ThemeColor_v3 = Record<ThemeColorSchemeKey, ThemeColorScheme_v3>
1523
-
1524
- /**
1525
- * @public
1526
- */
1527
- declare type ThemeColorAvatar_v2 = Record<ThemeColorAvatarColorKey, ThemeColorAvatarHue_v2>
1528
-
1529
- /** @public */
1530
- declare type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number]
1531
-
1532
- /**
1533
- * @public
1534
- */
1535
- declare interface ThemeColorAvatarHue_v2 {
1536
- _blend?: ThemeColorBlendModeKey
1537
- bg: string
1538
- fg: string
1539
- }
1540
-
1541
- /**
1542
- * @public
1543
- */
1544
- declare type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
1545
-
1546
- /**
1547
- * @public
1548
- */
1549
- declare interface ThemeColorBadgeTone_v2 {
1550
- bg: string
1551
- fg: string
1552
- dot: string
1553
- icon: string
1554
- }
1555
-
1556
- /** @public */
1557
- declare type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number]
1558
-
1559
- /**
1560
- * @public
1561
- */
1562
- declare type ThemeColorButton_v2 = Record<ThemeColorButtonModeKey, ThemeColorButtonMode_v2>
1563
-
1564
- /**
1565
- * @public
1566
- */
1567
- declare type ThemeColorButtonMode_v2 = Record<ThemeColorStateToneKey, ThemeColorButtonTone_v2>
1568
-
1569
- /** @public */
1570
- declare type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number]
1571
-
1572
- /**
1573
- * @public
1574
- */
1575
- declare type ThemeColorButtonTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
1576
-
1577
- /**
1578
- * @public
1579
- */
1580
- declare interface ThemeColorCard_v2 extends ThemeColorState_v2 {
1581
- /** @internal */
1582
- _blend: ThemeColorBlendModeKey
1583
- _dark: boolean
1584
- backdrop: string
1585
- button: ThemeColorButton_v2
1586
- focusRing: string
1587
- input: ThemeColorInput_v2
1588
- selectable: ThemeColorSelectable_v2
1589
- shadow: ThemeColorShadow
1590
- syntax: ThemeColorSyntax
1591
- }
1592
-
1593
- declare interface ThemeColorCard_v3 {
1594
- _hue: Hue
1595
- avatar: ThemeColorAvatar_v2
1596
- backdrop: string
1597
- focusRing: string
1598
- shadow: {
1599
- outline: string
1600
- umbra: string
1601
- penumbra: string
1602
- ambient: string
1603
- }
1604
- token: {
1605
- atrule: string
1606
- attrName: string
1607
- attrValue: string
1608
- attribute: string
1609
- boolean: string
1610
- builtin: string
1611
- cdata: string
1612
- char: string
1613
- class: string
1614
- className: string
1615
- comment: string
1616
- constant: string
1617
- deleted: string
1618
- doctype: string
1619
- entity: string
1620
- function: string
1621
- hexcode: string
1622
- id: string
1623
- important: string
1624
- inserted: string
1625
- keyword: string
1626
- number: string
1627
- operator: string
1628
- prolog: string
1629
- property: string
1630
- pseudoClass: string
1631
- pseudoElement: string
1632
- punctuation: string
1633
- regex: string
1634
- selector: string
1635
- string: string
1636
- symbol: string
1637
- tag: string
1638
- unit: string
1639
- url: string
1640
- variable: string
1641
- }
1642
- skeleton: {
1643
- from: string
1644
- to: string
1645
- }
1646
- variant: Record<ThemeColorVariantKey, ThemeColorVariant>
1647
- }
1648
-
1649
- /** @public */
1650
- declare type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number]
1651
-
1652
- declare interface ThemeColorElement {
1653
- _hue: Hue
1654
- bg: {
1655
- 0: string
1656
- 4: string
1657
- }
1658
- border: {
1659
- 0: string
1660
- 4: string
1661
- }
1662
- fg: {
1663
- 0: string
1664
- 4: string
1665
- }
1666
- }
1667
-
1668
- /**
1669
- * @public
1670
- */
1671
- declare type ThemeColorInput_v2 = Record<ThemeColorInputModeKey, ThemeColorInputMode_v2>
1672
-
1673
- /**
1674
- * @public
1675
- */
1676
- declare type ThemeColorInputMode_v2 = Record<ThemeColorInputStateKey, ThemeColorInputState_v2>
1677
-
1678
- /** @public */
1679
- declare type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number]
1680
-
1681
- /**
1682
- * @public
1683
- */
1684
- declare interface ThemeColorInputState_v2 {
1685
- _blend?: ThemeColorBlendModeKey
1686
- bg: string
1687
- border: string
1688
- fg: string
1689
- muted: {
1690
- bg: string
1691
- }
1692
- placeholder: string
1693
- }
1694
-
1695
- /** @public */
1696
- declare type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number]
1697
-
1698
- /**
1699
- * @public
1700
- */
1701
- declare interface ThemeColorKBD {
1702
- bg: string
1703
- fg: string
1704
- border: string
1705
- }
1706
-
1707
- /**
1708
- * @public
1709
- */
1710
- declare type ThemeColorScheme_v2 = Record<ThemeColorCardToneKey, ThemeColorCard_v2>
1711
-
1712
- declare interface ThemeColorScheme_v3 {
1713
- card: Record<ThemeColorCardToneKey, ThemeColorCard_v3>
1714
- }
1715
-
1716
- /**
1717
- * @public
1718
- */
1719
- declare type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number]
1720
-
1721
- /**
1722
- * @public
1723
- */
1724
- declare type ThemeColorSchemes_v2 = Record<ThemeColorSchemeKey, ThemeColorScheme_v2>
1725
-
1726
- /**
1727
- * @public
1728
- */
1729
- declare type ThemeColorSelectable_v2 = Record<ThemeColorStateToneKey, ThemeColorSelectableTone_v2>
1730
-
1731
- /**
1732
- * @public
1733
- */
1734
- declare type ThemeColorSelectableTone_v2 = Record<ThemeColorStateKey, ThemeColorState_v2>
1735
-
1736
- /** @public */
1737
- declare interface ThemeColorShadow {
1738
- outline: string
1739
- umbra: string
1740
- penumbra: string
1741
- ambient: string
1742
- }
1743
-
1744
- /**
1745
- * @public
1746
- */
1747
- declare interface ThemeColorState_v2 {
1748
- /** @internal */
1749
- _blend?: ThemeColorBlendModeKey
1750
- accent: {
1751
- fg: string
1752
- }
1753
- /**
1754
- * @internal This may be removed in a future release
1755
- * */
1756
- avatar: ThemeColorAvatar_v2
1757
- /**
1758
- * @internal This may be removed in a future release
1759
- * */
1760
- badge: ThemeColorBadge_v2
1761
- bg: string
1762
- border: string
1763
- code: {
1764
- bg: string
1765
- fg: string
1766
- }
1767
- fg: string
1768
- icon: string
1769
- kbd: ThemeColorKBD
1770
- link: {
1771
- fg: string
1772
- }
1773
- muted: {
1774
- bg: string
1775
- fg: string
1776
- }
1777
- skeleton: {
1778
- from: string
1779
- to: string
1780
- }
1781
- }
1782
-
1783
- /** @public */
1784
- declare type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number]
1785
-
1786
- /** @public */
1787
- declare type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number]
1788
-
1789
- /**
1790
- * @public
1791
- */
1792
- declare interface ThemeColorSyntax {
1793
- atrule: string
1794
- attrName: string
1795
- attrValue: string
1796
- attribute: string
1797
- boolean: string
1798
- builtin: string
1799
- cdata: string
1800
- char: string
1801
- class: string
1802
- className: string
1803
- comment: string
1804
- constant: string
1805
- deleted: string
1806
- doctype: string
1807
- entity: string
1808
- function: string
1809
- hexcode: string
1810
- id: string
1811
- important: string
1812
- inserted: string
1813
- keyword: string
1814
- number: string
1815
- operator: string
1816
- prolog: string
1817
- property: string
1818
- pseudoClass: string
1819
- pseudoElement: string
1820
- punctuation: string
1821
- regex: string
1822
- selector: string
1823
- string: string
1824
- symbol: string
1825
- tag: string
1826
- unit: string
1827
- url: string
1828
- variable: string
1829
- }
1830
-
1831
- declare type ThemeColorVariant = Record<ThemeColorStateToneKey, ThemeColorElement>
1832
-
1833
- declare type ThemeColorVariantKey = 'tinted' | 'solid'
1834
-
1835
- /**
1836
- * @public
1837
- */
1838
- declare interface ThemeFocusRing {
1839
- offset: number
1840
- width: number
1841
- }
1842
-
1843
- /**
1844
- * @public
1845
- */
1846
- declare interface ThemeFont {
1847
- family: string
1848
- featureSettings?: string
1849
- weights: ThemeFontWeight
1850
- sizes: ThemeFontSize[]
1851
- /** @deprecated No longer supported. */
1852
- horizontalOffset?: number
1853
- }
1854
-
1855
- /**
1856
- * @public
1857
- */
1858
- declare interface ThemeFonts {
1859
- code: ThemeFont
1860
- heading: ThemeFont
1861
- label: ThemeFont
1862
- text: ThemeFont
1863
- }
1864
-
1865
- /**
1866
- * @public
1867
- */
1868
- declare interface ThemeFontSize {
1869
- ascenderHeight: number
1870
- descenderHeight: number
1871
- fontSize: number
1872
- iconSize: number
1873
- letterSpacing: number
1874
- lineHeight: number
1875
- }
1876
-
1877
- /**
1878
- * @public
1879
- */
1880
- declare interface ThemeFontWeight {
1881
- regular: number
1882
- medium: number
1883
- semibold: number
1884
- bold: number
1885
- }
1886
-
1887
- /**
1888
- * @public
1889
- */
1890
- declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
1891
-
1892
- /**
1893
- * @public
1894
- */
1895
- declare interface ThemeInput_v2 {
1896
- checkbox: {
1897
- size: number
1898
- focusRing: ThemeFocusRing
1899
- }
1900
- radio: {
1901
- size: number
1902
- markSize: number
1903
- focusRing: ThemeFocusRing
1904
- }
1905
- switch: {
1906
- width: number
1907
- height: number
1908
- padding: number
1909
- transitionDurationMs: number
1910
- transitionTimingFunction: string
1911
- focusRing: ThemeFocusRing
1912
- }
1913
- border: {
1914
- width: number
1915
- }
1916
- select: {
1917
- focusRing: ThemeFocusRing
1918
- }
1919
- text: {
1920
- focusRing: ThemeFocusRing
1921
- }
1922
- }
1923
-
1924
- /**
1925
- * @public
1926
- */
1927
- declare interface ThemeLayer {
1928
- dialog: {
1929
- zOffset: number
1930
- }
1931
- popover: {
1932
- zOffset: number
1933
- }
1934
- tooltip: {
1935
- zOffset: number
1936
- }
1937
- }
1938
-
1939
- /**
1940
- * @public
1941
- */
1942
- declare interface ThemeShadow {
1943
- umbra: ThemeBoxShadow
1944
- penumbra: ThemeBoxShadow
1945
- ambient: ThemeBoxShadow
1946
- }
1947
-
1948
- /**
1949
- * @internal
1950
- */
1951
- declare interface ThemeStyles {
1952
- button?: {
1953
- root?: CSSObject
1954
- }
1955
- card?: {
1956
- root?: CSSObject
1957
- }
1958
- }
1959
-
1960
1243
  /** @public */
1961
1244
  export declare type ThemeVarName =
1962
1245
  | `--avatar-focus-ring-offset`
@@ -2035,30 +1318,6 @@ export declare type ThemeVarName =
2035
1318
  | `--shadow-${Shadow}-penumbra`
2036
1319
  | `--shadow-${Shadow}-ambient`
2037
1320
 
2038
- declare type Tint = (typeof TINTS)[number]
2039
-
2040
- declare const TINTS: readonly [
2041
- 50,
2042
- 100,
2043
- 150,
2044
- 200,
2045
- 250,
2046
- 300,
2047
- 350,
2048
- 400,
2049
- 450,
2050
- 500,
2051
- 550,
2052
- 600,
2053
- 650,
2054
- 700,
2055
- 750,
2056
- 800,
2057
- 850,
2058
- 900,
2059
- 950,
2060
- ]
2061
-
2062
1321
  export declare function toast(): string | undefined
2063
1322
 
2064
1323
  export declare function toastLayer(): string | undefined
@@ -2069,12 +1328,7 @@ export declare function toastLoadingBarMask(): string | undefined
2069
1328
 
2070
1329
  export declare function toastLoadingBarProgress(): string | undefined
2071
1330
 
2072
- export declare function toBoxShadow(value: ThemeBoxShadow_2 | undefined): string
2073
-
2074
- /** @public */
2075
- declare interface Tokens {
2076
- color: ColorTokens
2077
- }
1331
+ export declare function toBoxShadow(value: ThemeBoxShadow | undefined): string
2078
1332
 
2079
1333
  export declare function tooltip(): string | undefined
2080
1334
 
@@ -2082,8 +1336,6 @@ export declare function tooltipCard(): string | undefined
2082
1336
 
2083
1337
  export declare function treeItem(): string | undefined
2084
1338
 
2085
- export declare function v3_v2(theme_v3: Theme_v3): RootTheme_v2
2086
-
2087
1339
  /** @public */
2088
1340
  export declare type VarName =
2089
1341
  | AvatarScopedVarName
@@ -2100,9 +1352,9 @@ export declare type VarName =
2100
1352
 
2101
1353
  /** @public */
2102
1354
  export declare interface VarNames {
2103
- color: Record<ThemeColorSchemeKey_2, ColorSchemeVarNames> &
1355
+ color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> &
2104
1356
  ScopedColorVarNames &
2105
- Record<ThemeColorCardToneKey_2, ColorCardVarNames>
1357
+ Record<ThemeColorCardToneKey, ColorCardVarNames>
2106
1358
  container: Record<Exclude<ContainerWidth, 'auto'>, VarName>
2107
1359
  avatar: {
2108
1360
  distance: VarName
@@ -2157,7 +1409,7 @@ export declare interface Vars {
2157
1409
  dark: ColorSchemeVars
2158
1410
  light: ColorSchemeVars
2159
1411
  } & ScopedColorVars &
2160
- Record<ThemeColorCardToneKey_2, ColorCardVars>
1412
+ Record<ThemeColorCardToneKey, ColorCardVars>
2161
1413
  container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
2162
1414
  font: {
2163
1415
  code: FontVars<FontCodeSize>