starlight-theme-bejamas 0.1.18 → 0.2.3

package/src/styles/theme.css

@@ -49,10 +49,8 @@
   }
 
   :root {
-    --sl-font: "Inter Variable", sans-serif;
-    --sl-font-mono: "Geist Mono", monospace;
-
-    --radius: 0.5rem;
+    --sl-font: var(--font-sans);
+    --sl-font-mono: var(--font-mono);
 
     --sl-color-text-accent: var(--accent-foreground);
 
@@ -74,8 +72,7 @@
 
     --sl-color-gray-2: var(--input);
 
-    --default-font-family: "Inter Variable", sans-serif;
-    --font-sans: "Inter Variable", sans-serif;
+    --default-font-family: var(--font-sans);
 
     --sl-color-bg: var(--background);
     --sl-color-fg: var(--foreground);
@@ -92,6 +89,7 @@
     /* --sl-nav-height: auto; */
     --sl-nav-pad-y: calc(var(--spacing) * 4.5);
     --sl-content-pad-x: calc(var(--spacing) * 5);
+    --sl-docs-top-space: calc(var(--spacing) * 12);
     --sl-nav-pad-x: calc(var(--spacing) * 1 + var(--sl-content-pad-x));
     --sl-main-frame-inner-background: var(--background);
     --sl-main-frame-inner-border: var(--border);
@@ -107,6 +105,7 @@
     --ec-frm-inlBtnBgHoverOrFocusOpa: 1;
     --ec-frm-trmIcon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgcGhvc3Bob3I6IGh0dHBzOi8vZ2l0aHViLmNvbS9waG9zcGhvci1pY29ucy9waG9zcGhvci1pY29ucyAtLT4KPHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgaWQ9IkZsYXQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTExNy4zMTQ5NCwxMzMuOTc5NDlsLTcyLDY0YTguMDAwMTgsOC4wMDAxOCwwLDAsMS0xMC42Mjk4OC0xMS45NTlMOTkuOTU4NSwxMjgsMzQuNjg1MDYsNjkuOTc5NDlhOC4wMDAxOCw4LjAwMDE4LDAsMCwxLDEwLjYyOTg4LTExLjk1OWw3Miw2NGE4LjAwMDU0LDguMDAwNTQsMCwwLDEsMCwxMS45NTlaTTIxNS45OTQxNCwxODRoLTk2YTgsOCwwLDAsMCwwLDE2aDk2YTgsOCwwLDEsMCwwLTE2WiIvPgo8L3N2Zz4=);
     --ecGtrBrdWd: 5px;
+    --sl-nav-gap: calc(var(--spacing) * 2);
   }
 
   @media (min-width: 50em) {
@@ -152,7 +151,7 @@
 
   .right-sidebar-panel {
     --sl-sidebar-item-padding-inline: 1rem;
-    padding-top: calc(var(--spacing) * 14);
+    padding-top: var(--sl-docs-top-space);
   }
 
   .right-sidebar-panel a {
@@ -197,6 +196,14 @@
     font-size: 1rem;
   }
 
+  .sidebar-content details > summary .caret {
+    transform: rotate(90deg);
+  }
+
+  .sidebar-content details[open] > summary .caret {
+    transform: rotate(-90deg);
+  }
+
   .sidebar-content a > span {
     color: var(--foreground);
     padding-inline: 0.5rem;
@@ -226,6 +233,16 @@
     margin-bottom: 1px;
   }
 
+  @media (min-width: 64rem) {
+    .sidebar-pane .sidebar-content {
+      padding-top: var(--sl-docs-top-space);
+    }
+
+    .sidebar-content::before {
+      display: none;
+    }
+  }
+
   @media (max-width: 49.99rem) {
     .sidebar-pane .sidebar-content {
       --sl-sidebar-item-padding-inline: 0.5rem;
@@ -273,7 +290,7 @@
 
   @media (min-width: 50rem) {
     .content-panel:first-child {
-      padding-top: calc(var(--spacing) * 12);
+      padding-top: var(--sl-docs-top-space);
     }
   }
 
@@ -284,15 +301,6 @@
     padding-inline: 0.5rem;
   }
 
-  site-search button {
-    --tw-shadow: var(--shadow-sm);
-    box-shadow:
-      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
-      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    border-radius: calc(var(--radius) - 2px);
-    max-width: calc(var(--spacing) * 50);
-  }
-
   .expressive-code .frame {
     box-shadow: none;
   }
@@ -421,21 +429,6 @@
     text-underline-offset: 4px;
   }
 
-  button[data-open-modal] {
-    border-color: var(--border);
-    color: var(--foreground);
-    box-shadow: none;
-    background-color: var(--background);
-    height: calc(var(--spacing) * 9);
-  }
-
-  button[data-open-modal] kbd {
-    background-color: var(--muted);
-    color: var(--muted-foreground);
-    border-radius: calc(var(--radius) - 4px);
-    gap: 0;
-  }
-
   .tablist-wrapper ~ [role="tabpanel"] {
     margin-top: calc(var(--spacing) * 2.5);
   }
@@ -479,6 +472,19 @@
     z-index: 10;
   }
 
+  /* Draw the border on the wrapper so the collapse overlay and expanded
+     scrolling don't cover or scroll away the pre's own border. */
+  .expressive-code:has(> .ec-collapse) {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+
+  .expressive-code:has(> .ec-collapse) pre {
+    border: 0;
+    border-radius: 0;
+  }
+
   .sl-bejamas-component-preview + .expressive-code {
     margin-top: 0;
   }
@@ -730,7 +736,7 @@
     max-width: calc(var(--spacing) * 150);
   }
 
-  starlight-menu-button button {
+  .sl-menu-button {
     box-shadow: none;
     padding: 0;
     width: calc(var(--spacing) * 6);
@@ -738,18 +744,18 @@
     color: var(--foreground);
   }
 
-  starlight-menu-button button svg {
+  .sl-menu-button svg {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
     font-size: calc(var(--spacing) * 8);
   }
 
   @media (min-width: 50rem) and (max-width: calc(64rem - 0.01rem)) {
-    starlight-menu-button button {
+    .sl-menu-button {
       display: flex;
     }
 
-    [data-mobile-menu-expanded] {
+    body:has(#starlight__sidebar:popover-open) {
       overflow: hidden;
     }
   }