starlight-theme-celestia 0.2.3 → 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 +161 -300
- package/package.json +12 -7
- package/src/index.test.ts +11 -0
- package/src/index.ts +1 -1
- package/src/shiki-config.test.ts +22 -0
- package/src/shiki-config.ts +51 -13
- package/src/shiki-transformer-container.ts +25 -0
package/lib/tailwind.gen.css
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
/*! tailwindcss v4.
|
|
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,13 +243,7 @@
|
|
|
242
243
|
position: relative;
|
|
243
244
|
}
|
|
244
245
|
.inset-0 {
|
|
245
|
-
inset:
|
|
246
|
-
}
|
|
247
|
-
.start {
|
|
248
|
-
inset-inline-start: var(--spacing);
|
|
249
|
-
}
|
|
250
|
-
.end {
|
|
251
|
-
inset-inline-end: var(--spacing);
|
|
246
|
+
inset: 0px;
|
|
252
247
|
}
|
|
253
248
|
.top-\(--sl-nav-height\) {
|
|
254
249
|
top: var(--sl-nav-height);
|
|
@@ -260,10 +255,10 @@
|
|
|
260
255
|
right: calc(var(--spacing) * 2);
|
|
261
256
|
}
|
|
262
257
|
.bottom-0 {
|
|
263
|
-
bottom:
|
|
258
|
+
bottom: 0px;
|
|
264
259
|
}
|
|
265
260
|
.left-0 {
|
|
266
|
-
left:
|
|
261
|
+
left: 0px;
|
|
267
262
|
}
|
|
268
263
|
.z-\(--sl-z-index-menu\) {
|
|
269
264
|
z-index: var(--sl-z-index-menu);
|
|
@@ -278,7 +273,7 @@
|
|
|
278
273
|
margin: calc(var(--spacing) * -3);
|
|
279
274
|
}
|
|
280
275
|
.m-0 {
|
|
281
|
-
margin:
|
|
276
|
+
margin: 0px;
|
|
282
277
|
}
|
|
283
278
|
.me-2 {
|
|
284
279
|
margin-inline-end: calc(var(--spacing) * 2);
|
|
@@ -345,7 +340,7 @@
|
|
|
345
340
|
width: 100%;
|
|
346
341
|
}
|
|
347
342
|
.min-w-0 {
|
|
348
|
-
min-width:
|
|
343
|
+
min-width: 0px;
|
|
349
344
|
}
|
|
350
345
|
.min-w-5 {
|
|
351
346
|
min-width: calc(var(--spacing) * 5);
|
|
@@ -365,6 +360,10 @@
|
|
|
365
360
|
.transform {
|
|
366
361
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
367
362
|
}
|
|
363
|
+
.celestia-scroll-container {
|
|
364
|
+
scrollbar-width: thin;
|
|
365
|
+
scrollbar-color: var(--sl-color-gray-5) transparent;
|
|
366
|
+
}
|
|
368
367
|
.flex-col {
|
|
369
368
|
flex-direction: column;
|
|
370
369
|
}
|
|
@@ -466,7 +465,7 @@
|
|
|
466
465
|
background-color: var(--color-white);
|
|
467
466
|
}
|
|
468
467
|
.p-1 {
|
|
469
|
-
padding:
|
|
468
|
+
padding: var(--spacing);
|
|
470
469
|
}
|
|
471
470
|
.p-1\.5 {
|
|
472
471
|
padding: calc(var(--spacing) * 1.5);
|
|
@@ -484,7 +483,7 @@
|
|
|
484
483
|
padding-inline: var(--sl-sidebar-pad-x);
|
|
485
484
|
}
|
|
486
485
|
.px-1 {
|
|
487
|
-
padding-inline:
|
|
486
|
+
padding-inline: var(--spacing);
|
|
488
487
|
}
|
|
489
488
|
.px-4 {
|
|
490
489
|
padding-inline: calc(var(--spacing) * 4);
|
|
@@ -508,7 +507,7 @@
|
|
|
508
507
|
padding-block: calc(var(--spacing) * 4);
|
|
509
508
|
}
|
|
510
509
|
.pt-0 {
|
|
511
|
-
padding-top:
|
|
510
|
+
padding-top: 0px;
|
|
512
511
|
}
|
|
513
512
|
.pr-4 {
|
|
514
513
|
padding-right: calc(var(--spacing) * 4);
|
|
@@ -594,385 +593,247 @@
|
|
|
594
593
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
595
594
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
596
595
|
}
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
.group-hover\:-translate-x-1 {
|
|
602
|
-
&:is(:where(.group):hover *) {
|
|
603
|
-
@media (hover: hover) {
|
|
604
|
-
--tw-translate-x: calc(var(--spacing) * -1);
|
|
605
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
606
|
-
}
|
|
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);
|
|
607
600
|
}
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
@media (hover: hover) {
|
|
612
|
-
--tw-translate-x: calc(var(--spacing) * 1);
|
|
613
|
-
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
614
|
-
}
|
|
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);
|
|
615
604
|
}
|
|
616
605
|
}
|
|
617
|
-
.before\:absolute {
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
position: absolute;
|
|
621
|
-
}
|
|
606
|
+
.before\:absolute::before {
|
|
607
|
+
content: var(--tw-content);
|
|
608
|
+
position: absolute;
|
|
622
609
|
}
|
|
623
|
-
.before\:inset-0 {
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
inset: calc(var(--spacing) * 0);
|
|
627
|
-
}
|
|
610
|
+
.before\:inset-0::before {
|
|
611
|
+
content: var(--tw-content);
|
|
612
|
+
inset: 0px;
|
|
628
613
|
}
|
|
629
|
-
.before\:content-\[\'\'\] {
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
content: var(--tw-content);
|
|
633
|
-
}
|
|
614
|
+
.before\:content-\[\'\'\]::before {
|
|
615
|
+
--tw-content: '';
|
|
616
|
+
content: var(--tw-content);
|
|
634
617
|
}
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
background-color: var(--color-gray-50);
|
|
639
|
-
}
|
|
618
|
+
@media (hover: hover) {
|
|
619
|
+
.hover\:bg-gray-50:hover {
|
|
620
|
+
background-color: var(--color-gray-50);
|
|
640
621
|
}
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
&:hover {
|
|
644
|
-
@media (hover: hover) {
|
|
645
|
-
background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
|
|
646
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
647
|
-
background-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
|
|
648
|
-
}
|
|
649
|
-
}
|
|
622
|
+
.hover\:bg-gray-200\/50:hover {
|
|
623
|
+
background-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 50%, transparent);
|
|
650
624
|
}
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
@media (hover: hover) {
|
|
655
|
-
background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 30%, transparent);
|
|
656
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
657
|
-
background-color: color-mix(in oklab, var(--color-gray-400) 30%, transparent);
|
|
658
|
-
}
|
|
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);
|
|
659
628
|
}
|
|
660
629
|
}
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
&:hover {
|
|
664
|
-
@media (hover: hover) {
|
|
665
|
-
background-color: var(--color-gray-800);
|
|
666
|
-
}
|
|
630
|
+
.hover\:bg-gray-400\/30:hover {
|
|
631
|
+
background-color: color-mix(in srgb, oklch(70.7% 0.022 261.325) 30%, transparent);
|
|
667
632
|
}
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
@media (hover: hover) {
|
|
672
|
-
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);
|
|
673
636
|
}
|
|
674
637
|
}
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
&:hover {
|
|
678
|
-
@media (hover: hover) {
|
|
679
|
-
--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));
|
|
680
|
-
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
681
|
-
}
|
|
638
|
+
.hover\:bg-gray-800:hover {
|
|
639
|
+
background-color: var(--color-gray-800);
|
|
682
640
|
}
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
&:focus-visible {
|
|
686
|
-
outline-offset: 0px;
|
|
641
|
+
.hover\:text-\(--sl-color-white\):hover {
|
|
642
|
+
color: var(--sl-color-white);
|
|
687
643
|
}
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
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);
|
|
692
647
|
}
|
|
693
648
|
}
|
|
694
|
-
.
|
|
695
|
-
|
|
696
|
-
--tw-scale-x: 90%;
|
|
697
|
-
--tw-scale-y: 90%;
|
|
698
|
-
--tw-scale-z: 90%;
|
|
699
|
-
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
700
|
-
}
|
|
649
|
+
.focus-visible\:outline-offset-0:focus-visible {
|
|
650
|
+
outline-offset: 0px;
|
|
701
651
|
}
|
|
702
|
-
.
|
|
703
|
-
|
|
704
|
-
--tw-scale-x: 97%;
|
|
705
|
-
--tw-scale-y: 97%;
|
|
706
|
-
--tw-scale-z: 97%;
|
|
707
|
-
scale: var(--tw-scale-x) var(--tw-scale-y);
|
|
708
|
-
}
|
|
652
|
+
.focus-visible\:outline-offset-1:focus-visible {
|
|
653
|
+
outline-offset: 1px;
|
|
709
654
|
}
|
|
710
|
-
.active\:scale-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
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);
|
|
717
666
|
}
|
|
718
|
-
.
|
|
719
|
-
|
|
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 {
|
|
720
675
|
width: 100%;
|
|
721
676
|
}
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
@media (width < 50rem) {
|
|
725
|
-
:is(& *) {
|
|
726
|
-
display: none;
|
|
727
|
-
}
|
|
677
|
+
:is(.max-md\:\*\*\:hidden *) {
|
|
678
|
+
display: none;
|
|
728
679
|
}
|
|
729
680
|
}
|
|
730
|
-
|
|
731
|
-
|
|
681
|
+
@media (width >= 50rem) {
|
|
682
|
+
.md\:visible {
|
|
732
683
|
visibility: visible;
|
|
733
684
|
}
|
|
734
|
-
|
|
735
|
-
.md\:flex {
|
|
736
|
-
@media (width >= 50rem) {
|
|
685
|
+
.md\:flex {
|
|
737
686
|
display: flex;
|
|
738
687
|
}
|
|
739
|
-
|
|
740
|
-
.md\:hidden {
|
|
741
|
-
@media (width >= 50rem) {
|
|
688
|
+
.md\:hidden {
|
|
742
689
|
display: none;
|
|
743
690
|
}
|
|
744
|
-
|
|
745
|
-
.md\:h-9 {
|
|
746
|
-
@media (width >= 50rem) {
|
|
691
|
+
.md\:h-9 {
|
|
747
692
|
height: calc(var(--spacing) * 9);
|
|
748
693
|
}
|
|
749
|
-
|
|
750
|
-
.md\:w-\(--sl-sidebar-width\) {
|
|
751
|
-
@media (width >= 50rem) {
|
|
694
|
+
.md\:w-\(--sl-sidebar-width\) {
|
|
752
695
|
width: var(--sl-sidebar-width);
|
|
753
696
|
}
|
|
754
|
-
|
|
755
|
-
.md\:w-full {
|
|
756
|
-
@media (width >= 50rem) {
|
|
697
|
+
.md\:w-full {
|
|
757
698
|
width: 100%;
|
|
758
699
|
}
|
|
759
|
-
|
|
760
|
-
.md\:max-w-88 {
|
|
761
|
-
@media (width >= 50rem) {
|
|
700
|
+
.md\:max-w-88 {
|
|
762
701
|
max-width: calc(var(--spacing) * 88);
|
|
763
702
|
}
|
|
764
|
-
|
|
765
|
-
.md\:rounded-md {
|
|
766
|
-
@media (width >= 50rem) {
|
|
703
|
+
.md\:rounded-md {
|
|
767
704
|
border-radius: var(--radius-md);
|
|
768
705
|
}
|
|
769
|
-
|
|
770
|
-
.md\:border {
|
|
771
|
-
@media (width >= 50rem) {
|
|
706
|
+
.md\:border {
|
|
772
707
|
border-style: var(--tw-border-style);
|
|
773
708
|
border-width: 1px;
|
|
774
709
|
}
|
|
775
|
-
|
|
776
|
-
.md\:border-solid {
|
|
777
|
-
@media (width >= 50rem) {
|
|
710
|
+
.md\:border-solid {
|
|
778
711
|
--tw-border-style: solid;
|
|
779
712
|
border-style: solid;
|
|
780
713
|
}
|
|
781
|
-
|
|
782
|
-
.md\:border-\(--sl-color-gray-5\) {
|
|
783
|
-
@media (width >= 50rem) {
|
|
714
|
+
.md\:border-\(--sl-color-gray-5\) {
|
|
784
715
|
border-color: var(--sl-color-gray-5);
|
|
785
716
|
}
|
|
786
|
-
|
|
787
|
-
.md\:p-2 {
|
|
788
|
-
@media (width >= 50rem) {
|
|
717
|
+
.md\:p-2 {
|
|
789
718
|
padding: calc(var(--spacing) * 2);
|
|
790
719
|
}
|
|
791
|
-
|
|
792
|
-
.md\:text-lg {
|
|
793
|
-
@media (width >= 50rem) {
|
|
720
|
+
.md\:text-lg {
|
|
794
721
|
font-size: var(--text-lg);
|
|
795
722
|
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
796
723
|
}
|
|
797
|
-
|
|
798
|
-
.md\:text-\(--sl-color-text\) {
|
|
799
|
-
@media (width >= 50rem) {
|
|
724
|
+
.md\:text-\(--sl-color-text\) {
|
|
800
725
|
color: var(--sl-color-text);
|
|
801
726
|
}
|
|
802
|
-
|
|
803
|
-
.md\:transition-colors {
|
|
804
|
-
@media (width >= 50rem) {
|
|
727
|
+
.md\:transition-colors {
|
|
805
728
|
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
806
729
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
807
730
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
808
731
|
}
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
background-color: color-mix(in oklab, var(--color-gray-400) 10%, transparent);
|
|
817
|
-
}
|
|
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);
|
|
818
739
|
}
|
|
819
740
|
}
|
|
820
741
|
}
|
|
821
742
|
}
|
|
822
|
-
|
|
823
|
-
|
|
743
|
+
@media (width >= 80rem) {
|
|
744
|
+
.xl\:gap-6 {
|
|
824
745
|
gap: calc(var(--spacing) * 6);
|
|
825
746
|
}
|
|
826
|
-
|
|
827
|
-
.xl\:pl-6 {
|
|
828
|
-
@media (width >= 80rem) {
|
|
747
|
+
.xl\:pl-6 {
|
|
829
748
|
padding-left: calc(var(--spacing) * 6);
|
|
830
749
|
}
|
|
831
750
|
}
|
|
832
|
-
.dark\:bg-gray-100 {
|
|
833
|
-
|
|
834
|
-
background-color: var(--color-gray-100);
|
|
835
|
-
}
|
|
751
|
+
.dark\:bg-gray-100:where([data-theme=dark], [data-theme=dark] *) {
|
|
752
|
+
background-color: var(--color-gray-100);
|
|
836
753
|
}
|
|
837
|
-
.dark\:bg-gray-600\/30 {
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
background-color: color-mix(in oklab, var(--color-gray-600) 30%, transparent);
|
|
842
|
-
}
|
|
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);
|
|
843
758
|
}
|
|
844
759
|
}
|
|
845
|
-
.dark\:bg-gray-800 {
|
|
846
|
-
|
|
847
|
-
background-color: var(--color-gray-800);
|
|
848
|
-
}
|
|
760
|
+
.dark\:bg-gray-800:where([data-theme=dark], [data-theme=dark] *) {
|
|
761
|
+
background-color: var(--color-gray-800);
|
|
849
762
|
}
|
|
850
|
-
.dark\:text-gray-200 {
|
|
851
|
-
|
|
852
|
-
color: var(--color-gray-200);
|
|
853
|
-
}
|
|
763
|
+
.dark\:text-gray-200:where([data-theme=dark], [data-theme=dark] *) {
|
|
764
|
+
color: var(--color-gray-200);
|
|
854
765
|
}
|
|
855
|
-
.dark\:text-gray-900 {
|
|
856
|
-
|
|
857
|
-
color: var(--color-gray-900);
|
|
858
|
-
}
|
|
766
|
+
.dark\:text-gray-900:where([data-theme=dark], [data-theme=dark] *) {
|
|
767
|
+
color: var(--color-gray-900);
|
|
859
768
|
}
|
|
860
|
-
.dark\:text-white {
|
|
861
|
-
|
|
862
|
-
color: var(--color-white);
|
|
863
|
-
}
|
|
769
|
+
.dark\:text-white:where([data-theme=dark], [data-theme=dark] *) {
|
|
770
|
+
color: var(--color-white);
|
|
864
771
|
}
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
@media (hover: hover) {
|
|
869
|
-
background-color: var(--color-gray-300);
|
|
870
|
-
}
|
|
871
|
-
}
|
|
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);
|
|
872
775
|
}
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
876
|
-
&:hover {
|
|
877
|
-
@media (hover: hover) {
|
|
878
|
-
background-color: var(--color-gray-700);
|
|
879
|
-
}
|
|
880
|
-
}
|
|
776
|
+
.dark\:hover\:bg-gray-700:where([data-theme=dark], [data-theme=dark] *):hover {
|
|
777
|
+
background-color: var(--color-gray-700);
|
|
881
778
|
}
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
&:where([data-theme=dark], [data-theme=dark] *) {
|
|
887
|
-
background-color: color-mix(in srgb, oklch(55.1% 0.027 264.364) 50%, transparent);
|
|
888
|
-
@supports (color: color-mix(in lab, red, red)) {
|
|
889
|
-
background-color: color-mix(in oklab, var(--color-gray-500) 50%, transparent);
|
|
890
|
-
}
|
|
891
|
-
}
|
|
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);
|
|
892
783
|
}
|
|
893
784
|
}
|
|
894
785
|
}
|
|
895
|
-
|
|
896
|
-
|
|
786
|
+
@media print {
|
|
787
|
+
.print\:hidden {
|
|
897
788
|
display: none;
|
|
898
789
|
}
|
|
899
790
|
}
|
|
900
|
-
.\[\&_celestia-code-copy-button\]\:opacity-0 {
|
|
901
|
-
|
|
902
|
-
opacity: 0%;
|
|
903
|
-
}
|
|
791
|
+
.\[\&_celestia-code-copy-button\]\:opacity-0 celestia-code-copy-button {
|
|
792
|
+
opacity: 0%;
|
|
904
793
|
}
|
|
905
|
-
.\[\&_nav\]\:backdrop-blur {
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
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,);
|
|
910
|
-
}
|
|
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,);
|
|
911
798
|
}
|
|
912
|
-
.\[\&_pre\]\:relative {
|
|
913
|
-
|
|
914
|
-
position: relative;
|
|
915
|
-
}
|
|
799
|
+
.\[\&_pre\]\:relative pre {
|
|
800
|
+
position: relative;
|
|
916
801
|
}
|
|
917
|
-
.\[\&_summary\]\:border-b-\(--sl-color-hairline\) {
|
|
918
|
-
|
|
919
|
-
border-bottom-color: var(--sl-color-hairline);
|
|
920
|
-
}
|
|
802
|
+
.\[\&_summary\]\:border-b-\(--sl-color-hairline\) summary {
|
|
803
|
+
border-bottom-color: var(--sl-color-hairline);
|
|
921
804
|
}
|
|
922
|
-
.\[\&_svg\]\:h-full {
|
|
923
|
-
|
|
924
|
-
height: 100%;
|
|
925
|
-
}
|
|
805
|
+
.\[\&_svg\]\:h-full svg {
|
|
806
|
+
height: 100%;
|
|
926
807
|
}
|
|
927
|
-
.\[\&_svg\]\:w-full {
|
|
928
|
-
|
|
929
|
-
width: 100%;
|
|
930
|
-
}
|
|
808
|
+
.\[\&_svg\]\:w-full svg {
|
|
809
|
+
width: 100%;
|
|
931
810
|
}
|
|
932
|
-
.\[\&\:hover_celestia-code-copy-button\]\:opacity-100 {
|
|
933
|
-
|
|
934
|
-
opacity: 100%;
|
|
935
|
-
}
|
|
811
|
+
.\[\&\:hover_celestia-code-copy-button\]\:opacity-100:hover celestia-code-copy-button {
|
|
812
|
+
opacity: 100%;
|
|
936
813
|
}
|
|
937
|
-
.\[\[rel\=\'next\'\]\]\:flex-row {
|
|
938
|
-
|
|
939
|
-
flex-direction: row;
|
|
940
|
-
}
|
|
814
|
+
.\[\[rel\=\'next\'\]\]\:flex-row:is([rel='next']) {
|
|
815
|
+
flex-direction: row;
|
|
941
816
|
}
|
|
942
|
-
.\[\[rel\=\'prev\'\]\]\:flex-row-reverse {
|
|
943
|
-
|
|
944
|
-
flex-direction: row-reverse;
|
|
945
|
-
}
|
|
817
|
+
.\[\[rel\=\'prev\'\]\]\:flex-row-reverse:is([rel='prev']) {
|
|
818
|
+
flex-direction: row-reverse;
|
|
946
819
|
}
|
|
947
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:block {
|
|
948
|
-
|
|
949
|
-
display: block;
|
|
950
|
-
}
|
|
820
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:block {
|
|
821
|
+
display: block;
|
|
951
822
|
}
|
|
952
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:hidden {
|
|
953
|
-
|
|
954
|
-
display: none;
|
|
955
|
-
}
|
|
823
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:hidden {
|
|
824
|
+
display: none;
|
|
956
825
|
}
|
|
957
|
-
.\[body\[data-mobile-menu-expanded\]_\&\]\:rotate-90 {
|
|
958
|
-
|
|
959
|
-
rotate: 90deg;
|
|
960
|
-
}
|
|
826
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:rotate-90 {
|
|
827
|
+
rotate: 90deg;
|
|
961
828
|
}
|
|
962
|
-
|
|
963
|
-
body[data-mobile-menu-expanded]
|
|
964
|
-
|
|
965
|
-
visibility: visible;
|
|
966
|
-
}
|
|
829
|
+
@media (width < 50rem) {
|
|
830
|
+
body[data-mobile-menu-expanded] .\[body\[data-mobile-menu-expanded\]_\&\]\:max-md\:visible {
|
|
831
|
+
visibility: visible;
|
|
967
832
|
}
|
|
968
833
|
}
|
|
969
|
-
.\[div\[data-celestia-code-container\]\[data-celestia-code-title\]_\&\]\:block {
|
|
970
|
-
|
|
971
|
-
display: block;
|
|
972
|
-
}
|
|
834
|
+
div[data-celestia-code-container][data-celestia-code-title] .\[div\[data-celestia-code-container\]\[data-celestia-code-title\]_\&\]\:block {
|
|
835
|
+
display: block;
|
|
973
836
|
}
|
|
974
|
-
}
|
|
975
|
-
@layer utilities {
|
|
976
837
|
:root {
|
|
977
838
|
--sl-font-mono: var(--font-mono);
|
|
978
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": {
|
|
@@ -22,7 +22,8 @@
|
|
|
22
22
|
],
|
|
23
23
|
"scripts": {
|
|
24
24
|
"build": "bun run build:tailwindcss",
|
|
25
|
-
"build:tailwindcss": "tailwindcss -i ./lib/tailwind.build.css -o ./lib/tailwind.gen.css"
|
|
25
|
+
"build:tailwindcss": "tailwindcss -i ./lib/tailwind.build.css -o ./lib/tailwind.gen.css",
|
|
26
|
+
"test": "bun test"
|
|
26
27
|
},
|
|
27
28
|
"dependencies": {
|
|
28
29
|
"@aria-ui/core": "^0.2.0",
|
|
@@ -38,22 +39,26 @@
|
|
|
38
39
|
"rehype": "^13.0.2",
|
|
39
40
|
"remark-custom-header-id": "^1.0.0",
|
|
40
41
|
"shiki-twoslash-renderer": "^0.3.3",
|
|
41
|
-
"starlight-versions": "^0.
|
|
42
|
+
"starlight-versions": "^0.9.0"
|
|
42
43
|
},
|
|
43
44
|
"peerDependencies": {
|
|
44
|
-
"@astrojs/starlight": "*"
|
|
45
|
+
"@astrojs/starlight": "*",
|
|
46
|
+
"typescript": "^5.5.0 || ^6.0.0"
|
|
45
47
|
},
|
|
46
48
|
"peerDependenciesMeta": {
|
|
47
49
|
"@astrojs/starlight": {
|
|
48
50
|
"optional": true
|
|
51
|
+
},
|
|
52
|
+
"typescript": {
|
|
53
|
+
"optional": true
|
|
49
54
|
}
|
|
50
55
|
},
|
|
51
56
|
"devDependencies": {
|
|
52
|
-
"@astrojs/starlight": "^0.
|
|
57
|
+
"@astrojs/starlight": "^0.41.0",
|
|
53
58
|
"@tailwindcss/cli": "^4.2.2",
|
|
54
59
|
"@tailwindcss/vite": "^4.2.2",
|
|
55
|
-
"@types/node": "^
|
|
56
|
-
"astro": "^
|
|
60
|
+
"@types/node": "^26.0.0",
|
|
61
|
+
"astro": "^7.0.2",
|
|
57
62
|
"tailwindcss": "^4.2.2",
|
|
58
63
|
"typescript": "^6.0.0"
|
|
59
64
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { expect, test } from "bun:test";
|
|
2
|
+
|
|
3
|
+
import starlightCelestiaTheme from "./index";
|
|
4
|
+
|
|
5
|
+
test("default factory returns a valid Starlight plugin", () => {
|
|
6
|
+
const plugin = starlightCelestiaTheme();
|
|
7
|
+
|
|
8
|
+
expect(plugin.name).toBe("starlight-theme-celestia");
|
|
9
|
+
expect(plugin.hooks).toHaveProperty("config:setup");
|
|
10
|
+
expect(typeof plugin.hooks["config:setup"]).toBe("function");
|
|
11
|
+
});
|
package/src/index.ts
CHANGED
|
@@ -31,7 +31,7 @@ export default function starlightCelestiaTheme(options: ThemeCelestiaOptions = {
|
|
|
31
31
|
return {
|
|
32
32
|
name: "starlight-theme-celestia",
|
|
33
33
|
hooks: {
|
|
34
|
-
setup: async ({ config, updateConfig, addIntegration, astroConfig }) => {
|
|
34
|
+
"config:setup": async ({ config, updateConfig, addIntegration, astroConfig }) => {
|
|
35
35
|
let useTailwind: boolean;
|
|
36
36
|
|
|
37
37
|
if (options.stylingSystem === "css") {
|
|
@@ -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
|
+
}
|
|
@@ -18,6 +18,31 @@ export function transformerContainer(): ShikiTransformer {
|
|
|
18
18
|
throw new Error(`[${name}] Expected at least one child`);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
// Mermaid blocks must reach downstream rehype plugins (e.g. rehype-mermaid)
|
|
22
|
+
// unwrapped. Shiki rewrites the original `<pre><code class="language-mermaid">`
|
|
23
|
+
// into highlighted tokens with `data-language="mermaid"`, which strips the
|
|
24
|
+
// class rehype-mermaid keys off. Restore the pre-shiki structure so any
|
|
25
|
+
// mermaid strategy (pre-mermaid, inline-svg, img-svg, img-png) can pick it
|
|
26
|
+
// up. If no mermaid plugin is configured the block falls back to plain code.
|
|
27
|
+
if (this.options.lang === "mermaid") {
|
|
28
|
+
node.children = [
|
|
29
|
+
{
|
|
30
|
+
type: "element",
|
|
31
|
+
tagName: "pre",
|
|
32
|
+
properties: {},
|
|
33
|
+
children: [
|
|
34
|
+
{
|
|
35
|
+
type: "element",
|
|
36
|
+
tagName: "code",
|
|
37
|
+
properties: { className: ["language-mermaid"] },
|
|
38
|
+
children: [{ type: "text", value: this.source }],
|
|
39
|
+
},
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
];
|
|
43
|
+
return node;
|
|
44
|
+
}
|
|
45
|
+
|
|
21
46
|
const pre = node.children.find((child) => isElement(child, "pre"));
|
|
22
47
|
|
|
23
48
|
if (!pre) {
|