stagecraft 0.1.0

package/themes/shopware/components-layout.css

@@ -0,0 +1,166 @@
+/* Stagecraft — Shopware theme: layout component overrides.
+ *
+ * Light Meteor product look: white cards, 1px zinc borders that turn brand
+ * blue on hover, subtle shadows, Inter throughout, no glow on text.
+ */
+@import url('../phosphor/components-layout.css');
+
+/* ---------------------------------------------------------------------------
+ * ImageText
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .it-figure {
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+}
+:root[data-theme="shopware"] .it-img {
+  filter: none;
+}
+:root[data-theme="shopware"] .it-img-frame {
+  border-radius: var(--radius-md);
+  box-shadow:
+    inset 0 0 0 1px var(--border-primary),
+    var(--shadow-md);
+}
+:root[data-theme="shopware"] .it-heading {
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+:root[data-theme="shopware"] .it-line { color: var(--fg); font-family: var(--body); }
+:root[data-theme="shopware"] .it-caption { color: var(--dim); }
+
+/* ---------------------------------------------------------------------------
+ * FullImage — light scrims for light theme
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .fi-scrim--center       { background: radial-gradient(ellipse at center, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.05) 70%); }
+:root[data-theme="shopware"] .fi-scrim--top          { background: linear-gradient(180deg, rgba(255,255,255,0.88), transparent 55%); }
+:root[data-theme="shopware"] .fi-scrim--bottom-left  { background: linear-gradient(45deg, rgba(255,255,255,0.92), transparent 65%); }
+:root[data-theme="shopware"] .fi-scrim--bottom-right { background: linear-gradient(315deg, rgba(255,255,255,0.92), transparent 65%); }
+
+:root[data-theme="shopware"] .fi-headline {
+  color: var(--fg);
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  text-shadow: 0 1px 14px rgba(255,255,255,0.6);
+}
+:root[data-theme="shopware"] .fi-body {
+  color: var(--fg);
+  font-family: var(--body);
+}
+
+/* ---------------------------------------------------------------------------
+ * Quote — sans-serif at weight 600, no italic, brand-blue marks
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .q-mark {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 600;
+}
+:root[data-theme="shopware"] .q-text {
+  font-family: var(--display);
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  color: var(--fg);
+}
+:root[data-theme="shopware"] .q-author { color: var(--fg); font-weight: 600; }
+:root[data-theme="shopware"] .q-role,
+:root[data-theme="shopware"] .q-source { color: var(--dim); }
+:root[data-theme="shopware"] .q-sep    { color: var(--border-primary); }
+
+/* ---------------------------------------------------------------------------
+ * BigNumber — brand blue, no glow
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .bn-num {
+  color: var(--accent);
+  text-shadow: none;
+  font-family: var(--display);
+  font-weight: 600;
+}
+:root[data-theme="shopware"] .bn-unit  { color: var(--dim); font-family: var(--display); }
+:root[data-theme="shopware"] .bn-label { color: var(--fg); font-family: var(--display); }
+:root[data-theme="shopware"] .bn-caption { color: var(--dim); }
+
+/* ---------------------------------------------------------------------------
+ * Stats — white card, 1px border, brand stripe on top
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .stat {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
+    border-color 200ms ease, box-shadow 200ms ease;
+}
+:root[data-theme="shopware"] .stat:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .stat::before {
+  height: 2px;
+  background: var(--border-primary);
+  border-top-left-radius: var(--radius-md);
+  border-top-right-radius: var(--radius-md);
+}
+:root[data-theme="shopware"] .stat--accent::before { background: var(--accent);  box-shadow: none; }
+:root[data-theme="shopware"] .stat--amber::before  { background: var(--amber);   }
+:root[data-theme="shopware"] .stat--blue::before   { background: var(--blue);    }
+:root[data-theme="shopware"] .stat--red::before    { background: var(--red);     }
+
+:root[data-theme="shopware"] .stat-num    { color: var(--fg); text-shadow: none; font-family: var(--display); font-weight: 600; }
+:root[data-theme="shopware"] .stat-unit   { color: var(--dim); }
+:root[data-theme="shopware"] .stat--accent .stat-num { color: var(--accent); text-shadow: none; }
+:root[data-theme="shopware"] .stat--amber  .stat-num { color: var(--amber);  }
+:root[data-theme="shopware"] .stat--blue   .stat-num { color: var(--blue);   }
+:root[data-theme="shopware"] .stat--red    .stat-num { color: var(--red);    }
+:root[data-theme="shopware"] .stat-label   { color: var(--dim); }
+
+/* ---------------------------------------------------------------------------
+ * Bento — soft tinted backgrounds per color, white default
+ * ------------------------------------------------------------------------- */
+:root[data-theme="shopware"] .bento-cell {
+  background: var(--bg);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  transition: opacity 700ms ease-out, transform 800ms cubic-bezier(0.16, 1, 0.3, 1),
+    border-color 200ms ease, box-shadow 200ms ease;
+}
+:root[data-theme="shopware"] .bento-cell:hover {
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
+}
+:root[data-theme="shopware"] .bento-cell--accent {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  box-shadow: var(--shadow-sm);
+}
+:root[data-theme="shopware"] .bento-cell--accent .bento-heading { color: var(--accent); }
+:root[data-theme="shopware"] .bento-cell--amber  {
+  border-color: color-mix(in srgb, var(--amber) 45%, var(--border-primary));
+  background: var(--amber-soft);
+}
+:root[data-theme="shopware"] .bento-cell--amber  .bento-heading { color: var(--amber); }
+:root[data-theme="shopware"] .bento-cell--blue   {
+  border-color: color-mix(in srgb, var(--blue) 45%, var(--border-primary));
+  background: var(--blue-soft);
+}
+:root[data-theme="shopware"] .bento-cell--blue   .bento-heading { color: var(--blue); }
+
+:root[data-theme="shopware"] .bento-cell--image .bento-heading {
+  color: #ffffff;
+  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
+}
+:root[data-theme="shopware"] .bento-cell--image .bento-body {
+  color: #ffffff;
+  opacity: 0.92;
+}
+
+:root[data-theme="shopware"] .bento-heading {
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+:root[data-theme="shopware"] .bento-body { color: var(--dim); font-family: var(--body); }

package/themes/shopware/components.css

@@ -0,0 +1,83 @@
+/* Stagecraft — Shopware theme component overrides.
+ *
+ * Cascade: phosphor base components (unscoped) → shopware family overrides
+ * (scoped by :root[data-theme="shopware"]).
+ */
+
+@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');
+
+/* -----------------------------------------------------------------------------
+ * Core 6 overrides (KineticText, SectionCard, ActivityList, Compare, Counter,
+ * ShiftArrow) for the Shopware brand
+ * --------------------------------------------------------------------------- */
+
+/* KineticText — Inter, no glow, brand-blue for accent lines */
+:root[data-theme="shopware"] .kinetic .line {
+  font-family: var(--display);
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+:root[data-theme="shopware"] .kinetic .line.accent { color: var(--accent); }
+:root[data-theme="shopware"] .kinetic .line.dim { color: var(--dim); }
+:root[data-theme="shopware"] .kinetic .line.amber { color: var(--amber); }
+:root[data-theme="shopware"] .kinetic .line.blue { color: var(--blue); }
+
+/* SectionCard — clean number-rule-title-tag pattern with brand */
+:root[data-theme="shopware"] .sec-num { color: var(--dim); }
+:root[data-theme="shopware"] .sec-line { background: var(--border-primary); }
+:root[data-theme="shopware"] .sec-title {
+  color: var(--fg);
+  font-weight: 600;
+}
+:root[data-theme="shopware"] .sec-title .accent { color: var(--accent); }
+:root[data-theme="shopware"] .sec-tag { color: var(--dim); font-style: italic; }
+
+/* ActivityList */
+:root[data-theme="shopware"] .activity .num {
+  color: var(--accent);
+  font-weight: 600;
+  letter-spacing: 0.15em;
+}
+:root[data-theme="shopware"] .activity .name { font-weight: 600; }
+:root[data-theme="shopware"] .activity .name .accent { color: var(--accent); }
+:root[data-theme="shopware"] .activity .desc { color: var(--dim); }
+
+/* Compare */
+:root[data-theme="shopware"] .compare-h.old::before { color: var(--dim); }
+:root[data-theme="shopware"] .compare-h.new::before { color: var(--accent); }
+:root[data-theme="shopware"] .compare-list { color: var(--fg); }
+:root[data-theme="shopware"] .compare-list.strikethrough li { color: var(--dim); }
+:root[data-theme="shopware"] .compare-list.accent li::before { color: var(--accent); }
+:root[data-theme="shopware"] .compare-divider {
+  background: linear-gradient(to bottom, transparent, var(--border-primary) 20%, var(--border-primary) 80%, transparent);
+}
+
+/* Counter — large brand number, no glow */
+:root[data-theme="shopware"] .counter-num { color: var(--fg); font-weight: 600; }
+:root[data-theme="shopware"] .counter-num.accent { color: var(--accent); }
+:root[data-theme="shopware"] .counter-num.amber { color: var(--amber); }
+:root[data-theme="shopware"] .counter-num.blue { color: var(--blue); }
+:root[data-theme="shopware"] .counter-num.red { color: var(--red); }
+:root[data-theme="shopware"] .counter-label { color: var(--dim); }
+:root[data-theme="shopware"] .counter-label.accent .dot { background: var(--accent); box-shadow: none; }
+:root[data-theme="shopware"] .counter-label.amber .dot { background: var(--amber); }
+:root[data-theme="shopware"] .counter-label.blue .dot { background: var(--blue); }
+:root[data-theme="shopware"] .counter-label.red .dot { background: var(--red); }
+:root[data-theme="shopware"] .counter-foot { color: var(--dim); }
+:root[data-theme="shopware"] .counter-foot .accent { color: var(--accent); }
+
+/* ShiftArrow */
+:root[data-theme="shopware"] .shift-from {
+  color: var(--dim);
+  text-decoration-color: var(--dim-2);
+  font-weight: 500;
+}
+:root[data-theme="shopware"] .shift-to { color: var(--accent); font-weight: 600; }
+:root[data-theme="shopware"] .shift-arrow { color: var(--accent); }

package/themes/shopware/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "shopware",
+  "displayName": "Shopware",
+  "description": "Official Shopware brand. Light, Inter, brand-blue, Meteor design tokens.",
+  "fonts": [
+    "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&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/shopware/tokens.css

@@ -0,0 +1,68 @@
+/* Stagecraft — Shopware theme tokens
+ *
+ * Sourced from the Meteor design system (@shopware-ag/meteor-tokens v1.4.0)
+ * which is Shopware's official open-source token system.
+ *   Brand: #0870ff (brand/500)
+ *   Family palette: blue · zinc · slate · purple · pumpkin · pink · yellow · cyan · emerald
+ *
+ * https://shopware.design/tokens/  ·  https://github.com/shopware/meteor
+ */
+:root[data-theme="shopware"] {
+  /* Surface — soft white-on-light-grey hierarchy */
+  --bg: #ffffff;                    /* zinc/0 */
+  --bg-elevated: #fafbfe;            /* zinc/50 */
+  --bg-tertiary: #f2f3f8;            /* zinc/75 */
+
+  /* Text */
+  --fg: #1e1e24;                     /* zinc/900 */
+  --dim: #696a6e;                    /* zinc/600 */
+  --dim-2: #e2e3e9;                  /* zinc/100 — used for borders + faint lines */
+
+  /* Brand */
+  --accent: #0870ff;                 /* brand/500 — the signature Shopware blue */
+  --accent-hover: #005cd7;           /* brand/600 */
+  --accent-pressed: #0042a0;         /* brand/700 */
+  --accent-soft: #f0f6ff;            /* brand/50 — pale tinted bg */
+  --accent-glow: rgba(8, 112, 255, 0.28);
+
+  /* Secondary blue (cyan-ish for variety) */
+  --blue: #189eff;                   /* blue/500 — used in charts as the second blue */
+  --blue-soft: #eef6ff;              /* blue/50 */
+
+  /* Semantic — directly from Meteor */
+  --amber: #fbaf18;                  /* orange/500 — warning */
+  --amber-soft: #fff3e3;             /* orange/50 */
+  --red: #e2262a;                    /* red/500 — critical */
+  --red-soft: #fff2f0;               /* red/50 */
+  --green: #36d046;                  /* green/500 — positive */
+  --green-soft: #e1ffe0;             /* green/50 */
+  --purple: #633bc6;                 /* purple/700 — accent / icon emphasis */
+  --purple-soft: #f5f4ff;            /* purple/50 */
+  --cyan: #2fc3f0;                   /* cyan/500 */
+  --pink: #ff5ea1;                   /* pink/500 */
+
+  /* Borders */
+  --border-primary: #e2e3e9;         /* zinc/100 */
+  --border-secondary: #cdced4;       /* zinc/200 */
+  --border-brand: #0870ff;           /* brand/500 */
+
+  /* Typography */
+  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+  --display: 'Inter', system-ui, -apple-system, sans-serif;
+  --body: 'Inter', system-ui, -apple-system, sans-serif;
+
+  /* Radii — Shopware uses subtle rounding throughout (~4-8px) */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-pill: 999px;
+
+  /* Elevation — flat with subtle shadows */
+  --shadow-sm: 0 1px 2px rgba(30, 30, 36, 0.04), 0 1px 3px rgba(30, 30, 36, 0.06);
+  --shadow-md: 0 4px 12px rgba(30, 30, 36, 0.06), 0 2px 4px rgba(30, 30, 36, 0.04);
+  --shadow-brand: 0 8px 24px rgba(8, 112, 255, 0.18);
+}
+
+/* Disable the cinematic body decorations for this clean light theme */
+:root[data-theme="shopware"] body::before,
+:root[data-theme="shopware"] body::after { display: none; }

package/themes/shopware/transitions.css

@@ -0,0 +1,22 @@
+/* Shopware transitions — phosphor baseline + clean product-flavored overrides. */
+
+@import url('../phosphor/transitions.css');
+
+/* Glitch is too theatrical for the corporate Shopware aesthetic.
+ * Replace with a soft tinted fade that respects the brand. */
+:root[data-theme="shopware"] .tx-glitch-overlay { display: none; }
+:root[data-theme="shopware"] .slide.tx-glitch-enter,
+:root[data-theme="shopware"] .tx-glitch-enter {
+  animation: tx-shopware-soft 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@keyframes tx-shopware-soft {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Shatter softened: just a clean fade-up */
+:root[data-theme="shopware"] .slide.tx-shatter-enter,
+:root[data-theme="shopware"] .tx-shatter-enter {
+  animation: tx-shopware-soft 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  filter: none;
+}