starlight-theme-apple 0.1.0 → 0.2.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 (16) hide show
  1. package/README.md +1 -1
  2. package/components/PageTitle.astro +32 -11
  3. package/components/Pagination.astro +34 -0
  4. package/index.ts +94 -4
  5. package/package.json +2 -2
  6. package/styles/base.css +15 -31
  7. package/styles/code.css +16 -40
  8. package/styles/content.css +146 -148
  9. package/styles/controls.css +25 -74
  10. package/styles/header.css +28 -34
  11. package/styles/responsive.css +50 -19
  12. package/styles/search.css +17 -28
  13. package/styles/sidebar.css +37 -39
  14. package/styles/toc.css +15 -15
  15. package/styles/tokens.css +24 -19
  16. package/CHANGELOG.md +0 -101
package/styles/header.css CHANGED
@@ -1,39 +1,42 @@
1
1
  header.header {
2
2
  height: var(--apple-header-height);
3
- border-bottom: 1px solid var(--apple-border-subtle);
3
+ border-bottom: 1px solid var(--apple-hairline);
4
4
  background: var(--apple-header-background);
5
5
  color: var(--apple-foreground);
6
6
  -webkit-backdrop-filter: saturate(180%) blur(20px);
7
7
  backdrop-filter: saturate(180%) blur(20px);
8
8
  }
9
+
9
10
  header.header > .header {
10
11
  height: 100%;
11
12
  padding-inline: clamp(1rem, 2.4vw, 2rem);
12
13
  }
14
+
13
15
  .site-title {
14
16
  min-width: 0;
15
17
  overflow: hidden;
16
18
  color: var(--apple-foreground);
17
- font-size: 1.05rem;
19
+ font-size: 1.1875rem;
18
20
  font-weight: 600;
21
+ line-height: 1.6875rem;
19
22
  letter-spacing: -0.015em;
20
23
  text-overflow: ellipsis;
21
24
  white-space: nowrap;
22
25
  }
23
26
  .site-title:hover {
24
- color: var(--apple-link);
25
- }
26
- .right-group {
27
- align-items: center;
28
- gap: 0.35rem;
27
+ color: var(--apple-foreground);
28
+ opacity: 0.72;
29
29
  }
30
+
31
+ .right-group,
30
32
  .social-icons {
31
33
  align-items: center;
32
- gap: 0.2rem;
34
+ gap: 0.25rem;
33
35
  }
34
36
  .social-icons::after {
35
37
  display: none;
36
38
  }
39
+
37
40
  .social-icons a,
38
41
  starlight-theme-select,
