@homlista-devs/ui 1.3.1 → 1.4.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/design-system.cjs.js +22 -17
- package/dist/design-system.cjs.js.map +1 -1
- package/dist/design-system.es.js +1491 -1034
- package/dist/design-system.es.js.map +1 -1
- package/dist/index.css +123 -0
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -7,8 +7,12 @@
|
|
|
7
7
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
8
8
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
9
9
|
"Courier New", monospace;
|
|
10
|
+
--color-amber-500: oklch(76.9% 0.188 70.08);
|
|
11
|
+
--color-green-500: oklch(72.3% 0.219 149.579);
|
|
10
12
|
--color-blue-500: oklch(62.3% 0.214 259.815);
|
|
11
13
|
--color-purple-500: oklch(62.7% 0.265 303.9);
|
|
14
|
+
--color-slate-900: oklch(20.8% 0.042 265.755);
|
|
15
|
+
--color-gray-300: oklch(87.2% 0.01 258.338);
|
|
12
16
|
--color-black: #000;
|
|
13
17
|
--color-white: #fff;
|
|
14
18
|
--spacing: 0.25rem;
|
|
@@ -17,6 +21,7 @@
|
|
|
17
21
|
--container-lg: 32rem;
|
|
18
22
|
--container-2xl: 42rem;
|
|
19
23
|
--container-4xl: 56rem;
|
|
24
|
+
--container-5xl: 64rem;
|
|
20
25
|
--container-6xl: 72rem;
|
|
21
26
|
--container-7xl: 80rem;
|
|
22
27
|
--text-xs: 0.75rem;
|
|
@@ -380,6 +385,9 @@
|
|
|
380
385
|
.m-0 {
|
|
381
386
|
margin: calc(var(--spacing) * 0);
|
|
382
387
|
}
|
|
388
|
+
.mx-6 {
|
|
389
|
+
margin-inline: calc(var(--spacing) * 6);
|
|
390
|
+
}
|
|
383
391
|
.mx-auto {
|
|
384
392
|
margin-inline: auto;
|
|
385
393
|
}
|
|
@@ -404,6 +412,9 @@
|
|
|
404
412
|
.mr-1\.5 {
|
|
405
413
|
margin-right: calc(var(--spacing) * 1.5);
|
|
406
414
|
}
|
|
415
|
+
.mr-2 {
|
|
416
|
+
margin-right: calc(var(--spacing) * 2);
|
|
417
|
+
}
|
|
407
418
|
.mb-1 {
|
|
408
419
|
margin-bottom: calc(var(--spacing) * 1);
|
|
409
420
|
}
|
|
@@ -461,6 +472,14 @@
|
|
|
461
472
|
.aspect-\[4\/3\] {
|
|
462
473
|
aspect-ratio: 4/3;
|
|
463
474
|
}
|
|
475
|
+
.size-4 {
|
|
476
|
+
width: calc(var(--spacing) * 4);
|
|
477
|
+
height: calc(var(--spacing) * 4);
|
|
478
|
+
}
|
|
479
|
+
.size-12 {
|
|
480
|
+
width: calc(var(--spacing) * 12);
|
|
481
|
+
height: calc(var(--spacing) * 12);
|
|
482
|
+
}
|
|
464
483
|
.h-2 {
|
|
465
484
|
height: calc(var(--spacing) * 2);
|
|
466
485
|
}
|
|
@@ -506,6 +525,9 @@
|
|
|
506
525
|
.h-\[600px\] {
|
|
507
526
|
height: 600px;
|
|
508
527
|
}
|
|
528
|
+
.h-auto {
|
|
529
|
+
height: auto;
|
|
530
|
+
}
|
|
509
531
|
.h-full {
|
|
510
532
|
height: 100%;
|
|
511
533
|
}
|
|
@@ -572,6 +594,9 @@
|
|
|
572
594
|
.max-w-4xl {
|
|
573
595
|
max-width: var(--container-4xl);
|
|
574
596
|
}
|
|
597
|
+
.max-w-5xl {
|
|
598
|
+
max-width: var(--container-5xl);
|
|
599
|
+
}
|
|
575
600
|
.max-w-6xl {
|
|
576
601
|
max-width: var(--container-6xl);
|
|
577
602
|
}
|
|
@@ -593,12 +618,27 @@
|
|
|
593
618
|
.min-w-\[4rem\] {
|
|
594
619
|
min-width: 4rem;
|
|
595
620
|
}
|
|
621
|
+
.min-w-\[120px\] {
|
|
622
|
+
min-width: 120px;
|
|
623
|
+
}
|
|
624
|
+
.min-w-\[140px\] {
|
|
625
|
+
min-width: 140px;
|
|
626
|
+
}
|
|
627
|
+
.min-w-\[160px\] {
|
|
628
|
+
min-width: 160px;
|
|
629
|
+
}
|
|
596
630
|
.flex-1 {
|
|
597
631
|
flex: 1;
|
|
598
632
|
}
|
|
633
|
+
.flex-\[1\.2\] {
|
|
634
|
+
flex: 1.2;
|
|
635
|
+
}
|
|
599
636
|
.flex-shrink-0 {
|
|
600
637
|
flex-shrink: 0;
|
|
601
638
|
}
|
|
639
|
+
.shrink-0 {
|
|
640
|
+
flex-shrink: 0;
|
|
641
|
+
}
|
|
602
642
|
.-translate-x-1\/2 {
|
|
603
643
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
604
644
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
@@ -651,6 +691,9 @@
|
|
|
651
691
|
.items-center {
|
|
652
692
|
align-items: center;
|
|
653
693
|
}
|
|
694
|
+
.items-stretch {
|
|
695
|
+
align-items: stretch;
|
|
696
|
+
}
|
|
654
697
|
.justify-between {
|
|
655
698
|
justify-content: space-between;
|
|
656
699
|
}
|
|
@@ -663,6 +706,9 @@
|
|
|
663
706
|
.justify-start {
|
|
664
707
|
justify-content: flex-start;
|
|
665
708
|
}
|
|
709
|
+
.gap-0 {
|
|
710
|
+
gap: calc(var(--spacing) * 0);
|
|
711
|
+
}
|
|
666
712
|
.gap-1 {
|
|
667
713
|
gap: calc(var(--spacing) * 1);
|
|
668
714
|
}
|
|
@@ -730,6 +776,9 @@
|
|
|
730
776
|
margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
|
|
731
777
|
}
|
|
732
778
|
}
|
|
779
|
+
.self-stretch {
|
|
780
|
+
align-self: stretch;
|
|
781
|
+
}
|
|
733
782
|
.truncate {
|
|
734
783
|
overflow: hidden;
|
|
735
784
|
text-overflow: ellipsis;
|
|
@@ -811,6 +860,9 @@
|
|
|
811
860
|
.border-error {
|
|
812
861
|
border-color: var(--color-error);
|
|
813
862
|
}
|
|
863
|
+
.border-gray-300 {
|
|
864
|
+
border-color: var(--color-gray-300);
|
|
865
|
+
}
|
|
814
866
|
.border-info {
|
|
815
867
|
border-color: var(--color-info);
|
|
816
868
|
}
|
|
@@ -844,6 +896,9 @@
|
|
|
844
896
|
background-color: color-mix(in oklab, var(--color-background) 90%, transparent);
|
|
845
897
|
}
|
|
846
898
|
}
|
|
899
|
+
.bg-black {
|
|
900
|
+
background-color: var(--color-black);
|
|
901
|
+
}
|
|
847
902
|
.bg-black\/50 {
|
|
848
903
|
background-color: color-mix(in srgb, #000 50%, transparent);
|
|
849
904
|
@supports (color: color-mix(in lab, red, red)) {
|
|
@@ -856,6 +911,12 @@
|
|
|
856
911
|
.bg-destructive {
|
|
857
912
|
background-color: var(--color-destructive);
|
|
858
913
|
}
|
|
914
|
+
.bg-destructive\/10 {
|
|
915
|
+
background-color: color-mix(in srgb, hsl(0, 84.2%, 60.2%) 10%, transparent);
|
|
916
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
917
|
+
background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
|
|
918
|
+
}
|
|
919
|
+
}
|
|
859
920
|
.bg-error {
|
|
860
921
|
background-color: var(--color-error);
|
|
861
922
|
}
|
|
@@ -868,6 +929,9 @@
|
|
|
868
929
|
.bg-foreground {
|
|
869
930
|
background-color: var(--color-foreground);
|
|
870
931
|
}
|
|
932
|
+
.bg-gray-300 {
|
|
933
|
+
background-color: var(--color-gray-300);
|
|
934
|
+
}
|
|
871
935
|
.bg-info {
|
|
872
936
|
background-color: var(--color-info);
|
|
873
937
|
}
|
|
@@ -898,6 +962,9 @@
|
|
|
898
962
|
.bg-secondary-foreground {
|
|
899
963
|
background-color: var(--color-secondary-foreground);
|
|
900
964
|
}
|
|
965
|
+
.bg-slate-900 {
|
|
966
|
+
background-color: var(--color-slate-900);
|
|
967
|
+
}
|
|
901
968
|
.bg-success {
|
|
902
969
|
background-color: var(--color-success);
|
|
903
970
|
}
|
|
@@ -907,6 +974,9 @@
|
|
|
907
974
|
background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
|
|
908
975
|
}
|
|
909
976
|
}
|
|
977
|
+
.bg-transparent {
|
|
978
|
+
background-color: transparent;
|
|
979
|
+
}
|
|
910
980
|
.bg-warning {
|
|
911
981
|
background-color: var(--color-warning);
|
|
912
982
|
}
|
|
@@ -970,6 +1040,9 @@
|
|
|
970
1040
|
.p-1 {
|
|
971
1041
|
padding: calc(var(--spacing) * 1);
|
|
972
1042
|
}
|
|
1043
|
+
.p-1\.5 {
|
|
1044
|
+
padding: calc(var(--spacing) * 1.5);
|
|
1045
|
+
}
|
|
973
1046
|
.p-2 {
|
|
974
1047
|
padding: calc(var(--spacing) * 2);
|
|
975
1048
|
}
|
|
@@ -997,6 +1070,9 @@
|
|
|
997
1070
|
.px-5 {
|
|
998
1071
|
padding-inline: calc(var(--spacing) * 5);
|
|
999
1072
|
}
|
|
1073
|
+
.px-6 {
|
|
1074
|
+
padding-inline: calc(var(--spacing) * 6);
|
|
1075
|
+
}
|
|
1000
1076
|
.px-8 {
|
|
1001
1077
|
padding-inline: calc(var(--spacing) * 8);
|
|
1002
1078
|
}
|
|
@@ -1012,12 +1088,18 @@
|
|
|
1012
1088
|
.py-3 {
|
|
1013
1089
|
padding-block: calc(var(--spacing) * 3);
|
|
1014
1090
|
}
|
|
1091
|
+
.py-3\.5 {
|
|
1092
|
+
padding-block: calc(var(--spacing) * 3.5);
|
|
1093
|
+
}
|
|
1015
1094
|
.py-12 {
|
|
1016
1095
|
padding-block: calc(var(--spacing) * 12);
|
|
1017
1096
|
}
|
|
1018
1097
|
.pt-4 {
|
|
1019
1098
|
padding-top: calc(var(--spacing) * 4);
|
|
1020
1099
|
}
|
|
1100
|
+
.pr-2 {
|
|
1101
|
+
padding-right: calc(var(--spacing) * 2);
|
|
1102
|
+
}
|
|
1021
1103
|
.pr-3 {
|
|
1022
1104
|
padding-right: calc(var(--spacing) * 3);
|
|
1023
1105
|
}
|
|
@@ -1135,9 +1217,15 @@
|
|
|
1135
1217
|
.text-accent {
|
|
1136
1218
|
color: var(--color-accent);
|
|
1137
1219
|
}
|
|
1220
|
+
.text-amber-500 {
|
|
1221
|
+
color: var(--color-amber-500);
|
|
1222
|
+
}
|
|
1138
1223
|
.text-background {
|
|
1139
1224
|
color: var(--color-background);
|
|
1140
1225
|
}
|
|
1226
|
+
.text-blue-500 {
|
|
1227
|
+
color: var(--color-blue-500);
|
|
1228
|
+
}
|
|
1141
1229
|
.text-card-foreground {
|
|
1142
1230
|
color: var(--color-card-foreground);
|
|
1143
1231
|
}
|
|
@@ -1162,6 +1250,9 @@
|
|
|
1162
1250
|
.text-foreground-tertiary {
|
|
1163
1251
|
color: var(--color-foreground-tertiary);
|
|
1164
1252
|
}
|
|
1253
|
+
.text-green-500 {
|
|
1254
|
+
color: var(--color-green-500);
|
|
1255
|
+
}
|
|
1165
1256
|
.text-info {
|
|
1166
1257
|
color: var(--color-info);
|
|
1167
1258
|
}
|
|
@@ -1204,6 +1295,9 @@
|
|
|
1204
1295
|
.text-warning-foreground {
|
|
1205
1296
|
color: var(--color-warning-foreground);
|
|
1206
1297
|
}
|
|
1298
|
+
.text-white {
|
|
1299
|
+
color: var(--color-white);
|
|
1300
|
+
}
|
|
1207
1301
|
.uppercase {
|
|
1208
1302
|
text-transform: uppercase;
|
|
1209
1303
|
}
|
|
@@ -1467,6 +1561,16 @@
|
|
|
1467
1561
|
}
|
|
1468
1562
|
}
|
|
1469
1563
|
}
|
|
1564
|
+
.hover\:bg-black\/90 {
|
|
1565
|
+
&:hover {
|
|
1566
|
+
@media (hover: hover) {
|
|
1567
|
+
background-color: color-mix(in srgb, #000 90%, transparent);
|
|
1568
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1569
|
+
background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
|
|
1570
|
+
}
|
|
1571
|
+
}
|
|
1572
|
+
}
|
|
1573
|
+
}
|
|
1470
1574
|
.hover\:bg-destructive\/90 {
|
|
1471
1575
|
&:hover {
|
|
1472
1576
|
@media (hover: hover) {
|
|
@@ -1543,6 +1647,14 @@
|
|
|
1543
1647
|
}
|
|
1544
1648
|
}
|
|
1545
1649
|
}
|
|
1650
|
+
.hover\:shadow-md {
|
|
1651
|
+
&:hover {
|
|
1652
|
+
@media (hover: hover) {
|
|
1653
|
+
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
1654
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1655
|
+
}
|
|
1656
|
+
}
|
|
1657
|
+
}
|
|
1546
1658
|
.hover\:shadow-xl {
|
|
1547
1659
|
&:hover {
|
|
1548
1660
|
@media (hover: hover) {
|
|
@@ -1613,6 +1725,12 @@
|
|
|
1613
1725
|
color: var(--color-white);
|
|
1614
1726
|
}
|
|
1615
1727
|
}
|
|
1728
|
+
.focus\:ring-0 {
|
|
1729
|
+
&:focus {
|
|
1730
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
1731
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
1732
|
+
}
|
|
1733
|
+
}
|
|
1616
1734
|
.focus\:ring-2 {
|
|
1617
1735
|
&:focus {
|
|
1618
1736
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
@@ -1734,6 +1852,11 @@
|
|
|
1734
1852
|
padding-inline: calc(var(--spacing) * 6);
|
|
1735
1853
|
}
|
|
1736
1854
|
}
|
|
1855
|
+
.md\:hidden {
|
|
1856
|
+
@media (width >= 48rem) {
|
|
1857
|
+
display: none;
|
|
1858
|
+
}
|
|
1859
|
+
}
|
|
1737
1860
|
.md\:grid-cols-2 {
|
|
1738
1861
|
@media (width >= 48rem) {
|
|
1739
1862
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|