@qasa/qds-ui 0.10.1 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1322 -1323
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/avatar/avatar.d.ts +2 -1
- package/dist/cjs/types/components/button/button-styles.d.ts +28 -16
- package/dist/cjs/types/components/icon/icons.d.ts +1 -0
- package/dist/cjs/types/components/icon-button/icon-button-styles.d.ts +28 -16
- package/dist/cjs/types/components/label/label.d.ts +14 -8
- package/dist/cjs/types/components/loading-dots/loading-dots.d.ts +14 -8
- package/dist/cjs/types/components/paragraph/paragraph.d.ts +14 -8
- package/dist/cjs/types/components/textarea/textarea.d.ts +5 -0
- package/dist/cjs/types/components/toast/toast-styles.d.ts +14 -8
- package/dist/cjs/types/hooks/index.d.ts +0 -1
- package/dist/cjs/types/styles/common-styles.d.ts +14 -8
- package/dist/cjs/types/theme/foundations/colors.d.ts +10 -8
- package/dist/cjs/types/theme/foundations/index.d.ts +14 -8
- package/dist/cjs/types/theme/foundations/sizes.d.ts +2 -0
- package/dist/cjs/types/theme/foundations/spacing.d.ts +4 -0
- package/dist/cjs/types/theme/theme-tools.d.ts +14 -8
- package/dist/cjs/types/theme/theme.d.ts +14 -8
- package/dist/esm/index.js +1322 -1323
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/avatar/avatar.d.ts +2 -1
- package/dist/esm/types/components/button/button-styles.d.ts +28 -16
- package/dist/esm/types/components/icon/icons.d.ts +1 -0
- package/dist/esm/types/components/icon-button/icon-button-styles.d.ts +28 -16
- package/dist/esm/types/components/label/label.d.ts +14 -8
- package/dist/esm/types/components/loading-dots/loading-dots.d.ts +14 -8
- package/dist/esm/types/components/paragraph/paragraph.d.ts +14 -8
- package/dist/esm/types/components/textarea/textarea.d.ts +5 -0
- package/dist/esm/types/components/toast/toast-styles.d.ts +14 -8
- package/dist/esm/types/hooks/index.d.ts +0 -1
- package/dist/esm/types/styles/common-styles.d.ts +14 -8
- package/dist/esm/types/theme/foundations/colors.d.ts +10 -8
- package/dist/esm/types/theme/foundations/index.d.ts +14 -8
- package/dist/esm/types/theme/foundations/sizes.d.ts +2 -0
- package/dist/esm/types/theme/foundations/spacing.d.ts +4 -0
- package/dist/esm/types/theme/theme-tools.d.ts +14 -8
- package/dist/esm/types/theme/theme.d.ts +14 -8
- package/dist/index.d.ts +149 -91
- package/package.json +4 -5
- package/dist/cjs/types/hooks/use-image.d.ts +0 -10
- package/dist/esm/types/hooks/use-image.d.ts +0 -10
|
@@ -16,7 +16,9 @@ export declare const getSizeStyles: (theme: {
|
|
|
16
16
|
'5x': string;
|
|
17
17
|
'6x': string;
|
|
18
18
|
'8x': string;
|
|
19
|
+
'10x': string;
|
|
19
20
|
'12x': string;
|
|
21
|
+
'14x': string;
|
|
20
22
|
'16x': string;
|
|
21
23
|
'20x': string;
|
|
22
24
|
'24x': string;
|
|
@@ -57,6 +59,7 @@ export declare const getSizeStyles: (theme: {
|
|
|
57
59
|
gray30: string;
|
|
58
60
|
gray20: string;
|
|
59
61
|
gray10: string;
|
|
62
|
+
pink: string;
|
|
60
63
|
uiPink: string;
|
|
61
64
|
uiPinkDark: string;
|
|
62
65
|
uiPinkLight: string;
|
|
@@ -69,15 +72,15 @@ export declare const getSizeStyles: (theme: {
|
|
|
69
72
|
softPink: string;
|
|
70
73
|
warmYellow: string;
|
|
71
74
|
softYellow: string;
|
|
72
|
-
red10: string;
|
|
73
|
-
red20: string;
|
|
74
|
-
red30: string;
|
|
75
|
-
red40: string;
|
|
76
|
-
red50: string;
|
|
77
|
-
red60: string;
|
|
78
|
-
red70: string;
|
|
79
|
-
red80: string;
|
|
80
75
|
red90: string;
|
|
76
|
+
red80: string;
|
|
77
|
+
red70: string;
|
|
78
|
+
red60: string;
|
|
79
|
+
red50: string;
|
|
80
|
+
red40: string;
|
|
81
|
+
red30: string;
|
|
82
|
+
red20: string;
|
|
83
|
+
red10: string;
|
|
81
84
|
green90: string;
|
|
82
85
|
green80: string;
|
|
83
86
|
green70: string;
|
|
@@ -105,6 +108,7 @@ export declare const getSizeStyles: (theme: {
|
|
|
105
108
|
yellow30: string;
|
|
106
109
|
yellow20: string;
|
|
107
110
|
yellow10: string;
|
|
111
|
+
blackAlpha5: string;
|
|
108
112
|
blackAlpha20: string;
|
|
109
113
|
};
|
|
110
114
|
bg: {
|
|
@@ -186,7 +190,9 @@ export declare const getSizeStyles: (theme: {
|
|
|
186
190
|
'5x': string;
|
|
187
191
|
'6x': string;
|
|
188
192
|
'8x': string;
|
|
193
|
+
'10x': string;
|
|
189
194
|
'12x': string;
|
|
195
|
+
'14x': string;
|
|
190
196
|
'16x': string;
|
|
191
197
|
'20x': string;
|
|
192
198
|
'24x': string;
|
|
@@ -468,7 +474,9 @@ export declare const getVariantStyles: (theme: {
|
|
|
468
474
|
'5x': string;
|
|
469
475
|
'6x': string;
|
|
470
476
|
'8x': string;
|
|
477
|
+
'10x': string;
|
|
471
478
|
'12x': string;
|
|
479
|
+
'14x': string;
|
|
472
480
|
'16x': string;
|
|
473
481
|
'20x': string;
|
|
474
482
|
'24x': string;
|
|
@@ -509,6 +517,7 @@ export declare const getVariantStyles: (theme: {
|
|
|
509
517
|
gray30: string;
|
|
510
518
|
gray20: string;
|
|
511
519
|
gray10: string;
|
|
520
|
+
pink: string;
|
|
512
521
|
uiPink: string;
|
|
513
522
|
uiPinkDark: string;
|
|
514
523
|
uiPinkLight: string;
|
|
@@ -521,15 +530,15 @@ export declare const getVariantStyles: (theme: {
|
|
|
521
530
|
softPink: string;
|
|
522
531
|
warmYellow: string;
|
|
523
532
|
softYellow: string;
|
|
524
|
-
red10: string;
|
|
525
|
-
red20: string;
|
|
526
|
-
red30: string;
|
|
527
|
-
red40: string;
|
|
528
|
-
red50: string;
|
|
529
|
-
red60: string;
|
|
530
|
-
red70: string;
|
|
531
|
-
red80: string;
|
|
532
533
|
red90: string;
|
|
534
|
+
red80: string;
|
|
535
|
+
red70: string;
|
|
536
|
+
red60: string;
|
|
537
|
+
red50: string;
|
|
538
|
+
red40: string;
|
|
539
|
+
red30: string;
|
|
540
|
+
red20: string;
|
|
541
|
+
red10: string;
|
|
533
542
|
green90: string;
|
|
534
543
|
green80: string;
|
|
535
544
|
green70: string;
|
|
@@ -557,6 +566,7 @@ export declare const getVariantStyles: (theme: {
|
|
|
557
566
|
yellow30: string;
|
|
558
567
|
yellow20: string;
|
|
559
568
|
yellow10: string;
|
|
569
|
+
blackAlpha5: string;
|
|
560
570
|
blackAlpha20: string;
|
|
561
571
|
};
|
|
562
572
|
bg: {
|
|
@@ -638,7 +648,9 @@ export declare const getVariantStyles: (theme: {
|
|
|
638
648
|
'5x': string;
|
|
639
649
|
'6x': string;
|
|
640
650
|
'8x': string;
|
|
651
|
+
'10x': string;
|
|
641
652
|
'12x': string;
|
|
653
|
+
'14x': string;
|
|
642
654
|
'16x': string;
|
|
643
655
|
'20x': string;
|
|
644
656
|
'24x': string;
|
|
@@ -23,6 +23,7 @@ export declare const HelpCircleIcon: import("react").ForwardRefExoticComponent<i
|
|
|
23
23
|
export declare const HistoryIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
24
24
|
export declare const HomeIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
25
25
|
export declare const ImageIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
26
|
+
export declare const InfoIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
26
27
|
export declare const ListIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
27
28
|
export declare const ListFilterIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
28
29
|
export declare const LogOutIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
|
|
@@ -15,7 +15,9 @@ export declare const getSizeStyles: (theme: {
|
|
|
15
15
|
'5x': string;
|
|
16
16
|
'6x': string;
|
|
17
17
|
'8x': string;
|
|
18
|
+
'10x': string;
|
|
18
19
|
'12x': string;
|
|
20
|
+
'14x': string;
|
|
19
21
|
'16x': string;
|
|
20
22
|
'20x': string;
|
|
21
23
|
'24x': string;
|
|
@@ -56,6 +58,7 @@ export declare const getSizeStyles: (theme: {
|
|
|
56
58
|
gray30: string;
|
|
57
59
|
gray20: string;
|
|
58
60
|
gray10: string;
|
|
61
|
+
pink: string;
|
|
59
62
|
uiPink: string;
|
|
60
63
|
uiPinkDark: string;
|
|
61
64
|
uiPinkLight: string;
|
|
@@ -68,15 +71,15 @@ export declare const getSizeStyles: (theme: {
|
|
|
68
71
|
softPink: string;
|
|
69
72
|
warmYellow: string;
|
|
70
73
|
softYellow: string;
|
|
71
|
-
red10: string;
|
|
72
|
-
red20: string;
|
|
73
|
-
red30: string;
|
|
74
|
-
red40: string;
|
|
75
|
-
red50: string;
|
|
76
|
-
red60: string;
|
|
77
|
-
red70: string;
|
|
78
|
-
red80: string;
|
|
79
74
|
red90: string;
|
|
75
|
+
red80: string;
|
|
76
|
+
red70: string;
|
|
77
|
+
red60: string;
|
|
78
|
+
red50: string;
|
|
79
|
+
red40: string;
|
|
80
|
+
red30: string;
|
|
81
|
+
red20: string;
|
|
82
|
+
red10: string;
|
|
80
83
|
green90: string;
|
|
81
84
|
green80: string;
|
|
82
85
|
green70: string;
|
|
@@ -104,6 +107,7 @@ export declare const getSizeStyles: (theme: {
|
|
|
104
107
|
yellow30: string;
|
|
105
108
|
yellow20: string;
|
|
106
109
|
yellow10: string;
|
|
110
|
+
blackAlpha5: string;
|
|
107
111
|
blackAlpha20: string;
|
|
108
112
|
};
|
|
109
113
|
bg: {
|
|
@@ -185,7 +189,9 @@ export declare const getSizeStyles: (theme: {
|
|
|
185
189
|
'5x': string;
|
|
186
190
|
'6x': string;
|
|
187
191
|
'8x': string;
|
|
192
|
+
'10x': string;
|
|
188
193
|
'12x': string;
|
|
194
|
+
'14x': string;
|
|
189
195
|
'16x': string;
|
|
190
196
|
'20x': string;
|
|
191
197
|
'24x': string;
|
|
@@ -428,7 +434,9 @@ export declare const getVariantStyles: (theme: {
|
|
|
428
434
|
'5x': string;
|
|
429
435
|
'6x': string;
|
|
430
436
|
'8x': string;
|
|
437
|
+
'10x': string;
|
|
431
438
|
'12x': string;
|
|
439
|
+
'14x': string;
|
|
432
440
|
'16x': string;
|
|
433
441
|
'20x': string;
|
|
434
442
|
'24x': string;
|
|
@@ -469,6 +477,7 @@ export declare const getVariantStyles: (theme: {
|
|
|
469
477
|
gray30: string;
|
|
470
478
|
gray20: string;
|
|
471
479
|
gray10: string;
|
|
480
|
+
pink: string;
|
|
472
481
|
uiPink: string;
|
|
473
482
|
uiPinkDark: string;
|
|
474
483
|
uiPinkLight: string;
|
|
@@ -481,15 +490,15 @@ export declare const getVariantStyles: (theme: {
|
|
|
481
490
|
softPink: string;
|
|
482
491
|
warmYellow: string;
|
|
483
492
|
softYellow: string;
|
|
484
|
-
red10: string;
|
|
485
|
-
red20: string;
|
|
486
|
-
red30: string;
|
|
487
|
-
red40: string;
|
|
488
|
-
red50: string;
|
|
489
|
-
red60: string;
|
|
490
|
-
red70: string;
|
|
491
|
-
red80: string;
|
|
492
493
|
red90: string;
|
|
494
|
+
red80: string;
|
|
495
|
+
red70: string;
|
|
496
|
+
red60: string;
|
|
497
|
+
red50: string;
|
|
498
|
+
red40: string;
|
|
499
|
+
red30: string;
|
|
500
|
+
red20: string;
|
|
501
|
+
red10: string;
|
|
493
502
|
green90: string;
|
|
494
503
|
green80: string;
|
|
495
504
|
green70: string;
|
|
@@ -517,6 +526,7 @@ export declare const getVariantStyles: (theme: {
|
|
|
517
526
|
yellow30: string;
|
|
518
527
|
yellow20: string;
|
|
519
528
|
yellow10: string;
|
|
529
|
+
blackAlpha5: string;
|
|
520
530
|
blackAlpha20: string;
|
|
521
531
|
};
|
|
522
532
|
bg: {
|
|
@@ -598,7 +608,9 @@ export declare const getVariantStyles: (theme: {
|
|
|
598
608
|
'5x': string;
|
|
599
609
|
'6x': string;
|
|
600
610
|
'8x': string;
|
|
611
|
+
'10x': string;
|
|
601
612
|
'12x': string;
|
|
613
|
+
'14x': string;
|
|
602
614
|
'16x': string;
|
|
603
615
|
'20x': string;
|
|
604
616
|
'24x': string;
|
|
@@ -19,7 +19,9 @@ declare const getSizeStyles: (theme: {
|
|
|
19
19
|
'5x': string;
|
|
20
20
|
'6x': string;
|
|
21
21
|
'8x': string;
|
|
22
|
+
'10x': string;
|
|
22
23
|
'12x': string;
|
|
24
|
+
'14x': string;
|
|
23
25
|
'16x': string;
|
|
24
26
|
'20x': string;
|
|
25
27
|
'24x': string;
|
|
@@ -60,6 +62,7 @@ declare const getSizeStyles: (theme: {
|
|
|
60
62
|
gray30: string;
|
|
61
63
|
gray20: string;
|
|
62
64
|
gray10: string;
|
|
65
|
+
pink: string;
|
|
63
66
|
uiPink: string;
|
|
64
67
|
uiPinkDark: string;
|
|
65
68
|
uiPinkLight: string;
|
|
@@ -72,15 +75,15 @@ declare const getSizeStyles: (theme: {
|
|
|
72
75
|
softPink: string;
|
|
73
76
|
warmYellow: string;
|
|
74
77
|
softYellow: string;
|
|
75
|
-
red10: string;
|
|
76
|
-
red20: string;
|
|
77
|
-
red30: string;
|
|
78
|
-
red40: string;
|
|
79
|
-
red50: string;
|
|
80
|
-
red60: string;
|
|
81
|
-
red70: string;
|
|
82
|
-
red80: string;
|
|
83
78
|
red90: string;
|
|
79
|
+
red80: string;
|
|
80
|
+
red70: string;
|
|
81
|
+
red60: string;
|
|
82
|
+
red50: string;
|
|
83
|
+
red40: string;
|
|
84
|
+
red30: string;
|
|
85
|
+
red20: string;
|
|
86
|
+
red10: string;
|
|
84
87
|
green90: string;
|
|
85
88
|
green80: string;
|
|
86
89
|
green70: string;
|
|
@@ -108,6 +111,7 @@ declare const getSizeStyles: (theme: {
|
|
|
108
111
|
yellow30: string;
|
|
109
112
|
yellow20: string;
|
|
110
113
|
yellow10: string;
|
|
114
|
+
blackAlpha5: string;
|
|
111
115
|
blackAlpha20: string;
|
|
112
116
|
};
|
|
113
117
|
bg: {
|
|
@@ -189,7 +193,9 @@ declare const getSizeStyles: (theme: {
|
|
|
189
193
|
'5x': string;
|
|
190
194
|
'6x': string;
|
|
191
195
|
'8x': string;
|
|
196
|
+
'10x': string;
|
|
192
197
|
'12x': string;
|
|
198
|
+
'14x': string;
|
|
193
199
|
'16x': string;
|
|
194
200
|
'20x': string;
|
|
195
201
|
'24x': string;
|
|
@@ -19,7 +19,9 @@ declare const getSizeStyles: (theme: {
|
|
|
19
19
|
'5x': string;
|
|
20
20
|
'6x': string;
|
|
21
21
|
'8x': string;
|
|
22
|
+
'10x': string;
|
|
22
23
|
'12x': string;
|
|
24
|
+
'14x': string;
|
|
23
25
|
'16x': string;
|
|
24
26
|
'20x': string;
|
|
25
27
|
'24x': string;
|
|
@@ -60,6 +62,7 @@ declare const getSizeStyles: (theme: {
|
|
|
60
62
|
gray30: string;
|
|
61
63
|
gray20: string;
|
|
62
64
|
gray10: string;
|
|
65
|
+
pink: string;
|
|
63
66
|
uiPink: string;
|
|
64
67
|
uiPinkDark: string;
|
|
65
68
|
uiPinkLight: string;
|
|
@@ -72,15 +75,15 @@ declare const getSizeStyles: (theme: {
|
|
|
72
75
|
softPink: string;
|
|
73
76
|
warmYellow: string;
|
|
74
77
|
softYellow: string;
|
|
75
|
-
red10: string;
|
|
76
|
-
red20: string;
|
|
77
|
-
red30: string;
|
|
78
|
-
red40: string;
|
|
79
|
-
red50: string;
|
|
80
|
-
red60: string;
|
|
81
|
-
red70: string;
|
|
82
|
-
red80: string;
|
|
83
78
|
red90: string;
|
|
79
|
+
red80: string;
|
|
80
|
+
red70: string;
|
|
81
|
+
red60: string;
|
|
82
|
+
red50: string;
|
|
83
|
+
red40: string;
|
|
84
|
+
red30: string;
|
|
85
|
+
red20: string;
|
|
86
|
+
red10: string;
|
|
84
87
|
green90: string;
|
|
85
88
|
green80: string;
|
|
86
89
|
green70: string;
|
|
@@ -108,6 +111,7 @@ declare const getSizeStyles: (theme: {
|
|
|
108
111
|
yellow30: string;
|
|
109
112
|
yellow20: string;
|
|
110
113
|
yellow10: string;
|
|
114
|
+
blackAlpha5: string;
|
|
111
115
|
blackAlpha20: string;
|
|
112
116
|
};
|
|
113
117
|
bg: {
|
|
@@ -189,7 +193,9 @@ declare const getSizeStyles: (theme: {
|
|
|
189
193
|
'5x': string;
|
|
190
194
|
'6x': string;
|
|
191
195
|
'8x': string;
|
|
196
|
+
'10x': string;
|
|
192
197
|
'12x': string;
|
|
198
|
+
'14x': string;
|
|
193
199
|
'16x': string;
|
|
194
200
|
'20x': string;
|
|
195
201
|
'24x': string;
|
|
@@ -19,7 +19,9 @@ declare const getSizeStyles: (theme: {
|
|
|
19
19
|
'5x': string;
|
|
20
20
|
'6x': string;
|
|
21
21
|
'8x': string;
|
|
22
|
+
'10x': string;
|
|
22
23
|
'12x': string;
|
|
24
|
+
'14x': string;
|
|
23
25
|
'16x': string;
|
|
24
26
|
'20x': string;
|
|
25
27
|
'24x': string;
|
|
@@ -60,6 +62,7 @@ declare const getSizeStyles: (theme: {
|
|
|
60
62
|
gray30: string;
|
|
61
63
|
gray20: string;
|
|
62
64
|
gray10: string;
|
|
65
|
+
pink: string;
|
|
63
66
|
uiPink: string;
|
|
64
67
|
uiPinkDark: string;
|
|
65
68
|
uiPinkLight: string;
|
|
@@ -72,15 +75,15 @@ declare const getSizeStyles: (theme: {
|
|
|
72
75
|
softPink: string;
|
|
73
76
|
warmYellow: string;
|
|
74
77
|
softYellow: string;
|
|
75
|
-
red10: string;
|
|
76
|
-
red20: string;
|
|
77
|
-
red30: string;
|
|
78
|
-
red40: string;
|
|
79
|
-
red50: string;
|
|
80
|
-
red60: string;
|
|
81
|
-
red70: string;
|
|
82
|
-
red80: string;
|
|
83
78
|
red90: string;
|
|
79
|
+
red80: string;
|
|
80
|
+
red70: string;
|
|
81
|
+
red60: string;
|
|
82
|
+
red50: string;
|
|
83
|
+
red40: string;
|
|
84
|
+
red30: string;
|
|
85
|
+
red20: string;
|
|
86
|
+
red10: string;
|
|
84
87
|
green90: string;
|
|
85
88
|
green80: string;
|
|
86
89
|
green70: string;
|
|
@@ -108,6 +111,7 @@ declare const getSizeStyles: (theme: {
|
|
|
108
111
|
yellow30: string;
|
|
109
112
|
yellow20: string;
|
|
110
113
|
yellow10: string;
|
|
114
|
+
blackAlpha5: string;
|
|
111
115
|
blackAlpha20: string;
|
|
112
116
|
};
|
|
113
117
|
bg: {
|
|
@@ -189,7 +193,9 @@ declare const getSizeStyles: (theme: {
|
|
|
189
193
|
'5x': string;
|
|
190
194
|
'6x': string;
|
|
191
195
|
'8x': string;
|
|
196
|
+
'10x': string;
|
|
192
197
|
'12x': string;
|
|
198
|
+
'14x': string;
|
|
193
199
|
'16x': string;
|
|
194
200
|
'20x': string;
|
|
195
201
|
'24x': string;
|
|
@@ -14,6 +14,11 @@ interface TextareaOptions extends TextareaBaseOptions {
|
|
|
14
14
|
* Text that provides additional guidance to the user
|
|
15
15
|
*/
|
|
16
16
|
helperText?: string;
|
|
17
|
+
/**
|
|
18
|
+
* If `true`, the input will display an optional indicator.
|
|
19
|
+
* If the `isRequired` prop is also `true`, this prop will be ignored.
|
|
20
|
+
*/
|
|
21
|
+
isOptional?: boolean;
|
|
17
22
|
}
|
|
18
23
|
type OmittedProps = 'children' | 'readOnly' | 'size';
|
|
19
24
|
export interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps>, TextareaOptions {
|
|
@@ -16,7 +16,9 @@ export declare const getVariantStyles: (theme: {
|
|
|
16
16
|
'5x': string;
|
|
17
17
|
'6x': string;
|
|
18
18
|
'8x': string;
|
|
19
|
+
'10x': string;
|
|
19
20
|
'12x': string;
|
|
21
|
+
'14x': string;
|
|
20
22
|
'16x': string;
|
|
21
23
|
'20x': string;
|
|
22
24
|
'24x': string;
|
|
@@ -57,6 +59,7 @@ export declare const getVariantStyles: (theme: {
|
|
|
57
59
|
gray30: string;
|
|
58
60
|
gray20: string;
|
|
59
61
|
gray10: string;
|
|
62
|
+
pink: string;
|
|
60
63
|
uiPink: string;
|
|
61
64
|
uiPinkDark: string;
|
|
62
65
|
uiPinkLight: string;
|
|
@@ -69,15 +72,15 @@ export declare const getVariantStyles: (theme: {
|
|
|
69
72
|
softPink: string;
|
|
70
73
|
warmYellow: string;
|
|
71
74
|
softYellow: string;
|
|
72
|
-
red10: string;
|
|
73
|
-
red20: string;
|
|
74
|
-
red30: string;
|
|
75
|
-
red40: string;
|
|
76
|
-
red50: string;
|
|
77
|
-
red60: string;
|
|
78
|
-
red70: string;
|
|
79
|
-
red80: string;
|
|
80
75
|
red90: string;
|
|
76
|
+
red80: string;
|
|
77
|
+
red70: string;
|
|
78
|
+
red60: string;
|
|
79
|
+
red50: string;
|
|
80
|
+
red40: string;
|
|
81
|
+
red30: string;
|
|
82
|
+
red20: string;
|
|
83
|
+
red10: string;
|
|
81
84
|
green90: string;
|
|
82
85
|
green80: string;
|
|
83
86
|
green70: string;
|
|
@@ -105,6 +108,7 @@ export declare const getVariantStyles: (theme: {
|
|
|
105
108
|
yellow30: string;
|
|
106
109
|
yellow20: string;
|
|
107
110
|
yellow10: string;
|
|
111
|
+
blackAlpha5: string;
|
|
108
112
|
blackAlpha20: string;
|
|
109
113
|
};
|
|
110
114
|
bg: {
|
|
@@ -186,7 +190,9 @@ export declare const getVariantStyles: (theme: {
|
|
|
186
190
|
'5x': string;
|
|
187
191
|
'6x': string;
|
|
188
192
|
'8x': string;
|
|
193
|
+
'10x': string;
|
|
189
194
|
'12x': string;
|
|
195
|
+
'14x': string;
|
|
190
196
|
'16x': string;
|
|
191
197
|
'20x': string;
|
|
192
198
|
'24x': string;
|
|
@@ -15,7 +15,9 @@ export declare const getFormFieldBaseStyles: (theme: {
|
|
|
15
15
|
'5x': string;
|
|
16
16
|
'6x': string;
|
|
17
17
|
'8x': string;
|
|
18
|
+
'10x': string;
|
|
18
19
|
'12x': string;
|
|
20
|
+
'14x': string;
|
|
19
21
|
'16x': string;
|
|
20
22
|
'20x': string;
|
|
21
23
|
'24x': string;
|
|
@@ -56,6 +58,7 @@ export declare const getFormFieldBaseStyles: (theme: {
|
|
|
56
58
|
gray30: string;
|
|
57
59
|
gray20: string;
|
|
58
60
|
gray10: string;
|
|
61
|
+
pink: string;
|
|
59
62
|
uiPink: string;
|
|
60
63
|
uiPinkDark: string;
|
|
61
64
|
uiPinkLight: string;
|
|
@@ -68,15 +71,15 @@ export declare const getFormFieldBaseStyles: (theme: {
|
|
|
68
71
|
softPink: string;
|
|
69
72
|
warmYellow: string;
|
|
70
73
|
softYellow: string;
|
|
71
|
-
red10: string;
|
|
72
|
-
red20: string;
|
|
73
|
-
red30: string;
|
|
74
|
-
red40: string;
|
|
75
|
-
red50: string;
|
|
76
|
-
red60: string;
|
|
77
|
-
red70: string;
|
|
78
|
-
red80: string;
|
|
79
74
|
red90: string;
|
|
75
|
+
red80: string;
|
|
76
|
+
red70: string;
|
|
77
|
+
red60: string;
|
|
78
|
+
red50: string;
|
|
79
|
+
red40: string;
|
|
80
|
+
red30: string;
|
|
81
|
+
red20: string;
|
|
82
|
+
red10: string;
|
|
80
83
|
green90: string;
|
|
81
84
|
green80: string;
|
|
82
85
|
green70: string;
|
|
@@ -104,6 +107,7 @@ export declare const getFormFieldBaseStyles: (theme: {
|
|
|
104
107
|
yellow30: string;
|
|
105
108
|
yellow20: string;
|
|
106
109
|
yellow10: string;
|
|
110
|
+
blackAlpha5: string;
|
|
107
111
|
blackAlpha20: string;
|
|
108
112
|
};
|
|
109
113
|
bg: {
|
|
@@ -185,7 +189,9 @@ export declare const getFormFieldBaseStyles: (theme: {
|
|
|
185
189
|
'5x': string;
|
|
186
190
|
'6x': string;
|
|
187
191
|
'8x': string;
|
|
192
|
+
'10x': string;
|
|
188
193
|
'12x': string;
|
|
194
|
+
'14x': string;
|
|
189
195
|
'16x': string;
|
|
190
196
|
'20x': string;
|
|
191
197
|
'24x': string;
|
|
@@ -11,6 +11,7 @@ export declare const colors: {
|
|
|
11
11
|
gray30: string;
|
|
12
12
|
gray20: string;
|
|
13
13
|
gray10: string;
|
|
14
|
+
pink: string;
|
|
14
15
|
uiPink: string;
|
|
15
16
|
uiPinkDark: string;
|
|
16
17
|
uiPinkLight: string;
|
|
@@ -23,15 +24,15 @@ export declare const colors: {
|
|
|
23
24
|
softPink: string;
|
|
24
25
|
warmYellow: string;
|
|
25
26
|
softYellow: string;
|
|
26
|
-
red10: string;
|
|
27
|
-
red20: string;
|
|
28
|
-
red30: string;
|
|
29
|
-
red40: string;
|
|
30
|
-
red50: string;
|
|
31
|
-
red60: string;
|
|
32
|
-
red70: string;
|
|
33
|
-
red80: string;
|
|
34
27
|
red90: string;
|
|
28
|
+
red80: string;
|
|
29
|
+
red70: string;
|
|
30
|
+
red60: string;
|
|
31
|
+
red50: string;
|
|
32
|
+
red40: string;
|
|
33
|
+
red30: string;
|
|
34
|
+
red20: string;
|
|
35
|
+
red10: string;
|
|
35
36
|
green90: string;
|
|
36
37
|
green80: string;
|
|
37
38
|
green70: string;
|
|
@@ -59,6 +60,7 @@ export declare const colors: {
|
|
|
59
60
|
yellow30: string;
|
|
60
61
|
yellow20: string;
|
|
61
62
|
yellow10: string;
|
|
63
|
+
blackAlpha5: string;
|
|
62
64
|
blackAlpha20: string;
|
|
63
65
|
};
|
|
64
66
|
bg: {
|
|
@@ -20,7 +20,9 @@ export declare const foundations: {
|
|
|
20
20
|
'5x': string;
|
|
21
21
|
'6x': string;
|
|
22
22
|
'8x': string;
|
|
23
|
+
'10x': string;
|
|
23
24
|
'12x': string;
|
|
25
|
+
'14x': string;
|
|
24
26
|
'16x': string;
|
|
25
27
|
'20x': string;
|
|
26
28
|
'24x': string;
|
|
@@ -61,6 +63,7 @@ export declare const foundations: {
|
|
|
61
63
|
gray30: string;
|
|
62
64
|
gray20: string;
|
|
63
65
|
gray10: string;
|
|
66
|
+
pink: string;
|
|
64
67
|
uiPink: string;
|
|
65
68
|
uiPinkDark: string;
|
|
66
69
|
uiPinkLight: string;
|
|
@@ -73,15 +76,15 @@ export declare const foundations: {
|
|
|
73
76
|
softPink: string;
|
|
74
77
|
warmYellow: string;
|
|
75
78
|
softYellow: string;
|
|
76
|
-
red10: string;
|
|
77
|
-
red20: string;
|
|
78
|
-
red30: string;
|
|
79
|
-
red40: string;
|
|
80
|
-
red50: string;
|
|
81
|
-
red60: string;
|
|
82
|
-
red70: string;
|
|
83
|
-
red80: string;
|
|
84
79
|
red90: string;
|
|
80
|
+
red80: string;
|
|
81
|
+
red70: string;
|
|
82
|
+
red60: string;
|
|
83
|
+
red50: string;
|
|
84
|
+
red40: string;
|
|
85
|
+
red30: string;
|
|
86
|
+
red20: string;
|
|
87
|
+
red10: string;
|
|
85
88
|
green90: string;
|
|
86
89
|
green80: string;
|
|
87
90
|
green70: string;
|
|
@@ -109,6 +112,7 @@ export declare const foundations: {
|
|
|
109
112
|
yellow30: string;
|
|
110
113
|
yellow20: string;
|
|
111
114
|
yellow10: string;
|
|
115
|
+
blackAlpha5: string;
|
|
112
116
|
blackAlpha20: string;
|
|
113
117
|
};
|
|
114
118
|
bg: {
|
|
@@ -190,7 +194,9 @@ export declare const foundations: {
|
|
|
190
194
|
'5x': string;
|
|
191
195
|
'6x': string;
|
|
192
196
|
'8x': string;
|
|
197
|
+
'10x': string;
|
|
193
198
|
'12x': string;
|
|
199
|
+
'14x': string;
|
|
194
200
|
'16x': string;
|
|
195
201
|
'20x': string;
|
|
196
202
|
'24x': string;
|
|
@@ -15,8 +15,12 @@ export declare const spacing: {
|
|
|
15
15
|
'6x': string;
|
|
16
16
|
/** 2rem (32px) */
|
|
17
17
|
'8x': string;
|
|
18
|
+
/** 2.5rem (40px) */
|
|
19
|
+
'10x': string;
|
|
18
20
|
/** 3rem (48px) */
|
|
19
21
|
'12x': string;
|
|
22
|
+
/** 3.5rem (56px) */
|
|
23
|
+
'14x': string;
|
|
20
24
|
/** 4rem (64px) */
|
|
21
25
|
'16x': string;
|
|
22
26
|
/** 5rem (80px) */
|