@memelabui/ui 0.5.0 → 0.6.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/README.md +29 -8
- package/dist/index.cjs +803 -5
- package/dist/index.d.cts +196 -1
- package/dist/index.d.ts +196 -1
- package/dist/index.js +794 -6
- package/dist/preset/index.cjs +19 -18
- package/dist/preset/index.js +19 -18
- package/dist/styles/index.css +298 -58
- package/package.json +1 -1
package/dist/styles/index.css
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
/* ---- Background ---- */
|
|
3
|
-
--ml-bg:
|
|
4
|
-
--ml-fg:
|
|
3
|
+
--ml-bg: 10 10 15;
|
|
4
|
+
--ml-fg: 249 250 251;
|
|
5
5
|
|
|
6
6
|
/* ---- Surface scale ---- */
|
|
7
|
-
--ml-surface-0:
|
|
8
|
-
--ml-surface-50:
|
|
9
|
-
--ml-surface-100:
|
|
10
|
-
--ml-surface-200:
|
|
11
|
-
--ml-surface-300:
|
|
12
|
-
--ml-surface-400:
|
|
7
|
+
--ml-surface-0: 10 10 15;
|
|
8
|
+
--ml-surface-50: 15 15 24;
|
|
9
|
+
--ml-surface-100: 20 20 32;
|
|
10
|
+
--ml-surface-200: 26 26 46;
|
|
11
|
+
--ml-surface-300: 36 36 58;
|
|
12
|
+
--ml-surface-400: 42 42 74;
|
|
13
13
|
|
|
14
14
|
/* ---- Glass ---- */
|
|
15
15
|
--ml-glass-bg: rgba(255, 255, 255, 0.05);
|
|
@@ -19,23 +19,23 @@
|
|
|
19
19
|
--ml-glass-blur: 16px;
|
|
20
20
|
|
|
21
21
|
/* ---- Primary palette ---- */
|
|
22
|
-
--ml-primary:
|
|
23
|
-
--ml-primary-light:
|
|
24
|
-
--ml-primary-dark:
|
|
22
|
+
--ml-primary: 139 92 246;
|
|
23
|
+
--ml-primary-light: 167 139 250;
|
|
24
|
+
--ml-primary-dark: 124 58 237;
|
|
25
25
|
|
|
26
26
|
/* ---- Accent (gradient source) ---- */
|
|
27
|
-
--ml-accent:
|
|
28
|
-
--ml-accent-light:
|
|
29
|
-
--ml-accent-dark:
|
|
27
|
+
--ml-accent: 102 126 234;
|
|
28
|
+
--ml-accent-light: 139 156 247;
|
|
29
|
+
--ml-accent-dark: 76 95 212;
|
|
30
30
|
|
|
31
31
|
/* ---- Glow ---- */
|
|
32
|
-
--ml-glow-purple:
|
|
33
|
-
--ml-glow-pink:
|
|
32
|
+
--ml-glow-purple: 118 75 162;
|
|
33
|
+
--ml-glow-pink: 240 147 251;
|
|
34
34
|
|
|
35
35
|
/* ---- Semantic ---- */
|
|
36
|
-
--ml-success:
|
|
37
|
-
--ml-warning:
|
|
38
|
-
--ml-danger:
|
|
36
|
+
--ml-success: 16 185 129;
|
|
37
|
+
--ml-warning: 245 158 11;
|
|
38
|
+
--ml-danger: 244 63 94;
|
|
39
39
|
|
|
40
40
|
/* ---- Typography ---- */
|
|
41
41
|
--ml-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
@@ -589,8 +589,8 @@ video {
|
|
|
589
589
|
display: none;
|
|
590
590
|
}
|
|
591
591
|
body {
|
|
592
|
-
background-color: var(--ml-bg,
|
|
593
|
-
color: var(--ml-fg,
|
|
592
|
+
background-color: rgb(var(--ml-bg, 10 10 15));
|
|
593
|
+
color: rgb(var(--ml-fg, 249 250 251));
|
|
594
594
|
font-family: var(--ml-font-sans);
|
|
595
595
|
-webkit-font-smoothing: antialiased;
|
|
596
596
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -600,17 +600,17 @@ body {
|
|
|
600
600
|
width: 6px;
|
|
601
601
|
}
|
|
602
602
|
::-webkit-scrollbar-track {
|
|
603
|
-
background: var(--ml-surface-50,
|
|
603
|
+
background: rgb(var(--ml-surface-50, 15 15 24));
|
|
604
604
|
}
|
|
605
605
|
::-webkit-scrollbar-thumb {
|
|
606
|
-
background: var(--ml-surface-300,
|
|
606
|
+
background: rgb(var(--ml-surface-300, 36 36 58));
|
|
607
607
|
border-radius: 9999px;
|
|
608
608
|
}
|
|
609
609
|
/* Global focus-visible */
|
|
610
610
|
:where(a, button, input, select, textarea, [role='button'], [role='menuitem'], [role='tab']):focus-visible {
|
|
611
611
|
outline: none;
|
|
612
612
|
box-shadow:
|
|
613
|
-
0 0 0 2px var(--ml-primary,
|
|
613
|
+
0 0 0 2px rgb(var(--ml-primary, 139 92 246)),
|
|
614
614
|
0 0 0 4px transparent;
|
|
615
615
|
}
|
|
616
616
|
/* Dark select */
|
|
@@ -619,8 +619,8 @@ select {
|
|
|
619
619
|
}
|
|
620
620
|
select option,
|
|
621
621
|
select optgroup {
|
|
622
|
-
background-color: var(--ml-surface-50,
|
|
623
|
-
color: var(--ml-fg,
|
|
622
|
+
background-color: rgb(var(--ml-surface-50, 15 15 24));
|
|
623
|
+
color: rgb(var(--ml-fg, 249 250 251));
|
|
624
624
|
}
|
|
625
625
|
/* Accessibility: link underline offset */
|
|
626
626
|
a {
|
|
@@ -687,13 +687,24 @@ a {
|
|
|
687
687
|
);
|
|
688
688
|
}
|
|
689
689
|
/* Gradient text */
|
|
690
|
+
.text-gradient {
|
|
691
|
+
background: linear-gradient(
|
|
692
|
+
135deg,
|
|
693
|
+
rgb(var(--ml-accent, 102 126 234)) 0%,
|
|
694
|
+
rgb(var(--ml-glow-purple, 118 75 162)) 50%,
|
|
695
|
+
rgb(var(--ml-glow-pink, 240 147 251)) 100%
|
|
696
|
+
);
|
|
697
|
+
-webkit-background-clip: text;
|
|
698
|
+
-webkit-text-fill-color: transparent;
|
|
699
|
+
background-clip: text;
|
|
700
|
+
}
|
|
690
701
|
/* Animated gradient background */
|
|
691
702
|
.animated-gradient {
|
|
692
703
|
background: linear-gradient(
|
|
693
704
|
270deg,
|
|
694
|
-
var(--ml-accent,
|
|
695
|
-
var(--ml-glow-purple,
|
|
696
|
-
var(--ml-glow-pink,
|
|
705
|
+
rgb(var(--ml-accent, 102 126 234)),
|
|
706
|
+
rgb(var(--ml-glow-purple, 118 75 162)),
|
|
707
|
+
rgb(var(--ml-glow-pink, 240 147 251))
|
|
697
708
|
);
|
|
698
709
|
background-size: 400% 400%;
|
|
699
710
|
animation: ml-gradient 15s ease infinite;
|
|
@@ -708,16 +719,23 @@ a {
|
|
|
708
719
|
pointer-events: none;
|
|
709
720
|
}
|
|
710
721
|
.orb-purple {
|
|
711
|
-
background: var(--ml-glow-purple,
|
|
722
|
+
background: rgb(var(--ml-glow-purple, 118 75 162));
|
|
712
723
|
}
|
|
713
724
|
.orb-blue {
|
|
714
|
-
background: var(--ml-accent,
|
|
725
|
+
background: rgb(var(--ml-accent, 102 126 234));
|
|
715
726
|
}
|
|
716
727
|
/* iOS safe-area */
|
|
717
728
|
.pb-safe {
|
|
718
729
|
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
|
|
719
730
|
}
|
|
720
731
|
/* Hide scrollbar */
|
|
732
|
+
.no-scrollbar::-webkit-scrollbar {
|
|
733
|
+
display: none;
|
|
734
|
+
}
|
|
735
|
+
.no-scrollbar {
|
|
736
|
+
-ms-overflow-style: none;
|
|
737
|
+
scrollbar-width: none;
|
|
738
|
+
}
|
|
721
739
|
/* Soft link */
|
|
722
740
|
.sr-only {
|
|
723
741
|
position: absolute;
|
|
@@ -757,6 +775,14 @@ a {
|
|
|
757
775
|
.inset-0 {
|
|
758
776
|
inset: 0px;
|
|
759
777
|
}
|
|
778
|
+
.inset-x-0 {
|
|
779
|
+
left: 0px;
|
|
780
|
+
right: 0px;
|
|
781
|
+
}
|
|
782
|
+
.inset-y-0 {
|
|
783
|
+
top: 0px;
|
|
784
|
+
bottom: 0px;
|
|
785
|
+
}
|
|
760
786
|
.-left-32 {
|
|
761
787
|
left: -8rem;
|
|
762
788
|
}
|
|
@@ -945,6 +971,15 @@ a {
|
|
|
945
971
|
.h-1\.5 {
|
|
946
972
|
height: 0.375rem;
|
|
947
973
|
}
|
|
974
|
+
.h-1\/2 {
|
|
975
|
+
height: 50%;
|
|
976
|
+
}
|
|
977
|
+
.h-1\/3 {
|
|
978
|
+
height: 33.333333%;
|
|
979
|
+
}
|
|
980
|
+
.h-1\/4 {
|
|
981
|
+
height: 25%;
|
|
982
|
+
}
|
|
948
983
|
.h-10 {
|
|
949
984
|
height: 2.5rem;
|
|
950
985
|
}
|
|
@@ -1017,6 +1052,12 @@ a {
|
|
|
1017
1052
|
.h-full {
|
|
1018
1053
|
height: 100%;
|
|
1019
1054
|
}
|
|
1055
|
+
.h-screen {
|
|
1056
|
+
height: 100vh;
|
|
1057
|
+
}
|
|
1058
|
+
.max-h-60 {
|
|
1059
|
+
max-height: 15rem;
|
|
1060
|
+
}
|
|
1020
1061
|
.min-h-\[42px\] {
|
|
1021
1062
|
min-height: 42px;
|
|
1022
1063
|
}
|
|
@@ -1098,6 +1139,9 @@ a {
|
|
|
1098
1139
|
.w-9 {
|
|
1099
1140
|
width: 2.25rem;
|
|
1100
1141
|
}
|
|
1142
|
+
.w-96 {
|
|
1143
|
+
width: 24rem;
|
|
1144
|
+
}
|
|
1101
1145
|
.w-\[300px\] {
|
|
1102
1146
|
width: 300px;
|
|
1103
1147
|
}
|
|
@@ -1120,6 +1164,9 @@ a {
|
|
|
1120
1164
|
.w-full {
|
|
1121
1165
|
width: 100%;
|
|
1122
1166
|
}
|
|
1167
|
+
.w-screen {
|
|
1168
|
+
width: 100vw;
|
|
1169
|
+
}
|
|
1123
1170
|
.min-w-0 {
|
|
1124
1171
|
min-width: 0px;
|
|
1125
1172
|
}
|
|
@@ -1193,6 +1240,10 @@ a {
|
|
|
1193
1240
|
--tw-translate-y: -50%;
|
|
1194
1241
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1195
1242
|
}
|
|
1243
|
+
.-translate-y-2 {
|
|
1244
|
+
--tw-translate-y: -0.5rem;
|
|
1245
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1246
|
+
}
|
|
1196
1247
|
.translate-x-0 {
|
|
1197
1248
|
--tw-translate-x: 0px;
|
|
1198
1249
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1209,10 +1260,22 @@ a {
|
|
|
1209
1260
|
--tw-translate-x: 2rem;
|
|
1210
1261
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1211
1262
|
}
|
|
1263
|
+
.translate-x-full {
|
|
1264
|
+
--tw-translate-x: 100%;
|
|
1265
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1266
|
+
}
|
|
1212
1267
|
.translate-y-0 {
|
|
1213
1268
|
--tw-translate-y: 0px;
|
|
1214
1269
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1215
1270
|
}
|
|
1271
|
+
.translate-y-2 {
|
|
1272
|
+
--tw-translate-y: 0.5rem;
|
|
1273
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1274
|
+
}
|
|
1275
|
+
.translate-y-full {
|
|
1276
|
+
--tw-translate-y: 100%;
|
|
1277
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1278
|
+
}
|
|
1216
1279
|
.-rotate-90 {
|
|
1217
1280
|
--tw-rotate: -90deg;
|
|
1218
1281
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1229,6 +1292,11 @@ a {
|
|
|
1229
1292
|
--tw-skew-x: -20deg;
|
|
1230
1293
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1231
1294
|
}
|
|
1295
|
+
.scale-100 {
|
|
1296
|
+
--tw-scale-x: 1;
|
|
1297
|
+
--tw-scale-y: 1;
|
|
1298
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1299
|
+
}
|
|
1232
1300
|
.scale-95 {
|
|
1233
1301
|
--tw-scale-x: .95;
|
|
1234
1302
|
--tw-scale-y: .95;
|
|
@@ -1357,6 +1425,15 @@ a {
|
|
|
1357
1425
|
.items-center {
|
|
1358
1426
|
align-items: center;
|
|
1359
1427
|
}
|
|
1428
|
+
.items-baseline {
|
|
1429
|
+
align-items: baseline;
|
|
1430
|
+
}
|
|
1431
|
+
.items-stretch {
|
|
1432
|
+
align-items: stretch;
|
|
1433
|
+
}
|
|
1434
|
+
.justify-start {
|
|
1435
|
+
justify-content: flex-start;
|
|
1436
|
+
}
|
|
1360
1437
|
.justify-end {
|
|
1361
1438
|
justify-content: flex-end;
|
|
1362
1439
|
}
|
|
@@ -1366,6 +1443,15 @@ a {
|
|
|
1366
1443
|
.justify-between {
|
|
1367
1444
|
justify-content: space-between;
|
|
1368
1445
|
}
|
|
1446
|
+
.justify-around {
|
|
1447
|
+
justify-content: space-around;
|
|
1448
|
+
}
|
|
1449
|
+
.justify-evenly {
|
|
1450
|
+
justify-content: space-evenly;
|
|
1451
|
+
}
|
|
1452
|
+
.gap-0 {
|
|
1453
|
+
gap: 0px;
|
|
1454
|
+
}
|
|
1369
1455
|
.gap-0\.5 {
|
|
1370
1456
|
gap: 0.125rem;
|
|
1371
1457
|
}
|
|
@@ -1375,6 +1461,12 @@ a {
|
|
|
1375
1461
|
.gap-1\.5 {
|
|
1376
1462
|
gap: 0.375rem;
|
|
1377
1463
|
}
|
|
1464
|
+
.gap-10 {
|
|
1465
|
+
gap: 2.5rem;
|
|
1466
|
+
}
|
|
1467
|
+
.gap-12 {
|
|
1468
|
+
gap: 3rem;
|
|
1469
|
+
}
|
|
1378
1470
|
.gap-2 {
|
|
1379
1471
|
gap: 0.5rem;
|
|
1380
1472
|
}
|
|
@@ -1387,6 +1479,15 @@ a {
|
|
|
1387
1479
|
.gap-4 {
|
|
1388
1480
|
gap: 1rem;
|
|
1389
1481
|
}
|
|
1482
|
+
.gap-5 {
|
|
1483
|
+
gap: 1.25rem;
|
|
1484
|
+
}
|
|
1485
|
+
.gap-6 {
|
|
1486
|
+
gap: 1.5rem;
|
|
1487
|
+
}
|
|
1488
|
+
.gap-8 {
|
|
1489
|
+
gap: 2rem;
|
|
1490
|
+
}
|
|
1390
1491
|
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
|
|
1391
1492
|
--tw-space-y-reverse: 0;
|
|
1392
1493
|
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
|
|
@@ -1431,12 +1532,24 @@ a {
|
|
|
1431
1532
|
.self-stretch {
|
|
1432
1533
|
align-self: stretch;
|
|
1433
1534
|
}
|
|
1535
|
+
.overflow-auto {
|
|
1536
|
+
overflow: auto;
|
|
1537
|
+
}
|
|
1434
1538
|
.overflow-hidden {
|
|
1435
1539
|
overflow: hidden;
|
|
1436
1540
|
}
|
|
1541
|
+
.overflow-x-auto {
|
|
1542
|
+
overflow-x: auto;
|
|
1543
|
+
}
|
|
1437
1544
|
.overflow-y-auto {
|
|
1438
1545
|
overflow-y: auto;
|
|
1439
1546
|
}
|
|
1547
|
+
.overflow-x-hidden {
|
|
1548
|
+
overflow-x: hidden;
|
|
1549
|
+
}
|
|
1550
|
+
.overflow-y-hidden {
|
|
1551
|
+
overflow-y: hidden;
|
|
1552
|
+
}
|
|
1440
1553
|
.truncate {
|
|
1441
1554
|
overflow: hidden;
|
|
1442
1555
|
text-overflow: ellipsis;
|
|
@@ -1501,7 +1614,11 @@ a {
|
|
|
1501
1614
|
border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
|
|
1502
1615
|
}
|
|
1503
1616
|
.border-primary {
|
|
1504
|
-
border-
|
|
1617
|
+
--tw-border-opacity: 1;
|
|
1618
|
+
border-color: rgb(var(--ml-primary) / var(--tw-border-opacity, 1));
|
|
1619
|
+
}
|
|
1620
|
+
.border-primary\/30 {
|
|
1621
|
+
border-color: rgb(var(--ml-primary) / 0.3);
|
|
1505
1622
|
}
|
|
1506
1623
|
.border-rose-500 {
|
|
1507
1624
|
--tw-border-opacity: 1;
|
|
@@ -1526,14 +1643,21 @@ a {
|
|
|
1526
1643
|
border-color: rgb(255 255 255 / 0.06);
|
|
1527
1644
|
}
|
|
1528
1645
|
.border-t-primary {
|
|
1529
|
-
border-
|
|
1646
|
+
--tw-border-opacity: 1;
|
|
1647
|
+
border-top-color: rgb(var(--ml-primary) / var(--tw-border-opacity, 1));
|
|
1530
1648
|
}
|
|
1531
1649
|
.border-t-white {
|
|
1532
1650
|
--tw-border-opacity: 1;
|
|
1533
1651
|
border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
|
|
1534
1652
|
}
|
|
1535
|
-
.bg-\[var\(--ml-primary\)\] {
|
|
1536
|
-
background-color: var(--ml-primary);
|
|
1653
|
+
.bg-\[rgb\(var\(--ml-primary\)\)\] {
|
|
1654
|
+
background-color: rgb(var(--ml-primary));
|
|
1655
|
+
}
|
|
1656
|
+
.bg-accent\/15 {
|
|
1657
|
+
background-color: rgb(var(--ml-accent) / 0.15);
|
|
1658
|
+
}
|
|
1659
|
+
.bg-accent\/\[0\.10\] {
|
|
1660
|
+
background-color: rgb(var(--ml-accent) / 0.10);
|
|
1537
1661
|
}
|
|
1538
1662
|
.bg-amber-400 {
|
|
1539
1663
|
--tw-bg-opacity: 1;
|
|
@@ -1556,6 +1680,9 @@ a {
|
|
|
1556
1680
|
.bg-black\/25 {
|
|
1557
1681
|
background-color: rgb(0 0 0 / 0.25);
|
|
1558
1682
|
}
|
|
1683
|
+
.bg-black\/40 {
|
|
1684
|
+
background-color: rgb(0 0 0 / 0.4);
|
|
1685
|
+
}
|
|
1559
1686
|
.bg-emerald-400 {
|
|
1560
1687
|
--tw-bg-opacity: 1;
|
|
1561
1688
|
background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
|
|
@@ -1578,7 +1705,17 @@ a {
|
|
|
1578
1705
|
background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
|
|
1579
1706
|
}
|
|
1580
1707
|
.bg-primary {
|
|
1581
|
-
|
|
1708
|
+
--tw-bg-opacity: 1;
|
|
1709
|
+
background-color: rgb(var(--ml-primary) / var(--tw-bg-opacity, 1));
|
|
1710
|
+
}
|
|
1711
|
+
.bg-primary\/10 {
|
|
1712
|
+
background-color: rgb(var(--ml-primary) / 0.1);
|
|
1713
|
+
}
|
|
1714
|
+
.bg-primary\/15 {
|
|
1715
|
+
background-color: rgb(var(--ml-primary) / 0.15);
|
|
1716
|
+
}
|
|
1717
|
+
.bg-primary\/20 {
|
|
1718
|
+
background-color: rgb(var(--ml-primary) / 0.2);
|
|
1582
1719
|
}
|
|
1583
1720
|
.bg-purple-500\/\[0\.12\] {
|
|
1584
1721
|
background-color: rgb(168 85 247 / 0.12);
|
|
@@ -1602,13 +1739,29 @@ a {
|
|
|
1602
1739
|
background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
|
|
1603
1740
|
}
|
|
1604
1741
|
.bg-surface {
|
|
1605
|
-
|
|
1742
|
+
--tw-bg-opacity: 1;
|
|
1743
|
+
background-color: rgb(var(--ml-bg) / var(--tw-bg-opacity, 1));
|
|
1606
1744
|
}
|
|
1607
1745
|
.bg-surface-100 {
|
|
1608
|
-
|
|
1746
|
+
--tw-bg-opacity: 1;
|
|
1747
|
+
background-color: rgb(var(--ml-surface-100) / var(--tw-bg-opacity, 1));
|
|
1748
|
+
}
|
|
1749
|
+
.bg-surface-100\/95 {
|
|
1750
|
+
background-color: rgb(var(--ml-surface-100) / 0.95);
|
|
1609
1751
|
}
|
|
1610
1752
|
.bg-surface-300 {
|
|
1611
|
-
|
|
1753
|
+
--tw-bg-opacity: 1;
|
|
1754
|
+
background-color: rgb(var(--ml-surface-300) / var(--tw-bg-opacity, 1));
|
|
1755
|
+
}
|
|
1756
|
+
.bg-surface-50 {
|
|
1757
|
+
--tw-bg-opacity: 1;
|
|
1758
|
+
background-color: rgb(var(--ml-surface-50) / var(--tw-bg-opacity, 1));
|
|
1759
|
+
}
|
|
1760
|
+
.bg-surface-50\/80 {
|
|
1761
|
+
background-color: rgb(var(--ml-surface-50) / 0.8);
|
|
1762
|
+
}
|
|
1763
|
+
.bg-surface-50\/90 {
|
|
1764
|
+
background-color: rgb(var(--ml-surface-50) / 0.9);
|
|
1612
1765
|
}
|
|
1613
1766
|
.bg-transparent {
|
|
1614
1767
|
background-color: transparent;
|
|
@@ -1639,14 +1792,14 @@ a {
|
|
|
1639
1792
|
.bg-gradient-to-r {
|
|
1640
1793
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
1641
1794
|
}
|
|
1642
|
-
.from-\[var\(--ml-accent\)\] {
|
|
1643
|
-
--tw-gradient-from: var(--ml-accent) var(--tw-gradient-from-position);
|
|
1644
|
-
--tw-gradient-to: rgb(
|
|
1795
|
+
.from-\[rgb\(var\(--ml-accent\)\)\] {
|
|
1796
|
+
--tw-gradient-from: rgb(var(--ml-accent)) var(--tw-gradient-from-position);
|
|
1797
|
+
--tw-gradient-to: rgb(var(--ml-accent) / 0) var(--tw-gradient-to-position);
|
|
1645
1798
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
1646
1799
|
}
|
|
1647
1800
|
.from-primary {
|
|
1648
|
-
--tw-gradient-from: var(--ml-primary) var(--tw-gradient-from-position);
|
|
1649
|
-
--tw-gradient-to: rgb(
|
|
1801
|
+
--tw-gradient-from: rgb(var(--ml-primary) / 1) var(--tw-gradient-from-position);
|
|
1802
|
+
--tw-gradient-to: rgb(var(--ml-primary) / 0) var(--tw-gradient-to-position);
|
|
1650
1803
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
1651
1804
|
}
|
|
1652
1805
|
.from-transparent {
|
|
@@ -1663,11 +1816,11 @@ a {
|
|
|
1663
1816
|
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
|
1664
1817
|
--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
|
|
1665
1818
|
}
|
|
1666
|
-
.to-\[var\(--ml-primary\)\] {
|
|
1667
|
-
--tw-gradient-to: var(--ml-primary) var(--tw-gradient-to-position);
|
|
1819
|
+
.to-\[rgb\(var\(--ml-primary\)\)\] {
|
|
1820
|
+
--tw-gradient-to: rgb(var(--ml-primary)) var(--tw-gradient-to-position);
|
|
1668
1821
|
}
|
|
1669
1822
|
.to-accent {
|
|
1670
|
-
--tw-gradient-to: var(--ml-accent) var(--tw-gradient-to-position);
|
|
1823
|
+
--tw-gradient-to: rgb(var(--ml-accent) / 1) var(--tw-gradient-to-position);
|
|
1671
1824
|
}
|
|
1672
1825
|
.to-purple-600 {
|
|
1673
1826
|
--tw-gradient-to: #9333ea var(--tw-gradient-to-position);
|
|
@@ -1846,6 +1999,9 @@ a {
|
|
|
1846
1999
|
.font-medium {
|
|
1847
2000
|
font-weight: 500;
|
|
1848
2001
|
}
|
|
2002
|
+
.font-normal {
|
|
2003
|
+
font-weight: 400;
|
|
2004
|
+
}
|
|
1849
2005
|
.font-semibold {
|
|
1850
2006
|
font-weight: 600;
|
|
1851
2007
|
}
|
|
@@ -1865,11 +2021,15 @@ a {
|
|
|
1865
2021
|
.leading-snug {
|
|
1866
2022
|
line-height: 1.375;
|
|
1867
2023
|
}
|
|
2024
|
+
.tracking-tight {
|
|
2025
|
+
letter-spacing: -0.025em;
|
|
2026
|
+
}
|
|
1868
2027
|
.tracking-wider {
|
|
1869
2028
|
letter-spacing: 0.05em;
|
|
1870
2029
|
}
|
|
1871
2030
|
.text-accent-light {
|
|
1872
|
-
|
|
2031
|
+
--tw-text-opacity: 1;
|
|
2032
|
+
color: rgb(var(--ml-accent-light) / var(--tw-text-opacity, 1));
|
|
1873
2033
|
}
|
|
1874
2034
|
.text-amber-400 {
|
|
1875
2035
|
--tw-text-opacity: 1;
|
|
@@ -1892,7 +2052,12 @@ a {
|
|
|
1892
2052
|
color: rgb(74 222 128 / var(--tw-text-opacity, 1));
|
|
1893
2053
|
}
|
|
1894
2054
|
.text-primary {
|
|
1895
|
-
|
|
2055
|
+
--tw-text-opacity: 1;
|
|
2056
|
+
color: rgb(var(--ml-primary) / var(--tw-text-opacity, 1));
|
|
2057
|
+
}
|
|
2058
|
+
.text-primary-light {
|
|
2059
|
+
--tw-text-opacity: 1;
|
|
2060
|
+
color: rgb(var(--ml-primary-light) / var(--tw-text-opacity, 1));
|
|
1896
2061
|
}
|
|
1897
2062
|
.text-red-400 {
|
|
1898
2063
|
--tw-text-opacity: 1;
|
|
@@ -1982,6 +2147,11 @@ a {
|
|
|
1982
2147
|
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
|
1983
2148
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1984
2149
|
}
|
|
2150
|
+
.shadow-2xl {
|
|
2151
|
+
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
|
2152
|
+
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
|
|
2153
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
2154
|
+
}
|
|
1985
2155
|
.shadow-glow {
|
|
1986
2156
|
--tw-shadow: var(--ml-shadow-glow);
|
|
1987
2157
|
--tw-shadow-colored: var(--ml-shadow-glow);
|
|
@@ -2038,8 +2208,11 @@ a {
|
|
|
2038
2208
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2039
2209
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2040
2210
|
}
|
|
2041
|
-
.ring-\[var\(--ml-primary\)\] {
|
|
2042
|
-
--tw-ring-color: var(--ml-primary);
|
|
2211
|
+
.ring-\[rgb\(var\(--ml-primary\)\)\] {
|
|
2212
|
+
--tw-ring-color: rgb(var(--ml-primary));
|
|
2213
|
+
}
|
|
2214
|
+
.ring-accent\/20 {
|
|
2215
|
+
--tw-ring-color: rgb(var(--ml-accent) / 0.2);
|
|
2043
2216
|
}
|
|
2044
2217
|
.ring-amber-500\/20 {
|
|
2045
2218
|
--tw-ring-color: rgb(245 158 11 / 0.2);
|
|
@@ -2047,12 +2220,21 @@ a {
|
|
|
2047
2220
|
.ring-emerald-500\/20 {
|
|
2048
2221
|
--tw-ring-color: rgb(16 185 129 / 0.2);
|
|
2049
2222
|
}
|
|
2223
|
+
.ring-primary\/20 {
|
|
2224
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.2);
|
|
2225
|
+
}
|
|
2226
|
+
.ring-primary\/40 {
|
|
2227
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.4);
|
|
2228
|
+
}
|
|
2050
2229
|
.ring-rose-500\/20 {
|
|
2051
2230
|
--tw-ring-color: rgb(244 63 94 / 0.2);
|
|
2052
2231
|
}
|
|
2053
2232
|
.ring-rose-500\/40 {
|
|
2054
2233
|
--tw-ring-color: rgb(244 63 94 / 0.4);
|
|
2055
2234
|
}
|
|
2235
|
+
.ring-rose-500\/50 {
|
|
2236
|
+
--tw-ring-color: rgb(244 63 94 / 0.5);
|
|
2237
|
+
}
|
|
2056
2238
|
.ring-white\/10 {
|
|
2057
2239
|
--tw-ring-color: rgb(255 255 255 / 0.1);
|
|
2058
2240
|
}
|
|
@@ -2178,6 +2360,9 @@ a {
|
|
|
2178
2360
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2179
2361
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2180
2362
|
}
|
|
2363
|
+
.focus-within\:ring-primary\/40:focus-within {
|
|
2364
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.4);
|
|
2365
|
+
}
|
|
2181
2366
|
.focus-within\:ring-rose-500\/40:focus-within {
|
|
2182
2367
|
--tw-ring-color: rgb(244 63 94 / 0.4);
|
|
2183
2368
|
}
|
|
@@ -2191,6 +2376,9 @@ a {
|
|
|
2191
2376
|
--tw-scale-y: 1.02;
|
|
2192
2377
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
2193
2378
|
}
|
|
2379
|
+
.hover\:border-primary\/50:hover {
|
|
2380
|
+
border-color: rgb(var(--ml-primary) / 0.5);
|
|
2381
|
+
}
|
|
2194
2382
|
.hover\:border-transparent:hover {
|
|
2195
2383
|
border-color: transparent;
|
|
2196
2384
|
}
|
|
@@ -2241,6 +2429,9 @@ a {
|
|
|
2241
2429
|
.hover\:text-white\/50:hover {
|
|
2242
2430
|
color: rgb(255 255 255 / 0.5);
|
|
2243
2431
|
}
|
|
2432
|
+
.hover\:text-white\/60:hover {
|
|
2433
|
+
color: rgb(255 255 255 / 0.6);
|
|
2434
|
+
}
|
|
2244
2435
|
.hover\:text-white\/70:hover {
|
|
2245
2436
|
color: rgb(255 255 255 / 0.7);
|
|
2246
2437
|
}
|
|
@@ -2283,13 +2474,31 @@ a {
|
|
|
2283
2474
|
outline: 2px solid transparent;
|
|
2284
2475
|
outline-offset: 2px;
|
|
2285
2476
|
}
|
|
2477
|
+
.focus-visible\:ring-1:focus-visible {
|
|
2478
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
2479
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2480
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2481
|
+
}
|
|
2286
2482
|
.focus-visible\:ring-2:focus-visible {
|
|
2287
2483
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
2288
2484
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2289
2485
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2290
2486
|
}
|
|
2487
|
+
.focus-visible\:ring-inset:focus-visible {
|
|
2488
|
+
--tw-ring-inset: inset;
|
|
2489
|
+
}
|
|
2291
2490
|
.focus-visible\:ring-primary:focus-visible {
|
|
2292
|
-
--tw-ring-
|
|
2491
|
+
--tw-ring-opacity: 1;
|
|
2492
|
+
--tw-ring-color: rgb(var(--ml-primary) / var(--tw-ring-opacity, 1));
|
|
2493
|
+
}
|
|
2494
|
+
.focus-visible\:ring-primary\/30:focus-visible {
|
|
2495
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.3);
|
|
2496
|
+
}
|
|
2497
|
+
.focus-visible\:ring-primary\/40:focus-visible {
|
|
2498
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.4);
|
|
2499
|
+
}
|
|
2500
|
+
.focus-visible\:ring-primary\/60:focus-visible {
|
|
2501
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.6);
|
|
2293
2502
|
}
|
|
2294
2503
|
.focus-visible\:ring-offset-1:focus-visible {
|
|
2295
2504
|
--tw-ring-offset-width: 1px;
|
|
@@ -2298,7 +2507,7 @@ a {
|
|
|
2298
2507
|
--tw-ring-offset-width: 2px;
|
|
2299
2508
|
}
|
|
2300
2509
|
.focus-visible\:ring-offset-surface:focus-visible {
|
|
2301
|
-
--tw-ring-offset-color: var(--ml-bg);
|
|
2510
|
+
--tw-ring-offset-color: rgb(var(--ml-bg) / 1);
|
|
2302
2511
|
}
|
|
2303
2512
|
.focus-visible\:ring-offset-transparent:focus-visible {
|
|
2304
2513
|
--tw-ring-offset-color: transparent;
|
|
@@ -2326,6 +2535,9 @@ a {
|
|
|
2326
2535
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2327
2536
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2328
2537
|
}
|
|
2538
|
+
.peer:focus-visible ~ .peer-focus-visible\:ring-primary\/40 {
|
|
2539
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.4);
|
|
2540
|
+
}
|
|
2329
2541
|
.peer:focus-visible ~ .peer-focus-visible\:ring-offset-1 {
|
|
2330
2542
|
--tw-ring-offset-width: 1px;
|
|
2331
2543
|
}
|
|
@@ -2369,6 +2581,10 @@ a {
|
|
|
2369
2581
|
font-size: 1.5rem;
|
|
2370
2582
|
line-height: 2rem;
|
|
2371
2583
|
}
|
|
2584
|
+
.sm\:text-4xl {
|
|
2585
|
+
font-size: 2.25rem;
|
|
2586
|
+
line-height: 2.5rem;
|
|
2587
|
+
}
|
|
2372
2588
|
}
|
|
2373
2589
|
@media (min-width: 768px) {
|
|
2374
2590
|
.md\:grid-cols-2 {
|
|
@@ -2393,8 +2609,8 @@ a {
|
|
|
2393
2609
|
.\[\&\:\:-moz-range-thumb\]\:border-2::-moz-range-thumb {
|
|
2394
2610
|
border-width: 2px;
|
|
2395
2611
|
}
|
|
2396
|
-
.\[\&\:\:-moz-range-thumb\]\:border-\[var\(--ml-primary\2c
|
|
2397
|
-
border-color: var(--ml-primary
|
|
2612
|
+
.\[\&\:\:-moz-range-thumb\]\:border-\[rgb\(var\(--ml-primary\2c 139_92_246\)\)\]::-moz-range-thumb {
|
|
2613
|
+
border-color: rgb(var(--ml-primary,139 92 246));
|
|
2398
2614
|
}
|
|
2399
2615
|
.\[\&\:\:-moz-range-thumb\]\:bg-white::-moz-range-thumb {
|
|
2400
2616
|
--tw-bg-opacity: 1;
|
|
@@ -2414,12 +2630,33 @@ a {
|
|
|
2414
2630
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2415
2631
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2416
2632
|
}
|
|
2633
|
+
.focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-primary\/40::-moz-range-thumb:focus-visible {
|
|
2634
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.4);
|
|
2635
|
+
}
|
|
2417
2636
|
.\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track {
|
|
2418
2637
|
border-radius: 9999px;
|
|
2419
2638
|
}
|
|
2420
2639
|
.\[\&\:\:-moz-range-track\]\:bg-transparent::-moz-range-track {
|
|
2421
2640
|
background-color: transparent;
|
|
2422
2641
|
}
|
|
2642
|
+
.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
|
|
2643
|
+
border-radius: 9999px;
|
|
2644
|
+
}
|
|
2645
|
+
.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-white\/15::-webkit-scrollbar-thumb {
|
|
2646
|
+
background-color: rgb(255 255 255 / 0.15);
|
|
2647
|
+
}
|
|
2648
|
+
.hover\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-white\/25::-webkit-scrollbar-thumb:hover {
|
|
2649
|
+
background-color: rgb(255 255 255 / 0.25);
|
|
2650
|
+
}
|
|
2651
|
+
.\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track {
|
|
2652
|
+
background-color: transparent;
|
|
2653
|
+
}
|
|
2654
|
+
.\[\&\:\:-webkit-scrollbar\]\:h-1\.5::-webkit-scrollbar {
|
|
2655
|
+
height: 0.375rem;
|
|
2656
|
+
}
|
|
2657
|
+
.\[\&\:\:-webkit-scrollbar\]\:w-1\.5::-webkit-scrollbar {
|
|
2658
|
+
width: 0.375rem;
|
|
2659
|
+
}
|
|
2423
2660
|
.\[\&\:\:-webkit-slider-thumb\]\:h-4::-webkit-slider-thumb {
|
|
2424
2661
|
height: 1rem;
|
|
2425
2662
|
}
|
|
@@ -2436,8 +2673,8 @@ a {
|
|
|
2436
2673
|
.\[\&\:\:-webkit-slider-thumb\]\:border-2::-webkit-slider-thumb {
|
|
2437
2674
|
border-width: 2px;
|
|
2438
2675
|
}
|
|
2439
|
-
.\[\&\:\:-webkit-slider-thumb\]\:border-\[var\(--ml-primary\2c
|
|
2440
|
-
border-color: var(--ml-primary
|
|
2676
|
+
.\[\&\:\:-webkit-slider-thumb\]\:border-\[rgb\(var\(--ml-primary\2c 139_92_246\)\)\]::-webkit-slider-thumb {
|
|
2677
|
+
border-color: rgb(var(--ml-primary,139 92 246));
|
|
2441
2678
|
}
|
|
2442
2679
|
.\[\&\:\:-webkit-slider-thumb\]\:bg-white::-webkit-slider-thumb {
|
|
2443
2680
|
--tw-bg-opacity: 1;
|
|
@@ -2457,9 +2694,12 @@ a {
|
|
|
2457
2694
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2458
2695
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2459
2696
|
}
|
|
2697
|
+
.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-primary\/40::-webkit-slider-thumb:focus-visible {
|
|
2698
|
+
--tw-ring-color: rgb(var(--ml-primary) / 0.4);
|
|
2699
|
+
}
|
|
2460
2700
|
.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-2::-webkit-slider-thumb:focus-visible {
|
|
2461
2701
|
--tw-ring-offset-width: 2px;
|
|
2462
2702
|
}
|
|
2463
2703
|
.focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-surface::-webkit-slider-thumb:focus-visible {
|
|
2464
|
-
--tw-ring-offset-color: var(--ml-bg);
|
|
2704
|
+
--tw-ring-offset-color: rgb(var(--ml-bg) / 1);
|
|
2465
2705
|
}
|