starlight-theme-nova 0.10.0 → 0.11.1

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 (36) hide show
  1. package/lib/styles.css +1 -2
  2. package/lib/tailwind.css +130 -0
  3. package/lib/tailwind.gen.css +1313 -0
  4. package/package.json +13 -17
  5. package/src/components/CodeCopy.astro +7 -5
  6. package/src/components/CodeTabs.astro +4 -19
  7. package/src/components/Header.astro +19 -7
  8. package/src/components/LinkButton.astro +15 -7
  9. package/src/components/LinkButtonIcon.astro +11 -9
  10. package/src/components/LinkCard.astro +17 -3
  11. package/src/components/MobileMenuFooter.astro +1 -1
  12. package/src/components/MobileMenuToggle.astro +12 -2
  13. package/src/components/MobileTableOfContents.astro +1 -1
  14. package/src/components/PageFrame.astro +18 -21
  15. package/src/components/Pagination.astro +5 -2
  16. package/src/components/PaginationLink.astro +17 -8
  17. package/src/components/Search.astro +3 -2
  18. package/src/components/SiteTitle.astro +5 -1
  19. package/src/components/SocialIcons.astro +5 -1
  20. package/src/components/ThemeSelect.astro +8 -4
  21. package/src/constants.ts +2 -0
  22. package/src/icons/lucide-arrow-left.svg +1 -0
  23. package/src/icons/lucide-arrow-right.svg +1 -0
  24. package/src/icons/lucide-check.svg +1 -0
  25. package/src/icons/lucide-chevron-left.svg +1 -0
  26. package/src/icons/lucide-chevron-right.svg +1 -0
  27. package/src/icons/lucide-clipboard.svg +1 -0
  28. package/src/icons/lucide-menu.svg +1 -0
  29. package/src/icons/lucide-search.svg +1 -0
  30. package/src/icons/lucide-x.svg +1 -0
  31. package/src/icons/tabler-moon-filled.svg +1 -0
  32. package/src/icons/tabler-sun-high-filled.svg +1 -0
  33. package/src/index.ts +43 -2
  34. package/src/shiki-transformer-container.ts +6 -3
  35. package/src/user-options.ts +16 -0
  36. package/lib/styles.gen.css +0 -214
package/lib/styles.css CHANGED
@@ -1,6 +1,5 @@
1
- @layer starlight, nova;
1
+ @layer base, starlight, nova, theme, components, utilities;
2
2
 
3
- @import './styles.gen.css' layer(nova);
4
3
  @import './markdown.css' layer(nova);
5
4
  @import './shiki.css' layer(nova);
6
5
  @import './aside.css' layer(nova);
