starlight-theme-apple 0.1.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/CHANGELOG.md +101 -0
- package/README.md +15 -0
- package/components/PageTitle.astro +24 -0
- package/index.ts +49 -0
- package/package.json +43 -0
- package/styles/base.css +104 -0
- package/styles/code.css +77 -0
- package/styles/content.css +333 -0
- package/styles/controls.css +180 -0
- package/styles/header.css +112 -0
- package/styles/responsive.css +95 -0
- package/styles/search.css +78 -0
- package/styles/sidebar.css +87 -0
- package/styles/toc.css +70 -0
- package/styles/tokens.css +96 -0
- package/styles.css +12 -0
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
site-search > button {
|
|
2
|
+
min-height: 2rem;
|
|
3
|
+
border: 1px solid var(--apple-border-subtle);
|
|
4
|
+
border-radius: var(--apple-radius);
|
|
5
|
+
background: var(--apple-surface);
|
|
6
|
+
color: var(--apple-secondary-foreground);
|
|
7
|
+
box-shadow: none;
|
|
8
|
+
font-size: 0.8125rem;
|
|
9
|
+
}
|
|
10
|
+
site-search > button:hover {
|
|
11
|
+
border-color: var(--apple-border);
|
|
12
|
+
background: var(--apple-selection);
|
|
13
|
+
color: var(--apple-foreground);
|
|
14
|
+
}
|
|
15
|
+
site-search > button:active,
|
|
16
|
+
site-search > button[aria-expanded="true"] {
|
|
17
|
+
border-color: var(--apple-link);
|
|
18
|
+
background: var(--apple-pressed);
|
|
19
|
+
color: var(--apple-foreground);
|
|
20
|
+
}
|
|
21
|
+
site-search dialog {
|
|
22
|
+
border: 1px solid var(--apple-border);
|
|
23
|
+
border-radius: 0.75rem;
|
|
24
|
+
background: var(--apple-surface-raised);
|
|
25
|
+
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18);
|
|
26
|
+
}
|
|
27
|
+
site-search dialog::backdrop {
|
|
28
|
+
background: rgba(0, 0, 0, 0.34);
|
|
29
|
+
-webkit-backdrop-filter: blur(4px);
|
|
30
|
+
backdrop-filter: blur(4px);
|
|
31
|
+
}
|
|
32
|
+
site-search input {
|
|
33
|
+
min-height: 2.75rem;
|
|
34
|
+
border-color: var(--apple-border);
|
|
35
|
+
border-radius: var(--apple-radius);
|
|
36
|
+
background: var(--apple-code-background);
|
|
37
|
+
color: var(--apple-foreground);
|
|
38
|
+
}
|
|
39
|
+
#starlight__search .pagefind-ui__search-input {
|
|
40
|
+
padding-inline: 3.25rem 4.25rem;
|
|
41
|
+
}
|
|
42
|
+
site-search [data-close-modal] {
|
|
43
|
+
min-width: 2.75rem;
|
|
44
|
+
min-height: 2.75rem;
|
|
45
|
+
padding: 0.5rem;
|
|
46
|
+
border-radius: var(--apple-radius-sm);
|
|
47
|
+
}
|
|
48
|
+
site-search [data-close-modal]:hover {
|
|
49
|
+
background: var(--apple-selection);
|
|
50
|
+
}
|
|
51
|
+
site-search [data-close-modal]:active {
|
|
52
|
+
background: var(--apple-pressed);
|
|
53
|
+
}
|
|
54
|
+
site-search input:focus {
|
|
55
|
+
border-color: var(--apple-link);
|
|
56
|
+
box-shadow: 0 0 0 3px var(--apple-selection);
|
|
57
|
+
outline: 0;
|
|
58
|
+
}
|
|
59
|
+
.pagefind-ui__result {
|
|
60
|
+
border-color: var(--apple-border-subtle) !important;
|
|
61
|
+
border-radius: var(--apple-radius-sm);
|
|
62
|
+
transition:
|
|
63
|
+
background-color var(--apple-transition),
|
|
64
|
+
border-color var(--apple-transition);
|
|
65
|
+
}
|
|
66
|
+
.pagefind-ui__result:is(:hover, :focus-within) {
|
|
67
|
+
border-color: var(--apple-border) !important;
|
|
68
|
+
background: var(--apple-selection);
|
|
69
|
+
}
|
|
70
|
+
.pagefind-ui__result-link {
|
|
71
|
+
color: var(--apple-foreground) !important;
|
|
72
|
+
}
|
|
73
|
+
.pagefind-ui__result-link:hover {
|
|
74
|
+
color: var(--apple-link) !important;
|
|
75
|
+
}
|
|
76
|
+
.pagefind-ui__result-excerpt {
|
|
77
|
+
color: var(--apple-secondary-foreground) !important;
|
|
78
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
.sidebar-pane {
|
|
2
|
+
border-inline-end: 1px solid var(--apple-border-subtle);
|
|
3
|
+
background: var(--apple-sidebar-background);
|
|
4
|
+
}
|
|
5
|
+
.sidebar-content {
|
|
6
|
+
padding-top: 1rem;
|
|
7
|
+
scrollbar-color: var(--apple-border) transparent;
|
|
8
|
+
}
|
|
9
|
+
.sidebar-content .top-level {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: 0.1rem;
|
|
13
|
+
}
|
|
14
|
+
.sidebar-content .top-level > li {
|
|
15
|
+
margin-block: 0;
|
|
16
|
+
}
|
|
17
|
+
.sidebar-content .top-level > li + li:has(details) {
|
|
18
|
+
margin-top: 1.05rem;
|
|
19
|
+
padding-top: 1rem;
|
|
20
|
+
border-top: 1px solid var(--apple-border-subtle);
|
|
21
|
+
}
|
|
22
|
+
.sidebar-content summary {
|
|
23
|
+
min-height: 2rem;
|
|
24
|
+
padding: 0.34375rem 0.55rem;
|
|
25
|
+
color: var(--apple-foreground);
|
|
26
|
+
font-size: 0.875rem;
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
letter-spacing: -0.005em;
|
|
29
|
+
}
|
|
30
|
+
.sidebar-content .large,
|
|
31
|
+
.sidebar-content a.large {
|
|
32
|
+
padding-inline: 0.55rem;
|
|
33
|
+
font-size: 0.875rem;
|
|
34
|
+
}
|
|
35
|
+
.sidebar-content summary:hover,
|
|
36
|
+
.sidebar-content summary:focus-visible {
|
|
37
|
+
background: var(--apple-selection);
|
|
38
|
+
color: var(--apple-link);
|
|
39
|
+
}
|
|
40
|
+
.sidebar-content details[open] > summary {
|
|
41
|
+
color: var(--apple-foreground);
|
|
42
|
+
}
|
|
43
|
+
.sidebar-content .caret {
|
|
44
|
+
color: var(--apple-tertiary-foreground);
|
|
45
|
+
}
|
|
46
|
+
.sidebar-content ul ul {
|
|
47
|
+
margin-inline-start: 0.55rem;
|
|
48
|
+
padding-inline-start: 0.55rem;
|
|
49
|
+
border-inline-start: 1px solid var(--apple-border-subtle);
|
|
50
|
+
}
|
|
51
|
+
.sidebar-content li {
|
|
52
|
+
border: 0;
|
|
53
|
+
padding: 0;
|
|
54
|
+
}
|
|
55
|
+
.sidebar-content a {
|
|
56
|
+
min-height: 2rem;
|
|
57
|
+
margin-block: 1px;
|
|
58
|
+
padding: 0.34375rem 0.55rem;
|
|
59
|
+
border-radius: var(--apple-radius-sm);
|
|
60
|
+
color: var(--apple-secondary-foreground);
|
|
61
|
+
font-size: 0.875rem;
|
|
62
|
+
font-weight: 400;
|
|
63
|
+
line-height: 1.3125rem;
|
|
64
|
+
text-decoration: none;
|
|
65
|
+
}
|
|
66
|
+
.sidebar-content a:hover {
|
|
67
|
+
background: var(--apple-selection);
|
|
68
|
+
color: var(--apple-link);
|
|
69
|
+
}
|
|
70
|
+
.sidebar-content a:active {
|
|
71
|
+
background: var(--apple-pressed);
|
|
72
|
+
}
|
|
73
|
+
.sidebar-content a:focus-visible {
|
|
74
|
+
background: var(--apple-selection);
|
|
75
|
+
color: var(--apple-link);
|
|
76
|
+
outline-offset: -2px;
|
|
77
|
+
}
|
|
78
|
+
.sidebar-content a[aria-current="page"] {
|
|
79
|
+
background: var(--apple-surface);
|
|
80
|
+
color: var(--apple-foreground);
|
|
81
|
+
font-weight: 600;
|
|
82
|
+
}
|
|
83
|
+
.sidebar-content a[aria-current="page"]:hover,
|
|
84
|
+
.sidebar-content a[aria-current="page"]:focus-visible {
|
|
85
|
+
background: var(--apple-pressed);
|
|
86
|
+
color: var(--apple-foreground);
|
|
87
|
+
}
|
package/styles/toc.css
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
.right-sidebar {
|
|
2
|
+
width: var(--apple-toc-width);
|
|
3
|
+
border-inline-start: 0;
|
|
4
|
+
background: transparent;
|
|
5
|
+
}
|
|
6
|
+
.right-sidebar-panel {
|
|
7
|
+
padding-top: 2.2rem;
|
|
8
|
+
}
|
|
9
|
+
.right-sidebar h2 {
|
|
10
|
+
margin-bottom: 0.75rem;
|
|
11
|
+
color: var(--apple-foreground);
|
|
12
|
+
font-size: 0.75rem;
|
|
13
|
+
font-weight: 600;
|
|
14
|
+
letter-spacing: 0.01em;
|
|
15
|
+
}
|
|
16
|
+
.right-sidebar ul {
|
|
17
|
+
border-inline-start: 0;
|
|
18
|
+
}
|
|
19
|
+
.right-sidebar a {
|
|
20
|
+
margin-block: 0.3125rem;
|
|
21
|
+
padding-block: 0;
|
|
22
|
+
padding-inline-start: 0;
|
|
23
|
+
border-inline-start: 0;
|
|
24
|
+
color: var(--apple-secondary-foreground);
|
|
25
|
+
font-size: 0.875rem;
|
|
26
|
+
line-height: 1.125rem;
|
|
27
|
+
}
|
|
28
|
+
.right-sidebar a:hover {
|
|
29
|
+
color: var(--apple-link);
|
|
30
|
+
}
|
|
31
|
+
.right-sidebar a:focus-visible {
|
|
32
|
+
border-radius: 2px;
|
|
33
|
+
color: var(--apple-link);
|
|
34
|
+
outline-offset: 2px;
|
|
35
|
+
}
|
|
36
|
+
.right-sidebar a[aria-current="true"] {
|
|
37
|
+
color: var(--apple-foreground);
|
|
38
|
+
font-weight: 500;
|
|
39
|
+
}
|
|
40
|
+
.right-sidebar li:has(> ul) > a {
|
|
41
|
+
color: var(--apple-foreground);
|
|
42
|
+
font-weight: 600;
|
|
43
|
+
}
|
|
44
|
+
mobile-starlight-toc > nav {
|
|
45
|
+
border-block: 1px solid var(--apple-border-subtle);
|
|
46
|
+
background: var(--apple-header-background);
|
|
47
|
+
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
|
48
|
+
backdrop-filter: saturate(180%) blur(20px);
|
|
49
|
+
}
|
|
50
|
+
mobile-starlight-toc summary {
|
|
51
|
+
color: var(--apple-secondary-foreground);
|
|
52
|
+
font-size: 0.8125rem;
|
|
53
|
+
}
|
|
54
|
+
mobile-starlight-toc .toggle {
|
|
55
|
+
min-height: 2.25rem;
|
|
56
|
+
border-color: var(--apple-border);
|
|
57
|
+
border-radius: var(--apple-radius-sm);
|
|
58
|
+
background: var(--apple-background);
|
|
59
|
+
}
|
|
60
|
+
mobile-starlight-toc details[open] .toggle,
|
|
61
|
+
mobile-starlight-toc .toggle:hover {
|
|
62
|
+
border-color: var(--apple-link);
|
|
63
|
+
background: var(--apple-selection);
|
|
64
|
+
color: var(--apple-foreground);
|
|
65
|
+
}
|
|
66
|
+
mobile-starlight-toc .dropdown {
|
|
67
|
+
border-color: var(--apple-border-subtle);
|
|
68
|
+
background: var(--apple-background);
|
|
69
|
+
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
|
|
70
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
color-scheme: dark;
|
|
3
|
+
--apple-background: #111;
|
|
4
|
+
--apple-sidebar-background: #161616;
|
|
5
|
+
--apple-surface: #2a2a2a;
|
|
6
|
+
--apple-surface-raised: #1c1c1e;
|
|
7
|
+
--apple-foreground: #fff;
|
|
8
|
+
--apple-secondary-foreground: #ccc;
|
|
9
|
+
--apple-tertiary-foreground: #999;
|
|
10
|
+
--apple-border: #575757;
|
|
11
|
+
--apple-border-subtle: rgba(255, 255, 255, 0.12);
|
|
12
|
+
--apple-code-background: #2a2a2a;
|
|
13
|
+
--apple-link: #09f;
|
|
14
|
+
--apple-link-hover: #40b3ff;
|
|
15
|
+
--apple-selection: rgba(0, 153, 255, 0.16);
|
|
16
|
+
--apple-pressed: rgba(0, 153, 255, 0.24);
|
|
17
|
+
--apple-control-primary-text: #000;
|
|
18
|
+
--apple-disabled-opacity: 0.42;
|
|
19
|
+
--apple-header-background: rgba(17, 17, 17, 0.82);
|
|
20
|
+
--apple-note: #64d2ff;
|
|
21
|
+
--apple-warning: #ff9f0a;
|
|
22
|
+
--apple-danger: #ff6961;
|
|
23
|
+
--apple-success: #30d158;
|
|
24
|
+
--apple-font-sans:
|
|
25
|
+
-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui,
|
|
26
|
+
Arial, sans-serif;
|
|
27
|
+
--apple-font-mono:
|
|
28
|
+
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
29
|
+
monospace;
|
|
30
|
+
--apple-header-height: 3.25rem;
|
|
31
|
+
--apple-sidebar-width: 18.5rem;
|
|
32
|
+
--apple-toc-width: 12rem;
|
|
33
|
+
--apple-content-width: 51.25rem;
|
|
34
|
+
--apple-radius-sm: 0.25rem;
|
|
35
|
+
--apple-radius: 0.5rem;
|
|
36
|
+
--apple-transition: 150ms ease;
|
|
37
|
+
--sl-font: var(--apple-font-sans);
|
|
38
|
+
--sl-font-mono: var(--apple-font-mono);
|
|
39
|
+
--sl-nav-height: var(--apple-header-height);
|
|
40
|
+
--sl-sidebar-width: var(--apple-sidebar-width);
|
|
41
|
+
--sl-content-width: var(--apple-content-width);
|
|
42
|
+
--sl-content-pad-x: clamp(1.25rem, 3vw, 2.5rem);
|
|
43
|
+
--sl-color-accent-low: #132f4d;
|
|
44
|
+
--sl-color-accent: var(--apple-link);
|
|
45
|
+
--sl-color-accent-high: #a8d1ff;
|
|
46
|
+
--sl-color-white: var(--apple-foreground);
|
|
47
|
+
--sl-color-gray-1: #e5e5ea;
|
|
48
|
+
--sl-color-gray-2: #c7c7cc;
|
|
49
|
+
--sl-color-gray-3: var(--apple-secondary-foreground);
|
|
50
|
+
--sl-color-gray-4: var(--apple-tertiary-foreground);
|
|
51
|
+
--sl-color-gray-5: var(--apple-border);
|
|
52
|
+
--sl-color-gray-6: var(--apple-surface);
|
|
53
|
+
--sl-color-gray-7: #242426;
|
|
54
|
+
--sl-color-black: var(--apple-background);
|
|
55
|
+
--sl-color-bg: var(--apple-background);
|
|
56
|
+
--sl-color-bg-nav: var(--apple-header-background);
|
|
57
|
+
--sl-color-bg-sidebar: var(--apple-sidebar-background);
|
|
58
|
+
--sl-color-hairline: var(--apple-border);
|
|
59
|
+
--sl-color-hairline-light: var(--apple-border-subtle);
|
|
60
|
+
--sl-text-body: 1.0625rem;
|
|
61
|
+
--sl-text-h1: 2.5rem;
|
|
62
|
+
--sl-text-h2: 2rem;
|
|
63
|
+
--sl-text-h3: 1.75rem;
|
|
64
|
+
--sl-text-h4: 1.5rem;
|
|
65
|
+
--sl-mobile-toc-height: 3.25rem;
|
|
66
|
+
--sl-content-gap-y: 1rem;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
:root[data-theme="light"] {
|
|
70
|
+
color-scheme: light;
|
|
71
|
+
--apple-background: #fff;
|
|
72
|
+
--apple-sidebar-background: #f7f7f7;
|
|
73
|
+
--apple-surface: #f0f0f0;
|
|
74
|
+
--apple-surface-raised: #fff;
|
|
75
|
+
--apple-foreground: #000;
|
|
76
|
+
--apple-secondary-foreground: #666;
|
|
77
|
+
--apple-tertiary-foreground: #767676;
|
|
78
|
+
--apple-border: #ccc;
|
|
79
|
+
--apple-border-subtle: rgba(0, 0, 0, 0.12);
|
|
80
|
+
--apple-code-background: #f0f0f0;
|
|
81
|
+
--apple-link: #36f;
|
|
82
|
+
--apple-link-hover: #174ea6;
|
|
83
|
+
--apple-selection: rgba(51, 102, 255, 0.09);
|
|
84
|
+
--apple-pressed: rgba(51, 102, 255, 0.16);
|
|
85
|
+
--apple-control-primary-text: #fff;
|
|
86
|
+
--apple-header-background: rgba(255, 255, 255, 0.82);
|
|
87
|
+
--sl-color-accent-low: #e8f2ff;
|
|
88
|
+
--sl-color-accent-high: #004b99;
|
|
89
|
+
--sl-color-gray-1: #2c2c2e;
|
|
90
|
+
--sl-color-gray-2: #48484a;
|
|
91
|
+
--sl-color-gray-3: var(--apple-secondary-foreground);
|
|
92
|
+
--sl-color-gray-4: var(--apple-tertiary-foreground);
|
|
93
|
+
--sl-color-gray-5: var(--apple-border);
|
|
94
|
+
--sl-color-gray-6: #e8e8ed;
|
|
95
|
+
--sl-color-gray-7: var(--apple-sidebar-background);
|
|
96
|
+
}
|
package/styles.css
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
@layer starlight, apple-docs;
|
|
2
|
+
|
|
3
|
+
@import "./styles/tokens.css" layer(apple-docs);
|
|
4
|
+
@import "./styles/base.css" layer(apple-docs);
|
|
5
|
+
@import "./styles/header.css" layer(apple-docs);
|
|
6
|
+
@import "./styles/sidebar.css" layer(apple-docs);
|
|
7
|
+
@import "./styles/content.css" layer(apple-docs);
|
|
8
|
+
@import "./styles/toc.css" layer(apple-docs);
|
|
9
|
+
@import "./styles/code.css" layer(apple-docs);
|
|
10
|
+
@import "./styles/controls.css" layer(apple-docs);
|
|
11
|
+
@import "./styles/search.css" layer(apple-docs);
|
|
12
|
+
@import "./styles/responsive.css" layer(apple-docs);
|