starlight-theme-celestia 0.2.4 → 0.2.5
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/lib/tailwind.gen.css +157 -290
- package/package.json +9 -5
- package/src/shiki-config.test.ts +22 -0
- package/src/shiki-config.ts +51 -13
package/lib/tailwind.gen.css
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
/*! tailwindcss v4.3.
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer theme, base, components, utilities;
|
|
4
4
|
@layer theme {
|
|
5
5
|
:root, :host {
|
|
6
|
-
--font-sans:
|
|
7
|
-
"
|
|
6
|
+
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
|
|
7
|
+
"Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
|
8
|
+
"Segoe UI Symbol", "Noto Color Emoji";
|
|
8
9
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
9
10
|
"Courier New", monospace;
|
|
10
11
|
--color-red-100: oklch(93.6% 0.032 17.717);
|
|
@@ -77,7 +78,7 @@
|
|
|
77
78
|
line-height: 1.5;
|
|
78
79
|
-webkit-text-size-adjust: 100%;
|
|
79
80
|
tab-size: 4;
|
|
80
|
-
font-family: var(--default-font-family,
|
|
81
|
+
font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
81
82
|
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
82
83
|
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
83
84
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -129,7 +130,7 @@
|
|
|
129
130
|
border-color: inherit;
|
|
130
131
|
border-collapse: collapse;
|
|
131
132
|
}
|
|
132
|
-
:-moz-focusring {
|
|
133
|
+
:-moz-focusring:where(:not(iframe)) {
|
|
133
134
|
outline: auto;
|
|
134
135
|
}
|
|
135
136
|
progress {
|
|
@@ -242,7 +243,7 @@
|
|
|
242
243
|
position: relative;
|
|
243
244
|
}
|
|
244
245
|
.inset-0 {
|
|
245
|
-
inset:
|
|
246
|
+
inset: 0px;
|
|
246
247
|
}
|
|
247
248
|
.top-\(--sl-nav-height\) {
|
|
248
249
|
top: var(--sl-nav-height);
|
|
@@ -254,10 +255,10 @@
|
|
|
254
255
|
right: calc(var(--spacing) * 2);
|
|
255
256
|
}
|
|
256
257
|
.bottom-0 {
|
|
257
|
-
bottom:
|
|
258
|
+
bottom: 0px;
|
|
258
259
|
}
|
|
259
260
|
.left-0 {
|
|
260
|
-
left:
|
|
261
|
+
left: 0px;
|
|
261
262
|
}
|
|
262
263
|
.z-\(--sl-z-index-menu\) {
|
|
263
264
|
z-index: var(--sl-z-index-menu);
|
|
@@ -272,7 +273,7 @@
|
|
|
272
273
|
margin: calc(var(--spacing) * -3);
|
|
273
274
|
}
|
|
274
275
|
.m-0 {
|
|
275
|
-
margin:
|
|
276
|
+
margin: 0px;
|
|
276
277
|
}
|
|
277
278
|
.me-2 {
|
|
278
279
|
margin-inline-end: calc(var(--spacing) * 2);
|
|
@@ -339,7 +340,7 @@
|
|
|
339
340
|
width: 100%;
|
|
340
341
|
}
|
|
341
342
|
.min-w-0 {
|
|
342
|
-
min-width:
|
|
343
|
+
min-width: 0px;
|
|
343
344
|
}
|
|
344
345
|
.min-w-5 {
|
|
345
346
|
min-width: calc(var(--spacing) * 5);
|
|
@@ -464,7 +465,7 @@
|
|
|
464
465
|
background-color: var(--color-white);
|
|
465
466
|
}
|
|
466
467
|
.p-1 {
|
|
467
|
-
padding:
|
|
468
|
+
padding: var(--spacing);
|
|
468
469
|
}
|
|
469
470
|
.p-1\.5 {
|
|
470
471
|
padding: calc(var(--spacing) * 1.5);
|
|
@@ -482,7 +483,7 @@
|
|
|
482
483
|
padding-inline: var(--sl-sidebar-pad-x);
|
|
483
484
|
}
|
|
484
485
|
.px-1 {
|
|
485
|
-
padding-inline:
|
|
486
|
+
padding-inline: var(--spacing);
|
|
486
487
|
}
|
|
487
488
|
.px-4 {
|
|
488
489
|
padding-inline: calc(var(--spacing) * 4);
|
|
@@ -506,7 +507,7 @@
|
|
|
506
507
|
padding-block: calc(var(--spacing) * 4);
|
|
507
508
|
}
|
|
508
509
|
.pt-0 {
|
|
509
|
-
padding-top:
|
|
510
|
+
padding-top: 0px;
|
|
510
511
|
}
|
|
511
512
|
.pr-4 {
|
|
512
513
|
padding-right: calc(var(--spacing) * 4);
|
|
@@ -592,381 +593,247 @@
|
|
|
592
593
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
593
594
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
594
595
|
}
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
600
|
-
}
|
|
596
|
+
@media (hover: hover) {
|
|
597
|
+
.group-hover\:-translate-x-1:is(:where(.group):hover *) {
|
|
598
|
+
--tw-translate-x: calc(var(--spacing) * -1);
|
|
599
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
601
600
|
}
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
@media (hover: hover) {
|
|
606
|
-
--tw-translate-x: calc(var(--spacing) * 1);
|
|
607
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
608
|
-
}
|
|
601
|
+
.group-hover\:translate-x-1:is(:where(.group):hover *) {
|
|
602
|
+
--tw-translate-x: var(--spacing);
|
|
603
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
609
604
|
}
|
|
610
605
|
}
|
|
611
|
-
.before\:absolute {
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
position: absolute;
|
|
615
|
-
}
|
|
606
|
+
.before\:absolute::before {
|
|
607
|
+
content: var(--tw-content);
|
|
608
|
+
position: absolute;
|
|
616
609
|
}
|
|
617
|
-
.before\:inset-0 {
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
inset: calc(var(--spacing) * 0);
|
|
621
|
-
}
|
|
610
|
+
.before\:inset-0::before {
|
|
611
|
+
content: var(--tw-content);
|
|
612
|
+
inset: 0px;
|
|
622
613
|
}
|
|
623
|
-
.before\:content-\[\'\'\] {
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
content: var(--tw-content);
|
|
627
|
-
}
|
|
614
|
+
.before\:content-\[\'\'\]::before {
|
|
615
|
+
--tw-content: '';
|
|
616
|
+
content: var(--tw-content);
|
|
628
617
|
}
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
background-color: var(--color-gray-50);
|
|
633
|
-
}
|
|
618
|
+
@media (hover: hover) {
|
|
619
|
+
.hover\:bg-gray-50:hover {
|
|
620
|
+
background-color: var(--color-gray-50);
|
|
634
621
|
}
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
&:hover {
|
|
638
|
-
@media (hover: hover) {
|
|
639
|
-
background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
|
|
640
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
641
|
-
background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
|
|
642
|
-
}
|
|
643
|
-
}
|
|
622
|
+
.hover\:bg-gray-200\/50:hover {
|
|
623
|
+
background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
|
|
644
624
|
}
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
@media (hover: hover) {
|
|
649
|
-
background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 30%, transparent);
|
|
650
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
651
|
-
background-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
|
|
652
|
-
}
|
|
625
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
626
|
+
.hover\:bg-gray-200\/50:hover {
|
|
627
|
+
background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
|
|
653
628
|
}
|
|
654
629
|
}
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
&:hover {
|
|
658
|
-
@media (hover: hover) {
|
|
659
|
-
background-color: var(--color-gray-800);
|
|
660
|
-
}
|
|
630
|
+
.hover\:bg-gray-400\/30:hover {
|
|
631
|
+
background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 30%, transparent);
|
|
661
632
|
}
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
@media (hover: hover) {
|
|
666
|
-
color: var(--sl-color-white);
|
|
633
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
634
|
+
.hover\:bg-gray-400\/30:hover {
|
|
635
|
+
background-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
|
|
667
636
|
}
|
|
668
637
|
}
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
&:hover {
|
|
672
|
-
@media (hover: hover) {
|
|
673
|
-
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
674
|
-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
675
|
-
}
|
|
638
|
+
.hover\:bg-gray-800:hover {
|
|
639
|
+
background-color: var(--color-gray-800);
|
|
676
640
|
}
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
&:focus-visible {
|
|
680
|
-
outline-offset: 0px;
|
|
641
|
+
.hover\:text-\(--sl-color-white\):hover {
|
|
642
|
+
color: var(--sl-color-white);
|
|
681
643
|
}
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
outline-offset: 1px;
|
|
644
|
+
.hover\:shadow-md:hover {
|
|
645
|
+
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
646
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
686
647
|
}
|
|
687
648
|
}
|
|
688
|
-
.
|
|
689
|
-
|
|
690
|
-
--tw-scale-x: 90%;
|
|
691
|
-
--tw-scale-y: 90%;
|
|
692
|
-
--tw-scale-z: 90%;
|
|
693
|
-
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
694
|
-
}
|
|
649
|
+
.focus-visible\:outline-offset-0:focus-visible {
|
|
650
|
+
outline-offset: 0px;
|
|
695
651
|
}
|
|
696
|
-
.
|
|
697
|
-
|
|
698
|
-
--tw-scale-x: 97%;
|
|
699
|
-
--tw-scale-y: 97%;
|
|
700
|
-
--tw-scale-z: 97%;
|
|
701
|
-
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
702
|
-
}
|
|
652
|
+
.focus-visible\:outline-offset-1:focus-visible {
|
|
653
|
+
outline-offset: 1px;
|
|
703
654
|
}
|
|
704
|
-
.active\:scale-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
655
|
+
.active\:scale-90:active {
|
|
656
|
+
--tw-scale-x: 90%;
|
|
657
|
+
--tw-scale-y: 90%;
|
|
658
|
+
--tw-scale-z: 90%;
|
|
659
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
660
|
+
}
|
|
661
|
+
.active\:scale-97:active {
|
|
662
|
+
--tw-scale-x: 97%;
|
|
663
|
+
--tw-scale-y: 97%;
|
|
664
|
+
--tw-scale-z: 97%;
|
|
665
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
711
666
|
}
|
|
712
|
-
.
|
|
713
|
-
|
|
667
|
+
.active\:scale-99:active {
|
|
668
|
+
--tw-scale-x: 99%;
|
|
669
|
+
--tw-scale-y: 99%;
|
|
670
|
+
--tw-scale-z: 99%;
|
|
671
|
+
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
672
|
+
}
|
|
673
|
+
@media (width < 50rem) {
|
|
674
|
+
.max-md\:w-full {
|
|
714
675
|
width: 100%;
|
|
715
676
|
}
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
@media (width < 50rem) {
|
|
719
|
-
:is(& *) {
|
|
720
|
-
display: none;
|
|
721
|
-
}
|
|
677
|
+
:is(.max-md\:\*\*\:hidden *) {
|
|
678
|
+
display: none;
|
|
722
679
|
}
|
|
723
680
|
}
|
|
724
|
-
|
|
725
|
-
|
|
681
|
+
@media (width >= 50rem) {
|
|
682
|
+
.md\:visible {
|
|
726
683
|
visibility: visible;
|
|
727
684
|
}
|
|
728
|
-
|
|
729
|
-
.md\:flex {
|
|
730
|
-
@media (width >= 50rem) {
|
|
685
|
+
.md\:flex {
|
|
731
686
|
display: flex;
|
|
732
687
|
}
|
|
733
|
-
|
|
734
|
-
.md\:hidden {
|
|
735
|
-
@media (width >= 50rem) {
|
|
688
|
+
.md\:hidden {
|
|
736
689
|
display: none;
|
|
737
690
|
}
|
|
738
|
-
|
|
739
|
-
.md\:h-9 {
|
|
740
|
-
@media (width >= 50rem) {
|
|
691
|
+
.md\:h-9 {
|
|
741
692
|
height: calc(var(--spacing) * 9);
|
|
742
693
|
}
|
|
743
|
-
|
|
744
|
-
.md\:w-\(--sl-sidebar-width\) {
|
|
745
|
-
@media (width >= 50rem) {
|
|
694
|
+
.md\:w-\(--sl-sidebar-width\) {
|
|
746
695
|
width: var(--sl-sidebar-width);
|
|
747
696
|
}
|
|
748
|
-
|
|
749
|
-
.md\:w-full {
|
|
750
|
-
@media (width >= 50rem) {
|
|
697
|
+
.md\:w-full {
|
|
751
698
|
width: 100%;
|
|
752
699
|
}
|
|
753
|
-
|
|
754
|
-
.md\:max-w-88 {
|
|
755
|
-
@media (width >= 50rem) {
|
|
700
|
+
.md\:max-w-88 {
|
|
756
701
|
max-width: calc(var(--spacing) * 88);
|
|
757
702
|
}
|
|
758
|
-
|
|
759
|
-
.md\:rounded-md {
|
|
760
|
-
@media (width >= 50rem) {
|
|
703
|
+
.md\:rounded-md {
|
|
761
704
|
border-radius: var(--radius-md);
|
|
762
705
|
}
|
|
763
|
-
|
|
764
|
-
.md\:border {
|
|
765
|
-
@media (width >= 50rem) {
|
|
706
|
+
.md\:border {
|
|
766
707
|
border-style: var(--tw-border-style);
|
|
767
708
|
border-width: 1px;
|
|
768
709
|
}
|
|
769
|
-
|
|
770
|
-
.md\:border-solid {
|
|
771
|
-
@media (width >= 50rem) {
|
|
710
|
+
.md\:border-solid {
|
|
772
711
|
--tw-border-style: solid;
|
|
773
712
|
border-style: solid;
|
|
774
713
|
}
|
|
775
|
-
|
|
776
|
-
.md\:border-\(--sl-color-gray-5\) {
|
|
777
|
-
@media (width >= 50rem) {
|
|
714
|
+
.md\:border-\(--sl-color-gray-5\) {
|
|
778
715
|
border-color: var(--sl-color-gray-5);
|
|
779
716
|
}
|
|
780
|
-
|
|
781
|
-
.md\:p-2 {
|
|
782
|
-
@media (width >= 50rem) {
|
|
717
|
+
.md\:p-2 {
|
|
783
718
|
padding: calc(var(--spacing) * 2);
|
|
784
719
|
}
|
|
785
|
-
|
|
786
|
-
.md\:text-lg {
|
|
787
|
-
@media (width >= 50rem) {
|
|
720
|
+
.md\:text-lg {
|
|
788
721
|
font-size: var(--text-lg);
|
|
789
722
|
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
790
723
|
}
|
|
791
|
-
|
|
792
|
-
.md\:text-\(--sl-color-text\) {
|
|
793
|
-
@media (width >= 50rem) {
|
|
724
|
+
.md\:text-\(--sl-color-text\) {
|
|
794
725
|
color: var(--sl-color-text);
|
|
795
726
|
}
|
|
796
|
-
|
|
797
|
-
.md\:transition-colors {
|
|
798
|
-
@media (width >= 50rem) {
|
|
727
|
+
.md\:transition-colors {
|
|
799
728
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
800
729
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
801
730
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
802
731
|
}
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
|
|
811
|
-
}
|
|
732
|
+
@media (hover: hover) {
|
|
733
|
+
.md\:hover\:bg-gray-400\/10:hover {
|
|
734
|
+
background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 10%, transparent);
|
|
735
|
+
}
|
|
736
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
737
|
+
.md\:hover\:bg-gray-400\/10:hover {
|
|
738
|
+
background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
|
|
812
739
|
}
|
|
813
740
|
}
|
|
814
741
|
}
|
|
815
742
|
}
|
|
816
|
-
|
|
817
|
-
|
|
743
|
+
@media (width >= 80rem) {
|
|
744
|
+
.xl\:gap-6 {
|
|
818
745
|
gap: calc(var(--spacing) * 6);
|
|
819
746
|
}
|
|
820
|
-
|
|
821
|
-
.xl\:pl-6 {
|
|
822
|
-
@media (width >= 80rem) {
|
|
747
|
+
.xl\:pl-6 {
|
|
823
748
|
padding-left: calc(var(--spacing) * 6);
|
|
824
749
|
}
|
|
825
750
|
}
|
|
826
|
-
.dark\:bg-gray-100 {
|
|
827
|
-
|
|
828
|
-
background-color: var(--color-gray-100);
|
|
829
|
-
}
|
|
751
|
+
.dark\:bg-gray-100:where([data-theme=dark], [data-theme=dark] *) {
|
|
752
|
+
background-color: var(--color-gray-100);
|
|
830
753
|
}
|
|
831
|
-
.dark\:bg-gray-600\/30 {
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
background-color: color-mix(in oklab, var(--color-gray-600) 30%, transparent);
|
|
836
|
-
}
|
|
754
|
+
.dark\:bg-gray-600\/30:where([data-theme=dark], [data-theme=dark] *) {
|
|
755
|
+
background-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 30%, transparent);
|
|
756
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
757
|
+
background-color: color-mix(in oklab, var(--color-gray-600) 30%, transparent);
|
|
837
758
|
}
|
|
838
759
|
}
|
|
839
|
-
.dark\:bg-gray-800 {
|
|
840
|
-
|
|
841
|
-
background-color: var(--color-gray-800);
|
|
842
|
-
}
|
|
760
|
+
.dark\:bg-gray-800:where([data-theme=dark], [data-theme=dark] *) {
|
|
761
|
+
background-color: var(--color-gray-800);
|
|
843
762
|
}
|
|
844
|
-
.dark\:text-gray-200 {
|
|
845
|
-
|
|
846
|
-
color: var(--color-gray-200);
|
|
847
|
-
}
|
|
763
|
+
.dark\:text-gray-200:where([data-theme=dark], [data-theme=dark] *) {
|
|
764
|
+
color: var(--color-gray-200);
|
|
848
765
|
}
|
|
849
|
-
.dark\:text-gray-900 {
|
|
850
|
-
|
|
851
|
-
color: var(--color-gray-900);
|
|
852
|
-
}
|
|
766
|
+
.dark\:text-gray-900:where([data-theme=dark], [data-theme=dark] *) {
|
|
767
|
+
color: var(--color-gray-900);
|
|
853
768
|
}
|
|
854
|
-
.dark\:text-white {
|
|
855
|
-
|
|
856
|
-
color: var(--color-white);
|
|
857
|
-
}
|
|
769
|
+
.dark\:text-white:where([data-theme=dark], [data-theme=dark] *) {
|
|
770
|
+
color: var(--color-white);
|
|
858
771
|
}
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
@media (hover: hover) {
|
|
863
|
-
background-color: var(--color-gray-300);
|
|
864
|
-
}
|
|
865
|
-
}
|
|
772
|
+
@media (hover: hover) {
|
|
773
|
+
.dark\:hover\:bg-gray-300:where([data-theme=dark], [data-theme=dark] *):hover {
|
|
774
|
+
background-color: var(--color-gray-300);
|
|
866
775
|
}
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
870
|
-
&:hover {
|
|
871
|
-
@media (hover: hover) {
|
|
872
|
-
background-color: var(--color-gray-700);
|
|
873
|
-
}
|
|
874
|
-
}
|
|
776
|
+
.dark\:hover\:bg-gray-700:where([data-theme=dark], [data-theme=dark] *):hover {
|
|
777
|
+
background-color: var(--color-gray-700);
|
|
875
778
|
}
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
881
|
-
background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 50%, transparent);
|
|
882
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
883
|
-
background-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
|
|
884
|
-
}
|
|
885
|
-
}
|
|
779
|
+
.hover\:dark\:bg-gray-500\/50:hover:where([data-theme=dark], [data-theme=dark] *) {
|
|
780
|
+
background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 50%, transparent);
|
|
781
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
782
|
+
background-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
|
|
886
783
|
}
|
|
887
784
|
}
|
|
888
785
|
}
|
|
889
|
-
|
|
890
|
-
|
|
786
|
+
@media print {
|
|
787
|
+
.print\:hidden {
|
|
891
788
|
display: none;
|
|
892
789
|
}
|
|
893
790
|
}
|
|
894
|
-
.\[\&_celestia-code-copy-button\]\:opacity-0 {
|
|
895
|
-
|
|
896
|
-
opacity: 0%;
|
|
897
|
-
}
|
|
791
|
+
.\[\&_celestia-code-copy-button\]\:opacity-0 celestia-code-copy-button {
|
|
792
|
+
opacity: 0%;
|
|
898
793
|
}
|
|
899
|
-
.\[\&_nav\]\:backdrop-blur {
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
904
|
-
}
|
|
794
|
+
.\[\&_nav\]\:backdrop-blur nav {
|
|
795
|
+
--tw-backdrop-blur: blur(8px);
|
|
796
|
+
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
797
|
+
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
|
905
798
|
}
|
|
906
|
-
.\[\&_pre\]\:relative {
|
|
907
|
-
|
|
908
|
-
position: relative;
|
|
909
|
-
}
|
|
799
|
+
.\[\&_pre\]\:relative pre {
|
|
800
|
+
position: relative;
|
|
910
801
|
}
|
|
911
|
-
.\[\&_summary\]\:border-b-\(--sl-color-hairline\) {
|
|
912
|
-
|
|
913
|
-
border-bottom-color: var(--sl-color-hairline);
|
|
914
|
-
}
|
|
802
|
+
.\[\&_summary\]\:border-b-\(--sl-color-hairline\) summary {
|
|
803
|
+
border-bottom-color: var(--sl-color-hairline);
|
|
915
804
|
}
|
|
916
|
-
.\[\&_svg\]\:h-full {
|
|
917
|
-
|
|
918
|
-
height: 100%;
|
|
919
|
-
}
|
|
805
|
+
.\[\&_svg\]\:h-full svg {
|
|
806
|
+
height: 100%;
|
|
920
807
|
}
|
|
921
|
-
.\[\&_svg\]\:w-full {
|
|
922
|
-
|
|
923
|
-
width: 100%;
|
|
924
|
-
}
|
|
808
|
+
.\[\&_svg\]\:w-full svg {
|
|
809
|
+
width: 100%;
|
|
925
810
|
}
|
|
926
|
-
.\[\&\:hover_celestia-code-copy-button\]\:opacity-100 {
|
|
927
|
-
|
|
928
|
-
opacity: 100%;
|
|
929
|
-
}
|
|
811
|
+
.\[\&\:hover_celestia-code-copy-button\]\:opacity-100:hover celestia-code-copy-button {
|
|
812
|
+
opacity: 100%;
|
|
930
813
|
}
|
|
931
|
-
.\[\[rel\=\'next\'\]\]\:flex-row {
|
|
932
|
-
|
|
933
|
-
flex-direction: row;
|
|
934
|
-
}
|
|
814
|
+
.\[\[rel\=\'next\'\]\]\:flex-row:is([rel='next']) {
|
|
815
|
+
flex-direction: row;
|
|
935
816
|
}
|
|
936
|
-
.\[\[rel\=\'prev\'\]\]\:flex-row-reverse {
|
|
937
|
-
|
|
938
|
-
flex-direction: row-reverse;
|
|
939
|
-
}
|
|
817
|
+
.\[\[rel\=\'prev\'\]\]\:flex-row-reverse:is([rel='prev']) {
|
|
818
|
+
flex-direction: row-reverse;
|
|
940
819
|
}
|
|
941
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:block {
|
|
942
|
-
|
|
943
|
-
display: block;
|
|
944
|
-
}
|
|
820
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:block {
|
|
821
|
+
display: block;
|
|
945
822
|
}
|
|
946
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:hidden {
|
|
947
|
-
|
|
948
|
-
display: none;
|
|
949
|
-
}
|
|
823
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:hidden {
|
|
824
|
+
display: none;
|
|
950
825
|
}
|
|
951
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:rotate-90 {
|
|
952
|
-
|
|
953
|
-
rotate: 90deg;
|
|
954
|
-
}
|
|
826
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:rotate-90 {
|
|
827
|
+
rotate: 90deg;
|
|
955
828
|
}
|
|
956
|
-
|
|
957
|
-
body[data-mobile-menu-expanded]
|
|
958
|
-
|
|
959
|
-
visibility: visible;
|
|
960
|
-
}
|
|
829
|
+
@media (width < 50rem) {
|
|
830
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:max-md\:visible {
|
|
831
|
+
visibility: visible;
|
|
961
832
|
}
|
|
962
833
|
}
|
|
963
|
-
.\[div\[data-celestia-code-container\]\[data-celestia-code-title\]_\&\]\:block {
|
|
964
|
-
|
|
965
|
-
display: block;
|
|
966
|
-
}
|
|
834
|
+
div[data-celestia-code-container][data-celestia-code-title] .\[div\[data-celestia-code-container\]\[data-celestia-code-title\]_\&\]\:block {
|
|
835
|
+
display: block;
|
|
967
836
|
}
|
|
968
|
-
}
|
|
969
|
-
@layer utilities {
|
|
970
837
|
:root {
|
|
971
838
|
--sl-font-mono: var(--font-mono);
|
|
972
839
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "starlight-theme-celestia",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.2.
|
|
4
|
+
"version": "0.2.5",
|
|
5
5
|
"description": "A clean, modern theme for Astro Starlight",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -42,19 +42,23 @@
|
|
|
42
42
|
"starlight-versions": "^0.9.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"@astrojs/starlight": "*"
|
|
45
|
+
"@astrojs/starlight": "*",
|
|
46
|
+
"typescript": "^5.5.0 || ^6.0.0"
|
|
46
47
|
},
|
|
47
48
|
"peerDependenciesMeta": {
|
|
48
49
|
"@astrojs/starlight": {
|
|
49
50
|
"optional": true
|
|
51
|
+
},
|
|
52
|
+
"typescript": {
|
|
53
|
+
"optional": true
|
|
50
54
|
}
|
|
51
55
|
},
|
|
52
56
|
"devDependencies": {
|
|
53
|
-
"@astrojs/starlight": "^0.
|
|
57
|
+
"@astrojs/starlight": "^0.41.0",
|
|
54
58
|
"@tailwindcss/cli": "^4.2.2",
|
|
55
59
|
"@tailwindcss/vite": "^4.2.2",
|
|
56
|
-
"@types/node": "^
|
|
57
|
-
"astro": "^
|
|
60
|
+
"@types/node": "^26.0.0",
|
|
61
|
+
"astro": "^7.0.2",
|
|
58
62
|
"tailwindcss": "^4.2.2",
|
|
59
63
|
"typescript": "^6.0.0"
|
|
60
64
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { expect, test } from "bun:test";
|
|
2
|
+
|
|
3
|
+
import { createShikiConfig, isTwoslashCompatibleTsModule } from "./shiki-config";
|
|
4
|
+
|
|
5
|
+
test("a TypeScript module exposing the Node system API is usable for Twoslash", () => {
|
|
6
|
+
expect(isTwoslashCompatibleTsModule({ sys: { readFile: () => undefined } })).toBe(true);
|
|
7
|
+
});
|
|
8
|
+
|
|
9
|
+
test("a missing or incompatible TypeScript module is rejected", () => {
|
|
10
|
+
expect(isTwoslashCompatibleTsModule(undefined)).toBe(false);
|
|
11
|
+
expect(isTwoslashCompatibleTsModule(null)).toBe(false);
|
|
12
|
+
// TypeScript 7 ships a native compiler without the `ts.sys` API.
|
|
13
|
+
expect(isTwoslashCompatibleTsModule({ version: "7.0.2" })).toBe(false);
|
|
14
|
+
expect(isTwoslashCompatibleTsModule({ sys: {} })).toBe(false);
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
test("the Twoslash transformer is only added when requested", () => {
|
|
18
|
+
const withTwoslash = createShikiConfig({ twoslash: true }).transformers ?? [];
|
|
19
|
+
const withoutTwoslash = createShikiConfig({ twoslash: false }).transformers ?? [];
|
|
20
|
+
|
|
21
|
+
expect(withTwoslash.length).toBe(withoutTwoslash.length + 1);
|
|
22
|
+
});
|
package/src/shiki-config.ts
CHANGED
|
@@ -9,10 +9,13 @@ import {
|
|
|
9
9
|
import { transformerTwoslash } from "@shikijs/twoslash";
|
|
10
10
|
import type { ShikiTransformer } from "@shikijs/types";
|
|
11
11
|
import type { ShikiConfig } from "astro";
|
|
12
|
+
import { createRequire } from "node:module";
|
|
12
13
|
import { createRenderer } from "shiki-twoslash-renderer";
|
|
13
14
|
|
|
14
15
|
import { transformerContainer } from "./shiki-transformer-container";
|
|
15
16
|
|
|
17
|
+
const require = createRequire(import.meta.url);
|
|
18
|
+
|
|
16
19
|
export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
|
|
17
20
|
const transformers: ShikiTransformer[] = [
|
|
18
21
|
transformerMetaHighlight(),
|
|
@@ -23,19 +26,7 @@ export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
|
|
|
23
26
|
transformerRemoveNotationEscape(),
|
|
24
27
|
|
|
25
28
|
transformerContainer(),
|
|
26
|
-
...(options.twoslash
|
|
27
|
-
? [
|
|
28
|
-
transformerTwoslash({
|
|
29
|
-
renderer: createRenderer(),
|
|
30
|
-
explicitTrigger: true,
|
|
31
|
-
twoslashOptions: {
|
|
32
|
-
compilerOptions: {
|
|
33
|
-
noUncheckedSideEffectImports: false,
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
}),
|
|
37
|
-
]
|
|
38
|
-
: []),
|
|
29
|
+
...(options.twoslash ? createTwoslashTransformers() : []),
|
|
39
30
|
];
|
|
40
31
|
|
|
41
32
|
return {
|
|
@@ -47,3 +38,50 @@ export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
|
|
|
47
38
|
transformers: transformers,
|
|
48
39
|
};
|
|
49
40
|
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Twoslash needs the Node API surface of TypeScript, `ts.sys` in particular.
|
|
44
|
+
* Projects that do not pin `typescript` themselves can end up with the native
|
|
45
|
+
* TypeScript 7 package, which does not expose that API, so probe the resolved
|
|
46
|
+
* module before handing it to Twoslash.
|
|
47
|
+
*
|
|
48
|
+
* @internal
|
|
49
|
+
*/
|
|
50
|
+
export function isTwoslashCompatibleTsModule(tsModule: unknown): boolean {
|
|
51
|
+
const sys = (tsModule as { sys?: { readFile?: unknown } } | null | undefined)?.sys;
|
|
52
|
+
|
|
53
|
+
return typeof sys?.readFile === "function";
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
type TwoslashOptions = NonNullable<NonNullable<Parameters<typeof transformerTwoslash>[0]>["twoslashOptions"]>;
|
|
57
|
+
|
|
58
|
+
function createTwoslashTransformers(): ShikiTransformer[] {
|
|
59
|
+
let tsModule: unknown;
|
|
60
|
+
|
|
61
|
+
try {
|
|
62
|
+
tsModule = require("typescript");
|
|
63
|
+
} catch {
|
|
64
|
+
tsModule = undefined;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
if (!isTwoslashCompatibleTsModule(tsModule)) {
|
|
68
|
+
console.warn(
|
|
69
|
+
"[starlight-theme-celestia] Twoslash code blocks are disabled because no compatible `typescript` installation was found. Add `typescript` (^5.5.0 || ^6.0.0) to your project to enable them.",
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
return [];
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return [
|
|
76
|
+
transformerTwoslash({
|
|
77
|
+
renderer: createRenderer(),
|
|
78
|
+
explicitTrigger: true,
|
|
79
|
+
twoslashOptions: {
|
|
80
|
+
tsModule: tsModule as TwoslashOptions["tsModule"],
|
|
81
|
+
compilerOptions: {
|
|
82
|
+
noUncheckedSideEffectImports: false,
|
|
83
|
+
},
|
|
84
|
+
},
|
|
85
|
+
}),
|
|
86
|
+
];
|
|
87
|
+
}
|