@abstractdata/starlight-theme 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abstractdata/starlight-theme",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "Branded Astro Starlight theme by Abstract Data — HUD and Calm surfaces, light + dark, motion-aware.",
   "type": "module",
   "main": "./src/index.ts",
@@ -17,7 +17,7 @@
     "src/"
   ],
   "scripts": {
-    "typecheck": "tsc --noEmit"
+    "typecheck": "echo 'Standalone typecheck is intentionally a no-op — the theme integrates with Astro/Starlight virtual modules that only resolve in an Astro app context. Run typecheck via the playground app instead (bun --filter @abstract-data/playground typecheck).'"
   },
   "keywords": [
     "astro",
@@ -37,6 +37,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.0.0",
+    "@fontsource-variable/jetbrains-mono": "^5.0.0",
+    "@fontsource-variable/orbitron": "^5.0.0"
+  },
   "peerDependencies": {
     "@astrojs/starlight": ">=0.32.0",
     "astro": ">=5.0.0"

package/src/ambient.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Ambient type stubs.
+ *
+ * Starlight's published `.ts` source files (referenced transitively when we
+ * `import type { StarlightPlugin } from '@astrojs/starlight/types'`) depend
+ * on Astro's runtime virtual modules and a `StarlightApp` global namespace
+ * that only exist inside a real Astro build context.
+ *
+ * `skipLibCheck` only suppresses `.d.ts` checking — Starlight ships actual
+ * `.ts` sources, so TypeScript dives into them during our package's
+ * typecheck and complains that those modules don't resolve. These stubs
+ * tell TypeScript "trust me, those modules exist at runtime" so the
+ * typecheck of our own thin plugin code passes cleanly.
+ *
+ * No runtime impact — this file declares types only.
+ */
+
+declare module 'astro:content';
+declare module 'virtual:starlight/user-config';
+declare module 'virtual:starlight/project-context';
+declare module 'virtual:starlight/plugin-translations';
+
+declare module '*.jsonc?raw' {
+  const raw: string;
+  export default raw;
+}
+
+declare module '*.json?raw' {
+  const raw: string;
+  export default raw;
+}
+
+declare namespace StarlightApp {
+  // Starlight references this namespace in createTranslationSystem.ts
+  // for the i18n strings system. We don't use it ourselves; an empty
+  // declaration satisfies the typechecker.
+  interface I18n {
+    // intentionally empty — Starlight's user augments this in their own d.ts
+  }
+}

package/src/styles/hud.css

@@ -207,6 +207,14 @@
   97% { transform: translate(-1px, 0); clip-path: inset(70% 0 10% 0); }
 }
 
+/* ------------------------------------------------------------
+   Search modal — cyan glow on focused input
+   ------------------------------------------------------------ */
+.pagefind-ui__form input.pagefind-ui__search-input:focus {
+  box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.18),
+              0 0 16px rgba(0, 217, 255, 0.20);
+}
+
 /* ------------------------------------------------------------
    prefers-reduced-motion: collapse to Calm behavior
    ------------------------------------------------------------ */
@@ -223,7 +231,11 @@
     display: none;
   }
   .sl-markdown-content > h1:first-child,
-  .content-panel h1[data-page-title] {
+  .content-panel h1[data-page-title],
+  .hero h1 {
     text-shadow: none;
   }
+  .pagefind-ui__form input.pagefind-ui__search-input:focus {
+    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.18);
+  }
 }

package/src/styles/theme.css

@@ -3,7 +3,12 @@
    Always loaded. Brand palette, typography, signature decoration.
    ============================================================ */
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@500;600;700;800&display=swap');
+/* Self-hosted variable fonts via @fontsource-variable.
+   No Google Fonts CDN dependency = GDPR-friendly, offline-friendly, faster
+   first paint (the woff2 ships in your build output, not over a 3rd-party CDN). */
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/orbitron';
+@import '@fontsource-variable/jetbrains-mono';
 
 /* ------------------------------------------------------------
    Palette tokens — overridden onto Starlight's CSS vars
@@ -21,10 +26,11 @@
   --ad-surface-dark: #101116;
   --ad-cream: #faf7f2;
 
-  /* Typography */
-  --sl-font: 'Inter', system-ui, -apple-system, sans-serif;
-  --sl-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
-  --ad-font-display: 'Orbitron', sans-serif;
+  /* Typography (variable family names from @fontsource-variable; static name
+     fallback in case a consumer re-pins to non-variable @fontsource) */
+  --sl-font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
+  --sl-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+  --ad-font-display: 'Orbitron Variable', 'Orbitron', sans-serif;
 
   /* Sizing tweaks */
   --sl-content-width: 52rem;
