starlight-theme-apple 0.5.0 → 0.7.0

package/index.ts

@@ -121,7 +121,7 @@ export default function starlightThemeApple(): StarlightPlugin {
                   ...userExpressiveCodeConfig,
                   styleOverrides: {
                     borderColor: "var(--apple-hairline)",
-                    borderRadius: "var(--apple-radius-sm)",
+                    borderRadius: "var(--apple-radius-panel)",
                     ...userExpressiveCodeConfig.styleOverrides,
                     frames: {
                       editorActiveTabIndicatorTopColor: "unset",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-theme-apple",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "An Apple Developer Documentation-inspired theme for Astro Starlight.",
   "keywords": [
     "starlight",

package/styles/base.css

@@ -63,12 +63,12 @@ select:disabled {
 }
 
 .sl-banner {
-  max-width: var(--apple-content-width);
+  width: 100%;
+  max-width: none;
   margin-block: 2rem 1rem;
-  margin-inline: var(--sl-content-pad-x);
-  padding: 0.875rem 1.125rem;
-  border: 1px solid var(--apple-border);
-  border-radius: 0.75rem;
+  margin-inline: 0;
+  padding: 0.875rem var(--sl-content-pad-x);
+  border-block: 1px solid var(--apple-border);
   background: var(--apple-aside-background);
   box-shadow: none;
   color: var(--apple-foreground);

package/styles/code.css

@@ -9,7 +9,7 @@
 }
 
 .expressive-code {
-  --ec-brdRad: 0.75rem;
+  --ec-brdRad: var(--apple-radius-panel);
   --ec-brdWd: 1px;
   margin-block: 1.5rem;
 }

package/styles/content.css

@@ -2,7 +2,7 @@
   padding-bottom: 4rem;
 }
 .content-panel:first-of-type .sl-container {
-  padding-top: clamp(2.5rem, 6vw, 5rem);
+  padding-top: clamp(2.5rem, 5vw, 4rem);
 }
 
 .apple-breadcrumbs {
@@ -75,7 +75,7 @@
 .sl-markdown-content {
   color: var(--apple-foreground);
   font-size: 1.0625rem;
-  line-height: 1.5625rem;
+  line-height: 1.65;
 }
 .sl-markdown-content > :first-child {
   margin-top: 0;
@@ -116,8 +116,8 @@
 }
 .sl-markdown-content h3:not(:where(.not-content *)) {
   color: var(--apple-foreground);
-  font-size: 1.75rem;
-  font-weight: 500;
+  font-size: 1.375rem;
+  font-weight: 600;
   line-height: 2rem;
   letter-spacing: -0.012em;
 }
@@ -127,13 +127,13 @@
 }
 .sl-markdown-content h4:not(:where(.not-content *)) {
   color: var(--apple-foreground);
-  font-size: 1.5rem;
+  font-size: 1.125rem;
   font-weight: 600;
-  line-height: 1.75rem;
+  line-height: 1.5rem;
 }
 .sl-markdown-content h5:not(:where(.not-content *)) {
-  font-size: 1.375rem;
-  line-height: 1.625rem;
+  font-size: 1.0625rem;
+  line-height: 1.5rem;
 }
 .sl-markdown-content h6:not(:where(.not-content *)) {
   font-size: 1.0625rem;
@@ -211,8 +211,8 @@
 .sl-markdown-content details:not(:where(.not-content *)) {
   overflow: clip;
   padding: 0;
-  border: 1px solid var(--apple-border);
-  border-radius: 0.75rem;
+  border: 1px solid var(--apple-hairline);
+  border-radius: var(--apple-radius-panel);
   background: var(--apple-secondary-background);
 }
 .sl-markdown-content details > summary:not(:where(.not-content *)) {
@@ -237,48 +237,123 @@
 .sl-markdown-content .card,
 .sl-markdown-content .sl-link-card {
   border: 1px solid var(--apple-hairline);
-  border-radius: 0.75rem;
-  background: var(--apple-secondary-background);
+  border-radius: 0.875rem;
+  background: var(--apple-card-background);
   box-shadow: none;
 }
 .sl-markdown-content .card {
+  min-height: 100%;
   padding: 1.25rem;
+  gap: 0.75rem;
+}
+.sl-markdown-content .card .title {
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0;
+  color: var(--apple-foreground);
+  font-size: 1.0625rem;
+  font-weight: 600;
+  line-height: 1.375rem;
+}
+.sl-markdown-content .card .body {
+  margin: 0;
+  color: var(--apple-secondary-foreground);
+  font-size: 0.9375rem;
+  line-height: 1.5rem;
+}
+.sl-markdown-content .card .body > :first-child {
+  margin-top: 0;
+}
+.sl-markdown-content .card .body > :last-child {
+  margin-bottom: 0;
 }
 .sl-markdown-content .card-grid {
+  align-items: stretch;
   gap: 1rem;
 }
 .sl-markdown-content .card-grid.stagger {
-  --stagger-height: 2rem;
+  --stagger-height: 1.5rem;
+}
+.sl-markdown-content .card .title .icon {
+  box-sizing: border-box;
+  flex: 0 0 2rem;
+  width: 2rem;
+  height: 2rem;
+  padding: 0.4375rem;
+  border: 1px solid var(--apple-hairline);
+  border-radius: 0.625rem;
+  background: var(--apple-hover-surface);
+  color: var(--apple-link);
+  font-size: 1.125rem;
+}
+.sl-markdown-content .sl-link-card {
+  min-height: 100%;
+  transition:
+    transform var(--apple-transition),
+    border-color var(--apple-transition),
+    background-color var(--apple-transition),
+    box-shadow var(--apple-transition);
+}
+.sl-markdown-content .sl-link-card:is(:hover, :focus-within) {
+  border-color: color-mix(
+    in srgb,
+    var(--apple-link) 45%,
+    var(--apple-hairline)
+  );
+  background: var(--apple-hover-surface);
+  box-shadow: none;
+  text-decoration: none;
 }
-.sl-markdown-content .card .title,
 .sl-markdown-content .sl-link-card .title {
   color: var(--apple-foreground);
   font-size: 1rem;
   font-weight: 600;
+  line-height: 1.375rem;
 }
-.sl-markdown-content .card .title .icon {
+.sl-markdown-content .sl-link-card:hover .title,
+.sl-markdown-content .sl-link-card:focus-within .title {
   color: var(--apple-link);
-  font-size: 1.5rem;
-}
-.sl-markdown-content .sl-link-card:is(:hover, :focus-visible) {
-  border-color: var(--apple-border);
-  background: var(--apple-hover-surface);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
-  text-decoration: none;
 }
 .sl-markdown-content .sl-link-card .description {
   color: var(--apple-secondary-foreground);
+  font-size: 0.9375rem;
+  line-height: 1.4375rem;
 }
 .sl-markdown-content .sl-link-card .icon {
-  color: var(--apple-tertiary-foreground);
+  align-self: start;
+  margin-top: 0.125rem;
+  color: var(--apple-link);
+  transition: transform var(--apple-transition);
+}
+.sl-markdown-content .sl-link-card:hover .icon,
+.sl-markdown-content .sl-link-card:focus-within .icon {
+  transform: translateX(0.125rem);
+}
+.sl-markdown-content .sl-link-card a:focus-visible {
+  outline: 0;
+}
+.sl-markdown-content .sl-link-card:focus-within {
+  outline: 3px solid var(--apple-focus);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sl-markdown-content .sl-link-card,
+  .sl-markdown-content .sl-link-card .icon {
+    transition: none;
+  }
+  .sl-markdown-content .sl-link-card:is(:hover, :focus-within),
+  .sl-markdown-content .sl-link-card:hover .icon,
+  .sl-markdown-content .sl-link-card:focus-within .icon {
+    transform: none;
+  }
 }
 
 .starlight-aside {
   --apple-aside-accent: var(--apple-secondary-foreground);
   margin-block: 1.5rem;
   padding: 1rem 1.125rem;
-  border: 1px solid var(--apple-border);
-  border-radius: 0.75rem;
+  border: 1px solid var(--apple-hairline);
+  border-radius: var(--apple-radius-panel);
   background: var(--apple-aside-background);
   color: var(--apple-foreground);
   box-shadow: none;
@@ -296,6 +371,7 @@
   display: none;
 }
 .starlight-aside__title {
+  margin: 0;
   color: var(--apple-aside-accent);
   font-size: 0.9375rem;
   font-weight: 500;
@@ -304,6 +380,12 @@
 .starlight-aside__title + * {
   margin-top: 0.375rem;
 }
+.sl-markdown-content .starlight-aside :is(p, ul, ol) {
+  margin-block: 0.5rem;
+}
+.sl-markdown-content .starlight-aside .starlight-aside__title {
+  margin: 0;
+}
 .starlight-aside__content > :first-child {
   margin-top: 0;
 }
@@ -359,6 +441,7 @@
   text-decoration: none;
 }
 .pagination-links > a[rel="next"] {
+  grid-column: 2;
   justify-content: flex-end;
   text-align: end;
 }

package/styles/controls.css

@@ -8,7 +8,7 @@
   min-height: 2.0625rem;
   padding: 0.25rem 0.9375rem;
   border: 0;
-  border-radius: 0.25rem;
+  border-radius: var(--apple-radius-sm);
   box-shadow: none;
   font-size: 1.0625rem;
   font-weight: 400;
@@ -128,7 +128,8 @@
   padding-inline: 0.5rem;
   border: 0;
   border-radius: 999px;
-  background: color-mix(in srgb, currentColor 14%, transparent);
+  background: var(--sl-color-bg-badge);
+  color: var(--sl-color-text-badge);
   font-weight: 600;
   line-height: 1.2;
   vertical-align: 0.08em;
@@ -144,6 +145,9 @@
   font-size: 0.6875rem;
   line-height: 1;
 }
+.sidebar-content a[aria-current="page"] > .sl-badge {
+  color: inherit;
+}
 
 .sl-markdown-content :is(input, select, textarea):not(:where(.not-content *)) {
   min-height: 2.25rem;
@@ -158,7 +162,7 @@
   min-height: 2.0625rem;
   padding: 0.25rem 0.9375rem;
   border: 0;
-  border-radius: 0.25rem;
+  border-radius: var(--apple-radius-sm);
   background: var(--apple-button-background);
   color: var(--apple-control-primary-text);
   box-shadow: none;

package/styles/responsive.css

@@ -14,10 +14,16 @@
   :root {
     --sl-mobile-toc-height: 0rem;
   }
-  .main-frame {
-    grid-template-columns: var(--apple-sidebar-width) minmax(0, 1fr) var(
-        --apple-toc-width
-      );
+  /* Starlight's columns are flex children inside the main frame. */
+  [data-has-sidebar][data-has-toc] .main-pane {
+    flex: 1;
+    width: calc(100% - var(--apple-toc-width));
+    min-width: 0;
+    --sl-content-margin-inline: auto;
+  }
+  .right-sidebar-container {
+    flex: 0 0 var(--apple-toc-width);
+    width: var(--apple-toc-width);
   }
   .main-pane main {
     margin-inline: auto;
@@ -36,11 +42,11 @@
     line-height: 2.25rem;
   }
   .sl-markdown-content h3:not(:where(.not-content *)) {
-    font-size: 1.5rem;
+    font-size: 1.375rem;
     line-height: 1.75rem;
   }
   .sl-markdown-content h4:not(:where(.not-content *)) {
-    font-size: 1.3125rem;
+    font-size: 1.125rem;
     line-height: 1.5625rem;
   }
 }
@@ -90,17 +96,20 @@
     line-height: 2rem;
   }
   .sl-markdown-content h3:not(:where(.not-content *)) {
-    font-size: 1.3125rem;
+    font-size: 1.125rem;
     line-height: 1.5625rem;
   }
   .sl-markdown-content h4:not(:where(.not-content *)) {
-    font-size: 1.1875rem;
+    font-size: 1.0625rem;
     line-height: 1.4375rem;
   }
   .pagination-links {
     grid-template-columns: 1fr;
     gap: 1rem;
   }
+  .pagination-links > a[rel="next"] {
+    grid-column: 1;
+  }
   .hero {
     gap: 2.5rem;
     padding-block: 3.5rem;

package/styles/search.css

@@ -2,7 +2,7 @@ site-search > button {
   min-height: 2rem;
   border: 1px solid var(--apple-hairline);
   border-radius: var(--apple-radius-sm);
-  background: transparent;
+  background: var(--apple-code-background);
   color: var(--apple-secondary-foreground);
   box-shadow: none;
   font-size: 0.8125rem;

package/styles/sidebar.css

@@ -4,14 +4,14 @@
 }
 
 .sidebar-content {
-  padding-top: 1rem;
+  padding-top: 1.5rem;
   scrollbar-color: var(--apple-border) transparent;
 }
 
 .sidebar-content .top-level {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
 }
 .sidebar-content .top-level > li {
   margin-block: 0;
@@ -76,10 +76,10 @@
 }
 .sidebar-content a[aria-current="page"] {
   background: var(--apple-active-surface);
-  color: var(--apple-foreground);
+  color: var(--apple-link);
   font-weight: 500;
 }
 .sidebar-content a[aria-current="page"]:is(:hover, :focus-visible) {
   background: var(--apple-active-surface);
-  color: var(--apple-foreground);
+  color: var(--apple-link);
 }

package/styles/toc.css

@@ -6,6 +6,9 @@
 .right-sidebar-panel {
   padding-top: 2.5rem;
 }
+.right-sidebar-panel .sl-container {
+  max-width: none;
+}
 .right-sidebar h2 {
   margin-bottom: 0.625rem;
   color: var(--apple-foreground);
@@ -21,12 +24,16 @@
   padding-inline-start: 0.75rem;
 }
 .right-sidebar a {
-  margin-block: 0.3125rem;
-  padding: 0;
-  border-inline-start: 0;
+  margin-block: 0;
+  padding: 0.25rem 0.75rem;
+  border-inline-start: 1px solid var(--apple-hairline);
   color: var(--apple-secondary-foreground);
   font-size: 0.875rem;
   line-height: 1.125rem;
+  overflow-wrap: anywhere;
+}
+.right-sidebar a span {
+  white-space: normal;
 }
 .right-sidebar a:hover {
   color: var(--apple-link);
@@ -37,7 +44,8 @@
   outline-offset: 2px;
 }
 .right-sidebar a[aria-current="true"] {
-  color: var(--apple-foreground);
+  border-inline-start-color: var(--apple-link);
+  color: var(--apple-link);
   font-weight: 500;
 }
 

package/styles/tokens.css

@@ -1,12 +1,13 @@
 :root {
   color-scheme: dark;
-  --apple-background: #111;
-  --apple-navigator-background: #161616;
+  --apple-background: #161617;
+  --apple-navigator-background: #1c1c1e;
   --apple-secondary-background: #1c1c1e;
+  --apple-card-background: #1c1c1e;
   --apple-surface: #2a2a2a;
   --apple-hover-surface: rgba(0, 153, 255, 0.08);
-  --apple-active-surface: rgba(255, 255, 255, 0.1);
-  --apple-foreground: #fff;
+  --apple-active-surface: rgba(0, 153, 255, 0.14);
+  --apple-foreground: #f5f5f7;
   --apple-secondary-foreground: #ccc;
   --apple-tertiary-foreground: #999;
   --apple-hairline: rgba(255, 255, 255, 0.12);
@@ -21,7 +22,7 @@
   --apple-button-secondary-hover: #2a2a2a;
   --apple-control-primary-text: #fff;
   --apple-disabled-opacity: 0.42;
-  --apple-header-background: rgba(17, 17, 17, 0.82);
+  --apple-header-background: rgba(22, 22, 23, 0.88);
   --apple-code-background: #1c1c1e;
   --apple-aside-background: #1c1c1e;
   --apple-note: #8e8e93;
@@ -35,11 +36,12 @@
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     monospace;
   --apple-header-height: 3.25rem;
-  --apple-sidebar-width: 18.5rem;
-  --apple-toc-width: 12rem;
-  --apple-content-width: 51.25rem;
+  --apple-sidebar-width: 17rem;
+  --apple-toc-width: 14rem;
+  --apple-content-width: 48rem;
   --apple-row-height: 2rem;
-  --apple-radius-sm: 0.25rem;
+  --apple-radius-sm: 0.375rem;
+  --apple-radius-panel: 0.75rem;
   --apple-transition: 120ms ease;
   --apple-section-spacing: 2.5rem;
   --sl-font: var(--apple-font-sans);
@@ -79,18 +81,19 @@
   --apple-background: #fff;
   --apple-navigator-background: #f7f7f7;
   --apple-secondary-background: #fff;
+  --apple-card-background: #f5f5f7;
   --apple-surface: #f0f0f0;
   --apple-hover-surface: rgba(51, 102, 255, 0.05);
-  --apple-active-surface: rgba(0, 0, 0, 0.06);
-  --apple-foreground: #000;
-  --apple-secondary-foreground: #666;
+  --apple-active-surface: rgba(0, 102, 204, 0.08);
+  --apple-foreground: #1d1d1f;
+  --apple-secondary-foreground: #6e6e73;
   --apple-tertiary-foreground: #767676;
   --apple-hairline: rgba(0, 0, 0, 0.12);
   --apple-border: #ccc;
-  --apple-link: #36f;
+  --apple-link: #0066cc;
   --apple-link-hover: #174ea6;
   --apple-focus: rgba(51, 102, 255, 0.24);
-  --apple-button-background: #00f;
+  --apple-button-background: #0071e3;
   --apple-button-background-hover: #36f;
   --apple-button-background-active: #36f;
   --apple-button-secondary-background: #f7f7f7;
@@ -99,6 +102,9 @@
   --apple-header-background: rgba(255, 255, 255, 0.82);
   --apple-code-background: #f5f5f7;
   --apple-aside-background: #f5f5f7;
+  --apple-warning: #9a5700;
+  --apple-danger: #c7362c;
+  --apple-success: #21783b;
   --sl-color-accent-low: #e8f2ff;
   --sl-color-accent-high: #004b99;
   --sl-color-gray-1: #2c2c2e;