singularity-components 0.1.95 → 0.1.97

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 +16 -12
  2. package/dist/main.cjs.map +1 -1
  3. package/dist/main.css +127 -127
  4. package/dist/main.css.map +1 -1
  5. package/dist/main.d.cts +10 -21
  6. package/dist/main.d.ts +10 -21
  7. package/dist/main.js +16 -12
  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%);
4
+ --sg-black: 0 0% 15%;
5
+ --sg-white: 30 20% 98%;
6
6
  --sg-pink: 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%);
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
26
  --sg-primary-light: 220 90% 70%;
27
27
  --sg-primary: 220 90% 50%;
28
28
  --sg-primary-dark: 220 90% 30%;
29
29
  --sg-primary-foreground: 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%);
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 {
@@ -512,28 +512,20 @@
512
512
  .sg\:border-transparent {
513
513
  border-color: transparent;
514
514
  }
515
- .sg\:bg-\[conic-gradient\(hsl\(var\(--sg-pink\)\)\,hsl\(var\(--sg-primary\)\)\,\)\,hsl\(var\(--sg-primary\)\)\,hsl\(var\(--sg-pink\)\)\)\] {
516
- background-color:
517
- conic-gradient(
518
- hsl(var(--sg-pink)),
519
- hsl(var(--sg-primary)), ),
520
- hsl(var(--sg-primary)),
521
- hsl(var(--sg-pink));
522
- }
523
- .sg\:bg-\[hsl\(var\(--sg-pink\)\)\] {
524
- background-color: hsl(var(--sg-pink));
515
+ .sg\:bg-\[hsl\(var\(--sg-gradient-1\)\)\] {
516
+ background-color: hsl(var(--sg-gradient-1));
525
517
  }
526
- .sg\:bg-\[hsl\(var\(--sg-primary\)\)\] {
527
- background-color: hsl(var(--sg-primary));
518
+ .sg\:bg-\[hsl\(var\(--sg-gradient-2\)\)\] {
519
+ background-color: hsl(var(--sg-gradient-2));
528
520
  }
529
521
  .sg\:bg-accent {
530
522
  background-color: var(--accent);
531
523
  }
532
524
  .sg\:bg-background {
533
- background-color: var(--sg-color-background);
525
+ background-color: hsl(var(--sg-color-background));
534
526
  }
535
527
  .sg\:bg-black {
536
- background-color: var(--sg-black);
528
+ background-color: hsl(var(--sg-black));
537
529
  }
538
530
  .sg\:bg-border {
539
531
  background-color: var(--border);
@@ -542,13 +534,13 @@
542
534
  background-color: var(--card);
543
535
  }
544
536
  .sg\:bg-destructive {
545
- background-color: var(--sg-red);
537
+ background-color: hsl(var(--sg-red));
546
538
  }
547
539
  .sg\:bg-foreground {
548
- background-color: var(--sg-color-foreground);
540
+ background-color: hsl(var(--sg-color-foreground));
549
541
  }
550
542
  .sg\:bg-gray {
551
- background-color: var(--sg-gray);
543
+ background-color: hsl(var(--sg-gray));
552
544
  }
553
545
  .sg\:bg-muted\/50 {
554
546
  background-color: var(--muted);
@@ -557,24 +549,32 @@
557
549
  }
558
550
  }
559
551
  .sg\:bg-orange {
560
- background-color: var(--sg-orange);
552
+ background-color: hsl(var(--sg-orange));
561
553
  }
562
554
  .sg\:bg-primary {
563
- background-color: var(--sg-primary);
555
+ background-color: hsl(var(--sg-primary));
564
556
  }
565
557
  .sg\:bg-secondary {
566
- background-color: var(--sg-secondary);
558
+ background-color: hsl(var(--sg-secondary));
567
559
  }
568
560
  .sg\:bg-transparent {
569
561
  background-color: transparent;
570
562
  }
571
563
  .sg\:bg-white {
572
- background-color: var(--sg-white);
564
+ background-color: hsl(var(--sg-white));
573
565
  }
574
566
  .sg\:bg-gradient-to-r {
575
567
  --tw-gradient-position: to right in oklab;
576
568
  background-image: linear-gradient(var(--tw-gradient-stops));
577
569
  }
570
+ .sg\:bg-\[conic-gradient\(hsl\(var\(--sg-gradient-1\)\)\,hsl\(var\(--sg-gradient-2\)\)\,hsl\(var\(--sg-primary\)\)\,hsl\(var\(--sg-gradient-1\)\)\)\] {
571
+ background-image:
572
+ conic-gradient(
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
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
579
  background-image:
580
580
  radial-gradient(
@@ -586,16 +586,16 @@
586
586
  hsl(var(--sg-gradient-2)/0.15),
587
587
  transparent);
588
588
  }
589
- .sg\:from-\[var\(--sg-gradient-1\)\] {
590
- --tw-gradient-from: var(--sg-gradient-1);
589
+ .sg\:from-\[hsl\(var\(--sg-gradient-1\)\)\] {
590
+ --tw-gradient-from: hsl(var(--sg-gradient-1));
591
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));
592
592
  }
593
593
  .sg\:from-blue {
594
- --tw-gradient-from: var(--sg-blue);
594
+ --tw-gradient-from: hsl(var(--sg-blue));
595
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));
596
596
  }
