stagecraft 0.1.0

package/themes/brand/components-content.css

@@ -0,0 +1,126 @@
+/* Stagecraft — Brand theme: content / typography component overrides.
+ * Statement · QandA · Manifesto · Punchline · Definition ·
+ * ImageGrid · Spotlight · Marquee */
+
+@import url('../phosphor/components-content.css');
+
+/* ===========================================================================
+ * Statement — no per-word blur on emphasis; no text-shadow halo
+ * ===========================================================================*/
+:root[data-theme="brand"] .statement-text {
+  font-weight: 600;
+  letter-spacing: -0.035em;
+}
+:root[data-theme="brand"] .statement .st-em,
+:root[data-theme="brand"] .statement .st-em--amber,
+:root[data-theme="brand"] .statement .st-em--blue {
+  text-shadow: none;
+}
+
+/* ===========================================================================
+ * QandA — drop the big amber glow on the answer
+ * ===========================================================================*/
+:root[data-theme="brand"] .qa-q {
+  font-style: normal;
+  color: var(--dim);
+  font-weight: 400;
+}
+:root[data-theme="brand"] .qa-q::before { color: var(--dim-2); }
+:root[data-theme="brand"] .qa-a {
+  color: var(--accent);
+  text-shadow: none;
+  font-weight: 600;
+}
+:root[data-theme="brand"] .qa-attr { letter-spacing: 0.12em; }
+
+/* ===========================================================================
+ * Manifesto — restrained numerals, no text-shadow
+ * ===========================================================================*/
+:root[data-theme="brand"] .mf-num {
+  color: var(--accent);
+  text-shadow: none;
+  font-weight: 500;
+}
+:root[data-theme="brand"] .mf-text { font-weight: 500; }
+:root[data-theme="brand"] .mf-text .mf-em { font-weight: 600; }
+:root[data-theme="brand"] .mf-intro { letter-spacing: 0.12em; }
+
+/* ===========================================================================
+ * Punchline — payoff stays accent but without blur/scale showmanship
+ * ===========================================================================*/
+:root[data-theme="brand"] .pl-payoff {
+  text-shadow: none;
+  font-weight: 600;
+  letter-spacing: -0.035em;
+  /* keep entrance fade-up, drop the blur-in */
+  filter: none;
+  transform: translateY(16px);
+}
+:root[data-theme="brand"] .pl-payoff.in {
+  filter: none;
+  transform: translateY(0);
+}
+
+/* ===========================================================================
+ * Definition — dictionary entry stays restrained
+ * ===========================================================================*/
+:root[data-theme="brand"] .df-term {
+  font-weight: 600;
+  letter-spacing: -0.035em;
+}
+:root[data-theme="brand"] .df-mark {
+  background: var(--accent-soft);
+}
+
+/* ===========================================================================
+ * ImageGrid — kill the rotation cascade (too whimsical for boardroom)
+ * ===========================================================================*/
+:root[data-theme="brand"] .image-grid.ig--cascade .ig-cell,
+:root[data-theme="brand"] .image-grid.ig--cascade .ig-cell:nth-child(even) {
+  transform: translateY(20px);     /* plain vertical entry, no rotate */
+}
+:root[data-theme="brand"] .image-grid.ig--cascade .ig-cell.in {
+  transform: translateY(0);
+}
+:root[data-theme="brand"] .ig-frame::after {
+  box-shadow: inset 0 0 0 1px var(--dim-2);
+}
+:root[data-theme="brand"] .ig-cell:hover .ig-img {
+  transform: none;          /* no zoom-on-hover */
+  filter: saturate(0.95) contrast(1.02);
+}
+
+/* ===========================================================================
+ * Spotlight — kill the layered halo; use a single clean accent border
+ * ===========================================================================*/
+:root[data-theme="brand"] .sp-focus {
+  background: var(--bg-elevated);
+  border: 1px solid var(--accent);
+  box-shadow: none;
+}
+:root[data-theme="brand"] .sp-icon {
+  color: var(--accent);
+  text-shadow: none;
+}
+:root[data-theme="brand"] .sp-heading {
+  color: var(--accent);
+  font-weight: 600;
+}
+:root[data-theme="brand"] .sp-ctx-item { letter-spacing: 0.1em; }
+
+/* ===========================================================================
+ * Marquee — restrained ticker, no italic glow row
+ * ===========================================================================*/
+:root[data-theme="brand"] .mq-item {
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  text-transform: none;
+  color: var(--fg);
+}
+:root[data-theme="brand"] .mq-track--b .mq-item {
+  color: var(--accent);
+  text-shadow: none;
+  font-style: normal;
+  font-weight: 600;
+}
+:root[data-theme="brand"] .mq-sep { color: var(--dim-2); }

