@umami/react-zen 0.8.0 → 0.10.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/index.css +283 -144
- package/dist/index.d.ts +778 -750
- package/dist/index.js +619 -546
- package/dist/index.mjs +574 -560
- package/dist/zen.css +45 -35
- package/package.json +2 -2
package/dist/index.css
CHANGED
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
.Box_font-size-xl {
|
|
34
34
|
font-size: var(--font-size-xl);
|
|
35
35
|
}
|
|
36
|
-
.Box_border-
|
|
37
|
-
border
|
|
36
|
+
.Box_border-sm {
|
|
37
|
+
border: var(--border-sm) solid var(--border-color);
|
|
38
38
|
}
|
|
39
|
-
.Box_border-
|
|
40
|
-
border
|
|
39
|
+
.Box_border-md {
|
|
40
|
+
border: var(--border-md) solid var(--border-color);
|
|
41
41
|
}
|
|
42
|
-
.Box_border-
|
|
43
|
-
border
|
|
42
|
+
.Box_border-lg {
|
|
43
|
+
border: var(--border-lg) solid var(--border-color);
|
|
44
44
|
}
|
|
45
45
|
.Box_border-radius-sm {
|
|
46
46
|
border-radius: var(--border-radius-sm);
|
|
@@ -54,21 +54,6 @@
|
|
|
54
54
|
.Box_border-radius-full {
|
|
55
55
|
border-radius: 100%;
|
|
56
56
|
}
|
|
57
|
-
.Box_gap-xs {
|
|
58
|
-
gap: var(--gap-xs);
|
|
59
|
-
}
|
|
60
|
-
.Box_gap-sm {
|
|
61
|
-
gap: var(--gap-sm);
|
|
62
|
-
}
|
|
63
|
-
.Box_gap-md {
|
|
64
|
-
gap: var(--gap-md);
|
|
65
|
-
}
|
|
66
|
-
.Box_gap-lg {
|
|
67
|
-
gap: var(--gap-lg);
|
|
68
|
-
}
|
|
69
|
-
.Box_gap-xl {
|
|
70
|
-
gap: var(--gap-xl);
|
|
71
|
-
}
|
|
72
57
|
.Box_shadow-1 {
|
|
73
58
|
box-shadow: var(--box-shadow-1);
|
|
74
59
|
}
|
|
@@ -87,6 +72,183 @@
|
|
|
87
72
|
.Box_shadow-6 {
|
|
88
73
|
box-shadow: var(--box-shadow-6);
|
|
89
74
|
}
|
|
75
|
+
.Box_background-color-50 {
|
|
76
|
+
background-color: var(--base-color-50);
|
|
77
|
+
}
|
|
78
|
+
.Box_background-color-100 {
|
|
79
|
+
background-color: var(--base-color-100);
|
|
80
|
+
}
|
|
81
|
+
.Box_background-color-200 {
|
|
82
|
+
background-color: var(--base-color-200);
|
|
83
|
+
}
|
|
84
|
+
.Box_background-color-300 {
|
|
85
|
+
background-color: var(--base-color-300);
|
|
86
|
+
}
|
|
87
|
+
.Box_background-color-400 {
|
|
88
|
+
background-color: var(--base-color-400);
|
|
89
|
+
}
|
|
90
|
+
.Box_background-color-500 {
|
|
91
|
+
background-color: var(--base-color-500);
|
|
92
|
+
}
|
|
93
|
+
.Box_background-color-600 {
|
|
94
|
+
background-color: var(--base-color-600);
|
|
95
|
+
}
|
|
96
|
+
.Box_background-color-700 {
|
|
97
|
+
background-color: var(--base-color-700);
|
|
98
|
+
}
|
|
99
|
+
.Box_background-color-800 {
|
|
100
|
+
background-color: var(--base-color-800);
|
|
101
|
+
}
|
|
102
|
+
.Box_background-color-900 {
|
|
103
|
+
background-color: var(--base-color-900);
|
|
104
|
+
}
|
|
105
|
+
.Box_background-color-950 {
|
|
106
|
+
background-color: var(--base-color-950);
|
|
107
|
+
}
|
|
108
|
+
.Box_padding-1,
|
|
109
|
+
.Box_margin-1 {
|
|
110
|
+
padding: var(--spacing-1);
|
|
111
|
+
}
|
|
112
|
+
.Box_padding-2,
|
|
113
|
+
.Box_margin-2 {
|
|
114
|
+
padding: var(--spacing-2);
|
|
115
|
+
}
|
|
116
|
+
.Box_padding-3,
|
|
117
|
+
.Box_margin-3 {
|
|
118
|
+
padding: var(--spacing-3);
|
|
119
|
+
}
|
|
120
|
+
.Box_padding-4,
|
|
121
|
+
.Box_margin-4 {
|
|
122
|
+
padding: var(--spacing-4);
|
|
123
|
+
}
|
|
124
|
+
.Box_padding-5,
|
|
125
|
+
.Box_margin-5 {
|
|
126
|
+
padding: var(--spacing-5);
|
|
127
|
+
}
|
|
128
|
+
.Box_padding-6,
|
|
129
|
+
.Box_margin-6 {
|
|
130
|
+
padding: var(--spacing-6);
|
|
131
|
+
}
|
|
132
|
+
.Box_padding-7,
|
|
133
|
+
.Box_margin-7 {
|
|
134
|
+
padding: var(--spacing-7);
|
|
135
|
+
}
|
|
136
|
+
.Box_padding-8,
|
|
137
|
+
.Box_margin-8 {
|
|
138
|
+
padding: var(--spacing-8);
|
|
139
|
+
}
|
|
140
|
+
.Box_padding-9,
|
|
141
|
+
.Box_margin-9 {
|
|
142
|
+
padding: var(--spacing-9);
|
|
143
|
+
}
|
|
144
|
+
.Box_padding-10,
|
|
145
|
+
.Box_margin-10 {
|
|
146
|
+
padding: var(--spacing-10);
|
|
147
|
+
}
|
|
148
|
+
.Box_padding-11,
|
|
149
|
+
.Box_margin-11 {
|
|
150
|
+
padding: var(--spacing-11);
|
|
151
|
+
}
|
|
152
|
+
.Box_padding-12,
|
|
153
|
+
.Box_margin-12 {
|
|
154
|
+
padding: var(--spacing-12);
|
|
155
|
+
}
|
|
156
|
+
.Box_padding-x-1,
|
|
157
|
+
.Box_margin-x-1 {
|
|
158
|
+
padding: 0 var(--spacing-1);
|
|
159
|
+
}
|
|
160
|
+
.Box_padding-x-2,
|
|
161
|
+
.Box_margin-x-2 {
|
|
162
|
+
padding: 0 var(--spacing-2);
|
|
163
|
+
}
|
|
164
|
+
.Box_padding-x-3,
|
|
165
|
+
.Box_margin-x-3 {
|
|
166
|
+
padding: 0 var(--spacing-3);
|
|
167
|
+
}
|
|
168
|
+
.Box_padding-x-4,
|
|
169
|
+
.Box_margin-x-4 {
|
|
170
|
+
padding: 0 var(--spacing-4);
|
|
171
|
+
}
|
|
172
|
+
.Box_padding-x-5,
|
|
173
|
+
.Box_margin-x-5 {
|
|
174
|
+
padding: 0 var(--spacing-5);
|
|
175
|
+
}
|
|
176
|
+
.Box_padding-x-6,
|
|
177
|
+
.Box_margin-x-6 {
|
|
178
|
+
padding: 0 var(--spacing-6);
|
|
179
|
+
}
|
|
180
|
+
.Box_padding-x-7,
|
|
181
|
+
.Box_margin-x-7 {
|
|
182
|
+
padding: 0 var(--spacing-7);
|
|
183
|
+
}
|
|
184
|
+
.Box_padding-x-8,
|
|
185
|
+
.Box_margin-x-8 {
|
|
186
|
+
padding: 0 var(--spacing-8);
|
|
187
|
+
}
|
|
188
|
+
.Box_padding-x-9,
|
|
189
|
+
.Box_margin-x-9 {
|
|
190
|
+
padding: 0 var(--spacing-9);
|
|
191
|
+
}
|
|
192
|
+
.Box_padding-x-10,
|
|
193
|
+
.Box_margin-x-10 {
|
|
194
|
+
padding: 0 var(--spacing-10);
|
|
195
|
+
}
|
|
196
|
+
.Box_padding-x-11,
|
|
197
|
+
.Box_margin-x-11 {
|
|
198
|
+
padding: 0 var(--spacing-11);
|
|
199
|
+
}
|
|
200
|
+
.Box_padding-x-12,
|
|
201
|
+
.Box_margin-x-12 {
|
|
202
|
+
padding: 0 var(--spacing-12);
|
|
203
|
+
}
|
|
204
|
+
.Box_padding-y-1,
|
|
205
|
+
.Box_margin-y-1 {
|
|
206
|
+
padding: var(--spacing-1) 0;
|
|
207
|
+
}
|
|
208
|
+
.Box_padding-y-2,
|
|
209
|
+
.Box_margin-y-2 {
|
|
210
|
+
padding: var(--spacing-2) 0;
|
|
211
|
+
}
|
|
212
|
+
.Box_padding-y-3,
|
|
213
|
+
.Box_margin-y-3 {
|
|
214
|
+
padding: var(--spacing-3) 0;
|
|
215
|
+
}
|
|
216
|
+
.Box_padding-y-4,
|
|
217
|
+
.Box_margin-y-4 {
|
|
218
|
+
padding: var(--spacing-4) 0;
|
|
219
|
+
}
|
|
220
|
+
.Box_padding-y-5,
|
|
221
|
+
.Box_margin-y-5 {
|
|
222
|
+
padding: var(--spacing-5) 0;
|
|
223
|
+
}
|
|
224
|
+
.Box_padding-y-6,
|
|
225
|
+
.Box_margin-y-6 {
|
|
226
|
+
padding: var(--spacing-6) 0;
|
|
227
|
+
}
|
|
228
|
+
.Box_padding-y-7,
|
|
229
|
+
.Box_margin-y-7 {
|
|
230
|
+
padding: var(--spacing-7) 0;
|
|
231
|
+
}
|
|
232
|
+
.Box_padding-y-8,
|
|
233
|
+
.Box_margin-y-8 {
|
|
234
|
+
padding: var(--spacing-8) 0;
|
|
235
|
+
}
|
|
236
|
+
.Box_padding-y-9,
|
|
237
|
+
.Box_margin-y-9 {
|
|
238
|
+
padding: var(--spacing-9) 0;
|
|
239
|
+
}
|
|
240
|
+
.Box_padding-y-10,
|
|
241
|
+
.Box_margin-y-10 {
|
|
242
|
+
padding: var(--spacing-10) 0;
|
|
243
|
+
}
|
|
244
|
+
.Box_padding-y-11,
|
|
245
|
+
.Box_margin-y-11 {
|
|
246
|
+
padding: var(--spacing-11) 0;
|
|
247
|
+
}
|
|
248
|
+
.Box_padding-y-12,
|
|
249
|
+
.Box_margin-y-12 {
|
|
250
|
+
padding: var(--spacing-12) 0;
|
|
251
|
+
}
|
|
90
252
|
|
|
91
253
|
/* src/components/Flexbox.module.css */
|
|
92
254
|
.Flexbox_flexbox {
|
|
@@ -320,41 +482,20 @@
|
|
|
320
482
|
.Flexbox_inline {
|
|
321
483
|
display: inline-flex;
|
|
322
484
|
}
|
|
323
|
-
.
|
|
324
|
-
gap: var(--
|
|
325
|
-
}
|
|
326
|
-
.Flexbox_spacing2 {
|
|
327
|
-
gap: var(--spacing-2);
|
|
328
|
-
}
|
|
329
|
-
.Flexbox_spacing3 {
|
|
330
|
-
gap: var(--spacing-3);
|
|
331
|
-
}
|
|
332
|
-
.Flexbox_spacing4 {
|
|
333
|
-
gap: var(--spacing-4);
|
|
334
|
-
}
|
|
335
|
-
.Flexbox_spacing5 {
|
|
336
|
-
gap: var(--spacing-5);
|
|
337
|
-
}
|
|
338
|
-
.Flexbox_spacing6 {
|
|
339
|
-
gap: var(--spacing-6);
|
|
340
|
-
}
|
|
341
|
-
.Flexbox_spacing7 {
|
|
342
|
-
gap: var(--spacing-7);
|
|
343
|
-
}
|
|
344
|
-
.Flexbox_spacing8 {
|
|
345
|
-
gap: var(--spacing-8);
|
|
485
|
+
.Flexbox_gap-xs {
|
|
486
|
+
gap: var(--gap-xs);
|
|
346
487
|
}
|
|
347
|
-
.
|
|
348
|
-
gap: var(--
|
|
488
|
+
.Flexbox_gap-sm {
|
|
489
|
+
gap: var(--gap-sm);
|
|
349
490
|
}
|
|
350
|
-
.
|
|
351
|
-
gap: var(--
|
|
491
|
+
.Flexbox_gap-md {
|
|
492
|
+
gap: var(--gap-md);
|
|
352
493
|
}
|
|
353
|
-
.
|
|
354
|
-
gap: var(--
|
|
494
|
+
.Flexbox_gap-lg {
|
|
495
|
+
gap: var(--gap-lg);
|
|
355
496
|
}
|
|
356
|
-
.
|
|
357
|
-
gap: var(--
|
|
497
|
+
.Flexbox_gap-xl {
|
|
498
|
+
gap: var(--gap-xl);
|
|
358
499
|
}
|
|
359
500
|
|
|
360
501
|
/* src/components/Icon.module.css */
|
|
@@ -414,19 +555,19 @@
|
|
|
414
555
|
}
|
|
415
556
|
.AlertBanner_error {
|
|
416
557
|
color: var(--light-color);
|
|
417
|
-
background-color: var(--danger-
|
|
558
|
+
background-color: var(--danger-color);
|
|
418
559
|
border: 0;
|
|
419
560
|
}
|
|
420
561
|
.AlertBanner_error .AlertBanner_close {
|
|
421
562
|
color: var(--light-color);
|
|
422
563
|
}
|
|
423
564
|
.AlertBanner_info {
|
|
424
|
-
color: var(--primary-
|
|
425
|
-
background-color: var(--primary-
|
|
565
|
+
color: var(--primary-font-color);
|
|
566
|
+
background-color: var(--primary-color);
|
|
426
567
|
border: 0;
|
|
427
568
|
}
|
|
428
569
|
.AlertBanner_info .AlertBanner_close {
|
|
429
|
-
color: var(--primary-
|
|
570
|
+
color: var(--primary-font-color);
|
|
430
571
|
}
|
|
431
572
|
|
|
432
573
|
/* src/components/Text.module.css */
|
|
@@ -481,7 +622,7 @@
|
|
|
481
622
|
}
|
|
482
623
|
|
|
483
624
|
/* src/components/form/FormField.module.css */
|
|
484
|
-
.
|
|
625
|
+
.FormField_field {
|
|
485
626
|
display: flex;
|
|
486
627
|
flex-direction: column;
|
|
487
628
|
}
|
|
@@ -490,7 +631,7 @@
|
|
|
490
631
|
line-height: 1.8rem;
|
|
491
632
|
}
|
|
492
633
|
.FormField_error {
|
|
493
|
-
color: var(--danger-
|
|
634
|
+
color: var(--danger-color);
|
|
494
635
|
line-height: 1.8rem;
|
|
495
636
|
font-weight: 600;
|
|
496
637
|
}
|
|
@@ -519,28 +660,28 @@
|
|
|
519
660
|
pointer-events: none;
|
|
520
661
|
}
|
|
521
662
|
.Button_button.Button_primary {
|
|
522
|
-
color: var(--primary-
|
|
523
|
-
background: var(--primary-
|
|
663
|
+
color: var(--primary-font-color);
|
|
664
|
+
background: var(--primary-color);
|
|
524
665
|
}
|
|
525
666
|
.Button_button.Button_primary:hover {
|
|
526
|
-
background: color-mix(in srgb, var(--primary-
|
|
667
|
+
background: color-mix(in srgb, var(--primary-color), 10% var(--background-color));
|
|
527
668
|
}
|
|
528
669
|
.Button_button.Button_primary:active {
|
|
529
|
-
background: color-mix(in srgb, var(--primary-
|
|
670
|
+
background: color-mix(in srgb, var(--primary-color), 20% var(--background-color));
|
|
530
671
|
}
|
|
531
672
|
.Button_button.Button_primary:disabled {
|
|
532
|
-
color: var(--primary-
|
|
673
|
+
color: var(--primary-font-color);
|
|
533
674
|
background: var(--base-color-500);
|
|
534
675
|
}
|
|
535
676
|
.Button_button.Button_secondary {
|
|
536
|
-
color: var(--secondary-
|
|
537
|
-
background: var(--secondary-
|
|
677
|
+
color: var(--secondary-font-color);
|
|
678
|
+
background: var(--secondary-color);
|
|
538
679
|
}
|
|
539
680
|
.Button_button.Button_secondary:hover {
|
|
540
|
-
background: color-mix(in srgb, var(--secondary-
|
|
681
|
+
background: color-mix(in srgb, var(--secondary-color), 5% var(--font-color));
|
|
541
682
|
}
|
|
542
683
|
.Button_button.Button_secondary:active {
|
|
543
|
-
background: color-mix(in srgb, var(--secondary-
|
|
684
|
+
background: color-mix(in srgb, var(--secondary-color), 10% var(--font-color));
|
|
544
685
|
}
|
|
545
686
|
.Button_button.Button_secondary:disabled {
|
|
546
687
|
color: var(--font-faded-color);
|
|
@@ -551,32 +692,32 @@
|
|
|
551
692
|
box-shadow: var(--box-shadow-1);
|
|
552
693
|
}
|
|
553
694
|
.Button_button.Button_outline:hover {
|
|
554
|
-
background: var(--secondary-
|
|
695
|
+
background: var(--secondary-color);
|
|
555
696
|
}
|
|
556
697
|
.Button_button.Button_outline:active {
|
|
557
|
-
background: color-mix(in srgb, var(--secondary-
|
|
698
|
+
background: color-mix(in srgb, var(--secondary-color), 5% var(--font-color));
|
|
558
699
|
}
|
|
559
700
|
.Button_button.Button_quiet {
|
|
560
701
|
background: transparent;
|
|
561
702
|
}
|
|
562
703
|
.Button_button.Button_quiet:hover {
|
|
563
|
-
background: var(--secondary-
|
|
704
|
+
background: var(--secondary-color);
|
|
564
705
|
}
|
|
565
706
|
.Button_button.Button_quiet:active {
|
|
566
|
-
background: color-mix(in srgb, var(--secondary-
|
|
707
|
+
background: color-mix(in srgb, var(--secondary-color), 5% var(--font-color));
|
|
567
708
|
}
|
|
568
709
|
.Button_button.Button_danger {
|
|
569
710
|
color: var(--light-color);
|
|
570
|
-
background: var(--danger-
|
|
711
|
+
background: var(--danger-color);
|
|
571
712
|
}
|
|
572
713
|
.Button_button.Button_danger:hover {
|
|
573
|
-
background: color-mix(in srgb, var(--danger-
|
|
714
|
+
background: color-mix(in srgb, var(--danger-color), 6% black);
|
|
574
715
|
}
|
|
575
716
|
.Button_button.Button_danger:active {
|
|
576
|
-
background: color-mix(in srgb, var(--danger-
|
|
717
|
+
background: color-mix(in srgb, var(--danger-color), 12% black);
|
|
577
718
|
}
|
|
578
719
|
.Button_button.Button_danger:disabled {
|
|
579
|
-
color: var(--primary-
|
|
720
|
+
color: var(--primary-font-color);
|
|
580
721
|
background: var(--base-color-500);
|
|
581
722
|
}
|
|
582
723
|
.Button_button.Button_xs {
|
|
@@ -618,10 +759,10 @@
|
|
|
618
759
|
animation: Spinner_spinner-rotate 1.6s linear infinite;
|
|
619
760
|
}
|
|
620
761
|
.Spinner_track {
|
|
621
|
-
stroke: var(--input-
|
|
762
|
+
stroke: var(--input-background-color);
|
|
622
763
|
}
|
|
623
764
|
.Spinner_fill {
|
|
624
|
-
stroke: var(--primary-
|
|
765
|
+
stroke: var(--primary-color);
|
|
625
766
|
stroke-linecap: square;
|
|
626
767
|
stroke-dasharray: 1, 200;
|
|
627
768
|
stroke-dashoffset: 0;
|
|
@@ -824,8 +965,8 @@
|
|
|
824
965
|
forced-color-adjust: none;
|
|
825
966
|
}
|
|
826
967
|
.Calendar_cell:hover {
|
|
827
|
-
color: var(--highlight-
|
|
828
|
-
background: var(--highlight-
|
|
968
|
+
color: var(--highlight-font-color);
|
|
969
|
+
background: var(--highlight-color);
|
|
829
970
|
}
|
|
830
971
|
.Calendar_cell[data-outside-month] {
|
|
831
972
|
display: none;
|
|
@@ -835,9 +976,9 @@
|
|
|
835
976
|
outline-offset: 2px;
|
|
836
977
|
}
|
|
837
978
|
.Calendar_cell[data-selected] {
|
|
838
|
-
color: var(--primary-
|
|
839
|
-
border-color: var(--primary-
|
|
840
|
-
background: var(--primary-
|
|
979
|
+
color: var(--primary-font-color);
|
|
980
|
+
border-color: var(--primary-color);
|
|
981
|
+
background: var(--primary-color);
|
|
841
982
|
}
|
|
842
983
|
|
|
843
984
|
/* src/components/Checkbox.module.css */
|
|
@@ -859,13 +1000,15 @@
|
|
|
859
1000
|
width: 23px;
|
|
860
1001
|
transition: all 0.2s;
|
|
861
1002
|
cursor: pointer;
|
|
1003
|
+
box-shadow: var(--box-shadow);
|
|
862
1004
|
}
|
|
863
1005
|
.Checkbox_icon {
|
|
864
1006
|
display: none;
|
|
865
1007
|
}
|
|
866
1008
|
.Checkbox_checkbox[data-selected] .Checkbox_box {
|
|
867
|
-
color: var(--primary-
|
|
868
|
-
background: var(--primary-
|
|
1009
|
+
color: var(--primary-font-color);
|
|
1010
|
+
background: var(--primary-color);
|
|
1011
|
+
border-color: var(--primary-color);
|
|
869
1012
|
}
|
|
870
1013
|
.Checkbox_checkbox[data-selected] .Checkbox_icon,
|
|
871
1014
|
.Checkbox_checkbox[data-indeterminate] .Checkbox_icon {
|
|
@@ -882,6 +1025,11 @@
|
|
|
882
1025
|
background: var(--input-disabled-color);
|
|
883
1026
|
pointer-events: none;
|
|
884
1027
|
}
|
|
1028
|
+
.Checkbox_checkbox[data-focused] .Checkbox_box,
|
|
1029
|
+
.Checkbox_checkbox[data-focused-visible] .Checkbox_box {
|
|
1030
|
+
border-color: transparent;
|
|
1031
|
+
outline: var(--outline);
|
|
1032
|
+
}
|
|
885
1033
|
|
|
886
1034
|
/* src/components/ListItem.module.css */
|
|
887
1035
|
.ListItem_item {
|
|
@@ -897,7 +1045,7 @@
|
|
|
897
1045
|
outline: none;
|
|
898
1046
|
}
|
|
899
1047
|
.ListItem_item:hover {
|
|
900
|
-
background: var(--highlight-
|
|
1048
|
+
background: var(--highlight-color);
|
|
901
1049
|
}
|
|
902
1050
|
.ListItem_item[data-selected] {
|
|
903
1051
|
font-weight: bold;
|
|
@@ -993,6 +1141,13 @@
|
|
|
993
1141
|
cursor: pointer;
|
|
994
1142
|
}
|
|
995
1143
|
|
|
1144
|
+
/* src/components/Label.module.css */
|
|
1145
|
+
.Label_label {
|
|
1146
|
+
color: var(--font-color);
|
|
1147
|
+
font-weight: 700;
|
|
1148
|
+
line-height: 2;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
996
1151
|
/* src/components/CopyButton.module.css */
|
|
997
1152
|
.CopyButton_icon {
|
|
998
1153
|
animation: CopyButton_copy-button 200ms;
|
|
@@ -1017,14 +1172,6 @@
|
|
|
1017
1172
|
.Input_field[data-disabled] .Input_input {
|
|
1018
1173
|
background: var(--input-disabled-color);
|
|
1019
1174
|
}
|
|
1020
|
-
.Input_label {
|
|
1021
|
-
color: var(--base-color-800);
|
|
1022
|
-
font-weight: 700;
|
|
1023
|
-
display: block;
|
|
1024
|
-
align-items: center;
|
|
1025
|
-
justify-content: flex-start;
|
|
1026
|
-
line-height: 2rem;
|
|
1027
|
-
}
|
|
1028
1175
|
.Input_input {
|
|
1029
1176
|
border: var(--border);
|
|
1030
1177
|
border-radius: var(--border-radius);
|
|
@@ -1122,7 +1269,6 @@
|
|
|
1122
1269
|
.Table_cell {
|
|
1123
1270
|
display: flex;
|
|
1124
1271
|
padding: var(--padding);
|
|
1125
|
-
overflow: hidden;
|
|
1126
1272
|
flex: 1;
|
|
1127
1273
|
}
|
|
1128
1274
|
.Table_start {
|
|
@@ -1228,11 +1374,6 @@
|
|
|
1228
1374
|
position: absolute;
|
|
1229
1375
|
}
|
|
1230
1376
|
|
|
1231
|
-
/* src/components/Label.module.css */
|
|
1232
|
-
.Label_label {
|
|
1233
|
-
font-weight: 700;
|
|
1234
|
-
}
|
|
1235
|
-
|
|
1236
1377
|
/* src/components/Loading.module.css */
|
|
1237
1378
|
.Loading_loading {
|
|
1238
1379
|
position: relative;
|
|
@@ -1271,7 +1412,7 @@
|
|
|
1271
1412
|
outline: none;
|
|
1272
1413
|
}
|
|
1273
1414
|
.MenuItem_item:hover {
|
|
1274
|
-
background: var(--highlight-
|
|
1415
|
+
background: var(--highlight-color);
|
|
1275
1416
|
}
|
|
1276
1417
|
.MenuItem_item[data-selected] {
|
|
1277
1418
|
font-weight: bold;
|
|
@@ -1362,7 +1503,7 @@
|
|
|
1362
1503
|
}
|
|
1363
1504
|
.ProgressBar_track {
|
|
1364
1505
|
height: 10px;
|
|
1365
|
-
background: var(--input-
|
|
1506
|
+
background: var(--input-background-color);
|
|
1366
1507
|
flex-basis: 100%;
|
|
1367
1508
|
width: fit-content;
|
|
1368
1509
|
border-radius: var(--border-radius);
|
|
@@ -1370,7 +1511,7 @@
|
|
|
1370
1511
|
min-width: 100px;
|
|
1371
1512
|
}
|
|
1372
1513
|
.ProgressBar_fill {
|
|
1373
|
-
background: var(--primary-
|
|
1514
|
+
background: var(--primary-color);
|
|
1374
1515
|
height: 10px;
|
|
1375
1516
|
}
|
|
1376
1517
|
.ProgressBar_value {
|
|
@@ -1393,10 +1534,10 @@
|
|
|
1393
1534
|
height: 96px;
|
|
1394
1535
|
}
|
|
1395
1536
|
.ProgressCircle_track {
|
|
1396
|
-
stroke: var(--input-
|
|
1537
|
+
stroke: var(--input-background-color);
|
|
1397
1538
|
}
|
|
1398
1539
|
.ProgressCircle_fill {
|
|
1399
|
-
stroke: var(--primary-
|
|
1540
|
+
stroke: var(--primary-color);
|
|
1400
1541
|
}
|
|
1401
1542
|
.ProgressCircle_value {
|
|
1402
1543
|
font-weight: 700;
|
|
@@ -1443,11 +1584,11 @@
|
|
|
1443
1584
|
border-color: var(--border-color);
|
|
1444
1585
|
}
|
|
1445
1586
|
.RadioGroup_radio[data-selected]:before {
|
|
1446
|
-
border-color: var(--primary-
|
|
1587
|
+
border-color: var(--primary-color);
|
|
1447
1588
|
border-width: 7px;
|
|
1448
1589
|
}
|
|
1449
1590
|
.RadioGroup_radio[data-selected][data-pressed]:before {
|
|
1450
|
-
border-color: var(--primary-
|
|
1591
|
+
border-color: var(--primary-color);
|
|
1451
1592
|
}
|
|
1452
1593
|
.RadioGroup_radio[data-disabled] {
|
|
1453
1594
|
color: var(--font-muted-color);
|
|
@@ -1512,19 +1653,14 @@
|
|
|
1512
1653
|
|
|
1513
1654
|
/* src/components/Slider.module.css */
|
|
1514
1655
|
.Slider_slider {
|
|
1515
|
-
display: grid;
|
|
1516
|
-
grid-template-areas: "label output" "track track";
|
|
1517
|
-
grid-template-columns: 1fr auto;
|
|
1518
1656
|
color: var(--font-color);
|
|
1519
1657
|
}
|
|
1520
|
-
.
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
grid-area: output;
|
|
1658
|
+
.Slider_header {
|
|
1659
|
+
display: flex;
|
|
1660
|
+
align-items: center;
|
|
1661
|
+
justify-content: space-between;
|
|
1525
1662
|
}
|
|
1526
1663
|
.Slider_track {
|
|
1527
|
-
grid-area: track;
|
|
1528
1664
|
position: relative;
|
|
1529
1665
|
}
|
|
1530
1666
|
.Slider_track:before {
|
|
@@ -1538,7 +1674,7 @@
|
|
|
1538
1674
|
display: block;
|
|
1539
1675
|
position: absolute;
|
|
1540
1676
|
height: 3px;
|
|
1541
|
-
background-color: var(--primary-
|
|
1677
|
+
background-color: var(--primary-color);
|
|
1542
1678
|
top: 50%;
|
|
1543
1679
|
transform: translateY(-50%);
|
|
1544
1680
|
}
|
|
@@ -1547,11 +1683,11 @@
|
|
|
1547
1683
|
height: 20px;
|
|
1548
1684
|
border-radius: 100%;
|
|
1549
1685
|
background: var(--background-color);
|
|
1550
|
-
border: 2px solid var(--primary-
|
|
1686
|
+
border: 2px solid var(--primary-color);
|
|
1551
1687
|
forced-color-adjust: none;
|
|
1552
1688
|
}
|
|
1553
1689
|
.Slider_thumb[data-dragging] {
|
|
1554
|
-
background: var(--highlight-
|
|
1690
|
+
background: var(--highlight-color);
|
|
1555
1691
|
}
|
|
1556
1692
|
.Slider_thumb[data-focus-visible] {
|
|
1557
1693
|
outline: 2px solid var(--font-color);
|
|
@@ -1562,7 +1698,7 @@
|
|
|
1562
1698
|
}
|
|
1563
1699
|
.Slider_slider[data-orientation=horizontal] .Slider_track {
|
|
1564
1700
|
height: 30px;
|
|
1565
|
-
|
|
1701
|
+
margin: 0 10px;
|
|
1566
1702
|
}
|
|
1567
1703
|
.Slider_slider[data-orientation=horizontal] .Slider_track:before {
|
|
1568
1704
|
height: 3px;
|
|
@@ -1587,8 +1723,7 @@
|
|
|
1587
1723
|
transform: translateX(-50%);
|
|
1588
1724
|
top: 0;
|
|
1589
1725
|
}
|
|
1590
|
-
.Slider_slider[data-orientation=vertical] .
|
|
1591
|
-
.Slider_slider[data-orientation=vertical] .Slider_output {
|
|
1726
|
+
.Slider_slider[data-orientation=vertical] .Slider_header {
|
|
1592
1727
|
display: none;
|
|
1593
1728
|
}
|
|
1594
1729
|
.Slider_slider[data-orientation=vertical] .Slider_track {
|
|
@@ -1598,7 +1733,7 @@
|
|
|
1598
1733
|
.Slider_slider[data-orientation=vertical] .Slider_track:before {
|
|
1599
1734
|
width: 3px;
|
|
1600
1735
|
height: 100%;
|
|
1601
|
-
background-color: var(--primary-
|
|
1736
|
+
background-color: var(--primary-color);
|
|
1602
1737
|
left: 50%;
|
|
1603
1738
|
transform: translateX(-50%);
|
|
1604
1739
|
}
|
|
@@ -1621,19 +1756,19 @@
|
|
|
1621
1756
|
position: relative;
|
|
1622
1757
|
}
|
|
1623
1758
|
.StatusLight_status.StatusLight_success {
|
|
1624
|
-
background: var(--success-
|
|
1759
|
+
background: var(--success-color);
|
|
1625
1760
|
}
|
|
1626
1761
|
.StatusLight_status.StatusLight_warning {
|
|
1627
|
-
background: var(--warning-
|
|
1762
|
+
background: var(--warning-color);
|
|
1628
1763
|
}
|
|
1629
1764
|
.StatusLight_status.StatusLight_error {
|
|
1630
|
-
background: var(--danger-
|
|
1765
|
+
background: var(--danger-color);
|
|
1631
1766
|
}
|
|
1632
1767
|
.StatusLight_status.StatusLight_active {
|
|
1633
|
-
background: var(--active-
|
|
1768
|
+
background: var(--active-color);
|
|
1634
1769
|
}
|
|
1635
1770
|
.StatusLight_status.StatusLight_inactive {
|
|
1636
|
-
background: var(--inactive-
|
|
1771
|
+
background: var(--inactive-color);
|
|
1637
1772
|
}
|
|
1638
1773
|
|
|
1639
1774
|
/* src/components/Switch.module.css */
|
|
@@ -1654,7 +1789,7 @@
|
|
|
1654
1789
|
height: calc(var(--knob-size) + var(--knob-border-size) * 2);
|
|
1655
1790
|
border: var(--knob-border-size) solid transparent;
|
|
1656
1791
|
border-radius: calc(var(--knob-size) + var(--knob-border-size) * 2);
|
|
1657
|
-
background: var(--input-
|
|
1792
|
+
background: var(--input-background-color);
|
|
1658
1793
|
transition: background-color 0.2s;
|
|
1659
1794
|
cursor: pointer;
|
|
1660
1795
|
}
|
|
@@ -1667,12 +1802,12 @@
|
|
|
1667
1802
|
box-shadow: var(--box-shadow-2);
|
|
1668
1803
|
}
|
|
1669
1804
|
.Switch_switch[data-selected] .Switch_track {
|
|
1670
|
-
border-color: var(--primary-
|
|
1671
|
-
background: var(--primary-
|
|
1805
|
+
border-color: var(--primary-color);
|
|
1806
|
+
background: var(--primary-color);
|
|
1672
1807
|
}
|
|
1673
1808
|
.Switch_switch[data-selected] .Switch_knob {
|
|
1674
1809
|
margin-left: var(--knob-size);
|
|
1675
|
-
border-color: var(--primary-
|
|
1810
|
+
border-color: var(--primary-color);
|
|
1676
1811
|
}
|
|
1677
1812
|
.Switch_switch[data-disabled] {
|
|
1678
1813
|
color: var(--font-faded-color);
|
|
@@ -1717,7 +1852,7 @@
|
|
|
1717
1852
|
}
|
|
1718
1853
|
.Tabs_tab[data-selected] {
|
|
1719
1854
|
color: var(--font-color);
|
|
1720
|
-
border-bottom: 2px solid var(--primary-
|
|
1855
|
+
border-bottom: 2px solid var(--primary-color);
|
|
1721
1856
|
}
|
|
1722
1857
|
.Tabs_tab[data-disabled] {
|
|
1723
1858
|
color: var(--font-faded-color);
|
|
@@ -1739,13 +1874,13 @@
|
|
|
1739
1874
|
.TextArea_textarea {
|
|
1740
1875
|
font-family: inherit;
|
|
1741
1876
|
}
|
|
1742
|
-
.
|
|
1877
|
+
.TextArea_resize-none textarea {
|
|
1743
1878
|
resize: none;
|
|
1744
1879
|
}
|
|
1745
|
-
.
|
|
1880
|
+
.TextArea_resize-horizontal textarea {
|
|
1746
1881
|
resize: horizontal;
|
|
1747
1882
|
}
|
|
1748
|
-
.
|
|
1883
|
+
.TextArea_resize-vertical textarea {
|
|
1749
1884
|
resize: vertical;
|
|
1750
1885
|
}
|
|
1751
1886
|
|
|
@@ -1832,13 +1967,13 @@
|
|
|
1832
1967
|
cursor: pointer;
|
|
1833
1968
|
}
|
|
1834
1969
|
.Toast_toast.Toast_info {
|
|
1835
|
-
color: var(--primary-
|
|
1836
|
-
background: var(--primary-
|
|
1970
|
+
color: var(--primary-font-color);
|
|
1971
|
+
background: var(--primary-color);
|
|
1837
1972
|
border: 0;
|
|
1838
1973
|
}
|
|
1839
1974
|
.Toast_toast.Toast_error {
|
|
1840
|
-
color: var(--danger-
|
|
1841
|
-
background: var(--danger-
|
|
1975
|
+
color: var(--danger-font-color);
|
|
1976
|
+
background: var(--danger-color);
|
|
1842
1977
|
border: 0;
|
|
1843
1978
|
}
|
|
1844
1979
|
@keyframes Toast_hide {
|
|
@@ -1887,11 +2022,15 @@
|
|
|
1887
2022
|
cursor: pointer;
|
|
1888
2023
|
}
|
|
1889
2024
|
.Toggle_toggle:hover {
|
|
1890
|
-
background: var(--highlight-
|
|
2025
|
+
background: var(--highlight-color);
|
|
1891
2026
|
}
|
|
1892
2027
|
.Toggle_toggle[data-selected] {
|
|
1893
|
-
color: var(--primary-
|
|
1894
|
-
background: var(--primary-
|
|
2028
|
+
color: var(--primary-font-color);
|
|
2029
|
+
background: var(--primary-color);
|
|
2030
|
+
}
|
|
2031
|
+
.Toggle_toggle:focus {
|
|
2032
|
+
border-color: transparent;
|
|
2033
|
+
outline: var(--outline);
|
|
1895
2034
|
}
|
|
1896
2035
|
|
|
1897
2036
|
/* src/components/ToggleGroup.module.css */
|
|
@@ -1917,11 +2056,11 @@
|
|
|
1917
2056
|
border-left: var(--border);
|
|
1918
2057
|
}
|
|
1919
2058
|
.ToggleGroup_item:hover {
|
|
1920
|
-
background-color: var(--highlight-
|
|
2059
|
+
background-color: var(--highlight-color);
|
|
1921
2060
|
}
|
|
1922
2061
|
.ToggleGroup_item[data-state=on] {
|
|
1923
2062
|
font-weight: 700;
|
|
1924
|
-
background-color: var(--highlight-
|
|
2063
|
+
background-color: var(--highlight-color);
|
|
1925
2064
|
font-size-adjust: 0.5;
|
|
1926
2065
|
}
|
|
1927
2066
|
.ToggleGroup_item:focus {
|