597
- .sg\:via-\[var\(--sg-gradient-2\)\] {
598
- --tw-gradient-via: var(--sg-gradient-2);
597
+ .sg\:via-\[hsl\(var\(--sg-gradient-2\)\)\] {
598
+ --tw-gradient-via: hsl(var(--sg-gradient-2));
599
599
  --tw-gradient-via-stops:
600
600
  var(--tw-gradient-position),
601
601
  var(--tw-gradient-from) var(--tw-gradient-from-position),
@@ -604,7 +604,7 @@
604
604
  --tw-gradient-stops: var(--tw-gradient-via-stops);
605
605
  }
606
606
  .sg\:via-orange {
607
- --tw-gradient-via: var(--sg-orange);
607
+ --tw-gradient-via: hsl(var(--sg-orange));
608
608
  --tw-gradient-via-stops:
609
609
  var(--tw-gradient-position),
610
610
  var(--tw-gradient-from) var(--tw-gradient-from-position),
@@ -617,7 +617,7 @@
617
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));
618
618
  }
619
619
  .sg\:to-red {
620
- --tw-gradient-to: var(--sg-red);
620
+ --tw-gradient-to: hsl(var(--sg-red));
621
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));
622
622
  }
623
623
  .sg\:bg-clip-text {
@@ -739,43 +739,43 @@
739
739
  white-space: nowrap;
740
740
  }
741
741
  .sg\:text-background {
742
- color: var(--sg-color-background);
742
+ color: hsl(var(--sg-color-background));
743
743
  }
744
744
  .sg\:text-black {
745
- color: var(--sg-black);
745
+ color: hsl(var(--sg-black));
746
746
  }
747
747
  .sg\:text-card-foreground {
748
748
  color: var(--card-foreground);
749
749
  }
750
750
  .sg\:text-destructive {
751
- color: var(--sg-red);
751
+ color: hsl(var(--sg-red));
752
752
  }
753
753
  .sg\:text-foreground {
754
- color: var(--sg-color-foreground);
754
+ color: hsl(var(--sg-color-foreground));
755
755
  }
756
756
  .sg\:text-gray {
757
- color: var(--sg-gray);
757
+ color: hsl(var(--sg-gray));
758
758
  }
759
759
  .sg\:text-muted-foreground {
760
760
  color: var(--muted-foreground);
761
761
  }
762
762
  .sg\:text-primary {
763
- color: var(--sg-primary);
763
+ color: hsl(var(--sg-primary));
764
764
  }
765
765
  .sg\:text-primary-foreground {
766
- color: var(--sg-primary-foreground);
766
+ color: hsl(var(--sg-primary-foreground));
767
767
  }