package/themes/brand/components-data.css

@@ -0,0 +1,162 @@
+/* Stagecraft — Brand theme: data-viz component overrides.
+ * KPI · DonutChart · LineChart · Gauge · SparkLine · Heatmap ·
+ * Roadmap · SWOT · CodeBlock · CodeDiff
+ *
+ * CodeBlock & CodeDiff intentionally keep --mono. Everything else
+ * gets the Inter body font and loses every kind of glow.
+ */
+
+@import url('../phosphor/components-data.css');
+
+/* ===========================================================================
+ * KPI — flat card, no halo on .in, no text-shadow on the number
+ * ===========================================================================*/
+:root[data-theme="brand"] .kpi.in {
+  border-color: var(--dim-2);
+  box-shadow: none;
+}
+:root[data-theme="brand"] .kpi {
+  border-left: 2px solid var(--accent);
+}
+:root[data-theme="brand"] .kpi-num {
+  font-weight: 600;
+  /* text-shadow already neutralized via --accent-glow */
+}
+:root[data-theme="brand"] .kpi-label,
+:root[data-theme="brand"] .kpi-head {
+  letter-spacing: 0.12em;
+}
+
+/* ===========================================================================
+ * DonutChart — flat legend dots, no arc drop shadow
+ * ===========================================================================*/
+:root[data-theme="brand"] .donut-arc {
+  filter: none;
+}
+:root[data-theme="brand"] .donut-dot {
+  box-shadow: none;
+}
+:root[data-theme="brand"] .donut-legend-row {
+  font-family: var(--body);
+}
+
+/* ===========================================================================
+ * LineChart — no line glow, axis labels in Inter
+ * ===========================================================================*/
+:root[data-theme="brand"] .lc-line {
+  filter: none;
+  stroke-width: 2;
+}
+:root[data-theme="brand"] .lc-grid {
+  stroke: var(--dim-2);
+  stroke-dasharray: none;     /* solid faint grid for a corporate look */
+  opacity: 1;
+}
+:root[data-theme="brand"] .lc-y-label,
+:root[data-theme="brand"] .lc-x-label {
+  font-family: var(--body);
+  font-size: 13px;
+  letter-spacing: 0.02em;
+}
+:root[data-theme="brand"] .lc-dot-leg {
+  box-shadow: none;
+}
+
+/* ===========================================================================
+ * Gauge — flat fill, no drop shadow, numbers in Inter
+ * ===========================================================================*/
+:root[data-theme="brand"] .g-fill {
+  filter: none;
+}
+:root[data-theme="brand"] .g-num {
+  font-weight: 600;
+  text-shadow: none;
+}
+
+/* ===========================================================================
+ * SparkLine — same: flat, no line glow
+ * ===========================================================================*/
+:root[data-theme="brand"] .sparkline {
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="brand"] .sl-num {
+  font-weight: 600;
+  text-shadow: none;
+}
+:root[data-theme="brand"] .sl-line {
+  filter: none;
+}
+
+/* ===========================================================================
+ * Heatmap — grid stays the same; labels in Inter
+ * ===========================================================================*/
+:root[data-theme="brand"] .hm-x-label,
+:root[data-theme="brand"] .hm-y-label {
+  font-family: var(--body);
+  letter-spacing: 0.04em;
+}
+
+/* ===========================================================================
+ * Roadmap — flat bars, drop the inset 3px stripe glow
+ * ===========================================================================*/
+:root[data-theme="brand"] .rm-bar {
+  box-shadow: inset 3px 0 0 var(--rm-bar-color);
+}
+:root[data-theme="brand"] .rm-month {
+  font-family: var(--body);
+  letter-spacing: 0.08em;
+}
+
+/* ===========================================================================
+ * SWOT — flat quadrants, no inset glow
+ * ===========================================================================*/
+:root[data-theme="brand"] .swot-cell.in {
+  background: color-mix(in srgb, var(--swot-color) 4%, var(--bg));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swot-color) 35%, var(--dim-2));
+}
+:root[data-theme="brand"] .swot-letter {
+  font-weight: 700;
+  text-shadow: none;
+}
+:root[data-theme="brand"] .swot-title {
+  letter-spacing: 0.12em;
+}
+
+/* ===========================================================================
+ * CodeBlock — code stays mono (intentional). Just clean up highlight glow.
+ * ===========================================================================*/
+:root[data-theme="brand"] .codeblock {
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="brand"] .cb-head {
+  font-family: var(--body);
+}
+:root[data-theme="brand"] .cb-file {
+  font-family: var(--body);
+}
+:root[data-theme="brand"] .cb-lang {
+  font-family: var(--body);
+  letter-spacing: 0.12em;
+}
+:root[data-theme="brand"] .cb-line--highlight {
+  background: var(--accent-soft);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+/* ===========================================================================
+ * CodeDiff — same: mono in the diff body, Inter in chrome
+ * ===========================================================================*/
+:root[data-theme="brand"] .codediff {
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="brand"] .cd-head,
+:root[data-theme="brand"] .cd-file,
+:root[data-theme="brand"] .cd-lang,
+:root[data-theme="brand"] .cd-stats {
+  font-family: var(--body);
+}
+:root[data-theme="brand"] .cd-lang { letter-spacing: 0.12em; }
+/* Keep red/green semantic colors — they're load-bearing for diffs. */

package/themes/brand/components-diagram.css

@@ -0,0 +1,115 @@
+/* Stagecraft — Brand theme: diagram component overrides.
+ * Pillars · Timeline · Pyramid · Cycle · Funnel */
+
+@import url('../phosphor/components-diagram.css');
+
+/* Brand-local diag vars — replace the phosphor scoped ones. */
+:root[data-theme="brand"] {
+  --diag-card-bg: var(--bg-elevated);
+  --diag-card-border: var(--dim-2);
+}
+
+/* ===========================================================================
+ * Pillars — tighter spacing, no pulse-on-hover glow drift
+ * ===========================================================================*/
+:root[data-theme="brand"] .pillars-wrap { gap: clamp(1rem, 2vw, 1.8rem); }
+:root[data-theme="brand"] .pillar {
+  padding: clamp(0.8rem, 1.4vw, 1.2rem) clamp(0.6rem, 1vw, 0.9rem);
+  gap: clamp(0.5rem, 1vw, 0.8rem);
+}
+:root[data-theme="brand"] .pillar-icon {
+  color: var(--accent);
+  font-size: 2.4rem;
+  /* Drop the pulse animation completely — boardroom mode. */
+}
+:root[data-theme="brand"] .pillar:hover .pillar-icon {
+  animation: none;
+}
+:root[data-theme="brand"] .pillar-heading {
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  font-size: clamp(1.2rem, 2vw, 1.7rem);
+}
+:root[data-theme="brand"] .pillars-intro {
+  font-style: normal;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: clamp(0.8rem, 1.1vw, 1rem);
+}
+
+/* ===========================================================================
+ * Timeline — clean line, no soft halo on active dot
+ * ===========================================================================*/
+:root[data-theme="brand"] .tl-event.active .tl-dot {
+  background: var(--accent);
+  border-color: var(--accent);
+  box-shadow: none;       /* drop the 4px halo ring */
+}
+:root[data-theme="brand"] .tl-event.tc-accent.active .tl-dot,
+:root[data-theme="brand"] .tl-event.tc-blue.active .tl-dot,
+:root[data-theme="brand"] .tl-event.tc-amber.active .tl-dot,
+:root[data-theme="brand"] .tl-event.tc-red.active .tl-dot {
+  box-shadow: none;
+}
+:root[data-theme="brand"] .tl-heading {
+  font-weight: 600;
+}
+
+/* ===========================================================================
+ * Pyramid — squared layers, no clip-path trapezoid (schlicht)
+ * ===========================================================================*/
+:root[data-theme="brand"] .pyr-shape {
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  clip-path: none;
+  padding: clamp(1rem, 1.8vw, 1.4rem) clamp(1.4rem, 2.5vw, 2rem);
+}
+:root[data-theme="brand"] .pyramid--down .pyr-shape { clip-path: none; }
+:root[data-theme="brand"] .pyr-label { font-weight: 600; }
+:root[data-theme="brand"] .pyr-layer.pyc-accent .pyr-shape {
+  background: var(--bg-elevated);
+  border-left: 2px solid var(--accent);
+}
+:root[data-theme="brand"] .pyr-layer.pyc-blue   .pyr-shape { background: var(--bg-elevated); border-left: 2px solid var(--blue); }
+:root[data-theme="brand"] .pyr-layer.pyc-amber  .pyr-shape { background: var(--bg-elevated); border-left: 2px solid var(--amber); }
+:root[data-theme="brand"] .pyr-layer.pyc-red    .pyr-shape { background: var(--bg-elevated); border-left: 2px solid var(--red); }
+
+/* ===========================================================================
+ * Cycle — grey ring, blue arcs/arrows kept clean
+ * ===========================================================================*/
+:root[data-theme="brand"] .cyc-ring {
+  stroke: var(--dim-2);
+  stroke-dasharray: none;
+  opacity: 1;
+}
+:root[data-theme="brand"] .cyc-arc {
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+:root[data-theme="brand"] .cyc-arrow {
+  stroke: var(--accent);
+  stroke-width: 2;
+}
+:root[data-theme="brand"] .cyc-item {
+  background: var(--bg-elevated);
+  border-radius: 0;
+}
+:root[data-theme="brand"] .cyc-label { font-weight: 600; }
+
+/* ===========================================================================
+ * Funnel — flat plates with subtle accent left border
+ * ===========================================================================*/
+:root[data-theme="brand"] .fn-shape {
+  background: var(--bg-elevated);
+  border-top: 1px solid var(--dim-2);
+  border-bottom: 1px solid var(--dim-2);
+}
+:root[data-theme="brand"] .fn-label { font-weight: 600; letter-spacing: 0.06em; }
+:root[data-theme="brand"] .fn-value { font-weight: 600; }
+:root[data-theme="brand"] .fn-stage.fnc-accent .fn-shape {
+  background: var(--bg-elevated);
+  border-color: var(--accent);
+}
+:root[data-theme="brand"] .fn-stage.fnc-blue   .fn-shape { background: var(--bg-elevated); border-color: var(--blue); }
+:root[data-theme="brand"] .fn-stage.fnc-amber  .fn-shape { background: var(--bg-elevated); border-color: var(--amber); }
+:root[data-theme="brand"] .fn-stage.fnc-red    .fn-shape { background: var(--bg-elevated); border-color: var(--red); }

package/themes/brand/components-layout.css

@@ -0,0 +1,112 @@
+/* Stagecraft — Brand theme: layout component overrides.
+ *
+ * Strategy: inherit the phosphor structural CSS, then strip glow / heavy
+ * shadows / colored borders and lean on Inter + subtle dim-2 separators.
+ * Brand is the boardroom theme — no theatrics. */
+
+@import url('../phosphor/components-layout.css');
+
+/* ===========================================================================
+ * ImageText
+ * ===========================================================================*/
+:root[data-theme="brand"] .it-img-frame {
+  /* Phosphor stacks a glow + drop-shadow. Brand: thin clean frame only. */
+  box-shadow: inset 0 0 0 1px var(--dim-2);
+}
+:root[data-theme="brand"] .it-img {
+  filter: saturate(0.95) contrast(1.02);
+}
+:root[data-theme="brand"] .it-heading {
+  font-weight: 600;
+}
+:root[data-theme="brand"] .it-caption {
+  letter-spacing: 0.12em;
+}
+
+/* ===========================================================================
+ * FullImage
+ * ===========================================================================*/
+:root[data-theme="brand"] .fi-headline {
+  font-weight: 600;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+}
+
+/* ===========================================================================
+ * Quote
+ * ===========================================================================*/
+:root[data-theme="brand"] .q-mark {
+  /* Restrained accent — text-shadow already nulled via --accent-glow. */
+  color: var(--accent);
+  font-weight: 300;
+}
+:root[data-theme="brand"] .q-text {
+  font-style: normal;     /* schlicht */
+  font-weight: 400;
+  letter-spacing: -0.01em;
+}
+:root[data-theme="brand"] .q-author { font-weight: 600; }
+
+/* ===========================================================================
+ * BigNumber
+ * ===========================================================================*/
+:root[data-theme="brand"] .bn-num {
+  color: var(--accent);
+  font-weight: 600;
+  letter-spacing: -0.04em;
+  /* text-shadow already neutralized */
+}
+:root[data-theme="brand"] .bn-unit {
+  color: var(--accent);
+  opacity: 0.7;
+}
+:root[data-theme="brand"] .bn-label {
+  font-weight: 400;
+  color: var(--fg);
+}
+:root[data-theme="brand"] .bn-caption {
+  letter-spacing: 0.12em;
+}
+
+/* ===========================================================================
+ * Stats
+ * ===========================================================================*/
+:root[data-theme="brand"] .stat {
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+  /* Phosphor uses a top accent bar (::before). We keep it but neuter the glow. */
+}
+:root[data-theme="brand"] .stat::before { display: none; }
+:root[data-theme="brand"] .stat--accent { border-left: 2px solid var(--accent); }
+:root[data-theme="brand"] .stat--amber  { border-left: 2px solid var(--amber); }
+:root[data-theme="brand"] .stat--blue   { border-left: 2px solid var(--blue); }
+:root[data-theme="brand"] .stat--red    { border-left: 2px solid var(--red); }
+:root[data-theme="brand"] .stat-num {
+  font-weight: 600;
+  letter-spacing: -0.035em;
+}
+:root[data-theme="brand"] .stat--accent .stat-num { color: var(--accent); }
+:root[data-theme="brand"] .stat-label {
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: clamp(0.75rem, 1vw, 0.9rem);
+  color: var(--dim);
+}
+
+/* ===========================================================================
+ * Bento
+ * ===========================================================================*/
+:root[data-theme="brand"] .bento-cell {
+  background: var(--bg-elevated);
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="brand"] .bento-cell--accent {
+  border-color: var(--accent);
+  /* box-shadow already neutralized via --accent-glow */
+}
+:root[data-theme="brand"] .bento-cell--accent .bento-heading { color: var(--accent); }
+:root[data-theme="brand"] .bento-cell--amber  { border-color: color-mix(in srgb, var(--amber) 50%, var(--dim-2)); }
+:root[data-theme="brand"] .bento-cell--blue   { border-color: color-mix(in srgb, var(--blue) 50%, var(--dim-2)); }
+:root[data-theme="brand"] .bento-heading {
+  font-weight: 600;
+  letter-spacing: -0.015em;
+}

package/themes/brand/components.css

@@ -0,0 +1,46 @@
+/* Stagecraft — Brand theme: Layer-2 component overrides.
+ *
+ * We import the phosphor root component file for the small set of
+ * "core" components (KineticText, SectionCard, ActivityList, Compare,
+ * Counter, ShiftArrow) — they're already restrained enough — and then
+ * layer per-family Brand overrides on top. Each per-family file imports
+ * its phosphor counterpart, so the cascade is:
+ *
+ *   phosphor base -> phosphor family -> brand family override
+ */
+
+@import url('../phosphor/components.css');
+
+/* Family overrides */
+@import url('./components-layout.css');
+@import url('./components-diagram.css');
+@import url('./components-chart.css');
+@import url('./components-data.css');
+@import url('./components-business.css');
+@import url('./components-content.css');
+
+/* -------------------------------------------------------------------------
+ * Brand polish on the "core 6" that live in phosphor/components.css
+ * ----------------------------------------------------------------------- */
+
+/* SectionCard — tighter dot accents, weightier title */
+:root[data-theme="brand"] .sec-title { font-weight: 600; }
+:root[data-theme="brand"] .sec-num   { letter-spacing: 0.25em; }
+
+/* ActivityList */
+:root[data-theme="brand"] .activity .num  { letter-spacing: 0.18em; }
+:root[data-theme="brand"] .activity .name { font-weight: 600; }
+
+/* Counter — accent number gets blue (clean, no glow because --accent-glow=transparent) */
+:root[data-theme="brand"] .counter-num { font-weight: 600; }
+
+/* ShiftArrow */
+:root[data-theme="brand"] .shift-from,
+:root[data-theme="brand"] .shift-to { font-weight: 500; }
+
+/* Compare — corporate caret style on the new column */
+:root[data-theme="brand"] .compare-h { letter-spacing: 0.18em; }
+:root[data-theme="brand"] .compare-h.new::before { color: var(--accent); }
+
+/* KineticText — keep the soft fade, just slightly heavier accent weight */
+:root[data-theme="brand"] .kinetic .line.accent { font-weight: 500; }

package/themes/brand/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "brand",
+  "displayName": "Brand",
+  "description": "Corporate, schlicht, dark. Inter on blue accent.",
+  "fonts": [
+    "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+  ],
+  "stylesheets": [
+    "tokens.css",
+    "base.css",
+    "components.css",
+    "components-layout.css",
+    "components-diagram.css",
+    "components-chart.css",
+    "components-data.css",
+    "components-business.css",
+    "components-content.css",
+    "transitions.css"
+  ]
+}

package/themes/brand/tokens.css

@@ -0,0 +1,20 @@
+/* Stagecraft — Brand theme tokens */
+:root[data-theme="brand"] {
+  --bg: #0E1117;
+  --bg-elevated: #161B22;
+  --fg: #F0F6FC;
+  --dim: #7D8590;
+  --dim-2: #21262D;
+  --accent: #189EFF;          /* Shopware-ish blue */
+  --accent-soft: rgba(24, 158, 255, 0.10);
+  /* Brand is glow-free. Keeping the var defined as transparent neutralizes
+     every box-shadow / text-shadow that the phosphor base relies on
+     without us having to rewrite every selector. */
+  --accent-glow: transparent;
+  --blue: #189EFF;
+  --amber: #DBAB0A;
+  --red: #F85149;
+  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
+  --display: 'Inter', system-ui, sans-serif;
+  --body: 'Inter', system-ui, sans-serif;
+}

package/themes/brand/transitions.css

@@ -0,0 +1,4 @@
+@import url('../phosphor/transitions.css');
+
+/* Brand: muted glitch — no overlay */
+:root[data-theme="brand"] .tx-glitch-overlay { display: none; }

package/themes/neon/base.css

@@ -0,0 +1,10 @@
+@import url('../phosphor/base.css');
+
+:root[data-theme="neon"] body::before {
+  background: radial-gradient(ellipse at center, rgba(255, 45, 230, 0.05) 0%, transparent 60%);
+}
+
+:root[data-theme="neon"] .caret { box-shadow: 0 0 16px var(--accent-glow); }
+
+/* Stronger glow on focal elements */
+:root[data-theme="neon"] .ui-dots .dot.active { box-shadow: 0 0 18px var(--accent-glow); }