starlight-theme-apple 0.2.0 → 0.4.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "starlight-theme-apple",
3
- "version": "0.2.0",
3
+ "version": "0.4.0",
4
4
  "description": "An Apple Developer Documentation-inspired theme for Astro Starlight.",
5
5
  "keywords": [
6
6
  "starlight",
package/styles/base.css CHANGED
@@ -66,10 +66,10 @@ select:disabled {
66
66
  max-width: var(--apple-content-width);
67
67
  margin-block: 2rem 1rem;
68
68
  margin-inline: var(--sl-content-pad-x);
69
- padding: 0.875rem 1rem;
70
- border: 1px solid var(--apple-hairline);
71
- border-radius: var(--apple-radius-sm);
72
- background: var(--apple-surface);
69
+ padding: 0.875rem 1.125rem;
70
+ border: 1px solid var(--apple-border);
71
+ border-radius: 0.75rem;
72
+ background: var(--apple-aside-background);
73
73
  box-shadow: none;
74
74
  color: var(--apple-foreground);
75
75
  text-align: start;
@@ -78,6 +78,14 @@ select:disabled {
78
78
  color: var(--apple-link);
79
79
  }
80
80
 
81
+ .sl-skip-link {
82
+ border: 1px solid var(--apple-border);
83
+ border-radius: 0.5rem;
84
+ background: var(--apple-secondary-background);
85
+ color: var(--apple-link);
86
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
87
+ }
88
+
81
89
  @media (prefers-reduced-motion: reduce) {
82
90
  *,
83
91
  *::before,
package/styles/code.css CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .expressive-code {
12
- --ec-brdRad: var(--apple-radius-sm);
12
+ --ec-brdRad: 0.75rem;
13
13
  --ec-brdWd: 1px;
14
14
  margin-block: 1.5rem;
15
15
  }
@@ -37,17 +37,52 @@
37
37
  }
38
38
  .expressive-code .copy button {
39
39
  border-color: var(--apple-hairline) !important;
40
- border-radius: var(--apple-radius-sm) !important;
40
+ border-radius: 0.5rem !important;
41
41
  background: var(--apple-secondary-background) !important;
42
42
  color: var(--apple-secondary-foreground) !important;
43
43
  }
44
+
45
+ .sl-markdown-content kbd:not(:where(.not-content *)) {
46
+ display: inline-flex;
47
+ align-items: center;
48
+ min-height: 1.5rem;
49
+ padding-inline: 0.4rem;
50
+ border: 1px solid var(--apple-border);
51
+ border-bottom-width: 2px;
52
+ border-radius: 0.35rem;
53
+ background: var(--apple-secondary-background);
54
+ color: var(--apple-secondary-foreground);
55
+ font-family: var(--apple-font-sans);
56
+ font-size: 0.8125rem;
57
+ line-height: 1;
58
+ vertical-align: 0.08em;
59
+ }
60
+
61
+ .sl-markdown-content mark:not(:where(.not-content *)) {
62
+ padding-inline: 0.15em;
63
+ border-radius: 0.2em;
64
+ background: color-mix(in srgb, var(--apple-warning) 28%, transparent);
65
+ color: var(--apple-foreground);
66
+ }
44
67
  .expressive-code .copy button:is(:hover, :focus-visible) {
45
68
  border-color: var(--apple-border) !important;
46
69
  background: var(--apple-active-surface) !important;
47
70
  color: var(--apple-foreground) !important;
48
71
  }
49
72
  .sl-markdown-content starlight-file-tree {
73
+ display: block;
74
+ margin-block: 1.5rem;
75
+ padding: 1rem;
50
76
  border: 1px solid var(--apple-hairline);
51
- border-radius: var(--apple-radius-sm);
77
+ border-radius: 0.75rem;
52
78
  background: var(--apple-code-background);
53
79
  }
80
+ .sl-markdown-content starlight-file-tree .tree-entry {
81
+ min-height: 1.75rem;
82
+ }
83
+ .sl-markdown-content starlight-file-tree .tree-icon {
84
+ color: var(--apple-tertiary-foreground);
85
+ }
86
+ .sl-markdown-content starlight-file-tree .comment {
87
+ color: var(--apple-tertiary-foreground);
88
+ }
@@ -140,6 +140,21 @@
140
140
  line-height: 1.5625rem;
141
141
  }
142
142
 
143
+ .sl-heading-wrapper .sl-anchor-link {
144
+ margin-inline-start: 0.25rem;
145
+ padding: 0.25rem;
146
+ border-radius: var(--apple-radius-sm);
147
+ color: var(--apple-tertiary-foreground);
148
+ opacity: 0;
149
+ }
150
+ .sl-heading-wrapper:is(:hover, :focus-within) .sl-anchor-link {
151
+ opacity: 1;
152
+ }
153
+ .sl-heading-wrapper .sl-anchor-link:is(:hover, :focus-visible) {
154
+ background: var(--apple-hover-surface);
155
+ color: var(--apple-link);
156
+ }
157
+
143
158
  .sl-markdown-content a:not(:where(.not-content *)) {
144
159
  color: var(--apple-link);
145
160
  text-decoration: none;
@@ -155,11 +170,23 @@
155
170
  }
156
171
  .sl-markdown-content blockquote:not(:where(.not-content *)) {
157
172
  margin-inline: 0;
158
- padding: 0.125rem 0 0.125rem 1.25rem;
159
- border-inline-start: 3px solid var(--apple-border);
173
+ padding: 0.125rem 0 0.125rem 1rem;
174
+ border-inline-start: 2px solid var(--apple-border);
160
175
  color: var(--apple-secondary-foreground);
161
176
  }
162
177
 
178
+ .sl-markdown-content :is(ul, ol):not(:where(.not-content *, .sl-steps)) {
179
+ padding-inline-start: 1.5rem;
180
+ }
181
+ .sl-markdown-content :is(ul, ol):not(:where(.not-content *, .sl-steps)) > li {
182
+ padding-inline-start: 0.25rem;
183
+ }
184
+ .sl-markdown-content
185
+ :is(ul, ol):not(:where(.not-content *, .sl-steps))
186
+ > li::marker {
187
+ color: var(--apple-tertiary-foreground);
188
+ }
189
+
163
190
  .sl-markdown-content table:not(:where(.not-content *)) {
164
191
  display: table;
165
192
  width: 100%;
@@ -173,26 +200,49 @@
173
200
  text-align: start;
174
201
  }
175
202
  .sl-markdown-content th:not(:where(.not-content *)) {
203
+ background: var(--apple-secondary-background);
176
204
  color: var(--apple-foreground);
177
205
  font-weight: 600;
178
206
  }
207
+ .sl-markdown-content tbody tr:hover:not(:where(.not-content *)) {
208
+ background: var(--apple-hover-surface);
209
+ }
179
210
 
180
211
  .sl-markdown-content details:not(:where(.not-content *)) {
181
- border-inline-start: 1px solid var(--apple-hairline);
212
+ overflow: clip;
213
+ padding: 0;
214
+ border: 1px solid var(--apple-border);
215
+ border-radius: 0.75rem;
216
+ background: var(--apple-secondary-background);
182
217
  }
183
218
  .sl-markdown-content details > summary:not(:where(.not-content *)) {
219
+ padding: 0.875rem 1rem;
184
220
  color: var(--apple-foreground);
221
+ font-weight: 500;
222
+ cursor: pointer;
223
+ }
224
+ .sl-markdown-content details > summary:hover:not(:where(.not-content *)) {
225
+ background: var(--apple-hover-surface);
226
+ }
227
+ .sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
228
+ border-bottom: 1px solid var(--apple-hairline);
229
+ }
230
+ .sl-markdown-content details > :not(summary):not(:where(.not-content *)) {
231
+ margin-inline: 1rem;
232
+ }
233
+ .sl-markdown-content details > :last-child:not(:where(.not-content *)) {
234
+ margin-bottom: 1rem;
185
235
  }
