executable-stories-demo 0.1.0

package/templates/astro-demo-starlight/src/styles/themes/playful.css

@@ -0,0 +1,263 @@
+/*
+ * playful — risograph poster.
+ * Bricolage Grotesque display (variable optical size) + Figtree body.
+ * Soft butter bg, persimmon + inky-blue spot colours, hard-edged strokes.
+ * Forced light.
+ */
+
+@import "@fontsource-variable/bricolage-grotesque";
+@import "@fontsource/figtree/400.css";
+@import "@fontsource/figtree/500.css";
+@import "@fontsource/figtree/600.css";
+@import "@fontsource/figtree/700.css";
+
+:root,
+:root[data-theme="dark"] {
+  --demo-font-display: "Bricolage Grotesque", system-ui, sans-serif;
+  --demo-font-body: "Figtree", system-ui, sans-serif;
+  --demo-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+
+  --demo-bg: oklch(0.96 0.045 88);
+  --demo-surface: oklch(0.93 0.055 88);
+  --demo-ink: oklch(0.22 0.04 20);
+  --demo-ink-muted: oklch(0.46 0.05 25);
+  --demo-border: oklch(0.22 0.04 20);
+  --demo-accent: oklch(0.64 0.22 30);
+  --demo-accent-ink: oklch(0.98 0.02 88);
+  --demo-accent-2: oklch(0.40 0.18 265);
+  --demo-spot: oklch(0.82 0.18 90);
+
+  --demo-pass: oklch(0.58 0.17 150);
+  --demo-fail: oklch(0.58 0.22 25);
+  --demo-skip: oklch(0.60 0.15 85);
+  --demo-pending: oklch(0.55 0.06 30);
+
+  --demo-radius-sm: 6px;
+  --demo-radius-md: 14px;
+  --demo-radius-lg: 22px;
+
+  --sl-font: var(--demo-font-body);
+  --sl-font-mono: var(--demo-font-mono);
+
+  --sl-color-accent-low: oklch(0.92 0.08 30);
+  --sl-color-accent: var(--demo-accent);
+  --sl-color-accent-high: oklch(0.32 0.14 30);
+
+  --sl-color-bg: var(--demo-bg);
+  --sl-color-bg-nav: var(--demo-bg);
+  --sl-color-bg-sidebar: var(--demo-surface);
+  --sl-color-text: var(--demo-ink);
+  --sl-color-text-accent: var(--demo-accent);
+
+  color-scheme: light;
+}
+
+.demo-hero {
+  position: relative;
+  max-width: 56ch;
+}
+
+/* A decorative inky-blue blob behind the hero title */
+.demo-hero::before {
+  content: "";
+  position: absolute;
+  top: -0.5rem;
+  left: -1.5rem;
+  width: 8rem;
+  height: 8rem;
+  background: var(--demo-accent-2);
+  border-radius: 50%;
+  z-index: -1;
+  transform: rotate(-5deg);
+  opacity: 0.9;
+  mix-blend-mode: multiply;
+}
+
+.demo-hero__eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--demo-font-body);
+  font-weight: 700;
+  color: var(--demo-accent);
+  letter-spacing: 0.12em;
+}
+
+.demo-hero__eyebrow::before {
+  content: "★";
+  color: var(--demo-spot);
+  font-size: 1.2em;
+  -webkit-text-stroke: 1px var(--demo-ink);
+}
+
+.demo-hero__title {
+  font-family: var(--demo-font-display);
+  font-variation-settings: "opsz" 96, "wght" 800;
+  font-size: clamp(3rem, 7vw, 6rem);
+  letter-spacing: -0.03em;
+  line-height: 0.9;
+  color: var(--demo-ink);
+}
+
+.demo-hero__tagline {
+  font-family: var(--demo-font-body);
+  font-weight: 500;
+  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
+  line-height: 1.45;
+  color: var(--demo-ink);
+}
+
+/* Chunky CTA with a hard shadow — poster button */
+.demo-hero__cta {
+  background: var(--demo-accent);
+  color: var(--demo-accent-ink);
+  border: 2px solid var(--demo-ink);
+  border-radius: var(--demo-radius-lg);
+  font-family: var(--demo-font-display);
+  font-variation-settings: "opsz" 24, "wght" 700;
+  font-size: 1rem;
+  padding: var(--demo-space-4) var(--demo-space-8);
+  box-shadow: 4px 4px 0 var(--demo-ink);
+  transform: rotate(-1deg);
+  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
+}
+
+.demo-hero__cta:hover {
+  transform: rotate(-1deg) translate(-2px, -2px);
+  box-shadow: 6px 6px 0 var(--demo-ink);
+}
+
+/* Stat cards — chunky bordered blocks in alternating colours */
+.demo-stat {
+  background: var(--demo-surface);
+  border: 2px solid var(--demo-ink);
+  border-radius: var(--demo-radius-md);
+  padding: var(--demo-space-4) var(--demo-space-6);
+  box-shadow: 3px 3px 0 var(--demo-ink);
+}
+
+.demo-stat__value {
+  font-family: var(--demo-font-display);
+  font-variation-settings: "opsz" 48, "wght" 700;
+  font-size: clamp(2.25rem, 4vw, 3rem);
+  color: var(--demo-ink);
+  letter-spacing: -0.03em;
+}
+
+.demo-stat__label {
+  font-family: var(--demo-font-body);
+  font-weight: 700;
+  color: var(--demo-ink-muted);
+}
+
+.demo-stat[data-tone="pass"]  { background: color-mix(in oklch, var(--demo-pass) 24%, var(--demo-surface)); }
+.demo-stat[data-tone="fail"]  { background: color-mix(in oklch, var(--demo-accent) 26%, var(--demo-surface)); }
+.demo-stat[data-tone="skip"]  { background: color-mix(in oklch, var(--demo-spot) 35%, var(--demo-surface)); }
+
+/* Section heading gets a playful marker */
+.demo-section-heading {
+  font-family: var(--demo-font-display);
+  font-variation-settings: "opsz" 48, "wght" 700;
+  position: relative;
+  display: inline-block;
+  padding-right: var(--demo-space-4);
+}
+
+.demo-section-heading::after {
+  content: "";
+  display: block;
+  width: 3rem;
+  height: 0.5rem;
+  background: var(--demo-spot);
+  border-radius: var(--demo-radius-pill);
+  margin-top: 0.5rem;
+}
+
+/* Story rows as cards with coloured numbers */
+.demo-stories {
+  border-top: 0;
+  gap: var(--demo-space-3);
+}
+
+.demo-story {
+  background: var(--demo-surface);
+  border: 2px solid var(--demo-ink);
+  border-radius: var(--demo-radius-md);
+  grid-template-columns: 3rem 1fr auto;
+  padding: var(--demo-space-4) var(--demo-space-6);
+  box-shadow: 3px 3px 0 var(--demo-ink);
+  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
+}
+
+.demo-story:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 5px 5px 0 var(--demo-ink);
+  background: var(--demo-surface);
+}
+
+.demo-story__index {
+  font-family: var(--demo-font-display);
+  font-variation-settings: "opsz" 24, "wght" 700;
+  font-size: 1.15rem;
+  color: var(--demo-accent);
+}
+
+.demo-story__title {
+  font-family: var(--demo-font-body);
+  font-weight: 600;
+  color: var(--demo-ink);
+}
+
+.demo-story__status {
+  font-family: var(--demo-font-body);
+  font-weight: 700;
+}
+
+.demo-story[data-status="passed"] .demo-story__status { color: var(--demo-pass); }
+.demo-story[data-status="failed"] .demo-story__status { color: var(--demo-accent); }
+.demo-story[data-status="skipped"] .demo-story__status { color: var(--demo-ink-muted); }
+
+.demo-empty {
+  background: var(--demo-surface);
+  border: 2px dashed var(--demo-ink);
+  border-radius: var(--demo-radius-lg);
+  box-shadow: 4px 4px 0 var(--demo-ink);
+}
+
+/* ---- Story pages: poster-style steps --------------------------------- */
+
+.sl-markdown-content p > strong:first-child {
+  font-family: var(--demo-font-display);
+  font-variation-settings: "opsz" 72, "wght" 700;
+  font-size: 1.4em;
+  color: var(--demo-accent);
+  letter-spacing: -0.02em;
+  transform: rotate(-1deg);
+  display: inline-block;
+  transform-origin: left center;
+  margin-right: 0.3ch;
+}
+
+/* Subtler colour rotation across consecutive steps; geometric rotation kept
+   tight so it doesn't break baseline alignment at narrow viewports. */
+.sl-markdown-content p:has(> strong:first-child):nth-of-type(3n+2) > strong:first-child {
+  color: var(--demo-accent-2);
+  transform: rotate(0deg);
+}
+
+.sl-markdown-content p:has(> strong:first-child):nth-of-type(3n+3) > strong:first-child {
+  color: var(--demo-ink);
+  transform: rotate(0.5deg);
+}
+
+.sl-markdown-content h3 {
+  font-family: var(--demo-font-display);
+  font-variation-settings: "opsz" 96, "wght" 700;
+  letter-spacing: -0.025em;
+  color: var(--demo-ink);
+}
+
+/* Forced-mode theme: hide the (non-functional) theme toggle. */
+starlight-theme-select {
+  display: none;
+}

