singularity-components 0.1.91 → 0.1.93
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/main.cjs +7992 -6936
- package/dist/main.cjs.map +1 -1
- package/dist/main.css +245 -29
- package/dist/main.css.map +1 -1
- package/dist/main.d.cts +5 -4
- package/dist/main.d.ts +5 -4
- package/dist/main.js +7992 -6936
- package/dist/main.js.map +1 -1
- package/package.json +64 -66
package/dist/main.css
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
/* src/tailwind.css */
|
|
2
|
+
@layer properties;
|
|
2
3
|
:root {
|
|
3
4
|
--sg-black: hsl(0 0% 15%);
|
|
4
5
|
--sg-white: hsl(30 20% 98%);
|
|
6
|
+
--sg-pink: hsl(330 90% 65%);
|
|
5
7
|
--sg-gray-light: hsl(240 5% 96%);
|
|
6
8
|
--sg-gray: hsl(240 4% 46%);
|
|
7
9
|
--sg-gray-dark: hsl(240 6% 10%);
|
|
@@ -73,12 +75,15 @@
|
|
|
73
75
|
--sg-font-weight-medium: 500;
|
|
74
76
|
--sg-font-weight-semibold: 600;
|
|
75
77
|
--sg-font-weight-bold: 700;
|
|
78
|
+
--sg-font-weight-extrabold: 800;
|
|
76
79
|
--sg-tracking-tight: -0.025em;
|
|
77
80
|
--sg-leading-relaxed: 1.625;
|
|
78
81
|
--sg-animate-spin: spin 1s linear infinite;
|
|
79
82
|
--sg-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
80
83
|
--sg-default-transition-duration: 150ms;
|
|
81
84
|
--sg-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
85
|
+
--sg-default-font-family: Inter;
|
|
86
|
+
--sg-default-mono-font-family: "JetBrains Mono";
|
|
82
87
|
--sg-color-black: var(--sg-black);
|
|
83
88
|
--sg-color-white: var(--sg-white);
|
|
84
89
|
--sg-color-background: var(--sg-color-background);
|
|
@@ -101,9 +106,9 @@
|
|
|
101
106
|
line-height: 1.5;
|
|
102
107
|
-webkit-text-size-adjust: 100%;
|
|
103
108
|
tab-size: 4;
|
|
104
|
-
font-family:
|
|
105
|
-
font-feature-settings:
|
|
106
|
-
font-variation-settings:
|
|
109
|
+
font-family: var(--sg-default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
110
|
+
font-feature-settings: var(--sg-default-font-feature-settings, normal);
|
|
111
|
+
font-variation-settings: var(--sg-default-font-variation-settings, normal);
|
|
107
112
|
-webkit-tap-highlight-color: transparent;
|
|
108
113
|
}
|
|
109
114
|
hr {
|
|
@@ -137,9 +142,9 @@
|
|
|
137
142
|
kbd,
|
|
138
143
|
samp,
|
|
139
144
|
pre {
|
|
140
|
-
font-family: "
|
|
141
|
-
font-feature-settings:
|
|
142
|
-
font-variation-settings:
|
|
145
|
+
font-family: var(--sg-default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
146
|
+
font-feature-settings: var(--sg-default-mono-font-feature-settings, normal);
|
|
147
|
+
font-variation-settings: var(--sg-default-mono-font-variation-settings, normal);
|
|
143
148
|
font-size: 1em;
|
|
144
149
|
}
|
|
145
150
|
small {
|
|
@@ -222,7 +227,10 @@
|
|
|
222
227
|
}
|
|
223
228
|
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
224
229
|
::placeholder {
|
|
225
|
-
color:
|
|
230
|
+
color: currentcolor;
|
|
231
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
232
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
233
|
+
}
|
|
226
234
|
}
|
|
227
235
|
}
|
|
228
236
|
textarea {
|
|
@@ -252,6 +260,9 @@
|
|
|
252
260
|
::-webkit-datetime-edit-meridiem-field {
|
|
253
261
|
padding-block: 0;
|
|
254
262
|
}
|
|
263
|
+
::-webkit-calendar-picker-indicator {
|
|
264
|
+
line-height: 1;
|
|
265
|
+
}
|
|
255
266
|
:-moz-ui-invalid {
|
|
256
267
|
box-shadow: none;
|
|
257
268
|
}
|
|
@@ -272,9 +283,18 @@
|
|
|
272
283
|
.sg\:pointer-events-none {
|
|
273
284
|
pointer-events: none;
|
|
274
285
|
}
|
|
286
|
+
.sg\:absolute {
|
|
287
|
+
position: absolute;
|
|
288
|
+
}
|
|
275
289
|
.sg\:relative {
|
|
276
290
|
position: relative;
|
|
277
291
|
}
|
|
292
|
+
.sg\:inset-0 {
|
|
293
|
+
inset: calc(var(--sg-spacing) * 0);
|
|
294
|
+
}
|
|
295
|
+
.sg\:inset-\[18\%\] {
|
|
296
|
+
inset: 18%;
|
|
297
|
+
}
|
|
278
298
|
.sg\:col-start-2 {
|
|
279
299
|
grid-column-start: 2;
|
|
280
300
|
}
|
|
@@ -302,9 +322,16 @@
|
|
|
302
322
|
.sg\:grid {
|
|
303
323
|
display: grid;
|
|
304
324
|
}
|
|
325
|
+
.sg\:inline-block {
|
|
326
|
+
display: inline-block;
|
|
327
|
+
}
|
|
305
328
|
.sg\:inline-flex {
|
|
306
329
|
display: inline-flex;
|
|
307
330
|
}
|
|
331
|
+
.sg\:size-2 {
|
|
332
|
+
width: calc(var(--sg-spacing) * 2);
|
|
333
|
+
height: calc(var(--sg-spacing) * 2);
|
|
334
|
+
}
|
|
308
335
|
.sg\:size-4 {
|
|
309
336
|
width: calc(var(--sg-spacing) * 4);
|
|
310
337
|
height: calc(var(--sg-spacing) * 4);
|
|
@@ -313,6 +340,12 @@
|
|
|
313
340
|
width: calc(var(--sg-spacing) * 9);
|
|
314
341
|
height: calc(var(--sg-spacing) * 9);
|
|
315
342
|
}
|
|
343
|
+
.sg\:h-4 {
|
|
344
|
+
height: calc(var(--sg-spacing) * 4);
|
|
345
|
+
}
|
|
346
|
+
.sg\:h-5 {
|
|
347
|
+
height: calc(var(--sg-spacing) * 5);
|
|
348
|
+
}
|
|
316
349
|
.sg\:h-8 {
|
|
317
350
|
height: calc(var(--sg-spacing) * 8);
|
|
318
351
|
}
|
|
@@ -322,12 +355,27 @@
|
|
|
322
355
|
.sg\:h-10 {
|
|
323
356
|
height: calc(var(--sg-spacing) * 10);
|
|
324
357
|
}
|
|
358
|
+
.sg\:h-12 {
|
|
359
|
+
height: calc(var(--sg-spacing) * 12);
|
|
360
|
+
}
|
|
325
361
|
.sg\:h-\[100px\] {
|
|
326
362
|
height: 100px;
|
|
327
363
|
}
|
|
328
364
|
.sg\:min-h-4 {
|
|
329
365
|
min-height: calc(var(--sg-spacing) * 4);
|
|
330
366
|
}
|
|
367
|
+
.sg\:w-4 {
|
|
368
|
+
width: calc(var(--sg-spacing) * 4);
|
|
369
|
+
}
|
|
370
|
+
.sg\:w-5 {
|
|
371
|
+
width: calc(var(--sg-spacing) * 5);
|
|
372
|
+
}
|
|
373
|
+
.sg\:w-8 {
|
|
374
|
+
width: calc(var(--sg-spacing) * 8);
|
|
375
|
+
}
|
|
376
|
+
.sg\:w-12 {
|
|
377
|
+
width: calc(var(--sg-spacing) * 12);
|
|
378
|
+
}
|
|
331
379
|
.sg\:w-\[100px\] {
|
|
332
380
|
width: 100px;
|
|
333
381
|
}
|
|
@@ -434,6 +482,9 @@
|
|
|
434
482
|
.sg\:overflow-x-auto {
|
|
435
483
|
overflow-x: auto;
|
|
436
484
|
}
|
|
485
|
+
.sg\:rounded-full {
|
|
486
|
+
border-radius: calc(infinity * 1px);
|
|
487
|
+
}
|
|
437
488
|
.sg\:rounded-lg {
|
|
438
489
|
border-radius: var(--radius);
|
|
439
490
|
}
|
|
@@ -458,6 +509,12 @@
|
|
|
458
509
|
.sg\:border-transparent {
|
|
459
510
|
border-color: transparent;
|
|
460
511
|
}
|
|
512
|
+
.sg\:bg-\[var\(--sg-pink\)\] {
|
|
513
|
+
background-color: var(--sg-pink);
|
|
514
|
+
}
|
|
515
|
+
.sg\:bg-\[var\(--sg-primary\)\] {
|
|
516
|
+
background-color: var(--sg-primary);
|
|
517
|
+
}
|
|
461
518
|
.sg\:bg-accent {
|
|
462
519
|
background-color: var(--accent);
|
|
463
520
|
}
|
|
@@ -483,7 +540,10 @@
|
|
|
483
540
|
background-color: var(--sg-gray);
|
|
484
541
|
}
|
|
485
542
|
.sg\:bg-muted\/50 {
|
|
486
|
-
background-color:
|
|
543
|
+
background-color: var(--muted);
|
|
544
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
545
|
+
background-color: color-mix(in oklab, var(--muted) 50%, transparent);
|
|
546
|
+
}
|
|
487
547
|
}
|
|
488
548
|
.sg\:bg-orange {
|
|
489
549
|
background-color: var(--sg-orange);
|
|
@@ -504,10 +564,31 @@
|
|
|
504
564
|
--tw-gradient-position: to right in oklab;
|
|
505
565
|
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
506
566
|
}
|
|
567
|
+
.sg\:bg-\[conic-gradient\(var\(--sg-pink\)\,var\(--sg-primary\)\,var\(--sg-primary\)\,var\(--sg-pink\)\)\] {
|
|
568
|
+
background-image:
|
|
569
|
+
conic-gradient(
|
|
570
|
+
var(--sg-pink),
|
|
571
|
+
var(--sg-primary),
|
|
572
|
+
var(--sg-primary),
|
|
573
|
+
var(--sg-pink));
|
|
574
|
+
}
|
|
575
|
+
.sg\:from-\[var\(--sg-gradient-1\)\] {
|
|
576
|
+
--tw-gradient-from: var(--sg-gradient-1);
|
|
577
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
578
|
+
}
|
|
507
579
|
.sg\:from-blue {
|
|
508
580
|
--tw-gradient-from: var(--sg-blue);
|
|
509
581
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
510
582
|
}
|
|
583
|
+
.sg\:via-\[var\(--sg-gradient-2\)\] {
|
|
584
|
+
--tw-gradient-via: var(--sg-gradient-2);
|
|
585
|
+
--tw-gradient-via-stops:
|
|
586
|
+
var(--tw-gradient-position),
|
|
587
|
+
var(--tw-gradient-from) var(--tw-gradient-from-position),
|
|
588
|
+
var(--tw-gradient-via) var(--tw-gradient-via-position),
|
|
589
|
+
var(--tw-gradient-to) var(--tw-gradient-to-position);
|
|
590
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops);
|
|
591
|
+
}
|
|
511
592
|
.sg\:via-orange {
|
|
512
593
|
--tw-gradient-via: var(--sg-orange);
|
|
513
594
|
--tw-gradient-via-stops:
|
|
@@ -517,6 +598,10 @@
|
|
|
517
598
|
var(--tw-gradient-to) var(--tw-gradient-to-position);
|
|
518
599
|
--tw-gradient-stops: var(--tw-gradient-via-stops);
|
|
519
600
|
}
|
|
601
|
+
.sg\:to-\[var\(--sg\:primary\)\] {
|
|
602
|
+
--tw-gradient-to: var(--sg:primary);
|
|
603
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
604
|
+
}
|
|
520
605
|
.sg\:to-red {
|
|
521
606
|
--tw-gradient-to: var(--sg-red);
|
|
522
607
|
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
|
@@ -563,6 +648,9 @@
|
|
|
563
648
|
.sg\:text-left {
|
|
564
649
|
text-align: left;
|
|
565
650
|
}
|
|
651
|
+
.sg\:align-\[-0\.125em\] {
|
|
652
|
+
vertical-align: -0.125em;
|
|
653
|
+
}
|
|
566
654
|
.sg\:align-middle {
|
|
567
655
|
vertical-align: middle;
|
|
568
656
|
}
|
|
@@ -610,6 +698,10 @@
|
|
|
610
698
|
--tw-font-weight: var(--sg-font-weight-bold);
|
|
611
699
|
font-weight: var(--sg-font-weight-bold);
|
|
612
700
|
}
|
|
701
|
+
.sg\:font-extrabold {
|
|
702
|
+
--tw-font-weight: var(--sg-font-weight-extrabold);
|
|
703
|
+
font-weight: var(--sg-font-weight-extrabold);
|
|
704
|
+
}
|
|
613
705
|
.sg\:font-medium {
|
|
614
706
|
--tw-font-weight: var(--sg-font-weight-medium);
|
|
615
707
|
font-weight: var(--sg-font-weight-medium);
|
|
@@ -626,6 +718,9 @@
|
|
|
626
718
|
--tw-tracking: var(--sg-tracking-tight);
|
|
627
719
|
letter-spacing: var(--sg-tracking-tight);
|
|
628
720
|
}
|
|
721
|
+
.sg\:text-balance {
|
|
722
|
+
text-wrap: balance;
|
|
723
|
+
}
|
|
629
724
|
.sg\:whitespace-nowrap {
|
|
630
725
|
white-space: nowrap;
|
|
631
726
|
}
|
|
@@ -722,6 +817,13 @@
|
|
|
722
817
|
--tw-outline-style: none;
|
|
723
818
|
outline-style: none;
|
|
724
819
|
}
|
|
820
|
+
.sg\:\[mask\:radial-gradient\(farthest-side\,transparent_62\%\,black_63\%\)\] {
|
|
821
|
+
mask:
|
|
822
|
+
radial-gradient(
|
|
823
|
+
farthest-side,
|
|
824
|
+
transparent 62%,
|
|
825
|
+
black 63%);
|
|
826
|
+
}
|
|
725
827
|
.sg\:duration-200 {
|
|
726
828
|
animation-duration: 200ms;
|
|
727
829
|
}
|
|
@@ -805,28 +907,40 @@
|
|
|
805
907
|
.sg\:hover\:bg-destructive\/90 {
|
|
806
908
|
&:hover {
|
|
807
909
|
@media (hover: hover) {
|
|
808
|
-
background-color:
|
|
910
|
+
background-color: var(--sg-red);
|
|
911
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
912
|
+
background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
|
|
913
|
+
}
|
|
809
914
|
}
|
|
810
915
|
}
|
|
811
916
|
}
|
|
812
917
|
.sg\:hover\:bg-muted\/50 {
|
|
813
918
|
&:hover {
|
|
814
919
|
@media (hover: hover) {
|
|
815
|
-
background-color:
|
|
920
|
+
background-color: var(--muted);
|
|
921
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
922
|
+
background-color: color-mix(in oklab, var(--muted) 50%, transparent);
|
|
923
|
+
}
|
|
816
924
|
}
|
|
817
925
|
}
|
|
818
926
|
}
|
|
819
927
|
.sg\:hover\:bg-primary\/90 {
|
|
820
928
|
&:hover {
|
|
821
929
|
@media (hover: hover) {
|
|
822
|
-
background-color:
|
|
930
|
+
background-color: var(--sg-primary);
|
|
931
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
932
|
+
background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
|
|
933
|
+
}
|
|
823
934
|
}
|
|
824
935
|
}
|
|
825
936
|
}
|
|
826
937
|
.sg\:hover\:bg-secondary\/80 {
|
|
827
938
|
&:hover {
|
|
828
939
|
@media (hover: hover) {
|
|
829
|
-
background-color:
|
|
940
|
+
background-color: var(--sg-secondary);
|
|
941
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
942
|
+
background-color: color-mix(in oklab, var(--sg-secondary) 80%, transparent);
|
|
943
|
+
}
|
|
830
944
|
}
|
|
831
945
|
}
|
|
832
946
|
}
|
|
@@ -851,7 +965,7 @@
|
|
|
851
965
|
}
|
|
852
966
|
.sg\:focus-visible\:ring-\[3px\] {
|
|
853
967
|
&:focus-visible {
|
|
854
|
-
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,
|
|
968
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
855
969
|
box-shadow:
|
|
856
970
|
var(--tw-inset-shadow),
|
|
857
971
|
var(--tw-inset-ring-shadow),
|
|
@@ -862,12 +976,18 @@
|
|
|
862
976
|
}
|
|
863
977
|
.sg\:focus-visible\:ring-destructive\/20 {
|
|
864
978
|
&:focus-visible {
|
|
865
|
-
--tw-ring-color:
|
|
979
|
+
--tw-ring-color: var(--sg-red);
|
|
980
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
981
|
+
--tw-ring-color: color-mix(in oklab, var(--sg-red) 20%, transparent);
|
|
982
|
+
}
|
|
866
983
|
}
|
|
867
984
|
}
|
|
868
985
|
.sg\:focus-visible\:ring-ring\/50 {
|
|
869
986
|
&:focus-visible {
|
|
870
|
-
--tw-ring-color:
|
|
987
|
+
--tw-ring-color: var(--ring);
|
|
988
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
989
|
+
--tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
|
|
990
|
+
}
|
|
871
991
|
}
|
|
872
992
|
}
|
|
873
993
|
.sg\:disabled\:pointer-events-none {
|
|
@@ -917,7 +1037,10 @@
|
|
|
917
1037
|
}
|
|
918
1038
|
.sg\:aria-invalid\:ring-destructive\/20 {
|
|
919
1039
|
&[aria-invalid=true] {
|
|
920
|
-
--tw-ring-color:
|
|
1040
|
+
--tw-ring-color: var(--sg-red);
|
|
1041
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1042
|
+
--tw-ring-color: color-mix(in oklab, var(--sg-red) 20%, transparent);
|
|
1043
|
+
}
|
|
921
1044
|
}
|
|
922
1045
|
}
|
|
923
1046
|
.sg\:data-\[orientation\=horizontal\]\:h-px {
|
|
@@ -943,7 +1066,10 @@
|
|
|
943
1066
|
.sg\:\*\:data-\[slot\=alert-description\]\:text-destructive\/90 {
|
|
944
1067
|
:is(& > *) {
|
|
945
1068
|
&[data-slot=alert-description] {
|
|
946
|
-
color:
|
|
1069
|
+
color: var(--sg-red);
|
|
1070
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1071
|
+
color: color-mix(in oklab, var(--sg-red) 90%, transparent);
|
|
1072
|
+
}
|
|
947
1073
|
}
|
|
948
1074
|
}
|
|
949
1075
|
}
|
|
@@ -996,19 +1122,28 @@
|
|
|
996
1122
|
}
|
|
997
1123
|
.sg\:dark\:bg-destructive\/60 {
|
|
998
1124
|
&:is(.dark *) {
|
|
999
|
-
background-color:
|
|
1125
|
+
background-color: var(--sg-red);
|
|
1126
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1127
|
+
background-color: color-mix(in oklab, var(--sg-red) 60%, transparent);
|
|
1128
|
+
}
|
|
1000
1129
|
}
|
|
1001
1130
|
}
|
|
1002
1131
|
.sg\:dark\:bg-input\/30 {
|
|
1003
1132
|
&:is(.dark *) {
|
|
1004
|
-
background-color:
|
|
1133
|
+
background-color: var(--input);
|
|
1134
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1135
|
+
background-color: color-mix(in oklab, var(--input) 30%, transparent);
|
|
1136
|
+
}
|
|
1005
1137
|
}
|
|
1006
1138
|
}
|
|
1007
1139
|
.sg\:dark\:hover\:bg-accent\/50 {
|
|
1008
1140
|
&:is(.dark *) {
|
|
1009
1141
|
&:hover {
|
|
1010
1142
|
@media (hover: hover) {
|
|
1011
|
-
background-color:
|
|
1143
|
+
background-color: var(--accent);
|
|
1144
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1145
|
+
background-color: color-mix(in oklab, var(--accent) 50%, transparent);
|
|
1146
|
+
}
|
|
1012
1147
|
}
|
|
1013
1148
|
}
|
|
1014
1149
|
}
|
|
@@ -1017,7 +1152,10 @@
|
|
|
1017
1152
|
&:is(.dark *) {
|
|
1018
1153
|
&:hover {
|
|
1019
1154
|
@media (hover: hover) {
|
|
1020
|
-
background-color:
|
|
1155
|
+
background-color: var(--input);
|
|
1156
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1157
|
+
background-color: color-mix(in oklab, var(--input) 50%, transparent);
|
|
1158
|
+
}
|
|
1021
1159
|
}
|
|
1022
1160
|
}
|
|
1023
1161
|
}
|
|
@@ -1025,14 +1163,20 @@
|
|
|
1025
1163
|
.sg\:dark\:focus-visible\:ring-destructive\/40 {
|
|
1026
1164
|
&:is(.dark *) {
|
|
1027
1165
|
&:focus-visible {
|
|
1028
|
-
--tw-ring-color:
|
|
1166
|
+
--tw-ring-color: var(--sg-red);
|
|
1167
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1168
|
+
--tw-ring-color: color-mix(in oklab, var(--sg-red) 40%, transparent);
|
|
1169
|
+
}
|
|
1029
1170
|
}
|
|
1030
1171
|
}
|
|
1031
1172
|
}
|
|
1032
1173
|
.sg\:dark\:aria-invalid\:ring-destructive\/40 {
|
|
1033
1174
|
&:is(.dark *) {
|
|
1034
1175
|
&[aria-invalid=true] {
|
|
1035
|
-
--tw-ring-color:
|
|
1176
|
+
--tw-ring-color: var(--sg-red);
|
|
1177
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1178
|
+
--tw-ring-color: color-mix(in oklab, var(--sg-red) 40%, transparent);
|
|
1179
|
+
}
|
|
1036
1180
|
}
|
|
1037
1181
|
}
|
|
1038
1182
|
}
|
|
@@ -1106,7 +1250,7 @@
|
|
|
1106
1250
|
}
|
|
1107
1251
|
.sg\:\[\&\>svg\]\:text-current {
|
|
1108
1252
|
& > svg {
|
|
1109
|
-
color:
|
|
1253
|
+
color: currentcolor;
|
|
1110
1254
|
}
|
|
1111
1255
|
}
|
|
1112
1256
|
.sg\:\[\&\>tr\]\:last\:border-b-0 {
|
|
@@ -1135,7 +1279,10 @@
|
|
|
1135
1279
|
a& {
|
|
1136
1280
|
&:hover {
|
|
1137
1281
|
@media (hover: hover) {
|
|
1138
|
-
background-color:
|
|
1282
|
+
background-color: var(--sg-red);
|
|
1283
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1284
|
+
background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
|
|
1285
|
+
}
|
|
1139
1286
|
}
|
|
1140
1287
|
}
|
|
1141
1288
|
}
|
|
@@ -1144,7 +1291,10 @@
|
|
|
1144
1291
|
a& {
|
|
1145
1292
|
&:hover {
|
|
1146
1293
|
@media (hover: hover) {
|
|
1147
|
-
background-color:
|
|
1294
|
+
background-color: var(--sg-primary);
|
|
1295
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1296
|
+
background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
|
|
1297
|
+
}
|
|
1148
1298
|
}
|
|
1149
1299
|
}
|
|
1150
1300
|
}
|
|
@@ -1153,7 +1303,10 @@
|
|
|
1153
1303
|
a& {
|
|
1154
1304
|
&:hover {
|
|
1155
1305
|
@media (hover: hover) {
|
|
1156
|
-
background-color:
|
|
1306
|
+
background-color: var(--sg-secondary);
|
|
1307
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1308
|
+
background-color: color-mix(in oklab, var(--sg-secondary) 90%, transparent);
|
|
1309
|
+
}
|
|
1157
1310
|
}
|
|
1158
1311
|
}
|
|
1159
1312
|
}
|
|
@@ -1171,6 +1324,8 @@
|
|
|
1171
1324
|
:root {
|
|
1172
1325
|
--sg-color-background: var(--sg-color-white);
|
|
1173
1326
|
--sg-color-foreground: var(--sg-color-black);
|
|
1327
|
+
--sg-gradient-1: var(--sg-pink);
|
|
1328
|
+
--sg-gradient-2: var(--sg-primary);
|
|
1174
1329
|
--card: oklch(1 0 0);
|
|
1175
1330
|
--card-foreground: oklch(0.145 0 0);
|
|
1176
1331
|
--popover: oklch(1 0 0);
|
|
@@ -1200,6 +1355,8 @@
|
|
|
1200
1355
|
.dark {
|
|
1201
1356
|
--sg-color-background: var(--sg-black);
|
|
1202
1357
|
--sg-color-foreground: var(--sg-white);
|
|
1358
|
+
--sg-gradient-1: var(--sg-pink);
|
|
1359
|
+
--sg-gradient-2: var(--sg-primary-light);
|
|
1203
1360
|
--card: oklch(0.145 0 0);
|
|
1204
1361
|
--card-foreground: oklch(0.985 0 0);
|
|
1205
1362
|
--popover: oklch(0.145 0 0);
|
|
@@ -1234,13 +1391,29 @@
|
|
|
1234
1391
|
@layer base {
|
|
1235
1392
|
* {
|
|
1236
1393
|
border-color: var(--border);
|
|
1237
|
-
outline-color:
|
|
1394
|
+
outline-color: var(--ring);
|
|
1395
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
1396
|
+
outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
|
|
1397
|
+
}
|
|
1238
1398
|
}
|
|
1239
1399
|
body {
|
|
1240
1400
|
background-color: var(--sg-color-background);
|
|
1241
1401
|
color: var(--sg-color-foreground);
|
|
1242
1402
|
}
|
|
1243
1403
|
}
|
|
1404
|
+
@layer utilities {
|
|
1405
|
+
.text-gradient-brand {
|
|
1406
|
+
background-image:
|
|
1407
|
+
linear-gradient(
|
|
1408
|
+
90deg,
|
|
1409
|
+
var(--sg-gradient-1) 0%,
|
|
1410
|
+
var(--sg-gradient-2) 50%,
|
|
1411
|
+
var(--sg-primary) 100%);
|
|
1412
|
+
-webkit-background-clip: text;
|
|
1413
|
+
background-clip: text;
|
|
1414
|
+
color: transparent;
|
|
1415
|
+
}
|
|
1416
|
+
}
|
|
1244
1417
|
@keyframes enter {
|
|
1245
1418
|
from {
|
|
1246
1419
|
opacity: var(--tw-enter-opacity, 1);
|
|
@@ -1270,8 +1443,10 @@
|
|
|
1270
1443
|
@property --tw-tracking { syntax: "*"; inherits: false; }
|
|
1271
1444
|
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
|
|
1272
1445
|
@property --tw-shadow-color { syntax: "*"; inherits: false; }
|
|
1446
|
+
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
|
|
1273
1447
|
@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
|
|
1274
1448
|
@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }
|
|
1449
|
+
@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
|
|
1275
1450
|
@property --tw-ring-color { syntax: "*"; inherits: false; }
|
|
1276
1451
|
@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
|
|
1277
1452
|
@property --tw-inset-ring-color { syntax: "*"; inherits: false; }
|
|
@@ -1292,11 +1467,52 @@
|
|
|
1292
1467
|
opacity: 0.5;
|
|
1293
1468
|
}
|
|
1294
1469
|
}
|
|
1470
|
+
@layer properties {
|
|
1471
|
+
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
1472
|
+
*,
|
|
1473
|
+
::before,
|
|
1474
|
+
::after,
|
|
1475
|
+
::backdrop {
|
|
1476
|
+
--tw-translate-x: 0;
|
|
1477
|
+
--tw-translate-y: 0;
|
|
1478
|
+
--tw-translate-z: 0;
|
|
1479
|
+
--tw-border-style: solid;
|
|
1480
|
+
--tw-gradient-position: initial;
|
|
1481
|
+
--tw-gradient-from: #0000;
|
|
1482
|
+
--tw-gradient-via: #0000;
|
|
1483
|
+
--tw-gradient-to: #0000;
|
|
1484
|
+
--tw-gradient-stops: initial;
|
|
1485
|
+
--tw-gradient-via-stops: initial;
|
|
1486
|
+
--tw-gradient-from-position: 0%;
|
|
1487
|
+
--tw-gradient-via-position: 50%;
|
|
1488
|
+
--tw-gradient-to-position: 100%;
|
|
1489
|
+
--tw-font-weight: initial;
|
|
1490
|
+
--tw-tracking: initial;
|
|
1491
|
+
--tw-shadow: 0 0 #0000;
|
|
1492
|
+
--tw-shadow-color: initial;
|
|
1493
|
+
--tw-shadow-alpha: 100%;
|
|
1494
|
+
--tw-inset-shadow: 0 0 #0000;
|
|
1495
|
+
--tw-inset-shadow-color: initial;
|
|
1496
|
+
--tw-inset-shadow-alpha: 100%;
|
|
1497
|
+
--tw-ring-color: initial;
|
|
1498
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
1499
|
+
--tw-inset-ring-color: initial;
|
|
1500
|
+
--tw-inset-ring-shadow: 0 0 #0000;
|
|
1501
|
+
--tw-ring-inset: initial;
|
|
1502
|
+
--tw-ring-offset-width: 0px;
|
|
1503
|
+
--tw-ring-offset-color: #fff;
|
|
1504
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
1505
|
+
--tw-duration: initial;
|
|
1506
|
+
--tw-leading: initial;
|
|
1507
|
+
}
|
|
1508
|
+
}
|
|
1509
|
+
}
|
|
1295
1510
|
|
|
1296
1511
|
/* src/css/variables.css */
|
|
1297
1512
|
:root {
|
|
1298
1513
|
--sg-black: hsl(0 0% 15%);
|
|
1299
1514
|
--sg-white: hsl(30 20% 98%);
|
|
1515
|
+
--sg-pink: hsl(330 90% 65%);
|
|
1300
1516
|
--sg-gray-light: hsl(240 5% 96%);
|
|
1301
1517
|
--sg-gray: hsl(240 4% 46%);
|
|
1302
1518
|
--sg-gray-dark: hsl(240 6% 10%);
|
|
@@ -1339,5 +1555,5 @@
|
|
|
1339
1555
|
--sg-spacing-36: 9rem;
|
|
1340
1556
|
--sg-spacing-40: 10rem;
|
|
1341
1557
|
}
|
|
1342
|
-
/*! tailwindcss v4.
|
|
1558
|
+
/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
|
|
1343
1559
|
/*# sourceMappingURL=main.css.map */
|