singularity-components 0.1.94 → 0.1.96

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.
Files changed (9) hide show
  1. package/dist/main.cjs +11 -6
  2. package/dist/main.cjs.map +1 -1
  3. package/dist/main.css +150 -136
  4. package/dist/main.css.map +1 -1
  5. package/dist/main.d.cts +8 -8
  6. package/dist/main.d.ts +8 -8
  7. package/dist/main.js +11 -6
  8. package/dist/main.js.map +1 -1
  9. package/package.json +1 -1
package/dist/main.css CHANGED
@@ -1,36 +1,36 @@
1
1
  /* src/tailwind.css */
2
2
  @layer properties;
3
3
  :root {
4
- --sg-black: hsl(0 0% 15%);
5
- --sg-white: hsl(30 20% 98%);
6
- --sg-pink: hsl(330 90% 65%);
7
- --sg-gray-light: hsl(240 5% 96%);
8
- --sg-gray: hsl(240 4% 46%);
9
- --sg-gray-dark: hsl(240 6% 10%);
10
- --sg-blue-light: hsl(212 95% 95%);
11
- --sg-blue: hsl(212 95% 53%);
12
- --sg-blue-dark: hsl(212 95% 33%);
13
- --sg-blue-foreground: hsl(0 0% 100%);
14
- --sg-green-light: hsl(142 76% 95%);
15
- --sg-green: hsl(142 76% 42%);
16
- --sg-green-dark: hsl(142 76% 22%);
17
- --sg-green-foreground: hsl(0 0% 100%);
18
- --sg-orange-light: hsl(24 95% 95%);
19
- --sg-orange: hsl(24 95% 53%);
20
- --sg-orange-dark: hsl(24 95% 33%);
21
- --sg-orange-foreground: hsl(0 0% 100%);
22
- --sg-red-light: hsl(0 72% 95%);
23
- --sg-red: hsl(0 72% 51%);
24
- --sg-red-dark: hsl(0 72% 31%);
25
- --sg-red-foreground: hsl(0 0% 100%);
26
- --sg-primary-light: hsl(220 90% 70%);
27
- --sg-primary: hsl(220 90% 50%);
28
- --sg-primary-dark: hsl(220 90% 30%);
29
- --sg-primary-foreground: hsl(0 0% 100%);
30
- --sg-secondary-light: hsl(30 90% 70%);
31
- --sg-secondary: hsl(30 90% 50%);
32
- --sg-secondary-dark: hsl(30 90% 30%);
33
- --sg-secondary-foreground: hsl(0 0% 100%);
4
+ --sg-black: 0 0% 15%;
5
+ --sg-white: 30 20% 98%;
6
+ --sg-pink: 330 90% 65%;
7
+ --sg-gray-light: 240 5% 96%;
8
+ --sg-gray: 240 4% 46%;
9
+ --sg-gray-dark: 240 6% 10%;
10
+ --sg-blue-light: 212 95% 95%;
11
+ --sg-blue: 212 95% 53%;
12
+ --sg-blue-dark: 212 95% 33%;
13
+ --sg-blue-foreground: 0 0% 100%;
14
+ --sg-green-light: 142 76% 95%;
15
+ --sg-green: 142 76% 42%;
16
+ --sg-green-dark: 142 76% 22%;
17
+ --sg-green-foreground: 0 0% 100%;
18
+ --sg-orange-light: 24 95% 95%;
19
+ --sg-orange: 24 95% 53%;
20
+ --sg-orange-dark: 24 95% 33%;
21
+ --sg-orange-foreground: 0 0% 100%;
22
+ --sg-red-light: 0 72% 95%;
23
+ --sg-red: 0 72% 51%;
24
+ --sg-red-dark: 0 72% 31%;
25
+ --sg-red-foreground: 0 0% 100%;
26
+ --sg-primary-light: 220 90% 70%;
27
+ --sg-primary: 220 90% 50%;
28
+ --sg-primary-dark: 220 90% 30%;
29
+ --sg-primary-foreground: 0 0% 100%;
30
+ --sg-secondary-light: 30 90% 70%;
31
+ --sg-secondary: 30 90% 50%;
32
+ --sg-secondary-dark: 30 90% 30%;
33
+ --sg-secondary-foreground: 0 0% 100%;
34
34
  --sg-spacing-1: 0.25rem;
35
35
  --sg-spacing-2: 0.5rem;
36
36
  --sg-spacing-3: 0.75rem;
@@ -84,10 +84,10 @@
84
84
  --sg-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
85
85
  --sg-default-font-family: Inter;
86
86
  --sg-default-mono-font-family: "JetBrains Mono";
87
- --sg-color-black: var(--sg-black);
88
- --sg-color-white: var(--sg-white);
89
- --sg-color-background: var(--sg-color-background);
90
- --sg-color-foreground: var(--sg-color-foreground);
87
+ --sg-color-black: hsl(var(--sg-black));
88
+ --sg-color-white: hsl(var(--sg-white));
89
+ --sg-color-background: hsl(var(--sg-color-background));
90
+ --sg-color-foreground: hsl(var(--sg-color-foreground));
91
91
  }