186
236
 
187
237
  .sl-markdown-content .card,
188
238
  .sl-markdown-content .sl-link-card {
189
239
  border: 1px solid var(--apple-hairline);
190
- border-radius: var(--apple-radius-sm);
191
- background: transparent;
240
+ border-radius: 0.75rem;
241
+ background: var(--apple-secondary-background);
192
242
  box-shadow: none;
193
243
  }
194
244
  .sl-markdown-content .card {
195
- padding: 1.125rem;
245
+ padding: 1.25rem;
196
246
  }
197
247
  .sl-markdown-content .card-grid {
198
248
  gap: 1rem;
@@ -211,8 +261,9 @@
211
261
  font-size: 1.5rem;
212
262
  }
213
263
  .sl-markdown-content .sl-link-card:is(:hover, :focus-visible) {
214
- border-color: var(--apple-hairline);
264
+ border-color: var(--apple-border);
215
265
  background: var(--apple-hover-surface);
266
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
216
267
  text-decoration: none;
217
268
  }
218
269
  .sl-markdown-content .sl-link-card .description {
@@ -223,32 +274,41 @@
223
274
  }
224
275
 
225
276
  .starlight-aside {
226
- --sl-color-asides-border: var(--apple-note);
277
+ --apple-aside-accent: var(--apple-secondary-foreground);
227
278
  margin-block: 1.5rem;
228
- padding: 1rem;
229
- border: 0;
230
- border-inline-start: 6px solid var(--sl-color-asides-border);
231
- border-radius: var(--apple-radius-sm);
279
+ padding: 1rem 1.125rem;
280
+ border: 1px solid var(--apple-border);
281
+ border-radius: 0.75rem;
232
282
  background: var(--apple-aside-background);
233
283
  color: var(--apple-foreground);
284
+ box-shadow: none;
234
285
  }
