singularity-components 0.1.98 → 0.1.100
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 +136 -19
- package/dist/main.cjs.map +1 -1
- package/dist/main.css +249 -32
- package/dist/main.css.map +1 -1
- package/dist/main.d.cts +28 -7
- package/dist/main.d.ts +28 -7
- package/dist/main.js +128 -20
- package/dist/main.js.map +1 -1
- package/package.json +64 -64
package/dist/main.css
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
@layer properties;
|
|
3
3
|
:root {
|
|
4
4
|
--sg-black: 0 0% 15%;
|
|
5
|
+
--sg-black-muted: 0 0% 45%;
|
|
5
6
|
--sg-white: 30 20% 98%;
|
|
7
|
+
--sg-white-muted: 30 8% 85%;
|
|
6
8
|
--sg-pink: 330 90% 65%;
|
|
7
9
|
--sg-gray-light: 240 5% 96%;
|
|
8
10
|
--sg-gray: 240 4% 46%;
|
|
@@ -51,6 +53,7 @@
|
|
|
51
53
|
:root,
|
|
52
54
|
:host {
|
|
53
55
|
--sg-spacing: 0.25rem;
|
|
56
|
+
--sg-container-md: 28rem;
|
|
54
57
|
--sg-text-xs: 0.75rem;
|
|
55
58
|
--sg-text-xs--line-height: calc(1 / 0.75);
|
|
56
59
|
--sg-text-sm: 0.875rem;
|
|
@@ -67,10 +70,6 @@
|
|
|
67
70
|
--sg-text-3xl--line-height: calc(2.25 / 1.875);
|
|
68
71
|
--sg-text-4xl: 2.25rem;
|
|
69
72
|
--sg-text-4xl--line-height: calc(2.5 / 2.25);
|
|
70
|
-
--sg-text-5xl: 3rem;
|
|
71
|
-
--sg-text-5xl--line-height: 1;
|
|
72
|
-
--sg-text-6xl: 3.75rem;
|
|
73
|
-
--sg-text-6xl--line-height: 1;
|
|
74
73
|
--sg-font-weight-normal: 400;
|
|
75
74
|
--sg-font-weight-medium: 500;
|
|
76
75
|
--sg-font-weight-semibold: 600;
|
|
@@ -78,6 +77,7 @@
|
|
|
78
77
|
--sg-font-weight-extrabold: 800;
|
|
79
78
|
--sg-tracking-tight: -0.025em;
|
|
80
79
|
--sg-leading-relaxed: 1.625;
|
|
80
|
+
--sg-radius-2xl: 1rem;
|
|
81
81
|
--sg-animate-spin: spin 1s linear infinite;
|
|
82
82
|
--sg-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
83
83
|
--sg-default-transition-duration: 150ms;
|
|
@@ -88,6 +88,7 @@
|
|
|
88
88
|
--sg-color-white: hsl(var(--sg-white));
|
|
89
89
|
--sg-color-background: hsl(var(--sg-color-background));
|
|
90
90
|
--sg-color-foreground: hsl(var(--sg-color-foreground));
|
|
91
|
+
--sg-color-muted-foreground: hsl(var(--sg-color-muted-foreground));
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
94
|
@layer base {
|
|
@@ -307,12 +308,39 @@
|
|
|
307
308
|
.sg\:mt-4 {
|
|
308
309
|
margin-top: calc(var(--sg-spacing) * 4);
|
|
309
310
|
}
|
|
311
|
+
.sg\:mt-6 {
|
|
312
|
+
margin-top: calc(var(--sg-spacing) * 6);
|
|
313
|
+
}
|
|
314
|
+
.sg\:mt-12 {
|
|
315
|
+
margin-top: calc(var(--sg-spacing) * 12);
|
|
316
|
+
}
|
|
317
|
+
.sg\:mb-2 {
|
|
318
|
+
margin-bottom: calc(var(--sg-spacing) * 2);
|
|
319
|
+
}
|
|
320
|
+
.sg\:mb-3 {
|
|
321
|
+
margin-bottom: calc(var(--sg-spacing) * 3);
|
|
322
|
+
}
|
|
323
|
+
.sg\:mb-4 {
|
|
324
|
+
margin-bottom: calc(var(--sg-spacing) * 4);
|
|
325
|
+
}
|
|
326
|
+
.sg\:mb-6 {
|
|
327
|
+
margin-bottom: calc(var(--sg-spacing) * 6);
|
|
328
|
+
}
|
|
329
|
+
.sg\:mb-8 {
|
|
330
|
+
margin-bottom: calc(var(--sg-spacing) * 8);
|
|
331
|
+
}
|
|
310
332
|
.sg\:line-clamp-1 {
|
|
311
333
|
overflow: hidden;
|
|
312
334
|
display: -webkit-box;
|
|
313
335
|
-webkit-box-orient: vertical;
|
|
314
336
|
-webkit-line-clamp: 1;
|
|
315
337
|
}
|
|
338
|
+
.sg\:line-clamp-2 {
|
|
339
|
+
overflow: hidden;
|
|
340
|
+
display: -webkit-box;
|
|
341
|
+
-webkit-box-orient: vertical;
|
|
342
|
+
-webkit-line-clamp: 2;
|
|
343
|
+
}
|
|
316
344
|
.sg\:block {
|
|
317
345
|
display: block;
|
|
318
346
|
}
|
|
@@ -328,6 +356,9 @@
|
|
|
328
356
|
.sg\:inline-flex {
|
|
329
357
|
display: inline-flex;
|
|
330
358
|
}
|
|
359
|
+
.sg\:aspect-\[16\/7\] {
|
|
360
|
+
aspect-ratio: 16/7;
|
|
361
|
+
}
|
|
331
362
|
.sg\:size-2 {
|
|
332
363
|
width: calc(var(--sg-spacing) * 2);
|
|
333
364
|
height: calc(var(--sg-spacing) * 2);
|
|
@@ -355,12 +386,21 @@
|
|
|
355
386
|
.sg\:h-10 {
|
|
356
387
|
height: calc(var(--sg-spacing) * 10);
|
|
357
388
|
}
|
|
389
|
+
.sg\:h-11 {
|
|
390
|
+
height: calc(var(--sg-spacing) * 11);
|
|
391
|
+
}
|
|
358
392
|
.sg\:h-12 {
|
|
359
393
|
height: calc(var(--sg-spacing) * 12);
|
|
360
394
|
}
|
|
395
|
+
.sg\:h-48 {
|
|
396
|
+
height: calc(var(--sg-spacing) * 48);
|
|
397
|
+
}
|
|
361
398
|
.sg\:h-\[100px\] {
|
|
362
399
|
height: 100px;
|
|
363
400
|
}
|
|
401
|
+
.sg\:h-full {
|
|
402
|
+
height: 100%;
|
|
403
|
+
}
|
|
364
404
|
.sg\:min-h-4 {
|
|
365
405
|
min-height: calc(var(--sg-spacing) * 4);
|
|
366
406
|
}
|
|
@@ -388,6 +428,12 @@
|
|
|
388
428
|
.sg\:max-w-\[768px\] {
|
|
389
429
|
max-width: 768px;
|
|
390
430
|
}
|
|
431
|
+
.sg\:max-w-md {
|
|
432
|
+
max-width: var(--sg-container-md);
|
|
433
|
+
}
|
|
434
|
+
.sg\:max-w-none {
|
|
435
|
+
max-width: none;
|
|
436
|
+
}
|
|
391
437
|
.sg\:min-w-0 {
|
|
392
438
|
min-width: calc(var(--sg-spacing) * 0);
|
|
393
439
|
}
|
|
@@ -422,6 +468,9 @@
|
|
|
422
468
|
.sg\:flex-col {
|
|
423
469
|
flex-direction: column;
|
|
424
470
|
}
|
|
471
|
+
.sg\:flex-wrap {
|
|
472
|
+
flex-wrap: wrap;
|
|
473
|
+
}
|
|
425
474
|
.sg\:items-center {
|
|
426
475
|
align-items: center;
|
|
427
476
|
}
|
|
@@ -473,6 +522,13 @@
|
|
|
473
522
|
.sg\:gap-10 {
|
|
474
523
|
gap: calc(var(--sg-spacing) * 10);
|
|
475
524
|
}
|
|
525
|
+
.sg\:space-y-1\.5 {
|
|
526
|
+
:where(& > :not(:last-child)) {
|
|
527
|
+
--tw-space-y-reverse: 0;
|
|
528
|
+
margin-block-start: calc(calc(var(--sg-spacing) * 1.5) * var(--tw-space-y-reverse));
|
|
529
|
+
margin-block-end: calc(calc(var(--sg-spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
|
|
530
|
+
}
|
|
531
|
+
}
|
|
476
532
|
.sg\:gap-y-0\.5 {
|
|
477
533
|
row-gap: calc(var(--sg-spacing) * 0.5);
|
|
478
534
|
}
|
|
@@ -482,6 +538,9 @@
|
|
|
482
538
|
.sg\:overflow-x-auto {
|
|
483
539
|
overflow-x: auto;
|
|
484
540
|
}
|
|
541
|
+
.sg\:rounded-2xl {
|
|
542
|
+
border-radius: var(--sg-radius-2xl);
|
|
543
|
+
}
|
|
485
544
|
.sg\:rounded-full {
|
|
486
545
|
border-radius: calc(infinity * 1px);
|
|
487
546
|
}
|
|
@@ -491,10 +550,17 @@
|
|
|
491
550
|
.sg\:rounded-md {
|
|
492
551
|
border-radius: calc(var(--radius) - 2px);
|
|
493
552
|
}
|
|
553
|
+
.sg\:rounded-xl {
|
|
554
|
+
border-radius: calc(var(--radius) + 4px);
|
|
555
|
+
}
|
|
494
556
|
.sg\:border {
|
|
495
557
|
border-style: var(--tw-border-style);
|
|
496
558
|
border-width: 1px;
|
|
497
559
|
}
|
|
560
|
+
.sg\:border-0 {
|
|
561
|
+
border-style: var(--tw-border-style);
|
|
562
|
+
border-width: 0px;
|
|
563
|
+
}
|
|
498
564
|
.sg\:border-t {
|
|
499
565
|
border-top-style: var(--tw-border-style);
|
|
500
566
|
border-top-width: 1px;
|
|
@@ -540,9 +606,9 @@
|
|
|
540
606
|
background-color: hsl(var(--sg-gray));
|
|
541
607
|
}
|
|
542
608
|
.sg\:bg-muted\/50 {
|
|
543
|
-
background-color: var(--muted);
|
|
609
|
+
background-color: hsl(var(--sg-color-muted-background));
|
|
544
610
|
@supports (color: color-mix(in lab, red, red)) {
|
|
545
|
-
background-color: color-mix(in oklab, var(--muted) 50%, transparent);
|
|
611
|
+
background-color: color-mix(in oklab, hsl(var(--sg-color-muted-background)) 50%, transparent);
|
|
546
612
|
}
|
|
547
613
|
}
|
|
548
614
|
.sg\:bg-orange {
|
|
@@ -560,10 +626,22 @@
|
|
|
560
626
|
.sg\:bg-white {
|
|
561
627
|
background-color: hsl(var(--sg-white));
|
|
562
628
|
}
|
|
629
|
+
.sg\:bg-gradient-to-br {
|
|
630
|
+
--tw-gradient-position: to bottom right in oklab;
|
|
631
|
+
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
632
|
+
}
|
|
563
633
|
.sg\:bg-gradient-to-r {
|
|
564
634
|
--tw-gradient-position: to right in oklab;
|
|
565
635
|
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
566
636
|
}
|
|
637
|
+
.sg\:bg-gradient-to-t {
|
|
638
|
+
--tw-gradient-position: to top in oklab;
|
|
639
|
+
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
640
|
+
}
|
|
641
|
+
.sg\:bg-gradient-to-tr {
|
|
642
|
+
--tw-gradient-position: to top right in oklab;
|
|
643
|
+
background-image: linear-gradient(var(--tw-gradient-stops));
|
|
644
|
+
}
|
|
567
645
|
.sg\:bg-\[conic-gradient\(hsl\(var\(--sg-gradient-1\)\)\,hsl\(var\(--sg-gradient-2\)\)\,hsl\(var\(--sg-primary\)\)\,hsl\(var\(--sg-gradient-1\)\)\)\] {
|
|
568
646
|
background-image:
|
|
569
647
|
conic-gradient(
|
|
@@ -587,6 +665,17 @@
|
|
|
587
665
|
--tw-gradient-from: hsl(var(--sg-gradient-1));
|
|
588
666
|
--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));
|
|
589
667
|
}
|
|
668
|
+
.sg\:from-background {
|
|
669
|
+
--tw-gradient-from: hsl(var(--sg-color-background));
|
|
670
|
+
--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));
|
|
671
|
+
}
|
|
672
|
+
.sg\:from-background\/80 {
|
|
673
|
+
--tw-gradient-from: hsl(var(--sg-color-background));
|
|
674
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
675
|
+
--tw-gradient-from: color-mix(in oklab, hsl(var(--sg-color-background)) 80%, transparent);
|
|
676
|
+
}
|
|
677
|
+
--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));
|
|
678
|
+
}
|
|
590
679
|
.sg\:from-blue {
|
|
591
680
|
--tw-gradient-from: hsl(var(--sg-blue));
|
|
592
681
|
--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));
|
|
@@ -600,6 +689,18 @@
|
|
|
600
689
|
var(--tw-gradient-to) var(--tw-gradient-to-position);
|
|
601
690
|
--tw-gradient-stops: var(--tw-gradient-via-stops);
|
|
602
691
|
}
|
|
692
|
+
.sg\:via-background\/20 {
|
|
693
|
+
--tw-gradient-via: hsl(var(--sg-color-background));
|
|
694
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
695
|
+
--tw-gradient-via: color-mix(in oklab, hsl(var(--sg-color-background)) 20%, transparent);
|
|
696
|
+
}
|
|
697
|
+
--tw-gradient-via-stops:
|
|
698
|
+
var(--tw-gradient-position),
|
|
699
|
+
var(--tw-gradient-from) var(--tw-gradient-from-position),
|
|
700
|
+
var(--tw-gradient-via) var(--tw-gradient-via-position),
|
|
701
|
+
var(--tw-gradient-to) var(--tw-gradient-to-position);
|
|
702
|
+
--tw-gradient-stops: var(--tw-gradient-via-stops);
|
|
703
|
+
}
|
|
603
704
|
.sg\:via-orange {
|
|
604
705
|
--tw-gradient-via: hsl(var(--sg-orange));
|
|
605
706
|
--tw-gradient-via-stops:
|
|
@@ -609,20 +710,50 @@
|
|
|
609
710
|
var(--tw-gradient-to) var(--tw-gradient-to-position);
|
|
610
711
|
--tw-gradient-stops: var(--tw-gradient-via-stops);
|
|
611
712
|
}
|
|
713
|
+
.sg\:to-\[hsl\(var\(--sg-gradient-2\)\)\] {
|
|
714
|
+
--tw-gradient-to: hsl(var(--sg-gradient-2));
|
|
715
|
+
--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));
|
|
716
|
+
}
|
|
612
717
|
.sg\:to-\[hsl\(var\(--sg-primary\)\)\] {
|
|
613
718
|
--tw-gradient-to: hsl(var(--sg-primary));
|
|
614
719
|
--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));
|
|
615
720
|
}
|
|
721
|
+
.sg\:to-background\/60 {
|
|
722
|
+
--tw-gradient-to: hsl(var(--sg-color-background));
|
|
723
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
724
|
+
--tw-gradient-to: color-mix(in oklab, hsl(var(--sg-color-background)) 60%, transparent);
|
|
725
|
+
}
|
|
726
|
+
--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));
|
|
727
|
+
}
|
|
616
728
|
.sg\:to-red {
|
|
617
729
|
--tw-gradient-to: hsl(var(--sg-red));
|
|
618
730
|
--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));
|
|
619
731
|
}
|
|
732
|
+
.sg\:to-transparent {
|
|
733
|
+
--tw-gradient-to: transparent;
|
|
734
|
+
--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));
|
|
735
|
+
}
|
|
620
736
|
.sg\:bg-clip-text {
|
|
621
737
|
background-clip: text;
|
|
622
738
|
}
|
|
739
|
+
.sg\:object-cover {
|
|
740
|
+
object-fit: cover;
|
|
741
|
+
}
|
|
623
742
|
.sg\:p-2 {
|
|
624
743
|
padding: calc(var(--sg-spacing) * 2);
|
|
625
744
|
}
|
|
745
|
+
.sg\:p-4 {
|
|
746
|
+
padding: calc(var(--sg-spacing) * 4);
|
|
747
|
+
}
|
|
748
|
+
.sg\:p-5 {
|
|
749
|
+
padding: calc(var(--sg-spacing) * 5);
|
|
750
|
+
}
|
|
751
|
+
.sg\:p-6 {
|
|
752
|
+
padding: calc(var(--sg-spacing) * 6);
|
|
753
|
+
}
|
|
754
|
+
.sg\:p-\[2px\] {
|
|
755
|
+
padding: 2px;
|
|
756
|
+
}
|
|
626
757
|
.sg\:px-2 {
|
|
627
758
|
padding-inline: calc(var(--sg-spacing) * 2);
|
|
628
759
|
}
|
|
@@ -650,12 +781,21 @@
|
|
|
650
781
|
.sg\:py-4 {
|
|
651
782
|
padding-block: calc(var(--sg-spacing) * 4);
|
|
652
783
|
}
|
|
784
|
+
.sg\:py-12 {
|
|
785
|
+
padding-block: calc(var(--sg-spacing) * 12);
|
|
786
|
+
}
|
|
787
|
+
.sg\:py-16 {
|
|
788
|
+
padding-block: calc(var(--sg-spacing) * 16);
|
|
789
|
+
}
|
|
653
790
|
.sg\:pt-0 {
|
|
654
791
|
padding-top: calc(var(--sg-spacing) * 0);
|
|
655
792
|
}
|
|
656
793
|
.sg\:pb-4 {
|
|
657
794
|
padding-bottom: calc(var(--sg-spacing) * 4);
|
|
658
795
|
}
|
|
796
|
+
.sg\:text-center {
|
|
797
|
+
text-align: center;
|
|
798
|
+
}
|
|
659
799
|
.sg\:text-left {
|
|
660
800
|
text-align: left;
|
|
661
801
|
}
|
|
@@ -673,18 +813,6 @@
|
|
|
673
813
|
font-size: var(--sg-text-3xl);
|
|
674
814
|
line-height: var(--tw-leading, var(--sg-text-3xl--line-height));
|
|
675
815
|
}
|
|
676
|
-
.sg\:text-4xl {
|
|
677
|
-
font-size: var(--sg-text-4xl);
|
|
678
|
-
line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
|
|
679
|
-
}
|
|
680
|
-
.sg\:text-5xl {
|
|
681
|
-
font-size: var(--sg-text-5xl);
|
|
682
|
-
line-height: var(--tw-leading, var(--sg-text-5xl--line-height));
|
|
683
|
-
}
|
|
684
|
-
.sg\:text-6xl {
|
|
685
|
-
font-size: var(--sg-text-6xl);
|
|
686
|
-
line-height: var(--tw-leading, var(--sg-text-6xl--line-height));
|
|
687
|
-
}
|
|
688
816
|
.sg\:text-base {
|
|
689
817
|
font-size: var(--sg-text-base);
|
|
690
818
|
line-height: var(--tw-leading, var(--sg-text-base--line-height));
|
|
@@ -705,6 +833,10 @@
|
|
|
705
833
|
font-size: var(--sg-text-xs);
|
|
706
834
|
line-height: var(--tw-leading, var(--sg-text-xs--line-height));
|
|
707
835
|
}
|
|
836
|
+
.sg\:leading-none {
|
|
837
|
+
--tw-leading: 1;
|
|
838
|
+
line-height: 1;
|
|
839
|
+
}
|
|
708
840
|
.sg\:font-bold {
|
|
709
841
|
--tw-font-weight: var(--sg-font-weight-bold);
|
|
710
842
|
font-weight: var(--sg-font-weight-bold);
|
|
@@ -750,11 +882,17 @@
|
|
|
750
882
|
.sg\:text-foreground {
|
|
751
883
|
color: hsl(var(--sg-color-foreground));
|
|
752
884
|
}
|
|
885
|
+
.sg\:text-foreground\/60 {
|
|
886
|
+
color: hsl(var(--sg-color-foreground));
|
|
887
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
888
|
+
color: color-mix(in oklab, hsl(var(--sg-color-foreground)) 60%, transparent);
|
|
889
|
+
}
|
|
890
|
+
}
|
|
753
891
|
.sg\:text-gray {
|
|
754
892
|
color: hsl(var(--sg-gray));
|
|
755
893
|
}
|
|
756
894
|
.sg\:text-muted-foreground {
|
|
757
|
-
color: var(--muted-foreground);
|
|
895
|
+
color: hsl(var(--sg-color-muted-foreground));
|
|
758
896
|
}
|
|
759
897
|
.sg\:text-primary {
|
|
760
898
|
color: hsl(var(--sg-primary));
|
|
@@ -777,6 +915,15 @@
|
|
|
777
915
|
.sg\:underline-offset-4 {
|
|
778
916
|
text-underline-offset: 4px;
|
|
779
917
|
}
|
|
918
|
+
.sg\:shadow-lg {
|
|
919
|
+
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
920
|
+
box-shadow:
|
|
921
|
+
var(--tw-inset-shadow),
|
|
922
|
+
var(--tw-inset-ring-shadow),
|
|
923
|
+
var(--tw-ring-offset-shadow),
|
|
924
|
+
var(--tw-ring-shadow),
|
|
925
|
+
var(--tw-shadow);
|
|
926
|
+
}
|
|
780
927
|
.sg\:shadow-xs {
|
|
781
928
|
--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
|
|
782
929
|
box-shadow:
|
|
@@ -786,6 +933,27 @@
|
|
|
786
933
|
var(--tw-ring-shadow),
|
|
787
934
|
var(--tw-shadow);
|
|
788
935
|
}
|
|
936
|
+
.sg\:ring-1 {
|
|
937
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
938
|
+
box-shadow:
|
|
939
|
+
var(--tw-inset-shadow),
|
|
940
|
+
var(--tw-inset-ring-shadow),
|
|
941
|
+
var(--tw-ring-offset-shadow),
|
|
942
|
+
var(--tw-ring-shadow),
|
|
943
|
+
var(--tw-shadow);
|
|
944
|
+
}
|
|
945
|
+
.sg\:ring-border\/60 {
|
|
946
|
+
--tw-ring-color: var(--border);
|
|
947
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
948
|
+
--tw-ring-color: color-mix(in oklab, var(--border) 60%, transparent);
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
.sg\:ring-gray\/60 {
|
|
952
|
+
--tw-ring-color: hsl(var(--sg-gray));
|
|
953
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
954
|
+
--tw-ring-color: color-mix(in oklab, hsl(var(--sg-gray)) 60%, transparent);
|
|
955
|
+
}
|
|
956
|
+
}
|
|
789
957
|
.sg\:transition-\[color\,box-shadow\] {
|
|
790
958
|
transition-property: color, box-shadow;
|
|
791
959
|
transition-timing-function: var(--tw-ease, var(--sg-default-transition-timing-function));
|
|
@@ -824,6 +992,10 @@
|
|
|
824
992
|
--tw-duration: 200ms;
|
|
825
993
|
transition-duration: 200ms;
|
|
826
994
|
}
|
|
995
|
+
.sg\:duration-500 {
|
|
996
|
+
--tw-duration: 500ms;
|
|
997
|
+
transition-duration: 500ms;
|
|
998
|
+
}
|
|
827
999
|
.sg\:outline-none {
|
|
828
1000
|
--tw-outline-style: none;
|
|
829
1001
|
outline-style: none;
|
|
@@ -838,6 +1010,19 @@
|
|
|
838
1010
|
.sg\:duration-200 {
|
|
839
1011
|
animation-duration: 200ms;
|
|
840
1012
|
}
|
|
1013
|
+
.sg\:duration-500 {
|
|
1014
|
+
animation-duration: 500ms;
|
|
1015
|
+
}
|
|
1016
|
+
.sg\:group-hover\:scale-105 {
|
|
1017
|
+
&:is(:where(.sg\:group):hover *) {
|
|
1018
|
+
@media (hover: hover) {
|
|
1019
|
+
--tw-scale-x: 105%;
|
|
1020
|
+
--tw-scale-y: 105%;
|
|
1021
|
+
--tw-scale-z: 105%;
|
|
1022
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
1023
|
+
}
|
|
1024
|
+
}
|
|
1025
|
+
}
|
|
841
1026
|
.sg\:selection\:bg-primary {
|
|
842
1027
|
& *::selection {
|
|
843
1028
|
background-color: hsl(var(--sg-primary));
|
|
@@ -894,7 +1079,7 @@
|
|
|
894
1079
|
}
|
|
895
1080
|
.sg\:placeholder\:text-muted-foreground {
|
|
896
1081
|
&::placeholder {
|
|
897
|
-
color: var(--muted-foreground);
|
|
1082
|
+
color: hsl(var(--sg-color-muted-foreground));
|
|
898
1083
|
}
|
|
899
1084
|
}
|
|
900
1085
|
.sg\:first\:mt-0 {
|
|
@@ -928,9 +1113,9 @@
|
|
|
928
1113
|
.sg\:hover\:bg-muted\/50 {
|
|
929
1114
|
&:hover {
|
|
930
1115
|
@media (hover: hover) {
|
|
931
|
-
background-color: var(--muted);
|
|
1116
|
+
background-color: hsl(var(--sg-color-muted-background));
|
|
932
1117
|
@supports (color: color-mix(in lab, red, red)) {
|
|
933
|
-
background-color: color-mix(in oklab, var(--muted) 50%, transparent);
|
|
1118
|
+
background-color: color-mix(in oklab, hsl(var(--sg-color-muted-background)) 50%, transparent);
|
|
934
1119
|
}
|
|
935
1120
|
}
|
|
936
1121
|
}
|
|
@@ -1086,7 +1271,12 @@
|
|
|
1086
1271
|
}
|
|
1087
1272
|
.sg\:data-\[state\=selected\]\:bg-muted {
|
|
1088
1273
|
&[data-state=selected] {
|
|
1089
|
-
background-color: var(--muted);
|
|
1274
|
+
background-color: hsl(var(--sg-color-muted-background));
|
|
1275
|
+
}
|
|
1276
|
+
}
|
|
1277
|
+
.sg\:sm\:grid-cols-2 {
|
|
1278
|
+
@media (width >= 40rem) {
|
|
1279
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1090
1280
|
}
|
|
1091
1281
|
}
|
|
1092
1282
|
.sg\:md\:grid-cols-2 {
|
|
@@ -1120,10 +1310,27 @@
|
|
|
1120
1310
|
line-height: var(--tw-leading, var(--sg-text-sm--line-height));
|
|
1121
1311
|
}
|
|
1122
1312
|
}
|
|
1123
|
-
.sg\:lg\:
|
|
1313
|
+
.sg\:lg\:grid-cols-3 {
|
|
1124
1314
|
@media (width >= 64rem) {
|
|
1125
|
-
|
|
1126
|
-
|
|
1315
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1316
|
+
}
|
|
1317
|
+
}
|
|
1318
|
+
.sg\:lg\:text-2xl {
|
|
1319
|
+
@media (width >= 64rem) {
|
|
1320
|
+
font-size: var(--sg-text-2xl);
|
|
1321
|
+
line-height: var(--tw-leading, var(--sg-text-2xl--line-height));
|
|
1322
|
+
}
|
|
1323
|
+
}
|
|
1324
|
+
.sg\:lg\:text-3xl {
|
|
1325
|
+
@media (width >= 64rem) {
|
|
1326
|
+
font-size: var(--sg-text-3xl);
|
|
1327
|
+
line-height: var(--tw-leading, var(--sg-text-3xl--line-height));
|
|
1328
|
+
}
|
|
1329
|
+
}
|
|
1330
|
+
.sg\:lg\:text-4xl {
|
|
1331
|
+
@media (width >= 64rem) {
|
|
1332
|
+
font-size: var(--sg-text-4xl);
|
|
1333
|
+
line-height: var(--tw-leading, var(--sg-text-4xl--line-height));
|
|
1127
1334
|
}
|
|
1128
1335
|
}
|
|
1129
1336
|
.sg\:dark\:border-input {
|
|
@@ -1335,14 +1542,14 @@
|
|
|
1335
1542
|
:root {
|
|
1336
1543
|
--sg-color-background: var(--sg-color-white);
|
|
1337
1544
|
--sg-color-foreground: var(--sg-color-black);
|
|
1545
|
+
--sg-color-muted-background: var(--sg-white-muted);
|
|
1546
|
+
--sg-color-muted-foreground: var(--sg-black-muted);
|
|
1338
1547
|
--sg-gradient-1: var(--sg-pink);
|
|
1339
1548
|
--sg-gradient-2: var(--sg-primary);
|
|
1340
1549
|
--card: oklch(1 0 0);
|
|
1341
1550
|
--card-foreground: oklch(0.145 0 0);
|
|
1342
1551
|
--popover: oklch(1 0 0);
|
|
1343
1552
|
--popover-foreground: oklch(0.145 0 0);
|
|
1344
|
-
--muted: oklch(0.97 0 0);
|
|
1345
|
-
--muted-foreground: oklch(0.556 0 0);
|
|
1346
1553
|
--accent: oklch(0.97 0 0);
|
|
1347
1554
|
--accent-foreground: oklch(0.205 0 0);
|
|
1348
1555
|
--border: oklch(0.922 0 0);
|
|
@@ -1366,6 +1573,8 @@
|
|
|
1366
1573
|
.dark {
|
|
1367
1574
|
--sg-color-background: var(--sg-black);
|
|
1368
1575
|
--sg-color-foreground: var(--sg-white);
|
|
1576
|
+
--sg-color-muted-background: var(--sg-black-muted);
|
|
1577
|
+
--sg-color-muted-foreground: var(--sg-white-muted);
|
|
1369
1578
|
--sg-gradient-1: var(--sg-pink);
|
|
1370
1579
|
--sg-gradient-2: var(--sg-primary-light);
|
|
1371
1580
|
--card: oklch(0.145 0 0);
|
|
@@ -1376,8 +1585,6 @@
|
|
|
1376
1585
|
--primary-foreground: oklch(0.205 0 0);
|
|
1377
1586
|
--secondary: oklch(0.269 0 0);
|
|
1378
1587
|
--secondary-foreground: oklch(0.985 0 0);
|
|
1379
|
-
--muted: oklch(0.269 0 0);
|
|
1380
|
-
--muted-foreground: oklch(0.708 0 0);
|
|
1381
1588
|
--accent: oklch(0.269 0 0);
|
|
1382
1589
|
--accent-foreground: oklch(0.985 0 0);
|
|
1383
1590
|
--destructive: oklch(0.396 0.141 25.723);
|
|
@@ -1440,6 +1647,7 @@
|
|
|
1440
1647
|
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
|
|
1441
1648
|
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
|
|
1442
1649
|
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
|
|
1650
|
+
@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }
|
|
1443
1651
|
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
|
|
1444
1652
|
@property --tw-gradient-position { syntax: "*"; inherits: false; }
|
|
1445
1653
|
@property --tw-gradient-from { syntax: "<color>"; inherits: false; initial-value: #0000; }
|
|
@@ -1450,6 +1658,7 @@
|
|
|
1450
1658
|
@property --tw-gradient-from-position { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
|
|
1451
1659
|
@property --tw-gradient-via-position { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
|
|
1452
1660
|
@property --tw-gradient-to-position { syntax: "<length-percentage>"; inherits: false; initial-value: 100%; }
|
|
1661
|
+
@property --tw-leading { syntax: "*"; inherits: false; }
|
|
1453
1662
|
@property --tw-font-weight { syntax: "*"; inherits: false; }
|
|
1454
1663
|
@property --tw-tracking { syntax: "*"; inherits: false; }
|
|
1455
1664
|
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
|
|
@@ -1467,7 +1676,9 @@
|
|
|
1467
1676
|
@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
|
|
1468
1677
|
@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
|
|
1469
1678
|
@property --tw-duration { syntax: "*"; inherits: false; }
|
|
1470
|
-
@property --tw-
|
|
1679
|
+
@property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; }
|
|
1680
|
+
@property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; }
|
|
1681
|
+
@property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; }
|
|
1471
1682
|
@keyframes spin {
|
|
1472
1683
|
to {
|
|
1473
1684
|
transform: rotate(360deg);
|
|
@@ -1487,6 +1698,7 @@
|
|
|
1487
1698
|
--tw-translate-x: 0;
|
|
1488
1699
|
--tw-translate-y: 0;
|
|
1489
1700
|
--tw-translate-z: 0;
|
|
1701
|
+
--tw-space-y-reverse: 0;
|
|
1490
1702
|
--tw-border-style: solid;
|
|
1491
1703
|
--tw-gradient-position: initial;
|
|
1492
1704
|
--tw-gradient-from: #0000;
|
|
@@ -1497,6 +1709,7 @@
|
|
|
1497
1709
|
--tw-gradient-from-position: 0%;
|
|
1498
1710
|
--tw-gradient-via-position: 50%;
|
|
1499
1711
|
--tw-gradient-to-position: 100%;
|
|
1712
|
+
--tw-leading: initial;
|
|
1500
1713
|
--tw-font-weight: initial;
|
|
1501
1714
|
--tw-tracking: initial;
|
|
1502
1715
|
--tw-shadow: 0 0 #0000;
|
|
@@ -1514,7 +1727,9 @@
|
|
|
1514
1727
|
--tw-ring-offset-color: #fff;
|
|
1515
1728
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
1516
1729
|
--tw-duration: initial;
|
|
1517
|
-
--tw-
|
|
1730
|
+
--tw-scale-x: 1;
|
|
1731
|
+
--tw-scale-y: 1;
|
|
1732
|
+
--tw-scale-z: 1;
|
|
1518
1733
|
}
|
|
1519
1734
|
}
|
|
1520
1735
|
}
|
|
@@ -1522,7 +1737,9 @@
|
|
|
1522
1737
|
/* src/css/variables.css */
|
|
1523
1738
|
:root {
|
|
1524
1739
|
--sg-black: 0 0% 15%;
|
|
1740
|
+
--sg-black-muted: 0 0% 45%;
|
|
1525
1741
|
--sg-white: 30 20% 98%;
|
|
1742
|
+
--sg-white-muted: 30 8% 85%;
|
|
1526
1743
|
--sg-pink: 330 90% 65%;
|
|
1527
1744
|
--sg-gray-light: 240 5% 96%;
|
|
1528
1745
|
--sg-gray: 240 4% 46%;
|