stagecraft 0.1.0

package/themes/neon/components-layout.css

@@ -0,0 +1,87 @@
+@import url('../phosphor/components-layout.css');
+
+/* =============================================================================
+ * Neon — layout components
+ * Magenta accents glow. Cards get magenta-tinted borders against dark bg.
+ * Body text stays glow-free for readability.
+ * ===========================================================================*/
+
+:root[data-theme="neon"] {
+  --neon-card-border: color-mix(in srgb, var(--accent) 30%, var(--dim-2));
+  --neon-card-border-blue: color-mix(in srgb, var(--blue) 30%, var(--dim-2));
+}
+
+/* ---------- ImageText ---------- */
+:root[data-theme="neon"] .it-img-frame {
+  box-shadow:
+    inset 0 0 0 1px var(--neon-card-border),
+    0 0 0 1px var(--neon-card-border),
+    0 30px 60px -20px rgba(0,0,0,0.8),
+    0 0 80px -10px var(--accent-glow);
+}
+
+/* ---------- FullImage ---------- */
+:root[data-theme="neon"] .fi-headline {
+  text-shadow:
+    0 2px 30px rgba(0,0,0,0.8),
+    0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+/* ---------- Quote ---------- */
+:root[data-theme="neon"] .q-mark {
+  text-shadow:
+    0 0 28px var(--accent-glow),
+    0 0 60px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+:root[data-theme="neon"] .q-text { /* body text stays clean */ }
+
+/* ---------- BigNumber ---------- */
+:root[data-theme="neon"] .bn-num {
+  text-shadow:
+    0 0 24px var(--accent-glow),
+    0 0 70px color-mix(in srgb, var(--accent) 40%, transparent);
+}
+
+/* ---------- Stats ---------- */
+:root[data-theme="neon"] .stat {
+  border-color: var(--neon-card-border);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 60%),
+    var(--bg-elevated);
+}
+:root[data-theme="neon"] .stat--accent::before {
+  box-shadow: 0 0 18px var(--accent-glow);
+}
+:root[data-theme="neon"] .stat--blue { border-color: var(--neon-card-border-blue); }
+:root[data-theme="neon"] .stat--blue::before {
+  box-shadow: 0 0 16px color-mix(in srgb, var(--blue) 60%, transparent);
+}
+:root[data-theme="neon"] .stat--accent .stat-num {
+  text-shadow: 0 0 28px var(--accent-glow);
+}
+:root[data-theme="neon"] .stat--blue .stat-num {
+  text-shadow: 0 0 22px color-mix(in srgb, var(--blue) 60%, transparent);
+}
+
+/* ---------- Bento ---------- */
+:root[data-theme="neon"] .bento-cell {
+  border-color: var(--neon-card-border);
+}
+:root[data-theme="neon"] .bento-cell--accent {
+  border-color: var(--accent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
+    0 0 40px -8px var(--accent-glow);
+}
+:root[data-theme="neon"] .bento-cell--accent .bento-heading {
+  text-shadow: 0 0 16px var(--accent-glow);
+}
+:root[data-theme="neon"] .bento-cell--blue {
+  border-color: var(--blue);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent),
+    0 0 36px -8px color-mix(in srgb, var(--blue) 55%, transparent);
+}
+:root[data-theme="neon"] .bento-cell--blue .bento-heading {
+  text-shadow: 0 0 14px color-mix(in srgb, var(--blue) 55%, transparent);
+}

package/themes/neon/components.css

@@ -0,0 +1,87 @@
+/* Pull in phosphor's core component CSS (KineticText, SectionCard, etc.) */
+/* Note: phosphor's components.css also @imports the 6 family files, but the
+   neon family overrides below come AFTER, so they win the cascade. */
+@import url('../phosphor/components.css');
+
+/* Neon — Layer-2 component overrides (per-family).
+   Each file @imports its phosphor counterpart, but browsers dedupe identical
+   @import URLs, so families are not loaded twice. */
+@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');
+
+/* -----------------------------------------------------------------------------
+ * Neon glow on core (KineticText / SectionCard / Counter / ShiftArrow / Compare)
+ * Body text stays glow-free; only accent lines, numbers, and bullets light up.
+ * --------------------------------------------------------------------------- */
+
+/* KineticText */
+:root[data-theme="neon"] .kinetic .line.accent {
+  text-shadow:
+    0 0 14px var(--accent-glow),
+    0 0 36px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+:root[data-theme="neon"] .kinetic .line.blue {
+  text-shadow:
+    0 0 14px color-mix(in srgb, var(--blue) 65%, transparent),
+    0 0 32px color-mix(in srgb, var(--blue) 28%, transparent);
+}
+:root[data-theme="neon"] .kinetic .line.amber {
+  text-shadow:
+    0 0 12px color-mix(in srgb, var(--amber) 50%, transparent);
+}
+
+/* SectionCard */
+:root[data-theme="neon"] .sec-title .accent {
+  text-shadow:
+    0 0 22px var(--accent-glow),
+    0 0 55px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+:root[data-theme="neon"] .sec-line {
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+  box-shadow: 0 0 8px var(--accent-glow);
+}
+
+/* Counter */
+:root[data-theme="neon"] .counter-num.accent {
+  text-shadow:
+    0 0 28px var(--accent-glow),
+    0 0 70px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+:root[data-theme="neon"] .counter-num.blue {
+  text-shadow:
+    0 0 26px color-mix(in srgb, var(--blue) 65%, transparent),
+    0 0 60px color-mix(in srgb, var(--blue) 28%, transparent);
+}
+:root[data-theme="neon"] .counter-label.accent .dot {
+  box-shadow: 0 0 10px var(--accent-glow);
+}
+:root[data-theme="neon"] .counter-label.blue .dot {
+  box-shadow: 0 0 10px color-mix(in srgb, var(--blue) 70%, transparent);
+}
+
+/* ShiftArrow */
+:root[data-theme="neon"] .shift-to {
+  text-shadow:
+    0 0 20px var(--accent-glow),
+    0 0 50px color-mix(in srgb, var(--accent) 30%, transparent);
+}
+:root[data-theme="neon"] .shift-arrow {
+  text-shadow: 0 0 18px var(--accent-glow);
+}
+
+/* Compare */
+:root[data-theme="neon"] .compare-h.new::before {
+  text-shadow: 0 0 12px var(--accent-glow);
+}
+:root[data-theme="neon"] .compare-list.accent li::before {
+  text-shadow: 0 0 10px var(--accent-glow);
+}
+
+/* ActivityList — accent words within names */
+:root[data-theme="neon"] .activity .name .accent {
+  text-shadow: 0 0 14px var(--accent-glow);
+}

package/themes/neon/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "neon",
+  "displayName": "Neon",
+  "description": "Cyberpunk, magenta + cyan, heavy glow.",
+  "fonts": [
+    "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap",
+    "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&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/neon/tokens.css

@@ -0,0 +1,17 @@
+/* Stagecraft — Neon theme tokens */
+:root[data-theme="neon"] {
+  --bg: #060214;
+  --bg-elevated: #0F0726;
+  --fg: #F0E9FF;
+  --dim: #6A5D9C;
+  --dim-2: #261A4E;
+  --accent: #FF2DE6;          /* magenta */
+  --accent-soft: rgba(255, 45, 230, 0.15);
+  --accent-glow: rgba(255, 45, 230, 0.6);
+  --blue: #00E0FF;            /* cyan */
+  --amber: #FFE94A;
+  --red: #FF4F77;
+  --mono: 'JetBrains Mono', ui-monospace, monospace;
+  --display: 'Space Grotesk', system-ui, sans-serif;
+  --body: 'Space Grotesk', system-ui, sans-serif;
+}

package/themes/neon/transitions.css

@@ -0,0 +1,13 @@
+@import url('../phosphor/transitions.css');
+
+/* Neon: pinker glitch with cyan ghosting */
+:root[data-theme="neon"] .tx-glitch-overlay {
+  background:
+    repeating-linear-gradient(
+      0deg,
+      rgba(255, 45, 230, 0.08) 0,
+      rgba(255, 45, 230, 0.08) 1px,
+      transparent 1px,
+      transparent 3px
+    );
+}

package/themes/paper/base.css

@@ -0,0 +1,9 @@
+/* Paper theme — base styles. Token-driven, so most rules inherit from phosphor/base.css
+ * (you should also link that file). This file overrides anything paper-specific. */
+
+@import url('../phosphor/base.css');
+
+:root[data-theme="paper"] body::before,
+:root[data-theme="paper"] body::after { display: none; }
+
+:root[data-theme="paper"] .caret { animation: none; background: var(--accent); }

package/themes/paper/components-business.css

@@ -0,0 +1,196 @@
+/* Stagecraft — Paper theme: business / marketing component overrides. */
+@import url('../phosphor/components-business.css');
+
+/* ---------------------------------------------------------------------------
+ * Pricing
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .pricing-tier {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .pricing-tier--featured {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+:root[data-theme="paper"] .pricing-badge {
+  background: var(--accent);
+  color: #FFFFFF;
+  box-shadow: none;
+}
+:root[data-theme="paper"] .pricing-tier--featured .pricing-price {
+  color: var(--accent);
+  text-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Testimonial
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .testimonial-photo-wrap {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+  box-shadow: 0 8px 24px -12px rgba(31, 79, 135, 0.25);
+}
+:root[data-theme="paper"] .testimonial-mark {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--mono); /* serif quote mark */
+}
+:root[data-theme="paper"] .testimonial-quote {
+  font-family: var(--mono); /* serif italic for editorial body */
+}
+
+/* ---------------------------------------------------------------------------
+ * TeamGrid
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .team-card {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .team-photo-wrap {
+  background: #F4F4EF;
+  border: 1px solid var(--dim-2);
+}
+
+/* ---------------------------------------------------------------------------
+ * Agenda
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .agenda-dot {
+  background: #FFFFFF;
+  border: 1px solid var(--accent);
+  box-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Checklist
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .checklist-item {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .checklist-item.is-done {
+  border-color: color-mix(in srgb, var(--accent) 35%, var(--dim-2));
+}
+:root[data-theme="paper"] .checklist-item.is-done .checklist-box {
+  color: var(--accent);
+  text-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Steps
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .step-card {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .step-numeral {
+  text-shadow: none;
+  font-family: var(--mono); /* serif numeral for editorial feel */
+}
+
+/* ---------------------------------------------------------------------------
+ * CTA
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .cta {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .cta--accent {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+  background:
+    linear-gradient(135deg, var(--accent-soft), transparent 55%),
+    #FFFFFF;
+}
+:root[data-theme="paper"] .cta-button {
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  background: transparent;
+}
+:root[data-theme="paper"] .cta--accent .cta-button {
+  background: var(--accent);
+  color: #FFFFFF;
+  box-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Callout
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .callout {
+  background: #FFFFFF;
+  border-left: 4px solid var(--dim-2);
+}
+:root[data-theme="paper"] .callout--info {
+  background: linear-gradient(90deg, rgba(31, 79, 135, 0.06), transparent 40%), #FFFFFF;
+  border-left-color: var(--blue);
+}
+:root[data-theme="paper"] .callout--tip {
+  background: linear-gradient(90deg, var(--accent-soft), transparent 45%), #FFFFFF;
+  border-left-color: var(--accent);
+}
+:root[data-theme="paper"] .callout--warning {
+  background: linear-gradient(90deg, rgba(181, 127, 44, 0.08), transparent 40%), #FFFFFF;
+  border-left-color: var(--amber);
+}
+:root[data-theme="paper"] .callout--danger {
+  background: linear-gradient(90deg, rgba(155, 44, 44, 0.07), transparent 40%), #FFFFFF;
+  border-left-color: var(--red);
+}
+:root[data-theme="paper"] .callout--success {
+  background: linear-gradient(90deg, var(--accent-soft), transparent 50%), #FFFFFF;
+  border-left-color: var(--accent);
+}
+:root[data-theme="paper"] .callout--success .callout-icon {
+  text-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Tip
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .tip {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .tip--info    { border-color: rgba(31, 79, 135, 0.4); }
+:root[data-theme="paper"] .tip--tip     { border-color: rgba(31, 79, 135, 0.4); }
+:root[data-theme="paper"] .tip--warning { border-color: rgba(181, 127, 44, 0.45); }
+:root[data-theme="paper"] .tip--danger  { border-color: rgba(155, 44, 44, 0.45); }
+:root[data-theme="paper"] .tip--success {
+  border-color: var(--accent);
+  background: linear-gradient(135deg, var(--accent-soft), transparent 60%), #FFFFFF;
+}
+:root[data-theme="paper"] .tip--success .tip-icon {
+  text-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * BeforeAfter
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .ba-col {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .ba-col.ba-after {
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--dim-2));
+}
+:root[data-theme="paper"] .ba-arrow {
+  text-shadow: none;
+}
+
+:root[data-theme="paper"] .before-after--image {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .ba-tag {
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid var(--dim-2);
+  color: var(--fg);
+}
+:root[data-theme="paper"] .ba-tag--accent {
+  color: var(--accent);
+  border-color: var(--accent);
+  box-shadow: none;
+}
+:root[data-theme="paper"] .before-after--image .ba-divider {
+  background: var(--accent);
+  box-shadow: none;
+}

package/themes/paper/components-chart.css

@@ -0,0 +1,74 @@
+/* Stagecraft — Paper theme: chart/relationship component overrides. */
+@import url('../phosphor/components-chart.css');
+
+/* ============================================================
+ * Matrix2x2
+ * ============================================================ */
+:root[data-theme="paper"] .matrix2x2 .grid {
+  background: var(--dim-2);
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .matrix2x2 .quadrant {
+  background: #FFFFFF;
+  filter: saturate(0.7);
+}
+:root[data-theme="paper"] .matrix2x2 .quadrant.active {
+  background: color-mix(in srgb, var(--q-color, var(--accent)) 8%, #FFFFFF);
+  box-shadow: inset 0 0 0 1px var(--q-color, var(--accent));
+}
+
+/* ============================================================
+ * BarChart
+ * ============================================================ */
+:root[data-theme="paper"] .barchart .bar-track {
+  background: var(--dim-2);
+}
+:root[data-theme="paper"] .barchart .bar-fill {
+  /* drop glow */
+  box-shadow: none;
+}
+
+/* ============================================================
+ * Progress
+ * ============================================================ */
+:root[data-theme="paper"] .progress-track {
+  background: var(--dim-2);
+}
+:root[data-theme="paper"] .progress-fill {
+  box-shadow: none;
+}
+
+/* ============================================================
+ * ProcessFlow
+ * ============================================================ */
+:root[data-theme="paper"] .processflow {
+  --pf-card-bg: #FFFFFF;
+  --pf-card-border: var(--dim-2);
+}
+:root[data-theme="paper"] .processflow .pf-step {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .processflow .pf-arrow.pulse {
+  /* dampen pulse: no glow shadow */
+  animation: pf-pulse-paper 900ms ease-out;
+}
+@keyframes pf-pulse-paper {
+  0%   { transform: scale(1); }
+  40%  { transform: scale(1.18); }
+  100% { transform: scale(1); }
+}
+
+/* ============================================================
+ * Venn — fills already use --accent / --blue etc.; just brighten labels
+ * ============================================================ */
+:root[data-theme="paper"] .venn .v-circle {
+  fill-opacity: 0.14;
+  stroke-width: 1.5;
+}
+:root[data-theme="paper"] .venn .v-label.set .name {
+  background: #FFFFFF;
+}
+:root[data-theme="paper"] .venn .v-label.overlap > span {
+  background: rgba(255, 255, 255, 0.85);
+}

package/themes/paper/components-content.css

@@ -0,0 +1,108 @@
+/* Stagecraft — Paper theme: content/typography component overrides. */
+@import url('../phosphor/components-content.css');
+
+/* ---------------------------------------------------------------------------
+ * Statement — no glow on emphasized words
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .statement .st-em {
+  color: var(--accent);
+  text-shadow: none;
+}
+:root[data-theme="paper"] .statement .st-em--amber { color: var(--amber); text-shadow: none; }
+:root[data-theme="paper"] .statement .st-em--blue  { color: var(--blue);  text-shadow: none; }
+
+/* ---------------------------------------------------------------------------
+ * QandA
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .qa-q {
+  color: var(--amber);
+  font-family: var(--mono); /* serif italic question */
+}
+:root[data-theme="paper"] .qa-a {
+  color: var(--accent);
+  text-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Manifesto
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .mf-num {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--mono); /* serif numeral */
+}
+:root[data-theme="paper"] .mf-item {
+  border-bottom: 1px solid var(--dim-2);
+}
+
+/* ---------------------------------------------------------------------------
+ * Punchline
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .pl-payoff {
+  color: var(--accent);
+  text-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Definition — feels academic already; just polish
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .df-term {
+  font-family: var(--mono); /* serif headword */
+}
+:root[data-theme="paper"] .df-pos {
+  font-family: var(--mono); /* italic serif pos */
+}
+:root[data-theme="paper"] .df-def::before {
+  color: var(--accent);
+}
+:root[data-theme="paper"] .df-mark {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+/* ---------------------------------------------------------------------------
+ * ImageGrid
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .ig-frame {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .ig-frame::after {
+  /* drop the dark inner cast; keep just a hint of paper drop shadow */
+  box-shadow:
+    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
+    0 12px 26px -16px rgba(31, 79, 135, 0.2);
+}
+:root[data-theme="paper"] .ig-img {
+  filter: saturate(0.85) contrast(1.02);
+}
+
+/* ---------------------------------------------------------------------------
+ * Spotlight — drop the heavy shadow stack
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .sp-focus {
+  background: #FFFFFF;
+  border: 1px solid var(--accent);
+  box-shadow:
+    0 0 0 1px var(--accent-soft),
+    0 16px 40px -22px rgba(31, 79, 135, 0.25);
+}
+:root[data-theme="paper"] .sp-icon {
+  color: var(--accent);
+  text-shadow: none;
+}
+:root[data-theme="paper"] .sp-heading {
+  color: var(--accent);
+}
+
+/* ---------------------------------------------------------------------------
+ * Marquee — calmer accent row, no green glow
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .marquee {
+  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,1) 6%, rgba(0,0,0,1) 94%, transparent 100%);
+}
+:root[data-theme="paper"] .mq-track--b .mq-item {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--mono); /* serif italic emphasis row */
+}