768
768
  .sg\:text-secondary {
769
- color: var(--sg-secondary);
769
+ color: hsl(var(--sg-secondary));
770
770
  }
771
771
  .sg\:text-secondary-foreground {
772
- color: var(--sg-secondary-foreground);
772
+ color: hsl(var(--sg-secondary-foreground));
773
773
  }
774
774
  .sg\:text-transparent {
775
775
  color: transparent;
776
776
  }
777
777
  .sg\:text-white {
778
- color: var(--sg-white);
778
+ color: hsl(var(--sg-white));
779
779
  }
780
780
  .sg\:underline-offset-4 {
781
781
  text-underline-offset: 4px;
@@ -843,18 +843,18 @@
843
843
  }
844
844
  .sg\:selection\:bg-primary {
845
845
  & *::selection {
846
- background-color: var(--sg-primary);
846
+ background-color: hsl(var(--sg-primary));
847
847
  }
848
848
  &::selection {
849
- background-color: var(--sg-primary);
849
+ background-color: hsl(var(--sg-primary));
850
850
  }
851
851
  }
852
852
  .sg\:selection\:text-primary-foreground {
853
853
  & *::selection {
854
- color: var(--sg-primary-foreground);
854
+ color: hsl(var(--sg-primary-foreground));
855
855
  }
856
856
  &::selection {
857
- color: var(--sg-primary-foreground);
857
+ color: hsl(var(--sg-primary-foreground));
858
858
  }
859
859
  }
860
860
  .sg\:file\:inline-flex {
@@ -892,7 +892,7 @@
892
892
  }
893
893
  .sg\:file\:text-foreground {
894
894
  &::file-selector-button {
895
- color: var(--sg-color-foreground);
895
+ color: hsl(var(--sg-color-foreground));
896
896
  }
897
897
  }
898
898
  .sg\:placeholder\:text-muted-foreground {
@@ -921,9 +921,9 @@
921
921
  .sg\:hover\:bg-destructive\/90 {
922
922
  &:hover {
923
923
  @media (hover: hover) {
924
- background-color: var(--sg-red);
924
+ background-color: hsl(var(--sg-red));
925
925
  @supports (color: color-mix(in lab, red, red)) {
926
- background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
926
+ background-color: color-mix(in oklab, hsl(var(--sg-red)) 90%, transparent);
927
927
  }
928
928
  }
929
929
  }
@@ -941,9 +941,9 @@
941
941
  .sg\:hover\:bg-primary\/90 {
942
942
  &:hover {
943
943
  @media (hover: hover) {
944
- background-color: var(--sg-primary);
944
+ background-color: hsl(var(--sg-primary));
945
945
  @supports (color: color-mix(in lab, red, red)) {
946
- background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
946
+ background-color: color-mix(in oklab, hsl(var(--sg-primary)) 90%, transparent);
947
947
  }
948
948
  }
949
949
  }
@@ -951,9 +951,9 @@
951
951
  .sg\:hover\:bg-secondary\/80 {
952
952
  &:hover {
953
953
  @media (hover: hover) {
954
- background-color: var(--sg-secondary);
954
+ background-color: hsl(var(--sg-secondary));
955
955
  @supports (color: color-mix(in lab, red, red)) {
956
- background-color: color-mix(in oklab, var(--sg-secondary) 80%, transparent);
956
+ background-color: color-mix(in oklab, hsl(var(--sg-secondary)) 80%, transparent);
957
957
  }
958
958
  }
959
959
  }
@@ -990,9 +990,9 @@
990
990
  }
991
991
  .sg\:focus-visible\:ring-destructive\/20 {
992
992
  &:focus-visible {
993
- --tw-ring-color: var(--sg-red);
993
+ --tw-ring-color: hsl(var(--sg-red));
994
994
  @supports (color: color-mix(in lab, red, red)) {
995
- --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);
996
996
  }
997
997
  }
998
998
  }
@@ -1046,14 +1046,14 @@
1046
1046
  }
1047
1047
  .sg\:aria-invalid\:border-destructive {
1048
1048
  &[aria-invalid=true] {
1049
- border-color: var(--sg-red);
1049
+ border-color: hsl(var(--sg-red));
1050
1050
  }
1051
1051
  }
1052
1052
  .sg\:aria-invalid\:ring-destructive\/20 {
1053
1053
  &[aria-invalid=true] {
1054
- --tw-ring-color: var(--sg-red);
1054
+ --tw-ring-color: hsl(var(--sg-red));
1055
1055
  @supports (color: color-mix(in lab, red, red)) {
1056
- --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);
1057
1057
  }
1058
1058
  }
1059
1059
  }
