starlight-theme-apple 0.1.0 → 0.3.0

package/styles/controls.css

@@ -1,10 +1,10 @@
-.sl-markdown-content .sl-link-button {
+.sl-markdown-content .sl-link-button,
+.hero .sl-link-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
   min-height: 2.25rem;
-  margin-block: 0.25rem;
   padding: 0.45rem 0.875rem;
   border: 1px solid transparent;
   border-radius: var(--apple-radius-sm);
@@ -13,106 +13,65 @@
   font-weight: 600;
   line-height: 1.25rem;
   text-decoration: none;
-  vertical-align: middle;
 }
 .sl-markdown-content .sl-link-button + .sl-link-button {
   margin-inline-start: 0.5rem;
 }
-.sl-markdown-content .sl-link-button.primary {
-  border-color: var(--apple-link);
-  background: var(--apple-link);
-  color: var(--apple-control-primary-text);
-}
-.sl-markdown-content .sl-link-button.primary:hover {
-  border-color: var(--apple-link-hover);
-  background: var(--apple-link-hover);
-  color: var(--apple-control-primary-text);
-}
-.sl-markdown-content .sl-link-button.secondary {
-  border-color: var(--apple-border);
-  background: var(--apple-surface-raised);
-  color: var(--apple-foreground);
-}
-.sl-markdown-content .sl-link-button.secondary:hover {
-  border-color: var(--apple-link);
-  background: var(--apple-selection);
-  color: var(--apple-link);
-}
-.sl-markdown-content .sl-link-button.minimal {
-  background: transparent;
-  color: var(--apple-link);
-}
-.sl-markdown-content .sl-link-button.minimal:hover {
-  background: var(--apple-selection);
-  color: var(--apple-link-hover);
-}
-.sl-markdown-content .sl-link-button:active {
-  background: var(--apple-pressed);
-  transform: scale(0.98);
-}
-.sl-markdown-content .sl-link-button[aria-disabled="true"] {
-  pointer-events: none;
-}
-
 .hero .sl-link-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.4rem;
   min-height: 2.5rem;
   padding: 0.55rem 1rem;
-  border: 1px solid transparent;
-  border-radius: var(--apple-radius-sm);
-  box-shadow: none;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.25rem;
-  text-decoration: none;
 }
 .hero .sl-link-button svg,
 .sl-markdown-content .sl-link-button svg {
   flex-shrink: 0;
   font-size: 1.125rem;
 }