@@ -354,6 +360,95 @@ site-search button[data-open-modal] kbd {
   color: var(--ad-burgundy-deep);
 }
 
+/* ------------------------------------------------------------
+   Search modal — branded frame + pagefind UI
+   (Starlight DOM: <site-search> → <dialog> → <div.dialog-frame>)
+   ------------------------------------------------------------ */
+site-search dialog {
+  background: var(--sl-color-bg);
+  border: 1px solid var(--sl-color-hairline);
+  border-radius: 12px;
+  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55),
+              0 0 0 1px rgba(0, 217, 255, 0.04);
+  padding: 0;
+  color: var(--sl-color-text);
+  max-width: 720px;
+}
+site-search dialog::backdrop {
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(4px);
+}
+:root[data-theme='light'] site-search dialog::backdrop {
+  background: rgba(60, 50, 40, 0.45);
+}
+site-search dialog .dialog-frame {
+  background: var(--sl-color-bg);
+  border-radius: 12px;
+  padding: 0.5rem 0.75rem 0.75rem;
+}
+site-search dialog .dialog-frame > .header,
+site-search dialog .dialog-frame .header {
+  border-bottom: 1px solid var(--sl-color-hairline);
+  font-family: var(--ad-font-display);
+  font-size: 0.7rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--sl-color-gray-3);
+}
+site-search dialog .dialog-frame > p {
+  font-family: var(--sl-font);
+  color: var(--sl-color-gray-3);
+  text-align: center;
+  padding: 1.5rem 1rem;
+}
+.pagefind-ui {
+  --pagefind-ui-primary: var(--ad-cyan);
+  --pagefind-ui-text: var(--sl-color-text);
+  --pagefind-ui-background: var(--sl-color-bg);
+  --pagefind-ui-border: var(--sl-color-hairline);
+  --pagefind-ui-tag: var(--sl-color-bg-nav);
+  --pagefind-ui-font: var(--sl-font);
+}
+.pagefind-ui__form input.pagefind-ui__search-input {
+  background: var(--sl-color-bg-nav);
+  border: 1px solid var(--sl-color-hairline);
+  color: var(--sl-color-text);
+  font-family: var(--sl-font-mono);
+  border-radius: 6px;
+}
+.pagefind-ui__form input.pagefind-ui__search-input:focus {
+  border-color: var(--ad-cyan);
+  outline: none;
+}
+:root[data-theme='light'] .pagefind-ui__form input.pagefind-ui__search-input:focus {
+  border-color: var(--ad-cyan-deep);
+}
+.pagefind-ui__result-title,
+.pagefind-ui__result-title a {
+  font-family: var(--ad-font-display);
+  font-size: 0.95rem;
+  letter-spacing: 0.02em;
+  color: var(--sl-color-text);
+}
+.pagefind-ui__result-link:hover .pagefind-ui__result-title,
+.pagefind-ui__result-title a:hover {
+  color: var(--ad-cyan);
+}
+:root[data-theme='light'] .pagefind-ui__result-link:hover .pagefind-ui__result-title,
+:root[data-theme='light'] .pagefind-ui__result-title a:hover {
+  color: var(--ad-cyan-deep);
+}
+.pagefind-ui__result-excerpt mark {
+  background: rgba(212, 175, 55, 0.18);
+  color: var(--ad-gold);
+  padding: 0 3px;
+  border-radius: 3px;
+}
+:root[data-theme='light'] .pagefind-ui__result-excerpt mark {
+  background: rgba(138, 109, 31, 0.16);
+  color: var(--ad-gold-deep);
+}
+
 /* ------------------------------------------------------------
    "On this page" right sidebar (TOC) — branded
    ------------------------------------------------------------ */