@@ -1080,9 +1080,9 @@
1080
1080
  .sg\:\*\:data-\[slot\=alert-description\]\:text-destructive\/90 {
1081
1081
  :is(& > *) {
1082
1082
  &[data-slot=alert-description] {
1083
- color: var(--sg-red);
1083
+ color: hsl(var(--sg-red));
1084
1084
  @supports (color: color-mix(in lab, red, red)) {
1085
- color: color-mix(in oklab, var(--sg-red) 90%, transparent);
1085
+ color: color-mix(in oklab, hsl(var(--sg-red)) 90%, transparent);
1086
1086
  }
1087
1087
  }
1088
1088
  }
@@ -1136,9 +1136,9 @@
1136
1136
  }
1137
1137
  .sg\:dark\:bg-destructive\/60 {
1138
1138
  &:is(.dark *) {
1139
- background-color: var(--sg-red);
1139
+ background-color: hsl(var(--sg-red));
1140
1140
  @supports (color: color-mix(in lab, red, red)) {
1141
- background-color: color-mix(in oklab, var(--sg-red) 60%, transparent);
1141
+ background-color: color-mix(in oklab, hsl(var(--sg-red)) 60%, transparent);
1142
1142
  }
1143
1143
  }
1144
1144
  }
@@ -1177,9 +1177,9 @@
1177
1177
  .sg\:dark\:focus-visible\:ring-destructive\/40 {
1178
1178
  &:is(.dark *) {
1179
1179
  &:focus-visible {
1180
- --tw-ring-color: var(--sg-red);
1180
+ --tw-ring-color: hsl(var(--sg-red));
1181
1181
  @supports (color: color-mix(in lab, red, red)) {
1182
- --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);
1183
1183
  }
1184
1184
  }
1185
1185
  }
@@ -1187,9 +1187,9 @@
1187
1187
  .sg\:dark\:aria-invalid\:ring-destructive\/40 {
1188
1188
  &:is(.dark *) {
1189
1189
  &[aria-invalid=true] {
1190
- --tw-ring-color: var(--sg-red);
1190
+ --tw-ring-color: hsl(var(--sg-red));
1191
1191
  @supports (color: color-mix(in lab, red, red)) {
1192
- --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);
1193
1193
  }
1194
1194
  }
1195
1195
  }
@@ -1293,9 +1293,9 @@
1293
1293
  a& {
1294
1294
  &:hover {
1295
1295
  @media (hover: hover) {
1296
- background-color: var(--sg-red);
1296
+ background-color: hsl(var(--sg-red));
1297
1297
  @supports (color: color-mix(in lab, red, red)) {
1298
- background-color: color-mix(in oklab, var(--sg-red) 90%, transparent);
1298
+ background-color: color-mix(in oklab, hsl(var(--sg-red)) 90%, transparent);
1299
1299
  }
1300
1300
  }
1301
1301
  }
@@ -1305,9 +1305,9 @@
1305
1305
  a& {
1306
1306
  &:hover {
1307
1307
  @media (hover: hover) {
1308
- background-color: var(--sg-primary);
1308
+ background-color: hsl(var(--sg-primary));
1309
1309
  @supports (color: color-mix(in lab, red, red)) {
1310
- background-color: color-mix(in oklab, var(--sg-primary) 90%, transparent);
1310
+ background-color: color-mix(in oklab, hsl(var(--sg-primary)) 90%, transparent);
1311
1311
  }
1312
1312
  }
1313
1313
  }
@@ -1317,9 +1317,9 @@
1317
1317
  a& {
1318
1318
  &:hover {
1319
1319
  @media (hover: hover) {
1320
- background-color: var(--sg-secondary);
1320
+ background-color: hsl(var(--sg-secondary));
1321
1321
  @supports (color: color-mix(in lab, red, red)) {
1322
- background-color: color-mix(in oklab, var(--sg-secondary) 90%, transparent);
1322
+ background-color: color-mix(in oklab, hsl(var(--sg-secondary)) 90%, transparent);
1323
1323
  }
1324
1324
  }
1325
1325
  }
@@ -1411,8 +1411,8 @@
1411
1411
  }
1412
1412
  }
1413
1413
  body {
1414
- background-color: var(--sg-color-background);
1415
- color: var(--sg-color-foreground);
1414
+ background-color: hsl(var(--sg-color-background));
1415
+ color: hsl(var(--sg-color-foreground));
1416
1416
  }
1417
1417
  }
