starlight-theme-apple 0.7.0 → 0.9.0

package/styles/base.css

@@ -1,89 +1,69 @@
 html {
-  scroll-padding-top: calc(var(--apple-header-height) + 1.5rem);
-  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 body {
   background: var(--apple-background);
   color: var(--apple-foreground);
   font-family: var(--apple-font-sans);
-  font-size: 1.0625rem;
-  line-height: 1.4706;
+  font-size: var(--sl-text-body);
+  line-height: var(--sl-line-height);
+  letter-spacing: -0.022em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  font-synthesis-weight: none;
 }
 
 ::selection {
-  background: var(--apple-focus);
+  background: color-mix(in srgb, var(--apple-link) 28%, transparent);
 }
+
 :focus-visible {
   outline: 2px solid var(--apple-link);
-  outline-offset: 3px;
+  outline-offset: 2px;
 }
 
-a,
-button,
-[role="button"],
-summary,
-input,
-select {
-  transition:
-    color var(--apple-transition),
-    background-color var(--apple-transition),
-    border-color var(--apple-transition),
-    box-shadow var(--apple-transition),
-    opacity var(--apple-transition);
+:is(a, button, summary, select, input) {
+  transition-property:
+    color, background-color, border-color, box-shadow, opacity;
+  transition-duration: 160ms;
+  transition-timing-function: var(--apple-transition-easing);
 }
 
-:is(button, input, select, summary, a)[aria-disabled="true"],
-button:disabled,
-input:disabled,
-select:disabled {
-  cursor: not-allowed;
-  opacity: var(--apple-disabled-opacity);
+code,
+kbd,
+pre,
+samp {
+  letter-spacing: normal;
 }
 
-.main-frame,
-.main-pane {
-  background: var(--apple-background);
-}
-.main-pane,
-.main-pane main {
-  min-width: 0;
-}
-.content-panel {
-  padding-block: 0;
-}
-.content-panel + .content-panel,
-.main-pane > main > .content-panel:last-of-type {
+/* Starlight’s panels stack in one column; Apple pages flow without dividing rules. */
+.content-panel + .content-panel {
   border-top: 0;
 }
-.sl-container {
-  max-width: var(--apple-content-width);
+.main-pane main {
+  padding-bottom: 5rem;
 }
 
 .sl-banner {
-  width: 100%;
-  max-width: none;
-  margin-block: 2rem 1rem;
-  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;
+  padding: 0.75rem var(--sl-content-pad-x);
+  border-bottom: 1px solid var(--apple-hairline);
+  background: var(--apple-secondary-background);
   color: var(--apple-foreground);
-  text-align: start;
+  font-size: 0.9375rem;
+  line-height: 1.4;
+  text-align: center;
 }
 .sl-banner a {
   color: var(--apple-link);
 }
 
 .sl-skip-link {
-  border: 1px solid var(--apple-border);
-  border-radius: 0.5rem;
-  background: var(--apple-secondary-background);
-  color: var(--apple-link);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
+  border-radius: var(--apple-radius-sm);
+  background: var(--apple-button-background);
+  color: var(--apple-button-foreground);
+  font-size: 0.875rem;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -92,5 +72,7 @@ select:disabled {
   *::after {
     scroll-behavior: auto !important;
     transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
   }
 }

package/styles/code.css

@@ -1,88 +1,12 @@
-.sl-markdown-content :not(pre) > code:not(:where(.not-content *)) {
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: inherit;
-  font-family: var(--apple-font-mono);
-  font-size: 0.88em;
-}
-
-.expressive-code {
-  --ec-brdRad: var(--apple-radius-panel);
-  --ec-brdWd: 1px;
+/* Code blocks are styled through Expressive Code’s `styleOverrides` (see libs/expressive-code.ts). */
+.sl-markdown-content .expressive-code {
   margin-block: 1.5rem;
 }
-.expressive-code figure.frame {
-  box-shadow: none !important;
-}
-.expressive-code .frame .header {
-  min-height: 2.25rem;
-  border-color: var(--apple-hairline) !important;
-  background: var(--apple-code-background) !important;
-}
-.expressive-code .frame .title {
-  color: var(--apple-secondary-foreground) !important;
-  font-family: var(--apple-font-sans) !important;
-  font-size: 0.8125rem !important;
-  font-weight: 500 !important;
+.expressive-code .frame.has-title:not(.is-terminal) .title,
+.expressive-code .frame.is-terminal .title {
+  font-weight: 600;
+  letter-spacing: -0.008em;
 }
 .expressive-code pre {
-  border-color: var(--apple-hairline) !important;
-  background: var(--apple-code-background) !important;
-}
-.expressive-code pre code {
-  font-size: 0.9375rem !important;
-  line-height: 1.5625rem !important;
-}
-.expressive-code .copy button {
-  border-color: var(--apple-hairline) !important;
-  border-radius: 0.5rem !important;
-  background: var(--apple-secondary-background) !important;
-  color: var(--apple-secondary-foreground) !important;
-}
-
-.sl-markdown-content kbd:not(:where(.not-content *)) {
-  display: inline-flex;
-  align-items: center;
-  min-height: 1.5rem;
-  padding-inline: 0.4rem;
-  border: 1px solid var(--apple-border);
-  border-bottom-width: 2px;
-  border-radius: 0.35rem;
-  background: var(--apple-secondary-background);
-  color: var(--apple-secondary-foreground);
-  font-family: var(--apple-font-sans);
-  font-size: 0.8125rem;
-  line-height: 1;
-  vertical-align: 0.08em;
-}
-
-.sl-markdown-content mark:not(:where(.not-content *)) {
-  padding-inline: 0.15em;
-  border-radius: 0.2em;
-  background: color-mix(in srgb, var(--apple-warning) 28%, transparent);
-  color: var(--apple-foreground);
-}
-.expressive-code .copy button:is(:hover, :focus-visible) {
-  border-color: var(--apple-border) !important;
-  background: var(--apple-active-surface) !important;
-  color: var(--apple-foreground) !important;
-}
-.sl-markdown-content starlight-file-tree {
-  display: block;
-  margin-block: 1.5rem;
-  padding: 1rem;
-  border: 1px solid var(--apple-hairline);
-  border-radius: 0.75rem;
-  background: var(--apple-code-background);
-}
-.sl-markdown-content starlight-file-tree .tree-entry {
-  min-height: 1.75rem;
-}
-.sl-markdown-content starlight-file-tree .tree-icon {
-  color: var(--apple-tertiary-foreground);
-}
-.sl-markdown-content starlight-file-tree .comment {
-  color: var(--apple-tertiary-foreground);
+  scrollbar-width: thin;
 }