starlight-theme-bejamas 0.0.0-canary.0440c77

package/src/overrides/ThemeSelect.astro

@@ -0,0 +1,124 @@
+---
+import {
+  Select,
+  SelectControl,
+  SelectIndicator,
+  SelectOption,
+} from "virtual:starlight-theme-bejamas/components/select";
+
+import { SunIcon, MoonIcon, LaptopIcon } from "@lucide/astro";
+---
+
+<starlight-theme-select>
+  <div class="relative text-sm">
+    <div class="sl-bejamas-theme-select-icons">
+      <SunIcon class="theme-icon theme-icon-light size-4" />
+      <MoonIcon class="theme-icon theme-icon-dark size-4" />
+      <LaptopIcon class="theme-icon theme-icon-auto size-4" />
+    </div>
+    <Select showCheckmark={false}>
+      <SelectIndicator />
+      <SelectControl
+        showCheckmark={false}
+        class="sl-bejamas-theme-select-control"
+      >
+        <SelectOption value="light"
+          ><SunIcon class="size-4" /> Light</SelectOption
+        >
+        <SelectOption value="dark"
+          ><MoonIcon class="size-4" /> Dark</SelectOption
+        >
+        <SelectOption value="auto"
+          ><LaptopIcon class="size-4" /> Auto</SelectOption
+        >
+      </SelectControl>
+    </Select>
+  </div>
+</starlight-theme-select>
+
+<script is:inline>
+  StarlightThemeProvider.updatePickers();
+</script>
+
+<script>
+  type Theme = "auto" | "dark" | "light";
+  const storageKey = "starlight-theme";
+
+  const parseTheme = (theme: unknown): Theme =>
+    theme === "auto" || theme === "dark" || theme === "light" ? theme : "auto";
+
+  const loadTheme = (): Theme =>
+    parseTheme(
+      typeof localStorage !== "undefined" && localStorage.getItem(storageKey),
+    );
+
+  function storeTheme(theme: Theme): void {
+    if (typeof localStorage !== "undefined") {
+      localStorage.setItem(
+        storageKey,
+        theme === "light" || theme === "dark" ? theme : "",
+      );
+    }
+  }
+
+  const getPreferredColorScheme = (): Theme =>
+    matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+
+  function onThemeChange(theme: Theme): void {
+    const resolved = theme === "auto" ? getPreferredColorScheme() : theme;
+    StarlightThemeProvider.updatePickers(theme);
+    document.documentElement.dataset.theme = resolved;
+    document.documentElement.dataset.themeChoice = theme;
+    document.documentElement.classList.toggle("dark", resolved === "dark");
+    storeTheme(theme);
+  }
+
+  matchMedia("(prefers-color-scheme: light)").addEventListener("change", () => {
+    if (loadTheme() === "auto") onThemeChange("auto");
+  });
+
+  class StarlightThemeSelect extends HTMLElement {
+    constructor() {
+      super();
+      onThemeChange(loadTheme());
+      this.querySelector("select")?.addEventListener("change", (e) => {
+        if (e.currentTarget instanceof HTMLSelectElement) {
+          onThemeChange(parseTheme(e.currentTarget.value));
+        }
+      });
+    }
+  }
+
+  customElements.define("starlight-theme-select", StarlightThemeSelect);
+</script>
+
+<style>
+  .theme-icon {
+    display: none;
+  }
+
+  :global(html[data-theme-choice="light"]) .theme-icon-light {
+    display: block;
+  }
+
+  :global(html[data-theme-choice="dark"]) .theme-icon-dark {
+    display: block;
+  }
+
+  :global(html[data-theme-choice="auto"]) .theme-icon-auto {
+    display: block;
+  }
+
+  .sl-bejamas-theme-select-icons {
+    position: absolute;
+    z-index: 10;
+    left: calc(var(--spacing) * 3);
+    top: calc(var(--spacing) * 2.5);
+    pointer-events: none;
+  }
+
+  .sl-bejamas-theme-select-control {
+    padding-left: calc(var(--spacing) * 9);
+    width: calc(var(--spacing) * 28);
+  }
+</style>

package/src/styles/theme.css