39
42
  starlight-lang-select {
@@ -58,55 +61,46 @@ starlight-lang-select {
58
61
  :is(starlight-theme-select, starlight-lang-select) > label {
59
62
  height: 100%;
60
63
  }
61
- :is(starlight-theme-select, starlight-lang-select) > label > select {
64
+ :is(starlight-theme-select, starlight-lang-select) select {
62
65
  height: 2.25rem;
63
66
  margin-block: 0;
64
67
  padding-block: 0;
65
68
  line-height: 2.25rem;
66
69
  }
70
+
67
71
  .social-icons a:hover,
68
72
  starlight-theme-select:hover,
69
73
  starlight-lang-select:hover {
70
- background: var(--apple-selection);
71
- color: var(--apple-link);
72
- }
73
- .social-icons a:active,
74
- starlight-theme-select:active,
75
- starlight-lang-select:active {
76
- background: var(--apple-pressed);
74
+ background: var(--apple-active-surface);
75
+ color: var(--apple-foreground);
77
76
  }
78
- starlight-menu-button button {
77
+
78
+ .sidebar :is(.sl-menu-button, button[aria-controls="starlight__sidebar"]) {
79
79
  display: inline-grid;
80
80
  place-items: center;
81
81
  width: var(--sl-menu-button-size);
82
82
  height: var(--sl-menu-button-size);
83
83
  border: 0;
84
+ border-radius: var(--apple-radius-sm);
84
85
  background: transparent;
85
86
  box-shadow: none;
86
87
  color: var(--apple-foreground);
87
88
  }
88
- starlight-menu-button button:hover {
89
- background: var(--apple-selection);
90
- color: var(--apple-link);
91
- }
92
- starlight-menu-button[aria-expanded="true"] button,
93
- starlight-menu-button button:active {
94
- background: var(--apple-pressed);
95
- color: var(--apple-link);
89
+ .sidebar
90
+ :is(.sl-menu-button, button[aria-controls="starlight__sidebar"]):is(
91
+ :hover,
92
+ :active
93
+ ) {
94
+ background: var(--apple-active-surface);
95
+ color: var(--apple-foreground);
96
96
  }
97
+
97
98
  @media (min-width: 50rem) {
98
- header.header > .header > div.sl-flex:has(site-search) {
99
+ header.header site-search {
99
100
  justify-self: end;
100
101
  min-width: 15rem;
101
102
  }
102
103
  :is(starlight-theme-select, starlight-lang-select) {
103
- padding-inline-start: 0.35rem;
104
- border: 1px solid transparent;
105
- }
106
- :is(starlight-theme-select, starlight-lang-select):hover {
107
- border-color: var(--apple-border-subtle);
108
- }
109
- :is(starlight-theme-select, starlight-lang-select) > label > select {
110
- min-height: 2.25rem;
104
+ padding-inline-start: 0.25rem;
111
105
  }
112
106
  }
package/styles/responsive.css CHANGED
@@ -6,7 +6,7 @@
6
6
  top: var(--apple-header-height);
7
7
  height: calc(100vh - var(--apple-header-height));
8
8
  }
9
- starlight-menu-button {
9
+ .sidebar :is(.sl-menu-button, button[aria-controls="starlight__sidebar"]) {
10
10
  display: none !important;
11
11
  }
12
12
  }
@@ -23,28 +23,42 @@
23
23
  margin-inline: auto;
24
24
  }
25
25
  }
26
- @media (min-width: 90rem) {
27
- :root {
28
- --apple-sidebar-width: 18.5rem;
29
- --apple-toc-width: 13rem;
30
- }
31
- }
32
26
  @media (max-width: 71.99rem) {
33
27
  .content-panel:first-of-type .sl-container {
34
28
  padding-top: clamp(2rem, 5vw, 3.5rem);
35
29
  }
30
+ .content-panel h1 {
31
+ font-size: 2.5rem;
32
+ line-height: 2.75rem;
33
+ }
34
+ .sl-markdown-content h2:not(:where(.not-content *)) {
35
+ font-size: 1.75rem;
36
+ line-height: 2.25rem;
37
+ }
38
+ .sl-markdown-content h3:not(:where(.not-content *)) {
39
+ font-size: 1.5rem;
40
+ line-height: 1.75rem;
41
+ }
42
+ .sl-markdown-content h4:not(:where(.not-content *)) {
43
+ font-size: 1.3125rem;
44
+ line-height: 1.5625rem;
45
+ }
36
46
  }
37
47
  @media (max-width: 49.99rem) {
48
+ :root {
49
+ --apple-header-height: 3rem;
50
+ --sl-mobile-toc-height: 3rem;
51
+ }
38
52
  .sidebar-pane {
39
- background: var(--apple-sidebar-background);
53
+ background: var(--apple-navigator-background);
40
54
  }
41
55
  .sidebar-content {
42
56
  padding: 1rem;
43
57
  }
44
58
  .mobile-preferences {
45
59
  align-items: center;
46
- min-height: 3.75rem;
47
- padding-block: 0.75rem;
60
+ min-height: 3.5rem;
61
+ padding-block: 0.625rem;
48
62
  }
49
63
  .mobile-preferences .social-icons {
50
64
  align-items: center;
@@ -58,29 +72,46 @@
58
72
  .content-panel:first-of-type .sl-container {
59
73
  padding-top: 2rem;
60
74
  }
61
- .sl-markdown-content h2:not(:where(.not-content *)) {
62
- margin-top: 0;
75
+ .content-panel h1 {
76
+ font-size: 2rem;
77
+ line-height: 2.25rem;
78
+ }
79
+ .content-panel
80
+ .sl-container
81
+ > p:first-of-type:not(:where(.sl-markdown-content *)) {
82
+ font-size: 1.1875rem;
83
+ line-height: 1.6875rem;
63
84
  }
64
85
  .sl-markdown-content .sl-heading-wrapper.level-h2 {
65
- margin-top: 2.6rem;
86
+ margin-top: 2.25rem;
87
+ }
88
+ .sl-markdown-content h2:not(:where(.not-content *)) {
89
+ font-size: 1.5rem;
90
+ line-height: 2rem;
91
+ }
92
+ .sl-markdown-content h3:not(:where(.not-content *)) {
93
+ font-size: 1.3125rem;
94
+ line-height: 1.5625rem;
95
+ }
96
+ .sl-markdown-content h4:not(:where(.not-content *)) {
97
+ font-size: 1.1875rem;
98
+ line-height: 1.4375rem;
66
99
  }
67
100
  .pagination-links {
68
101
  grid-template-columns: 1fr;
102
+ gap: 1rem;
69
103
  }
70
104
  }
71
105
  @media (max-width: 30rem) {
72
106
  :root {
73
- --sl-content-pad-x: 1.15rem;
107
+ --sl-content-pad-x: 1.25rem;
74
108
  }
75
109
  header.header > .header {
76
110
  padding-inline: 0.75rem;
77
111
  }
78
- .content-panel h1 {
79
- font-size: 1.75rem;
80
- line-height: 2rem;
81
- }
82
- .sl-markdown-content {
112
+ .site-title {
83
113
  font-size: 1.0625rem;
114
+ line-height: 1.25rem;
84
115
  }
85
116
  .sl-markdown-content table:not(:where(.not-content *)) {
86
117
  display: block;
package/styles/search.css CHANGED
@@ -1,38 +1,33 @@
1
1
  site-search > button {
2
2
  min-height: 2rem;
3
- border: 1px solid var(--apple-border-subtle);
4
- border-radius: var(--apple-radius);
5
- background: var(--apple-surface);
3
+ border: 1px solid var(--apple-hairline);
4
+ border-radius: var(--apple-radius-sm);
5
+ background: transparent;
6
6
  color: var(--apple-secondary-foreground);
7
7
  box-shadow: none;
8
8
  font-size: 0.8125rem;
9
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,
10
+ site-search > button:is(:hover, :active),
16
11
  site-search > button[aria-expanded="true"] {
17
- border-color: var(--apple-link);
18
- background: var(--apple-pressed);
12
+ border-color: var(--apple-border);
13
+ background: var(--apple-active-surface);
19
14
  color: var(--apple-foreground);
20
15
  }
21
16
  site-search dialog {
22
17
  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);
18
+ border-radius: var(--apple-radius-sm);
19
+ background: var(--apple-secondary-background);
20
+ box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
26
21
  }
27
22
  site-search dialog::backdrop {
28
- background: rgba(0, 0, 0, 0.34);
23
+ background: rgba(0, 0, 0, 0.3);
29
24
  -webkit-backdrop-filter: blur(4px);
30
25
  backdrop-filter: blur(4px);
31
26
  }
32
27
  site-search input {
33
28
  min-height: 2.75rem;
34
29
  border-color: var(--apple-border);
35
- border-radius: var(--apple-radius);
30
+ border-radius: var(--apple-radius-sm);
36
31
  background: var(--apple-code-background);
37
32
  color: var(--apple-foreground);
38
33
  }
@@ -46,26 +41,20 @@ site-search [data-close-modal] {
46
41
  border-radius: var(--apple-radius-sm);
47
42
  }
48
43
  site-search [data-close-modal]:hover {
49
- background: var(--apple-selection);
50
- }
51
- site-search [data-close-modal]:active {
52
- background: var(--apple-pressed);
44
+ background: var(--apple-active-surface);
53
45
  }
54
46
  site-search input:focus {
55
47
  border-color: var(--apple-link);
56
- box-shadow: 0 0 0 3px var(--apple-selection);
48
+ box-shadow: 0 0 0 3px var(--apple-focus);
57
49
  outline: 0;
58
50
  }
59
51
  .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);
52
+ border-color: var(--apple-hairline) !important;
53
+ border-radius: 0;
54
+ transition: background-color var(--apple-transition);
65
55
  }
66
56
  .pagefind-ui__result:is(:hover, :focus-within) {
67
- border-color: var(--apple-border) !important;
68
- background: var(--apple-selection);
57
+ background: var(--apple-hover-surface);
69
58
  }
70
59
  .pagefind-ui__result-link {
71
60
  color: var(--apple-foreground) !important;
package/styles/sidebar.css CHANGED
@@ -1,61 +1,65 @@
1
1
  .sidebar-pane {
2
- border-inline-end: 1px solid var(--apple-border-subtle);
3
- background: var(--apple-sidebar-background);
2
+ border-inline-end: 1px solid var(--apple-hairline);
3
+ background: var(--apple-navigator-background);
4
4
  }
5
+
5
6
  .sidebar-content {
6
7
  padding-top: 1rem;
7
8
  scrollbar-color: var(--apple-border) transparent;
8
9
  }
10
+
9
11
  .sidebar-content .top-level {
10
12
  display: flex;
11
13
  flex-direction: column;
12
- gap: 0.1rem;
14
+ gap: 0.75rem;
13
15
  }
14
16
  .sidebar-content .top-level > li {
15
17
  margin-block: 0;
16
18
  }
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
- }
19
+
22
20
  .sidebar-content summary {
23
- min-height: 2rem;
24
- padding: 0.34375rem 0.55rem;
25
- color: var(--apple-foreground);
21
+ min-height: var(--apple-row-height);
22
+ padding: 0.34375rem 0.5rem;
23
+ border-radius: var(--apple-radius-sm);
24
+ color: var(--apple-tertiary-foreground);
26
25
  font-size: 0.875rem;
27
26
  font-weight: 600;
27
+ line-height: 1.3125rem;
28
28
  letter-spacing: -0.005em;
29
29
  }
30
30
  .sidebar-content .large,
31
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);
32
+ color: inherit;
33
+ font-size: inherit;
34
+ font-weight: inherit;
39
35
  }
40
- .sidebar-content details[open] > summary {
41
- color: var(--apple-foreground);
36
+ .sidebar-content summary:is(:hover, :focus-visible) {
37
+ background: var(--apple-hover-surface);
38
+ color: var(--apple-secondary-foreground);
42
39
  }
43
40
  .sidebar-content .caret {
41
+ width: 1rem;
44
42
  color: var(--apple-tertiary-foreground);
43
+ opacity: 0.8;
45
44
  }
45
+
46
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);
47
+ margin-inline-start: 0.75rem;
48
+ padding-inline-start: 0.5rem;
49
+ border-inline-start: 0;
50
+ }
51
+ .sidebar-content ul ul li {
52
+ border-inline-start: 0;
50
53
  }
51
54
  .sidebar-content li {
52
55
  border: 0;
53
56
  padding: 0;
54
57
  }
58
+
55
59
  .sidebar-content a {
56
- min-height: 2rem;
57
- margin-block: 1px;
58
- padding: 0.34375rem 0.55rem;
60
+ min-height: var(--apple-row-height);
61
+ margin-block: 0;
62
+ padding: 0.34375rem 0.5rem;
59
63
  border-radius: var(--apple-radius-sm);
60
64
  color: var(--apple-secondary-foreground);
61
65
  font-size: 0.875rem;
@@ -63,25 +67,19 @@
63
67
  line-height: 1.3125rem;
64
68
  text-decoration: none;
65
69
  }
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);
70
+ .sidebar-content a:is(:hover, :focus-visible) {
71
+ background: var(--apple-hover-surface);
72
+ color: var(--apple-secondary-foreground);
72
73
  }
73
74
  .sidebar-content a:focus-visible {
74
- background: var(--apple-selection);
75
- color: var(--apple-link);
76
75
  outline-offset: -2px;
77
76
  }
78
77
  .sidebar-content a[aria-current="page"] {
79
- background: var(--apple-surface);
78
+ background: var(--apple-active-surface);
80
79
  color: var(--apple-foreground);
81
- font-weight: 600;
80
+ font-weight: 500;
82
81
  }
83
- .sidebar-content a[aria-current="page"]:hover,
84
- .sidebar-content a[aria-current="page"]:focus-visible {
85
- background: var(--apple-pressed);
82
+ .sidebar-content a[aria-current="page"]:is(:hover, :focus-visible) {
83
+ background: var(--apple-active-surface);
86
84
  color: var(--apple-foreground);
87
85
  }
package/styles/toc.css CHANGED
@@ -4,22 +4,25 @@
4
4
  background: transparent;
5
5
  }
6
6
  .right-sidebar-panel {
7
- padding-top: 2.2rem;
7
+ padding-top: 2.5rem;
8
8
  }
9
9
  .right-sidebar h2 {
10
- margin-bottom: 0.75rem;
10
+ margin-bottom: 0.625rem;
11
11
  color: var(--apple-foreground);
12
12
  font-size: 0.75rem;
13
13
  font-weight: 600;
14
+ line-height: 1rem;
14
15
  letter-spacing: 0.01em;
15
16
  }
16
17
  .right-sidebar ul {
17
18
  border-inline-start: 0;
18
19
  }
20
+ .right-sidebar ul ul {
21
+ padding-inline-start: 0.75rem;
22
+ }
19
23
  .right-sidebar a {
20
24
  margin-block: 0.3125rem;
21
- padding-block: 0;
22
- padding-inline-start: 0;
25
+ padding: 0;
23
26
  border-inline-start: 0;
24
27
  color: var(--apple-secondary-foreground);
25
28
  font-size: 0.875rem;
@@ -37,12 +40,9 @@
37
40
  color: var(--apple-foreground);
38
41
  font-weight: 500;
39
42
  }
40
- .right-sidebar li:has(> ul) > a {
41
- color: var(--apple-foreground);
42
- font-weight: 600;
43
- }
43
+
44
44
  mobile-starlight-toc > nav {
45
- border-block: 1px solid var(--apple-border-subtle);
45
+ border-block: 1px solid var(--apple-hairline);
46
46
  background: var(--apple-header-background);
47
47
  -webkit-backdrop-filter: saturate(180%) blur(20px);
48
48
  backdrop-filter: saturate(180%) blur(20px);
@@ -53,18 +53,18 @@ mobile-starlight-toc summary {
53
53
  }
54
54
  mobile-starlight-toc .toggle {
55
55
  min-height: 2.25rem;
56
- border-color: var(--apple-border);
56
+ border-color: transparent;
57
57
  border-radius: var(--apple-radius-sm);
58
- background: var(--apple-background);
58
+ background: transparent;
59
59
  }
60
60
  mobile-starlight-toc details[open] .toggle,
61
61
  mobile-starlight-toc .toggle:hover {
62
- border-color: var(--apple-link);
63
- background: var(--apple-selection);
62
+ border-color: transparent;
63
+ background: var(--apple-active-surface);
64
64
  color: var(--apple-foreground);
65
65
  }
66
66
  mobile-starlight-toc .dropdown {
67
- border-color: var(--apple-border-subtle);
67
+ border-color: var(--apple-hairline);
68
68
  background: var(--apple-background);
69
- box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
69
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
70
70
  }
package/styles/tokens.css CHANGED
@@ -1,23 +1,25 @@
1
1
  :root {
2
2
  color-scheme: dark;
3
3
  --apple-background: #111;
4
- --apple-sidebar-background: #161616;
4
+ --apple-navigator-background: #161616;
5
+ --apple-secondary-background: #1c1c1e;
5
6
  --apple-surface: #2a2a2a;
6
- --apple-surface-raised: #1c1c1e;
7
+ --apple-hover-surface: rgba(0, 153, 255, 0.08);
8
+ --apple-active-surface: rgba(255, 255, 255, 0.1);
7
9
  --apple-foreground: #fff;
8
10
  --apple-secondary-foreground: #ccc;
9
11
  --apple-tertiary-foreground: #999;
12
+ --apple-hairline: rgba(255, 255, 255, 0.12);
10
13
  --apple-border: #575757;
11
- --apple-border-subtle: rgba(255, 255, 255, 0.12);
12
- --apple-code-background: #2a2a2a;
13
14
  --apple-link: #09f;
14
15
  --apple-link-hover: #40b3ff;
15
- --apple-selection: rgba(0, 153, 255, 0.16);
16
- --apple-pressed: rgba(0, 153, 255, 0.24);
16
+ --apple-focus: rgba(0, 153, 255, 0.35);
17
17
  --apple-control-primary-text: #000;
18
18
  --apple-disabled-opacity: 0.42;
19
19
  --apple-header-background: rgba(17, 17, 17, 0.82);
20
- --apple-note: #64d2ff;
20
+ --apple-code-background: #1c1c1e;
21
+ --apple-aside-background: #1c1c1e;
22
+ --apple-note: #8e8e93;
21
23
  --apple-warning: #ff9f0a;
22
24
  --apple-danger: #ff6961;
23
25
  --apple-success: #30d158;
@@ -31,9 +33,10 @@
31
33
  --apple-sidebar-width: 18.5rem;
32
34
  --apple-toc-width: 12rem;
33
35
  --apple-content-width: 51.25rem;
36
+ --apple-row-height: 2rem;
34
37
  --apple-radius-sm: 0.25rem;
35
- --apple-radius: 0.5rem;
36
- --apple-transition: 150ms ease;
38
+ --apple-transition: 120ms ease;
39
+ --apple-section-spacing: 2.5rem;
37
40
  --sl-font: var(--apple-font-sans);
38
41
  --sl-font-mono: var(--apple-font-mono);
39
42
  --sl-nav-height: var(--apple-header-height);
@@ -54,11 +57,11 @@
54
57
  --sl-color-black: var(--apple-background);
55
58
  --sl-color-bg: var(--apple-background);
56
59
  --sl-color-bg-nav: var(--apple-header-background);
57
- --sl-color-bg-sidebar: var(--apple-sidebar-background);
60
+ --sl-color-bg-sidebar: var(--apple-navigator-background);
58
61
  --sl-color-hairline: var(--apple-border);
59
- --sl-color-hairline-light: var(--apple-border-subtle);
62
+ --sl-color-hairline-light: var(--apple-hairline);
60
63
  --sl-text-body: 1.0625rem;
61
- --sl-text-h1: 2.5rem;
64
+ --sl-text-h1: 3rem;
62
65
  --sl-text-h2: 2rem;
63
66
  --sl-text-h3: 1.75rem;
64
67
  --sl-text-h4: 1.5rem;
@@ -69,21 +72,23 @@
69
72
  :root[data-theme="light"] {
70
73
  color-scheme: light;
71
74
  --apple-background: #fff;
72
- --apple-sidebar-background: #f7f7f7;
75
+ --apple-navigator-background: #f7f7f7;
76
+ --apple-secondary-background: #fff;
73
77
  --apple-surface: #f0f0f0;
74
- --apple-surface-raised: #fff;
78
+ --apple-hover-surface: rgba(51, 102, 255, 0.05);
79
+ --apple-active-surface: rgba(0, 0, 0, 0.06);
75
80
  --apple-foreground: #000;
76
81
  --apple-secondary-foreground: #666;
77
82
  --apple-tertiary-foreground: #767676;
83
+ --apple-hairline: rgba(0, 0, 0, 0.12);
78
84
  --apple-border: #ccc;
79
- --apple-border-subtle: rgba(0, 0, 0, 0.12);
80
- --apple-code-background: #f0f0f0;
81
85
  --apple-link: #36f;
82
86
  --apple-link-hover: #174ea6;
83
- --apple-selection: rgba(51, 102, 255, 0.09);
84
- --apple-pressed: rgba(51, 102, 255, 0.16);
87
+ --apple-focus: rgba(51, 102, 255, 0.24);
85
88
  --apple-control-primary-text: #fff;
86
89
  --apple-header-background: rgba(255, 255, 255, 0.82);
90
+ --apple-code-background: #f5f5f7;
91
+ --apple-aside-background: #f5f5f7;
87
92
  --sl-color-accent-low: #e8f2ff;
88
93
  --sl-color-accent-high: #004b99;
89
94
  --sl-color-gray-1: #2c2c2e;
@@ -92,5 +97,5 @@
92
97
  --sl-color-gray-4: var(--apple-tertiary-foreground);
93
98
  --sl-color-gray-5: var(--apple-border);
94
99
  --sl-color-gray-6: #e8e8ed;
95
- --sl-color-gray-7: var(--apple-sidebar-background);
100
+ --sl-color-gray-7: var(--apple-navigator-background);
96
101
  }