@sigx/zero-daisyui 0.15.0 → 0.16.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.
@@ -10,11 +10,13 @@
10
10
  border: var(--border) solid var(--color-base-200);
11
11
  border-radius: var(--radius-box);
12
12
  background: var(--color-base-100);
13
+ overflow: hidden;
13
14
  }
14
15
 
15
16
  .zx-table__root.zx-f-focus-visible {
16
- outline: 2px solid var(--color-base-content);
17
+ outline: none;
17
18
  outline-offset: -2px;
19
+ box-shadow: inset 0 0 0 2px var(--color-base-content);
18
20
  }
19
21
 
20
22
  .zx-table__table {
@@ -122,6 +124,26 @@
122
124
  padding: var(--space-lg) var(--table-pad-inline);
123
125
  }
124
126
 
127
+ .zx-root .zx-table__header-cell {
128
+ color: #18181b99;
129
+ }
130
+
131
+ .zx-root.zx-theme-dark .zx-table__header-cell {
132
+ color: #ecf9ff99;
133
+ }
134
+
135
+ .zx-root.zx-theme-dim .zx-table__header-cell {
136
+ color: #b2ccd699;
137
+ }
138
+
139
+ .zx-root.zx-theme-nord .zx-table__header-cell {
140
+ color: #2e344099;
141
+ }
142
+
143
+ .zx-root.zx-theme-sunset .zx-table__header-cell {
144
+ color: #9fb9d099;
145
+ }
146
+
125
147
  .zx-table__sort-trigger {
126
148
  appearance: none;
127
149
  display: flex;
@@ -139,6 +161,7 @@
139
161
  background: transparent;
140
162
  color: inherit;
141
163
  transition: color var(--duration-fast) var(--ease-standard);
164
+ flex-direction: row;
142
165
  }
143
166
 
144
167
  .zx-table__sort-trigger.zx-s-ascending {
@@ -155,8 +178,13 @@
155
178
  }
156
179
 
157
180
  .zx-table__sort-trigger.zx-f-focus-visible {
158
- outline: 2px solid var(--color-base-content);
181
+ outline: none;
159
182
  outline-offset: 2px;
183
+ box-shadow: 0 0 0 2px var(--color-base-100), 0 0 0 4px var(--color-base-content);
184
+ }
185
+
186
+ .zx-table__sort-trigger.zx-f-pressed {
187
+ color: var(--table-accent);
160
188
  }
161
189
 
162
190
  .zx-table__sort-indicator {
@@ -200,6 +228,26 @@
200
228
  font-size: var(--text-xs);
201
229
  }
202
230
 
231
+ .zx-root .zx-table__cell-label {
232
+ color: #18181b99;
233
+ }
234
+
235
+ .zx-root.zx-theme-dark .zx-table__cell-label {
236
+ color: #ecf9ff99;
237
+ }
238
+
239
+ .zx-root.zx-theme-dim .zx-table__cell-label {
240
+ color: #b2ccd699;
241
+ }
242
+
243
+ .zx-root.zx-theme-nord .zx-table__cell-label {
244
+ color: #2e344099;
245
+ }
246
+
247
+ .zx-root.zx-theme-sunset .zx-table__cell-label {
248
+ color: #9fb9d099;
249
+ }
250
+
203
251
  .zx-root .zx-table__root.zx-a-color-primary {
204
252
  --table-accent: #3f2bcb;
205
253
  }
@@ -220,6 +268,46 @@
220
268
  --table-accent: #fb8a62;
221
269
  }
222
270
 
