starlight-theme-nova 0.10.0 → 0.11.0

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 +121 -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,121 @@
1
+ @import 'tailwindcss';
2
+
3
+ @source '../src/**/*.ts';
4
+ @source '../src/**/*.astro';
5
+
6
+ :root,
7
+ ::backdrop {
8
+ --sl-content-width: 50rem;
9
+
10
+ --sl-text-h1: var(--sl-text-3xl);
11
+ --sl-text-h2: var(--sl-text-2xl);
12
+ --sl-text-h3: var(--sl-text-xl);
13
+ --sl-text-h4: var(--sl-text-lg);
14
+ --sl-text-h5: var(--sl-text-base);
15
+ --sl-text-h6: var(--sl-text-sm);
16
+
17
+ /* Prevent adjustments of font size after orientation changes in iOS. */
18
+ -webkit-text-size-adjust: 100%;
19
+ }
20
+
21
+ /* Dark mode Starlight theme variables. */
22
+ :root {
23
+ --sl-color-white: white;
24
+ --sl-color-gray-1: var(--color-gray-200);
25
+ --sl-color-gray-2: var(--color-gray-300);
26
+ --sl-color-gray-3: var(--color-gray-400);
27
+ --sl-color-gray-4: var(--color-gray-600);
28
+ --sl-color-gray-5: var(--color-gray-700);
29
+ --sl-color-gray-6: var(--color-gray-800);
30
+ --sl-color-black: var(--color-gray-950);
31
+
32
+ --sl-color-accent-low: var(--color-gray-950);
33
+ --sl-color-accent: var(--color-gray-600);
34
+ --sl-color-accent-high: var(--color-gray-100);
35
+
36
+ --sl-color-bg-inline-code: var(--color-gray-800);
37
+ --sl-color-border-inline-code: var(--color-gray-700);
38
+ --sl-color-bg-nav: color-mix(in oklch, var(--color-gray-950) 50%, transparent);
39
+
40
+ --sl-color-orange-low: var(--color-amber-950);
41
+ --sl-color-orange: var(--color-amber-900);
42
+ --sl-color-orange-high: var(--color-amber-200);
43
+
44
+ --sl-color-green-low: var(--color-green-950);
45
+ --sl-color-green: var(--color-green-900);
46
+ --sl-color-green-high: var(--color-green-200);
47
+
48
+ --sl-color-blue-low: var(--color-blue-950);
49
+ --sl-color-blue: var(--color-blue-900);
50
+ --sl-color-blue-high: var(--color-blue-200);
51
+
52
+ --sl-color-purple-low: var(--color-purple-950);
53
+ --sl-color-purple: var(--color-purple-900);
54
+ --sl-color-purple-high: var(--color-purple-200);
55
+
56
+ --sl-color-red-low: var(--color-red-950);
57
+ --sl-color-red: var(--color-red-900);
58
+ --sl-color-red-high: var(--color-red-200);
59
+
60
+ --nano-color-highlight: var(--sl-color-gray-5);
61
+ }
62
+
63
+ /* Light mode Starlight theme variables */
64
+ :root[data-theme='light'] {
65
+ --sl-color-white: var(--color-gray-900);
66
+ --sl-color-gray-1: var(--color-gray-800);
67
+ --sl-color-gray-2: var(--color-gray-700);
68
+ --sl-color-gray-3: var(--color-gray-500);
69
+ --sl-color-gray-4: var(--color-gray-400);
70
+ --sl-color-gray-5: var(--color-gray-300);
71
+ --sl-color-gray-6: var(--color-gray-200);
72
+ --sl-color-gray-7: var(--color-gray-100);
73
+ --sl-color-black: white;
74
+
75
+ --sl-color-accent-low: var(--color-gray-200);
76
+ --sl-color-accent: var(--color-gray-800);
77
+ --sl-color-accent-high: var(--color-gray-900);
78
+
79
+ --sl-color-bg-inline-code: var(--color-gray-100);
80
+ --sl-color-border-inline-code: var(--color-gray-300);
81
+ --sl-color-bg-nav: color-mix(in oklch, var(--color-white) 80%, transparent);
82
+
83
+ --sl-color-orange-low: var(--color-amber-100);
84
+ --sl-color-orange: var(--color-amber-400);
85
+ --sl-color-orange-high: var(--color-amber-800);
86
+
87
+ --sl-color-green-low: var(--color-green-100);
88
+ --sl-color-green: var(--color-green-400);
89
+ --sl-color-green-high: var(--color-green-800);
90
+
91
+ --sl-color-blue-low: var(--color-blue-100);
92
+ --sl-color-blue: var(--color-blue-400);
93
+ --sl-color-blue-high: var(--color-blue-800);
94
+
95
+ --sl-color-purple-low: var(--color-purple-100);
96
+ --sl-color-purple: var(--color-purple-400);
97
+ --sl-color-purple-high: var(--color-purple-800);
98
+
99
+ --sl-color-red-low: var(--color-red-100);
100
+ --sl-color-red: var(--color-red-400);
101
+ --sl-color-red-high: var(--color-red-800);
102
+
103
+ --nano-color-highlight: var(--sl-color-gray-6);
104
+ }
105
+
106
+ .sl-markdown-content [data-nova-code-container] pre.astro-code,
107
+ .sl-markdown-content [data-nova-code-container] pre.astro-code code {
108
+ border-width: 0;
109
+ border-style: solid;
110
+ border-color: transparent;
111
+ border-radius: 0;
112
+ }
113
+
114
+ @utility nova-scroll-container {
115
+ scrollbar-width: thin;
116
+ scrollbar-color: var(--sl-color-gray-5) transparent;
117
+ }
118
+
119
+ .sl-markdown-content .code-tabs .tablist-wrapper {
120
+ @apply nova-scroll-container;
121
+ }