@grove-dev/starlight 0.7.0 → 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 (34) hide show
  1. package/components/custom/ContainerSection.astro +1 -1
  2. package/components/custom/LinkButton.astro +7 -7
  3. package/components/custom/dropdown/Dropdown.astro +5 -5
  4. package/components/custom/dropdown/DropdownContent.astro +26 -26
  5. package/components/custom/dropdown/DropdownItem.astro +8 -8
  6. package/components/custom/dropdown/DropdownLabel.astro +4 -4
  7. package/components/custom/dropdown/DropdownTrigger.astro +12 -12
  8. package/components/custom/dropdown/index.ts +14 -14
  9. package/components/overrides/Footer.astro +3 -3
  10. package/components/overrides/Header.astro +5 -6
  11. package/components/overrides/Hero.astro +17 -17
  12. package/components/overrides/PageFrame.astro +11 -11
  13. package/components/overrides/PageTitle.astro +3 -3
  14. package/components/overrides/Search.astro +6 -6
  15. package/components/overrides/parts/Drawer.astro +5 -5
  16. package/components/overrides/parts/NavBar.astro +5 -5
  17. package/components/overrides/parts/SidebarSublist.astro +2 -2
  18. package/components/overrides/parts/toc/TableOfContentsList.astro +4 -4
  19. package/components/overrides/parts/toc/starlight-toc.ts +96 -98
  20. package/core/config/docs-schema.ts +20 -20
  21. package/core/config/expresive-code.ts +49 -51
  22. package/core/config/override.ts +36 -36
  23. package/core/config/schemas.ts +59 -59
  24. package/core/config/vite.ts +12 -12
  25. package/core/i18n.ts +113 -113
  26. package/core/plugin.ts +42 -42
  27. package/core/sidebar.ts +4 -4
  28. package/global.d.ts +3 -3
  29. package/package.json +1 -1
  30. package/schema.ts +39 -39
  31. package/styles/base.css +866 -907
  32. package/styles/theme.css +61 -61
  33. package/user-components.ts +1 -1
  34. package/virtual.d.ts +27 -27
package/styles/base.css CHANGED
@@ -1,340 +1,340 @@
1
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
-
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) {
88
95
  .container-wrapper-main {
89
- display: flex;
90
- flex-direction: column;
91
- max-width: none;
96
+ display: grid;
97
+ grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
92
98
  }
99
+ }
93
100
 
94
- @media (min-width: 1024px) {
95
- .container-wrapper-main {
96
- display: grid;
97
- grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
98
- }
99
- }
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
+ }
100
108
 
