@umami/react-zen 0.9.0 → 0.11.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 +479 -141
- package/dist/index.d.ts +803 -751
- package/dist/index.js +3243 -2035
- package/dist/index.mjs +3232 -2024
- package/dist/zen.css +41 -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 {
|
|
@@ -1212,6 +1358,10 @@
|
|
|
1212
1358
|
font-size: 5rem;
|
|
1213
1359
|
}
|
|
1214
1360
|
|
|
1361
|
+
/* src/components/HoverTrigger.module.css */
|
|
1362
|
+
.HoverTrigger_wrapper {
|
|
1363
|
+
}
|
|
1364
|
+
|
|
1215
1365
|
/* src/components/InlineEditField.module.css */
|
|
1216
1366
|
.InlineEditField_edit {
|
|
1217
1367
|
display: flex;
|
|
@@ -1228,11 +1378,6 @@
|
|
|
1228
1378
|
position: absolute;
|
|
1229
1379
|
}
|
|
1230
1380
|
|
|
1231
|
-
/* src/components/Label.module.css */
|
|
1232
|
-
.Label_label {
|
|
1233
|
-
font-weight: 700;
|
|
1234
|
-
}
|
|
1235
|
-
|
|
1236
1381
|
/* src/components/Loading.module.css */
|
|
1237
1382
|
.Loading_loading {
|
|
1238
1383
|
position: relative;
|
|
@@ -1271,7 +1416,7 @@
|
|
|
1271
1416
|
outline: none;
|
|
1272
1417
|
}
|
|
1273
1418
|
.MenuItem_item:hover {
|
|
1274
|
-
background: var(--highlight-
|
|
1419
|
+
background: var(--highlight-color);
|
|
1275
1420
|
}
|
|
1276
1421
|
.MenuItem_item[data-selected] {
|
|
1277
1422
|
font-weight: bold;
|
|
@@ -1338,6 +1483,201 @@
|
|
|
1338
1483
|
}
|
|
1339
1484
|
}
|
|
1340
1485
|
|
|
1486
|
+
/* src/components/NavigationMenu.module.css */
|
|
1487
|
+
.NavigationMenu_root {
|
|
1488
|
+
position: relative;
|
|
1489
|
+
display: flex;
|
|
1490
|
+
align-items: center;
|
|
1491
|
+
justify-content: center;
|
|
1492
|
+
width: 100%;
|
|
1493
|
+
z-index: 1;
|
|
1494
|
+
}
|
|
1495
|
+
.NavigationMenu_list {
|
|
1496
|
+
display: flex;
|
|
1497
|
+
align-items: center;
|
|
1498
|
+
justify-content: center;
|
|
1499
|
+
background-color: var(--background-color);
|
|
1500
|
+
gap: var(--gap);
|
|
1501
|
+
list-style: none;
|
|
1502
|
+
margin: 0;
|
|
1503
|
+
}
|
|
1504
|
+
.NavigationMenu_trigger {
|
|
1505
|
+
display: flex;
|
|
1506
|
+
align-items: center;
|
|
1507
|
+
justify-content: space-between;
|
|
1508
|
+
gap: var(--gap);
|
|
1509
|
+
border: 0;
|
|
1510
|
+
background: none;
|
|
1511
|
+
}
|
|
1512
|
+
.NavigationMenu_link {
|
|
1513
|
+
display: block;
|
|
1514
|
+
text-decoration: none;
|
|
1515
|
+
}
|
|
1516
|
+
.NavigationMenu_trigger,
|
|
1517
|
+
.NavigationMenu_link {
|
|
1518
|
+
outline: none;
|
|
1519
|
+
user-select: none;
|
|
1520
|
+
}
|
|
1521
|
+
.NavigationMenu_content {
|
|
1522
|
+
position: absolute;
|
|
1523
|
+
top: 0;
|
|
1524
|
+
left: 0;
|
|
1525
|
+
width: 100%;
|
|
1526
|
+
animation-duration: 250ms;
|
|
1527
|
+
animation-timing-function: ease;
|
|
1528
|
+
}
|
|
1529
|
+
.NavigationMenu_content[data-motion=from-start] {
|
|
1530
|
+
animation-name: NavigationMenu_enterFromLeft;
|
|
1531
|
+
}
|
|
1532
|
+
.NavigationMenu_content[data-motion=from-end] {
|
|
1533
|
+
animation-name: NavigationMenu_enterFromRight;
|
|
1534
|
+
}
|
|
1535
|
+
.NavigationMenu_content[data-motion=to-start] {
|
|
1536
|
+
animation-name: NavigationMenu_exitToLeft;
|
|
1537
|
+
}
|
|
1538
|
+
.NavigationMenu_content[data-motion=to-end] {
|
|
1539
|
+
animation-name: NavigationMenu_exitToRight;
|
|
1540
|
+
}
|
|
1541
|
+
@media only screen and (min-width: 600px) {
|
|
1542
|
+
.NavigationMenu_content {
|
|
1543
|
+
width: auto;
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
.NavigationMenu_indicator {
|
|
1547
|
+
display: flex;
|
|
1548
|
+
align-items: flex-end;
|
|
1549
|
+
justify-content: center;
|
|
1550
|
+
height: 10px;
|
|
1551
|
+
top: 100%;
|
|
1552
|
+
overflow: hidden;
|
|
1553
|
+
z-index: 1;
|
|
1554
|
+
transition: width, transform 250ms ease;
|
|
1555
|
+
}
|
|
1556
|
+
.NavigationMenu_indicator[data-state=visible] {
|
|
1557
|
+
animation: NavigationMenu_fadeIn 200ms ease;
|
|
1558
|
+
}
|
|
1559
|
+
.NavigationMenu_indicator[data-state=hidden] {
|
|
1560
|
+
animation: NavigationMenu_fadeOut 200ms ease;
|
|
1561
|
+
}
|
|
1562
|
+
.NavigationMenu_viewport {
|
|
1563
|
+
position: relative;
|
|
1564
|
+
transform-origin: top center;
|
|
1565
|
+
margin-top: 10px;
|
|
1566
|
+
width: 100%;
|
|
1567
|
+
overflow: hidden;
|
|
1568
|
+
box-shadow: var(--box-shadow);
|
|
1569
|
+
height: var(--radix-navigation-menu-viewport-height);
|
|
1570
|
+
transition:
|
|
1571
|
+
width,
|
|
1572
|
+
height,
|
|
1573
|
+
300ms ease;
|
|
1574
|
+
}
|
|
1575
|
+
.NavigationMenu_viewport[data-state=open] {
|
|
1576
|
+
animation: NavigationMenu_scaleIn 200ms ease;
|
|
1577
|
+
}
|
|
1578
|
+
.NavigationMenu_viewport[data-state=closed] {
|
|
1579
|
+
animation: NavigationMenu_scaleOut 200ms ease;
|
|
1580
|
+
}
|
|
1581
|
+
@media only screen and (min-width: 600px) {
|
|
1582
|
+
.NavigationMenu_viewport {
|
|
1583
|
+
width: var(--radix-navigation-menu-viewport-width);
|
|
1584
|
+
}
|
|
1585
|
+
}
|
|
1586
|
+
.NavigationMenu_wrapper {
|
|
1587
|
+
position: absolute;
|
|
1588
|
+
display: flex;
|
|
1589
|
+
justify-content: center;
|
|
1590
|
+
width: 100%;
|
|
1591
|
+
top: 100%;
|
|
1592
|
+
left: 0;
|
|
1593
|
+
perspective: 2000px;
|
|
1594
|
+
}
|
|
1595
|
+
.NavigationMenu_arrow {
|
|
1596
|
+
position: relative;
|
|
1597
|
+
top: 70%;
|
|
1598
|
+
background-color: white;
|
|
1599
|
+
width: 10px;
|
|
1600
|
+
height: 10px;
|
|
1601
|
+
transform: rotate(45deg);
|
|
1602
|
+
border-top-left-radius: 2px;
|
|
1603
|
+
}
|
|
1604
|
+
@keyframes NavigationMenu_enterFromRight {
|
|
1605
|
+
from {
|
|
1606
|
+
opacity: 0;
|
|
1607
|
+
transform: translateX(200px);
|
|
1608
|
+
}
|
|
1609
|
+
to {
|
|
1610
|
+
opacity: 1;
|
|
1611
|
+
transform: translateX(0);
|
|
1612
|
+
}
|
|
1613
|
+
}
|
|
1614
|
+
@keyframes NavigationMenu_enterFromLeft {
|
|
1615
|
+
from {
|
|
1616
|
+
opacity: 0;
|
|
1617
|
+
transform: translateX(-200px);
|
|
1618
|
+
}
|
|
1619
|
+
to {
|
|
1620
|
+
opacity: 1;
|
|
1621
|
+
transform: translateX(0);
|
|
1622
|
+
}
|
|
1623
|
+
}
|
|
1624
|
+
@keyframes NavigationMenu_exitToRight {
|
|
1625
|
+
from {
|
|
1626
|
+
opacity: 1;
|
|
1627
|
+
transform: translateX(0);
|
|
1628
|
+
}
|
|
1629
|
+
to {
|
|
1630
|
+
opacity: 0;
|
|
1631
|
+
transform: translateX(200px);
|
|
1632
|
+
}
|
|
1633
|
+
}
|
|
1634
|
+
@keyframes NavigationMenu_exitToLeft {
|
|
1635
|
+
from {
|
|
1636
|
+
opacity: 1;
|
|
1637
|
+
transform: translateX(0);
|
|
1638
|
+
}
|
|
1639
|
+
to {
|
|
1640
|
+
opacity: 0;
|
|
1641
|
+
transform: translateX(-200px);
|
|
1642
|
+
}
|
|
1643
|
+
}
|
|
1644
|
+
@keyframes NavigationMenu_scaleIn {
|
|
1645
|
+
from {
|
|
1646
|
+
opacity: 0;
|
|
1647
|
+
transform: rotateX(-30deg) scale(0.9);
|
|
1648
|
+
}
|
|
1649
|
+
to {
|
|
1650
|
+
opacity: 1;
|
|
1651
|
+
transform: rotateX(0deg) scale(1);
|
|
1652
|
+
}
|
|
1653
|
+
}
|
|
1654
|
+
@keyframes NavigationMenu_scaleOut {
|
|
1655
|
+
from {
|
|
1656
|
+
opacity: 1;
|
|
1657
|
+
transform: rotateX(0deg) scale(1);
|
|
1658
|
+
}
|
|
1659
|
+
to {
|
|
1660
|
+
opacity: 0;
|
|
1661
|
+
transform: rotateX(-10deg) scale(0.95);
|
|
1662
|
+
}
|
|
1663
|
+
}
|
|
1664
|
+
@keyframes NavigationMenu_fadeIn {
|
|
1665
|
+
from {
|
|
1666
|
+
opacity: 0;
|
|
1667
|
+
}
|
|
1668
|
+
to {
|
|
1669
|
+
opacity: 1;
|
|
1670
|
+
}
|
|
1671
|
+
}
|
|
1672
|
+
@keyframes NavigationMenu_fadeOut {
|
|
1673
|
+
from {
|
|
1674
|
+
opacity: 1;
|
|
1675
|
+
}
|
|
1676
|
+
to {
|
|
1677
|
+
opacity: 0;
|
|
1678
|
+
}
|
|
1679
|
+
}
|
|
1680
|
+
|
|
1341
1681
|
/* src/components/PasswordField.module.css */
|
|
1342
1682
|
.PasswordField_icon {
|
|
1343
1683
|
position: absolute;
|
|
@@ -1362,7 +1702,7 @@
|
|
|
1362
1702
|
}
|
|
1363
1703
|
.ProgressBar_track {
|
|
1364
1704
|
height: 10px;
|
|
1365
|
-
background: var(--input-
|
|
1705
|
+
background: var(--input-background-color);
|
|
1366
1706
|
flex-basis: 100%;
|
|
1367
1707
|
width: fit-content;
|
|
1368
1708
|
border-radius: var(--border-radius);
|
|
@@ -1370,7 +1710,7 @@
|
|
|
1370
1710
|
min-width: 100px;
|
|
1371
1711
|
}
|
|
1372
1712
|
.ProgressBar_fill {
|
|
1373
|
-
background: var(--primary-
|
|
1713
|
+
background: var(--primary-color);
|
|
1374
1714
|
height: 10px;
|
|
1375
1715
|
}
|
|
1376
1716
|
.ProgressBar_value {
|
|
@@ -1393,10 +1733,10 @@
|
|
|
1393
1733
|
height: 96px;
|
|
1394
1734
|
}
|
|
1395
1735
|
.ProgressCircle_track {
|
|
1396
|
-
stroke: var(--input-
|
|
1736
|
+
stroke: var(--input-background-color);
|
|
1397
1737
|
}
|
|
1398
1738
|
.ProgressCircle_fill {
|
|
1399
|
-
stroke: var(--primary-
|
|
1739
|
+
stroke: var(--primary-color);
|
|
1400
1740
|
}
|
|
1401
1741
|
.ProgressCircle_value {
|
|
1402
1742
|
font-weight: 700;
|
|
@@ -1443,11 +1783,11 @@
|
|
|
1443
1783
|
border-color: var(--border-color);
|
|
1444
1784
|
}
|
|
1445
1785
|
.RadioGroup_radio[data-selected]:before {
|
|
1446
|
-
border-color: var(--primary-
|
|
1786
|
+
border-color: var(--primary-color);
|
|
1447
1787
|
border-width: 7px;
|
|
1448
1788
|
}
|
|
1449
1789
|
.RadioGroup_radio[data-selected][data-pressed]:before {
|
|
1450
|
-
border-color: var(--primary-
|
|
1790
|
+
border-color: var(--primary-color);
|
|
1451
1791
|
}
|
|
1452
1792
|
.RadioGroup_radio[data-disabled] {
|
|
1453
1793
|
color: var(--font-muted-color);
|
|
@@ -1512,19 +1852,14 @@
|
|
|
1512
1852
|
|
|
1513
1853
|
/* src/components/Slider.module.css */
|
|
1514
1854
|
.Slider_slider {
|
|
1515
|
-
display: grid;
|
|
1516
|
-
grid-template-areas: "label output" "track track";
|
|
1517
|
-
grid-template-columns: 1fr auto;
|
|
1518
1855
|
color: var(--font-color);
|
|
1519
1856
|
}
|
|
1520
|
-
.
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
grid-area: output;
|
|
1857
|
+
.Slider_header {
|
|
1858
|
+
display: flex;
|
|
1859
|
+
align-items: center;
|
|
1860
|
+
justify-content: space-between;
|
|
1525
1861
|
}
|
|
1526
1862
|
.Slider_track {
|
|
1527
|
-
grid-area: track;
|
|
1528
1863
|
position: relative;
|
|
1529
1864
|
}
|
|
1530
1865
|
.Slider_track:before {
|
|
@@ -1538,7 +1873,7 @@
|
|
|
1538
1873
|
display: block;
|
|
1539
1874
|
position: absolute;
|
|
1540
1875
|
height: 3px;
|
|
1541
|
-
background-color: var(--primary-
|
|
1876
|
+
background-color: var(--primary-color);
|
|
1542
1877
|
top: 50%;
|
|
1543
1878
|
transform: translateY(-50%);
|
|
1544
1879
|
}
|
|
@@ -1547,11 +1882,11 @@
|
|
|
1547
1882
|
height: 20px;
|
|
1548
1883
|
border-radius: 100%;
|
|
1549
1884
|
background: var(--background-color);
|
|
1550
|
-
border: 2px solid var(--primary-
|
|
1885
|
+
border: 2px solid var(--primary-color);
|
|
1551
1886
|
forced-color-adjust: none;
|
|
1552
1887
|
}
|
|
1553
1888
|
.Slider_thumb[data-dragging] {
|
|
1554
|
-
background: var(--highlight-
|
|
1889
|
+
background: var(--highlight-color);
|
|
1555
1890
|
}
|
|
1556
1891
|
.Slider_thumb[data-focus-visible] {
|
|
1557
1892
|
outline: 2px solid var(--font-color);
|
|
@@ -1562,7 +1897,7 @@
|
|
|
1562
1897
|
}
|
|
1563
1898
|
.Slider_slider[data-orientation=horizontal] .Slider_track {
|
|
1564
1899
|
height: 30px;
|
|
1565
|
-
|
|
1900
|
+
margin: 0 10px;
|
|
1566
1901
|
}
|
|
1567
1902
|
.Slider_slider[data-orientation=horizontal] .Slider_track:before {
|
|
1568
1903
|
height: 3px;
|
|
@@ -1587,8 +1922,7 @@
|
|
|
1587
1922
|
transform: translateX(-50%);
|
|
1588
1923
|
top: 0;
|
|
1589
1924
|
}
|
|
1590
|
-
.Slider_slider[data-orientation=vertical] .
|
|
1591
|
-
.Slider_slider[data-orientation=vertical] .Slider_output {
|
|
1925
|
+
.Slider_slider[data-orientation=vertical] .Slider_header {
|
|
1592
1926
|
display: none;
|
|
1593
1927
|
}
|
|
1594
1928
|
.Slider_slider[data-orientation=vertical] .Slider_track {
|
|
@@ -1598,7 +1932,7 @@
|
|
|
1598
1932
|
.Slider_slider[data-orientation=vertical] .Slider_track:before {
|
|
1599
1933
|
width: 3px;
|
|
1600
1934
|
height: 100%;
|
|
1601
|
-
background-color: var(--primary-
|
|
1935
|
+
background-color: var(--primary-color);
|
|
1602
1936
|
left: 50%;
|
|
1603
1937
|
transform: translateX(-50%);
|
|
1604
1938
|
}
|
|
@@ -1621,19 +1955,19 @@
|
|
|
1621
1955
|
position: relative;
|
|
1622
1956
|
}
|
|
1623
1957
|
.StatusLight_status.StatusLight_success {
|
|
1624
|
-
background: var(--success-
|
|
1958
|
+
background: var(--success-color);
|
|
1625
1959
|
}
|
|
1626
1960
|
.StatusLight_status.StatusLight_warning {
|
|
1627
|
-
background: var(--warning-
|
|
1961
|
+
background: var(--warning-color);
|
|
1628
1962
|
}
|
|
1629
1963
|
.StatusLight_status.StatusLight_error {
|
|
1630
|
-
background: var(--danger-
|
|
1964
|
+
background: var(--danger-color);
|
|
1631
1965
|
}
|
|
1632
1966
|
.StatusLight_status.StatusLight_active {
|
|
1633
|
-
background: var(--active-
|
|
1967
|
+
background: var(--active-color);
|
|
1634
1968
|
}
|
|
1635
1969
|
.StatusLight_status.StatusLight_inactive {
|
|
1636
|
-
background: var(--inactive-
|
|
1970
|
+
background: var(--inactive-color);
|
|
1637
1971
|
}
|
|
1638
1972
|
|
|
1639
1973
|
/* src/components/Switch.module.css */
|
|
@@ -1654,7 +1988,7 @@
|
|
|
1654
1988
|
height: calc(var(--knob-size) + var(--knob-border-size) * 2);
|
|
1655
1989
|
border: var(--knob-border-size) solid transparent;
|
|
1656
1990
|
border-radius: calc(var(--knob-size) + var(--knob-border-size) * 2);
|
|
1657
|
-
background: var(--input-
|
|
1991
|
+
background: var(--input-background-color);
|
|
1658
1992
|
transition: background-color 0.2s;
|
|
1659
1993
|
cursor: pointer;
|
|
1660
1994
|
}
|
|
@@ -1667,12 +2001,12 @@
|
|
|
1667
2001
|
box-shadow: var(--box-shadow-2);
|
|
1668
2002
|
}
|
|
1669
2003
|
.Switch_switch[data-selected] .Switch_track {
|
|
1670
|
-
border-color: var(--primary-
|
|
1671
|
-
background: var(--primary-
|
|
2004
|
+
border-color: var(--primary-color);
|
|
2005
|
+
background: var(--primary-color);
|
|
1672
2006
|
}
|
|
1673
2007
|
.Switch_switch[data-selected] .Switch_knob {
|
|
1674
2008
|
margin-left: var(--knob-size);
|
|
1675
|
-
border-color: var(--primary-
|
|
2009
|
+
border-color: var(--primary-color);
|
|
1676
2010
|
}
|
|
1677
2011
|
.Switch_switch[data-disabled] {
|
|
1678
2012
|
color: var(--font-faded-color);
|
|
@@ -1717,7 +2051,7 @@
|
|
|
1717
2051
|
}
|
|
1718
2052
|
.Tabs_tab[data-selected] {
|
|
1719
2053
|
color: var(--font-color);
|
|
1720
|
-
border-bottom: 2px solid var(--primary-
|
|
2054
|
+
border-bottom: 2px solid var(--primary-color);
|
|
1721
2055
|
}
|
|
1722
2056
|
.Tabs_tab[data-disabled] {
|
|
1723
2057
|
color: var(--font-faded-color);
|
|
@@ -1832,13 +2166,13 @@
|
|
|
1832
2166
|
cursor: pointer;
|
|
1833
2167
|
}
|
|
1834
2168
|
.Toast_toast.Toast_info {
|
|
1835
|
-
color: var(--primary-
|
|
1836
|
-
background: var(--primary-
|
|
2169
|
+
color: var(--primary-font-color);
|
|
2170
|
+
background: var(--primary-color);
|
|
1837
2171
|
border: 0;
|
|
1838
2172
|
}
|
|
1839
2173
|
.Toast_toast.Toast_error {
|
|
1840
|
-
color: var(--danger-
|
|
1841
|
-
background: var(--danger-
|
|
2174
|
+
color: var(--danger-font-color);
|
|
2175
|
+
background: var(--danger-color);
|
|
1842
2176
|
border: 0;
|
|
1843
2177
|
}
|
|
1844
2178
|
@keyframes Toast_hide {
|
|
@@ -1887,11 +2221,15 @@
|
|
|
1887
2221
|
cursor: pointer;
|
|
1888
2222
|
}
|
|
1889
2223
|
.Toggle_toggle:hover {
|
|
1890
|
-
background: var(--highlight-
|
|
2224
|
+
background: var(--highlight-color);
|
|
1891
2225
|
}
|
|
1892
2226
|
.Toggle_toggle[data-selected] {
|
|
1893
|
-
color: var(--primary-
|
|
1894
|
-
background: var(--primary-
|
|
2227
|
+
color: var(--primary-font-color);
|
|
2228
|
+
background: var(--primary-color);
|
|
2229
|
+
}
|
|
2230
|
+
.Toggle_toggle:focus {
|
|
2231
|
+
border-color: transparent;
|
|
2232
|
+
outline: var(--outline);
|
|
1895
2233
|
}
|
|
1896
2234
|
|
|
1897
2235
|
/* src/components/ToggleGroup.module.css */
|
|
@@ -1917,11 +2255,11 @@
|
|
|
1917
2255
|
border-left: var(--border);
|
|
1918
2256
|
}
|
|
1919
2257
|
.ToggleGroup_item:hover {
|
|
1920
|
-
background-color: var(--highlight-
|
|
2258
|
+
background-color: var(--highlight-color);
|
|
1921
2259
|
}
|
|
1922
2260
|
.ToggleGroup_item[data-state=on] {
|
|
1923
2261
|
font-weight: 700;
|
|
1924
|
-
background-color: var(--highlight-
|
|
2262
|
+
background-color: var(--highlight-color);
|
|
1925
2263
|
font-size-adjust: 0.5;
|
|
1926
2264
|
}
|
|
1927
2265
|
.ToggleGroup_item:focus {
|