-.hero .sl-link-button.primary {
+
+:is(.hero, .sl-markdown-content) .sl-link-button.primary {
   border-color: var(--apple-link);
   background: var(--apple-link);
   color: var(--apple-control-primary-text);
 }
-.hero .sl-link-button.primary:is(:hover, :focus-visible) {
+:is(.hero, .sl-markdown-content)
+  .sl-link-button.primary:is(:hover, :focus-visible) {
   border-color: var(--apple-link-hover);
   background: var(--apple-link-hover);
   color: var(--apple-control-primary-text);
+  text-decoration: none;
 }
-.hero .sl-link-button.secondary {
+:is(.hero, .sl-markdown-content) .sl-link-button.secondary {
   border-color: var(--apple-border);
-  background: var(--apple-surface-raised);
+  background: transparent;
   color: var(--apple-foreground);
 }
-.hero .sl-link-button.secondary:is(:hover, :focus-visible) {
-  border-color: var(--apple-link);
-  background: var(--apple-selection);
-  color: var(--apple-link);
+:is(.hero, .sl-markdown-content)
+  .sl-link-button.secondary:is(:hover, :focus-visible) {
+  background: var(--apple-active-surface);
+  color: var(--apple-foreground);
+  text-decoration: none;
 }
-.hero .sl-link-button.minimal {
+:is(.hero, .sl-markdown-content) .sl-link-button.minimal {
   background: transparent;
   color: var(--apple-link);
 }
-.hero .sl-link-button.minimal:is(:hover, :focus-visible) {
-  background: var(--apple-selection);
+:is(.hero, .sl-markdown-content)
+  .sl-link-button.minimal:is(:hover, :focus-visible) {
+  background: var(--apple-hover-surface);
   color: var(--apple-link-hover);
-}
-.hero .sl-link-button:active {
-  background: var(--apple-pressed);
-  transform: scale(0.98);
+  text-decoration: none;
 }
 
 .sl-markdown-content starlight-tabs {
   display: block;
   margin-block: 1.5rem;
+  border: 1px solid var(--apple-hairline);
+  border-radius: 0.75rem;
+  background: var(--apple-secondary-background);
 }
 .sl-markdown-content starlight-tabs .tablist-wrapper {
   margin-bottom: 0;
+  padding-inline: 0.5rem;
+  border-bottom: 1px solid var(--apple-hairline);
 }
 .sl-markdown-content starlight-tabs ul[role="tablist"] {
   gap: 0.25rem;
@@ -122,59 +81,65 @@
 .sl-markdown-content starlight-tabs a[role="tab"] {
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
   min-height: 2.5rem;
   padding: 0.5rem 0.75rem;
   border-bottom: 2px solid transparent;
+  border-radius: var(--apple-radius-sm) var(--apple-radius-sm) 0 0;
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25rem;
   text-decoration: none;
 }
 .sl-markdown-content starlight-tabs a[role="tab"]:hover {
-  background: var(--apple-selection);
+  background: var(--apple-hover-surface);
   color: var(--apple-link);
 }
-.sl-markdown-content starlight-tabs a[role="tab"]:active {
-  background: var(--apple-pressed);
-}
 .sl-markdown-content starlight-tabs a[role="tab"][aria-selected="true"] {
   border-bottom-color: var(--apple-link);
   color: var(--apple-link);
   font-weight: 600;
 }
 .sl-markdown-content starlight-tabs [role="tabpanel"] {
-  padding-top: 1rem;
+  padding: 1rem;
 }
 .sl-markdown-content starlight-tabs [role="tabpanel"] > :first-child {
   margin-top: 0;
 }
 
-.sl-markdown-content .sl-badge {
+.sl-badge {
   display: inline-flex;
   align-items: center;
   min-height: 1.375rem;
   padding-inline: 0.5rem;
-  border: 1px solid currentColor;
+  border: 0;
   border-radius: 999px;
+  background: color-mix(in srgb, currentColor 14%, transparent);
   font-weight: 600;
   line-height: 1.2;
   vertical-align: 0.08em;
 }
-.sl-markdown-content .sl-badge + .sl-badge {
+.sl-badge + .sl-badge {
   margin-inline-start: 0.25rem;
 }
 
+.sidebar-content .sl-badge {
+  min-height: 1.125rem;
+  margin-inline-start: 0.375rem;
+  padding-inline: 0.4rem;
+  font-size: 0.6875rem;
+  line-height: 1;
+}
+
 .sl-markdown-content
   :is(input, select, textarea, button):not(:where(.not-content *)) {
   min-height: 2.25rem;
   border: 1px solid var(--apple-border);
   border-radius: var(--apple-radius-sm);
-  background: var(--apple-surface-raised);
+  background: var(--apple-secondary-background);
   color: var(--apple-foreground);
   font: inherit;
 }
 .sl-markdown-content :is(input, select, textarea):focus {
   border-color: var(--apple-link);
-  box-shadow: 0 0 0 3px var(--apple-selection);
+  box-shadow: 0 0 0 3px var(--apple-focus);
 }

package/styles/header.css

@@ -1,39 +1,42 @@
 header.header {
   height: var(--apple-header-height);
-  border-bottom: 1px solid var(--apple-border-subtle);
+  border-bottom: 1px solid var(--apple-hairline);
   background: var(--apple-header-background);
   color: var(--apple-foreground);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   backdrop-filter: saturate(180%) blur(20px);
 }
+
 header.header > .header {
   height: 100%;
   padding-inline: clamp(1rem, 2.4vw, 2rem);
 }
+
 .site-title {
   min-width: 0;
   overflow: hidden;
   color: var(--apple-foreground);
-  font-size: 1.05rem;
+  font-size: 1.1875rem;
   font-weight: 600;
+  line-height: 1.6875rem;
   letter-spacing: -0.015em;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .site-title:hover {
-  color: var(--apple-link);
-}
-.right-group {
-  align-items: center;
-  gap: 0.35rem;
+  color: var(--apple-foreground);
+  opacity: 0.72;
 }
+
+.right-group,
 .social-icons {
   align-items: center;
-  gap: 0.2rem;
+  gap: 0.25rem;
 }
 .social-icons::after {
   display: none;
 }
+
 .social-icons a,
 starlight-theme-select,
 starlight-lang-select {
@@ -58,55 +61,46 @@ starlight-lang-select {
 :is(starlight-theme-select, starlight-lang-select) > label {
   height: 100%;
 }
-:is(starlight-theme-select, starlight-lang-select) > label > select {
+:is(starlight-theme-select, starlight-lang-select) select {
   height: 2.25rem;
   margin-block: 0;
   padding-block: 0;
   line-height: 2.25rem;
 }
+
 .social-icons a:hover,
 starlight-theme-select:hover,
 starlight-lang-select:hover {
-  background: var(--apple-selection);
-  color: var(--apple-link);
-}
-.social-icons a:active,
-starlight-theme-select:active,
-starlight-lang-select:active {
-  background: var(--apple-pressed);
+  background: var(--apple-active-surface);
+  color: var(--apple-foreground);
 }
-starlight-menu-button button {
+
+.sidebar :is(.sl-menu-button, button[aria-controls="starlight__sidebar"]) {
   display: inline-grid;
   place-items: center;
   width: var(--sl-menu-button-size);
   height: var(--sl-menu-button-size);
   border: 0;
+  border-radius: var(--apple-radius-sm);
   background: transparent;
   box-shadow: none;
   color: var(--apple-foreground);
 }
-starlight-menu-button button:hover {
-  background: var(--apple-selection);
-  color: var(--apple-link);
-}
-starlight-menu-button[aria-expanded="true"] button,
-starlight-menu-button button:active {
-  background: var(--apple-pressed);
-  color: var(--apple-link);
+.sidebar
+  :is(.sl-menu-button, button[aria-controls="starlight__sidebar"]):is(
+    :hover,
+    :active
+  ) {
+  background: var(--apple-active-surface);
+  color: var(--apple-foreground);
 }
+
 @media (min-width: 50rem) {
-  header.header > .header > div.sl-flex:has(site-search) {
+  header.header site-search {
     justify-self: end;
     min-width: 15rem;
   }
   :is(starlight-theme-select, starlight-lang-select) {
-    padding-inline-start: 0.35rem;
-    border: 1px solid transparent;
-  }
-  :is(starlight-theme-select, starlight-lang-select):hover {
-    border-color: var(--apple-border-subtle);
-  }
-  :is(starlight-theme-select, starlight-lang-select) > label > select {
-    min-height: 2.25rem;
+    padding-inline-start: 0.25rem;
   }
 }

package/styles/responsive.css

@@ -6,7 +6,7 @@
     top: var(--apple-header-height);
     height: calc(100vh - var(--apple-header-height));
   }
-  starlight-menu-button {
+  .sidebar :is(.sl-menu-button, button[aria-controls="starlight__sidebar"]) {
     display: none !important;
   }
 }
@@ -23,28 +23,42 @@
     margin-inline: auto;
   }
 }
-@media (min-width: 90rem) {
-  :root {
-    --apple-sidebar-width: 18.5rem;
-    --apple-toc-width: 13rem;
-  }
-}
 @media (max-width: 71.99rem) {
   .content-panel:first-of-type .sl-container {
     padding-top: clamp(2rem, 5vw, 3.5rem);
   }
+  .content-panel h1 {
+    font-size: 2.5rem;
+    line-height: 2.75rem;
+  }
+  .sl-markdown-content h2:not(:where(.not-content *)) {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+  .sl-markdown-content h3:not(:where(.not-content *)) {
+    font-size: 1.5rem;
+    line-height: 1.75rem;
+  }
+  .sl-markdown-content h4:not(:where(.not-content *)) {
+    font-size: 1.3125rem;
+    line-height: 1.5625rem;
+  }
 }
 @media (max-width: 49.99rem) {
+  :root {
+    --apple-header-height: 3rem;
+    --sl-mobile-toc-height: 3rem;
+  }
   .sidebar-pane {
-    background: var(--apple-sidebar-background);
+    background: var(--apple-navigator-background);
   }
   .sidebar-content {
     padding: 1rem;
   }
   .mobile-preferences {
     align-items: center;
-    min-height: 3.75rem;
-    padding-block: 0.75rem;
+    min-height: 3.5rem;
+    padding-block: 0.625rem;
   }
   .mobile-preferences .social-icons {
     align-items: center;
@@ -58,29 +72,57 @@
   .content-panel:first-of-type .sl-container {
     padding-top: 2rem;
   }
-  .sl-markdown-content h2:not(:where(.not-content *)) {
-    margin-top: 0;
+  .content-panel h1 {
+    font-size: 2rem;
+    line-height: 2.25rem;
+  }
+  .content-panel
+    .sl-container
+    > p:first-of-type:not(:where(.sl-markdown-content *)) {
+    font-size: 1.1875rem;
+    line-height: 1.6875rem;
   }
   .sl-markdown-content .sl-heading-wrapper.level-h2 {
-    margin-top: 2.6rem;
+    margin-top: 2.25rem;
+  }
+  .sl-markdown-content h2:not(:where(.not-content *)) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+  .sl-markdown-content h3:not(:where(.not-content *)) {
+    font-size: 1.3125rem;
+    line-height: 1.5625rem;
+  }
+  .sl-markdown-content h4:not(:where(.not-content *)) {
+    font-size: 1.1875rem;
+    line-height: 1.4375rem;
   }
   .pagination-links {
     grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  .hero {
+    gap: 2.5rem;
+    padding-block: 3.5rem;
+  }
+  .hero > img {
+    flex-basis: min(70%, 16rem);
+    width: min(70%, 16rem);
+  }
+  .hero .actions {
+    gap: 0.625rem;
   }
 }
 @media (max-width: 30rem) {
   :root {
-    --sl-content-pad-x: 1.15rem;
+    --sl-content-pad-x: 1.25rem;
   }
   header.header > .header {
     padding-inline: 0.75rem;
   }
-  .content-panel h1 {
-    font-size: 1.75rem;
-    line-height: 2rem;
-  }
-  .sl-markdown-content {
+  .site-title {
     font-size: 1.0625rem;
+    line-height: 1.25rem;
   }
   .sl-markdown-content table:not(:where(.not-content *)) {
     display: block;
@@ -92,4 +134,13 @@
   .sl-markdown-content .sl-link-button + .sl-link-button {
     margin-inline-start: 0;
   }
+  .hero .actions .sl-link-button {
+    width: 100%;
+  }
+}
+
+@media (hover: none) {
+  .sl-heading-wrapper .sl-anchor-link {
+    opacity: 1;
+  }
 }

package/styles/search.css

@@ -1,38 +1,33 @@
 site-search > button {
   min-height: 2rem;
-  border: 1px solid var(--apple-border-subtle);
-  border-radius: var(--apple-radius);
-  background: var(--apple-surface);
+  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:hover {
-  border-color: var(--apple-border);
-  background: var(--apple-selection);
-  color: var(--apple-foreground);
-}
-site-search > button:active,
+site-search > button:is(:hover, :active),
 site-search > button[aria-expanded="true"] {
-  border-color: var(--apple-link);
-  background: var(--apple-pressed);
+  border-color: var(--apple-border);
+  background: var(--apple-active-surface);
   color: var(--apple-foreground);
 }
 site-search dialog {
   border: 1px solid var(--apple-border);
-  border-radius: 0.75rem;
-  background: var(--apple-surface-raised);
-  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18);
+  border-radius: var(--apple-radius-sm);
+  background: var(--apple-secondary-background);
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
 }
 site-search dialog::backdrop {
-  background: rgba(0, 0, 0, 0.34);
+  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);
+  border-radius: var(--apple-radius-sm);
   background: var(--apple-code-background);
   color: var(--apple-foreground);
 }
@@ -46,26 +41,20 @@ site-search [data-close-modal] {
   border-radius: var(--apple-radius-sm);
 }
 site-search [data-close-modal]:hover {
-  background: var(--apple-selection);
-}
-site-search [data-close-modal]:active {
-  background: var(--apple-pressed);
+  background: var(--apple-active-surface);
 }
 site-search input:focus {
   border-color: var(--apple-link);
-  box-shadow: 0 0 0 3px var(--apple-selection);
+  box-shadow: 0 0 0 3px var(--apple-focus);
   outline: 0;
 }
 .pagefind-ui__result {
-  border-color: var(--apple-border-subtle) !important;
-  border-radius: var(--apple-radius-sm);
-  transition:
-    background-color var(--apple-transition),
-    border-color var(--apple-transition);
+  border-color: var(--apple-hairline) !important;
+  border-radius: 0;
+  transition: background-color var(--apple-transition);
 }
 .pagefind-ui__result:is(:hover, :focus-within) {
-  border-color: var(--apple-border) !important;
-  background: var(--apple-selection);
+  background: var(--apple-hover-surface);
 }
 .pagefind-ui__result-link {
   color: var(--apple-foreground) !important;

package/styles/sidebar.css

@@ -1,61 +1,65 @@
 .sidebar-pane {
-  border-inline-end: 1px solid var(--apple-border-subtle);
-  background: var(--apple-sidebar-background);
+  border-inline-end: 1px solid var(--apple-hairline);
+  background: var(--apple-navigator-background);
 }
+
 .sidebar-content {
   padding-top: 1rem;
   scrollbar-color: var(--apple-border) transparent;
 }
+
 .sidebar-content .top-level {
   display: flex;
   flex-direction: column;
-  gap: 0.1rem;
+  gap: 0.75rem;
 }
 .sidebar-content .top-level > li {
   margin-block: 0;
 }
-.sidebar-content .top-level > li + li:has(details) {
-  margin-top: 1.05rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--apple-border-subtle);
-}
+
 .sidebar-content summary {
-  min-height: 2rem;
-  padding: 0.34375rem 0.55rem;
-  color: var(--apple-foreground);
+  min-height: var(--apple-row-height);
+  padding: 0.34375rem 0.5rem;
+  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;
 }
 .sidebar-content .large,
 .sidebar-content a.large {
-  padding-inline: 0.55rem;
-  font-size: 0.875rem;
-}
-.sidebar-content summary:hover,
-.sidebar-content summary:focus-visible {
-  background: var(--apple-selection);
-  color: var(--apple-link);
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
 }
-.sidebar-content details[open] > summary {
-  color: var(--apple-foreground);
+.sidebar-content summary:is(:hover, :focus-visible) {
+  background: var(--apple-hover-surface);
+  color: var(--apple-secondary-foreground);
 }
 .sidebar-content .caret {
+  width: 1rem;
   color: var(--apple-tertiary-foreground);
+  opacity: 0.8;
 }
+
 .sidebar-content ul ul {
-  margin-inline-start: 0.55rem;
-  padding-inline-start: 0.55rem;
-  border-inline-start: 1px solid var(--apple-border-subtle);
+  margin-inline-start: 0.75rem;
+  padding-inline-start: 0.5rem;
+  border-inline-start: 0;
+}
+.sidebar-content ul ul li {
+  border-inline-start: 0;
 }
 .sidebar-content li {
   border: 0;
   padding: 0;
 }
+
 .sidebar-content a {
-  min-height: 2rem;
-  margin-block: 1px;
-  padding: 0.34375rem 0.55rem;
+  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;
@@ -63,25 +67,19 @@
   line-height: 1.3125rem;
   text-decoration: none;
 }
-.sidebar-content a:hover {
-  background: var(--apple-selection);
-  color: var(--apple-link);
-}
-.sidebar-content a:active {
-  background: var(--apple-pressed);
+.sidebar-content a:is(:hover, :focus-visible) {
+  background: var(--apple-hover-surface);
+  color: var(--apple-secondary-foreground);
 }
 .sidebar-content a:focus-visible {
-  background: var(--apple-selection);
-  color: var(--apple-link);
   outline-offset: -2px;
 }
 .sidebar-content a[aria-current="page"] {
-  background: var(--apple-surface);
+  background: var(--apple-active-surface);
   color: var(--apple-foreground);
-  font-weight: 600;
+  font-weight: 500;
 }
-.sidebar-content a[aria-current="page"]:hover,
-.sidebar-content a[aria-current="page"]:focus-visible {
-  background: var(--apple-pressed);
+.sidebar-content a[aria-current="page"]:is(:hover, :focus-visible) {
+  background: var(--apple-active-surface);
   color: var(--apple-foreground);
 }