271
+ .zx-root .zx-table__header-cell.zx-a-color-primary {
272
+ color: #3f2bcb99;
273
+ }
274
+
275
+ .zx-root.zx-theme-dark .zx-table__header-cell.zx-a-color-primary {
276
+ color: #6567ff99;
277
+ }
278
+
279
+ .zx-root.zx-theme-dim .zx-table__header-cell.zx-a-color-primary {
280
+ color: #a0e79199;
281
+ }
282
+
283
+ .zx-root.zx-theme-nord .zx-table__header-cell.zx-a-color-primary {
284
+ color: #5c7da699;
285
+ }
286
+
287
+ .zx-root.zx-theme-sunset .zx-table__header-cell.zx-a-color-primary {
288
+ color: #fb8a6299;
289
+ }
290
+
291
+ .zx-root .zx-table__cell-label.zx-a-color-primary {
292
+ color: #3f2bcb99;
293
+ }
294
+
295
+ .zx-root.zx-theme-dark .zx-table__cell-label.zx-a-color-primary {
296
+ color: #6567ff99;
297
+ }
298
+
299
+ .zx-root.zx-theme-dim .zx-table__cell-label.zx-a-color-primary {
300
+ color: #a0e79199;
301
+ }
302
+
303
+ .zx-root.zx-theme-nord .zx-table__cell-label.zx-a-color-primary {
304
+ color: #5c7da699;
305
+ }
306
+
307
+ .zx-root.zx-theme-sunset .zx-table__cell-label.zx-a-color-primary {
308
+ color: #fb8a6299;
309
+ }
310
+
223
311
  .zx-root .zx-table__root.zx-a-color-secondary {
224
312
  --table-accent: #ad316f;
225
313
  }
@@ -240,6 +328,46 @@
240
328
  --table-accent: #e68aac;
241
329
  }
242
330
 
331
+ .zx-root .zx-table__header-cell.zx-a-color-secondary {
332
+ color: #ad316f99;
333
+ }
334
+
335
+ .zx-root.zx-theme-dark .zx-table__header-cell.zx-a-color-secondary {
336
+ color: #fa7cb699;
337
+ }
338
+
339
+ .zx-root.zx-theme-dim .zx-table__header-cell.zx-a-color-secondary {
340
+ color: #ed998499;
341
+ }
342
+
343
+ .zx-root.zx-theme-nord .zx-table__header-cell.zx-a-color-secondary {
344
+ color: #677e9899;
345
+ }
346
+
347
+ .zx-root.zx-theme-sunset .zx-table__header-cell.zx-a-color-secondary {
348
+ color: #e68aac99;
349
+ }
350
+
351
+ .zx-root .zx-table__cell-label.zx-a-color-secondary {
352
+ color: #ad316f99;
353
+ }
354
+
355
+ .zx-root.zx-theme-dark .zx-table__cell-label.zx-a-color-secondary {
356
+ color: #fa7cb699;
357
+ }
358
+
359
+ .zx-root.zx-theme-dim .zx-table__cell-label.zx-a-color-secondary {
360
+ color: #ed998499;
361
+ }
362
+
363
+ .zx-root.zx-theme-nord .zx-table__cell-label.zx-a-color-secondary {
364
+ color: #677e9899;
365
+ }
366
+
367
+ .zx-root.zx-theme-sunset .zx-table__cell-label.zx-a-color-secondary {
368
+ color: #e68aac99;
369
+ }
370
+
243
371
  .zx-root .zx-table__root.zx-a-color-accent {
244
372
  --table-accent: #2b786d;
245
373
  }
@@ -260,6 +388,46 @@
260
388
  --table-accent: #ab9fe8;
261
389
  }
262
390
 
391
+ .zx-root .zx-table__header-cell.zx-a-color-accent {
392
+ color: #2b786d99;
393
+ }
394
+
395
+ .zx-root.zx-theme-dark .zx-table__header-cell.zx-a-color-accent {
396
+ color: #93e5d999;
397
+ }
398
+
399
+ .zx-root.zx-theme-dim .zx-table__header-cell.zx-a-color-accent {
400
+ color: #bfade199;
401
+ }
402
+
403
+ .zx-root.zx-theme-nord .zx-table__header-cell.zx-a-color-accent {
404
+ color: #5e7d8c99;
405
+ }
406
+
407
+ .zx-root.zx-theme-sunset .zx-table__header-cell.zx-a-color-accent {
408
+ color: #ab9fe899;
409
+ }
410
+
411
+ .zx-root .zx-table__cell-label.zx-a-color-accent {
412
+ color: #2b786d99;
413
+ }
414
+
415
+ .zx-root.zx-theme-dark .zx-table__cell-label.zx-a-color-accent {
416
+ color: #93e5d999;
417
+ }
418
+
419
+ .zx-root.zx-theme-dim .zx-table__cell-label.zx-a-color-accent {
420
+ color: #bfade199;
421
+ }
422
+
423
+ .zx-root.zx-theme-nord .zx-table__cell-label.zx-a-color-accent {
424
+ color: #5e7d8c99;
425
+ }
426
+
427
+ .zx-root.zx-theme-sunset .zx-table__cell-label.zx-a-color-accent {
428
+ color: #ab9fe899;
429
+ }
430
+
263
431
  .zx-root .zx-table__root.zx-a-color-neutral {
264
432
  --table-accent: #121214;
265
433
  }
