@grove-dev/starlight 0.6.1 → 0.8.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 (44) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +77 -78
  3. package/components/custom/ContainerSection.astro +1 -1
  4. package/components/custom/LinkButton.astro +134 -89
  5. package/components/custom/dropdown/Dropdown.astro +5 -5
  6. package/components/custom/dropdown/DropdownContent.astro +66 -66
  7. package/components/custom/dropdown/DropdownItem.astro +14 -9
  8. package/components/custom/dropdown/DropdownLabel.astro +4 -4
  9. package/components/custom/dropdown/DropdownTrigger.astro +13 -13
  10. package/components/custom/dropdown/index.ts +14 -14
  11. package/components/overrides/Footer.astro +3 -3
  12. package/components/overrides/Header.astro +5 -6
  13. package/components/overrides/Hero.astro +20 -12
  14. package/components/overrides/PageFrame.astro +25 -9
  15. package/components/overrides/PageSidebar.astro +1 -0
  16. package/components/overrides/PageTitle.astro +3 -3
  17. package/components/overrides/Search.astro +6 -6
  18. package/components/overrides/Sidebar.astro +38 -1
  19. package/components/overrides/SocialIcons.astro +3 -1
  20. package/components/overrides/ThemeSelect.astro +4 -4
  21. package/components/overrides/TwoColumnContent.astro +1 -1
  22. package/components/overrides/parts/Drawer.astro +13 -7
  23. package/components/overrides/parts/NavBar.astro +12 -31
  24. package/components/overrides/parts/SidebarSublist.astro +75 -4
  25. package/components/overrides/parts/toc/TableOfContentsList.astro +4 -4
  26. package/components/overrides/parts/toc/starlight-toc.ts +96 -98
  27. package/core/config/docs-schema.ts +58 -0
  28. package/core/config/expresive-code.ts +49 -51
  29. package/core/config/override.ts +37 -33
  30. package/core/config/schemas.ts +62 -41
  31. package/core/config/vite.ts +14 -14
  32. package/core/i18n.ts +175 -0
  33. package/core/plugin.ts +45 -43
  34. package/core/sidebar.ts +22 -0
  35. package/global.d.ts +3 -3
  36. package/package.json +3 -19
  37. package/schema.ts +44 -13
  38. package/styles/base.css +883 -896
  39. package/styles/layers.css +1 -1
  40. package/styles/theme.css +62 -62
  41. package/user-components.ts +1 -2
  42. package/virtual.d.ts +28 -28
  43. package/THIRD_PARTY_LICENSES.md +0 -68
  44. package/components/custom/Card.astro +0 -118
