@nimbus-ds/styles 6.8.0 → 6.9.0-rc.1
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/CHANGELOG.md +8 -0
- package/dist/index.css +1281 -714
- package/dist/index.d.ts +259 -121
- package/dist/index.js +1 -1
- package/package.json +3 -2
package/dist/index.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ export interface Conditions<T> {
|
|
|
21
21
|
export type AspectRatio = "1/1" | "16/9" | "9/16" | "4/3" | "3/4" | "2/1" | "1/2";
|
|
22
22
|
export type BorderStyle = "solid" | "none" | "hidden" | "dashed" | "dotted";
|
|
23
23
|
export type BoxSizing = "border-box" | "content-box";
|
|
24
|
-
export type Cursor = "auto" | "pointer";
|
|
24
|
+
export type Cursor = "auto" | "pointer" | "not-allowed" | "grab";
|
|
25
25
|
export type Display = "block" | "flex" | "inline-flex" | "grid" | "inline-grid";
|
|
26
26
|
export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
|
|
27
27
|
export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
|
|
@@ -32,6 +32,7 @@ export type TextDecoration = "none" | "underline";
|
|
|
32
32
|
export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
|
|
33
33
|
export type Overflow = "visible" | "hidden" | "scroll" | "auto";
|
|
34
34
|
export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
|
|
35
|
+
export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
|
|
35
36
|
declare const propertiesBox: {
|
|
36
37
|
gap: {
|
|
37
38
|
none: string;
|
|
@@ -94,6 +95,7 @@ declare const propertiesBox: {
|
|
|
94
95
|
"neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
95
96
|
"neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
96
97
|
"neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
98
|
+
"neutral.surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
97
99
|
"neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
98
100
|
};
|
|
99
101
|
borderColor: {
|
|
@@ -153,17 +155,33 @@ declare const propertiesBox: {
|
|
|
153
155
|
overflow: Overflow[];
|
|
154
156
|
overflowX: Overflow[];
|
|
155
157
|
overflowY: Overflow[];
|
|
158
|
+
boxShadow: {
|
|
159
|
+
card: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
160
|
+
popover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
161
|
+
modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
162
|
+
focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
163
|
+
};
|
|
164
|
+
transitionDuration: {
|
|
165
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
166
|
+
fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
167
|
+
slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
168
|
+
slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
169
|
+
};
|
|
170
|
+
transitionTimingFunction: TransitionTiming[];
|
|
156
171
|
};
|
|
157
172
|
export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
|
|
158
173
|
export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
|
|
174
|
+
export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
|
|
159
175
|
export type BoxSpaceProperties = keyof typeof propertiesBox.space;
|
|
160
176
|
export type BoxMarginProperties = keyof typeof propertiesBox.margin;
|
|
161
177
|
export type BoxGapProperties = keyof typeof propertiesBox.gap;
|
|
162
178
|
export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
|
|
179
|
+
export type TransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
|
|
163
180
|
export interface BoxConditions<T> extends Conditions<T> {
|
|
164
181
|
focus?: T;
|
|
165
182
|
active?: T;
|
|
166
183
|
hover?: T;
|
|
184
|
+
disabled?: T;
|
|
167
185
|
}
|
|
168
186
|
export interface BoxSprinkle {
|
|
169
187
|
width?: string | BoxConditions<string>;
|
|
@@ -199,6 +217,7 @@ export interface BoxSprinkle {
|
|
|
199
217
|
borderColor?: BoxBorderColorProperties | BoxConditions<BoxBorderColorProperties>;
|
|
200
218
|
borderStyle?: BorderStyle | BoxConditions<BorderStyle>;
|
|
201
219
|
boxSizing?: BoxSizing | BoxConditions<BoxSizing>;
|
|
220
|
+
boxShadow?: BoxShadowProperties | BoxConditions<BoxShadowProperties>;
|
|
202
221
|
padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
|
|
203
222
|
paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
|
|
204
223
|
paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
|
|
@@ -227,6 +246,10 @@ export interface BoxSprinkle {
|
|
|
227
246
|
mb?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
228
247
|
mx?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
229
248
|
my?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
249
|
+
transitionTiming?: TransitionTiming | BoxConditions<TransitionTiming>;
|
|
250
|
+
transitionProperty?: string | BoxConditions<string>;
|
|
251
|
+
transitionDelay?: string | BoxConditions<string>;
|
|
252
|
+
transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
|
|
230
253
|
}
|
|
231
254
|
export declare const box: {
|
|
232
255
|
sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
|
|
@@ -236,23 +259,23 @@ export declare const box: {
|
|
|
236
259
|
values: {
|
|
237
260
|
grid: {
|
|
238
261
|
default: string;
|
|
239
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
262
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
240
263
|
};
|
|
241
264
|
flex: {
|
|
242
265
|
default: string;
|
|
243
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
266
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
244
267
|
};
|
|
245
268
|
block: {
|
|
246
269
|
default: string;
|
|
247
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
270
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
248
271
|
};
|
|
249
272
|
"inline-flex": {
|
|
250
273
|
default: string;
|
|
251
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
274
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
252
275
|
};
|
|
253
276
|
"inline-grid": {
|
|
254
277
|
default: string;
|
|
255
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
278
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
256
279
|
};
|
|
257
280
|
};
|
|
258
281
|
staticScale: Display[];
|
|
@@ -262,19 +285,19 @@ export declare const box: {
|
|
|
262
285
|
values: {
|
|
263
286
|
row: {
|
|
264
287
|
default: string;
|
|
265
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
288
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
266
289
|
};
|
|
267
290
|
column: {
|
|
268
291
|
default: string;
|
|
269
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
292
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
270
293
|
};
|
|
271
294
|
"column-reverse": {
|
|
272
295
|
default: string;
|
|
273
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
296
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
274
297
|
};
|
|
275
298
|
"row-reverse": {
|
|
276
299
|
default: string;
|
|
277
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
300
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
278
301
|
};
|
|
279
302
|
};
|
|
280
303
|
staticScale: FlexDirection[];
|
|
@@ -284,15 +307,15 @@ export declare const box: {
|
|
|
284
307
|
values: {
|
|
285
308
|
nowrap: {
|
|
286
309
|
default: string;
|
|
287
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
310
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
288
311
|
};
|
|
289
312
|
wrap: {
|
|
290
313
|
default: string;
|
|
291
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
314
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
292
315
|
};
|
|
293
316
|
"wrap-reverse": {
|
|
294
317
|
default: string;
|
|
295
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
318
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
296
319
|
};
|
|
297
320
|
};
|
|
298
321
|
staticScale: FlexWrap[];
|
|
@@ -302,27 +325,27 @@ export declare const box: {
|
|
|
302
325
|
values: {
|
|
303
326
|
center: {
|
|
304
327
|
default: string;
|
|
305
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
328
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
306
329
|
};
|
|
307
330
|
"flex-end": {
|
|
308
331
|
default: string;
|
|
309
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
332
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
310
333
|
};
|
|
311
334
|
"flex-start": {
|
|
312
335
|
default: string;
|
|
313
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
336
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
314
337
|
};
|
|
315
338
|
"space-around": {
|
|
316
339
|
default: string;
|
|
317
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
340
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
318
341
|
};
|
|
319
342
|
"space-between": {
|
|
320
343
|
default: string;
|
|
321
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
344
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
322
345
|
};
|
|
323
346
|
"space-evenly": {
|
|
324
347
|
default: string;
|
|
325
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
348
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
326
349
|
};
|
|
327
350
|
};
|
|
328
351
|
staticScale: JustifyContent[];
|
|
@@ -332,23 +355,23 @@ export declare const box: {
|
|
|
332
355
|
values: {
|
|
333
356
|
center: {
|
|
334
357
|
default: string;
|
|
335
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
358
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
336
359
|
};
|
|
337
360
|
"flex-end": {
|
|
338
361
|
default: string;
|
|
339
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
362
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
340
363
|
};
|
|
341
364
|
"flex-start": {
|
|
342
365
|
default: string;
|
|
343
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
366
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
344
367
|
};
|
|
345
368
|
baseline: {
|
|
346
369
|
default: string;
|
|
347
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
370
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
348
371
|
};
|
|
349
372
|
stretch: {
|
|
350
373
|
default: string;
|
|
351
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
374
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
352
375
|
};
|
|
353
376
|
};
|
|
354
377
|
staticScale: AlignItems[];
|
|
@@ -358,47 +381,47 @@ export declare const box: {
|
|
|
358
381
|
values: {
|
|
359
382
|
inherit: {
|
|
360
383
|
default: string;
|
|
361
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
384
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
362
385
|
};
|
|
363
386
|
none: {
|
|
364
387
|
default: string;
|
|
365
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
388
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
366
389
|
};
|
|
367
390
|
all: {
|
|
368
391
|
default: string;
|
|
369
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
392
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
370
393
|
};
|
|
371
394
|
fill: {
|
|
372
395
|
default: string;
|
|
373
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
396
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
374
397
|
};
|
|
375
398
|
stroke: {
|
|
376
399
|
default: string;
|
|
377
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
400
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
378
401
|
};
|
|
379
402
|
auto: {
|
|
380
403
|
default: string;
|
|
381
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
404
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
382
405
|
};
|
|
383
406
|
visible: {
|
|
384
407
|
default: string;
|
|
385
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
408
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
386
409
|
};
|
|
387
410
|
painted: {
|
|
388
411
|
default: string;
|
|
389
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
412
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
390
413
|
};
|
|
391
414
|
visibleFill: {
|
|
392
415
|
default: string;
|
|
393
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
416
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
394
417
|
};
|
|
395
418
|
visiblePainted: {
|
|
396
419
|
default: string;
|
|
397
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
420
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
398
421
|
};
|
|
399
422
|
visibleStroke: {
|
|
400
423
|
default: string;
|
|
401
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
424
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
402
425
|
};
|
|
403
426
|
};
|
|
404
427
|
staticScale: PointerEvents[];
|
|
@@ -408,23 +431,23 @@ export declare const box: {
|
|
|
408
431
|
values: {
|
|
409
432
|
hidden: {
|
|
410
433
|
default: string;
|
|
411
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
434
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
412
435
|
};
|
|
413
436
|
none: {
|
|
414
437
|
default: string;
|
|
415
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
438
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
416
439
|
};
|
|
417
440
|
dashed: {
|
|
418
441
|
default: string;
|
|
419
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
442
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
420
443
|
};
|
|
421
444
|
dotted: {
|
|
422
445
|
default: string;
|
|
423
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
446
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
424
447
|
};
|
|
425
448
|
solid: {
|
|
426
449
|
default: string;
|
|
427
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
450
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
428
451
|
};
|
|
429
452
|
};
|
|
430
453
|
staticScale: BorderStyle[];
|
|
@@ -434,11 +457,11 @@ export declare const box: {
|
|
|
434
457
|
values: {
|
|
435
458
|
"border-box": {
|
|
436
459
|
default: string;
|
|
437
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
460
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
438
461
|
};
|
|
439
462
|
"content-box": {
|
|
440
463
|
default: string;
|
|
441
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
464
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
442
465
|
};
|
|
443
466
|
};
|
|
444
467
|
staticScale: BoxSizing[];
|
|
@@ -448,11 +471,19 @@ export declare const box: {
|
|
|
448
471
|
values: {
|
|
449
472
|
auto: {
|
|
450
473
|
default: string;
|
|
451
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
474
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
475
|
+
};
|
|
476
|
+
grab: {
|
|
477
|
+
default: string;
|
|
478
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
479
|
+
};
|
|
480
|
+
"not-allowed": {
|
|
481
|
+
default: string;
|
|
482
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
452
483
|
};
|
|
453
484
|
pointer: {
|
|
454
485
|
default: string;
|
|
455
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
486
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
456
487
|
};
|
|
457
488
|
};
|
|
458
489
|
staticScale: Cursor[];
|
|
@@ -462,23 +493,23 @@ export declare const box: {
|
|
|
462
493
|
values: {
|
|
463
494
|
fixed: {
|
|
464
495
|
default: string;
|
|
465
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
496
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
466
497
|
};
|
|
467
498
|
absolute: {
|
|
468
499
|
default: string;
|
|
469
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
500
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
470
501
|
};
|
|
471
502
|
relative: {
|
|
472
503
|
default: string;
|
|
473
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
504
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
474
505
|
};
|
|
475
506
|
static: {
|
|
476
507
|
default: string;
|
|
477
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
508
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
478
509
|
};
|
|
479
510
|
sticky: {
|
|
480
511
|
default: string;
|
|
481
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
512
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
482
513
|
};
|
|
483
514
|
};
|
|
484
515
|
staticScale: Position[];
|
|
@@ -488,19 +519,19 @@ export declare const box: {
|
|
|
488
519
|
values: {
|
|
489
520
|
hidden: {
|
|
490
521
|
default: string;
|
|
491
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
522
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
492
523
|
};
|
|
493
524
|
auto: {
|
|
494
525
|
default: string;
|
|
495
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
526
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
496
527
|
};
|
|
497
528
|
visible: {
|
|
498
529
|
default: string;
|
|
499
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
530
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
500
531
|
};
|
|
501
532
|
scroll: {
|
|
502
533
|
default: string;
|
|
503
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
534
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
504
535
|
};
|
|
505
536
|
};
|
|
506
537
|
staticScale: Overflow[];
|
|
@@ -510,19 +541,19 @@ export declare const box: {
|
|
|
510
541
|
values: {
|
|
511
542
|
hidden: {
|
|
512
543
|
default: string;
|
|
513
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
544
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
514
545
|
};
|
|
515
546
|
auto: {
|
|
516
547
|
default: string;
|
|
517
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
548
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
518
549
|
};
|
|
519
550
|
visible: {
|
|
520
551
|
default: string;
|
|
521
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
552
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
522
553
|
};
|
|
523
554
|
scroll: {
|
|
524
555
|
default: string;
|
|
525
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
556
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
526
557
|
};
|
|
527
558
|
};
|
|
528
559
|
staticScale: Overflow[];
|
|
@@ -532,223 +563,298 @@ export declare const box: {
|
|
|
532
563
|
values: {
|
|
533
564
|
hidden: {
|
|
534
565
|
default: string;
|
|
535
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
566
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
536
567
|
};
|
|
537
568
|
auto: {
|
|
538
569
|
default: string;
|
|
539
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
570
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
540
571
|
};
|
|
541
572
|
visible: {
|
|
542
573
|
default: string;
|
|
543
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
574
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
544
575
|
};
|
|
545
576
|
scroll: {
|
|
546
577
|
default: string;
|
|
547
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
578
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
548
579
|
};
|
|
549
580
|
};
|
|
550
581
|
staticScale: Overflow[];
|
|
551
582
|
name: "overflowY";
|
|
552
583
|
};
|
|
584
|
+
transitionTimingFunction: {
|
|
585
|
+
values: {
|
|
586
|
+
ease: {
|
|
587
|
+
default: string;
|
|
588
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
589
|
+
};
|
|
590
|
+
"ease-in": {
|
|
591
|
+
default: string;
|
|
592
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
593
|
+
};
|
|
594
|
+
"ease-in-out": {
|
|
595
|
+
default: string;
|
|
596
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
597
|
+
};
|
|
598
|
+
"ease-out": {
|
|
599
|
+
default: string;
|
|
600
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
601
|
+
};
|
|
602
|
+
"step-end": {
|
|
603
|
+
default: string;
|
|
604
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
605
|
+
};
|
|
606
|
+
"step-start": {
|
|
607
|
+
default: string;
|
|
608
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
609
|
+
};
|
|
610
|
+
linear: {
|
|
611
|
+
default: string;
|
|
612
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
613
|
+
};
|
|
614
|
+
};
|
|
615
|
+
staticScale: TransitionTiming[];
|
|
616
|
+
name: "transitionTimingFunction";
|
|
617
|
+
};
|
|
553
618
|
};
|
|
554
619
|
} & {
|
|
555
620
|
config: {
|
|
556
621
|
width: {
|
|
557
622
|
dynamic: {
|
|
558
623
|
default: string;
|
|
559
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
624
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
560
625
|
};
|
|
561
626
|
dynamicScale: true;
|
|
562
627
|
name: "width";
|
|
563
628
|
vars: {
|
|
564
629
|
default: string;
|
|
565
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
630
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
566
631
|
};
|
|
567
632
|
};
|
|
568
633
|
height: {
|
|
569
634
|
dynamic: {
|
|
570
635
|
default: string;
|
|
571
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
636
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
572
637
|
};
|
|
573
638
|
dynamicScale: true;
|
|
574
639
|
name: "height";
|
|
575
640
|
vars: {
|
|
576
641
|
default: string;
|
|
577
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
642
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
578
643
|
};
|
|
579
644
|
};
|
|
580
645
|
maxWidth: {
|
|
581
646
|
dynamic: {
|
|
582
647
|
default: string;
|
|
583
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
648
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
584
649
|
};
|
|
585
650
|
dynamicScale: true;
|
|
586
651
|
name: "maxWidth";
|
|
587
652
|
vars: {
|
|
588
653
|
default: string;
|
|
589
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
654
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
590
655
|
};
|
|
591
656
|
};
|
|
592
657
|
maxHeight: {
|
|
593
658
|
dynamic: {
|
|
594
659
|
default: string;
|
|
595
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
660
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
596
661
|
};
|
|
597
662
|
dynamicScale: true;
|
|
598
663
|
name: "maxHeight";
|
|
599
664
|
vars: {
|
|
600
665
|
default: string;
|
|
601
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
666
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
602
667
|
};
|
|
603
668
|
};
|
|
604
669
|
bottom: {
|
|
605
670
|
dynamic: {
|
|
606
671
|
default: string;
|
|
607
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
672
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
608
673
|
};
|
|
609
674
|
dynamicScale: true;
|
|
610
675
|
name: "bottom";
|
|
611
676
|
vars: {
|
|
612
677
|
default: string;
|
|
613
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
678
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
614
679
|
};
|
|
615
680
|
};
|
|
616
681
|
left: {
|
|
617
682
|
dynamic: {
|
|
618
683
|
default: string;
|
|
619
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
684
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
620
685
|
};
|
|
621
686
|
dynamicScale: true;
|
|
622
687
|
name: "left";
|
|
623
688
|
vars: {
|
|
624
689
|
default: string;
|
|
625
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
690
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
626
691
|
};
|
|
627
692
|
};
|
|
628
693
|
right: {
|
|
629
694
|
dynamic: {
|
|
630
695
|
default: string;
|
|
631
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
696
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
632
697
|
};
|
|
633
698
|
dynamicScale: true;
|
|
634
699
|
name: "right";
|
|
635
700
|
vars: {
|
|
636
701
|
default: string;
|
|
637
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
702
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
638
703
|
};
|
|
639
704
|
};
|
|
640
705
|
top: {
|
|
641
706
|
dynamic: {
|
|
642
707
|
default: string;
|
|
643
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
708
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
644
709
|
};
|
|
645
710
|
dynamicScale: true;
|
|
646
711
|
name: "top";
|
|
647
712
|
vars: {
|
|
648
713
|
default: string;
|
|
649
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
714
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
650
715
|
};
|
|
651
716
|
};
|
|
652
717
|
flex: {
|
|
653
718
|
dynamic: {
|
|
654
719
|
default: string;
|
|
655
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
720
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
656
721
|
};
|
|
657
722
|
dynamicScale: true;
|
|
658
723
|
name: "flex";
|
|
659
724
|
vars: {
|
|
660
725
|
default: string;
|
|
661
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
726
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
662
727
|
};
|
|
663
728
|
};
|
|
664
729
|
gridTemplateAreas: {
|
|
665
730
|
dynamic: {
|
|
666
731
|
default: string;
|
|
667
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
732
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
668
733
|
};
|
|
669
734
|
dynamicScale: true;
|
|
670
735
|
name: "gridTemplateAreas";
|
|
671
736
|
vars: {
|
|
672
737
|
default: string;
|
|
673
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
738
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
674
739
|
};
|
|
675
740
|
};
|
|
676
741
|
gridTemplateColumns: {
|
|
677
742
|
dynamic: {
|
|
678
743
|
default: string;
|
|
679
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
744
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
680
745
|
};
|
|
681
746
|
dynamicScale: true;
|
|
682
747
|
name: "gridTemplateColumns";
|
|
683
748
|
vars: {
|
|
684
749
|
default: string;
|
|
685
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
750
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
686
751
|
};
|
|
687
752
|
};
|
|
688
753
|
gridTemplateRows: {
|
|
689
754
|
dynamic: {
|
|
690
755
|
default: string;
|
|
691
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
756
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
692
757
|
};
|
|
693
758
|
dynamicScale: true;
|
|
694
759
|
name: "gridTemplateRows";
|
|
695
760
|
vars: {
|
|
696
761
|
default: string;
|
|
697
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
762
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
698
763
|
};
|
|
699
764
|
};
|
|
700
765
|
gridArea: {
|
|
701
766
|
dynamic: {
|
|
702
767
|
default: string;
|
|
703
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
768
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
704
769
|
};
|
|
705
770
|
dynamicScale: true;
|
|
706
771
|
name: "gridArea";
|
|
707
772
|
vars: {
|
|
708
773
|
default: string;
|
|
709
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
774
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
710
775
|
};
|
|
711
776
|
};
|
|
712
777
|
flexShrink: {
|
|
713
778
|
dynamic: {
|
|
714
779
|
default: string;
|
|
715
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
780
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
716
781
|
};
|
|
717
782
|
dynamicScale: true;
|
|
718
783
|
name: "flexShrink";
|
|
719
784
|
vars: {
|
|
720
785
|
default: string;
|
|
721
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
786
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
722
787
|
};
|
|
723
788
|
};
|
|
724
789
|
borderRadius: {
|
|
725
790
|
dynamic: {
|
|
726
791
|
default: string;
|
|
727
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
792
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
728
793
|
};
|
|
729
794
|
dynamicScale: true;
|
|
730
795
|
name: "borderRadius";
|
|
731
796
|
vars: {
|
|
732
797
|
default: string;
|
|
733
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
798
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
734
799
|
};
|
|
735
800
|
};
|
|
736
801
|
borderWidth: {
|
|
737
802
|
dynamic: {
|
|
738
803
|
default: string;
|
|
739
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
804
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
740
805
|
};
|
|
741
806
|
dynamicScale: true;
|
|
742
807
|
name: "borderWidth";
|
|
743
808
|
vars: {
|
|
744
809
|
default: string;
|
|
745
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
810
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
811
|
+
};
|
|
812
|
+
};
|
|
813
|
+
transitionDelay: {
|
|
814
|
+
dynamic: {
|
|
815
|
+
default: string;
|
|
816
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
817
|
+
};
|
|
818
|
+
dynamicScale: true;
|
|
819
|
+
name: "transitionDelay";
|
|
820
|
+
vars: {
|
|
821
|
+
default: string;
|
|
822
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
823
|
+
};
|
|
824
|
+
};
|
|
825
|
+
transitionProperty: {
|
|
826
|
+
dynamic: {
|
|
827
|
+
default: string;
|
|
828
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
829
|
+
};
|
|
830
|
+
dynamicScale: true;
|
|
831
|
+
name: "transitionProperty";
|
|
832
|
+
vars: {
|
|
833
|
+
default: string;
|
|
834
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
835
|
+
};
|
|
836
|
+
};
|
|
837
|
+
transitionDuration: {
|
|
838
|
+
dynamic: {
|
|
839
|
+
default: string;
|
|
840
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
841
|
+
};
|
|
842
|
+
dynamicScale: {
|
|
843
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
844
|
+
fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
845
|
+
slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
846
|
+
slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
847
|
+
};
|
|
848
|
+
name: "transitionDuration";
|
|
849
|
+
vars: {
|
|
850
|
+
default: string;
|
|
851
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
746
852
|
};
|
|
747
853
|
};
|
|
748
854
|
backgroundColor: {
|
|
749
855
|
dynamic: {
|
|
750
856
|
default: string;
|
|
751
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
857
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
752
858
|
};
|
|
753
859
|
dynamicScale: {
|
|
754
860
|
"primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -771,18 +877,19 @@ export declare const box: {
|
|
|
771
877
|
"neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
772
878
|
"neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
773
879
|
"neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
880
|
+
"neutral.surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
774
881
|
"neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
775
882
|
};
|
|
776
883
|
name: "backgroundColor";
|
|
777
884
|
vars: {
|
|
778
885
|
default: string;
|
|
779
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
886
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
780
887
|
};
|
|
781
888
|
};
|
|
782
889
|
borderColor: {
|
|
783
890
|
dynamic: {
|
|
784
891
|
default: string;
|
|
785
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
892
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
786
893
|
};
|
|
787
894
|
dynamicScale: {
|
|
788
895
|
"primary.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -804,13 +911,30 @@ export declare const box: {
|
|
|
804
911
|
name: "borderColor";
|
|
805
912
|
vars: {
|
|
806
913
|
default: string;
|
|
807
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
914
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
915
|
+
};
|
|
916
|
+
};
|
|
917
|
+
boxShadow: {
|
|
918
|
+
dynamic: {
|
|
919
|
+
default: string;
|
|
920
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
921
|
+
};
|
|
922
|
+
dynamicScale: {
|
|
923
|
+
card: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
924
|
+
popover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
925
|
+
modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
926
|
+
focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
927
|
+
};
|
|
928
|
+
name: "boxShadow";
|
|
929
|
+
vars: {
|
|
930
|
+
default: string;
|
|
931
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
808
932
|
};
|
|
809
933
|
};
|
|
810
934
|
padding: {
|
|
811
935
|
dynamic: {
|
|
812
936
|
default: string;
|
|
813
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
937
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
814
938
|
};
|
|
815
939
|
dynamicScale: {
|
|
816
940
|
none: string;
|
|
@@ -831,13 +955,13 @@ export declare const box: {
|
|
|
831
955
|
name: "padding";
|
|
832
956
|
vars: {
|
|
833
957
|
default: string;
|
|
834
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
958
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
835
959
|
};
|
|
836
960
|
};
|
|
837
961
|
paddingTop: {
|
|
838
962
|
dynamic: {
|
|
839
963
|
default: string;
|
|
840
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
964
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
841
965
|
};
|
|
842
966
|
dynamicScale: {
|
|
843
967
|
none: string;
|
|
@@ -858,13 +982,13 @@ export declare const box: {
|
|
|
858
982
|
name: "paddingTop";
|
|
859
983
|
vars: {
|
|
860
984
|
default: string;
|
|
861
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
985
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
862
986
|
};
|
|
863
987
|
};
|
|
864
988
|
paddingBottom: {
|
|
865
989
|
dynamic: {
|
|
866
990
|
default: string;
|
|
867
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
991
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
868
992
|
};
|
|
869
993
|
dynamicScale: {
|
|
870
994
|
none: string;
|
|
@@ -885,13 +1009,13 @@ export declare const box: {
|
|
|
885
1009
|
name: "paddingBottom";
|
|
886
1010
|
vars: {
|
|
887
1011
|
default: string;
|
|
888
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1012
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
889
1013
|
};
|
|
890
1014
|
};
|
|
891
1015
|
paddingLeft: {
|
|
892
1016
|
dynamic: {
|
|
893
1017
|
default: string;
|
|
894
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1018
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
895
1019
|
};
|
|
896
1020
|
dynamicScale: {
|
|
897
1021
|
none: string;
|
|
@@ -912,13 +1036,13 @@ export declare const box: {
|
|
|
912
1036
|
name: "paddingLeft";
|
|
913
1037
|
vars: {
|
|
914
1038
|
default: string;
|
|
915
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1039
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
916
1040
|
};
|
|
917
1041
|
};
|
|
918
1042
|
paddingRight: {
|
|
919
1043
|
dynamic: {
|
|
920
1044
|
default: string;
|
|
921
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1045
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
922
1046
|
};
|
|
923
1047
|
dynamicScale: {
|
|
924
1048
|
none: string;
|
|
@@ -939,13 +1063,13 @@ export declare const box: {
|
|
|
939
1063
|
name: "paddingRight";
|
|
940
1064
|
vars: {
|
|
941
1065
|
default: string;
|
|
942
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1066
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
943
1067
|
};
|
|
944
1068
|
};
|
|
945
1069
|
margin: {
|
|
946
1070
|
dynamic: {
|
|
947
1071
|
default: string;
|
|
948
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1072
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
949
1073
|
};
|
|
950
1074
|
dynamicScale: {
|
|
951
1075
|
none: string;
|
|
@@ -967,13 +1091,13 @@ export declare const box: {
|
|
|
967
1091
|
name: "margin";
|
|
968
1092
|
vars: {
|
|
969
1093
|
default: string;
|
|
970
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1094
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
971
1095
|
};
|
|
972
1096
|
};
|
|
973
1097
|
marginTop: {
|
|
974
1098
|
dynamic: {
|
|
975
1099
|
default: string;
|
|
976
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1100
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
977
1101
|
};
|
|
978
1102
|
dynamicScale: {
|
|
979
1103
|
none: string;
|
|
@@ -995,13 +1119,13 @@ export declare const box: {
|
|
|
995
1119
|
name: "marginTop";
|
|
996
1120
|
vars: {
|
|
997
1121
|
default: string;
|
|
998
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1122
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
999
1123
|
};
|
|
1000
1124
|
};
|
|
1001
1125
|
marginBottom: {
|
|
1002
1126
|
dynamic: {
|
|
1003
1127
|
default: string;
|
|
1004
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1128
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1005
1129
|
};
|
|
1006
1130
|
dynamicScale: {
|
|
1007
1131
|
none: string;
|
|
@@ -1023,13 +1147,13 @@ export declare const box: {
|
|
|
1023
1147
|
name: "marginBottom";
|
|
1024
1148
|
vars: {
|
|
1025
1149
|
default: string;
|
|
1026
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1150
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1027
1151
|
};
|
|
1028
1152
|
};
|
|
1029
1153
|
marginLeft: {
|
|
1030
1154
|
dynamic: {
|
|
1031
1155
|
default: string;
|
|
1032
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1156
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1033
1157
|
};
|
|
1034
1158
|
dynamicScale: {
|
|
1035
1159
|
none: string;
|
|
@@ -1051,13 +1175,13 @@ export declare const box: {
|
|
|
1051
1175
|
name: "marginLeft";
|
|
1052
1176
|
vars: {
|
|
1053
1177
|
default: string;
|
|
1054
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1178
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1055
1179
|
};
|
|
1056
1180
|
};
|
|
1057
1181
|
marginRight: {
|
|
1058
1182
|
dynamic: {
|
|
1059
1183
|
default: string;
|
|
1060
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1184
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1061
1185
|
};
|
|
1062
1186
|
dynamicScale: {
|
|
1063
1187
|
none: string;
|
|
@@ -1079,13 +1203,13 @@ export declare const box: {
|
|
|
1079
1203
|
name: "marginRight";
|
|
1080
1204
|
vars: {
|
|
1081
1205
|
default: string;
|
|
1082
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1206
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1083
1207
|
};
|
|
1084
1208
|
};
|
|
1085
1209
|
gap: {
|
|
1086
1210
|
dynamic: {
|
|
1087
1211
|
default: string;
|
|
1088
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1212
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1089
1213
|
};
|
|
1090
1214
|
dynamicScale: {
|
|
1091
1215
|
none: string;
|
|
@@ -1107,13 +1231,13 @@ export declare const box: {
|
|
|
1107
1231
|
name: "gap";
|
|
1108
1232
|
vars: {
|
|
1109
1233
|
default: string;
|
|
1110
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1234
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1111
1235
|
};
|
|
1112
1236
|
};
|
|
1113
1237
|
gridGap: {
|
|
1114
1238
|
dynamic: {
|
|
1115
1239
|
default: string;
|
|
1116
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1240
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1117
1241
|
};
|
|
1118
1242
|
dynamicScale: {
|
|
1119
1243
|
none: string;
|
|
@@ -1135,7 +1259,7 @@ export declare const box: {
|
|
|
1135
1259
|
name: "gridGap";
|
|
1136
1260
|
vars: {
|
|
1137
1261
|
default: string;
|
|
1138
|
-
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "hover", string>;
|
|
1262
|
+
conditions: Record<"xs" | "md" | "lg" | "focus" | "active" | "disabled" | "hover", string>;
|
|
1139
1263
|
};
|
|
1140
1264
|
};
|
|
1141
1265
|
};
|
|
@@ -1266,6 +1390,7 @@ export declare const box: {
|
|
|
1266
1390
|
"neutral.interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1267
1391
|
"neutral.surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1268
1392
|
"neutral.surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1393
|
+
"neutral.surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1269
1394
|
"neutral.textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1270
1395
|
};
|
|
1271
1396
|
borderColor: {
|
|
@@ -1325,6 +1450,19 @@ export declare const box: {
|
|
|
1325
1450
|
overflow: Overflow[];
|
|
1326
1451
|
overflowX: Overflow[];
|
|
1327
1452
|
overflowY: Overflow[];
|
|
1453
|
+
boxShadow: {
|
|
1454
|
+
card: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1455
|
+
popover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1456
|
+
modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1457
|
+
focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1458
|
+
};
|
|
1459
|
+
transitionDuration: {
|
|
1460
|
+
base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1461
|
+
fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1462
|
+
slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1463
|
+
slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
1464
|
+
};
|
|
1465
|
+
transitionTimingFunction: TransitionTiming[];
|
|
1328
1466
|
};
|
|
1329
1467
|
};
|
|
1330
1468
|
export declare const button: {
|