@@ -280,6 +448,46 @@
280
448
  --table-accent: #667a8a;
281
449
  }
282
450
 
451
+ .zx-root .zx-table__header-cell.zx-a-color-neutral {
452
+ color: #12121499;
453
+ }
454
+
455
+ .zx-root.zx-theme-dark .zx-table__header-cell.zx-a-color-neutral {
456
+ color: #878e9299;
457
+ }
458
+
459
+ .zx-root.zx-theme-dim .zx-table__header-cell.zx-a-color-neutral {
460
+ color: #71828c99;
461
+ }
462
+
463
+ .zx-root.zx-theme-nord .zx-table__header-cell.zx-a-color-neutral {
464
+ color: #3a415099;
465
+ }
466
+
467
+ .zx-root.zx-theme-sunset .zx-table__header-cell.zx-a-color-neutral {
468
+ color: #667a8a99;
469
+ }
470
+
471
+ .zx-root .zx-table__cell-label.zx-a-color-neutral {
472
+ color: #12121499;
473
+ }
474
+
475
+ .zx-root.zx-theme-dark .zx-table__cell-label.zx-a-color-neutral {
476
+ color: #878e9299;
477
+ }
478
+
479
+ .zx-root.zx-theme-dim .zx-table__cell-label.zx-a-color-neutral {
480
+ color: #71828c99;
481
+ }
482
+
483
+ .zx-root.zx-theme-nord .zx-table__cell-label.zx-a-color-neutral {
484
+ color: #3a415099;
485
+ }
486
+
487
+ .zx-root.zx-theme-sunset .zx-table__cell-label.zx-a-color-neutral {
488
+ color: #667a8a99;
489
+ }
490
+
283
491
  .zx-root .zx-table__root.zx-a-color-info {
284
492
  --table-accent: #2685b3;
285
493
  }
@@ -300,6 +508,46 @@
300
508
  --table-accent: #91d4e3;
301
509
  }
302
510
 
511
+ .zx-root .zx-table__header-cell.zx-a-color-info {
512
+ color: #2685b399;
513
+ }
514
+
515
+ .zx-root.zx-theme-dark .zx-table__header-cell.zx-a-color-info {
516
+ color: #70ceff99;
517
+ }
518
+
519
+ .zx-root.zx-theme-dim .zx-table__header-cell.zx-a-color-info {
520
+ color: #6ce2f399;
521
+ }
522
+
523
+ .zx-root.zx-theme-nord .zx-table__header-cell.zx-a-color-info {
524
+ color: #89728a99;
525
+ }
526
+
527
+ .zx-root.zx-theme-sunset .zx-table__header-cell.zx-a-color-info {
528
+ color: #91d4e399;
529
+ }
530
+
531
+ .zx-root .zx-table__cell-label.zx-a-color-info {
532
+ color: #2685b399;
533
+ }
534
+
535
+ .zx-root.zx-theme-dark .zx-table__cell-label.zx-a-color-info {
536
+ color: #70ceff99;
537
+ }
538
+
539
+ .zx-root.zx-theme-dim .zx-table__cell-label.zx-a-color-info {
540
+ color: #6ce2f399;
541
+ }
542
+
543
+ .zx-root.zx-theme-nord .zx-table__cell-label.zx-a-color-info {
544
+ color: #89728a99;
545
+ }
546
+
547
+ .zx-root.zx-theme-sunset .zx-table__cell-label.zx-a-color-info {
548
+ color: #91d4e399;
549
+ }
550
+
303
551
  .zx-root .zx-table__root.zx-a-color-success {
304
552
  --table-accent: #2a7858;
305
553
  }