235
286
  .starlight-aside--caution {
236
- --sl-color-asides-border: var(--apple-warning);
287
+ --apple-aside-accent: var(--apple-warning);
237
288
  }
238
289
  .starlight-aside--danger {
239
- --sl-color-asides-border: var(--apple-danger);
290
+ --apple-aside-accent: var(--apple-danger);
240
291
  }
241
292
  .starlight-aside--tip {
242
- --sl-color-asides-border: var(--apple-success);
293
+ --apple-aside-accent: var(--apple-success);
294
+ }
295
+ .starlight-aside__icon {
296
+ display: none;
243
297
  }
244
298
  .starlight-aside__title {
245
- color: var(--apple-secondary-foreground);
246
- font-size: 1.0625rem;
247
- font-weight: 600;
248
- line-height: 1.625rem;
299
+ color: var(--apple-aside-accent);
300
+ font-size: 0.9375rem;
301
+ font-weight: 500;
302
+ line-height: 1.375rem;
249
303
  }
250
304
  .starlight-aside__title + * {
251
- margin-top: 0.5rem;
305
+ margin-top: 0.375rem;
306
+ }
307
+ .starlight-aside__content > :first-child {
308
+ margin-top: 0;
309
+ }
310
+ .starlight-aside__content > :last-child {
311
+ margin-bottom: 0;
252
312
  }
253
313
 
254
314
  .content-panel:first-of-type p.sl-flex:not(:where(.sl-markdown-content *)) {
@@ -264,12 +324,22 @@
264
324
  }
265
325
 
266
326
  .sl-steps > li {
267
- padding-bottom: 0.5rem;
327
+ padding-bottom: 1rem;
268
328
  padding-inline-start: 2.75rem;
269
329
  }
270
330
  .sl-steps > li + li {
271
331
  margin-top: 0;
272
332
  }
