starlight-theme-apple 0.4.0 → 0.5.0

package/package.json

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

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 {
@@ -130,15 +145,41 @@
   line-height: 1;
 }
 
-.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

@@ -14,7 +14,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;
@@ -85,6 +90,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;