@@ -320,6 +568,46 @@
320
568
  --table-accent: #a6cebe;
321
569
  }
322
570
 
571
+ .zx-root .zx-table__header-cell.zx-a-color-success {
572
+ color: #2a785899;
573
+ }
574
+
575
+ .zx-root.zx-theme-dark .zx-table__header-cell.zx-a-color-success {
576
+ color: #92e5c299;
577
+ }
578
+
579
+ .zx-root.zx-theme-dim .zx-table__header-cell.zx-a-color-success {
580
+ color: #8ee0c999;
581
+ }
582
+
583
+ .zx-root.zx-theme-nord .zx-table__header-cell.zx-a-color-success {
584
+ color: #6b7d6a99;
585
+ }
586
+
587
+ .zx-root.zx-theme-sunset .zx-table__header-cell.zx-a-color-success {
588
+ color: #a6cebe99;
589
+ }
590
+
591
+ .zx-root .zx-table__cell-label.zx-a-color-success {
592
+ color: #2a785899;
593
+ }
594
+
595
+ .zx-root.zx-theme-dark .zx-table__cell-label.zx-a-color-success {
596
+ color: #92e5c299;
597
+ }
598
+
599
+ .zx-root.zx-theme-dim .zx-table__cell-label.zx-a-color-success {
600
+ color: #8ee0c999;
601
+ }
602
+
603
+ .zx-root.zx-theme-nord .zx-table__cell-label.zx-a-color-success {
604
+ color: #6b7d6a99;
605
+ }
606
+
607
+ .zx-root.zx-theme-sunset .zx-table__cell-label.zx-a-color-success {
608
+ color: #a6cebe99;
609
+ }
610
+
323
611
  .zx-root .zx-table__root.zx-a-color-warning {
324
612
  --table-accent: #755a2b;
325
613
  }
@@ -340,6 +628,46 @@
340
628
  --table-accent: #c5c1b7;
341
629
  }
342
630
 
631
+ .zx-root .zx-table__header-cell.zx-a-color-warning {
632
+ color: #755a2b99;
633
+ }
634
+
635
+ .zx-root.zx-theme-dark .zx-table__header-cell.zx-a-color-warning {
636
+ color: #f5ddac99;
637
+ }
638
+
639
+ .zx-root.zx-theme-dim .zx-table__header-cell.zx-a-color-warning {
640
+ color: #cecfa699;
641
+ }
642
+
643
+ .zx-root.zx-theme-nord .zx-table__header-cell.zx-a-color-warning {
644
+ color: #7d746399;
645
+ }
646
+
647
+ .zx-root.zx-theme-sunset .zx-table__header-cell.zx-a-color-warning {
648
+ color: #c5c1b799;
649
+ }
650
+
651
+ .zx-root .zx-table__cell-label.zx-a-color-warning {
652
+ color: #755a2b99;
653
+ }
654
+
655
+ .zx-root.zx-theme-dark .zx-table__cell-label.zx-a-color-warning {
656
+ color: #f5ddac99;
657
+ }
658
+
659
+ .zx-root.zx-theme-dim .zx-table__cell-label.zx-a-color-warning {
660
+ color: #cecfa699;
661
+ }
662
+
663
+ .zx-root.zx-theme-nord .zx-table__cell-label.zx-a-color-warning {
664
+ color: #7d746399;
665
+ }
666
+
667
+ .zx-root.zx-theme-sunset .zx-table__cell-label.zx-a-color-warning {
668
+ color: #c5c1b799;
669
+ }
670
+
343
671
  .zx-root .zx-table__root.zx-a-color-error {
344
672
  --table-accent: #d9576d;
345
673
  }
@@ -360,6 +688,46 @@
360
688
  --table-accent: #f2bbc0;
361
689
  }
362
690
 
