starlight-theme-apple 0.7.0 → 0.9.0

package/styles/header.css

@@ -1,106 +1,261 @@
-header.header {
-  height: var(--apple-header-height);
+/* Navigation bar: a solid, compact bar with a single hairline, like Apple’s documentation nav. */
+.page > .header {
   border-bottom: 1px solid var(--apple-hairline);
-  background: var(--apple-header-background);
-  color: var(--apple-foreground);
-  -webkit-backdrop-filter: saturate(180%) blur(20px);
-  backdrop-filter: saturate(180%) blur(20px);
+  background: var(--apple-background);
 }
 
-header.header > .header {
+.apple-header {
+  display: flex;
+  align-items: center;
+  gap: 1.75rem;
   height: 100%;
-  padding-inline: clamp(1rem, 2.4vw, 2rem);
 }
 
+.apple-header__title {
+  display: flex;
+  flex: 0 1 auto;
+  min-width: 0;
+}
 .site-title {
+  gap: 0.5rem;
   min-width: 0;
-  overflow: hidden;
   color: var(--apple-foreground);
   font-size: 1.1875rem;
   font-weight: 600;
-  line-height: 1.6875rem;
-  letter-spacing: -0.015em;
-  text-overflow: ellipsis;
+  line-height: 1.5rem;
+  letter-spacing: 0.012em;
   white-space: nowrap;
 }
+.site-title span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.site-title img {
+  height: 1.5rem;
+  width: auto;
+}
 .site-title:hover {
   color: var(--apple-foreground);
-  opacity: 0.72;
 }
 
-.right-group,
-.social-icons {
-  align-items: center;
-  gap: 0.25rem;
+/* Primary navigation */
+.apple-header__nav {
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
-.social-icons::after {
+.apple-header__nav::-webkit-scrollbar {
   display: none;
 }
-
-.social-icons a,
-starlight-theme-select,
-starlight-lang-select {
+.apple-header__nav ul,
+.apple-menu-nav ul,
+.apple-footer ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.apple-header__nav ul {
+  display: flex;
+  gap: 1.5rem;
+}
+.apple-header__nav .apple-nav-link {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
-  min-width: 2.25rem;
+  gap: 0.375rem;
   min-height: 2.25rem;
-  border-radius: var(--apple-radius-sm);
   color: var(--apple-secondary-foreground);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.016em;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.apple-header__nav .apple-nav-link:hover,
+.apple-header__nav .apple-nav-link[aria-current] {
+  color: var(--apple-foreground);
 }
-.social-icons a {
-  width: 2.25rem;
-  height: 2.25rem;
+
+.apple-header__end {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 0.75rem;
+  margin-inline-start: auto;
+}
+.apple-header__controls,
+.apple-header__controls .social-icons {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+/* Icon buttons share one 32px circular hit area. */
+.apple-social-link,
+.apple-header starlight-theme-select label {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
   margin: 0;
-  padding: 0.5rem;
+  padding: 0;
+  border-radius: 50%;
+  color: var(--apple-secondary-foreground);
+}
+.apple-social-link:hover,
+.apple-header starlight-theme-select label:hover {
+  background: var(--apple-fill-secondary);
+  color: var(--apple-foreground);
+}
+.apple-social-link svg {
+  width: 1.0625rem;
+  height: 1.0625rem;
+}
+
+/*
+ * Appearance: Starlight’s native theme <select> rendered as an icon button. The select keeps
+ * its accessible name, keyboard behavior, persistence, and the system (“Auto”) option; the
+ * icon reflects the current choice.
+ */
+.apple-header starlight-theme-select label {
+  position: relative;
+}
+.apple-header starlight-theme-select label::before {
+  content: "";
+  width: 1.0625rem;
+  height: 1.0625rem;
+  background: currentColor;
+  -webkit-mask: var(--apple-appearance-icon) center / contain no-repeat;
+  mask: var(--apple-appearance-icon) center / contain no-repeat;
+  --apple-appearance-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 1.5v14a7 7 0 0 1 0-14Z'/%3E%3C/svg%3E");
 }
-:is(starlight-theme-select, starlight-lang-select) {
-  align-self: center;
-  height: 2.25rem;
+.apple-header
+  starlight-theme-select:has(option[value="light"]:checked)
+  label::before {
+  --apple-appearance-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='3.6'/%3E%3Cpath d='M10 1v2.2M10 16.8V19M1 10h2.2M16.8 10H19M3.64 3.64l1.55 1.55M14.81 14.81l1.55 1.55M3.64 16.36l1.55-1.55M14.81 5.19l1.55-1.55' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
 }
-:is(starlight-theme-select, starlight-lang-select) > label {
+.apple-header
+  starlight-theme-select:has(option[value="dark"]:checked)
+  label::before {
+  --apple-appearance-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.1 1.7a7 7 0 0 0 10.2 10.2A8.5 8.5 0 1 1 8.1 1.7Z'/%3E%3C/svg%3E");
+}
+.apple-header starlight-theme-select :is(.label-icon, .caret) {
+  display: none;
+}
+.apple-header starlight-theme-select select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
   height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  font-size: 1rem;
+  cursor: pointer;
 }
-:is(starlight-theme-select, starlight-lang-select) select {
-  height: 2.25rem;
-  margin-block: 0;
-  padding-block: 0;
-  line-height: 2.25rem;
+.apple-header starlight-theme-select label:has(select:focus-visible) {
+  outline: 2px solid var(--apple-link);
+  outline-offset: 1px;
 }
 
-.social-icons a:hover,
-starlight-theme-select:hover,
-starlight-lang-select:hover {
-  background: var(--apple-active-surface);
-  color: var(--apple-foreground);
+.apple-header starlight-lang-select select {
+  font-size: 0.875rem;
 }
 
-.sidebar :is(.sl-menu-button, button[aria-controls="starlight__sidebar"]) {
-  display: inline-grid;
-  place-items: center;
-  width: var(--sl-menu-button-size);
-  height: var(--sl-menu-button-size);
-  border: 0;
-  border-radius: var(--apple-radius-sm);
+/* Emphasized action: Apple’s small pill button. */
+.apple-header__action {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-height: 1.75rem;
+  padding: 0.25rem 0.875rem;
+  border-radius: 980px;
+  background: var(--apple-button-background);
+  color: var(--apple-button-foreground);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: -0.008em;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.apple-header__action:hover {
+  background: var(--apple-button-background-hover);
+  color: var(--apple-button-foreground);
+}
+.apple-header__action svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* Mobile menu toggle: a plain icon button instead of a floating disc. */
+starlight-menu-button button {
+  border-radius: 50%;
   background: transparent;
   box-shadow: none;
   color: var(--apple-foreground);
 }
-.sidebar
-  :is(.sl-menu-button, button[aria-controls="starlight__sidebar"]):is(
-    :hover,
-    :active
-  ) {
-  background: var(--apple-active-surface);
+starlight-menu-button button:hover,
+starlight-menu-button[aria-expanded="true"] button {
+  background: var(--apple-fill-secondary);
+  color: var(--apple-foreground);
+}
+:root[data-theme="light"] starlight-menu-button button {
+  background: transparent;
+  color: var(--apple-foreground);
+}
+:root[data-theme="light"] starlight-menu-button[aria-expanded="true"] button {
+  background: var(--apple-fill-secondary);
+}
+
+/* Header links inside the mobile menu, above the page navigation. */
+.apple-menu-nav {
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--apple-hairline);
+}
+.apple-menu-nav .apple-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.75rem;
+  padding-inline: 0.625rem;
+  border-radius: var(--apple-radius-sm);
   color: var(--apple-foreground);
+  font-size: 1.0625rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+.apple-menu-nav .apple-nav-link[aria-current] {
+  color: var(--apple-link);
+}
+.apple-menu-nav .apple-nav-link:hover {
+  background: var(--apple-fill-secondary);
 }
 
-@media (min-width: 50rem) {
-  header.header site-search {
-    justify-self: end;
-    min-width: 15rem;
+.mobile-preferences {
+  gap: 0.75rem 1rem;
+  border-top-color: var(--apple-hairline);
+}
+.mobile-preferences .apple-social-link {
+  width: 2.75rem;
+  height: 2.75rem;
+}
+
+@media (max-width: 49.99rem) {
+  .apple-header {
+    gap: 1rem;
+  }
+  .apple-header__controls,
+  :root[data-has-sidebar] .apple-header__nav,
+  :root[data-has-sidebar] .apple-header__action {
+    display: none;
+  }
+  .apple-header__nav ul {
+    gap: 1rem;
+  }
+  .apple-header__end {
+    gap: 0.5rem;
   }
-  :is(starlight-theme-select, starlight-lang-select) {
-    padding-inline-start: 0.25rem;
+  .site-title {
+    font-size: 1.0625rem;
   }
 }

package/styles/reference.css

@@ -0,0 +1,332 @@
+/*
+ * Reference primitives.
+ *
+ * A small HTML vocabulary for API, configuration, and command references. Each class is also
+ * rendered by a component in `starlight-theme-apple/components`, so generated Markdown and
+ * hand-written MDX produce the same structure:
+ *
+ *   .apple-entry         one symbol, setting, command, or release (contains its heading)
+ *   .apple-label         a small caption above a block, or a kind label above a heading
+ *   .apple-declaration   declaration or usage synopsis
+ *   .apple-meta          compact key–value metadata (type, default, date, …)
+ *   .apple-parameters    parameter, option, or value definitions
+ *   .apple-values        a set of accepted literal values
+ *   .apple-availability  platform/version availability and status
+ *   .apple-topics        topic links with short abstracts
+ */
+
+/* ============================================================
+   Entries
+   ============================================================ */
+
+.sl-markdown-content .apple-entry {
+  padding-block: 1.25rem 1.375rem;
+  border-top: 1px solid var(--apple-hairline);
+}
+.sl-markdown-content .apple-entry + .apple-entry {
+  margin-top: 0;
+}
+.sl-markdown-content .apple-entry + :not(.apple-entry) {
+  margin-top: 1.5rem;
+}
+
+.sl-markdown-content .apple-entry > * {
+  margin-block: 0;
+}
+.sl-markdown-content .apple-entry > * + * {
+  margin-top: 0.625rem;
+}
+.sl-markdown-content
+  .apple-entry
+  > :is(.expressive-code, .starlight-aside, .apple-declaration) {
+  margin-top: 0.875rem;
+}
+
+/* The entry’s leading heading is its name. */
+.sl-markdown-content
+  .apple-entry
+  > :first-child:is(.sl-heading-wrapper, h2, h3, h4, h5, h6) {
+  margin-top: 0;
+  font-size: 1.1875rem;
+  line-height: 1.32;
+}
+.sl-markdown-content
+  .apple-entry
+  > :first-child:is(.sl-heading-wrapper.level-h2, h2) {
+  font-size: 1.5rem;
+  line-height: 1.1667;
+}
+/* Later headings inside an entry, such as a release’s “Changes”, are compact section titles. */
+.sl-markdown-content
+  .apple-entry
+  > :not(:first-child):is(.sl-heading-wrapper, h2, h3, h4, h5, h6) {
+  margin-top: 1.25rem;
+  font-size: 1.0625rem;
+  line-height: 1.4706;
+}
+.sl-markdown-content .apple-entry :is(h2, h3, h4, h5, h6) {
+  font-size: inherit;
+  font-weight: 600;
+  line-height: inherit;
+  letter-spacing: 0.012em;
+}
+.sl-markdown-content .apple-entry :is(h2, h3, h4, h5, h6) code {
+  font-size: 0.95em;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.sl-markdown-content .apple-entry > p:not([class]) {
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: -0.02em;
+}
+.sl-markdown-content .apple-entry > :is(ul, ol):not([class]) {
+  font-size: 1rem;
+}
+
+/* ============================================================
+   Labels
+   ============================================================ */
+
+.sl-markdown-content .apple-label {
+  margin-bottom: 0.375rem;
+  color: var(--apple-secondary-foreground);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.125rem;
+  letter-spacing: -0.008em;
+}
+.sl-markdown-content * + .apple-label {
+  margin-top: 1.25rem;
+}
+.sl-markdown-content .apple-label + * {
+  margin-top: 0;
+}
+/* A kind label above a section heading, e.g. “Table” above `[settings]`. */
+.sl-markdown-content * + .apple-label:has(+ :is(.sl-heading-wrapper, h2, h3)) {
+  margin-top: 2.75rem;
+}
+.sl-markdown-content .apple-label + :is(.sl-heading-wrapper, h2, h3) {
+  margin-top: 0.125rem;
+}
+
+/* ============================================================
+   Declarations
+   ============================================================ */
+
+.sl-markdown-content .apple-declaration {
+  padding: 0.6875rem 1rem;
+  border: 0;
+  border-radius: 0.75rem;
+  background: var(--apple-code-background);
+  color: var(--apple-foreground);
+  font-family: var(--apple-font-mono);
+  font-size: 0.875rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.sl-markdown-content .apple-declaration code {
+  font-size: inherit;
+  white-space: inherit;
+}
+.sl-markdown-content .apple-declaration a {
+  color: var(--apple-link);
+  text-decoration: none;
+}
+.sl-markdown-content .apple-declaration a:hover {
+  text-decoration: underline;
+}
+
+/* ============================================================
+   Metadata
+   ============================================================ */
+
+.sl-markdown-content .apple-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 1.5rem;
+  color: var(--apple-secondary-foreground);
+  font-size: 0.875rem;
+  line-height: 1.43;
+  letter-spacing: -0.016em;
+}
+.sl-markdown-content .apple-meta > * {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  min-width: 0;
+  margin: 0;
+}
+.sl-markdown-content .apple-meta :is(dt, dd) {
+  margin: 0;
+  padding: 0;
+}
+.sl-markdown-content .apple-meta dt {
+  color: var(--apple-secondary-foreground);
+  font-weight: 400;
+}
+.sl-markdown-content .apple-meta dd {
+  color: var(--apple-foreground);
+  overflow-wrap: anywhere;
+}
+.sl-markdown-content .apple-meta a {
+  color: var(--apple-link);
+}
+.sl-markdown-content .apple-meta time {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ============================================================
+   Parameters
+   ============================================================ */
+
+.sl-markdown-content .apple-parameters {
+  container-type: inline-size;
+  border-top: 1px solid var(--apple-hairline);
+}
+.sl-markdown-content .apple-parameters > div {
+  display: grid;
+  margin: 0;
+  gap: 0.25rem 1.5rem;
+  padding-block: 0.6875rem;
+  border-bottom: 1px solid var(--apple-hairline);
+  scroll-margin-top: calc(
+    var(--sl-nav-height) + var(--sl-mobile-toc-height) + 1.5rem
+  );
+}
+.sl-markdown-content .apple-parameters > div:target {
+  background: linear-gradient(
+      var(--apple-fill-secondary),
+      var(--apple-fill-secondary)
+    )
+    no-repeat;
+}
+@container (min-width: 34rem) {
+  .sl-markdown-content .apple-parameters > div {
+    grid-template-columns: minmax(9rem, 0.4fr) minmax(0, 1fr);
+  }
+}
+.sl-markdown-content .apple-parameters :is(dt, dd) {
+  margin: 0;
+  padding: 0;
+}
+.sl-markdown-content .apple-parameters dt {
+  color: var(--apple-foreground);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+.sl-markdown-content .apple-parameters dt code {
+  font-size: inherit;
+  font-weight: 600;
+}
+.sl-markdown-content .apple-parameters dd {
+  color: var(--apple-foreground);
+  font-size: 0.9375rem;
+  line-height: 1.4667;
+  letter-spacing: -0.016em;
+}
+.sl-markdown-content .apple-parameters dd > * {
+  margin-block: 0;
+}
+.sl-markdown-content .apple-parameters dd > * + * {
+  margin-top: 0.375rem;
+}
+.sl-markdown-content .apple-parameters dd:empty {
+  display: none;
+}
+.sl-markdown-content .apple-parameters a {
+  color: var(--apple-link);
+}
+
+/* ============================================================
+   Values and availability
+   ============================================================ */
+
+.sl-markdown-content .apple-values {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  padding: 0;
+  list-style: none;
+}
+.sl-markdown-content .apple-values > li {
+  margin: 0;
+}
+.sl-markdown-content .apple-values code {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--apple-radius-sm);
+  background: var(--apple-fill-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+}
+
+.apple-availability {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 1rem;
+  padding: 0;
+  list-style: none;
+  color: var(--apple-foreground);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  letter-spacing: -0.016em;
+}
+.sl-markdown-content .apple-availability > li {
+  margin: 0;
+}
+.apple-availability > [data-variant] {
+  --apple-status: var(--apple-link);
+  padding-inline: 0.5rem;
+  border-radius: 980px;
+  background: color-mix(in srgb, var(--apple-status) 13%, transparent);
+  color: var(--apple-status);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.apple-availability > [data-variant="tip"] {
+  --apple-status: var(--apple-tip);
+}
+.apple-availability > [data-variant="caution"] {
+  --apple-status: var(--apple-caution);
+}
+.apple-availability > [data-variant="danger"] {
+  --apple-status: var(--apple-danger);
+}
+
+/* ============================================================
+   Topics
+   ============================================================ */
+
+.sl-markdown-content .apple-topics {
+  padding: 0;
+  list-style: none;
+}
+.sl-markdown-content .apple-topics > li {
+  margin: 0;
+}
+.sl-markdown-content .apple-topics > li + li {
+  margin-top: 0.9375rem;
+}
+.sl-markdown-content .apple-topics > li > a {
+  color: var(--apple-link);
+  font-size: 1.0625rem;
+  line-height: 1.4706;
+}
+.sl-markdown-content .apple-topics > li > a code {
+  font-size: 0.94em;
+  color: inherit;
+}
+.sl-markdown-content .apple-topics > li > :not(a) {
+  margin: 0.125rem 0 0;
+  color: var(--apple-foreground);
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: -0.02em;
+}