333
+ .sl-steps > li::before {
334
+ border-color: var(--apple-border);
335
+ background: var(--apple-secondary-background);
336
+ color: var(--apple-foreground);
337
+ font-weight: 600;
338
+ box-shadow: 0 0 0 4px var(--apple-background);
339
+ }
340
+ .sl-steps > li:not(:last-child)::after {
341
+ border-inline-start-color: var(--apple-hairline);
342
+ }
273
343
 
274
344
  .pagination-links {
275
345
  display: grid;
@@ -319,6 +389,43 @@
319
389
  line-height: 1.25rem;
320
390
  }
321
391
 
392
+ .hero {
393
+ width: min(100%, 64rem);
394
+ margin-inline: auto;
395
+ padding-block: clamp(4rem, 10vw, 8rem);
396
+ padding-inline: var(--sl-content-pad-x);
397
+ }
398
+ .hero > img {
399
+ flex: 0 0 clamp(12rem, 26vw, 20rem);
400
+ width: clamp(12rem, 26vw, 20rem);
401
+ height: auto;
402
+ filter: saturate(0.92);
403
+ }
404
+ .hero .stack {
405
+ gap: 1.5rem;
406
+ }
407
+ .hero .copy {
408
+ gap: 0.75rem;
409
+ }
410
+ .hero h1 {
411
+ max-width: 12ch;
412
+ margin: 0;
413
+ color: var(--apple-foreground);
414
+ font-size: clamp(2.75rem, 6vw, 4.5rem);
415
+ font-weight: 600;
416
+ line-height: 1.02;
417
+ letter-spacing: -0.035em;
418
+ }
419
+ .hero .tagline {
420
+ max-width: 32rem;
421
+ color: var(--apple-secondary-foreground);
422
+ font-size: clamp(1.25rem, 2.4vw, 1.5rem);
423
+ line-height: 1.4;
424
+ }
425
+ .hero .actions {
426
+ gap: 0.75rem;
427
+ }
428
+
322
429
  .sl-markdown-content starlight-tabs ul[role="tablist"] {
323
430
  border-bottom: 1px solid var(--apple-hairline);
324
431
  }
@@ -64,9 +64,14 @@
64
64
  .sl-markdown-content starlight-tabs {
65
65
  display: block;
66
66
  margin-block: 1.5rem;
67
+ border: 1px solid var(--apple-hairline);
68
+ border-radius: 0.75rem;
69
+ background: var(--apple-secondary-background);
67
70
  }
68
71
  .sl-markdown-content starlight-tabs .tablist-wrapper {
69
72
  margin-bottom: 0;
73
+ padding-inline: 0.5rem;
74
+ border-bottom: 1px solid var(--apple-hairline);
70
75
  }
71
76
  .sl-markdown-content starlight-tabs ul[role="tablist"] {
72
77
  gap: 0.25rem;
@@ -95,27 +100,36 @@
95
100
  font-weight: 600;
96
101
  }
97
102
  .sl-markdown-content starlight-tabs [role="tabpanel"] {
98
- padding-top: 1rem;
103
+ padding: 1rem;
99
104
  }
100
105
  .sl-markdown-content starlight-tabs [role="tabpanel"] > :first-child {
101
106
  margin-top: 0;
102
107
  }
103
108
 
