mostly style changes + auto update version in docs

site/astro.config.mjs

@@ -83,7 +83,20 @@ export default defineConfig({
   markdown: { rehypePlugins: [rehypeRepoLinks, rehypeLinkNames] },
   integrations: [
     starlight({
-      customCss: ["./src/styles/custom.css"],
+      components: {
+        SiteTitle: "./src/components/SiteTitle.astro",
+        ThemeSelect: "./src/components/ThemeSelect.astro",
+        SocialIcons: "./src/components/SocialIcons.astro",
+      },
+      customCss: [
+        "@fontsource/dm-sans/400.css",
+        "@fontsource/dm-sans/500.css",
+        "@fontsource/dm-sans/600.css",
+        "@fontsource/dm-sans/700.css",
+        "@fontsource/jetbrains-mono/400.css",
+        "@fontsource/jetbrains-mono/600.css",
+        "./src/styles/custom.css",
+      ],
       plugins: [starlightLinksValidator()],
       favicon: "/favicon.svg",
       title: "LemmaScript",

site/package.json

@@ -12,6 +12,8 @@
   },
   "dependencies": {
     "@astrojs/starlight": "^0.39.2",
+    "@fontsource/dm-sans": "^5.2.8",
+    "@fontsource/jetbrains-mono": "^5.2.8",
     "astro": "^6.3.7",
     "sharp": "^0.34.5"
   },

site/src/components/SiteTitle.astro

@@ -0,0 +1,31 @@
+---
+// Starlight SiteTitle override: brand wordmark split like the landing site —
+// "Lemma" in text color, "Script" in the brand green.
+---
+
+<a href="/" class="ls-site-title">Lemma<span class="ls-script">Script</span><span class="ls-docs-tag">DOCS</span></a>
+
+<style>
+  .ls-site-title {
+    font-family: var(--sl-font);
+    font-weight: 700;
+    font-size: var(--sl-text-h4);
+    color: var(--sl-color-white);
+    text-decoration: none;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+  }
+  .ls-script {
+    color: var(--ls-brand-accent);
+  }
+  .ls-docs-tag {
+    font-family: var(--sl-font-mono);
+    font-weight: 600;
+    font-size: 0.62em;
+    letter-spacing: 0.12em;
+    color: var(--sl-color-gray-3);
+    margin-left: 0.6em;
+    padding-top: 0.15em; /* optically align with the wordmark baseline */
+  }
+</style>

site/src/components/SocialIcons.astro

@@ -0,0 +1,84 @@
+---
+// Starlight SocialIcons override: the landing site's GitHub pill — logo,
+// label, and best-effort star count fetched at build time.
+let stars: number | null = null
+try {
+  const res = await fetch("https://api.github.com/repos/midspiral/LemmaScript", {
+    headers: { Accept: "application/vnd.github+json" },
+  })
+  if (res.ok) {
+    const data = await res.json()
+    stars = typeof data.stargazers_count === "number" ? data.stargazers_count : null
+  }
+} catch {
+  stars = null
+}
+const starLabel =
+  stars == null ? null : stars >= 1000 ? (stars / 1000).toFixed(1).replace(/\.0$/, "") + "k" : String(stars)
+---
+
+<a href="https://github.com/midspiral/LemmaScript" target="_blank" rel="noopener" class="ls-gh" aria-label="LemmaScript on GitHub">
+  <svg class="ls-gh-mark" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z"/></svg>
+  <span class="ls-gh-label">GitHub</span>
+  {starLabel && (
+    <span class="ls-gh-stars">
+      <svg class="ls-gh-star" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 12.027 3.668 14.5l.96-4.92L1 6.236l4.96-.59L8 1l2.04 4.646 4.96.59-3.628 3.344.96 4.92z"/></svg>
+      {starLabel}
+    </span>
+  )}
+</a>
+
+<a href="https://www.npmjs.com/package/lemmascript" target="_blank" rel="noopener" class="ls-gh ls-npm" aria-label="lemmascript on npm">
+  <svg class="ls-npm-mark" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></svg>
+  <span class="ls-gh-label">npm</span>
+</a>
+
+<style>
+  .ls-gh {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-size: var(--sl-text-sm);
+    color: var(--sl-color-gray-2);
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.375rem;
+    padding: 5px 10px;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: color 0.15s ease, border-color 0.15s ease;
+  }
+  .ls-gh:hover {
+    color: var(--sl-color-white);
+    border-color: var(--sl-color-gray-4);
+  }
+  .ls-gh-mark {
+    width: 15px;
+    height: 15px;
+  }
+  .ls-gh-label {
+    line-height: 1;
+  }
+  .ls-gh-stars {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding-left: 8px;
+    margin-left: 1px;
+    border-left: 1px solid var(--sl-color-gray-5);
+    font-family: var(--sl-font-mono);
+    font-size: var(--sl-text-xs);
+    line-height: 1;
+  }
+  .ls-gh-star {
+    width: 12px;
+    height: 12px;
+    color: var(--ls-star);
+  }
+  .ls-npm {
+    margin-left: 0.5rem;
+  }
+  .ls-npm-mark {
+    width: 15px;
+    height: 15px;
+  }
+</style>

site/src/components/ThemeSelect.astro

@@ -0,0 +1,90 @@
+---
+// Starlight ThemeSelect override:
+//  - replaces the theme dropdown with the toolchain version, read mechanically
+//    from the repo root package.json at build time (cannot drift)
+//  - moves theme switching to a floating bottom-right toggle, same icons and
+//    behavior as the landing site's ThemeToggle
+import { readFileSync } from "node:fs"
+import { resolve } from "node:path"
+
+// Builds always run from site/ (npm scripts), so the toolchain package.json is
+// one level up. cwd-anchored because import.meta.url moves after bundling.
+const pkg = JSON.parse(readFileSync(resolve(process.cwd(), "..", "package.json"), "utf8"))
+if (!pkg.version) throw new Error("ThemeSelect: could not read toolchain version from ../package.json")
+const version = `v${pkg.version}`
+---
+
+<span class="ls-version" title="LemmaScript toolchain version">{version}</span>
+
+<button class="ls-theme-toggle" aria-label="Toggle light/dark theme">
+  <svg class="ls-icon ls-icon-moon" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M13.5 9.7A6 6 0 0 1 6.3 2.5a6.4 6.4 0 1 0 7.2 7.2Z"/></svg>
+  <svg class="ls-icon ls-icon-sun" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="3.2" fill="currentColor"/><g stroke="currentColor" stroke-width="1.3" stroke-linecap="round"><path d="M8 1.2v1.8M8 13v1.8M14.8 8h-1.8M2.8 8H1M12.7 3.3l-1.3 1.3M4.6 11.1l-1.3 1.3M12.7 12.7l-1.3-1.3M4.6 4.9 3.3 3.6"/></g></svg>
+</button>
+
+<script is:inline>
+  if (!window.__lsThemeToggleInit) {
+    window.__lsThemeToggleInit = true
+    document.addEventListener("click", (e) => {
+      const btn = e.target instanceof Element && e.target.closest(".ls-theme-toggle")
+      if (!btn) return
+      const el = document.documentElement
+      const next = el.dataset.theme === "dark" ? "light" : "dark"
+      el.dataset.theme = next
+      try {
+        localStorage.setItem("starlight-theme", next)
+      } catch {}
+    })
+  }
+</script>
+
+<style>
+  .ls-version {
+    font-family: var(--sl-font-mono);
+    font-size: var(--sl-text-xs);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    color: var(--sl-color-gray-3);
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.375rem;
+    padding: 0.2rem 0.5rem;
+    white-space: nowrap;
+  }
+
+  .ls-theme-toggle {
+    position: fixed;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    z-index: 60;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 0.5rem;
+    border: 1px solid var(--sl-color-gray-5);
+    background: var(--sl-color-black);
+    color: var(--sl-color-gray-2);
+    cursor: pointer;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+    transition: color 0.15s ease, border-color 0.15s ease;
+  }
+  .ls-theme-toggle:hover {
+    color: var(--ls-brand-accent);
+    border-color: var(--ls-brand-accent);
+  }
+  .ls-icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+  }
+  /* Dark (default): show sun. Light: show moon — same as the landing site. */
+  .ls-icon-moon {
+    display: none;
+  }
+  :global([data-theme="light"]) .ls-icon-sun {
+    display: none;
+  }
+  :global([data-theme="light"]) .ls-icon-moon {
+    display: block;
+  }
+</style>

site/src/styles/custom.css

@@ -1,3 +1,58 @@
+/* ============================================================
+   LemmaScript brand theme — mirrors lemmascript-landing's tokens
+   (src/styles/tokens.css there). Twin-sync: if the landing accent
+   or grays change, update these to match.
+   ============================================================ */
+
+/* Fonts: same faces as the landing site */
+:root {
+  --sl-font: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --sl-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
+}
+
+/* Dark theme — landing dark: bg #0A0E14, text #E6EDF3, accent #2DD4A7 */
+:root {
+  --ls-brand-accent: #2dd4a7; /* landing --accent (dark) */
+  --ls-star: #f5c451; /* landing --state-pending (dark) */
+  --sl-color-accent-low: #0f3a2e;
+  --sl-color-accent: #1b8a6e;
+  --sl-color-accent-high: #2dd4a7;
+  --sl-color-white: #e6edf3;
+  --sl-color-gray-1: #d3dbe3;
+  --sl-color-gray-2: #b3bdc9;
+  --sl-color-gray-3: #8b98a7;
+  --sl-color-gray-4: #55606e;
+  --sl-color-gray-5: #2b3442;
+  --sl-color-gray-6: #141a23;
+  --sl-color-black: #0a0e14;
+}
+
+/* Light theme — landing light: bg #F6F7F9, text #10151C, accent #0D805D */
+:root[data-theme="light"] {
+  --ls-brand-accent: #0d805d; /* landing --accent (light) */
+  --ls-star: #8a6100; /* landing --state-pending (light) */
+  --sl-color-accent-low: #d2ede2;
+  --sl-color-accent: #0d805d;
+  --sl-color-accent-high: #0a5c43;
+  --sl-color-white: #10151c;
+  --sl-color-gray-1: #1e2632;
+  --sl-color-gray-2: #333e4e;
+  --sl-color-gray-3: #55606e;
+  --sl-color-gray-4: #8b98a7;
+  --sl-color-gray-5: #d5dae1;
+  --sl-color-gray-6: #eceef2;
+  --sl-color-gray-7: #f6f7f9;
+  --sl-color-black: #ffffff;
+}
+
+/* Landing-style touches */
+.site-title {
+  font-weight: 700;
+}
+.sidebar-content a[aria-current="page"] {
+  font-weight: 600;
+}
+
 /* Compact code blocks — no window chrome, no copy button, no language badge */
 .expressive-code .frame {
   box-shadow: none !important;