package/templates/astro-demo-starlight/src/styles/themes/terminal.css

@@ -0,0 +1,218 @@
+/*
+ * terminal — phosphor CRT.
+ * VT323 display, JetBrains Mono body. Near-black bg with green tint,
+ * phosphor-green ink, amber highlights. Forced dark.
+ */
+
+@import "@fontsource/vt323/400.css";
+@import "@fontsource/jetbrains-mono/400.css";
+@import "@fontsource/jetbrains-mono/500.css";
+@import "@fontsource/jetbrains-mono/700.css";
+
+:root,
+:root[data-theme="dark"] {
+  --demo-font-display: "VT323", "JetBrains Mono", monospace;
+  --demo-font-body: "JetBrains Mono", ui-monospace, monospace;
+  --demo-font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  --demo-bg: oklch(0.15 0.02 150);
+  --demo-surface: oklch(0.19 0.025 150);
+  --demo-ink: oklch(0.84 0.17 140);
+  /* Bumped from 0.56 to 0.66 — original tone failed WCAG AA (~3.8:1) on the
+     phosphor-tinted background; 0.66 measures ~4.7:1 while keeping the
+     muted-vs-primary distinction visible. */
+  --demo-ink-muted: oklch(0.66 0.13 140);
+  --demo-border: oklch(0.32 0.06 150);
+  --demo-accent: oklch(0.82 0.18 90);
+  --demo-accent-ink: oklch(0.15 0.02 150);
+
+  --demo-pass: oklch(0.84 0.17 140);
+  --demo-fail: oklch(0.70 0.21 25);
+  --demo-skip: oklch(0.78 0.15 90);
+  --demo-pending: oklch(0.62 0.05 150);
+
+  --sl-font: var(--demo-font-body);
+  --sl-font-mono: var(--demo-font-mono);
+
+  --sl-color-accent-low: oklch(0.28 0.09 140);
+  --sl-color-accent: var(--demo-accent);
+  --sl-color-accent-high: oklch(0.92 0.16 95);
+
+  --sl-color-bg: var(--demo-bg);
+  --sl-color-bg-nav: var(--demo-bg);
+  --sl-color-bg-sidebar: var(--demo-surface);
+  --sl-color-text: var(--demo-ink);
+  --sl-color-text-accent: var(--demo-accent);
+
+  color-scheme: dark;
+}
+
+body {
+  background:
+    radial-gradient(ellipse at top, oklch(0.20 0.03 150) 0%, var(--demo-bg) 70%),
+    var(--demo-bg);
+  background-attachment: fixed;
+}
+
+/* Big, soft phosphor headings — VT323 reads large */
+.demo-hero__title,
+.demo-section-heading,
+.sl-markdown-content h1,
+.sl-markdown-content h2 {
+  font-family: var(--demo-font-display);
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  text-shadow: 0 0 12px color-mix(in oklch, var(--demo-ink) 40%, transparent);
+}
+
+.demo-hero__title {
+  font-size: clamp(3rem, 7vw, 6rem);
+  line-height: 1;
+}
+
+/* A blinking cursor cap on the hero title */
+.demo-hero__title::after {
+  content: "_";
+  display: inline-block;
+  margin-left: 0.25ch;
+  color: var(--demo-accent);
+  animation: demo-blink 1s steps(1) infinite;
+}
+
+@keyframes demo-blink {
+  50% { opacity: 0; }
+}
+
+.demo-hero__eyebrow::before {
+  content: "> ";
+  color: var(--demo-accent);
+}
+
+.demo-hero__eyebrow {
+  font-family: var(--demo-font-mono);
+  color: var(--demo-ink-muted);
+  letter-spacing: 0.1em;
+  text-transform: none;
+}
+
+/* CTA as a terminal button: bracketed, no rounding */
+.demo-hero__cta {
+  border-radius: 0;
+  background: transparent;
+  color: var(--demo-accent);
+  border: 1px solid var(--demo-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-family: var(--demo-font-mono);
+}
+
+.demo-hero__cta::before { content: "["; }
+.demo-hero__cta::after { content: "]"; }
+
+.demo-hero__cta:hover {
+  background: var(--demo-accent);
+  color: var(--demo-accent-ink);
+  transform: none;
+}
+
+/* Stats look like a system report */
+.demo-stat {
+  background: transparent;
+  border: 1px dashed var(--demo-border);
+  border-radius: 0;
+}
+
+.demo-stat__value {
+  font-family: var(--demo-font-display);
+  font-weight: 400;
+  font-size: clamp(2.5rem, 4vw, 3.5rem);
+  line-height: 1;
+}
+
+.demo-stat__label::before {
+  content: "// ";
+  color: var(--demo-accent);
+}
+
+/* Story list feels like ls -la output */
+.demo-stories {
+  border-top: 1px dashed var(--demo-border);
+}
+
+.demo-story {
+  border-bottom: 1px dashed var(--demo-border);
+  grid-template-columns: 3.5rem 1fr auto;
+  font-family: var(--demo-font-mono);
+}
+
+.demo-story__title {
+  font-weight: 400;
+  font-size: 1rem;
+}
+
+.demo-story__title::before {
+  content: "./";
+  color: var(--demo-ink-muted);
+  margin-right: 0.25ch;
+}
+
+.demo-story:hover {
+  background: var(--demo-surface);
+  color: var(--demo-accent);
+}
+
+.demo-story:hover .demo-story__title {
+  color: var(--demo-accent);
+}
+
+.demo-empty {
+  border-style: dashed;
+  font-family: var(--demo-font-mono);
+}
+
+.demo-empty code::before { content: "$ "; color: var(--demo-accent); }
+
+/* ---- Story pages: command-line steps --------------------------------- */
+
+.sl-markdown-content p:has(> strong:first-child)::before {
+  content: ">";
+  color: var(--demo-accent);
+  font-family: var(--demo-font-mono);
+  font-weight: 700;
+  flex: 0 0 auto;
+  margin-right: 0.2ch;
+}
+
+.sl-markdown-content p > strong:first-child {
+  font-family: var(--demo-font-mono);
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--demo-accent);
+  letter-spacing: 0.08em;
+}
+
+.sl-markdown-content h3 {
+  font-family: var(--demo-font-display);
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  text-shadow: 0 0 10px color-mix(in oklch, var(--demo-ink) 35%, transparent);
+}
+
+.sl-markdown-content > h2:first-of-type::before {
+  content: "// ";
+  color: var(--demo-accent);
+}
+
+/* Forced-mode theme: hide the (non-functional) theme toggle. */
+starlight-theme-select {
+  display: none;
+}
+
+/* Tone-coloured stat values — phosphor green for pass, amber for skip, red for fail. */
+.demo-stat[data-tone="pass"] .demo-stat__value { color: var(--demo-pass); }
+.demo-stat[data-tone="fail"] .demo-stat__value { color: var(--demo-fail); }
+.demo-stat[data-tone="skip"] .demo-stat__value { color: var(--demo-skip); }
+.demo-stat[data-tone="pending"] .demo-stat__value { color: var(--demo-pending); }
+.demo-stat[data-tone="pass"] { border-color: color-mix(in oklch, var(--demo-pass) 50%, var(--demo-border)); }
+.demo-stat[data-tone="fail"] { border-color: color-mix(in oklch, var(--demo-fail) 50%, var(--demo-border)); }
+.demo-stat[data-tone="skip"] { border-color: color-mix(in oklch, var(--demo-skip) 50%, var(--demo-border)); }

package/templates/astro-demo-starlight/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}