starlight-theme-apple 0.6.0 → 0.9.0

package/styles/search.css

@@ -1,88 +1,102 @@
-site-search > button {
-  min-height: 2rem;
-  border: 1px solid var(--apple-hairline);
-  border-radius: var(--apple-radius-sm);
-  background: transparent;
-  color: var(--apple-secondary-foreground);
-  box-shadow: none;
-  font-size: 0.8125rem;
-}
-site-search > button:is(:hover, :active),
-site-search > button[aria-expanded="true"] {
-  border-color: var(--apple-border);
-  background: var(--apple-active-surface);
+/* Search field in the navigation bar. */
+@media (min-width: 50rem) {
+  site-search > button[data-open-modal] {
+    width: clamp(10rem, 16vw, 14rem);
+    min-height: 2rem;
+    padding-inline: 0.625rem 0.375rem;
+    border: 0;
+    border-radius: 0.5rem;
+    background: var(--apple-fill-secondary);
+    color: var(--apple-tertiary-foreground);
+    font-size: 0.875rem;
+    letter-spacing: -0.016em;
+  }
+  :root[data-theme="light"] site-search > button[data-open-modal] {
+    background: var(--apple-fill-secondary);
+  }
+  site-search > button[data-open-modal]:hover {
+    background: var(--apple-fill);
+    color: var(--apple-secondary-foreground);
+  }
+}
+site-search > button[data-open-modal] {
   color: var(--apple-foreground);
 }
-site-search dialog {
-  border: 1px solid var(--apple-border);
-  border-radius: 0.75rem;
-  background: var(--apple-secondary-background);
-  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
-}
-site-search > button kbd {
-  gap: 0.2rem;
+site-search > button[data-open-modal] > kbd {
+  gap: 0.125rem;
   border: 0;
   background: transparent;
   color: var(--apple-tertiary-foreground);
-  font-family: var(--apple-font-sans);
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
 }
-site-search > button kbd kbd {
-  min-width: 1.25rem;
-  padding: 0.125rem 0.25rem;
+site-search > button[data-open-modal] > kbd kbd {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+/* Search dialog and Pagefind results. */
+site-search dialog {
   border: 1px solid var(--apple-hairline);
-  border-radius: 0.25rem;
-  background: var(--apple-secondary-background);
-  line-height: 1rem;
-  text-align: center;
-}
-site-search dialog::backdrop {
-  background: rgba(0, 0, 0, 0.3);
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
-}
-site-search input {
-  min-height: 2.75rem;
-  border-color: var(--apple-border);
-  border-radius: var(--apple-radius-sm);
-  background: var(--apple-code-background);
-  color: var(--apple-foreground);
+  background: var(--apple-background);
+  box-shadow: var(--sl-shadow-lg);
+}
+@media (min-width: 50rem) {
+  site-search dialog {
+    border-radius: var(--apple-radius-panel);
+  }
+}
+
+#starlight__search {
+  --pagefind-ui-primary: var(--apple-link);
+  --pagefind-ui-text: var(--apple-foreground);
+  --pagefind-ui-font: var(--apple-font-sans);
+  --pagefind-ui-background: var(--apple-background);
+  --pagefind-ui-border: var(--apple-hairline);
+  --pagefind-ui-tag: var(--apple-fill);
+  --pagefind-ui-border-radius: 0.625rem;
 }
 #starlight__search .pagefind-ui__search-input {
-  padding-inline: 3.25rem 4.25rem;
-}
-site-search [data-close-modal] {
-  min-width: 2.75rem;
-  min-height: 2.75rem;
-  padding: 0.5rem;
-  border-radius: var(--apple-radius-sm);
-}
-site-search [data-close-modal]:hover {
-  background: var(--apple-active-surface);
-}
-site-search input:focus {
-  border-color: var(--apple-link);
-  box-shadow: 0 0 0 3px var(--apple-focus);
-  outline: 0;
-}
-.pagefind-ui__result {
-  border-color: var(--apple-hairline) !important;
-  border-radius: 0;
-  transition: background-color var(--apple-transition);
+  background: var(--apple-fill-secondary);
+  color: var(--apple-foreground);
+  font-weight: 400;
 }
-.pagefind-ui__result:is(:hover, :focus-within) {
-  background: var(--apple-hover-surface);
+#starlight__search .pagefind-ui__search-input::placeholder {
+  color: var(--apple-tertiary-foreground);
+  opacity: 1;
 }
-.pagefind-ui__result-link {
-  color: var(--apple-foreground) !important;
+#starlight__search .pagefind-ui__search-input:focus {
+  outline: 3px solid var(--apple-focus);
+  outline-offset: 0;
 }
-.pagefind-ui__result-link:hover {
-  color: var(--apple-link) !important;
+#starlight__search .pagefind-ui__result-link {
+  color: var(--apple-link);
 }
-.pagefind-ui__result-excerpt {
-  color: var(--apple-secondary-foreground) !important;
+#starlight__search .pagefind-ui__result-excerpt {
+  color: var(--apple-secondary-foreground);
 }
-.pagefind-ui__message,
-.pagefind-ui__result-nested {
-  color: var(--apple-tertiary-foreground) !important;
+#starlight__search .pagefind-ui__result-excerpt mark {
+  background: transparent;
+  color: var(--apple-foreground);
+  font-weight: 600;
+}
+#starlight__search
+  .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)),
+#starlight__search .pagefind-ui__result-nested {
+  border-color: var(--apple-hairline);
+  background: var(--apple-fill-secondary);
+}
+#starlight__search
+  .pagefind-ui__result-title:not(:where(.pagefind-ui__result-nested *)):hover,
+#starlight__search
+  .pagefind-ui__result-title:not(
+    :where(.pagefind-ui__result-nested *)
+  ):focus-within,
+#starlight__search .pagefind-ui__result-nested:hover,
+#starlight__search .pagefind-ui__result-nested:focus-within {
+  outline: 2px solid var(--apple-link);
+  outline-offset: -2px;
+}
+site-search button[data-close-modal] {
+  color: var(--apple-link);
 }