1418
1418
  @layer utilities {
@@ -1420,9 +1420,9 @@
1420
1420
  background-image:
1421
1421
  linear-gradient(
1422
1422
  90deg,
1423
- var(--sg-gradient-1) 0%,
1424
- var(--sg-gradient-2) 50%,
1425
- var(--sg-primary) 100%);
1423
+ hsl(var(--sg-gradient-1)) 0%,
1424
+ hsl(var(--sg-gradient-2)) 50%,
1425
+ hsl(var(--sg-primary)) 100%);
1426
1426
  -webkit-background-clip: text;
1427
1427
  background-clip: text;
1428
1428
  color: transparent;
@@ -1524,36 +1524,36 @@
1524
1524
 
1525
1525
  /* src/css/variables.css */
1526
1526
  :root {
1527
- --sg-black: hsl(0 0% 15%);
1528
- --sg-white: hsl(30 20% 98%);
1527
+ --sg-black: 0 0% 15%;
1528
+ --sg-white: 30 20% 98%;
1529
1529
  --sg-pink: 330 90% 65%;
1530
- --sg-gray-light: hsl(240 5% 96%);
1531
- --sg-gray: hsl(240 4% 46%);
1532
- --sg-gray-dark: hsl(240 6% 10%);
1533
- --sg-blue-light: hsl(212 95% 95%);
1534
- --sg-blue: hsl(212 95% 53%);
1535
- --sg-blue-dark: hsl(212 95% 33%);
1536
- --sg-blue-foreground: hsl(0 0% 100%);
1537
- --sg-green-light: hsl(142 76% 95%);
1538
- --sg-green: hsl(142 76% 42%);
1539
- --sg-green-dark: hsl(142 76% 22%);
1540
- --sg-green-foreground: hsl(0 0% 100%);
1541
- --sg-orange-light: hsl(24 95% 95%);
1542
- --sg-orange: hsl(24 95% 53%);
1543
- --sg-orange-dark: hsl(24 95% 33%);
1544
- --sg-orange-foreground: hsl(0 0% 100%);
1545
- --sg-red-light: hsl(0 72% 95%);
1546
- --sg-red: hsl(0 72% 51%);
1547
- --sg-red-dark: hsl(0 72% 31%);
1548
- --sg-red-foreground: hsl(0 0% 100%);
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
1549
  --sg-primary-light: 220 90% 70%;
1550
1550
  --sg-primary: 220 90% 50%;
1551
1551
  --sg-primary-dark: 220 90% 30%;
1552
1552
  --sg-primary-foreground: 0 0% 100%;
1553
- --sg-secondary-light: hsl(30 90% 70%);
1554
- --sg-secondary: hsl(30 90% 50%);
1555
- --sg-secondary-dark: hsl(30 90% 30%);
1556
- --sg-secondary-foreground: hsl(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%;
1557
1557
  --sg-spacing-1: 0.25rem;
1558
1558
  --sg-spacing-2: 0.5rem;
1559
1559
  --sg-spacing-3: 0.75rem;