@@ -0,0 +1,584 @@
+@layer starlight, bejamas;
+
+@import "@fontsource-variable/inter/index.css";
+
+@layer bejamas {
+  @media (min-width: 50rem) {
+    :root::after {
+      content: "";
+      position: fixed;
+      inset: 0;
+      right: calc(var(--spacing) * 6);
+      background: linear-gradient(
+        var(--background) 49.99%,
+        var(--sl-main-frame-inner-background) 50%
+      );
+      z-index: -1;
+    }
+  }
+
+  .page {
+    background-color: var(--background);
+  }
+
+  :root {
+    --sl-font: "Inter Variable", sans-serif;
+    --sl-font-mono: "Geist Mono", monospace;
+
+    --radius: 0.5rem;
+
+    --sl-color-text-accent: var(--accent-foreground);
+
+    --sl-color-banner-text: var(--foreground);
+
+    --sl-color-bg-inline-code: var(--input);
+
+    --sl-color-hairline-shade: var(--border);
+
+    --sl-color-bg-sidebar: var(--background);
+
+    --sl-color-gray-5: var(--input);
+    --sl-color-black: transparent;
+
+    --code-background: var(--background);
+    --sl-color-text: var(--foreground);
+
+    --sl-text-h1: var(--text-3xl);
+    --sl-text-h2: var(--text-xl);
+    --sl-text-h3: var(--text-lg);
+
+    --sl-color-gray-2: var(--input);
+
+    --default-font-family: "Inter Variable", sans-serif;
+    --font-sans: "Inter Variable", sans-serif;
+
+    --sl-color-bg: var(--background);
+    --sl-color-fg: var(--foreground);
+    --sl-color-primary: var(--primary);
+    --sl-color-primary-fg: var(--primary-foreground);
+
+    --sl-color-hairline: var(--border);
+    --sl-color-bg-nav: var(--background);
+
+    --sl-color-text-accent: var(--primary);
+    --sl-color-accent: var(--primary);
+
+    --sl-nav-height: calc(var(--spacing) * 15);
+    /* --sl-nav-height: auto; */
+    --sl-nav-pad-y: calc(var(--spacing) * 4.5);
+    --sl-content-pad-x: calc(var(--spacing) * 5);
+    --sl-nav-pad-x: calc(var(--spacing) * 1 + var(--sl-content-pad-x));
+    --sl-main-frame-inner-background: color-mix(
+      in oklab,
+      var(--muted) 100%,
+      transparent
+    );
+    --sl-main-frame-inner-border: var(--border);
+    --sl-content-inline-start: 0rem;
+
+    --sl-icon-color: var(--foreground);
+    --ec-frm-inlBtnBgHoverOrFocusOpa: 1;
+    --ec-frm-trmIcon: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgcGhvc3Bob3I6IGh0dHBzOi8vZ2l0aHViLmNvbS9waG9zcGhvci1pY29ucy9waG9zcGhvci1pY29ucyAtLT4KPHN2ZyBmaWxsPSIjMDAwMDAwIiB3aWR0aD0iMThweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgaWQ9IkZsYXQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTExNy4zMTQ5NCwxMzMuOTc5NDlsLTcyLDY0YTguMDAwMTgsOC4wMDAxOCwwLDAsMS0xMC42Mjk4OC0xMS45NTlMOTkuOTU4NSwxMjgsMzQuNjg1MDYsNjkuOTc5NDlhOC4wMDAxOCw4LjAwMDE4LDAsMCwxLDEwLjYyOTg4LTExLjk1OWw3Miw2NGE4LjAwMDU0LDguMDAwNTQsMCwwLDEsMCwxMS45NTlaTTIxNS45OTQxNCwxODRoLTk2YTgsOCwwLDAsMCwwLDE2aDk2YTgsOCwwLDEsMCwwLTE2WiIvPgo8L3N2Zz4=);
+    --ecGtrBrdWd: 5px;
+  }
+
+  @media (min-width: 50em) {
+    :root {
+      --sl-nav-height: calc(var(--spacing) * 18);
+    }
+    [data-has-sidebar] {
+      --sl-sidebar-width: 0;
+    }
+  }
+
+  @media (min-width: 64em) {
+    [data-has-sidebar] {
+      --sl-sidebar-width: 18.75rem;
+    }
+  }
+
+  html {
+    scrollbar-gutter: stable;
+  }
+
+  html[data-theme="dark"],
+  html.dark {
+    --sl-main-frame-inner-background: color-mix(
+      in oklab,
+      var(--muted) 30%,
+      transparent
+    );
+    --sl-main-frame-inner-border: color-mix(
+      in oklab,
+      var(--border) 50%,
+      transparent
+    );
+  }
+}
+
+@layer bejamas {
+  .sidebar-pane .sidebar-content {
+    --sl-sidebar-item-padding-inline: 1rem;
+    padding-top: 0;
+  }
+
+  .right-sidebar-panel {
+    --sl-sidebar-item-padding-inline: 1rem;
+    padding-top: calc(var(--spacing) * 14);
+  }
+
+  .right-sidebar-panel a {
+    color: var(--muted-foreground);
+  }
+
+  .right-sidebar-panel a[aria-current="true"] {
+    color: var(--foreground);
+  }
+
+  .right-sidebar-panel a:hover {
+    color: var(--foreground);
+  }
+
+  .right-sidebar,
+  .sidebar .sidebar-pane {
+    border: 0;
+  }
+
+  @media (min-width: 72rem) {
+    .right-sidebar {
+      position: sticky;
+      top: var(--sl-nav-height);
+      padding-top: 0;
+      height: auto;
+    }
+  }
+
+  .sidebar-content a {
+    background-color: var(--background);
+    padding: 0;
+  }
+
+  .group-label > span {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .group-label + svg {
+    color: var(--muted-foreground);
+    font-size: 1rem;
+  }
+
+  .sidebar-content a > span {
+    color: var(--foreground);
+    padding-inline: 0.5rem;
+    padding-block: 0.375rem;
+    border-radius: 0.5rem;
+    /* transition-property: color, background-color;
+    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-duration: 0.05s; */
+    display: inline-block;
+  }
+
+  .sidebar-content a[aria-current="page"] > span {
+    background-color: var(--secondary);
+    color: var(--foreground);
+    font-weight: 500;
+  }
+
+  .sidebar-content a:not([aria-current="page"]):hover > span {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+
+  .sidebar-content ul ul li {
+    margin-inline-start: 0;
+    border-inline-start: 0;
+    padding-inline-start: 0;
+    margin-bottom: 1px;
+  }
+
+  .right-sidebar-container {
+    max-width: 20rem;
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  .content-panel {
+    border-top: 0;
+  }
+
+  .content-panel:first-child {
+    padding-bottom: 0;
+    padding-top: calc(var(--spacing) * 5);
+  }
+
+  .content-panel:last-child {
+    padding-bottom: 0;
+  }
+
+  @media (min-width: 50rem) {
+    .content-panel:first-child {
+      padding-top: calc(var(--spacing) * 12);
+    }
+  }
+
+  .right-sidebar-panel h2 {
+    color: var(--muted-foreground);
+    font-size: 0.875rem;
+    font-weight: 500;
+    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;
+  }
+
+  .expressive-code .frame pre {
+    border: 1px solid var(--border);
+  }
+
+  .expressive-code .frame.is-terminal .header {
+    padding: 0;
+  }
+
+  .expressive-code .copy {
+    top: calc(var(--spacing) * 2);
+  }
+
+  .expressive-code .copy button {
+    opacity: 1;
+  }
+
+  .expressive-code .frame.is-terminal .header::before {
+    width: 1.125rem;
+    height: 1.125rem;
+    background-color: var(--muted-foreground);
+    opacity: 1;
+  }
+
+  .expressive-code .frame.is-terminal .header .title::after {
+    content: "Terminal";
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    margin-left: 2rem;
+    font-family: var(--font-sans);
+  }
+
+  .expressive-code .copy button div {
+    background: var(--secondary);
+  }
+
+  ul.top-level li details ul li:last-child {
+    margin-bottom: 1.25rem;
+  }
+
+  ul.top-level summary {
+    margin-bottom: 0.25rem;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper {
+    background-color: var(--code-background);
+    border: 1px solid var(--border);
+    border-bottom: 0;
+
+    padding-top: 0;
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+    font-size: 0.75rem;
+  }
+
+  .expressive-code pre {
+    border-radius: var(--radius-lg);
+  }
+
+  .expressive-code .frame.has-title pre {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  .expressive-code .frame.is-terminal pre {
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper ul {
+    padding-block: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+    gap: 0;
+  }
+
+  .tab {
+    margin-bottom: 0;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper a {
+    border-bottom: 0;
+    padding-block: calc(var(--spacing) * 0.5);
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper a[aria-selected="true"] {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    border-bottom: 0;
+    border-radius: calc(var(--radius) - 4px);
+  }
+
+  starlight-tabs[data-sync-key="pkg"] .tablist-wrapper ~ div[role="tabpanel"] {
+    margin-top: 0;
+  }
+
+  starlight-tabs[data-sync-key="pkg"] figcaption.header .title {
+    border-radius: 0;
+    border-top: 0;
+  }
+
+  .tablist-wrapper > ul {
+    border: 0;
+    gap: 1.25rem;
+  }
+
+  .tablist-wrapper > ul a {
+    padding-inline: 0;
+  }
+
+  .tablist-wrapper > ul a[aria-selected="true"] {
+    font-weight: 500;
+  }
+
+  .sl-heading-wrapper.level-h2:not(:first-child) {
+    margin-top: 4rem;
+  }
+
+  .sl-heading-wrapper.level-h3:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  .sl-markdown-content a:not(:where(.not-content *)) {
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+
+  button[data-open-modal] {
+    border-color: var(--border);
+    color: var(--foreground);
+    box-shadow: var(--shadow-xs);
+    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);
+  }
+
+  starlight-tabs starlight-tabs {
+    margin-top: 0;
+  }
+
+  /* .expressive-code .header {
+    background-color: var(--background);
+    border: 1px solid var(--border);
+  } */
+
+  .expressive-code .title {
+    background-color: var(--background);
+    color: var(--muted-foreground);
+    border-color: var(--border);
+    border: 1px solid var(--border);
+
+    width: 100%;
+    border-bottom: 0;
+    font-size: 0.75rem;
+    padding-block: 0.75rem;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  }
+
+  .sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+    font-weight: 500;
+  }
+
+  .sl-bejamas-component-preview {
+    min-height: 450px;
+    padding: 1rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--background);
+  }
+
+  .sl-markdown-content ul:not(:where(.not-content *)) {
+    list-style: disc;
+    padding-left: 1rem;
+  }
+
+  .sl-markdown-content ol:not(:where(.not-content *)) {
+    list-style: decimal;
+    padding-left: 1rem;
+  }
+
+  .tablist-wrapper {
+    overflow-x: inherit;
+  }
+
+  .tablist-wrapper a[role="tab"] {
+    border-bottom: 0;
+    padding: 0;
+    display: inline-block;
+  }
+
+  .sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+    min-width: 10rem;
+    padding-inline: 1rem;
+    border-color: var(--border);
+  }
+
+  .sl-markdown-content
+    :is(tr):last-child
+    :is(th, td):not(:where(.not-content *)) {
+    border-bottom: 0;
+  }
+
+  .sl-markdown-content table:not(:where(.not-content *)) {
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius) - 2px);
+  }
+
+  .main-frame {
+    min-height: 100svh;
+  }
+
+  @media (min-width: 50em) {
+    .main-frame {
+      padding-inline: calc(var(--spacing) * 5);
+    }
+  }
+
+  @media (min-width: 64em) {
+    .main-frame {
+      padding-inline-end: calc(var(--spacing) * 6);
+      padding-inline-start: var(--sl-content-inline-start);
+    }
+  }
+
+  .sidebar-content::before {
+    content: "";
+    --blur: 4px;
+    --stop: 50%;
+    --height: 40px;
+    position: sticky;
+    pointer-events: none;
+    width: 100%;
+    height: var(--height);
+    user-select: none;
+    -webkit-user-select: none;
+    left: 0;
+    -webkit-backdrop-filter: blur(var(--blur));
+    backdrop-filter: blur(var(--blur));
+
+    background: linear-gradient(to top, transparent, var(--background));
+    mask-image: linear-gradient(
+      to bottom,
+      var(--background) var(--stop),
+      transparent
+    );
+    top: 0;
+  }
+
+  .sidebar-content::after {
+    content: "";
+    --blur: 4px;
+    --stop: 50%;
+    --height: 80px;
+    position: sticky;
+    pointer-events: none;
+    width: 100%;
+    height: var(--height);
+    user-select: none;
+    -webkit-user-select: none;
+    left: 0;
+    -webkit-backdrop-filter: blur(var(--blur));
+    backdrop-filter: blur(var(--blur));
+
+    background: linear-gradient(to bottom, transparent, var(--background));
+    mask-image: linear-gradient(
+      to top,
+      var(--background) var(--stop),
+      transparent
+    );
+    bottom: 0;
+  }
+
+  starlight-file-tree {
+    --x-space: calc(var(--spacing) * 5);
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+  }
+
+  starlight-file-tree ul {
+    border-inline-start-color: var(--border);
+  }
+
+  starlight-file-tree .comment {
+    color: var(--muted-foreground);
+    max-width: calc(var(--spacing) * 150);
+  }
+
+  starlight-menu-button button {
+    box-shadow: none;
+    padding: 0;
+    width: calc(var(--spacing) * 6);
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  starlight-menu-button button svg {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    font-size: calc(var(--spacing) * 8);
+  }
+
+  #starlight__on-this-page--mobile {
+    /* border-top: 1px solid var(--border); */
+    border-bottom: 0;
+  }
+
+  #starlight__on-this-page--mobile .toggle {
+    border: 0;
+    color: var(--muted-foreground);
+    padding-left: 0;
+    background-color: var(--background);
+  }
+
+  .sl-container {
+    margin-inline: auto;
+  }
+
+  @media (min-width: 64rem) {
+    .sl-container {
+      margin-inline: var(--sl-content-margin-inline, auto);
+    }
+  }
+
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+}