@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.
- package/dist/_chunks-cjs/_visual-editing.js +98 -64
- package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
- package/dist/_chunks-cjs/buildCommand.js +1 -1
- package/dist/_chunks-cjs/buildCommand.js.map +1 -1
- package/dist/_chunks-es/_visual-editing.mjs +99 -65
- package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
- package/dist/_visual-editing.d.mts +4 -1
- package/dist/_visual-editing.d.ts +4 -1
- package/dist/cli.js +1 -1
- package/dist/css.d.mts +145 -893
- package/dist/css.d.ts +145 -893
- package/dist/css.js +182 -191
- package/dist/css.js.map +1 -1
- package/dist/css.mjs +182 -191
- package/dist/css.mjs.map +1 -1
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +12 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +12 -14
- package/dist/index.mjs.map +1 -1
- package/dist/sanity-palette.css +1 -9
- package/dist/sanity-theme.css +1 -1
- package/dist/system.css +114 -109
- package/dist/theme.d.mts +1 -43
- package/dist/theme.d.ts +1 -43
- package/dist/theme.js +291 -102
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +272 -85
- package/dist/theme.mjs.map +1 -1
- package/package.json +1 -1
- package/src/cli/buildCommand.ts +2 -2
- package/src/css/_comp.ts +1 -0
- package/src/css/aspects/flex/flexJustify.style.ts +3 -3
- package/src/css/aspects/grid/types.ts +2 -2
- package/src/css/aspects/textOverflow/textOverflow.ts +2 -2
- package/src/css/compile/compilePalette.ts +8 -41
- package/src/css/compile/compileTheme_v3.ts +0 -18
- package/src/css/index.ts +2 -2
- package/src/css/primitives/_selectable/_contants.ts +1 -1
- package/src/css/primitives/box/box.ts +3 -0
- package/src/css/primitives/button/_constants.ts +1 -1
- package/src/css/primitives/button/button.style.ts +12 -13
- package/src/css/primitives/card/_constants.ts +2 -2
- package/src/css/primitives/card/card.ts +1 -1
- package/src/css/primitives/stack/index.ts +1 -0
- package/src/css/primitives/stack/stack.style.ts +9 -0
- package/src/css/primitives/stack/stack.ts +6 -0
- package/src/css/system.style.ts +2 -0
- package/src/theme/defaults/config.ts +2 -2
- package/src/theme/defaults/fonts.ts +4 -4
- package/src/theme/palette/constants.ts +1 -3
- package/src/theme/palette/types.ts +0 -12
- package/src/theme/v3/buildTheme_v3.ts +1 -2
- package/src/theme/v3/defaults.ts +12 -31
- package/src/theme/v3/types.ts +0 -3
- package/src/ui/StyleTags.tsx +1 -1
- package/src/ui/primitives/box/box.tsx +6 -0
- package/src/ui/primitives/button/button.tsx +12 -11
- package/src/ui/primitives/card/card.tsx +5 -2
- package/src/ui/primitives/heading/heading.tsx +1 -1
- package/src/ui/primitives/select/select.tsx +3 -3
- package/src/ui/primitives/stack/stack.tsx +10 -5
- package/src/ui/primitives/text/text.tsx +1 -1
- package/dist/_chunks-cjs/v3_v2.js +0 -251
- package/dist/_chunks-cjs/v3_v2.js.map +0 -1
- package/dist/_chunks-es/v3_v2.mjs +0 -252
- package/dist/_chunks-es/v3_v2.mjs.map +0 -1
package/dist/css.d.ts
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
|
|
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
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
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:
|
|
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:
|
|
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?:
|
|
131
|
-
tone?:
|
|
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-${
|
|
212
|
-
| `--color-avatar-${
|
|
138
|
+
| `--color-avatar-${ThemeColorAvatarColorKey}-bg`
|
|
139
|
+
| `--color-avatar-${ThemeColorAvatarColorKey}-fg`
|
|
213
140
|
| `--color-backdrop`
|
|
214
|
-
| `--color-${ElementColorVariant}-${
|
|
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?:
|
|
296
|
-
tone?:
|
|
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<
|
|
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<
|
|
271
|
+
export declare type ColorBadgeVars = Record<ThemeColorStateToneKey, ColorBadgeToneVars>
|
|
345
272
|
|
|
346
273
|
export declare type ColorCardToneScopedVarName =
|
|
347
|
-
| `--color-${
|
|
348
|
-
| `--color-${
|
|
349
|
-
| `--color-${
|
|
350
|
-
| `--color-${
|
|
351
|
-
| `--color-${
|
|
352
|
-
| `--color-${
|
|
353
|
-
| `--color-${
|
|
354
|
-
| `--color-${
|
|
355
|
-
| `--color-${
|
|
356
|
-
| `--color-${
|
|
357
|
-
| `--color-${
|
|
358
|
-
| `--color-${
|
|
359
|
-
| `--color-${
|
|
360
|
-
| `--color-${
|
|
361
|
-
| `--color-${
|
|
362
|
-
| `--color-${
|
|
363
|
-
| `--color-${
|
|
364
|
-
| `--color-${
|
|
365
|
-
| `--color-${
|
|
366
|
-
| `--color-${
|
|
367
|
-
| `--color-${
|
|
368
|
-
| `--color-${
|
|
369
|
-
| `--color-${
|
|
370
|
-
| `--color-${
|
|
371
|
-
| `--color-${
|
|
372
|
-
| `--color-${
|
|
373
|
-
| `--color-${
|
|
374
|
-
| `--color-${
|
|
375
|
-
| `--color-${
|
|
376
|
-
| `--color-${
|
|
377
|
-
| `--color-${
|
|
378
|
-
| `--color-${
|
|
379
|
-
| `--color-${
|
|
380
|
-
| `--color-${
|
|
381
|
-
| `--color-${
|
|
382
|
-
| `--color-${
|
|
383
|
-
| `--color-${
|
|
384
|
-
| `--color-${
|
|
385
|
-
| `--color-${
|
|
386
|
-
| `--color-${
|
|
387
|
-
| `--color-${
|
|
388
|
-
| `--color-${
|
|
389
|
-
| `--color-${
|
|
390
|
-
| `--color-${
|
|
391
|
-
| `--color-${
|
|
392
|
-
| `--color-${
|
|
393
|
-
| `--color-${
|
|
394
|
-
| `--color-${
|
|
395
|
-
| `--color-${
|
|
396
|
-
| `--color-${
|
|
397
|
-
| `--color-${
|
|
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-${
|
|
401
|
-
| `--color-${
|
|
402
|
-
| `--color-${
|
|
403
|
-
| `--color-${
|
|
404
|
-
| `--color-${
|
|
405
|
-
| `--color-${
|
|
406
|
-
| `--color-${
|
|
407
|
-
| `--color-${
|
|
408
|
-
| `--color-${
|
|
409
|
-
| `--color-${
|
|
410
|
-
| `--color-${
|
|
411
|
-
| `--color-${
|
|
412
|
-
| `--color-${
|
|
413
|
-
| `--color-${
|
|
414
|
-
| `--color-${
|
|
415
|
-
| `--color-${
|
|
416
|
-
| `--color-${
|
|
417
|
-
| `--color-${
|
|
418
|
-
| `--color-${
|
|
419
|
-
| `--color-${
|
|
420
|
-
| `--color-${
|
|
421
|
-
| `--color-${
|
|
422
|
-
| `--color-${
|
|
423
|
-
| `--color-${
|
|
424
|
-
| `--color-${
|
|
425
|
-
| `--color-${
|
|
426
|
-
| `--color-${
|
|
427
|
-
| `--color-${
|
|
428
|
-
| `--color-${
|
|
429
|
-
| `--color-${
|
|
430
|
-
| `--color-${
|
|
431
|
-
| `--color-${
|
|
432
|
-
| `--color-${
|
|
433
|
-
| `--color-${
|
|
434
|
-
| `--color-${
|
|
435
|
-
| `--color-${
|
|
436
|
-
| `--color-${
|
|
437
|
-
| `--color-${
|
|
438
|
-
| `--color-${
|
|
439
|
-
| `--color-${
|
|
440
|
-
| `--color-${
|
|
441
|
-
| `--color-${
|
|
442
|
-
| `--color-${
|
|
443
|
-
| `--color-${
|
|
444
|
-
| `--color-${
|
|
445
|
-
| `--color-${
|
|
446
|
-
| `--color-${
|
|
447
|
-
| `--color-${
|
|
448
|
-
| `--color-${
|
|
449
|
-
| `--color-${
|
|
450
|
-
| `--color-${
|
|
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<
|
|
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<
|
|
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
|
|
578
|
+
export declare interface ColorSchemeVars extends Record<ThemeColorCardToneKey, ColorCardVars> {}
|
|
671
579
|
|
|
672
580
|
export declare interface ColorVariantVarNames
|
|
673
581
|
extends ColorElementVarNames,
|
|
674
|
-
Record<
|
|
582
|
+
Record<ThemeColorStateToneKey, ColorElementVarNames> {}
|
|
675
583
|
|
|
676
584
|
/** @public */
|
|
677
585
|
export declare interface ColorVariantVars
|
|
678
|
-
extends Record<
|
|
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(
|
|
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-${
|
|
1087
|
-
| `--card-avatar-${
|
|
956
|
+
| `--card-avatar-${ThemeColorAvatarColorKey}-bg-color`
|
|
957
|
+
| `--card-avatar-${ThemeColorAvatarColorKey}-fg-color`
|
|
1088
958
|
| `--card-backdrop-color`
|
|
1089
|
-
| `--card-badge-${
|
|
1090
|
-
| `--card-badge-${
|
|
1091
|
-
| `--card-badge-${
|
|
1092
|
-
| `--card-badge-${
|
|
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` | `--${
|
|
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<
|
|
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?:
|
|
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:
|
|
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<
|
|
1355
|
+
color: Record<ThemeColorSchemeKey, ColorSchemeVarNames> &
|
|
2104
1356
|
ScopedColorVarNames &
|
|
2105
|
-
Record<
|
|
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<
|
|
1412
|
+
Record<ThemeColorCardToneKey, ColorCardVars>
|
|
2161
1413
|
container: Record<Exclude<ContainerWidth, 'auto'>, CSSVar>
|
|
2162
1414
|
font: {
|
|
2163
1415
|
code: FontVars<FontCodeSize>
|