starlight-theme-apple 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starlight-theme-apple",
-  "version": "0.4.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

@@ -3,62 +3,77 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.4rem;
-  min-height: 2.25rem;
-  padding: 0.45rem 0.875rem;
-  border: 1px solid transparent;
-  border-radius: var(--apple-radius-sm);
+  gap: 0.375rem;
+  min-width: 1.875rem;
+  min-height: 2.0625rem;
+  padding: 0.25rem 0.9375rem;
+  border: 0;
+  border-radius: 0.25rem;
   box-shadow: none;
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.25rem;
+  font-size: 1.0625rem;
+  font-weight: 400;
+  line-height: 1.5625rem;
+  letter-spacing: normal;
   text-decoration: none;
+  cursor: pointer;
+  transition:
+    color var(--apple-transition),
+    background-color var(--apple-transition),
+    border-color var(--apple-transition),
+    box-shadow var(--apple-transition);
 }
 .sl-markdown-content .sl-link-button + .sl-link-button {
   margin-inline-start: 0.5rem;
 }
 .hero .sl-link-button {
-  min-height: 2.5rem;
-  padding: 0.55rem 1rem;
+  min-height: 2.0625rem;
+  padding: 0.25rem 0.9375rem;
 }
 .hero .sl-link-button svg,
 .sl-markdown-content .sl-link-button svg {
   flex-shrink: 0;
-  font-size: 1.125rem;
+  font-size: 1rem;
 }
 
 :is(.hero, .sl-markdown-content) .sl-link-button.primary {
-  border-color: var(--apple-link);
-  background: var(--apple-link);
+  background: var(--apple-button-background);
   color: var(--apple-control-primary-text);
 }
 :is(.hero, .sl-markdown-content)
   .sl-link-button.primary:is(:hover, :focus-visible) {
-  border-color: var(--apple-link-hover);
-  background: var(--apple-link-hover);
+  background: var(--apple-button-background-hover);
   color: var(--apple-control-primary-text);
   text-decoration: none;
 }
+:is(.hero, .sl-markdown-content) .sl-link-button.primary:active {
+  background: var(--apple-button-background-active);
+}
 :is(.hero, .sl-markdown-content) .sl-link-button.secondary {
-  border-color: var(--apple-border);
-  background: transparent;
-  color: var(--apple-foreground);
+  background: var(--apple-button-secondary-background);
+  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);
+  background: var(--apple-button-secondary-hover);
+  color: var(--apple-link);
   text-decoration: none;
 }
 :is(.hero, .sl-markdown-content) .sl-link-button.minimal {
+  min-width: 0;
+  padding-inline: 0;
   background: transparent;
   color: var(--apple-link);
 }
 :is(.hero, .sl-markdown-content)
   .sl-link-button.minimal:is(:hover, :focus-visible) {
-  background: var(--apple-hover-surface);
-  color: var(--apple-link-hover);
-  text-decoration: none;
+  background: transparent;
+  color: var(--apple-link);
+  text-decoration: underline;
+  text-underline-offset: 0.14em;
+}
+:is(.hero, .sl-markdown-content) .sl-link-button:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 4px var(--apple-focus);
 }
 
 .sl-markdown-content starlight-tabs {
@@ -113,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;
@@ -129,16 +145,45 @@
   font-size: 0.6875rem;
   line-height: 1;
 }
+.sidebar-content a[aria-current="page"] > .sl-badge {
+  color: inherit;
+}
 
-.sl-markdown-content
-  :is(input, select, textarea, button):not(:where(.not-content *)) {
+.sl-markdown-content :is(input, select, textarea):not(:where(.not-content *)) {
   min-height: 2.25rem;
   border: 1px solid var(--apple-border);
-  border-radius: var(--apple-radius-sm);
+  border-radius: 0.5rem;
   background: var(--apple-secondary-background);
   color: var(--apple-foreground);
   font: inherit;
 }
+.sl-markdown-content button:not(:where(.not-content *)) {
+  min-width: 1.875rem;
+  min-height: 2.0625rem;
+  padding: 0.25rem 0.9375rem;
+  border: 0;
+  border-radius: 0.25rem;
+  background: var(--apple-button-background);
+  color: var(--apple-control-primary-text);
+  box-shadow: none;
+  font: inherit;
+  font-size: 1.0625rem;
+  font-weight: 400;
+  line-height: 1.5625rem;
+  cursor: pointer;
+}
+.sl-markdown-content
+  button:is(:hover, :focus-visible):not(:where(.not-content *)) {
+  background: var(--apple-button-background-hover);
+}
+.sl-markdown-content button:active:not(:where(.not-content *)) {
+  background: var(--apple-button-background-active);
+  box-shadow: none;
+}
+.sl-markdown-content button:focus-visible:not(:where(.not-content *)) {
+  outline: 0;
+  box-shadow: 0 0 0 4px var(--apple-focus);
+}
 .sl-markdown-content :is(input, select, textarea):focus {
   border-color: var(--apple-link);
   box-shadow: 0 0 0 3px var(--apple-focus);

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);
@@ -14,7 +15,12 @@
   --apple-link: #09f;
   --apple-link-hover: #40b3ff;
   --apple-focus: rgba(0, 153, 255, 0.35);
-  --apple-control-primary-text: #000;
+  --apple-button-background: #06f;
+  --apple-button-background-hover: #09f;
+  --apple-button-background-active: #06f;
+  --apple-button-secondary-background: #161616;
+  --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-code-background: #1c1c1e;
@@ -74,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);
@@ -85,6 +92,11 @@
   --apple-link: #36f;
   --apple-link-hover: #174ea6;
   --apple-focus: rgba(51, 102, 255, 0.24);
+  --apple-button-background: #00f;
+  --apple-button-background-hover: #36f;
+  --apple-button-background-active: #36f;
+  --apple-button-secondary-background: #f7f7f7;
+  --apple-button-secondary-hover: #f0f0f0;
   --apple-control-primary-text: #fff;
   --apple-header-background: rgba(255, 255, 255, 0.82);
   --apple-code-background: #f5f5f7;