stagecraft 0.1.0

package/themes/paper/components-data.css

@@ -0,0 +1,168 @@
+/* Stagecraft — Paper theme: data-visualization component overrides. */
+@import url('../phosphor/components-data.css');
+
+/* ============================================================
+ * KPI — white card, thin border, no glow
+ * ============================================================ */
+:root[data-theme="paper"] .kpi {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .kpi.in {
+  border-color: color-mix(in srgb, var(--data-color) 50%, var(--dim-2));
+  box-shadow: none;
+}
+:root[data-theme="paper"] .kpi-num {
+  text-shadow: none;
+}
+
+/* ============================================================
+ * DonutChart
+ * ============================================================ */
+:root[data-theme="paper"] .donut-arc {
+  filter: none;
+}
+:root[data-theme="paper"] .donut-dot {
+  box-shadow: none;
+}
+
+/* ============================================================
+ * LineChart
+ * ============================================================ */
+:root[data-theme="paper"] .lc-grid {
+  stroke: var(--dim-2);
+  opacity: 0.9;
+}
+:root[data-theme="paper"] .lc-y-label,
+:root[data-theme="paper"] .lc-x-label {
+  font-family: var(--display);
+}
+:root[data-theme="paper"] .lc-line {
+  filter: none;
+}
+:root[data-theme="paper"] .lc-dot-leg {
+  box-shadow: none;
+}
+
+/* ============================================================
+ * Gauge
+ * ============================================================ */
+:root[data-theme="paper"] .g-fill {
+  filter: none;
+}
+:root[data-theme="paper"] .g-tick {
+  stroke: var(--dim);
+  opacity: 0.6;
+}
+:root[data-theme="paper"] .g-num {
+  text-shadow: none;
+}
+
+/* ============================================================
+ * SparkLine — white card
+ * ============================================================ */
+:root[data-theme="paper"] .sparkline {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .sl-num {
+  text-shadow: none;
+}
+:root[data-theme="paper"] .sl-line {
+  filter: none;
+}
+
+/* ============================================================
+ * Heatmap — accent shades on light bg
+ * ============================================================ */
+:root[data-theme="paper"] .hm-cell {
+  /* base track is dim-2; intensity layers --hm-base over it */
+  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 90%), #ECECE8);
+  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 35%), var(--dim-2));
+}
+:root[data-theme="paper"] .hm-scale-step {
+  background: color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 90%), #ECECE8);
+  border: 1px solid color-mix(in srgb, var(--hm-base) calc(var(--hm-intensity) * 35%), var(--dim-2));
+}
+
+/* ============================================================
+ * Roadmap
+ * ============================================================ */
+:root[data-theme="paper"] .rm-lane-track {
+  background:
+    repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc((100% / var(--rm-cols, 12)) - 1px),
+      var(--dim-2) calc((100% / var(--rm-cols, 12)) - 1px),
+      var(--dim-2) calc(100% / var(--rm-cols, 12))
+    ),
+    #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .rm-bar {
+  background: color-mix(in srgb, var(--rm-bar-color) 14%, #FFFFFF);
+  border: 1px solid color-mix(in srgb, var(--rm-bar-color) 65%, var(--dim-2));
+  /* no glow shadow */
+  box-shadow: inset 3px 0 0 var(--rm-bar-color);
+}
+
+/* ============================================================
+ * SWOT — light fills, no glow letters
+ * ============================================================ */
+:root[data-theme="paper"] .swot {
+  background: var(--dim-2);
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .swot-cell {
+  background: #FFFFFF;
+}
+:root[data-theme="paper"] .swot-cell.in {
+  background: color-mix(in srgb, var(--swot-color) 6%, #FFFFFF);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--swot-color) 50%, var(--dim-2));
+}
+:root[data-theme="paper"] .swot-letter {
+  text-shadow: none;
+  font-family: var(--mono); /* serif for swot letter accent */
+}
+
+/* ============================================================
+ * CodeBlock — terminal look on light background.
+ * CodeBlock stays monospaced because it's code.
+ * ============================================================ */
+:root[data-theme="paper"] .codeblock {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .cb-head {
+  background: #F4F4EF;
+  border-bottom: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .cb-line--highlight {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  box-shadow: inset 2px 0 0 var(--accent);
+}
+
+/* ============================================================
+ * CodeDiff — same, monospaced
+ * ============================================================ */
+:root[data-theme="paper"] .codediff {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .cd-head {
+  background: #F4F4EF;
+  border-bottom: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .cd-line--add {
+  background: color-mix(in srgb, var(--accent) 9%, transparent);
+}
+:root[data-theme="paper"] .cd-line--add .cd-text {
+  color: color-mix(in srgb, var(--accent) 35%, var(--fg));
+}
+:root[data-theme="paper"] .cd-line--remove {
+  background: color-mix(in srgb, var(--red) 8%, transparent);
+}
+:root[data-theme="paper"] .cd-line--remove .cd-text {
+  color: color-mix(in srgb, var(--red) 35%, var(--fg));
+}

package/themes/paper/components-diagram.css

@@ -0,0 +1,89 @@
+/* Stagecraft — Paper theme: diagram component overrides. */
+@import url('../phosphor/components-diagram.css');
+
+/* Local card vars for paper look */
+:root[data-theme="paper"] {
+  --diag-card-bg: #FFFFFF;
+  --diag-card-border: var(--dim-2);
+}
+
+/* ===========================================================================
+ * Pillars
+ * ===========================================================================*/
+:root[data-theme="paper"] .pillar:hover .pillar-icon {
+  /* drop drop-shadow glow */
+  animation: none;
+}
+:root[data-theme="paper"] .pillar-icon {
+  color: var(--accent);
+}
+:root[data-theme="paper"] .pillars-intro {
+  font-family: var(--mono); /* serif emphasis */
+}
+
+/* ===========================================================================
+ * Timeline
+ * ===========================================================================*/
+:root[data-theme="paper"] .tl-dot {
+  background: #FFFFFF;
+  border: 1px solid var(--dim);
+}
+:root[data-theme="paper"] .tl-event.active .tl-dot {
+  background: var(--accent);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 4px var(--accent-soft);
+}
+:root[data-theme="paper"] .tl-icon {
+  color: #FFFFFF;
+}
+:root[data-theme="paper"] .tl-event:not(.active) .tl-icon { color: var(--dim); }
+
+/* ===========================================================================
+ * Pyramid
+ * ===========================================================================*/
+:root[data-theme="paper"] .pyr-shape {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .pyr-layer.pyc-accent .pyr-shape {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+:root[data-theme="paper"] .pyr-layer.pyc-blue   .pyr-shape { background: rgba(31, 79, 135, 0.08); border-color: var(--blue); }
+:root[data-theme="paper"] .pyr-layer.pyc-amber  .pyr-shape { background: rgba(181, 127, 44, 0.10); border-color: var(--amber); }
+:root[data-theme="paper"] .pyr-layer.pyc-red    .pyr-shape { background: rgba(155, 44, 44, 0.08); border-color: var(--red); }
+
+/* ===========================================================================
+ * Cycle
+ * ===========================================================================*/
+:root[data-theme="paper"] .cyc-ring {
+  stroke: var(--dim-2);
+  opacity: 0.8;
+}
+:root[data-theme="paper"] .cyc-arc {
+  stroke: var(--accent);
+  opacity: 0;
+}
+:root[data-theme="paper"] .cyc-arc.in { opacity: 0.8; }
+:root[data-theme="paper"] .cyc-item {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .cyc-item.cyc-accent { border-color: var(--accent); }
+:root[data-theme="paper"] .cyc-item.cyc-blue   { border-color: var(--blue); }
+:root[data-theme="paper"] .cyc-item.cyc-amber  { border-color: var(--amber); }
+:root[data-theme="paper"] .cyc-item.cyc-red    { border-color: var(--red); }
+
+/* ===========================================================================
+ * Funnel
+ * ===========================================================================*/
+:root[data-theme="paper"] .fn-shape {
+  background: #FFFFFF;
+  border-top: 1px solid var(--dim-2);
+  border-bottom: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .fn-stage.fnc-accent .fn-shape { background: var(--accent-soft); border-color: var(--accent); }
+:root[data-theme="paper"] .fn-stage.fnc-blue   .fn-shape { background: rgba(31, 79, 135, 0.08); border-color: var(--blue); }
+:root[data-theme="paper"] .fn-stage.fnc-amber  .fn-shape { background: rgba(181, 127, 44, 0.10); border-color: var(--amber); }
+:root[data-theme="paper"] .fn-stage.fnc-red    .fn-shape { background: rgba(155, 44, 44, 0.08); border-color: var(--red); }
+:root[data-theme="paper"] .fn-stage.fnc-dim    .fn-shape { background: rgba(0,0,0,0.02); border-color: var(--dim-2); }

package/themes/paper/components-layout.css

@@ -0,0 +1,105 @@
+/* Stagecraft — Paper theme: layout component overrides. */
+@import url('../phosphor/components-layout.css');
+
+/* ---------------------------------------------------------------------------
+ * ImageText
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .it-figure {
+  background: #FFFFFF;
+}
+:root[data-theme="paper"] .it-img {
+  /* warmer print-like rendering */
+  filter: saturate(0.85) contrast(1.02);
+}
+:root[data-theme="paper"] .it-img-frame {
+  /* drop the green accent glow + heavy dark dropshadow; use thin grey rule */
+  box-shadow:
+    inset 0 0 0 1px var(--dim-2),
+    0 0 0 1px var(--dim-2),
+    0 12px 28px -16px rgba(31, 79, 135, 0.18);
+}
+
+/* ---------------------------------------------------------------------------
+ * FullImage — scrims need to come from light not dark
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .fi-scrim--center       { background: radial-gradient(ellipse at center, rgba(250,250,247,0.55) 0%, rgba(250,250,247,0.05) 70%); }
+:root[data-theme="paper"] .fi-scrim--top          { background: linear-gradient(180deg, rgba(250,250,247,0.85), transparent 55%); }
+:root[data-theme="paper"] .fi-scrim--bottom-left  { background: linear-gradient(45deg, rgba(250,250,247,0.92), transparent 65%); }
+:root[data-theme="paper"] .fi-scrim--bottom-right { background: linear-gradient(315deg, rgba(250,250,247,0.92), transparent 65%); }
+
+:root[data-theme="paper"] .fi-headline {
+  color: var(--fg);
+  text-shadow: 0 1px 14px rgba(255,255,255,0.55);
+}
+:root[data-theme="paper"] .fi-body {
+  color: var(--fg);
+}
+
+/* ---------------------------------------------------------------------------
+ * Quote
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .q-mark {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--mono); /* Source Serif quote marks */
+}
+:root[data-theme="paper"] .q-text {
+  font-family: var(--mono); /* serif for editorial italic */
+}
+
+/* ---------------------------------------------------------------------------
+ * BigNumber
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .bn-num {
+  color: var(--accent);
+  text-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Stats
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .stat {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .stat::before {
+  height: 2px;
+}
+:root[data-theme="paper"] .stat--accent::before {
+  background: var(--accent);
+  box-shadow: none;
+}
+:root[data-theme="paper"] .stat--accent .stat-num {
+  color: var(--accent);
+  text-shadow: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Bento
+ * ------------------------------------------------------------------------- */
+:root[data-theme="paper"] .bento-cell {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .bento-cell--accent {
+  border-color: var(--accent);
+  box-shadow: none;
+  background: var(--accent-soft);
+}
+:root[data-theme="paper"] .bento-cell--accent .bento-heading { color: var(--accent); }
+:root[data-theme="paper"] .bento-cell--amber {
+  border-color: rgba(181, 127, 44, 0.45);
+  background: rgba(181, 127, 44, 0.06);
+}
+:root[data-theme="paper"] .bento-cell--blue {
+  border-color: rgba(31, 79, 135, 0.4);
+  background: rgba(31, 79, 135, 0.05);
+}
+:root[data-theme="paper"] .bento-cell--image .bento-heading {
+  color: #FFFFFF;
+  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
+}
+:root[data-theme="paper"] .bento-cell--image .bento-body {
+  color: #FFFFFF;
+  opacity: 0.9;
+}

package/themes/paper/components.css

@@ -0,0 +1,60 @@
+/* Stagecraft — Paper theme: Layer-2 component styles.
+ * Imports phosphor base layer + paper-specific family sub-files. */
+
+@import url('../phosphor/components.css');
+@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');
+
+/* --- Generic paper softening of phosphor-base components --- */
+
+/* Pre-label dot: no pulse animation, calm static accent block */
+:root[data-theme="paper"] .pre-label .dot { animation: none; }
+
+/* Storyboard dots: no glow */
+:root[data-theme="paper"] .ui-dots .dot.active { box-shadow: none; }
+
+/* Caret: no blink, no glow */
+:root[data-theme="paper"] .caret { animation: none; background: var(--accent); box-shadow: none; }
+
+/* Storyboard overview header — light backdrop */
+:root[data-theme="paper"] .overview-header {
+  background: rgba(250, 250, 247, 0.92);
+  border-bottom: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .tile {
+  background: #FFFFFF;
+  border: 1px solid var(--dim-2);
+}
+:root[data-theme="paper"] .tile.current {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+}
+:root[data-theme="paper"] .tile-num {
+  background: rgba(255, 255, 255, 0.85);
+  font-family: var(--display);
+}
+:root[data-theme="paper"] .tile-label {
+  background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 0));
+  color: var(--fg);
+  font-family: var(--display);
+}
+
+/* Edit-mode ring — subtle navy */
+:root[data-theme="paper"] body.edit-mode #stage::after {
+  box-shadow: inset 0 0 30px var(--accent-soft);
+}
+
+/* UI chrome family — Inter, no monospace */
+:root[data-theme="paper"] .ui { font-family: var(--display); }
+
+/* ShiftArrow — strikethrough darker since light bg */
+:root[data-theme="paper"] .shift-from { text-decoration-color: var(--dim); }
+
+/* Compare divider gradient: works on light bg already */
+:root[data-theme="paper"] .compare-divider {
+  background: linear-gradient(to bottom, transparent, var(--dim-2) 20%, var(--dim-2) 80%, transparent);
+}

package/themes/paper/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "paper",
+  "displayName": "Paper",
+  "description": "Light, minimal, academic. Inter sans + serif accents.",
+  "fonts": [
+    "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Source+Serif+4:ital,wght@0,400;0,500;1,400&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"],
+  "effects": null
+}

package/themes/paper/tokens.css

@@ -0,0 +1,21 @@
+/* Stagecraft — Paper theme tokens */
+:root[data-theme="paper"] {
+  --bg: #FAFAF7;
+  --bg-elevated: #FFFFFF;
+  --fg: #1F1F1F;
+  --dim: #888888;
+  --dim-2: #DCDCD8;
+  --accent: #1F4F87;            /* navy */
+  --accent-soft: rgba(31, 79, 135, 0.08);
+  --accent-glow: rgba(31, 79, 135, 0.18);
+  --blue: #1F4F87;
+  --amber: #B57F2C;
+  --red: #9B2C2C;
+  --mono: 'Source Serif 4', 'IBM Plex Serif', Georgia, serif;
+  --display: 'Inter', system-ui, sans-serif;
+  --body: 'Inter', system-ui, sans-serif;
+}
+
+/* Paper theme has no film grain, no ambient gradient */
+:root[data-theme="paper"] body::before,
+:root[data-theme="paper"] body::after { display: none; }

package/themes/paper/transitions.css

@@ -0,0 +1,11 @@
+@import url('../phosphor/transitions.css');
+
+/* Paper-specific: subtler glitch (no green scanlines) */
+:root[data-theme="paper"] .tx-glitch-overlay { display: none; }
+:root[data-theme="paper"] .tx-glitch-enter {
+  animation: tx-paper-glitch 400ms steps(4, end) both;
+}
+@keyframes tx-paper-glitch {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}