104
- .sl-markdown-content .sl-badge {
109
+ .sl-badge {
105
110
  display: inline-flex;
106
111
  align-items: center;
107
112
  min-height: 1.375rem;
108
- padding-inline: 0.45rem;
109
- border: 1px solid currentColor;
110
- border-radius: var(--apple-radius-sm);
113
+ padding-inline: 0.5rem;
114
+ border: 0;
115
+ border-radius: 999px;
116
+ background: color-mix(in srgb, currentColor 14%, transparent);
111
117
  font-weight: 600;
112
118
  line-height: 1.2;
113
119
  vertical-align: 0.08em;
114
120
  }
115
- .sl-markdown-content .sl-badge + .sl-badge {
121
+ .sl-badge + .sl-badge {
116
122
  margin-inline-start: 0.25rem;
117
123
  }
118
124
 
125
+ .sidebar-content .sl-badge {
126
+ min-height: 1.125rem;
127
+ margin-inline-start: 0.375rem;
128
+ padding-inline: 0.4rem;
129
+ font-size: 0.6875rem;
130
+ line-height: 1;
131
+ }
132
+
119
133
  .sl-markdown-content
120
134
  :is(input, select, textarea, button):not(:where(.not-content *)) {
121
135
  min-height: 2.25rem;
@@ -101,6 +101,23 @@
101
101
  grid-template-columns: 1fr;
102
102
  gap: 1rem;
103
103
  }
104
+ .hero {
105
+ gap: 2.5rem;
106
+ padding-block: 3.5rem;
107
+ }
108
+ .hero > img {
109
+ flex-basis: min(70%, 16rem);
110
+ width: min(70%, 16rem);
111
+ }
112
+ .hero .actions {
113
+ gap: 0.625rem;
114
+ }
115
+ .sl-markdown-content table:not(:where(.not-content *)) {
116
+ display: block;
117
+ max-width: 100%;
118
+ overflow-x: auto;
119
+ overscroll-behavior-inline: contain;
120
+ }
104
121
  }
105
122
  @media (max-width: 30rem) {
106
123
  :root {
@@ -113,14 +130,19 @@
113
130
  font-size: 1.0625rem;
114
131
  line-height: 1.25rem;
115
132
  }
116
- .sl-markdown-content table:not(:where(.not-content *)) {
117
- display: block;
118
- overflow-x: auto;
119
- }
120
133
  .sl-markdown-content .sl-link-button {
121
134
  width: 100%;
122
135
  }
123
136
  .sl-markdown-content .sl-link-button + .sl-link-button {
124
137
  margin-inline-start: 0;
125
138
  }
139
+ .hero .actions .sl-link-button {
140
+ width: 100%;
141
+ }
142
+ }
143
+
144
+ @media (hover: none) {
145
+ .sl-heading-wrapper .sl-anchor-link {
146
+ opacity: 1;
147
+ }
126
148
  }
package/styles/search.css CHANGED
@@ -15,10 +15,27 @@ site-search > button[aria-expanded="true"] {
15
15
  }
16
16
  site-search dialog {
17
17
  border: 1px solid var(--apple-border);
18
- border-radius: var(--apple-radius-sm);
18
+ border-radius: 0.75rem;
19
19
  background: var(--apple-secondary-background);
20
20
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
21
21
  }
22
+ site-search > button kbd {
23
+ gap: 0.2rem;
24
+ border: 0;
25
+ background: transparent;
26
+ color: var(--apple-tertiary-foreground);
27
+ font-family: var(--apple-font-sans);
28
+ font-size: 0.6875rem;
29
+ }
30
+ site-search > button kbd kbd {
31
+ min-width: 1.25rem;
32
+ padding: 0.125rem 0.25rem;
33
+ border: 1px solid var(--apple-hairline);
34
+ border-radius: 0.25rem;
35
+ background: var(--apple-secondary-background);
36
+ line-height: 1rem;
37
+ text-align: center;
38
+ }
22
39
  site-search dialog::backdrop {
23
40
  background: rgba(0, 0, 0, 0.3);
24
41
  -webkit-backdrop-filter: blur(4px);
@@ -65,3 +82,7 @@ site-search input:focus {
65
82
  .pagefind-ui__result-excerpt {
66
83
  color: var(--apple-secondary-foreground) !important;
67
84
  }
85
+ .pagefind-ui__message,
86
+ .pagefind-ui__result-nested {
87
+ color: var(--apple-tertiary-foreground) !important;
88
+ }