package/styles/sidebar.css

@@ -1,85 +1,106 @@
+/* Navigator: neutral rows, gray group headings, a filled selection without accent color. */
 .sidebar-pane {
   border-inline-end: 1px solid var(--apple-hairline);
-  background: var(--apple-navigator-background);
+  background: var(--apple-background);
+  overscroll-behavior: contain;
+  scrollbar-color: var(--apple-hairline) transparent;
+  scrollbar-width: thin;
 }
 
 .sidebar-content {
-  padding-top: 1rem;
-  scrollbar-color: var(--apple-border) transparent;
+  gap: 1.5rem;
+  padding: 1.25rem var(--sl-sidebar-pad-x) 2.5rem;
 }
 
-.sidebar-content .top-level {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+.sidebar-content ul {
+  --sl-sidebar-item-padding-inline: 0.625rem;
+}
+.sidebar-content li {
+  overflow-wrap: break-word;
 }
-.sidebar-content .top-level > li {
-  margin-block: 0;
+.sidebar-content .top-level > li + li {
+  margin-top: 1.25rem;
+}
+.sidebar-content ul ul {
+  margin-top: 0.125rem;
+}
+.sidebar-content ul ul li {
+  margin-inline-start: 0.75rem;
+  padding-inline-start: 0;
+  border-inline-start: 0;
+}
+.sidebar-content .top-level > li > details > ul > li {
+  margin-inline-start: 0;
 }
 
-.sidebar-content summary {
-  min-height: var(--apple-row-height);
-  padding: 0.34375rem 0.5rem;
+.sidebar-content :is(a, summary) {
+  min-height: 2rem;
+  padding: 0.3125rem var(--sl-sidebar-item-padding-inline);
   border-radius: var(--apple-radius-sm);
-  color: var(--apple-tertiary-foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.3125rem;
-  letter-spacing: -0.005em;
+  font-size: 0.9375rem;
+  line-height: 1.375rem;
+  letter-spacing: -0.012em;
 }
-.sidebar-content .large,
-.sidebar-content a.large {
-  color: inherit;
+
+.sidebar-content .large {
   font-size: inherit;
   font-weight: inherit;
+  color: inherit;
 }
-.sidebar-content summary:is(:hover, :focus-visible) {
-  background: var(--apple-hover-surface);
-  color: var(--apple-secondary-foreground);
-}
-.sidebar-content .caret {
-  width: 1rem;
+
+/* Top-level groups read as section headings. */
+.sidebar-content .top-level > li > details > summary {
   color: var(--apple-tertiary-foreground);
-  opacity: 0.8;
+  font-weight: 600;
 }
-
-.sidebar-content ul ul {
-  margin-inline-start: 0.75rem;
-  padding-inline-start: 0.5rem;
-  border-inline-start: 0;
+.sidebar-content summary {
+  color: var(--apple-foreground);
 }
-.sidebar-content ul ul li {
-  border-inline-start: 0;
+.sidebar-content summary:hover {
+  color: var(--apple-foreground);
 }
-.sidebar-content li {
-  border: 0;
-  padding: 0;
+.sidebar-content .caret {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--apple-tertiary-foreground);
+  opacity: 0.7;
+}
+.sidebar-content summary:hover .caret {
+  opacity: 1;
 }
 
 .sidebar-content a {
-  min-height: var(--apple-row-height);
-  margin-block: 0;
-  padding: 0.34375rem 0.5rem;
-  border-radius: var(--apple-radius-sm);
-  color: var(--apple-secondary-foreground);
-  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--apple-foreground);
   font-weight: 400;
-  line-height: 1.3125rem;
-  text-decoration: none;
 }
-.sidebar-content a:is(:hover, :focus-visible) {
-  background: var(--apple-hover-surface);
-  color: var(--apple-secondary-foreground);
+.sidebar-content a:hover,
+.sidebar-content ul ul summary:hover {
+  background: var(--apple-fill-secondary);
+  color: var(--apple-foreground);
 }
-.sidebar-content a:focus-visible {
+.sidebar-content a[aria-current="page"],
+.sidebar-content a[aria-current="page"]:is(:hover, :focus) {
+  background: var(--apple-fill);
+  color: var(--apple-foreground);
+  font-weight: 600;
+}
+.sidebar-content :is(a, summary):focus-visible {
   outline-offset: -2px;
 }
-.sidebar-content a[aria-current="page"] {
-  background: var(--apple-active-surface);
-  color: var(--apple-foreground);
-  font-weight: 500;
+
+.sidebar-content .sl-badge {
+  margin-inline-start: auto;
 }
-.sidebar-content a[aria-current="page"]:is(:hover, :focus-visible) {
-  background: var(--apple-active-surface);
-  color: var(--apple-foreground);
+
+@media (max-width: 49.99rem) {
+  .sidebar-content {
+    padding-inline: 1rem;
+  }
+  .sidebar-content :is(a, summary) {
+    min-height: 2.75rem;
+    font-size: 1.0625rem;
+  }
 }

package/styles/toc.css

@@ -1,70 +1,85 @@
+/* “On this page”: a quiet rail with a single accent marker on the active section. */
 .right-sidebar {
-  width: var(--apple-toc-width);
   border-inline-start: 0;
-  background: transparent;
+  background: var(--apple-background);
+  scrollbar-width: none;
 }
 .right-sidebar-panel {
-  padding-top: 2.5rem;
+  padding: 2.5rem 1.25rem 2rem 0.5rem;
+}
+.right-sidebar-panel .sl-container {
+  width: auto;
+  max-width: none;
 }
-.right-sidebar h2 {
-  margin-bottom: 0.625rem;
+
+starlight-toc h2 {
+  margin-bottom: 0.75rem;
   color: var(--apple-foreground);
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: 600;
-  line-height: 1rem;
-  letter-spacing: 0.01em;
-}
-.right-sidebar ul {
-  border-inline-start: 0;
+  line-height: 1.125rem;
+  letter-spacing: -0.008em;
 }
-.right-sidebar ul ul {
-  padding-inline-start: 0.75rem;
+starlight-toc nav > ul {
+  border-inline-start: 1px solid var(--apple-hairline);
 }
-.right-sidebar a {
-  margin-block: 0.3125rem;
-  padding: 0;
-  border-inline-start: 0;
+starlight-toc a {
+  margin-inline-start: -1px;
+  padding-block: 0.3125rem;
+  padding-inline: calc(0.75rem * var(--depth) + 0.875rem) 0;
+  border-radius: 0;
+  border-inline-start: 2px solid transparent;
   color: var(--apple-secondary-foreground);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   line-height: 1.125rem;
+  letter-spacing: -0.008em;
+  text-decoration: none;
+  overflow-wrap: anywhere;
 }
-.right-sidebar a:hover {
-  color: var(--apple-link);
-}
-.right-sidebar a:focus-visible {
-  border-radius: 2px;
-  color: var(--apple-link);
-  outline-offset: 2px;
+starlight-toc a:hover {
+  color: var(--apple-foreground);
 }
-.right-sidebar a[aria-current="true"] {
+starlight-toc a[aria-current="true"] {
+  border-inline-start-color: var(--apple-link);
   color: var(--apple-foreground);
-  font-weight: 500;
+  font-weight: 600;
+}
+starlight-toc a:focus-visible {
+  outline-offset: -2px;
 }
 
-mobile-starlight-toc > nav {
-  border-block: 1px solid var(--apple-hairline);
-  background: var(--apple-header-background);
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  backdrop-filter: saturate(180%) blur(20px);
+/* Narrow layouts: Starlight’s collapsible “On this page” bar under the header. */
+mobile-starlight-toc nav {
+  border-bottom: 1px solid var(--apple-hairline);
+  background: var(--apple-background);
 }
 mobile-starlight-toc summary {
   color: var(--apple-secondary-foreground);
   font-size: 0.8125rem;
 }
 mobile-starlight-toc .toggle {
-  min-height: 2.25rem;
-  border-color: transparent;
-  border-radius: var(--apple-radius-sm);
-  background: transparent;
+  border: 0;
+  border-radius: 980px;
+  background: var(--apple-fill-secondary);
+  color: var(--apple-foreground);
 }
 mobile-starlight-toc details[open] .toggle,
 mobile-starlight-toc .toggle:hover {
-  border-color: transparent;
-  background: var(--apple-active-surface);
+  border: 0;
+  background: var(--apple-fill);
+  color: var(--apple-foreground);
+}
+mobile-starlight-toc .display-current {
   color: var(--apple-foreground);
 }
 mobile-starlight-toc .dropdown {
-  border-color: var(--apple-hairline);
+  border: 1px solid var(--apple-hairline);
+  border-radius: 0 0 var(--apple-radius-panel) var(--apple-radius-panel);
   background: var(--apple-background);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--sl-shadow-lg);
+}
+mobile-starlight-toc .dropdown a {
+  border-color: var(--apple-hairline);
+  color: var(--apple-foreground);
+  overflow-wrap: anywhere;
 }