109
+ @media (min-width: 1024px) {
101
110
  .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
- }
108
-
109
- @media (min-width: 1024px) {
110
- .aside {
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
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
338
  `minmax(auto, 1fr)`: a track can never shrink below the min-content
339
339
  width of what it holds. A card full of long inline code -- file paths
340
340
  like `data/generated/records.full.json` -- therefore pushes its track
@@ -342,590 +342,549 @@
342
342
  article, on top of the table of contents. `minmax(0, 1fr)` lets the
343
343
  tracks shrink, and `anywhere` (not `break-word`, which does not affect
344
344
  intrinsic sizing) lets the code inside them wrap to fit. */
345
- @media (min-width: 50rem) {
346
- .sl-markdown-content .card-grid {
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(
465
- in oklab,
466
- var(--sl-color-blue-low) 78%,
467
- var(--code-background)
468
- );
469
- --aside-border: color-mix(in oklab, var(--sl-color-blue) 45%, var(--border));
470
- --aside-title: var(--sl-color-blue-high);
471
- --aside-content: color-mix(in oklab, var(--sl-color-blue-high) 72%, var(--foreground));
472
- }
473
-
474
- .sl-markdown-content .starlight-aside--tip {
475
- --aside-background: color-mix(
476
- in oklab,
477
- var(--sl-color-purple-low) 78%,
478
- var(--code-background)
479
- );
480
- --aside-border: color-mix(in oklab, var(--sl-color-purple) 45%, var(--border));
481
- --aside-title: var(--sl-color-purple-high);
482
- --aside-content: color-mix(in oklab, var(--sl-color-purple-high) 72%, var(--foreground));
483
- }
484
-
485
- .sl-markdown-content .starlight-aside--caution {
486
- --aside-background: color-mix(
487
- in oklab,
488
- var(--sl-color-orange-low) 82%,
489
- var(--code-background)
490
- );
491
- --aside-border: color-mix(in oklab, var(--sl-color-orange) 48%, var(--border));
492
- --aside-title: var(--sl-color-orange-high);
493
- --aside-content: color-mix(in oklab, var(--sl-color-orange-high) 72%, var(--foreground));
494
- }
495
-
496
- .sl-markdown-content .starlight-aside--danger {
497
- --aside-background: color-mix(
498
- in oklab,
499
- var(--sl-color-red-low) 80%,
500
- var(--code-background)
501
- );
502
- --aside-border: color-mix(in oklab, var(--sl-color-red) 48%, var(--border));
503
- --aside-title: var(--sl-color-red-high);
504
- --aside-content: color-mix(in oklab, var(--sl-color-red-high) 72%, var(--foreground));
505
- }
506
-
507
- .sl-markdown-content .starlight-aside__title {
508
- gap: 0.625rem;
509
- align-items: center;
510
- font-size: 0.875rem;
511
- font-weight: 600;
512
- line-height: 1.25rem;
513
- color: var(--aside-title);
514
- }
515
-
516
- .sl-markdown-content .starlight-aside__icon {
517
- width: 1rem;
518
- height: 1rem;
519
- font-size: 1rem;
520
- flex-shrink: 0;
521
- color: var(--aside-title);
522
- }
523
-
524
- .sl-markdown-content .starlight-aside__title + .starlight-aside__content {
525
- margin-top: calc(var(--spacing) * 1.5);
526
- }
527
-
528
- .sl-markdown-content .starlight-aside__content {
529
- font-size: 0.875rem;
530
- line-height: 1.625rem;
531
- color: var(--aside-content);
532
- }
533
-
534
- .sl-markdown-content .starlight-aside__content a {
535
- color: var(--aside-title);
536
- text-decoration-color: color-mix(in oklab, var(--aside-title) 45%, transparent);
537
- }
538
-
539
- .sl-markdown-content .starlight-aside__content a:hover {
540
- text-decoration-color: currentColor;
541
- }
542
-
543
- /* built-in Starlight Badges */
544
- .sl-markdown-content .sl-badge {
545
- --badge-background: var(--secondary);
546
- --badge-foreground: var(--secondary-foreground);
547
- --badge-border: transparent;
548
- display: inline-flex;
549
- align-items: center;
550
- justify-content: center;
551
- gap: 0.25rem;
552
- min-height: 1.25rem;
553
- padding: 0.125rem 0.5rem;
554
- border: 1px solid var(--badge-border);
555
- border-radius: 9999px;
556
- font-family: inherit;
557
- font-size: 0.75rem;
558
- font-weight: 500;
559
- line-height: 1;
560
- color: var(--badge-foreground);
561
- background-color: var(--badge-background);
562
- vertical-align: middle;
563
- }
564
-
565
- .sl-markdown-content .sl-badge.default {
566
- --badge-background: var(--secondary);
567
- --badge-foreground: var(--secondary-foreground);
568
- }
569
-
570
- .sl-markdown-content .sl-badge.note {
571
- --badge-background: color-mix(
572
- in oklab,
573
- var(--sl-color-blue-low) 88%,
574
- var(--code-background)
575
- );
576
- --badge-foreground: var(--sl-color-blue-high);
577
- }
578
-
579
- .sl-markdown-content .sl-badge.success {
580
- --badge-background: color-mix(
581
- in oklab,
582
- var(--sl-color-green-low) 88%,
583
- var(--code-background)
584
- );
585
- --badge-foreground: var(--sl-color-green-high);
586
- }
587
-
588
- .sl-markdown-content .sl-badge.tip {
589
- --badge-background: color-mix(
590
- in oklab,
591
- var(--sl-color-purple-low) 88%,
592
- var(--code-background)
593
- );
594
- --badge-foreground: var(--sl-color-purple-high);
595
- }
596
-
597
- .sl-markdown-content .sl-badge.caution {
598
- --badge-background: color-mix(
599
- in oklab,
600
- var(--sl-color-orange-low) 90%,
601
- var(--code-background)
602
- );
603
- --badge-foreground: var(--sl-color-orange-high);
604
- }
605
-
606
- .sl-markdown-content .sl-badge.danger {
607
- --badge-background: color-mix(
608
- in oklab,
609
- var(--sl-color-red-low) 90%,
610
- var(--code-background)
611
- );
612
- --badge-foreground: var(--sl-color-red-high);
613
- }
614
-
615
- .sl-markdown-content .sl-badge.small {
616
- min-height: 1.25rem;
617
- padding-inline: calc(var(--spacing) * 2);
618
- font-size: 0.75rem;
619
- }
620
-
621
- .sl-markdown-content .sl-badge.medium {
622
- min-height: 1.375rem;
623
- padding-inline: calc(var(--spacing) * 2.5);
624
- font-size: 0.75rem;
625
- }
626
-
627
- .sl-markdown-content .sl-badge.large {
628
- min-height: 1.5rem;
629
- padding-inline: calc(var(--spacing) * 3);
630
- font-size: 0.8125rem;
631
- }
632
-
633
- .sidebar-content .sl-badge {
634
- font-family: inherit;
635
- font-size: 0.6875rem;
636
- font-weight: 500;
637
- line-height: 1;
638
- min-height: 1.125rem;
639
- padding: 0.125rem 0.4375rem;
640
- border-radius: 9999px;
641
- }
642
-
643
- .sidebar-content a[aria-current='page'] > .sl-badge {
644
- background-color: color-mix(in oklab, currentColor 12%, transparent);
645
- border-color: transparent;
646
- color: inherit;
647
- }
648
-
649
- /* built-in Starlight LinkButtons */
650
- .sl-link-button {
651
- display: inline-flex;
652
- align-items: center;
653
- justify-content: center;
654
- gap: 0.375rem;
655
- height: 2rem;
656
- padding: 0 0.75rem;
657
- border: 1px solid transparent;
658
- border-radius: var(--radius);
659
- font-size: 0.875rem;
660
- font-weight: 500;
661
- line-height: 1;
662
- white-space: nowrap;
663
- text-decoration: none;
664
- transition-property: color, background-color, border-color, box-shadow;
665
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
666
- transition-duration: 0.15s;
667
- outline: none;
668
- outline-offset: 0.25rem;
669
- box-shadow: none;
670
- }
671
-
672
- .sl-link-button:hover {
673
- text-decoration: none;
674
- }
675
-
676
- .sl-link-button:focus-visible {
677
- border-color: var(--ring);
678
- box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent);
679
- }
680
-
681
- .sl-link-button svg {
682
- width: 1rem;
683
- height: 1rem;
684
- flex-shrink: 0;
685
- }
686
-
687
- .sl-link-button.primary {
688
- color: var(--primary-foreground);
689
- background-color: var(--primary);
690
- border-color: transparent;
691
- }
692
-
693
- .sl-link-button.primary:hover {
694
- color: var(--primary-foreground);
695
- background-color: color-mix(in oklab, var(--primary) 88%, var(--background));
696
- }
697
-
698
- .sl-link-button.secondary {
699
- color: var(--foreground);
700
- background-color: color-mix(in oklab, var(--background) 82%, var(--secondary));
701
- border-color: var(--border);
702
- }
703
-
704
- .sl-link-button.secondary:hover {
705
- color: var(--foreground);
706
- background-color: var(--accent);
707
- }
708
-
709
- .sl-link-button.minimal {
710
- color: var(--foreground);
711
- background-color: transparent;
712
- border-color: transparent;
713
- }
714
-
715
- .sl-link-button.minimal:hover {
716
- color: var(--accent-foreground);
717
- background-color: var(--accent);
718
- }
719
-
720
- /* built-in Starlight Steps */
721
- .sl-markdown-content .sl-steps {
722
- --bullet-size: 1.75rem;
723
- --bullet-margin: 0.25rem;
724
- margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
725
- }
726
-
727
- .sl-markdown-content .sl-steps > li {
728
- padding-inline-start: calc(var(--bullet-size) + 1rem);
729
- padding-bottom: calc(var(--spacing) * 4);
730
- min-height: calc(var(--bullet-size) + var(--bullet-margin));
731
- }
732
-
733
- .sl-markdown-content .sl-steps > li::before {
734
- font-size: 0.875rem;
735
- font-weight: 500;
736
- color: var(--muted-foreground);
737
- background-color: var(--muted);
738
- box-shadow: none;
739
- }
740
-
741
- .sl-markdown-content .sl-steps > li::after {
742
- background-color: var(--border);
743
- }
744
-
745
- .sl-markdown-content .sl-steps > li:last-child {
746
- padding-bottom: 0;
747
- }
748
-
749
- .sl-markdown-content .sl-steps > li:last-child::after {
750
- display: none;
751
- }
752
-
753
- /* A step's heading sits on the same line as its number bullet. The wrapper
345
+ @media (min-width: 50rem) {
346
+ .sl-markdown-content .card-grid {
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
754
718
  * only sets a *minimum* height: a fixed `height` clips any heading that is
755
719
  * taller than the bullet (an `h2` step title) or wraps to a second line on
756
720
  * narrow viewports, and the following block — usually a code frame — then
757
721
  * paints over the overflowing text. */
758
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper {
759
- display: flex;
760
- align-items: center;
761
- gap: 0.5rem;
762
- /* Matches the h3/h4 anchor icon: the level-h2 default (1.25rem) is
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
763
727
  * sized for a full-size heading, not a step title. */
764
- --sl-anchor-icon-size: 0.875rem;
765
- min-height: var(--bullet-size);
766
- transform: none;
767
- margin-bottom: 0;
768
- }
728
+ --sl-anchor-icon-size: 0.875rem;
729
+ min-height: var(--bullet-size);
730
+ transform: none;
731
+ margin-bottom: 0;
732
+ }
769
733
 
770
- /* Step titles render at one size whatever heading level the page picked,
734
+ /* Step titles render at one size whatever heading level the page picked,
771
735
  * so `## Step` and `### Step` look the same inside <Steps>. */
772
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper :is(h1, h2, h3, h4, h5, h6) {
773
- font-size: 1rem;
774
- line-height: 1.75rem;
775
- font-weight: 500;
776
- margin: 0;
777
- /* `h2` carries a `padding-top` for section spacing further up this file;
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;
778
742
  * inside a step it would push the title off the number bullet's line.
779
743
  * Only the block padding is reset — the inline padding is the room
780
744
  * Starlight reserves for the anchor-link icon. */
781
- padding-block: 0;
782
- }
783
-
784
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper .sl-anchor-link {
785
- height: var(--bullet-size);
786
- line-height: var(--bullet-size);
787
- align-items: center;
788
- }
789
-
790
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper .sl-anchor-icon > svg {
791
- vertical-align: middle;
792
- transform: none;
793
- }
794
-
795
- .sl-markdown-content .sl-steps > li > p {
796
- color: var(--muted-foreground);
797
- }
798
-
799
- .sl-markdown-content .sl-steps > li > .sl-heading-wrapper + p {
800
- margin-top: 0;
801
- }
802
-
803
- /* built-in Starlight Tabs */
804
- .sl-markdown-content starlight-tabs {
805
- display: block;
806
- margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
807
- }
808
-
809
- .sl-markdown-content starlight-tabs .tablist-wrapper {
810
- overflow-x: auto;
811
- padding: 0.25rem 0.75rem;
812
- border-radius: calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem) 0 0;
813
- background-color: var(--code-background);
814
- box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--border) 85%, transparent);
815
- }
816
-
817
- .sl-markdown-content starlight-tabs [role='tablist'] {
818
- display: flex;
819
- align-items: center;
820
- gap: 0.25rem;
821
- min-width: max-content;
822
- border-bottom: 0;
823
- padding: 0;
824
- }
825
-
826
- .sl-markdown-content starlight-tabs .tab > [role='tab'] {
827
- display: inline-flex;
828
- align-items: center;
829
- gap: 0.375rem;
830
- min-height: 1.75rem;
831
- padding: 0.125rem 0.5rem 0.25rem;
832
- border-radius: calc(var(--radius) - 2px);
833
- color: color-mix(in oklab, var(--foreground) 60%, transparent);
834
- font-size: 0.875rem;
835
- font-weight: 500;
836
- line-height: 1.25rem;
837
- box-shadow: none;
838
- transition-property: color, background-color, box-shadow;
839
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
840
- transition-duration: 0.15s;
841
- }
842
-
843
- .sl-markdown-content starlight-tabs .tab > [role='tab']:hover {
844
- color: var(--foreground);
845
- background-color: color-mix(in oklab, var(--background) 35%, transparent);
846
- }
847
-
848
- .sl-markdown-content starlight-tabs .tab > [role='tab']:focus-visible {
849
- outline: none;
850
- box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 35%, transparent);
851
- }
852
-
853
- .sl-markdown-content starlight-tabs .tab [role='tab'][aria-selected='true'] {
854
- color: var(--foreground);
855
- background-color: var(--background);
856
- box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
857
- }
858
-
859
- .sl-markdown-content starlight-tabs .tab > [role='tab'] svg {
860
- width: 0.875rem;
861
- height: 0.875rem;
862
- color: currentColor;
863
- }
864
-
865
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] {
866
- margin-top: 0;
867
- padding: 1rem;
868
- border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
869
- background-color: var(--code-background);
870
- }
871
-
872
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] > :first-child {
873
- margin-top: 0;
874
- }
875
-
876
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] > :last-child {
877
- margin-bottom: 0;
878
- }
879
-
880
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] :is(pre, figure) {
881
- margin: 0;
882
- }
883
-
884
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] > .expressive-code {
885
- margin: -1rem;
886
- }
887
-
888
- .sl-markdown-content
889
- starlight-tabs
890
- .tablist-wrapper
891
- ~ [role='tabpanel']
892
- > .expressive-code
893
- .frame {
894
- --button-spacing: 0.4rem;
895
- border: 0;
896
- border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
897
- }
898
-
899
- .sl-markdown-content
900
- starlight-tabs
901
- .tablist-wrapper
902
- ~ [role='tabpanel']
903
- > .expressive-code
904
- .header {
905
- display: none;
906
- }
907
-
908
- .sl-markdown-content
909
- starlight-tabs
910
- .tablist-wrapper
911
- ~ [role='tabpanel']
912
- > .expressive-code
913
- pre {
914
- border-radius: 0 0 calc(var(--radius) + 0.25rem) calc(var(--radius) + 0.25rem);
915
- }
916
-
917
- .sl-markdown-content starlight-tabs .tablist-wrapper ~ [role='tabpanel'] p {
918
- color: color-mix(in oklab, var(--foreground) 72%, var(--muted-foreground));
919
- }
920
-
921
- /* footer link styles */
922
- [data-slot='footer-text'] a {
923
- text-decoration: underline;
924
- text-underline-offset: calc(var(--spacing) * 1);
925
- color: var(--muted-foreground);
926
- }
927
-
928
- [data-slot='footer-text'] a:hover {
929
- color: var(--foreground);
930
- }
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
+ }
931
890
  }