691
+ .zx-root .zx-table__header-cell.zx-a-color-error {
692
+ color: #d9576d99;
693
+ }
694
+
695
+ .zx-root.zx-theme-dark .zx-table__header-cell.zx-a-color-error {
696
+ color: #ff7d9099;
697
+ }
698
+
699
+ .zx-root.zx-theme-dim .zx-table__header-cell.zx-a-color-error {
700
+ color: #f5b3a499;
701
+ }
702
+
703
+ .zx-root.zx-theme-nord .zx-table__header-cell.zx-a-color-error {
704
+ color: #a85b6499;
705
+ }
706
+
707
+ .zx-root.zx-theme-sunset .zx-table__header-cell.zx-a-color-error {
708
+ color: #f2bbc099;
709
+ }
710
+
711
+ .zx-root .zx-table__cell-label.zx-a-color-error {
712
+ color: #d9576d99;
713
+ }
714
+
715
+ .zx-root.zx-theme-dark .zx-table__cell-label.zx-a-color-error {
716
+ color: #ff7d9099;
717
+ }
718
+
719
+ .zx-root.zx-theme-dim .zx-table__cell-label.zx-a-color-error {
720
+ color: #f5b3a499;
721
+ }
722
+
723
+ .zx-root.zx-theme-nord .zx-table__cell-label.zx-a-color-error {
724
+ color: #a85b6499;
725
+ }
726
+
727
+ .zx-root.zx-theme-sunset .zx-table__cell-label.zx-a-color-error {
728
+ color: #f2bbc099;
729
+ }
730
+
363
731
  .zx-table__root.zx-a-size-xs {
364
732
  --table-pad-inline: var(--space-xs);
365
733
  --table-font: var(--text-xs);
@@ -379,3 +747,33 @@
379
747
  --table-pad-inline: var(--space-xl);
380
748
  --table-font: var(--text-md);
381
749
  }
750
+ .zx-table__root.zx-m-stacked {
751
+ border-width: calc(var(--border) * 0);
752
+ border-radius: calc(var(--radius-box) * 0);
753
+ }
754
+ .zx-table__caption.zx-m-stacked {
755
+ padding-left: calc(var(--table-pad-inline) * 0);
756
+ padding-right: calc(var(--table-pad-inline) * 0);
757
+ }
758
+ .zx-table__row.zx-m-stacked {
759
+ border: var(--border) solid var(--color-base-200);
760
+ border-radius: var(--radius-box);
761
+ background: var(--color-base-100);
762
+ padding: var(--space-sm) var(--table-pad-inline);
763
+ margin-bottom: var(--space-md);
764
+ }
765
+ .zx-table__row.zx-m-stacked.zx-f-selected {
766
+ background: var(--color-base-300);
767
+ }
768
+ .zx-table__cell.zx-m-stacked {
769
+ padding-left: calc(var(--table-pad-inline) * 0);
770
+ padding-right: calc(var(--table-pad-inline) * 0);
771
+ padding-top: var(--space-xs);
772
+ padding-bottom: var(--space-xs);
773
+ }
774
+ .zx-table__row.zx-m-stripe {
775
+ background: var(--color-base-200);
776
+ }
777
+ .zx-table__sort-indicator.zx-m-held.zx-s-none {
778
+ opacity: 0.6;
779
+ }
@@ -16,6 +16,9 @@
16
16
  transition: background var(--duration-normal) var(--ease-standard);
17
17
  padding-left: calc(var(--size-field) * 4);
18
18
  padding-right: calc(var(--size-field) * 4);
19
+ width: max-content;
20
+ flex-shrink: 0;
21
+ flex-wrap: nowrap;
19
22
  }
20
23
 
21
24
  .zx-tooltip__trigger.zx-f-disabled {
@@ -51,6 +54,10 @@
51
54
  transform: none;
52
55
  }
53
56
 
57
+ .zx-tooltip__arrow {
58
+ background: var(--color-neutral);
59
+ }
60
+
54
61
  .zx-tooltip__trigger.zx-a-color-primary {
55
62
  background: var(--color-primary);
56
63
  color: var(--color-primary-content);