@danieldeusing/design 0.1.0

package/dist/danieldeusing-design.css

@@ -0,0 +1,554 @@
+/*! danieldeusing-design v0.1.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
+/* ===== reset.css ===== */
+/*
+ * danieldeusing-design — minimal reset.
+ *
+ * Only loaded on the build-free path (index.css / the dist bundle / CDN), where
+ * there is no Tailwind Preflight to normalize the document. Tailwind v4 apps must
+ * NOT import this — they already get an equivalent reset from Preflight, and
+ * importing it twice would be redundant. Deliberately tiny: it normalizes the box
+ * model and strips default margins so the terminal layout is predictable, and
+ * stops short of a full normalize.css.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+body {
+  min-height: 100vh;
+  min-height: 100dvh;
+  line-height: 1.5;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+/* ===== tokens.css ===== */
+/*
+ * danieldeusing-design — design tokens.
+ *
+ * The single source of truth for the "terminal" theme: CRT phosphor on
+ * JetBrains Mono, $-prompts, ASCII rules, scanline overlay. Four variants
+ * selected via html[data-theme]: warm (default), green, mono, paper.
+ * :root holds the warm defaults so the theme works with no attribute set.
+ *
+ * These are plain CSS custom properties — they work in any framework, any
+ * browser, with or without a build step. Load this file first; base.css and
+ * components.css resolve against the variables declared here.
+ */
+
+:root {
+  --background: #f5efe2;
+  --foreground: #43352a;
+  --card: #efe7d4;
+  --card-foreground: #43352a;
+  --popover: #efe7d4;
+  --popover-foreground: #43352a;
+  --primary: #8a4516;
+  --primary-foreground: #f8f3e8;
+  --secondary: #ece3cf;
+  --secondary-foreground: #43352a;
+  --muted: #ece3cf;
+  --muted-foreground: #71614e;
+  --accent: #8a4516;
+  --accent-foreground: #f8f3e8;
+  --destructive: #a02c2c;
+  --border: #d9cdb6;
+  --input: #d9cdb6;
+  --ring: #8a4516;
+
+  --glow: rgba(160, 82, 45, 0.1);
+  --glow-soft: rgba(160, 82, 45, 0.05);
+  --scanline-opacity: 0.15;
+
+  --radius: 0rem;
+
+  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", "Menlo", monospace;
+}
+
+/* CRT phosphor green */
+html[data-theme="green"] {
+  --background: #020604;
+  --foreground: #4fdd7d;
+  --card: #04110a;
+  --card-foreground: #4fdd7d;
+  --popover: #04110a;
+  --popover-foreground: #4fdd7d;
+  --primary: #33ff66;
+  --primary-foreground: #02160a;
+  --secondary: #071509;
+  --secondary-foreground: #4fdd7d;
+  --muted: #071509;
+  --muted-foreground: #3da45e;
+  --accent: #33ff66;
+  --accent-foreground: #02160a;
+  --destructive: #ff5c5c;
+  --border: #1c4a2c;
+  --input: #1c4a2c;
+  --ring: #33ff66;
+  --glow: rgba(51, 255, 102, 0.35);
+  --glow-soft: rgba(51, 255, 102, 0.12);
+  --scanline-opacity: 0.5;
+}
+
+/* white-phosphor terminal */
+html[data-theme="mono"] {
+  --background: #050505;
+  --foreground: #d4d4d4;
+  --card: #0d0d0d;
+  --card-foreground: #d4d4d4;
+  --popover: #0d0d0d;
+  --popover-foreground: #d4d4d4;
+  --primary: #ffffff;
+  --primary-foreground: #050505;
+  --secondary: #111111;
+  --secondary-foreground: #d4d4d4;
+  --muted: #111111;
+  --muted-foreground: #8a8a8a;
+  --accent: #ffffff;
+  --accent-foreground: #050505;
+  --destructive: #ff5c5c;
+  --border: #333333;
+  --input: #333333;
+  --ring: #ffffff;
+  --glow: rgba(255, 255, 255, 0.25);
+  --glow-soft: rgba(255, 255, 255, 0.08);
+  --scanline-opacity: 0.45;
+}
+
+/* black-on-white terminal (e-ink / printout) */
+html[data-theme="paper"] {
+  --background: #fafafa;
+  --foreground: #1f1f1f;
+  --card: #f1f1f1;
+  --card-foreground: #1f1f1f;
+  --popover: #f1f1f1;
+  --popover-foreground: #1f1f1f;
+  --primary: #000000;
+  --primary-foreground: #fafafa;
+  --secondary: #efefef;
+  --secondary-foreground: #1f1f1f;
+  --muted: #efefef;
+  --muted-foreground: #595959;
+  --accent: #000000;
+  --accent-foreground: #fafafa;
+  --destructive: #b3261e;
+  --border: #d4d4d4;
+  --input: #d4d4d4;
+  --ring: #000000;
+  --glow: rgba(0, 0, 0, 0.06);
+  --glow-soft: rgba(0, 0, 0, 0.04);
+  --scanline-opacity: 0.12;
+}
+
+/* ===== base.css ===== */
+/*
+ * danieldeusing-design — base layer.
+ *
+ * The document-level look of the terminal theme: monospace body, CRT scanline
+ * overlay, phosphor selection, themed default border colour. Resolves against
+ * tokens.css (load that first). Plain CSS — no Tailwind required.
+ */
+
+html {
+  scroll-behavior: smooth;
+}
+
+/* Default any element's border to the themed colour, so a bare `border-width`
+   (or a Tailwind `border` utility) paints in the theme border rather than the
+   element's currentColor. Mirrors the canonical `* { @apply border-border }`. */
+*,
+*::before,
+*::after {
+  border-color: var(--border);
+}
+
+/* Visible, on-theme focus ring for keyboard navigation. */
+:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Tailwind v4's reset drops the default button cursor — restore it for all
+   interactive controls (buttons, summaries, role=button). */
+button:not(:disabled),
+summary,
+[role="button"] {
+  cursor: pointer;
+}
+
+/* CRT scanlines: a fixed, non-interactive overlay above the page. Intensity is
+   per-theme via --scanline-opacity. */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(0, 0, 0, 0.25) 0px,
+    rgba(0, 0, 0, 0.25) 1px,
+    transparent 1px,
+    transparent 3px
+  );
+  opacity: var(--scanline-opacity);
+}
+
+::selection {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+
+/* ===== components.css ===== */
+/*
+ * danieldeusing-design — component layer.
+ *
+ * Reusable, framework-agnostic primitives in plain CSS (no Tailwind @apply), so
+ * they render identically in an Astro/React/Angular app, a Tauri webview, or a
+ * single static HTML file. Every value resolves against tokens.css.
+ */
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Phosphor glow — for bright, "lit" elements (brand mark, active items).
+   ───────────────────────────────────────────────────────────────────────── */
+.glow {
+  color: var(--primary);
+  text-shadow: 0 0 8px var(--glow);
+}
+.glow-lg {
+  color: var(--primary);
+  text-shadow: 0 0 12px var(--glow);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Shell affordances — `$ command` section headers and `# comment` lines.
+   ───────────────────────────────────────────────────────────────────────── */
+.prompt {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--muted-foreground);
+}
+.prompt::before {
+  content: "$ ";
+  color: var(--primary);
+}
+
+.comment::before {
+  content: "# ";
+  color: var(--border);
+}
+
+/* Blinking block cursor — pair with a brand mark or end-of-line. */
+.cursor-block {
+  display: inline-block;
+  width: 0.55em;
+  height: 1em;
+  margin-left: 8px;
+  background: var(--primary);
+  vertical-align: baseline;
+  transform: translateY(0.12em);
+  animation: ddd-blink 1.1s step-end infinite;
+}
+@keyframes ddd-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Primary CTA — `> label` with a phosphor glow that lifts on hover.
+   ───────────────────────────────────────────────────────────────────────── */
+.btn-terminal {
+  display: inline-block;
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-weight: 700;
+  padding: 12px 24px;
+  box-shadow: 0 0 16px var(--glow);
+  transition:
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+.btn-terminal::before {
+  content: "> ";
+}
+.btn-terminal:hover {
+  box-shadow: 0 0 28px var(--glow);
+  transform: translateY(-2px);
+}
+
+/* Quiet, underlined link that warms to the primary colour on hover. */
+.link-quiet {
+  color: var(--muted-foreground);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  transition: color 0.15s ease;
+}
+.link-quiet:hover {
+  color: var(--primary);
+}
+
+/* ASCII horizontal rule — a clipped, full-width row of box-drawing dashes that
+   reads like a terminal separator. Use on an <hr> or <div>; the dashes are a
+   decorative ::before clipped to the element width. */
+.ascii-rule {
+  margin: 1rem 0;
+  border: 0;
+  color: var(--border);
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  user-select: none;
+}
+.ascii-rule::before {
+  content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────";
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Card — bordered surface that warms its border and glows softly on hover.
+   ───────────────────────────────────────────────────────────────────────── */
+.card-terminal {
+  background: var(--card);
+  border: 1px solid var(--border);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.card-terminal:hover {
+  border-color: var(--primary);
+  box-shadow: 0 0 20px var(--glow-soft);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Dropdown — a <details class="dropdown"> with a <summary> trigger and a
+   floating panel. Pairs with runtime/dropdown.js (close-others, click-away,
+   Escape). The panel opens UPWARD by default (for status-bar / footer menus);
+   add .dropdown-panel--down to open below the trigger.
+   ───────────────────────────────────────────────────────────────────────── */
+.dropdown {
+  position: relative;
+}
+.dropdown > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  color: var(--muted-foreground);
+  transition: color 0.15s ease;
+}
+.dropdown > summary::-webkit-details-marker {
+  display: none;
+}
+.dropdown > summary:hover,
+.dropdown[open] > summary {
+  color: var(--primary);
+}
+.dropdown-panel {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 12px);
+  z-index: 50;
+  min-width: 128px;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 0;
+  box-shadow: 0 0 20px var(--glow-soft);
+}
+/* open below the trigger instead of above */
+.dropdown-panel--down {
+  top: calc(100% + 8px);
+  bottom: auto;
+  left: 0;
+  right: auto;
+}
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 14px;
+  text-align: left;
+  font: inherit;
+  line-height: 1.5;
+  background: none;
+  border: 0;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s ease;
+}
+.dropdown-item:hover {
+  color: var(--primary);
+  background: var(--muted);
+}
+.dropdown-item[aria-current="true"],
+html:not([data-theme]) .dropdown-item[data-theme-value="warm"],
+html[data-theme="green"] .dropdown-item[data-theme-value="green"],
+html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],
+html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],
+html[data-theme="warm"] .dropdown-item[data-theme-value="warm"] {
+  color: var(--primary);
+  text-shadow: 0 0 8px var(--glow);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   ELI5 — an "explain like I'm 5" callout box (first-time-term explainers).
+   ───────────────────────────────────────────────────────────────────────── */
+.eli5 {
+  margin: 1.25em 0;
+  padding: 0.7em 1em;
+  color: var(--foreground);
+  background: color-mix(in srgb, var(--primary) 7%, var(--card));
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--primary);
+  border-radius: var(--radius);
+  font-size: 0.92em;
+  line-height: 1.6;
+}
+.eli5::before {
+  content: "ELI5";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 0.6em;
+  vertical-align: 0.08em;
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.04em;
+  padding: 0.34em 0.6em;
+  border-radius: 5px;
+  background: #b42318;
+  color: #fff;
+}
+.eli5-term {
+  font-weight: 700;
+  color: var(--primary);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Animation kill-switch — add html.anim-off (e.g. from a footer "animations
+   off" toggle) to stop ALL motion regardless of the OS reduced-motion setting.
+   runtime/terminal.js also bails when this class is present, so content stays
+   visible. Complements the prefers-reduced-motion handling below.
+   ───────────────────────────────────────────────────────────────────────── */
+html.anim-off *,
+html.anim-off *::before,
+html.anim-off *::after {
+  animation: none !important;
+  transition: none !important;
+}
+html.anim-off .cursor-block {
+  opacity: 1;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Terminal session animation — `$ command` prompts type out, then their
+   section's content reveals like command output. Pairs with
+   runtime/terminal.js, which adds html.term-anim pre-paint. With JS disabled
+   or prefers-reduced-motion, the gate is never added and nothing is hidden, so
+   all content is visible by default (progressive enhancement).
+
+   Markup: a section gets [data-term]; its prompt uses .prompt; each chunk of
+   output gets [data-term-out].
+   ───────────────────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: no-preference) {
+  /* pending prompt: fully invisible (incl. the `$ ` prefix), line box reserved */
+  html.term-anim [data-term] .prompt:not(.term-live),
+  html.term-anim [data-term] .prompt:not(.term-live)::before {
+    color: transparent;
+  }
+  /* pending output: keep layout (no CLS), no interaction until revealed */
+  html.term-anim [data-term] [data-term-out]:not(.term-show) {
+    visibility: hidden;
+  }
+  /* phosphor warm-up flicker as output appears */
+  html.term-anim [data-term] [data-term-out].term-show {
+    animation: ddd-term-output 0.2s steps(3, end) both;
+  }
+  @keyframes ddd-term-output {
+    from {
+      opacity: 0;
+    }
+  }
+  /* caret at the typing edge (created by runtime/terminal.js) */
+  .term-caret {
+    display: inline-block;
+    width: 0.55em;
+    height: 1em;
+    margin-left: 2px;
+    background: var(--primary);
+    vertical-align: baseline;
+    transform: translateY(0.12em);
+  }
+}

package/dist/danieldeusing-design.min.css

@@ -0,0 +1,2 @@
+/*! danieldeusing-design v0.1.0 | MIT | https://github.com/danieldeusing/danieldeusing-design */
+*,*::before,*::after{box-sizing: border-box}*{margin: 0}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%;tab-size: 4}body{min-height: 100vh;min-height: 100dvh;line-height: 1.5}img,picture,video,canvas,svg{display: block;max-width: 100%}input,button,textarea,select{font: inherit;color: inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap: break-word}ul,ol{list-style: none;padding: 0}a{color: inherit;text-decoration: none}table{border-collapse: collapse}:root{--background: #f5efe2;--foreground: #43352a;--card: #efe7d4;--card-foreground: #43352a;--popover: #efe7d4;--popover-foreground: #43352a;--primary: #8a4516;--primary-foreground: #f8f3e8;--secondary: #ece3cf;--secondary-foreground: #43352a;--muted: #ece3cf;--muted-foreground: #71614e;--accent: #8a4516;--accent-foreground: #f8f3e8;--destructive: #a02c2c;--border: #d9cdb6;--input: #d9cdb6;--ring: #8a4516;--glow: rgba(160,82,45,0.1);--glow-soft: rgba(160,82,45,0.05);--scanline-opacity: 0.15;--radius: 0rem;--font-mono: "JetBrains Mono Variable","JetBrains Mono","Menlo",monospace}html[data-theme="green"]{--background: #020604;--foreground: #4fdd7d;--card: #04110a;--card-foreground: #4fdd7d;--popover: #04110a;--popover-foreground: #4fdd7d;--primary: #33ff66;--primary-foreground: #02160a;--secondary: #071509;--secondary-foreground: #4fdd7d;--muted: #071509;--muted-foreground: #3da45e;--accent: #33ff66;--accent-foreground: #02160a;--destructive: #ff5c5c;--border: #1c4a2c;--input: #1c4a2c;--ring: #33ff66;--glow: rgba(51,255,102,0.35);--glow-soft: rgba(51,255,102,0.12);--scanline-opacity: 0.5}html[data-theme="mono"]{--background: #050505;--foreground: #d4d4d4;--card: #0d0d0d;--card-foreground: #d4d4d4;--popover: #0d0d0d;--popover-foreground: #d4d4d4;--primary: #ffffff;--primary-foreground: #050505;--secondary: #111111;--secondary-foreground: #d4d4d4;--muted: #111111;--muted-foreground: #8a8a8a;--accent: #ffffff;--accent-foreground: #050505;--destructive: #ff5c5c;--border: #333333;--input: #333333;--ring: #ffffff;--glow: rgba(255,255,255,0.25);--glow-soft: rgba(255,255,255,0.08);--scanline-opacity: 0.45}html[data-theme="paper"]{--background: #fafafa;--foreground: #1f1f1f;--card: #f1f1f1;--card-foreground: #1f1f1f;--popover: #f1f1f1;--popover-foreground: #1f1f1f;--primary: #000000;--primary-foreground: #fafafa;--secondary: #efefef;--secondary-foreground: #1f1f1f;--muted: #efefef;--muted-foreground: #595959;--accent: #000000;--accent-foreground: #fafafa;--destructive: #b3261e;--border: #d4d4d4;--input: #d4d4d4;--ring: #000000;--glow: rgba(0,0,0,0.06);--glow-soft: rgba(0,0,0,0.04);--scanline-opacity: 0.12}html{scroll-behavior: smooth}*,*::before,*::after{border-color: var(--border)}:focus-visible{outline: 2px solid var(--ring);outline-offset: 2px}body{background: var(--background);color: var(--foreground);font-family: var(--font-mono);font-size: 0.75rem;line-height: 1.5;overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}button:not(:disabled),summary,[role="button"]{cursor: pointer}body::after{content: "";position: fixed;inset: 0;z-index: 40;pointer-events: none;background: repeating-linear-gradient( 0deg,rgba(0,0,0,0.25) 0px,rgba(0,0,0,0.25) 1px,transparent 1px,transparent 3px );opacity: var(--scanline-opacity)}::selection{background: var(--primary);color: var(--primary-foreground)}.glow{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.glow-lg{color: var(--primary);text-shadow: 0 0 12px var(--glow)}.prompt{font-size: 0.75rem;font-weight: 700;color: var(--muted-foreground)}.prompt::before{content: "$ ";color: var(--primary)}.comment::before{content: "# ";color: var(--border)}.cursor-block{display: inline-block;width: 0.55em;height: 1em;margin-left: 8px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em);animation: ddd-blink 1.1s step-end infinite}@keyframes ddd-blink{50%{opacity: 0}}.btn-terminal{display: inline-block;background: var(--primary);color: var(--primary-foreground);font-weight: 700;padding: 12px 24px;box-shadow: 0 0 16px var(--glow);transition: box-shadow 0.15s ease,transform 0.15s ease}.btn-terminal::before{content: "> "}.btn-terminal:hover{box-shadow: 0 0 28px var(--glow);transform: translateY(-2px)}.link-quiet{color: var(--muted-foreground);text-decoration: underline;text-underline-offset: 4px;transition: color 0.15s ease}.link-quiet:hover{color: var(--primary)}.ascii-rule{margin: 1rem 0;border: 0;color: var(--border);line-height: 1;white-space: nowrap;overflow: hidden;user-select: none}.ascii-rule::before{content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"}.card-terminal{background: var(--card);border: 1px solid var(--border);transition: border-color 0.15s ease,box-shadow 0.15s ease}.card-terminal:hover{border-color: var(--primary);box-shadow: 0 0 20px var(--glow-soft)}.dropdown{position: relative}.dropdown>summary{display: inline-flex;align-items: center;gap: 6px;cursor: pointer;user-select: none;list-style: none;color: var(--muted-foreground);transition: color 0.15s ease}.dropdown>summary::-webkit-details-marker{display: none}.dropdown>summary:hover,.dropdown[open]>summary{color: var(--primary)}.dropdown-panel{position: absolute;right: 0;bottom: calc(100% + 12px);z-index: 50;min-width: 128px;margin: 0;padding: 4px 0;list-style: none;background: var(--card);border: 1px solid var(--border);border-radius: 0;box-shadow: 0 0 20px var(--glow-soft)}.dropdown-panel--down{top: calc(100% + 8px);bottom: auto;left: 0;right: auto}.dropdown-item{display: flex;align-items: center;gap: 8px;width: 100%;padding: 5px 14px;text-align: left;font: inherit;line-height: 1.5;background: none;border: 0;color: var(--muted-foreground);cursor: pointer;white-space: nowrap;transition: color 0.15s ease}.dropdown-item:hover{color: var(--primary);background: var(--muted)}.dropdown-item[aria-current="true"],html:not([data-theme]) .dropdown-item[data-theme-value="warm"],html[data-theme="green"] .dropdown-item[data-theme-value="green"],html[data-theme="mono"] .dropdown-item[data-theme-value="mono"],html[data-theme="paper"] .dropdown-item[data-theme-value="paper"],html[data-theme="warm"] .dropdown-item[data-theme-value="warm"]{color: var(--primary);text-shadow: 0 0 8px var(--glow)}.eli5{margin: 1.25em 0;padding: 0.7em 1em;color: var(--foreground);background: color-mix(in srgb,var(--primary) 7%,var(--card));border: 1px solid var(--border);border-left: 3px solid var(--primary);border-radius: var(--radius);font-size: 0.92em;line-height: 1.6}.eli5::before{content: "ELI5";display: inline-flex;align-items: center;justify-content: center;margin-right: 0.6em;vertical-align: 0.08em;font-family: var(--font-mono);font-size: 0.72em;font-weight: 700;line-height: 1;letter-spacing: 0.04em;padding: 0.34em 0.6em;border-radius: 5px;background: #b42318;color: #fff}.eli5-term{font-weight: 700;color: var(--primary)}html.anim-off *,html.anim-off *::before,html.anim-off *::after{animation: none !important;transition: none !important}html.anim-off .cursor-block{opacity: 1}@media (prefers-reduced-motion: no-preference){html.term-anim [data-term] .prompt:not(.term-live),html.term-anim [data-term] .prompt:not(.term-live)::before{color: transparent}html.term-anim [data-term] [data-term-out]:not(.term-show){visibility: hidden}html.term-anim [data-term] [data-term-out].term-show{animation: ddd-term-output 0.2s steps(3,end) both}@keyframes ddd-term-output{from{opacity: 0}}.term-caret{display: inline-block;width: 0.55em;height: 1em;margin-left: 2px;background: var(--primary);vertical-align: baseline;transform: translateY(0.12em)}}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@danieldeusing/design",
+  "version": "0.1.0",
+  "description": "The danieldeusing terminal design system — framework-agnostic CSS tokens, components, and a vanilla-JS runtime for the CRT/JetBrains-Mono look used across danieldeusing.de, seedr, and briefs.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Daniel Deusing",
+  "homepage": "https://github.com/danieldeusing/danieldeusing-design#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/danieldeusing/danieldeusing-design.git"
+  },
+  "bugs": {
+    "url": "https://github.com/danieldeusing/danieldeusing-design/issues"
+  },
+  "keywords": [
+    "design-system",
+    "design-tokens",
+    "css",
+    "tailwindcss",
+    "tailwind-v4",
+    "terminal",
+    "crt",
+    "theme",
+    "danieldeusing"
+  ],
+  "main": "./src/index.css",
+  "style": "./src/index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./tailwind.css": "./src/tailwind.css",
+    "./index.css": "./src/index.css",
+    "./reset.css": "./src/reset.css",
+    "./fonts.css": "./src/fonts.css",
+    "./tokens.css": "./src/tokens.css",
+    "./base.css": "./src/base.css",
+    "./components.css": "./src/components.css",
+    "./tokens.json": "./tokens/tokens.json",
+    "./runtime": "./runtime/index.js",
+    "./runtime/*": "./runtime/*.js",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "runtime",
+    "dist",
+    "tokens",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepublishOnly": "node scripts/build.mjs"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/runtime/dropdown.js

@@ -0,0 +1,44 @@
+/*
+ * danieldeusing-design — dropdown controller.
+ *
+ * Behaviour for <details class="dropdown"> menus styled by components.css:
+ * opening one closes the others, a click outside closes all, and Escape closes
+ * all. Native <details> already handles open/close and keyboard focus, so this
+ * is purely the "only one open, dismiss on outside interaction" layer.
+ */
+
+/**
+ * @param {ParentNode} [root=document] Where to look for `details.dropdown`.
+ * @returns {(except?: HTMLDetailsElement) => void} A closeAll() you can call
+ *   manually (e.g. after a menu item triggers navigation).
+ */
+export function initDropdowns(root = document) {
+  const dropdowns = /** @type {HTMLDetailsElement[]} */ (
+    Array.from(root.querySelectorAll("details.dropdown"))
+  );
+
+  const closeAll = (except) => {
+    dropdowns.forEach((dropdown) => {
+      if (dropdown !== except) dropdown.removeAttribute("open");
+    });
+  };
+
+  dropdowns.forEach((dropdown) => {
+    dropdown.addEventListener("toggle", () => {
+      if (dropdown.open) closeAll(dropdown);
+    });
+  });
+
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Node) || !dropdowns.some((dropdown) => dropdown.contains(target))) {
+      closeAll();
+    }
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") closeAll();
+  });
+
+  return closeAll;
+}

package/runtime/index.js

@@ -0,0 +1,16 @@
+/*
+ * danieldeusing-design — runtime barrel.
+ *
+ * Optional, dependency-free vanilla-JS enhancements for the terminal theme.
+ * Tree-shakeable: import only what you need, e.g.
+ *
+ *   import { applyStoredTheme, initThemeSwitcher } from "@danieldeusing/design/runtime";
+ *
+ * The CSS works on its own; this layer adds theme switching, the resolution
+ * zoom, dropdown behaviour, and the terminal typing animation.
+ */
+
+export * from "./theme.js";
+export * from "./zoom.js";
+export * from "./dropdown.js";
+export * from "./terminal.js";