starlight-theme-apple 0.1.0 → 0.3.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/README.md +1 -1
- package/components/PageTitle.astro +32 -11
- package/components/Pagination.astro +34 -0
- package/index.ts +94 -4
- package/package.json +2 -2
- package/styles/base.css +24 -32
- package/styles/code.css +28 -40
- package/styles/content.css +256 -151
- package/styles/controls.css +41 -76
- package/styles/header.css +28 -34
- package/styles/responsive.css +70 -19
- package/styles/search.css +17 -28
- package/styles/sidebar.css +37 -39
- package/styles/toc.css +15 -15
- package/styles/tokens.css +24 -19
- package/CHANGELOG.md +0 -101
package/README.md
CHANGED
|
@@ -10,6 +10,6 @@ Check out the `starlight-theme-apple` getting started guide.
|
|
|
10
10
|
|
|
11
11
|
## License
|
|
12
12
|
|
|
13
|
-
Licensed under the MIT license, Copyright ©
|
|
13
|
+
Licensed under the MIT license, Copyright © acsandmann.
|
|
14
14
|
|
|
15
15
|
See [LICENSE](https://github.com/acsandmann/starlight-theme-apple/blob/main/LICENSE) for more information.
|
|
@@ -1,22 +1,43 @@
|
|
|
1
1
|
---
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
const { entry, sidebar, siteTitle, siteTitleHref } =
|
|
3
|
+
Astro.locals.starlightRoute;
|
|
4
|
+
const title = entry.data.title;
|
|
5
|
+
|
|
6
|
+
type Crumb = { href?: string; label: string };
|
|
7
|
+
type SidebarItem =
|
|
8
|
+
| { type: "link"; isCurrent: boolean }
|
|
9
|
+
| { type: "group"; label: string; entries: SidebarItem[] };
|
|
10
|
+
|
|
11
|
+
function findCurrentPath(
|
|
12
|
+
entries: SidebarItem[],
|
|
13
|
+
ancestors: Crumb[] = []
|
|
14
|
+
): Crumb[] | undefined {
|
|
15
|
+
for (const item of entries) {
|
|
16
|
+
if (item.type === "link" && item.isCurrent) return ancestors;
|
|
17
|
+
if (item.type === "group") {
|
|
18
|
+
const path = findCurrentPath(item.entries, [
|
|
19
|
+
...ancestors,
|
|
20
|
+
{ label: item.label },
|
|
21
|
+
]);
|
|
22
|
+
if (path) return path;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const parents = findCurrentPath(sidebar as SidebarItem[]) ?? [];
|
|
11
28
|
---
|
|
12
29
|
|
|
13
30
|
<nav class="apple-breadcrumbs" aria-label="Breadcrumb">
|
|
14
|
-
<a href=
|
|
31
|
+
<a href={siteTitleHref}>{siteTitle}</a>
|
|
15
32
|
{
|
|
16
33
|
parents.map((parent) => (
|
|
17
34
|
<>
|
|
18
35
|
<span aria-hidden="true">›</span>
|
|
19
|
-
|
|
36
|
+
{parent.href ? (
|
|
37
|
+
<a href={parent.href}>{parent.label}</a>
|
|
38
|
+
) : (
|
|
39
|
+
<span>{parent.label}</span>
|
|
40
|
+
)}
|
|
20
41
|
</>
|
|
21
42
|
))
|
|
22
43
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
---
|
|
2
|
+
const { dir, pagination } = Astro.locals.starlightRoute;
|
|
3
|
+
const { prev, next } = pagination;
|
|
4
|
+
const isRtl = dir === "rtl";
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
<div class="pagination-links print:hidden" dir={dir}>
|
|
8
|
+
{
|
|
9
|
+
prev && (
|
|
10
|
+
<a href={prev.href} rel="prev">
|
|
11
|
+
<span class="pagination-arrow" aria-hidden="true">
|
|
12
|
+
{isRtl ? "→" : "←"}
|
|
13
|
+
</span>
|
|
14
|
+
<span>
|
|
15
|
+
<small>{Astro.locals.t("page.previousLink")}</small>
|
|
16
|
+
<span class="link-title">{prev.label}</span>
|
|
17
|
+
</span>
|
|
18
|
+
</a>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
{
|
|
22
|
+
next && (
|
|
23
|
+
<a href={next.href} rel="next">
|
|
24
|
+
<span>
|
|
25
|
+
<small>{Astro.locals.t("page.nextLink")}</small>
|
|
26
|
+
<span class="link-title">{next.label}</span>
|
|
27
|
+
</span>
|
|
28
|
+
<span class="pagination-arrow" aria-hidden="true">
|
|
29
|
+
{isRtl ? "←" : "→"}
|
|
30
|
+
</span>
|
|
31
|
+
</a>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
</div>
|
package/index.ts
CHANGED
|
@@ -1,6 +1,94 @@
|
|
|
1
1
|
import type { StarlightPlugin } from "@astrojs/starlight/types";
|
|
2
2
|
import { fileURLToPath } from "node:url";
|
|
3
3
|
|
|
4
|
+
const doccLight = {
|
|
5
|
+
name: "apple-docc-light",
|
|
6
|
+
type: "light" as const,
|
|
7
|
+
colors: {
|
|
8
|
+
"editor.background": "#f5f5f7",
|
|
9
|
+
"editor.foreground": "#000000",
|
|
10
|
+
},
|
|
11
|
+
settings: [
|
|
12
|
+
{ settings: { foreground: "#000000", background: "#f5f5f7" } },
|
|
13
|
+
{
|
|
14
|
+
scope: ["comment", "punctuation.definition.comment"],
|
|
15
|
+
settings: { foreground: "#707f8c" },
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
scope: ["keyword", "storage", "storage.type"],
|
|
19
|
+
settings: { foreground: "#ad3da4" },
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
scope: ["string", "string.quoted", "constant.other.symbol"],
|
|
23
|
+
settings: { foreground: "#d12f1b" },
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
scope: ["constant.numeric", "constant.character"],
|
|
27
|
+
settings: { foreground: "#272ad8" },
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
scope: ["entity.name.type", "entity.name.class", "support.type"],
|
|
31
|
+
settings: { foreground: "#703daa" },
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
scope: ["entity.name.function", "support.function", "variable.function"],
|
|
35
|
+
settings: { foreground: "#4b21b0" },
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
scope: ["entity.other.attribute-name", "variable.other.constant"],
|
|
39
|
+
settings: { foreground: "#947100" },
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
scope: ["meta.preprocessor", "keyword.control.directive"],
|
|
43
|
+
settings: { foreground: "#78492a" },
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const doccDark = {
|
|
49
|
+
name: "apple-docc-dark",
|
|
50
|
+
type: "dark" as const,
|
|
51
|
+
colors: {
|
|
52
|
+
"editor.background": "#1c1c1e",
|
|
53
|
+
"editor.foreground": "#ffffff",
|
|
54
|
+
},
|
|
55
|
+
settings: [
|
|
56
|
+
{ settings: { foreground: "#ffffff", background: "#1c1c1e" } },
|
|
57
|
+
{
|
|
58
|
+
scope: ["comment", "punctuation.definition.comment"],
|
|
59
|
+
settings: { foreground: "#7f8c98" },
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
scope: ["keyword", "storage", "storage.type"],
|
|
63
|
+
settings: { foreground: "#ff7ab2" },
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
scope: ["string", "string.quoted", "constant.other.symbol"],
|
|
67
|
+
settings: { foreground: "#ff8170" },
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
scope: ["constant.numeric", "constant.character"],
|
|
71
|
+
settings: { foreground: "#d9c97c" },
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
scope: ["entity.name.type", "entity.name.class", "support.type"],
|
|
75
|
+
settings: { foreground: "#dabaff" },
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
scope: ["entity.name.function", "support.function", "variable.function"],
|
|
79
|
+
settings: { foreground: "#b281eb" },
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
scope: ["entity.other.attribute-name", "variable.other.constant"],
|
|
83
|
+
settings: { foreground: "#cc9768" },
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
scope: ["meta.preprocessor", "keyword.control.directive"],
|
|
87
|
+
settings: { foreground: "#ffa14f" },
|
|
88
|
+
},
|
|
89
|
+
],
|
|
90
|
+
};
|
|
91
|
+
|
|
4
92
|
export default function starlightThemeApple(): StarlightPlugin {
|
|
5
93
|
return {
|
|
6
94
|
name: "starlight-theme-apple",
|
|
@@ -17,6 +105,9 @@ export default function starlightThemeApple(): StarlightPlugin {
|
|
|
17
105
|
PageTitle: fileURLToPath(
|
|
18
106
|
new URL("./components/PageTitle.astro", import.meta.url)
|
|
19
107
|
),
|
|
108
|
+
Pagination: fileURLToPath(
|
|
109
|
+
new URL("./components/Pagination.astro", import.meta.url)
|
|
110
|
+
),
|
|
20
111
|
},
|
|
21
112
|
customCss: [
|
|
22
113
|
...(config.customCss ?? []),
|
|
@@ -26,17 +117,16 @@ export default function starlightThemeApple(): StarlightPlugin {
|
|
|
26
117
|
config.expressiveCode === false
|
|
27
118
|
? false
|
|
28
119
|
: {
|
|
29
|
-
themes: [
|
|
120
|
+
themes: [doccDark, doccLight],
|
|
30
121
|
...userExpressiveCodeConfig,
|
|
31
122
|
styleOverrides: {
|
|
32
|
-
borderColor: "var(--apple-
|
|
123
|
+
borderColor: "var(--apple-hairline)",
|
|
33
124
|
borderRadius: "var(--apple-radius-sm)",
|
|
34
125
|
...userExpressiveCodeConfig.styleOverrides,
|
|
35
126
|
frames: {
|
|
36
127
|
editorActiveTabIndicatorTopColor: "unset",
|
|
37
128
|
editorActiveTabIndicatorBottomColor: "var(--apple-link)",
|
|
38
|
-
editorTabBarBorderBottomColor:
|
|
39
|
-
"var(--apple-border-subtle)",
|
|
129
|
+
editorTabBarBorderBottomColor: "var(--apple-hairline)",
|
|
40
130
|
frameBoxShadowCssValue: "unset",
|
|
41
131
|
...userExpressiveCodeConfig.styleOverrides?.frames,
|
|
42
132
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "starlight-theme-apple",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "An Apple Developer Documentation-inspired theme for Astro Starlight.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"starlight",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"directory": "packages/starlight-theme-apple"
|
|
21
21
|
},
|
|
22
22
|
"license": "MIT",
|
|
23
|
-
"author": "
|
|
23
|
+
"author": "acsandmann (https://github.com/acsandmann)",
|
|
24
24
|
"type": "module",
|
|
25
25
|
"exports": {
|
|
26
26
|
".": "./index.ts",
|
package/styles/base.css
CHANGED
|
@@ -2,6 +2,7 @@ html {
|
|
|
2
2
|
scroll-padding-top: calc(var(--apple-header-height) + 1.5rem);
|
|
3
3
|
text-rendering: optimizeLegibility;
|
|
4
4
|
}
|
|
5
|
+
|
|
5
6
|
body {
|
|
6
7
|
background: var(--apple-background);
|
|
7
8
|
color: var(--apple-foreground);
|
|
@@ -11,19 +12,16 @@ body {
|
|
|
11
12
|
-webkit-font-smoothing: antialiased;
|
|
12
13
|
-moz-osx-font-smoothing: grayscale;
|
|
13
14
|
}
|
|
15
|
+
|
|
14
16
|
::selection {
|
|
15
|
-
background:
|
|
17
|
+
background: var(--apple-focus);
|
|
16
18
|
}
|
|
17
19
|
:focus-visible {
|
|
18
20
|
outline: 2px solid var(--apple-link);
|
|
19
21
|
outline-offset: 3px;
|
|
20
22
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
color var(--apple-transition),
|
|
24
|
-
background-color var(--apple-transition),
|
|
25
|
-
border-color var(--apple-transition);
|
|
26
|
-
}
|
|
23
|
+
|
|
24
|
+
a,
|
|
27
25
|
button,
|
|
28
26
|
[role="button"],
|
|
29
27
|
summary,
|
|
@@ -34,13 +32,9 @@ select {
|
|
|
34
32
|
background-color var(--apple-transition),
|
|
35
33
|
border-color var(--apple-transition),
|
|
36
34
|
box-shadow var(--apple-transition),
|
|
37
|
-
opacity var(--apple-transition)
|
|
38
|
-
transform 80ms ease;
|
|
39
|
-
}
|
|
40
|
-
button:active:not(:disabled),
|
|
41
|
-
[role="button"]:active:not([aria-disabled="true"]) {
|
|
42
|
-
transform: scale(0.97);
|
|
35
|
+
opacity var(--apple-transition);
|
|
43
36
|
}
|
|
37
|
+
|
|
44
38
|
:is(button, input, select, summary, a)[aria-disabled="true"],
|
|
45
39
|
button:disabled,
|
|
46
40
|
input:disabled,
|
|
@@ -48,14 +42,14 @@ select:disabled {
|
|
|
48
42
|
cursor: not-allowed;
|
|
49
43
|
opacity: var(--apple-disabled-opacity);
|
|
50
44
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
45
|
+
|
|
46
|
+
.main-frame,
|
|
54
47
|
.main-pane {
|
|
55
|
-
|
|
48
|
+
background: var(--apple-background);
|
|
56
49
|
}
|
|
50
|
+
.main-pane,
|
|
57
51
|
.main-pane main {
|
|
58
|
-
|
|
52
|
+
min-width: 0;
|
|
59
53
|
}
|
|
60
54
|
.content-panel {
|
|
61
55
|
padding-block: 0;
|
|
@@ -67,14 +61,15 @@ select:disabled {
|
|
|
67
61
|
.sl-container {
|
|
68
62
|
max-width: var(--apple-content-width);
|
|
69
63
|
}
|
|
64
|
+
|
|
70
65
|
.sl-banner {
|
|
71
66
|
max-width: var(--apple-content-width);
|
|
72
67
|
margin-block: 2rem 1rem;
|
|
73
68
|
margin-inline: var(--sl-content-pad-x);
|
|
74
|
-
padding: 0.875rem
|
|
69
|
+
padding: 0.875rem 1.125rem;
|
|
75
70
|
border: 1px solid var(--apple-border);
|
|
76
|
-
border-radius:
|
|
77
|
-
background: var(--apple-
|
|
71
|
+
border-radius: 0.75rem;
|
|
72
|
+
background: var(--apple-aside-background);
|
|
78
73
|
box-shadow: none;
|
|
79
74
|
color: var(--apple-foreground);
|
|
80
75
|
text-align: start;
|
|
@@ -82,18 +77,15 @@ select:disabled {
|
|
|
82
77
|
.sl-banner a {
|
|
83
78
|
color: var(--apple-link);
|
|
84
79
|
}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
[data-has-sidebar] .sl-banner {
|
|
93
|
-
justify-self: end;
|
|
94
|
-
margin-inline: var(--sl-content-pad-x);
|
|
95
|
-
}
|
|
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);
|
|
96
87
|
}
|
|
88
|
+
|
|
97
89
|
@media (prefers-reduced-motion: reduce) {
|
|
98
90
|
*,
|
|
99
91
|
*::before,
|
package/styles/code.css
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
.sl-markdown-content :not(pre) > code:not(:where(.not-content *)) {
|
|
2
|
-
padding: 0
|
|
3
|
-
border:
|
|
4
|
-
border-radius: 0
|
|
5
|
-
background:
|
|
6
|
-
color:
|
|
2
|
+
padding: 0;
|
|
3
|
+
border: 0;
|
|
4
|
+
border-radius: 0;
|
|
5
|
+
background: transparent;
|
|
6
|
+
color: inherit;
|
|
7
7
|
font-family: var(--apple-font-mono);
|
|
8
8
|
font-size: 0.88em;
|
|
9
9
|
}
|
|
10
|
+
|
|
10
11
|
.expressive-code {
|
|
11
12
|
--ec-brdRad: var(--apple-radius-sm);
|
|
12
13
|
--ec-brdWd: 1px;
|
|
@@ -15,25 +16,19 @@
|
|
|
15
16
|
.expressive-code figure.frame {
|
|
16
17
|
box-shadow: none !important;
|
|
17
18
|
}
|
|
18
|
-
.sl-markdown-content .expressive-code .has-title {
|
|
19
|
-
--ec-uiPadBlk: 0.375rem;
|
|
20
|
-
}
|
|
21
19
|
.expressive-code .frame .header {
|
|
22
|
-
min-height: 2.
|
|
23
|
-
border-color: var(--apple-
|
|
20
|
+
min-height: 2.25rem;
|
|
21
|
+
border-color: var(--apple-hairline) !important;
|
|
24
22
|
background: var(--apple-code-background) !important;
|
|
25
23
|
}
|
|
26
|
-
.sl-markdown-content .expressive-code .frame.is-terminal .header {
|
|
27
|
-
border-bottom: 1px solid var(--apple-border) !important;
|
|
28
|
-
}
|
|
29
24
|
.expressive-code .frame .title {
|
|
30
25
|
color: var(--apple-secondary-foreground) !important;
|
|
31
26
|
font-family: var(--apple-font-sans) !important;
|
|
32
|
-
font-size: 0.
|
|
27
|
+
font-size: 0.8125rem !important;
|
|
33
28
|
font-weight: 500 !important;
|
|
34
29
|
}
|
|
35
30
|
.expressive-code pre {
|
|
36
|
-
border-color: var(--apple-
|
|
31
|
+
border-color: var(--apple-hairline) !important;
|
|
37
32
|
background: var(--apple-code-background) !important;
|
|
38
33
|
}
|
|
39
34
|
.expressive-code pre code {
|
|
@@ -41,37 +36,30 @@
|
|
|
41
36
|
line-height: 1.5625rem !important;
|
|
42
37
|
}
|
|
43
38
|
.expressive-code .copy button {
|
|
44
|
-
border-color: var(--apple-
|
|
39
|
+
border-color: var(--apple-hairline) !important;
|
|
45
40
|
border-radius: var(--apple-radius-sm) !important;
|
|
46
|
-
background: var(--apple-
|
|
41
|
+
background: var(--apple-secondary-background) !important;
|
|
47
42
|
color: var(--apple-secondary-foreground) !important;
|
|
48
43
|
}
|
|
49
|
-
.expressive-code .copy button:hover {
|
|
50
|
-
border-color: var(--apple-
|
|
51
|
-
background: var(--apple-
|
|
52
|
-
color: var(--apple-link) !important;
|
|
53
|
-
}
|
|
54
|
-
.expressive-code .copy button:active,
|
|
55
|
-
.expressive-code .copy button[data-copied] {
|
|
56
|
-
background: var(--apple-pressed) !important;
|
|
44
|
+
.expressive-code .copy button:is(:hover, :focus-visible) {
|
|
45
|
+
border-color: var(--apple-border) !important;
|
|
46
|
+
background: var(--apple-active-surface) !important;
|
|
57
47
|
color: var(--apple-foreground) !important;
|
|
58
48
|
}
|
|
59
49
|
.sl-markdown-content starlight-file-tree {
|
|
60
|
-
|
|
61
|
-
|
|
50
|
+
display: block;
|
|
51
|
+
margin-block: 1.5rem;
|
|
52
|
+
padding: 1rem;
|
|
53
|
+
border: 1px solid var(--apple-hairline);
|
|
54
|
+
border-radius: 0.75rem;
|
|
62
55
|
background: var(--apple-code-background);
|
|
63
56
|
}
|
|
64
|
-
.sl-markdown-content
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
.sl-markdown-content
|
|
71
|
-
|
|
72
|
-
.directory
|
|
73
|
-
> details
|
|
74
|
-
> summary:focus-visible
|
|
75
|
-
~ ul {
|
|
76
|
-
border-color: var(--apple-link);
|
|
57
|
+
.sl-markdown-content starlight-file-tree .tree-entry {
|
|
58
|
+
min-height: 1.75rem;
|
|
59
|
+
}
|
|
60
|
+
.sl-markdown-content starlight-file-tree .tree-icon {
|
|
61
|
+
color: var(--apple-tertiary-foreground);
|
|
62
|
+
}
|
|
63
|
+
.sl-markdown-content starlight-file-tree .comment {
|
|
64
|
+
color: var(--apple-tertiary-foreground);
|
|
77
65
|
}
|