package/lib/tailwind.css ADDED
@@ -0,0 +1,130 @@
1
+ @import 'tailwindcss';
2
+
3
+ @source '../src/**/*.ts';
4
+ @source '../src/**/*.astro';
5
+
6
+ @theme {
7
+ /*
8
+ Match Starlight breakpoints
9
+ https://github.com/withastro/starlight/blob/893be3b4a106ab75b706142bbd06b00268ccc298/packages/starlight/style/util.css#L22-L43
10
+ */
11
+ --breakpoint-md: 50rem;
12
+ --breakpoint-lg: 72rem;
13
+ }
14
+
15
+ :root,
16
+ ::backdrop {
17
+ --sl-content-width: 50rem;
18
+
19
+ --sl-text-h1: var(--sl-text-3xl);
20
+ --sl-text-h2: var(--sl-text-2xl);
21
+ --sl-text-h3: var(--sl-text-xl);
22
+ --sl-text-h4: var(--sl-text-lg);
23
+ --sl-text-h5: var(--sl-text-base);
24
+ --sl-text-h6: var(--sl-text-sm);
25
+
26
+ /* Prevent adjustments of font size after orientation changes in iOS. */
27
+ -webkit-text-size-adjust: 100%;
28
+ }
29
+
30
+ /* Dark mode Starlight theme variables. */
31
+ :root {
32
+ --sl-color-white: white;
33
+ --sl-color-gray-1: var(--color-gray-200);
34
+ --sl-color-gray-2: var(--color-gray-300);
35
+ --sl-color-gray-3: var(--color-gray-400);
36
+ --sl-color-gray-4: var(--color-gray-600);
37
+ --sl-color-gray-5: var(--color-gray-700);
38
+ --sl-color-gray-6: var(--color-gray-800);
39
+ --sl-color-black: var(--color-gray-950);
40
+
41
+ --sl-color-accent-low: var(--color-gray-950);
42
+ --sl-color-accent: var(--color-gray-600);
43
+ --sl-color-accent-high: var(--color-gray-100);
44
+
45
+ --sl-color-bg-inline-code: var(--color-gray-800);
46
+ --sl-color-border-inline-code: var(--color-gray-700);
47
+ --sl-color-bg-nav: color-mix(in oklch, var(--color-gray-950) 50%, transparent);
48
+
49
+ --sl-color-orange-low: var(--color-amber-950);
50
+ --sl-color-orange: var(--color-amber-900);
51
+ --sl-color-orange-high: var(--color-amber-200);
52
+
53
+ --sl-color-green-low: var(--color-green-950);
54
+ --sl-color-green: var(--color-green-900);
55
+ --sl-color-green-high: var(--color-green-200);
56
+
57
+ --sl-color-blue-low: var(--color-blue-950);
58
+ --sl-color-blue: var(--color-blue-900);
59
+ --sl-color-blue-high: var(--color-blue-200);
60
+
61
+ --sl-color-purple-low: var(--color-purple-950);
62
+ --sl-color-purple: var(--color-purple-900);
63
+ --sl-color-purple-high: var(--color-purple-200);
64
+
65
+ --sl-color-red-low: var(--color-red-950);
66
+ --sl-color-red: var(--color-red-900);
67
+ --sl-color-red-high: var(--color-red-200);
68
+
69
+ --nano-color-highlight: var(--sl-color-gray-5);
70
+ }
71
+
72
+ /* Light mode Starlight theme variables */
73
+ :root[data-theme='light'] {
74
+ --sl-color-white: var(--color-gray-900);
75
+ --sl-color-gray-1: var(--color-gray-800);
76
+ --sl-color-gray-2: var(--color-gray-700);
77
+ --sl-color-gray-3: var(--color-gray-500);
78
+ --sl-color-gray-4: var(--color-gray-400);
79
+ --sl-color-gray-5: var(--color-gray-300);
80
+ --sl-color-gray-6: var(--color-gray-200);
81
+ --sl-color-gray-7: var(--color-gray-100);
82
+ --sl-color-black: white;
83
+
84
+ --sl-color-accent-low: var(--color-gray-200);
85
+ --sl-color-accent: var(--color-gray-800);
86
+ --sl-color-accent-high: var(--color-gray-900);
87
+
88
+ --sl-color-bg-inline-code: var(--color-gray-100);
89
+ --sl-color-border-inline-code: var(--color-gray-300);
90
+ --sl-color-bg-nav: color-mix(in oklch, var(--color-white) 80%, transparent);
91
+
92
+ --sl-color-orange-low: var(--color-amber-100);
93
+ --sl-color-orange: var(--color-amber-400);
94
+ --sl-color-orange-high: var(--color-amber-800);
95
+
96
+ --sl-color-green-low: var(--color-green-100);
97
+ --sl-color-green: var(--color-green-400);
98
+ --sl-color-green-high: var(--color-green-800);
99
+
100
+ --sl-color-blue-low: var(--color-blue-100);
101
+ --sl-color-blue: var(--color-blue-400);
102
+ --sl-color-blue-high: var(--color-blue-800);
103
+
104
+ --sl-color-purple-low: var(--color-purple-100);
105
+ --sl-color-purple: var(--color-purple-400);
106
+ --sl-color-purple-high: var(--color-purple-800);
107
+
108
+ --sl-color-red-low: var(--color-red-100);
109
+ --sl-color-red: var(--color-red-400);
110
+ --sl-color-red-high: var(--color-red-800);
111
+
112
+ --nano-color-highlight: var(--sl-color-gray-6);
113
+ }
114
+
115
+ .sl-markdown-content [data-nova-code-container] pre.astro-code,
116
+ .sl-markdown-content [data-nova-code-container] pre.astro-code code {
117
+ border-width: 0;
118
+ border-style: solid;
119
+ border-color: transparent;
120
+ border-radius: 0;
121
+ }
122
+
123
+ @utility nova-scroll-container {
124
+ scrollbar-width: thin;
125
+ scrollbar-color: var(--sl-color-gray-5) transparent;
126
+ }
127
+
128
+ .sl-markdown-content .code-tabs .tablist-wrapper {
129
+ @apply nova-scroll-container;
130
+ }