92
92
  }
93
93
  @layer base {
@@ -295,6 +295,9 @@
295
295
  .sg\:inset-\[18\%\] {
296
296
  inset: 18%;
297
297
  }
298
+ .sg\:-z-10 {
299
+ z-index: calc(10 * -1);
300
+ }
298
301
  .sg\:col-start-2 {
299
302
  grid-column-start: 2;
300
303
  }
@@ -509,20 +512,20 @@
509
512
  .sg\:border-transparent {
510
513
  border-color: transparent;
511
514
  }
512
- .sg\:bg-\[var\(--sg-pink\)\] {
513
- background-color: var(--sg-pink);
515
+ .sg\:bg-\[hsl\(var\(--sg-gradient-1\)\)\] {
516
+ background-color: hsl(var(--sg-gradient-1));
514
517
  }
515
- .sg\:bg-\[var\(--sg-primary\)\] {
516
- background-color: var(--sg-primary);
518
+ .sg\:bg-\[hsl\(var\(--sg-gradient-2\)\)\] {
519
+ background-color: hsl(var(--sg-gradient-2));
517
520
  }
518
521
  .sg\:bg-accent {
519
522
  background-color: var(--accent);
520
523
  }
521
524
  .sg\:bg-background {
522
- background-color: var(--sg-color-background);
525
+ background-color: hsl(var(--sg-color-background));
523
526
  }
524
527
  .sg\:bg-black {
525
- background-color: var(--sg-black);
528
+ background-color: hsl(var(--sg-black));
526
529
  }
527
530
  .sg\:bg-border {
528
531
  background-color: var(--border);
@@ -531,13 +534,13 @@
531
534
  background-color: var(--card);
532
535
  }
533
536
  .sg\:bg-destructive {
534
- background-color: var(--sg-red);
537
+ background-color: hsl(var(--sg-red));
535
538
  }
536
539
  .sg\:bg-foreground {
537
- background-color: var(--sg-color-foreground);
540
+ background-color: hsl(var(--sg-color-foreground));
538
541
  }
539
542
  .sg\:bg-gray {
540
- background-color: var(--sg-gray);
543
+ background-color: hsl(var(--sg-gray));
541
544
  }
542
545
  .sg\:bg-muted\/50 {
543
546
  background-color: var(--muted);
@@ -546,42 +549,53 @@
546
549
  }
547
550
  }
548
551
  .sg\:bg-orange {
549
- background-color: var(--sg-orange);
552
+ background-color: hsl(var(--sg-orange));
550
553
  }
551
554
  .sg\:bg-primary {
552
- background-color: var(--sg-primary);
555
+ background-color: hsl(var(--sg-primary));
553
556
  }
554
557
  .sg\:bg-secondary {
555
- background-color: var(--sg-secondary);
558
+ background-color: hsl(var(--sg-secondary));
556
559
  }
557
560
  .sg\:bg-transparent {
558
561
  background-color: transparent;
559
562
  }
560
563
  .sg\:bg-white {
561
- background-color: var(--sg-white);
564
+ background-color: hsl(var(--sg-white));
562
565
  }
563
566
  .sg\:bg-gradient-to-r {
564
567
  --tw-gradient-position: to right in oklab;
565
568
  background-image: linear-gradient(var(--tw-gradient-stops));
566
569
  }
567
- .sg\:bg-\[conic-gradient\(var\(--sg-pink\)\,var\(--sg-primary\)\,var\(--sg-primary\)\,var\(--sg-pink\)\)\] {
570
+ .sg\:bg-\[conic-gradient\(hsl\(var\(--sg-gradient-1\)\)\,hsl\(var\(--sg-gradient-2\)\)\,hsl\(var\(--sg-primary\)\)\,hsl\(var\(--sg-gradient-1\)\)\)\] {
568
571
  background-image:
569
572
  conic-gradient(
570
- var(--sg-pink),
571
- var(--sg-primary),
572
- var(--sg-primary),
573
- var(--sg-pink));
573
+ hsl(var(--sg-gradient-1)),
574
+ hsl(var(--sg-gradient-2)),
575
+ hsl(var(--sg-primary)),
576
+ hsl(var(--sg-gradient-1)));
577
+ }
578
+ .sg\:bg-\[radial-gradient\(1200px_300px_at_10\%_-20\%\,hsl\(var\(--sg-gradient-1\)\/0\.15\)\,transparent\)\,radial-gradient\(800px_200px_at_90\%_-20\%\,hsl\(var\(--sg-gradient-2\)\/0\.15\)\,transparent\)\] {
579
+ background-image:
580
+ radial-gradient(
581
+ 1200px 300px at 10% -20%,
582
+ hsl(var(--sg-gradient-1)/0.15),
583
+ transparent),
584
+ radial-gradient(
585
+ 800px 200px at 90% -20%,
586
+ hsl(var(--sg-gradient-2)/0.15),
587
+ transparent);
574
588
  }
575
- .sg\:from-\[var\(--sg-gradient-1\)\] {
576
- --tw-gradient-from: var(--sg-gradient-1);
589
+ .sg\:from-\[hsl\(var\(--sg-gradient-1\)\)\] {
590
+ --tw-gradient-from: hsl(var(--sg-gradient-1));
577
591
  --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
592
  }
579
593
  .sg\:from-blue {
580
- --tw-gradient-from: var(--sg-blue);
594
+ --tw-gradient-from: hsl(var(--sg-blue));
581
595
  --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));
582
596
  }
583
- .sg\:via-\[var\(--sg-gradient-2\)\] {
584
- --tw-gradient-via: var(--sg-gradient-2);
597
+ .sg\:via-\[hsl\(var\(--sg-gradient-2\)\)\] {
598
+ --tw-gradient-via: hsl(var(--sg-gradient-2));
585
599
  --tw-gradient-via-stops:
586
600
  var(--tw-gradient-position),
587
601
  var(--tw-gradient-from) var(--tw-gradient-from-position),
@@ -590,7 +604,7 @@
590
604
  --tw-gradient-stops: var(--tw-gradient-via-stops);
591
605
  }
592
606
  .sg\:via-orange {
593
- --tw-gradient-via: var(--sg-orange);
607
+ --tw-gradient-via: hsl(var(--sg-orange));
594
608
  --tw-gradient-via-stops:
595
609
  var(--tw-gradient-position),
596
610
  var(--tw-gradient-from) var(--tw-gradient-from-position),
@@ -598,12 +612,12 @@
598
612
  var(--tw-gradient-to) var(--tw-gradient-to-position);
599
613
  --tw-gradient-stops: var(--tw-gradient-via-stops);
600
614
  }
601
- .sg\:to-\[var\(--sg-primary\)\] {
602
- --tw-gradient-to: var(--sg-primary);
615
+ .sg\:to-\[hsl\(var\(--sg-primary\)\)\] {
616
+ --tw-gradient-to: hsl(var(--sg-primary));
603
617
  --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
618
  }
605
619
  .sg\:to-red {
606
- --tw-gradient-to: var(--sg-red);
620
+ --tw-gradient-to: hsl(var(--sg-red));
607
621
  --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));
608
622
  }
609
623
  .sg\:bg-clip-text {
@@ -725,43 +739,43 @@
725
739
  white-space: nowrap;
726
740
  }
727
741
  .sg\:text-background {
728
- color: var(--sg-color-background);
742
+ color: hsl(var(--sg-color-background));
729
743
  }
730
744
  .sg\:text-black {
731
- color: var(--sg-black);
745
+ color: hsl(var(--sg-black));
732
746
  }
733
747
  .sg\:text-card-foreground {
734
748
  color: var(--card-foreground);
735
749
  }
736
750
  .sg\:text-destructive {
737
- color: var(--sg-red);
751
+ color: hsl(var(--sg-red));
738
752
  }
739
753
  .sg\:text-foreground {
740
- color: var(--sg-color-foreground);
754
+ color: hsl(var(--sg-color-foreground));
741
755
  }
742
756
  .sg\:text-gray {
743
- color: var(--sg-gray);
757
+ color: hsl(var(--sg-gray));
744
758
  }
745
759
  .sg\:text-muted-foreground {
746
760
  color: var(--muted-foreground);
747
761
  }
748
762
  .sg\:text-primary {
749
- color: var(--sg-primary);
763
+ color: hsl(var(--sg-primary));
750
764
  }
751
765
  .sg\:text-primary-foreground {
752
- color: var(--sg-primary-foreground);
766
+ color: hsl(var(--sg-primary-foreground));
753
767
  }
754
768
  .sg\:text-secondary {
755
- color: var(--sg-secondary);
769
+ color: hsl(var(--sg-secondary));
756
770
  }
757
771
  .sg\:text-secondary-foreground {
758
- color: var(--sg-secondary-foreground);
772
+ color: hsl(var(--sg-secondary-foreground));
759
773
  }
760
774
  .sg\:text-transparent {
761
775
  color: transparent;
762
776
  }
763
777
  .sg\:text-white {
764
- color: var(--sg-white);
778
+ color: hsl(var(--sg-white));
765
779
  }
766
780
  .sg\:underline-offset-4 {
767
781
  text-underline-offset: 4px;
@@ -829,18 +843,18 @@
829
843
  }
830
844
  .sg\:selection\:bg-primary {
831
845
  & *::selection {
832
- background-color: var(--sg-primary);
846
+ background-color: hsl(var(--sg-primary));
833
847
  }
834
848
  &::selection {
835
- background-color: var(--sg-primary);
849
+ background-color: hsl(var(--sg-primary));
836
850
  }
837
851
  }
838
852
  .sg\:selection\:text-primary-foreground {
839
853
  & *::selection {
840
- color: var(--sg-primary-foreground);
854
+ color: hsl(var(--sg-primary-foreground));
841
855
  }
842
856
  &::selection {
843
- color: var(--sg-primary-foreground);
857
+ color: hsl(var(--sg-primary-foreground));
844
858
  }
845
859
  }
846
860
  .sg\:file\:inline-flex {
@@ -878,7 +892,7 @@
878
892
  }
879
893
  .sg\:file\:text-foreground {
880
894
  &::file-selector-button {
881
- color: var(--sg-color-foreground);
895
+ color: hsl(var(--sg-color-foreground));
882
896
  }
883
897
  }
884
898
  .sg\:placeholder\:text-muted-foreground {
@@ -907,9 +921,9 @@
907
921
  .sg\:hover\:bg-destructive\/90 {
908
922
  &:hover {
909
923
  @media (hover: hover) {
910
- background-color: var(--sg-red);
924
+ background-color: hsl(var(--sg-red));
911
925
  @supports (color: color-mix(in lab, red, red)) {
912
- background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
926
+ background-color: color-mix(in oklab, hsl(var(--sg-red)) 90%, transparent);
913
927
  }
914
928
  }
915
929
  }
@@ -927,9 +941,9 @@
927
941
  .sg\:hover\:bg-primary\/90 {
928
942
  &:hover {
929
943
  @media (hover: hover) {
930
- background-color: var(--sg-primary);
944
+ background-color: hsl(var(--sg-primary));
931
945
  @supports (color: color-mix(in lab, red, red)) {
932
- background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
946
+ background-color: color-mix(in oklab, hsl(var(--sg-primary)) 90%, transparent);
933
947
  }
934
948
  }
935
949
  }
@@ -937,9 +951,9 @@
937
951
  .sg\:hover\:bg-secondary\/80 {
938
952
  &:hover {
939
953
  @media (hover: hover) {
940
- background-color: var(--sg-secondary);
954
+ background-color: hsl(var(--sg-secondary));
941
955
  @supports (color: color-mix(in lab, red, red)) {
942
- background-color: color-mix(in oklab, var(--sg-secondary) 80%, transparent);
956
+ background-color: color-mix(in oklab, hsl(var(--sg-secondary)) 80%, transparent);
943
957
  }
944
958
  }
945
959
  }
@@ -976,9 +990,9 @@
976
990
  }
977
991
  .sg\:focus-visible\:ring-destructive\/20 {
978
992
  &:focus-visible {
979
- --tw-ring-color: var(--sg-red);
993
+ --tw-ring-color: hsl(var(--sg-red));
980
994
  @supports (color: color-mix(in lab, red, red)) {
981
- --tw-ring-color: color-mix(in oklab, var(--sg-red) 20%, transparent);
995
+ --tw-ring-color: color-mix(in oklab, hsl(var(--sg-red)) 20%, transparent);
982
996
  }
983
997
  }
984
998
  }
@@ -1032,14 +1046,14 @@
1032
1046
  }
1033
1047
  .sg\:aria-invalid\:border-destructive {
1034
1048
  &[aria-invalid=true] {
1035
- border-color: var(--sg-red);
1049
+ border-color: hsl(var(--sg-red));
1036
1050
  }
1037
1051
  }
1038
1052
  .sg\:aria-invalid\:ring-destructive\/20 {
1039
1053
  &[aria-invalid=true] {
1040
- --tw-ring-color: var(--sg-red);
1054
+ --tw-ring-color: hsl(var(--sg-red));
1041
1055
  @supports (color: color-mix(in lab, red, red)) {
1042
- --tw-ring-color: color-mix(in oklab, var(--sg-red) 20%, transparent);
1056
+ --tw-ring-color: color-mix(in oklab, hsl(var(--sg-red)) 20%, transparent);
1043
1057
  }
1044
1058
  }
1045
1059
  }
@@ -1066,9 +1080,9 @@
1066
1080
  .sg\:\*\:data-\[slot\=alert-description\]\:text-destructive\/90 {
1067
1081
  :is(& > *) {
1068
1082
  &[data-slot=alert-description] {
1069
- color: var(--sg-red);
1083
+ color: hsl(var(--sg-red));
1070
1084
  @supports (color: color-mix(in lab, red, red)) {
1071
- color: color-mix(in oklab, var(--sg-red) 90%, transparent);
1085
+ color: color-mix(in oklab, hsl(var(--sg-red)) 90%, transparent);
1072
1086
  }
1073
1087
  }
1074
1088
  }
@@ -1122,9 +1136,9 @@
1122
1136
  }
1123
1137
  .sg\:dark\:bg-destructive\/60 {
1124
1138
  &:is(.dark *) {
1125
- background-color: var(--sg-red);
1139
+ background-color: hsl(var(--sg-red));
1126
1140
  @supports (color: color-mix(in lab, red, red)) {
1127
- background-color: color-mix(in oklab, var(--sg-red) 60%, transparent);
1141
+ background-color: color-mix(in oklab, hsl(var(--sg-red)) 60%, transparent);
1128
1142
  }
1129
1143
  }
1130
1144
  }
@@ -1163,9 +1177,9 @@
1163
1177
  .sg\:dark\:focus-visible\:ring-destructive\/40 {
1164
1178
  &:is(.dark *) {
1165
1179
  &:focus-visible {
1166
- --tw-ring-color: var(--sg-red);
1180
+ --tw-ring-color: hsl(var(--sg-red));
1167
1181
  @supports (color: color-mix(in lab, red, red)) {
1168
- --tw-ring-color: color-mix(in oklab, var(--sg-red) 40%, transparent);
1182
+ --tw-ring-color: color-mix(in oklab, hsl(var(--sg-red)) 40%, transparent);
1169
1183
  }
1170
1184
  }
1171
1185
  }
@@ -1173,9 +1187,9 @@
1173
1187
  .sg\:dark\:aria-invalid\:ring-destructive\/40 {
1174
1188
  &:is(.dark *) {
1175
1189
  &[aria-invalid=true] {
1176
- --tw-ring-color: var(--sg-red);
1190
+ --tw-ring-color: hsl(var(--sg-red));
1177
1191
  @supports (color: color-mix(in lab, red, red)) {
1178
- --tw-ring-color: color-mix(in oklab, var(--sg-red) 40%, transparent);
1192
+ --tw-ring-color: color-mix(in oklab, hsl(var(--sg-red)) 40%, transparent);
1179
1193
  }
1180
1194
  }
1181
1195
  }
@@ -1279,9 +1293,9 @@
1279
1293
  a& {
1280
1294
  &:hover {
1281
1295
  @media (hover: hover) {
1282
- background-color: var(--sg-red);
1296
+ background-color: hsl(var(--sg-red));
1283
1297
  @supports (color: color-mix(in lab, red, red)) {
1284
- background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
1298
+ background-color: color-mix(in oklab, hsl(var(--sg-red)) 90%, transparent);
1285
1299
  }
1286
1300
  }
1287
1301
  }
@@ -1291,9 +1305,9 @@
1291
1305
  a& {
1292
1306
  &:hover {
1293
1307
  @media (hover: hover) {
1294
- background-color: var(--sg-primary);
1308
+ background-color: hsl(var(--sg-primary));
1295
1309
  @supports (color: color-mix(in lab, red, red)) {
1296
- background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
1310
+ background-color: color-mix(in oklab, hsl(var(--sg-primary)) 90%, transparent);
1297
1311
  }
1298
1312
  }
1299
1313
  }
@@ -1303,9 +1317,9 @@
1303
1317
  a& {
1304
1318
  &:hover {
1305
1319
  @media (hover: hover) {
1306
- background-color: var(--sg-secondary);
1320
+ background-color: hsl(var(--sg-secondary));
1307
1321
  @supports (color: color-mix(in lab, red, red)) {
1308
- background-color: color-mix(in oklab, var(--sg-secondary) 90%, transparent);
1322
+ background-color: color-mix(in oklab, hsl(var(--sg-secondary)) 90%, transparent);
1309
1323
  }
1310
1324
  }
1311
1325
  }
@@ -1397,8 +1411,8 @@
1397
1411
  }
1398
1412
  }
1399
1413
  body {
1400
- background-color: var(--sg-color-background);
1401
- color: var(--sg-color-foreground);
1414
+ background-color: hsl(var(--sg-color-background));
1415
+ color: hsl(var(--sg-color-foreground));
1402
1416
  }
1403
1417
  }
1404
1418
  @layer utilities {
@@ -1406,9 +1420,9 @@
1406
1420
  background-image:
1407
1421
  linear-gradient(
1408
1422
  90deg,
1409
- var(--sg-gradient-1) 0%,
1410
- var(--sg-gradient-2) 50%,
1411
- var(--sg-primary) 100%);
1423
+ hsl(var(--sg-gradient-1)) 0%,
1424
+ hsl(var(--sg-gradient-2)) 50%,
1425
+ hsl(var(--sg-primary)) 100%);
1412
1426
  -webkit-background-clip: text;
1413
1427
  background-clip: text;
1414
1428
  color: transparent;
@@ -1510,36 +1524,36 @@
1510
1524
 
1511
1525
  /* src/css/variables.css */
1512
1526
  :root {
1513
- --sg-black: hsl(0 0% 15%);
1514
- --sg-white: hsl(30 20% 98%);
1515
- --sg-pink: hsl(330 90% 65%);
1516
- --sg-gray-light: hsl(240 5% 96%);
1517
- --sg-gray: hsl(240 4% 46%);
1518
- --sg-gray-dark: hsl(240 6% 10%);
1519
- --sg-blue-light: hsl(212 95% 95%);
1520
- --sg-blue: hsl(212 95% 53%);
1521
- --sg-blue-dark: hsl(212 95% 33%);
1522
- --sg-blue-foreground: hsl(0 0% 100%);
1523
- --sg-green-light: hsl(142 76% 95%);
1524
- --sg-green: hsl(142 76% 42%);
1525
- --sg-green-dark: hsl(142 76% 22%);
1526
- --sg-green-foreground: hsl(0 0% 100%);
1527
- --sg-orange-light: hsl(24 95% 95%);
1528
- --sg-orange: hsl(24 95% 53%);
1529
- --sg-orange-dark: hsl(24 95% 33%);
1530
- --sg-orange-foreground: hsl(0 0% 100%);
1531
- --sg-red-light: hsl(0 72% 95%);
1532
- --sg-red: hsl(0 72% 51%);
1533
- --sg-red-dark: hsl(0 72% 31%);
1534
- --sg-red-foreground: hsl(0 0% 100%);
1535
- --sg-primary-light: hsl(220 90% 70%);
1536
- --sg-primary: hsl(220 90% 50%);
1537
- --sg-primary-dark: hsl(220 90% 30%);
1538
- --sg-primary-foreground: hsl(0 0% 100%);
1539
- --sg-secondary-light: hsl(30 90% 70%);
1540
- --sg-secondary: hsl(30 90% 50%);
1541
- --sg-secondary-dark: hsl(30 90% 30%);
1542
- --sg-secondary-foreground: hsl(0 0% 100%);
1527
+ --sg-black: 0 0% 15%;
1528
+ --sg-white: 30 20% 98%;
1529
+ --sg-pink: 330 90% 65%;
1530
+ --sg-gray-light: 240 5% 96%;
1531
+ --sg-gray: 240 4% 46%;
1532
+ --sg-gray-dark: 240 6% 10%;
1533
+ --sg-blue-light: 212 95% 95%;
1534
+ --sg-blue: 212 95% 53%;
1535
+ --sg-blue-dark: 212 95% 33%;
1536
+ --sg-blue-foreground: 0 0% 100%;
1537
+ --sg-green-light: 142 76% 95%;
1538
+ --sg-green: 142 76% 42%;
1539
+ --sg-green-dark: 142 76% 22%;
1540
+ --sg-green-foreground: 0 0% 100%;
1541
+ --sg-orange-light: 24 95% 95%;
1542
+ --sg-orange: 24 95% 53%;
1543
+ --sg-orange-dark: 24 95% 33%;
1544
+ --sg-orange-foreground: 0 0% 100%;
1545
+ --sg-red-light: 0 72% 95%;
1546
+ --sg-red: 0 72% 51%;
1547
+ --sg-red-dark: 0 72% 31%;
1548
+ --sg-red-foreground: 0 0% 100%;
1549
+ --sg-primary-light: 220 90% 70%;
1550
+ --sg-primary: 220 90% 50%;
1551
+ --sg-primary-dark: 220 90% 30%;
1552
+ --sg-primary-foreground: 0 0% 100%;
1553
+ --sg-secondary-light: 30 90% 70%;
1554
+ --sg-secondary: 30 90% 50%;
1555
+ --sg-secondary-dark: 30 90% 30%;
1556
+ --sg-secondary-foreground: 0 0% 100%;
1543
1557
  --sg-spacing-1: 0.25rem;
1544
1558
  --sg-spacing-2: 0.5rem;
1545
1559
  --sg-spacing-3: 0.75rem;