package/styles/base.css CHANGED
@@ -1,903 +1,890 @@
1
- @layer lucode {
2
- /* theme */
3
- :root {
4
- --tracking-tight: -0.025em;
5
- --tracking-tighter: -0.05em;
6
- --tracking-normal: 0em;
7
- --tracking-wide: 0.025em;
8
- --tracking-wider: 0.05em;
9
- --spacing: 0.25rem;
10
- --radius: 0.625rem;
11
- --header-height: calc(var(--spacing) * 14);
12
- --sidebar-width: 18rem;
13
- --container-max-width: 1600px;
14
-
15
- /* starlight color mappings */
16
- --sl-color-text-accent: var(--foreground);
17
- --sl-color-banner-text: var(--foreground);
18
- --sl-color-bg: var(--background);
19
- --sl-color-text: var(--foreground);
20
- --sl-color-accent-low: var(--muted);
21
- --sl-color-accent: var(--border);
22
- --sl-color-accent-high: var(--foreground);
23
- --sl-color-gray-1: var(--gray-1);
24
- --sl-color-gray-2: var(--gray-2);
25
- --sl-color-gray-3: var(--gray-3);
26
- --sl-color-gray-4: var(--gray-4);
27
- --sl-color-gray-5: var(--gray-5);
28
- --sl-color-gray-6: var(--gray-6);
29
- --sl-color-gray-7: var(--gray-7);
30
-
31
- /* colors */
32
- --sl-color-orange-low: var(--orange-low);
33
- --sl-color-orange: var(--orange);
34
- --sl-color-orange-high: var(--orange-high);
35
- --sl-color-green-low: var(--green-low);
36
- --sl-color-green: var(--green);
37
- --sl-color-green-high: var(--green-high);
38
- --sl-color-blue-low: var(--blue-low);
39
- --sl-color-blue: var(--blue);
40
- --sl-color-blue-high: var(--blue-high);
41
- --sl-color-purple-low: var(--purple-low);
42
- --sl-color-purple: var(--purple);
43
- --sl-color-purple-high: var(--purple-high);
44
- --sl-color-red-low: var(--red-low);
45
- --sl-color-red: var(--red);
46
- --sl-color-red-high: var(--red-high);
47
-
48
- /* theme tokens */
49
- --primary: var(--foreground);
50
- --primary-foreground: var(--gray-7);
51
- --secondary: var(--gray-6);
52
- --secondary-foreground: var(--foreground);
53
- --muted: var(--gray-6);
54
- --muted-foreground: var(--gray-3);
55
- --accent: var(--gray-5);
56
- --accent-foreground: var(--foreground);
57
- --border: var(--gray-6);
58
- --input: var(--gray-8);
59
- --ring: var(--gray-4);
60
- --card: var(--background);
61
- --card-foreground: var(--foreground);
62
- --code-background: var(--gray-7);
63
- --mark-background: var(--gray-8);
64
- --popover-background: var(--gray-7);
65
- --popover-foreground: var(--foreground);
66
- --markdown-foreground: var(--gray-2);
67
-
68
- /* backdrop */
69
- ::backdrop {
70
- --sl-color-backdrop-overlay: color-mix(in oklab, var(--background) 80%, transparent);
71
- }
72
- }
73
-
74
- .container-wrapper {
75
- width: 100%;
76
- padding-inline: calc(var(--spacing) * 2);
77
- margin-inline: auto;
78
- }
79
-
80
- .container {
81
- max-width: var(--container-max-width);
82
- margin-inline: auto;
83
- width: 100%;
84
- }
85
-
1
+ @layer grove {
2
+ /* theme */
3
+ :root {
4
+ --tracking-tight: -0.025em;
5
+ --tracking-tighter: -0.05em;
6
+ --tracking-normal: 0em;
7
+ --tracking-wide: 0.025em;
8
+ --tracking-wider: 0.05em;
9
+ --spacing: 0.25rem;
10
+ --radius: 0.625rem;
11
+ --header-height: calc(var(--spacing) * 14);
12
+ --sidebar-width: 18rem;
13
+ --content-max-width: 40rem;
14
+ --container-max-width: 1600px;
15
+
16
+ /* starlight color mappings */
17
+ --sl-color-text-accent: var(--foreground);
18
+ --sl-color-banner-text: var(--foreground);
19
+ --sl-color-bg: var(--background);
20
+ --sl-color-text: var(--foreground);
21
+ --sl-color-accent-low: var(--muted);
22
+ --sl-color-accent: var(--border);
23
+ --sl-color-accent-high: var(--foreground);
24
+ --sl-color-gray-1: var(--gray-1);
25
+ --sl-color-gray-2: var(--gray-2);
26
+ --sl-color-gray-3: var(--gray-3);
27
+ --sl-color-gray-4: var(--gray-4);
28
+ --sl-color-gray-5: var(--gray-5);
29
+ --sl-color-gray-6: var(--gray-6);
30
+ --sl-color-gray-7: var(--gray-7);
31
+
32
+ /* colors */
33
+ --sl-color-orange-low: var(--orange-low);
34
+ --sl-color-orange: var(--orange);
35
+ --sl-color-orange-high: var(--orange-high);
36
+ --sl-color-green-low: var(--green-low);
37
+ --sl-color-green: var(--green);
38
+ --sl-color-green-high: var(--green-high);
39
+ --sl-color-blue-low: var(--blue-low);
40
+ --sl-color-blue: var(--blue);
41
+ --sl-color-blue-high: var(--blue-high);
42
+ --sl-color-purple-low: var(--purple-low);
43
+ --sl-color-purple: var(--purple);
44
+ --sl-color-purple-high: var(--purple-high);
45
+ --sl-color-red-low: var(--red-low);
46
+ --sl-color-red: var(--red);
47
+ --sl-color-red-high: var(--red-high);
48
+
49
+ /* theme tokens */
50
+ --primary: var(--foreground);
51
+ --primary-foreground: var(--gray-7);
52
+ --secondary: var(--gray-6);
53
+ --secondary-foreground: var(--foreground);
54
+ --muted: var(--gray-6);
55
+ --muted-foreground: var(--gray-3);
56
+ --accent: var(--gray-5);
57
+ --accent-foreground: var(--foreground);
58
+ --destructive: var(--red);
59
+ --border: var(--gray-6);
60
+ --input: var(--gray-8);
61
+ --ring: var(--gray-4);
62
+ --card: var(--background);
63
+ --card-foreground: var(--foreground);
64
+ --code-background: var(--gray-7);
65
+ --mark-background: var(--gray-8);
66
+ --popover-background: var(--gray-7);
67
+ --popover-foreground: var(--foreground);
68
+ --markdown-foreground: var(--gray-2);
69
+
70
+ /* backdrop */
71
+ ::backdrop {
72
+ --sl-color-backdrop-overlay: color-mix(in oklab, var(--background) 80%, transparent);
73
+ }
74
+ }
75
+
76
+ .container-wrapper {
77
+ width: 100%;
78
+ padding-inline: calc(var(--spacing) * 2);
79
+ margin-inline: auto;
80
+ }
81
+
82
+ .container {
83
+ max-width: var(--container-max-width);
84
+ margin-inline: auto;
85
+ width: 100%;
86
+ }
87
+
88
+ .container-wrapper-main {
89
+ display: flex;
90
+ flex-direction: column;
91
+ max-width: none;
92
+ }
93
+
94
+ @media (min-width: 1024px) {
86
95
  .container-wrapper-main {
87
- display: flex;
88
- flex-direction: column;
89
- max-width: none;
96
+ display: grid;
97
+ grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
90
98
  }
99
+ }
91
100
 
92
- @media (min-width: 1024px) {
93
- .container-wrapper-main {
94
- display: grid;
95
- grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
96
- }
97
- }
101
+ .aside {
102
+ display: none;
103
+ height: calc(100vh - var(--header-height) - 1px);
104
+ position: sticky;
105
+ top: calc(var(--header-height) + 1px);
106
+ overflow: hidden;
107
+ }
98
108
 
109
+ @media (min-width: 1024px) {
99
110
  .aside {
100
- display: none;
101
- height: calc(100vh - var(--header-height) - 1px);
102
- position: sticky;
103
- top: calc(var(--header-height) + 1px);
104
- overflow: hidden;
105
- }
106
-
107
- @media (min-width: 1024px) {
108
- .aside {
109
- display: block;
110
- }
111
- }
112
-
113
- /* global typography refinements */
114
- * {
115
- border-color: var(--border);
116
- }
117
-
118
- body {
119
- -webkit-font-smoothing: antialiased;
120
- -moz-osx-font-smoothing: grayscale;
121
- }
122
-
123
- /* link styles for markdown content */
124
- .sl-markdown-content a:not([class]) {
125
- text-decoration: underline;
126
- text-underline-offset: calc(var(--spacing) * 1);
127
- text-decoration-color: var(--muted-foreground);
128
- color: var(--foreground);
129
- font-weight: 500;
130
- }
131
-
132
- .sl-markdown-content a:not([class]):hover {
133
- text-decoration-color: var(--foreground);
134
- }
135
-
136
- /* paragraph styles */
137
- .sl-markdown-content * {
138
- @media (min-width: 40rem) {
139
- font-size: 15px;
140
- }
141
- }
142
-
143
- .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) {
144
- font-weight: 500;
145
- letter-spacing: var(--tracking-tight);
146
- color: var(--foreground);
147
- }
148
-
149
- .sl-markdown-content h1 {
150
- font-size: 1.875rem;
151
- line-height: 2.25rem;
152
- font-weight: 600;
153
- }
154
-
155
- .sl-markdown-content h2 {
156
- font-size: 1.25rem;
157
- line-height: 1.75rem;
158
- padding-top: calc(var(--spacing) * 6);
159
- margin-top: calc(var(--spacing) * 12);
160
- }
161
-
162
- .sl-markdown-content h3 {
163
- font-size: 1.125rem;
164
- line-height: 1.75rem;
165
- }
166
-
167
- .sl-markdown-content h4 {
168
- font-size: 1rem;
169
- line-height: 1.5rem;
170
- }
171
-
172
- .sl-markdown-content h5 {
173
- font-size: 0.875rem;
174
- line-height: 1.25rem;
175
- }
176
-
177
- .sl-markdown-content h6 {
178
- font-size: 0.875rem;
179
- line-height: 1.25rem;
180
- }
181
-
182
- .sl-markdown-content .sl-heading-wrapper {
183
- --sl-anchor-icon-gap: 0.375rem;
184
- }
185
-
186
- .sl-markdown-content
187
- :not(h1, h2, h3, h4, h5, h6, .sl-heading-wrapper)
188
- + :is(.sl-heading-wrapper) {
189
- margin-top: calc(var(--spacing) * 12);
190
- }
191
-
192
- .sl-markdown-content a[data-slot='button'] {
193
- margin-top: var(--sl-content-gap-y);
194
- }
195
-
196
- .sl-markdown-content
197
- a[data-slot='button']
198
- + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
199
- margin-top: var(--sl-content-gap-y);
200
- }
201
-
202
- .sl-markdown-content .sl-heading-wrapper.level-h1 {
203
- --sl-anchor-icon-size: 1.125rem;
204
- --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
205
- line-height: 2.25rem;
206
- }
207
-
208
- .sl-markdown-content .sl-heading-wrapper.level-h2 {
209
- --sl-anchor-icon-size: calc(var(--spacing) * 5);
210
- --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
211
- line-height: 1.75rem;
212
- }
213
-
214
- .sl-markdown-content .sl-heading-wrapper.level-h3 {
215
- --sl-anchor-icon-size: 0.875rem;
216
- --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
217
- line-height: 1.75rem;
218
- }
219
-
220
- .sl-markdown-content .sl-heading-wrapper.level-h4 {
221
- --sl-anchor-icon-size: 0.875rem;
222
- --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
223
- line-height: 1.5rem;
224
- }
225
-
226
- .sl-markdown-content .sl-heading-wrapper:is(.level-h5, .level-h6) {
227
- --sl-anchor-icon-size: 0.75rem;
228
- --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
229
- line-height: 1.25rem;
230
- }
231
-
232
- .sl-markdown-content .sl-anchor-link {
233
- color: color-mix(in oklab, var(--foreground) 40%, transparent);
234
- }
235
-
236
- /* code inline */
237
- .sl-markdown-content :not(pre) > code {
238
- background: var(--muted);
239
- border-radius: calc(var(--radius) - 4px);
240
- padding: 0.25rem 0.5rem;
241
- font-size: 0.875em;
242
- }
243
-
244
- /* code blocks */
245
- .expressive-code .ec-line :where(span[style^='--']:not([class])),
246
- :root:not([data-theme='dark'])
247
- .expressive-code[data-theme='dark']
248
- .ec-line
249
- :where(span[style^='--']:not([class])) {
250
- font-size: 0.933em;
251
- }
252
-
253
- /* kbd styles */
254
- .sl-markdown-content kbd {
255
- display: inline-flex;
256
- align-items: center;
257
- justify-content: center;
258
- font-family: inherit;
259
- font-size: 0.75rem;
260
- font-weight: 500;
261
- line-height: 1;
262
- min-width: 1.25rem;
263
- min-height: 1.25rem;
264
- padding: 0.15rem 0.35rem;
265
- border-radius: calc(var(--radius) - 4px);
266
- border: 1px solid var(--border);
267
- background: var(--secondary);
268
- color: var(--foreground);
269
- }
270
-
271
- /* built-in Starlight FileTree */
272
- .sl-markdown-content starlight-file-tree {
273
- border: 0;
274
- border-radius: var(--radius);
275
- background-color: var(--code-background);
276
- }
277
-
278
- .sl-markdown-content starlight-file-tree :is(.directory > details > summary, .file) {
279
- color: var(--foreground);
280
- }
281
-
282
- .sl-markdown-content starlight-file-tree :is(.empty, .comment) {
283
- color: var(--muted-foreground);
284
- }
285
-
286
- .sl-markdown-content starlight-file-tree ul {
287
- border-inline-start-color: var(--border);
288
- }
289
-
290
- .sl-markdown-content
291
- starlight-file-tree
292
- :is(
293
- .directory > details > summary::marker,
294
- .directory > details > summary::-webkit-details-marker
295
- ) {
296
- color: var(--muted-foreground);
297
- }
298
-
299
- .sl-markdown-content starlight-file-tree svg {
300
- fill: var(--muted-foreground);
301
- }
302
-
303
- .sl-markdown-content starlight-file-tree .directory > details > summary:hover {
304
- border-radius: calc(var(--radius) - 4px);
305
- background-color: color-mix(in oklab, var(--accent) 60%, transparent);
306
- }
307
-
308
- .sl-markdown-content
309
- starlight-file-tree
310
- :is(.directory > details > summary:hover, .directory > details > summary:hover .tree-icon) {
311
- color: var(--foreground);
312
- fill: currentColor;
313
- }
314
-
315
- .sl-markdown-content starlight-file-tree .directory > details > summary:hover ~ ul {
316
- border-inline-start-color: var(--ring);
317
- }
318
-
319
- .sl-markdown-content starlight-file-tree .highlight {
320
- border-radius: calc(var(--radius) - 4px);
321
- padding-inline: calc(var(--spacing) * 1.5);
322
- color: var(--foreground);
323
- background-color: var(--secondary);
324
- }
325
-
326
- .sl-markdown-content starlight-file-tree .highlight svg.tree-icon {
327
- fill: currentColor;
328
- }
329
-
330
- /* built-in Starlight Cards and LinkCards */
111
+ display: block;
112
+ }
113
+ }
114
+
115
+ /* global typography refinements */
116
+ * {
117
+ border-color: var(--border);
118
+ }
119
+
120
+ body {
121
+ -webkit-font-smoothing: antialiased;
122
+ -moz-osx-font-smoothing: grayscale;
123
+ }
124
+
125
+ /* link styles for markdown content */
126
+ .sl-markdown-content a:not([class]) {
127
+ text-decoration: underline;
128
+ text-underline-offset: calc(var(--spacing) * 1);
129
+ text-decoration-color: var(--muted-foreground);
130
+ color: var(--foreground);
131
+ font-weight: 500;
132
+ }
133
+
134
+ .sl-markdown-content a:not([class]):hover {
135
+ text-decoration-color: var(--foreground);
136
+ }
137
+
138
+ /* paragraph styles */
139
+ .sl-markdown-content * {
140
+ @media (min-width: 40rem) {
141
+ font-size: 15px;
142
+ }
143
+ }
144
+
145
+ .sl-markdown-content :is(h1, h2, h3, h4, h5, h6) {
146
+ font-weight: 500;
147
+ letter-spacing: var(--tracking-tight);
148
+ color: var(--foreground);
149
+ }
150
+
151
+ .sl-markdown-content h1 {
152
+ font-size: 1.875rem;
153
+ line-height: 2.25rem;
154
+ font-weight: 600;
155
+ }
156
+
157
+ .sl-markdown-content h2 {
158
+ font-size: 1.25rem;
159
+ line-height: 1.75rem;
160
+ padding-top: calc(var(--spacing) * 6);
161
+ margin-top: calc(var(--spacing) * 12);
162
+ }
163
+
164
+ .sl-markdown-content h3 {
165
+ font-size: 1.125rem;
166
+ line-height: 1.75rem;
167
+ }
168
+
169
+ .sl-markdown-content h4 {
170
+ font-size: 1rem;
171
+ line-height: 1.5rem;
172
+ }
173
+
174
+ .sl-markdown-content h5 {
175
+ font-size: 0.875rem;
176
+ line-height: 1.25rem;
177
+ }
178
+
179
+ .sl-markdown-content h6 {
180
+ font-size: 0.875rem;
181
+ line-height: 1.25rem;
182
+ }
183
+
184
+ .sl-markdown-content .sl-heading-wrapper {
185
+ --sl-anchor-icon-gap: 0.375rem;
186
+ }
187
+
188
+ .sl-markdown-content
189
+ :not(h1, h2, h3, h4, h5, h6, .sl-heading-wrapper)
190
+ + :is(.sl-heading-wrapper) {
191
+ margin-top: calc(var(--spacing) * 12);
192
+ }
193
+
194
+ .sl-markdown-content a[data-slot="button"] {
195
+ margin-top: var(--sl-content-gap-y);
196
+ }
197
+
198
+ .sl-markdown-content
199
+ a[data-slot="button"]
200
+ + :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
201
+ margin-top: var(--sl-content-gap-y);
202
+ }
203
+
204
+ .sl-markdown-content .sl-heading-wrapper.level-h1 {
205
+ --sl-anchor-icon-size: 1.125rem;
206
+ --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
207
+ line-height: 2.25rem;
208
+ }
209
+
210
+ .sl-markdown-content .sl-heading-wrapper.level-h2 {
211
+ --sl-anchor-icon-size: calc(var(--spacing) * 5);
212
+ --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
213
+ line-height: 1.75rem;
214
+ }
215
+
216
+ .sl-markdown-content .sl-heading-wrapper.level-h3 {
217
+ --sl-anchor-icon-size: 0.875rem;
218
+ --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
219
+ line-height: 1.75rem;
220
+ }
221
+
222
+ .sl-markdown-content .sl-heading-wrapper.level-h4 {
223
+ --sl-anchor-icon-size: 0.875rem;
224
+ --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
225
+ line-height: 1.5rem;
226
+ }
227
+
228
+ .sl-markdown-content .sl-heading-wrapper:is(.level-h5, .level-h6) {
229
+ --sl-anchor-icon-size: 0.75rem;
230
+ --sl-anchor-icon-space: calc(var(--sl-anchor-icon-size) + var(--sl-anchor-icon-gap));
231
+ line-height: 1.25rem;
232
+ }
233
+
234
+ .sl-markdown-content .sl-anchor-link {
235
+ color: color-mix(in oklab, var(--foreground) 40%, transparent);
236
+ }
237
+
238
+ /* code inline */
239
+ .sl-markdown-content :not(pre) > code {
240
+ background: var(--muted);
241
+ border-radius: calc(var(--radius) - 4px);
242
+ padding: 0.25rem 0.5rem;
243
+ font-size: 0.875em;
244
+ }
245
+
246
+ /* code blocks */
247
+ .expressive-code .ec-line :where(span[style^="--"]:not([class])),
248
+ :root:not([data-theme="dark"])
249
+ .expressive-code[data-theme="dark"]
250
+ .ec-line
251
+ :where(span[style^="--"]:not([class])) {
252
+ font-size: 0.933em;
253
+ }
254
+
255
+ /* kbd styles */
256
+ .sl-markdown-content kbd {
257
+ display: inline-flex;
258
+ align-items: center;
259
+ justify-content: center;
260
+ font-family: inherit;
261
+ font-size: 0.75rem;
262
+ font-weight: 500;
263
+ line-height: 1;
264
+ min-width: 1.25rem;
265
+ min-height: 1.25rem;
266
+ padding: 0.15rem 0.35rem;
267
+ border-radius: calc(var(--radius) - 4px);
268
+ border: 1px solid var(--border);
269
+ background: var(--secondary);
270
+ color: var(--foreground);
271
+ }
272
+
273
+ /* built-in Starlight FileTree */
274
+ .sl-markdown-content starlight-file-tree {
275
+ border: 0;
276
+ border-radius: var(--radius);
277
+ background-color: var(--code-background);
278
+ }
279
+
280
+ .sl-markdown-content starlight-file-tree :is(.directory > details > summary, .file) {
281
+ color: var(--foreground);
282
+ }
283
+
284
+ .sl-markdown-content starlight-file-tree :is(.empty, .comment) {
285
+ color: var(--muted-foreground);
286
+ }
287
+
288
+ .sl-markdown-content starlight-file-tree ul {
289
+ border-inline-start-color: var(--border);
290
+ }
291
+
292
+ .sl-markdown-content
293
+ starlight-file-tree
294
+ :is(
295
+ .directory > details > summary::marker,
296
+ .directory > details > summary::-webkit-details-marker
297
+ ) {
298
+ color: var(--muted-foreground);
299
+ }
300
+
301
+ .sl-markdown-content starlight-file-tree svg {
302
+ fill: var(--muted-foreground);
303
+ }
304
+
305
+ .sl-markdown-content starlight-file-tree .directory > details > summary:hover {
306
+ border-radius: calc(var(--radius) - 4px);
307
+ background-color: color-mix(in oklab, var(--accent) 60%, transparent);
308
+ }
309
+
310
+ .sl-markdown-content
311
+ starlight-file-tree
312
+ :is(.directory > details > summary:hover, .directory > details > summary:hover .tree-icon) {
313
+ color: var(--foreground);
314
+ fill: currentColor;
315
+ }
316
+
317
+ .sl-markdown-content starlight-file-tree .directory > details > summary:hover ~ ul {
318
+ border-inline-start-color: var(--ring);
319
+ }
320
+
321
+ .sl-markdown-content starlight-file-tree .highlight {
322
+ border-radius: calc(var(--radius) - 4px);
323
+ padding-inline: calc(var(--spacing) * 1.5);
324
+ color: var(--foreground);
325
+ background-color: var(--secondary);
326
+ }
327
+
328
+ .sl-markdown-content starlight-file-tree .highlight svg.tree-icon {
329
+ fill: currentColor;
330
+ }
331
+
332
+ /* built-in Starlight Cards and LinkCards */
333
+ .sl-markdown-content .card-grid {
334
+ gap: 1rem;
335
+ }
336
+
337
+ /* Starlight sizes the two-up grid as `1fr 1fr`, which is really
338
+ `minmax(auto, 1fr)`: a track can never shrink below the min-content
339
+ width of what it holds. A card full of long inline code -- file paths
340
+ like `data/generated/records.full.json` -- therefore pushes its track
341
+ past half the content column, and the second card lands outside the
342
+ article, on top of the table of contents. `minmax(0, 1fr)` lets the
343
+ tracks shrink, and `anywhere` (not `break-word`, which does not affect
344
+ intrinsic sizing) lets the code inside them wrap to fit. */
345
+ @media (min-width: 50rem) {
331
346
  .sl-markdown-content .card-grid {
332
- gap: 1rem;
333
- grid-auto-rows: 1fr;
334
- }
335
-
336
- .sl-markdown-content .card-grid > * {
337
- height: 100%;
338
- }
339
-
340
- .sl-markdown-content :is(.card, .sl-link-card) {
341
- border: 0;
342
- border-radius: calc(var(--radius) + 0.25rem);
343
- padding: 1.5rem;
344
- background-color: var(--code-background);
345
- box-shadow: none;
346
- transition: background-color 0.15s;
347
- height: 100%;
348
- }
349
-
350
- .sl-markdown-content :is(.card, .sl-link-card):hover {
351
- background-color: color-mix(in oklab, var(--code-background) 75%, var(--secondary));
352
- }
353
-
354
- .sl-markdown-content .card {
355
- --card-icon-background: var(--secondary);
356
- gap: 0.75rem;
357
- }
358
-
359
- .sl-markdown-content .card:nth-child(4n + 1) {
360
- --card-icon-background: color-mix(in oklab, var(--sl-color-orange) 18%, var(--secondary));
361
- }
362
-
363
- .sl-markdown-content .card:nth-child(4n + 2) {
364
- --card-icon-background: color-mix(in oklab, var(--sl-color-purple) 18%, var(--secondary));
365
- }
366
-
367
- .sl-markdown-content .card:nth-child(4n + 3) {
368
- --card-icon-background: color-mix(in oklab, var(--sl-color-green) 18%, var(--secondary));
369
- }
370
-
371
- .sl-markdown-content .card:nth-child(4n + 4) {
372
- --card-icon-background: color-mix(in oklab, var(--sl-color-red) 18%, var(--secondary));
373
- }
374
-
375
- .sl-markdown-content .card .title {
376
- gap: 0.75rem;
377
- font-size: 0.875rem;
378
- font-weight: 500;
379
- line-height: 1.25rem;
380
- color: var(--foreground);
381
- }
382
-
383
- .sl-markdown-content .card .icon {
384
- border: 0;
385
- box-sizing: content-box;
386
- width: 1rem;
387
- height: 1rem;
388
- padding: 0.5rem;
389
- border-radius: calc(var(--radius) - 2px);
390
- color: var(--foreground);
391
- background-color: var(--card-icon-background);
392
- }
393
-
394
- .sl-markdown-content .card:nth-child(n) {
395
- --sl-card-border: var(--border);
396
- --sl-card-bg: var(--secondary);
397
- }
398
-
399
- .sl-markdown-content .card .body {
400
- font-size: 0.875rem;
401
- line-height: 1.625rem;
402
- color: var(--muted-foreground);
403
- }
404
-
405
- .sl-markdown-content .sl-link-card {
406
- gap: 0.75rem;
407
- align-items: start;
408
- }
409
-
410
- .sl-markdown-content .sl-link-card .stack {
411
- gap: 0.25rem;
412
- }
413
-
414
- .sl-markdown-content .sl-link-card .title {
415
- font-size: 0.875rem;
416
- font-weight: 500;
417
- line-height: 1.25rem;
418
- color: var(--foreground);
419
- }
420
-
421
- .sl-markdown-content .sl-link-card .description {
422
- font-size: 0.875rem;
423
- line-height: 1.625rem;
424
- color: var(--muted-foreground);
425
- }
426
-
427
- .sl-markdown-content .sl-link-card .icon {
428
- color: var(--muted-foreground);
429
- }
430
-
431
- .sl-markdown-content .sl-link-card:hover .icon {
432
- color: var(--foreground);
433
- }
434
-
435
- /* built-in Starlight Asides */
436
- .sl-markdown-content .starlight-aside {
437
- --aside-background: var(--code-background);
438
- --aside-border: var(--border);
439
- --aside-title: var(--foreground);
440
- --aside-content: var(--muted-foreground);
441
- padding: 0.875rem 1rem;
442
- border: 1px solid var(--aside-border);
443
- border-inline-start: 1px solid var(--aside-border);
444
- border-radius: var(--radius);
445
- background-color: var(--aside-background);
446
- color: var(--aside-content);
447
- }
448
-
449
- .sl-markdown-content .starlight-aside--note {
450
- --aside-background: color-mix(
451
- in oklab,
452
- var(--sl-color-blue-low) 78%,
453
- var(--code-background)
454
- );
455
- --aside-border: color-mix(in oklab, var(--sl-color-blue) 45%, var(--border));
456
- --aside-title: var(--sl-color-blue-high);
457
- --aside-content: color-mix(in oklab, var(--sl-color-blue-high) 72%, var(--foreground));
458
- }
459
-
460
- .sl-markdown-content .starlight-aside--tip {
461
- --aside-background: color-mix(
462
- in oklab,
463
- var(--sl-color-purple-low) 78%,
464
- var(--code-background)
465
- );
466
- --aside-border: color-mix(in oklab, var(--sl-color-purple) 45%, var(--border));
467
- --aside-title: var(--sl-color-purple-high);
468
- --aside-content: color-mix(in oklab, var(--sl-color-purple-high) 72%, var(--foreground));
469
- }
470
-
471
- .sl-markdown-content .starlight-aside--caution {
472
- --aside-background: color-mix(
473
- in oklab,
474
- var(--sl-color-orange-low) 82%,
475
- var(--code-background)
476
- );
477
- --aside-border: color-mix(in oklab, var(--sl-color-orange) 48%, var(--border));
478
- --aside-title: var(--sl-color-orange-high);
479
- --aside-content: color-mix(in oklab, var(--sl-color-orange-high) 72%, var(--foreground));
480
- }
481
-
482
- .sl-markdown-content .starlight-aside--danger {
483
- --aside-background: color-mix(
484
- in oklab,
485
- var(--sl-color-red-low) 80%,
486
- var(--code-background)
487
- );
488
- --aside-border: color-mix(in oklab, var(--sl-color-red) 48%, var(--border));
489
- --aside-title: var(--sl-color-red-high);
490
- --aside-content: color-mix(in oklab, var(--sl-color-red-high) 72%, var(--foreground));
491
- }
492
-
493
- .sl-markdown-content .starlight-aside__title {
494
- gap: 0.625rem;
495
- align-items: center;
496
- font-size: 0.875rem;
497
- font-weight: 600;
498
- line-height: 1.25rem;
499
- color: var(--aside-title);
500
- }
501
-
502
- .sl-markdown-content .starlight-aside__icon {
503
- width: 1rem;
504
- height: 1rem;
505
- font-size: 1rem;
506
- flex-shrink: 0;
507
- color: var(--aside-title);
508
- }
509
-
510
- .sl-markdown-content .starlight-aside__title + .starlight-aside__content {
511
- margin-top: calc(var(--spacing) * 1.5);
512
- }
513
-
514
- .sl-markdown-content .starlight-aside__content {
515
- font-size: 0.875rem;
516
- line-height: 1.625rem;
517
- color: var(--aside-content);
518
- }
519
-
520
- .sl-markdown-content .starlight-aside__content a {
521
- color: var(--aside-title);
522
- text-decoration-color: color-mix(in oklab, var(--aside-title) 45%, transparent);
523
- }
524
-
525
- .sl-markdown-content .starlight-aside__content a:hover {
526
- text-decoration-color: currentColor;
527
- }
528
-
529
- /* built-in Starlight Badges */
530
- .sl-markdown-content .sl-badge {
531
- --badge-background: var(--secondary);
532
- --badge-foreground: var(--secondary-foreground);
533
- --badge-border: transparent;
534
- display: inline-flex;
535
- align-items: center;
536
- justify-content: center;
537
- gap: 0.25rem;
538
- min-height: 1.25rem;
539
- padding: 0.125rem 0.5rem;
540
- border: 1px solid var(--badge-border);
541
- border-radius: 9999px;
542
- font-family: inherit;
543
- font-size: 0.75rem;
544
- font-weight: 500;
545
- line-height: 1;
546
- color: var(--badge-foreground);
547
- background-color: var(--badge-background);
548
- vertical-align: middle;
549
- }
550
-
551
- .sl-markdown-content .sl-badge.default {
552
- --badge-background: var(--secondary);
553
- --badge-foreground: var(--secondary-foreground);
554
- }
555
-
556
- .sl-markdown-content .sl-badge.note {
557
- --badge-background: color-mix(
558
- in oklab,
559
- var(--sl-color-blue-low) 88%,
560
- var(--code-background)
561
- );
562
- --badge-foreground: var(--sl-color-blue-high);
563
- }
564
-
565
- .sl-markdown-content .sl-badge.success {
566
- --badge-background: color-mix(
567
- in oklab,
568
- var(--sl-color-green-low) 88%,
569
- var(--code-background)
570
- );
571
- --badge-foreground: var(--sl-color-green-high);
572
- }
573
-
574
- .sl-markdown-content .sl-badge.tip {
575
- --badge-background: color-mix(
576
- in oklab,
577
- var(--sl-color-purple-low) 88%,
578
- var(--code-background)
579
- );
580
- --badge-foreground: var(--sl-color-purple-high);
581
- }
582
-
583
- .sl-markdown-content .sl-badge.caution {
584
- --badge-background: color-mix(
585
- in oklab,
586
- var(--sl-color-orange-low) 90%,
587
- var(--code-background)
588
- );
589
- --badge-foreground: var(--sl-color-orange-high);
590
- }
591
-
592
- .sl-markdown-content .sl-badge.danger {
593
- --badge-background: color-mix(
594
- in oklab,
595
- var(--sl-color-red-low) 90%,
596
- var(--code-background)
597
- );
598
- --badge-foreground: var(--sl-color-red-high);
599
- }
600
-
601
- .sl-markdown-content .sl-badge.small {
602
- min-height: 1.25rem;
603
- padding-inline: calc(var(--spacing) * 2);
604
- font-size: 0.75rem;
605
- }
606
-
607
- .sl-markdown-content .sl-badge.medium {
608
- min-height: 1.375rem;
609
- padding-inline: calc(var(--spacing) * 2.5);
610
- font-size: 0.75rem;
611
- }
612
-
613
- .sl-markdown-content .sl-badge.large {
614
- min-height: 1.5rem;
615
- padding-inline: calc(var(--spacing) * 3);
616
- font-size: 0.8125rem;
617
- }
618
-
619
- .sidebar-content .sl-badge {
620
- font-family: inherit;
621
- font-size: 0.6875rem;
622
- font-weight: 500;
623
- line-height: 1;
624
- min-height: 1.125rem;
625
- padding: 0.125rem 0.4375rem;
626
- border-radius: 9999px;
627
- }
628
-
629
- .sidebar-content a[aria-current='page'] > .sl-badge {
630
- background-color: color-mix(in oklab, currentColor 12%, transparent);
631
- border-color: transparent;
632
- color: inherit;
633
- }
634
-
635
- /* built-in Starlight LinkButtons */
636
- .sl-link-button {
637
- display: inline-flex;
638
- align-items: center;
639
- justify-content: center;
640
- gap: 0.375rem;
641
- height: 2rem;
642
- padding: 0 0.75rem;
643
- border: 1px solid transparent;
644
- border-radius: var(--radius);
645
- font-size: 0.875rem;
646
- font-weight: 500;
647
- line-height: 1;
648
- white-space: nowrap;
649
- text-decoration: none;
650
- transition-property: color, background-color, border-color, box-shadow;
651
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
652
- transition-duration: 0.15s;
653
- outline: none;
654
- outline-offset: 0.25rem;
655
- box-shadow: none;
656
- }
657
-
658
- .sl-link-button:hover {
659
- text-decoration: none;
660
- }
661
-
662
- .sl-link-button:focus-visible {
663
- border-color: var(--ring);
664
- box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent);
665
- }
666
-
667
- .sl-link-button svg {
668
- width: 1rem;
669
- height: 1rem;
670
- flex-shrink: 0;
671
- }
672
-
673
- .sl-link-button.primary {
674
- color: var(--primary-foreground);
675
- background-color: var(--primary);
676
- border-color: transparent;
677
- }
678
-
679
- .sl-link-button.primary:hover {
680
- color: var(--primary-foreground);
681
- background-color: color-mix(in oklab, var(--primary) 88%, var(--background));
682
- }
683
-
684
- .sl-link-button.secondary {
685
- color: var(--foreground);
686
- background-color: color-mix(in oklab, var(--background) 82%, var(--secondary));
687
- border-color: var(--border);
688
- }
689
-
690
- .sl-link-button.secondary:hover {
691
- color: var(--foreground);
692
- background-color: var(--accent);
693
- }
694
-
695
- .sl-link-button.minimal {
696
- color: var(--foreground);
697
- background-color: transparent;
698
- border-color: transparent;
699
- }
700
-
701
- .sl-link-button.minimal:hover {
702
- color: var(--accent-foreground);
703
- background-color: var(--accent);
704
- }
705
-
706
- /* built-in Starlight Steps */
707
- .sl-markdown-content .sl-steps {
708
- --bullet-size: 1.75rem;
709
- --bullet-margin: 0.25rem;
710
- margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
711
- }
712
-
713
- .sl-markdown-content .sl-steps > li {
714
- padding-inline-start: calc(var(--bullet-size) + 1rem);
715
- padding-bottom: calc(var(--spacing) * 4);
716
- min-height: calc(var(--bullet-size) + var(--bullet-margin));
717
- }
718
-
719
- .sl-markdown-content .sl-steps > li::before {
720
- font-size: 0.875rem;
721
- font-weight: 500;
722
- color: var(--muted-foreground);
723
- background-color: var(--muted);
724
- box-shadow: none;
725
- }
726
-
727
- .sl-markdown-content .sl-steps > li::after {
728
- background-color: var(--border);
729
- }
730
-
731
- .sl-markdown-content .sl-steps > li:last-child {
732
- padding-bottom: 0;
733
- }
734
-
735
- .sl-markdown-content .sl-steps > li:last-child::after {
736
- display: none;
737
- }
738
-
739
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper {
740
- display: flex;
741
- align-items: center;
742
- gap: 0.5rem;
743
- height: var(--bullet-size);
744
- min-height: var(--bullet-size);
745
- transform: none;
746
- margin-bottom: 0;
747
- }
748
-
749
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper :is(h3, h4) {
750
- font-size: 1rem;
751
- line-height: 1.75rem;
752
- font-weight: 500;
753
- margin: 0;
754
- }
755
-
756
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper .sl-anchor-link {
757
- height: var(--bullet-size);
758
- line-height: var(--bullet-size);
759
- align-items: center;
760
- }
761
-
762
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper .sl-anchor-icon > svg {
763
- vertical-align: middle;
764
- transform: none;
765
- }
766
-
767
- .sl-markdown-content .sl-steps > li > p {
768
- color: var(--muted-foreground);
769
- }
770
-
771
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper + p {
772
- margin-top: 0;
773
- }
774
-
775
- /* built-in Starlight Tabs */
776
- .sl-markdown-content starlight-tabs {
777
- display: block;
778
- margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
779
- }
780
-
781
- .sl-markdown-content starlight-tabs .tablist-wrapper {
782
- overflow-x: auto;
783
- padding: 0.25rem 0.75rem;
784
- border-radius: calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem) 0 0;
785
- background-color: var(--code-background);
786
- box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--border) 85%, transparent);
787
- }
788
-
789
- .sl-markdown-content starlight-tabs [role='tablist'] {
790
- display: flex;
791
- align-items: center;
792
- gap: 0.25rem;
793
- min-width: max-content;
794
- border-bottom: 0;
795
- padding: 0;
796
- }
797
-
798
- .sl-markdown-content starlight-tabs .tab > [role='tab'] {
799
- display: inline-flex;
800
- align-items: center;
801
- gap: 0.375rem;
802
- min-height: 1.75rem;
803
- padding: 0.125rem 0.5rem 0.25rem;
804
- border-radius: calc(var(--radius) - 2px);
805
- color: color-mix(in oklab, var(--foreground) 60%, transparent);
806
- font-size: 0.875rem;
807
- font-weight: 500;
808
- line-height: 1.25rem;
809
- box-shadow: none;
810
- transition-property: color, background-color, box-shadow;
811
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
812
- transition-duration: 0.15s;
813
- }
814
-
815
- .sl-markdown-content starlight-tabs .tab > [role='tab']:hover {
816
- color: var(--foreground);
817
- background-color: color-mix(in oklab, var(--background) 35%, transparent);
818
- }
819
-
820
- .sl-markdown-content starlight-tabs .tab > [role='tab']:focus-visible {
821
- outline: none;
822
- box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent);
823
- }
824
-
825
- .sl-markdown-content starlight-tabs .tab [role='tab'][aria-selected='true'] {
826
- color: var(--foreground);
827
- background-color: var(--background);
828
- box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
829
- }
830
-
831
- .sl-markdown-content starlight-tabs .tab > [role='tab'] svg {
832
- width: 0.875rem;
833
- height: 0.875rem;
834
- color: currentColor;
835
- }
836
-
837
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] {
838
- margin-top: 0;
839
- padding: 1rem;
840
- border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
841
- background-color: var(--code-background);
842
- }
843
-
844
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] > :first-child {
845
- margin-top: 0;
846
- }
847
-
848
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] > :last-child {
849
- margin-bottom: 0;
850
- }
851
-
852
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] :is(pre, figure) {
853
- margin: 0;
854
- }
855
-
856
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] > .expressive-code {
857
- margin: -1rem;
858
- }
859
-
860
- .sl-markdown-content
861
- starlight-tabs
862
- .tablist-wrapper
863
- ~ [role='tabpanel']
864
- > .expressive-code
865
- .frame {
866
- --button-spacing: 0.4rem;
867
- border: 0;
868
- border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
869
- }
870
-
871
- .sl-markdown-content
872
- starlight-tabs
873
- .tablist-wrapper
874
- ~ [role='tabpanel']
875
- > .expressive-code
876
- .header {
877
- display: none;
878
- }
879
-
880
- .sl-markdown-content
881
- starlight-tabs
882
- .tablist-wrapper
883
- ~ [role='tabpanel']
884
- > .expressive-code
885
- pre {
886
- border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
887
- }
888
-
889
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] p {
890
- color: color-mix(in oklab, var(--foreground) 72%, var(--muted-foreground));
891
- }
892
-
893
- /* footer link styles */
894
- [data-slot='footer-text'] a {
895
- text-decoration: underline;
896
- text-underline-offset: calc(var(--spacing) * 1);
897
- color: var(--muted-foreground);
898
- }
899
-
900
- [data-slot='footer-text'] a:hover {
901
- color: var(--foreground);
902
- }
347
+ grid-template-columns: repeat(2, minmax(0, 1fr));
348
+ }
349
+ }
350
+
351
+ .sl-markdown-content :is(.card, .sl-link-card) :is(code, a) {
352
+ overflow-wrap: anywhere;
353
+ }
354
+
355
+ .sl-markdown-content :is(.card, .sl-link-card) {
356
+ border: 0;
357
+ border-radius: calc(var(--radius) + 0.25rem);
358
+ padding: 1.5rem;
359
+ background-color: var(--code-background);
360
+ box-shadow: none;
361
+ transition: background-color 0.15s;
362
+ }
363
+
364
+ .sl-markdown-content :is(.card, .sl-link-card):hover {
365
+ background-color: color-mix(in oklab, var(--code-background) 75%, var(--secondary));
366
+ }
367
+
368
+ .sl-markdown-content .card {
369
+ --card-icon-background: var(--secondary);
370
+ gap: 0.75rem;
371
+ }
372
+
373
+ .sl-markdown-content .card:nth-child(4n + 1) {
374
+ --card-icon-background: color-mix(in oklab, var(--sl-color-orange) 18%, var(--secondary));
375
+ }
376
+
377
+ .sl-markdown-content .card:nth-child(4n + 2) {
378
+ --card-icon-background: color-mix(in oklab, var(--sl-color-purple) 18%, var(--secondary));
379
+ }
380
+
381
+ .sl-markdown-content .card:nth-child(4n + 3) {
382
+ --card-icon-background: color-mix(in oklab, var(--sl-color-green) 18%, var(--secondary));
383
+ }
384
+
385
+ .sl-markdown-content .card:nth-child(4n + 4) {
386
+ --card-icon-background: color-mix(in oklab, var(--sl-color-red) 18%, var(--secondary));
387
+ }
388
+
389
+ .sl-markdown-content .card .title {
390
+ gap: 0.75rem;
391
+ font-size: 0.875rem;
392
+ font-weight: 500;
393
+ line-height: 1.25rem;
394
+ color: var(--foreground);
395
+ }
396
+
397
+ .sl-markdown-content .card .icon {
398
+ border: 0;
399
+ box-sizing: content-box;
400
+ width: 1rem;
401
+ height: 1rem;
402
+ padding: 0.5rem;
403
+ border-radius: calc(var(--radius) - 2px);
404
+ color: var(--foreground);
405
+ background-color: var(--card-icon-background);
406
+ }
407
+
408
+ .sl-markdown-content .card:nth-child(n) {
409
+ --sl-card-border: var(--border);
410
+ --sl-card-bg: var(--secondary);
411
+ }
412
+
413
+ .sl-markdown-content .card .body {
414
+ font-size: 0.875rem;
415
+ line-height: 1.625rem;
416
+ color: var(--muted-foreground);
417
+ }
418
+
419
+ .sl-markdown-content .sl-link-card {
420
+ gap: 0.75rem;
421
+ align-items: start;
422
+ }
423
+
424
+ .sl-markdown-content .sl-link-card .stack {
425
+ gap: 0.25rem;
426
+ }
427
+
428
+ .sl-markdown-content .sl-link-card .title {
429
+ font-size: 0.875rem;
430
+ font-weight: 500;
431
+ line-height: 1.25rem;
432
+ color: var(--foreground);
433
+ }
434
+
435
+ .sl-markdown-content .sl-link-card .description {
436
+ font-size: 0.875rem;
437
+ line-height: 1.625rem;
438
+ color: var(--muted-foreground);
439
+ }
440
+
441
+ .sl-markdown-content .sl-link-card .icon {
442
+ color: var(--muted-foreground);
443
+ }
444
+
445
+ .sl-markdown-content .sl-link-card:hover .icon {
446
+ color: var(--foreground);
447
+ }
448
+
449
+ /* built-in Starlight Asides */
450
+ .sl-markdown-content .starlight-aside {
451
+ --aside-background: var(--code-background);
452
+ --aside-border: var(--border);
453
+ --aside-title: var(--foreground);
454
+ --aside-content: var(--muted-foreground);
455
+ padding: 0.875rem 1rem;
456
+ border: 1px solid var(--aside-border);
457
+ border-inline-start: 1px solid var(--aside-border);
458
+ border-radius: var(--radius);
459
+ background-color: var(--aside-background);
460
+ color: var(--aside-content);
461
+ }
462
+
463
+ .sl-markdown-content .starlight-aside--note {
464
+ --aside-background: color-mix(in oklab, var(--sl-color-blue-low) 78%, var(--code-background));
465
+ --aside-border: color-mix(in oklab, var(--sl-color-blue) 45%, var(--border));
466
+ --aside-title: var(--sl-color-blue-high);
467
+ --aside-content: color-mix(in oklab, var(--sl-color-blue-high) 72%, var(--foreground));
468
+ }
469
+
470
+ .sl-markdown-content .starlight-aside--tip {
471
+ --aside-background: color-mix(in oklab, var(--sl-color-purple-low) 78%, var(--code-background));
472
+ --aside-border: color-mix(in oklab, var(--sl-color-purple) 45%, var(--border));
473
+ --aside-title: var(--sl-color-purple-high);
474
+ --aside-content: color-mix(in oklab, var(--sl-color-purple-high) 72%, var(--foreground));
475
+ }
476
+
477
+ .sl-markdown-content .starlight-aside--caution {
478
+ --aside-background: color-mix(in oklab, var(--sl-color-orange-low) 82%, var(--code-background));
479
+ --aside-border: color-mix(in oklab, var(--sl-color-orange) 48%, var(--border));
480
+ --aside-title: var(--sl-color-orange-high);
481
+ --aside-content: color-mix(in oklab, var(--sl-color-orange-high) 72%, var(--foreground));
482
+ }
483
+
484
+ .sl-markdown-content .starlight-aside--danger {
485
+ --aside-background: color-mix(in oklab, var(--sl-color-red-low) 80%, var(--code-background));
486
+ --aside-border: color-mix(in oklab, var(--sl-color-red) 48%, var(--border));
487
+ --aside-title: var(--sl-color-red-high);
488
+ --aside-content: color-mix(in oklab, var(--sl-color-red-high) 72%, var(--foreground));
489
+ }
490
+
491
+ .sl-markdown-content .starlight-aside__title {
492
+ gap: 0.625rem;
493
+ align-items: center;
494
+ font-size: 0.875rem;
495
+ font-weight: 600;
496
+ line-height: 1.25rem;
497
+ color: var(--aside-title);
498
+ }
499
+
500
+ .sl-markdown-content .starlight-aside__icon {
501
+ width: 1rem;
502
+ height: 1rem;
503
+ font-size: 1rem;
504
+ flex-shrink: 0;
505
+ color: var(--aside-title);
506
+ }
507
+
508
+ .sl-markdown-content .starlight-aside__title + .starlight-aside__content {
509
+ margin-top: calc(var(--spacing) * 1.5);
510
+ }
511
+
512
+ .sl-markdown-content .starlight-aside__content {
513
+ font-size: 0.875rem;
514
+ line-height: 1.625rem;
515
+ color: var(--aside-content);
516
+ }
517
+
518
+ .sl-markdown-content .starlight-aside__content a {
519
+ color: var(--aside-title);
520
+ text-decoration-color: color-mix(in oklab, var(--aside-title) 45%, transparent);
521
+ }
522
+
523
+ .sl-markdown-content .starlight-aside__content a:hover {
524
+ text-decoration-color: currentColor;
525
+ }
526
+
527
+ /* built-in Starlight Badges */
528
+ .sl-markdown-content .sl-badge {
529
+ --badge-background: var(--secondary);
530
+ --badge-foreground: var(--secondary-foreground);
531
+ --badge-border: transparent;
532
+ display: inline-flex;
533
+ align-items: center;
534
+ justify-content: center;
535
+ gap: 0.25rem;
536
+ min-height: 1.25rem;
537
+ padding: 0.125rem 0.5rem;
538
+ border: 1px solid var(--badge-border);
539
+ border-radius: 9999px;
540
+ font-family: inherit;
541
+ font-size: 0.75rem;
542
+ font-weight: 500;
543
+ line-height: 1;
544
+ color: var(--badge-foreground);
545
+ background-color: var(--badge-background);
546
+ vertical-align: middle;
547
+ }
548
+
549
+ .sl-markdown-content .sl-badge.default {
550
+ --badge-background: var(--secondary);
551
+ --badge-foreground: var(--secondary-foreground);
552
+ }
553
+
554
+ .sl-markdown-content .sl-badge.note {
555
+ --badge-background: color-mix(in oklab, var(--sl-color-blue-low) 88%, var(--code-background));
556
+ --badge-foreground: var(--sl-color-blue-high);
557
+ }
558
+
559
+ .sl-markdown-content .sl-badge.success {
560
+ --badge-background: color-mix(in oklab, var(--sl-color-green-low) 88%, var(--code-background));
561
+ --badge-foreground: var(--sl-color-green-high);
562
+ }
563
+
564
+ .sl-markdown-content .sl-badge.tip {
565
+ --badge-background: color-mix(in oklab, var(--sl-color-purple-low) 88%, var(--code-background));
566
+ --badge-foreground: var(--sl-color-purple-high);
567
+ }
568
+
569
+ .sl-markdown-content .sl-badge.caution {
570
+ --badge-background: color-mix(in oklab, var(--sl-color-orange-low) 90%, var(--code-background));
571
+ --badge-foreground: var(--sl-color-orange-high);
572
+ }
573
+
574
+ .sl-markdown-content .sl-badge.danger {
575
+ --badge-background: color-mix(in oklab, var(--sl-color-red-low) 90%, var(--code-background));
576
+ --badge-foreground: var(--sl-color-red-high);
577
+ }
578
+
579
+ .sl-markdown-content .sl-badge.small {
580
+ min-height: 1.25rem;
581
+ padding-inline: calc(var(--spacing) * 2);
582
+ font-size: 0.75rem;
583
+ }
584
+
585
+ .sl-markdown-content .sl-badge.medium {
586
+ min-height: 1.375rem;
587
+ padding-inline: calc(var(--spacing) * 2.5);
588
+ font-size: 0.75rem;
589
+ }
590
+
591
+ .sl-markdown-content .sl-badge.large {
592
+ min-height: 1.5rem;
593
+ padding-inline: calc(var(--spacing) * 3);
594
+ font-size: 0.8125rem;
595
+ }
596
+
597
+ .sidebar-content .sl-badge {
598
+ font-family: inherit;
599
+ font-size: 0.6875rem;
600
+ font-weight: 500;
601
+ line-height: 1;
602
+ min-height: 1.125rem;
603
+ padding: 0.125rem 0.4375rem;
604
+ border-radius: 9999px;
605
+ }
606
+
607
+ .sidebar-content a[aria-current="page"] > .sl-badge {
608
+ background-color: color-mix(in oklab, currentColor 12%, transparent);
609
+ border-color: transparent;
610
+ color: inherit;
611
+ }
612
+
613
+ /* built-in Starlight LinkButtons */
614
+ .sl-link-button {
615
+ display: inline-flex;
616
+ align-items: center;
617
+ justify-content: center;
618
+ gap: 0.375rem;
619
+ height: 2rem;
620
+ padding: 0 0.75rem;
621
+ border: 1px solid transparent;
622
+ border-radius: var(--radius);
623
+ font-size: 0.875rem;
624
+ font-weight: 500;
625
+ line-height: 1;
626
+ white-space: nowrap;
627
+ text-decoration: none;
628
+ transition-property: color, background-color, border-color, box-shadow;
629
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
630
+ transition-duration: 0.15s;
631
+ outline: none;
632
+ outline-offset: 0.25rem;
633
+ box-shadow: none;
634
+ }
635
+
636
+ .sl-link-button:hover {
637
+ text-decoration: none;
638
+ }
639
+
640
+ .sl-link-button:focus-visible {
641
+ border-color: var(--ring);
642
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent);
643
+ }
644
+
645
+ .sl-link-button svg {
646
+ width: 1rem;
647
+ height: 1rem;
648
+ flex-shrink: 0;
649
+ }
650
+
651
+ .sl-link-button.primary {
652
+ color: var(--primary-foreground);
653
+ background-color: var(--primary);
654
+ border-color: transparent;
655
+ }
656
+
657
+ .sl-link-button.primary:hover {
658
+ color: var(--primary-foreground);
659
+ background-color: color-mix(in oklab, var(--primary) 88%, var(--background));
660
+ }
661
+
662
+ .sl-link-button.secondary {
663
+ color: var(--foreground);
664
+ background-color: color-mix(in oklab, var(--background) 82%, var(--secondary));
665
+ border-color: var(--border);
666
+ }
667
+
668
+ .sl-link-button.secondary:hover {
669
+ color: var(--foreground);
670
+ background-color: var(--accent);
671
+ }
672
+
673
+ .sl-link-button.minimal {
674
+ color: var(--foreground);
675
+ background-color: transparent;
676
+ border-color: transparent;
677
+ }
678
+
679
+ .sl-link-button.minimal:hover {
680
+ color: var(--accent-foreground);
681
+ background-color: var(--accent);
682
+ }
683
+
684
+ /* built-in Starlight Steps */
685
+ .sl-markdown-content .sl-steps {
686
+ --bullet-size: 1.75rem;
687
+ --bullet-margin: 0.25rem;
688
+ margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
689
+ }
690
+
691
+ .sl-markdown-content .sl-steps > li {
692
+ padding-inline-start: calc(var(--bullet-size) + 1rem);
693
+ padding-bottom: calc(var(--spacing) * 4);
694
+ min-height: calc(var(--bullet-size) + var(--bullet-margin));
695
+ }
696
+
697
+ .sl-markdown-content .sl-steps > li::before {
698
+ font-size: 0.875rem;
699
+ font-weight: 500;
700
+ color: var(--muted-foreground);
701
+ background-color: var(--muted);
702
+ box-shadow: none;
703
+ }
704
+
705
+ .sl-markdown-content .sl-steps > li::after {
706
+ background-color: var(--border);
707
+ }
708
+
709
+ .sl-markdown-content .sl-steps > li:last-child {
710
+ padding-bottom: 0;
711
+ }
712
+
713
+ .sl-markdown-content .sl-steps > li:last-child::after {
714
+ display: none;
715
+ }
716
+
717
+ /* A step's heading sits on the same line as its number bullet. The wrapper
718
+ * only sets a *minimum* height: a fixed `height` clips any heading that is
719
+ * taller than the bullet (an `h2` step title) or wraps to a second line on
720
+ * narrow viewports, and the following block — usually a code frame — then
721
+ * paints over the overflowing text. */
722
+ .sl-markdown-content .sl-steps > li > .sl-heading-wrapper {
723
+ display: flex;
724
+ align-items: center;
725
+ gap: 0.5rem;
726
+ /* Matches the h3/h4 anchor icon: the level-h2 default (1.25rem) is
727
+ * sized for a full-size heading, not a step title. */
728
+ --sl-anchor-icon-size: 0.875rem;
729
+ min-height: var(--bullet-size);
730
+ transform: none;
731
+ margin-bottom: 0;
732
+ }
733
+
734
+ /* Step titles render at one size whatever heading level the page picked,
735
+ * so `## Step` and `### Step` look the same inside <Steps>. */
736
+ .sl-markdown-content .sl-steps > li > .sl-heading-wrapper :is(h1, h2, h3, h4, h5, h6) {
737
+ font-size: 1rem;
738
+ line-height: 1.75rem;
739
+ font-weight: 500;
740
+ margin: 0;
741
+ /* `h2` carries a `padding-top` for section spacing further up this file;
742
+ * inside a step it would push the title off the number bullet's line.
743
+ * Only the block padding is reset — the inline padding is the room
744
+ * Starlight reserves for the anchor-link icon. */
745
+ padding-block: 0;
746
+ }
747
+
748
+ .sl-markdown-content .sl-steps > li > .sl-heading-wrapper .sl-anchor-link {
749
+ height: var(--bullet-size);
750
+ line-height: var(--bullet-size);
751
+ align-items: center;
752
+ }
753
+
754
+ .sl-markdown-content .sl-steps > li > .sl-heading-wrapper .sl-anchor-icon > svg {
755
+ vertical-align: middle;
756
+ transform: none;
757
+ }
758
+
759
+ .sl-markdown-content .sl-steps > li > p {
760
+ color: var(--muted-foreground);
761
+ }
762
+
763
+ .sl-markdown-content .sl-steps > li > .sl-heading-wrapper + p {
764
+ margin-top: 0;
765
+ }
766
+
767
+ /* built-in Starlight Tabs */
768
+ .sl-markdown-content starlight-tabs {
769
+ display: block;
770
+ margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
771
+ }
772
+
773
+ .sl-markdown-content starlight-tabs .tablist-wrapper {
774
+ overflow-x: auto;
775
+ padding: 0.25rem 0.75rem;
776
+ border-radius: calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem) 0 0;
777
+ background-color: var(--code-background);
778
+ box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--border) 85%, transparent);
779
+ }
780
+
781
+ .sl-markdown-content starlight-tabs [role="tablist"] {
782
+ display: flex;
783
+ align-items: center;
784
+ gap: 0.25rem;
785
+ min-width: max-content;
786
+ border-bottom: 0;
787
+ padding: 0;
788
+ }
789
+
790
+ .sl-markdown-content starlight-tabs .tab > [role="tab"] {
791
+ display: inline-flex;
792
+ align-items: center;
793
+ gap: 0.375rem;
794
+ min-height: 1.75rem;
795
+ padding: 0.125rem 0.5rem 0.25rem;
796
+ border-radius: calc(var(--radius) - 2px);
797
+ color: color-mix(in oklab, var(--foreground) 60%, transparent);
798
+ font-size: 0.875rem;
799
+ font-weight: 500;
800
+ line-height: 1.25rem;
801
+ box-shadow: none;
802
+ transition-property: color, background-color, box-shadow;
803
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
804
+ transition-duration: 0.15s;
805
+ }
806
+
807
+ .sl-markdown-content starlight-tabs .tab > [role="tab"]:hover {
808
+ color: var(--foreground);
809
+ background-color: color-mix(in oklab, var(--background) 35%, transparent);
810
+ }
811
+
812
+ .sl-markdown-content starlight-tabs .tab > [role="tab"]:focus-visible {
813
+ outline: none;
814
+ box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent);
815
+ }
816
+
817
+ .sl-markdown-content starlight-tabs .tab [role="tab"][aria-selected="true"] {
818
+ color: var(--foreground);
819
+ background-color: var(--background);
820
+ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
821
+ }
822
+
823
+ .sl-markdown-content starlight-tabs .tab > [role="tab"] svg {
824
+ width: 0.875rem;
825
+ height: 0.875rem;
826
+ color: currentColor;
827
+ }
828
+
829
+ .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role="tabpanel"] {
830
+ margin-top: 0;
831
+ padding: 1rem;
832
+ border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
833
+ background-color: var(--code-background);
834
+ }
835
+
836
+ .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role="tabpanel"] > :first-child {
837
+ margin-top: 0;
838
+ }
839
+
840
+ .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role="tabpanel"] > :last-child {
841
+ margin-bottom: 0;
842
+ }
843
+
844
+ .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role="tabpanel"] :is(pre, figure) {
845
+ margin: 0;
846
+ }
847
+
848
+ .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role="tabpanel"] > .expressive-code {
849
+ margin: -1rem;
850
+ }
851
+
852
+ .sl-markdown-content
853
+ starlight-tabs
854
+ .tablist-wrapper
855
+ ~ [role="tabpanel"]
856
+ > .expressive-code
857
+ .frame {
858
+ --button-spacing: 0.4rem;
859
+ border: 0;
860
+ border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
861
+ }
862
+
863
+ .sl-markdown-content
864
+ starlight-tabs
865
+ .tablist-wrapper
866
+ ~ [role="tabpanel"]
867
+ > .expressive-code
868
+ .header {
869
+ display: none;
870
+ }
871
+
872
+ .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role="tabpanel"] > .expressive-code pre {
873
+ border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
874
+ }
875
+
876
+ .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role="tabpanel"] p {
877
+ color: color-mix(in oklab, var(--foreground) 72%, var(--muted-foreground));
878
+ }
879
+
880
+ /* footer link styles */
881
+ [data-slot="footer-text"] a {
882
+ text-decoration: underline;
883
+ text-underline-offset: calc(var(--spacing) * 1);
884
+ color: var(--muted-foreground);
885
+ }
886
+
887
+ [data-slot="footer-text"] a:hover {
888
+ color: var(--foreground);
889
+ }
903
890
  }