starlight-theme-apple 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-theme-apple",
-  "version": "0.5.0",
+  "version": "0.6.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/content.css

@@ -237,40 +237,112 @@
 .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);
-  box-shadow: none;
+  border-radius: 0.875rem;
+  background: var(--apple-card-background);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
 }
 .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: var(--apple-link);
+  background: var(--apple-hover-surface);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+  transform: translateY(-1px);
+  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 {

package/styles/controls.css

@@ -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;

package/styles/tokens.css

@@ -3,6 +3,7 @@
   --apple-background: #111;
   --apple-navigator-background: #161616;
   --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);
@@ -79,6 +80,7 @@
   --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);