npm - @tokenoftrust/storefront-runner - Versions diffs - 0.1.0 - Mend

@tokenoftrust/storefront-runner 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

package/apps/storefront/src/pages/style-guide/[tenant]/index.astro ADDED Viewed

@@ -0,0 +1,85 @@
+---
+/**
+ * Preview/dev-only STYLE-GUIDE HUB for a tenant — `/_style-guide/<tenant>/`.
+ *
+ * Lists every theme guide (current / candidate / legacy) so reviewers can open
+ * them side-by-side WITHOUT reskinning the live marketing site. This is a review
+ * surface only: noindex, never in the sitemap, never part of production marketing
+ * publishing. Tenant-agnostic route; theme data is tenant-local
+ * (tenants/<tenant>/content/themes/*.json).
+ */
+const { tenant } = Astro.params;
+const cspNonce = Astro.locals.cspNonce;
+// Tenant-local theme descriptors. Colocated repo-root layout: from
+// src/pages/style-guide/[tenant]/ the repo root is six levels up.
+const themeModules = import.meta.glob<Record<string, any>>(
+  "../../../../../../tenants/*/content/themes/*.json",
+  { eager: true, import: "default" },
+);
+const seg = `/tenants/${tenant}/content/themes/`;
+const themes = Object.entries(themeModules)
+  .filter(([path]) => path.includes(seg))
+  .map(([, mod]) => mod);
+if (themes.length === 0) return new Response(null, { status: 404 });
+const ROLE_ORDER: Record<string, number> = { current: 0, candidate: 1, legacy: 2 };
+themes.sort(
+  (a, b) => (ROLE_ORDER[a.role] ?? 9) - (ROLE_ORDER[b.role] ?? 9),
+);
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <link rel="icon" type="image/png" href={`/tenants/${tenant}/favicon.png`} />
+    <title>Style guides — {tenant} (preview)</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light; }
+      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: #0f1729; color: #e6edf6; line-height: 1.55; }
+      .wrap { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }
+      .flag { display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: #f59e0b; color: #221600; font-weight: 800; padding: 4px 10px; border-radius: 6px; }
+      h1 { font-size: 1.9rem; margin: 18px 0 6px; }
+      .sub { color: #9fb0c8; margin: 0 0 32px; }
+      .card { display: block; text-decoration: none; color: inherit; background: #16223c; border: 1px solid #24324f; border-radius: 14px; padding: 20px 22px; margin-bottom: 14px; transition: border-color .15s, transform .15s; }
+      .card:hover { border-color: #3f5680; transform: translateY(-2px); }
+      .card .row { display: flex; align-items: center; gap: 12px; }
+      .badge { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
+      .badge.current { background: #0e9f8e; color: #001f1a; }
+      .badge.candidate { background: #6f7dff; color: #060a26; }
+      .badge.legacy { background: #47536e; color: #dfe6f2; }
+      .status { margin-left: auto; font-size: .78rem; color: #9fb0c8; font-family: ui-monospace, Menlo, monospace; }
+      .name { font-weight: 700; font-size: 1.05rem; }
+      .desc { color: #9fb0c8; font-size: .9rem; margin-top: 8px; }
+      .note { margin-top: 28px; font-size: .82rem; color: #7f8fab; border-top: 1px solid #24324f; padding-top: 16px; }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <span class="flag">Preview · dev only · noindex</span>
+      <p style="margin:14px 0 0"><a href="/_style-guide/" style="color:#bfe0ff;font-size:.85rem;text-decoration:none">← all clients</a></p>
+      <h1>{tenant} — theme style guides</h1>
+      <p class="sub">Open any guide independently to compare looks side-by-side. Nothing here reskins the live site.</p>
+      {themes.map((t) => (
+        <a class="card" href={`/_style-guide/${tenant}/${t.id}/`}>
+          <div class="row">
+            <span class:list={["badge", t.role]}>{t.role}</span>
+            <span class="name">{t.name}</span>
+            <span class="status">{t.status}</span>
+          </div>
+          {t.description && <p class="desc">{t.description}</p>}
+        </a>
+      ))}
+      <p class="note">
+        These are preview/dev review surfaces — excluded from the sitemap and production marketing
+        publishing. Approve the <b>current</b> guide before propagating its style concept across the site.
+      </p>
+    </div>
+  </body>
+</html>

package/apps/storefront/src/pages/style-guide/index.astro ADDED Viewed

@@ -0,0 +1,94 @@
+---
+/**
+ * Preview/dev-only STYLE-GUIDE ROOT INDEX — `/_style-guide/`.
+ *
+ * Lists EVERY tenant and each of its theme guides, so all clients' guides are
+ * discoverable from one place. Review surface only: noindex, never in the
+ * sitemap, never part of production marketing publishing. Tenant-agnostic —
+ * theme data is tenant-local (tenants/<tenant>/content/themes/*.json).
+ */
+const cspNonce = Astro.locals.cspNonce;
+// All tenant-local theme descriptors, grouped by tenant. Colocated repo-root
+// layout: from src/pages/style-guide/ the repo root is five levels up.
+const themeModules = import.meta.glob<Record<string, any>>(
+  "../../../../../tenants/*/content/themes/*.json",
+  { eager: true, import: "default" },
+);
+const ROLE_ORDER: Record<string, number> = { current: 0, candidate: 1, legacy: 2 };
+const byTenant = new Map<string, any[]>();
+for (const [path, mod] of Object.entries(themeModules)) {
+  const m = /\/tenants\/([^/]+)\/content\/themes\//.exec(path);
+  const tenant = m?.[1];
+  if (!tenant) continue;
+  if (!byTenant.has(tenant)) byTenant.set(tenant, []);
+  byTenant.get(tenant)!.push(mod);
+}
+const tenants = [...byTenant.entries()]
+  .map(([tenant, themes]) => ({
+    tenant,
+    themes: themes.sort((a, b) => (ROLE_ORDER[a.role] ?? 9) - (ROLE_ORDER[b.role] ?? 9)),
+  }))
+  .sort((a, b) => a.tenant.localeCompare(b.tenant));
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Style guides — all clients (preview)</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light; }
+      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: #0f1729; color: #e6edf6; line-height: 1.55; }
+      .wrap { max-width: 920px; margin: 0 auto; padding: 48px 24px 80px; }
+      .flag { display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: #f59e0b; color: #221600; font-weight: 800; padding: 4px 10px; border-radius: 6px; }
+      h1 { font-size: 1.9rem; margin: 18px 0 6px; }
+      .sub { color: #9fb0c8; margin: 0 0 32px; }
+      .tenant { margin-bottom: 30px; }
+      .tenant > h2 { font-size: 1.05rem; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
+      .tenant > h2 a { color: #bfe0ff; font-size: .82rem; font-weight: 600; text-decoration: none; }
+      .card { display: block; text-decoration: none; color: inherit; background: #16223c; border: 1px solid #24324f; border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; transition: border-color .15s, transform .15s; }
+      .card:hover { border-color: #3f5680; transform: translateY(-2px); }
+      .row { display: flex; align-items: center; gap: 12px; }
+      .badge { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
+      .badge.current { background: #0e9f8e; color: #001f1a; }
+      .badge.candidate { background: #6f7dff; color: #060a26; }
+      .badge.legacy { background: #47536e; color: #dfe6f2; }
+      .status { margin-left: auto; font-size: .78rem; color: #9fb0c8; font-family: ui-monospace, Menlo, monospace; }
+      .name { font-weight: 700; font-size: 1.02rem; }
+      .desc { color: #9fb0c8; font-size: .88rem; margin-top: 6px; }
+      .note { margin-top: 28px; font-size: .82rem; color: #7f8fab; border-top: 1px solid #24324f; padding-top: 16px; }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <span class="flag">Preview · dev only · noindex</span>
+      <h1>Client style guides</h1>
+      <p class="sub">Every tenant and its theme guides. Open a guide to preview the standard components and page sections re-skinned under that theme. Nothing here re-skins a live site.</p>
+      {tenants.map(({ tenant, themes }) => (
+        <section class="tenant">
+          <h2>{tenant} <a href={`/_style-guide/${tenant}/`}>tenant hub →</a></h2>
+          {themes.map((t) => (
+            <a class="card" href={`/_style-guide/${tenant}/${t.id}/`}>
+              <div class="row">
+                <span class:list={["badge", t.role]}>{t.role}</span>
+                <span class="name">{t.name}</span>
+                <span class="status">{t.status}</span>
+              </div>
+              {t.description && <p class="desc">{t.description}</p>}
+            </a>
+          ))}
+        </section>
+      ))}
+      <p class="note">
+        These are preview/dev review surfaces — excluded from the sitemap and production marketing
+        publishing. Approve a tenant's <b>current</b> guide before propagating its style concept across the site.
+      </p>
+    </div>
+  </body>
+</html>

package/apps/storefront/src/pages/tenants/[id]/[...path].ts ADDED Viewed

@@ -0,0 +1,57 @@
+/**
+ * GET /tenants/<id>/<path> — serve a tenant's versioned static asset from R2.
+ *
+ * The version-scoped replacement for the build-time `copy-tenant-assets.mjs`
+ * baking (decision `assets-r2-versioned`). Resolves the tenant's active
+ * channel→snapshot versionId from the `cust:assets-pointer:<id>` KV record and
+ * streams `tenants/<id>/<versionId>/<rel>` from the TENANT_ASSETS R2 bucket with
+ * the right content-type + a revalidating cache header + a versionId ETag.
+ *
+ * BACK-COMPAT: this SSR route only runs when NO baked static file matched — the
+ * Cloudflare/Vite static layer serves `public/tenants/<id>/…` first. So a
+ * NON-versioned tenant (still baked by copy-tenant-assets) never reaches here,
+ * and a versioned tenant (skipped from baking via a `.tot/assets-versioned`
+ * marker) falls through to R2. When the tenant has no published asset version,
+ * `serveTenantAsset` returns null → 404 (nothing published yet).
+ */
+import type { APIContext } from "astro";
+import {
+  serveTenantAsset,
+  type R2BucketLike,
+} from "@tot/public-runtime";
+import { readR2, readKv } from "@/lib/env";
+export const prerender = false;
+export async function GET(context: APIContext): Promise<Response> {
+  const [bucket, kv] = await Promise.all([
+    readR2("TENANT_ASSETS"),
+    readKv("TENANT_CACHE"),
+  ]);
+  // No R2/KV binding (plain `astro dev`, or unconfigured) → nothing to serve.
+  if (!bucket || !kv) {
+    return new Response("Not found", {
+      status: 404,
+      headers: { "cache-control": "no-store" },
+    });
+  }
+  const res = await serveTenantAsset(
+    {
+      // Runtime binding structurally satisfies the shared-runtime R2 seam.
+      bucket: bucket as unknown as R2BucketLike,
+      kvGet: (key) => kv.get(key),
+      channel: context.locals.customizationEnv ?? "live",
+      ifNoneMatch: context.request.headers.get("if-none-match"),
+    },
+    new URL(context.request.url).pathname,
+  );
+  return (
+    res ??
+    new Response("Not found", {
+      status: 404,
+      headers: { "cache-control": "no-store" },
+    })
+  );
+}

package/apps/storefront/src/styles/global.css ADDED Viewed

@@ -0,0 +1,277 @@
+@import "tailwindcss";
+/*
+ * Theme bridge (brief §6/§7).
+ *
+ * The per-tenant identity arrives as CSS custom properties in a :root{} block
+ * injected by the middleware (src/themes/schema.ts -> Layout.astro). Here we map
+ * those vars into Tailwind v4 theme tokens so utilities like `bg-bg`,
+ * `text-primary`, `font-display`, `rounded-md` resolve to the LIVE tenant value.
+ * Components stay theme-agnostic: they use utilities, the utilities read vars,
+ * the vars come from the tenant. Swap a tenant -> the whole UI reskins, no
+ * component edits.
+ *
+ * Fallback values below keep the design coherent before/without the injected
+ * block (e.g. error pages, prerendered routes).
+ */
+@theme {
+  --color-bg: var(--color-bg, #f4f1ea);
+  --color-surface: var(--color-surface, #fcfaf5);
+  --color-text: var(--color-text, #1c2624);
+  --color-muted: var(--color-muted, #5c6663);
+  --color-primary: var(--color-primary, #1f3a34);
+  --color-primary-contrast: var(--color-primary-contrast, #f4f1ea);
+  --color-accent: var(--color-accent, #b5612f);
+  /* Darkened accent for SMALL text/links on light bg/surface (the bright
+     `accent` is reserved for large display type on the spruce hero, where it
+     reads as the brass spark). Derived from the tenant's own accent so it stays
+     theme-agnostic. Reference value resolves to ~#985127 (≥5:1 on bg/surface). */
+  --color-accent-ink: color-mix(in srgb, var(--color-accent) 84%, #000);
+  --color-border: var(--color-border, #dcd6c9);
+  --color-success: var(--color-success, #3f6b4f);
+  --color-sale: var(--color-sale, #9e3b2e);
+  --font-display: var(--font-display, "Space Grotesk"), system-ui, sans-serif;
+  --font-body: var(--font-body, "Source Serif 4"), Georgia, serif;
+  --font-mono: var(--font-mono, "Space Mono"), ui-monospace, monospace;
+  --radius-sm: var(--radius-sm, 3px);
+  --radius-md: var(--radius-md, 6px);
+  --radius-lg: var(--radius-lg, 12px);
+  --radius-full: var(--radius-full, 999px);
+  --shadow-sm: var(--shadow-sm, 0 1px 2px rgba(28, 38, 36, 0.06));
+  --shadow-md: var(--shadow-md, 0 6px 24px -8px rgba(28, 38, 36, 0.14));
+  --shadow-lg: var(--shadow-lg, 0 24px 60px -20px rgba(28, 38, 36, 0.22));
+  --container-max: var(--container-max, 1240px);
+}
+/* ---- base ---------------------------------------------------------------- */
+@layer base {
+  :root {
+    /* Fluid modular type scale; overridden by injected --fs-* when present. */
+    color-scheme: light;
+  }
+  html {
+    font-family: var(--font-body);
+    color: var(--color-text);
+    background: var(--color-bg);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    scroll-behavior: smooth;
+  }
+  body {
+    font-size: var(--fs-base, 1.0625rem);
+    line-height: 1.6;
+    letter-spacing: var(--type-tracking, -0.011em);
+  }
+  h1, h2, h3, h4, h5 {
+    font-family: var(--font-display);
+    font-weight: 600;
+    line-height: 1.05;
+    letter-spacing: -0.02em;
+    color: var(--color-text);
+    text-wrap: balance;
+  }
+  /* Body copy rhythm: a comfortable measure + paragraph spacing for prose-y
+     blocks that aren't inside .rte (e.g. editorial subheads). */
+  p { text-wrap: pretty; }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  /* Visible keyboard focus everywhere (WCAG 2.2 AA, brief §8). */
+  :focus-visible {
+    outline: var(--border-thick, 2px) solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+  ::selection {
+    background: var(--color-primary);
+    color: var(--color-primary-contrast);
+  }
+  img { max-width: 100%; height: auto; }
+  /* Honor reduced motion (brief §6/§8). */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.001ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.001ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+/* ---- shared component primitives ----------------------------------------- */
+@layer components {
+  .container-prose {
+    width: 100%;
+    max-width: var(--container-max);
+    margin-inline: auto;
+    padding-inline: clamp(1rem, 4vw, 2.5rem);
+  }
+  .eyebrow {
+    font-family: var(--font-mono);
+    font-size: 0.72rem;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--color-muted);
+  }
+  /* Eyebrow with the signature leading tick — a single short amber rule, the
+     "one brass rivet" motif from DESIGN.md, applied as a quiet structural mark.
+     Opt-in via .eyebrow.eyebrow--tick so it never fires where it'd read as noise. */
+  .eyebrow--tick {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6em;
+  }
+  .eyebrow--tick::before {
+    content: "";
+    width: 1.6em;
+    height: 2px;
+    background: var(--color-accent);
+    flex: none;
+  }
+  /* Fluid display scale, derived from the tenant's emitted modular --fs-* steps
+     (the major-third scale in DESIGN.md). One rhythm across every page instead
+     of ad-hoc per-component clamps. min = small step, max = large step. */
+  .display-hero {
+    font-family: var(--font-display);
+    font-weight: 600;
+    line-height: 0.95;
+    letter-spacing: -0.03em;
+    font-size: clamp(var(--fs-3xl, 3.05rem), 8vw, var(--fs-5xl, 4.77rem));
+  }
+  .display-xl {
+    font-family: var(--font-display);
+    font-weight: 600;
+    line-height: 1.02;
+    letter-spacing: -0.025em;
+    font-size: clamp(var(--fs-2xl, 2.44rem), 5vw, var(--fs-4xl, 3.81rem));
+  }
+  .display-lg {
+    font-family: var(--font-display);
+    font-weight: 600;
+    line-height: 1.05;
+    letter-spacing: -0.02em;
+    font-size: clamp(var(--fs-xl, 1.95rem), 3.5vw, var(--fs-3xl, 3.05rem));
+  }
+  .display-md {
+    font-family: var(--font-display);
+    font-weight: 600;
+    line-height: 1.1;
+    letter-spacing: -0.018em;
+    font-size: clamp(var(--fs-lg, 1.56rem), 3vw, var(--fs-2xl, 2.44rem));
+  }
+  /* Tasteful scroll-reveal; opt-in via [data-reveal], JS toggles .is-in. */
+  [data-reveal] {
+    opacity: 0;
+    transform: translateY(14px);
+    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  [data-reveal].is-in {
+    opacity: 1;
+    transform: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-reveal] { opacity: 1; transform: none; }
+  }
+  /* Island animations (MobileNav drawer slide-in). Globally neutralized by the
+     reduced-motion guard above; islands also guard in JS. */
+  @keyframes tot-slidein {
+    from { transform: translateX(100%); }
+    to   { transform: translateX(0); }
+  }
+  /* Rich text from CMS/description. */
+  .rte > * + * { margin-top: 1em; }
+  .rte h2 { font-size: var(--fs-xl, 1.6rem); margin-top: 1.6em; }
+  .rte h3 { font-size: var(--fs-lg, 1.3rem); margin-top: 1.3em; }
+  .rte ul, .rte ol { padding-left: 1.4em; }
+  .rte ul { list-style: disc; }
+  .rte ol { list-style: decimal; }
+  .rte li + li { margin-top: 0.35em; }
+  .rte strong { font-weight: 600; }
+  .rte a { color: var(--color-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
+  /* Accent text-link with an animated underline — restrained micro-interaction
+     for inline CTAs. Uses accent-ink (AA on light surfaces). */
+  .link-accent {
+    color: var(--color-text);
+    background-image: linear-gradient(var(--color-accent-ink), var(--color-accent-ink));
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    background-size: 100% 1.5px;
+    transition: color 0.2s ease, background-size 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .link-accent:hover,
+  .link-accent:focus-visible {
+    color: var(--color-accent-ink);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .link-accent { background-size: 0% 1.5px; }
+    .link-accent:hover,
+    .link-accent:focus-visible { background-size: 100% 1.5px; }
+  }
+  /* Collapsible PDP info sections (native <details>). Zero-JS, accessible. */
+  .accordion {
+    border-bottom: 1px solid var(--color-border);
+  }
+  .accordion__summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 0;
+    cursor: pointer;
+    list-style: none;
+    font-family: var(--font-display);
+    font-weight: 500;
+    font-size: 0.95rem;
+    color: var(--color-text);
+    transition: color 0.15s ease;
+  }
+  .accordion__summary::-webkit-details-marker { display: none; }
+  .accordion__summary:hover { color: var(--color-primary); }
+  .accordion__chevron {
+    font-family: var(--font-mono);
+    font-size: 1.1rem;
+    line-height: 1;
+    color: var(--color-muted);
+    transition: transform 0.2s ease;
+  }
+  .accordion[open] .accordion__chevron { transform: rotate(45deg); }
+  .accordion__body { padding-bottom: 1.1rem; }
+  /* Wishlist saved state (robust, no JS text swap): fill the heart and relabel
+     when aria-pressed. Applies to card hearts and the PDP "Save for later". */
+  .wishlist-toggle[aria-pressed="true"] .wishlist-heart { fill: currentColor; }
+  .wishlist-toggle[aria-pressed="true"] .wl-label { font-size: 0; }
+  .wishlist-toggle[aria-pressed="true"] .wl-label::after {
+    content: "Saved";
+    font-size: 0.875rem;
+  }
+  /* Quick-view dialog entrance (reduced-motion neutralized by the base guard). */
+  .quickview[open] { animation: tot-pop 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
+  @keyframes tot-pop {
+    from { opacity: 0; transform: translateY(8px) scale(0.98); }
+    to   { opacity: 1; transform: none; }
+  }
+}

package/apps/storefront/src/themes/reference.ts ADDED Viewed

@@ -0,0 +1,61 @@
+/**
+ * Reference theme — "Northwind" pilot identity. See DESIGN.md for full rationale.
+ *
+ * Thesis: a Pacific-Northwest maker of considered apparel + home goods.
+ * The voice is overcast-day calm with one sharp accent — like a single brass
+ * rivet on a waxed-canvas bag.
+ *
+ * Deliberate anti-AI-default moves (brief §6):
+ *  - Palette is INK + SPRUCE on a warm GREIGE surface — NOT cream/terracotta,
+ *    NOT near-black/acid-green. Sale red is a muted brick, not a siren.
+ *  - Type pairing INVERTS the tired "serif headline" cliché: a tight geometric
+ *    grotesque (Space Grotesk) carries display; a warm humanist serif
+ *    (Source Serif 4) carries body copy. Personality up top, readability below.
+ *  - Boldness is spent in ONE place: the homepage hero's oversized split-type
+ *    lockup. Everything else stays quiet.
+ */
+import type { ThemeTokens } from "@tot/public-runtime";
+export const referenceTheme: ThemeTokens = {
+  color: {
+    bg: "#F4F1EA", // warm greige paper — NOT cream, lower chroma + cooler
+    surface: "#FCFAF5", // raised card surface, a touch lighter than bg
+    text: "#1C2624", // spruce-ink, near-black with a green undertone
+    muted: "#5C6663", // slate-sage for secondary text
+    primary: "#1F3A34", // deep spruce green — the brand anchor
+    "primary-contrast": "#F4F1EA",
+    accent: "#B5612F", // burnt amber / brass — the single warm spark
+    border: "#DCD6C9", // soft sand hairline (NOT broadsheet black)
+    success: "#3F6B4F",
+    sale: "#9E3B2E", // muted brick red, not fire-engine
+  },
+  type: {
+    display: { family: "Space Grotesk", weights: [500, 600, 700] },
+    body: { family: "Source Serif 4", weights: [400, 500, 600] },
+    mono: { family: "Space Mono", weights: [400] },
+    scale: 1.25, // major third — generous but not theatrical
+    tracking: "-0.011em",
+  },
+  space: {
+    base: 4,
+    scale: [0, 1, 2, 3, 4, 6, 8, 12, 16, 24, 32, 48, 64],
+    containerMaxWidth: "1240px",
+    sectionRhythm: "clamp(4rem, 9vw, 8rem)",
+  },
+  shape: {
+    radius: { sm: "3px", md: "6px", lg: "12px", full: "999px" },
+    borderWeights: { thin: "1px", medium: "1.5px", thick: "2px" },
+    shadow: {
+      sm: "0 1px 2px rgba(28, 38, 36, 0.06)",
+      md: "0 6px 24px -8px rgba(28, 38, 36, 0.14)",
+      lg: "0 24px 60px -20px rgba(28, 38, 36, 0.22)",
+    },
+  },
+  brand: {
+    logoLight: "/brand/northwind-logo-light.svg",
+    logoDark: "/brand/northwind-logo-dark.svg",
+    favicon: "/favicon.svg",
+    ogImage: "/brand/northwind-og.svg",
+    motion: "full",
+  },
+};

package/apps/storefront/src/themes/schema.ts ADDED Viewed

@@ -0,0 +1,111 @@
+/**
+ * Theme token -> CSS custom property serialization.
+ *
+ * Components are theme-AGNOSTIC: they only ever read var(--color-primary),
+ * var(--font-display), etc. This module turns a resolved ThemeTokens object
+ * into the `<style>` block the middleware injects per request, so one component
+ * library renders every tenant's identity. See DESIGN.md.
+ */
+import type { DeepPartial, ThemeTokens } from "@tot/public-runtime";
+/** Deep-merge tenant overrides over the reference defaults. */
+export function mergeTheme(
+  base: ThemeTokens,
+  override?: DeepPartial<ThemeTokens>,
+): ThemeTokens {
+  if (!override) return base;
+  return deepMerge(base, override) as ThemeTokens;
+}
+function deepMerge<T>(base: T, over: DeepPartial<T>): T {
+  if (Array.isArray(base)) return (over as unknown as T) ?? base;
+  if (typeof base === "object" && base !== null) {
+    const out: Record<string, unknown> = { ...(base as Record<string, unknown>) };
+    for (const [k, v] of Object.entries(over as Record<string, unknown>)) {
+      if (v === undefined) continue;
+      const bv = (base as Record<string, unknown>)[k];
+      out[k] =
+        bv && typeof bv === "object" && !Array.isArray(bv) && typeof v === "object"
+          ? deepMerge(bv, v as DeepPartial<unknown>)
+          : v;
+    }
+    return out as T;
+  }
+  return (over as unknown as T) ?? base;
+}
+/**
+ * Serialize ThemeTokens into a `:root { --x: y }` declaration block.
+ * Returns the INNER CSS (no <style> wrapper) so the caller controls nonce/attrs.
+ */
+export function themeToCssVars(t: ThemeTokens): string {
+  const lines: string[] = [];
+  const push = (name: string, value: string | number) =>
+    lines.push(`  --${name}: ${value};`);
+  // Color
+  for (const [k, v] of Object.entries(t.color)) push(`color-${k}`, v);
+  // Type
+  push("font-display", `"${t.type.display.family}"`);
+  push("font-body", `"${t.type.body.family}"`);
+  if (t.type.mono) push("font-mono", `"${t.type.mono.family}"`);
+  push("type-scale", t.type.scale);
+  if (t.type.tracking) push("type-tracking", t.type.tracking);
+  // Emit a modular type scale (rem) from the ratio.
+  const ratio = t.type.scale;
+  const steps: Record<string, number> = {
+    "xs": -2, "sm": -1, "base": 0, "md": 1, "lg": 2,
+    "xl": 3, "2xl": 4, "3xl": 5, "4xl": 6, "5xl": 7,
+  };
+  for (const [name, step] of Object.entries(steps)) {
+    push(`fs-${name}`, `${(1 * Math.pow(ratio, step)).toFixed(4)}rem`);
+  }
+  // Space
+  push("space-base", `${t.space.base}px`);
+  t.space.scale.forEach((mult, i) =>
+    push(`space-${i}`, `${(t.space.base * mult).toFixed(2)}px`),
+  );
+  push("container-max", t.space.containerMaxWidth);
+  push("section-rhythm", t.space.sectionRhythm);
+  // Shape
+  push("radius-sm", t.shape.radius.sm);
+  push("radius-md", t.shape.radius.md);
+  push("radius-lg", t.shape.radius.lg);
+  push("radius-full", t.shape.radius.full);
+  push("border-thin", t.shape.borderWeights.thin);
+  push("border-medium", t.shape.borderWeights.medium);
+  push("border-thick", t.shape.borderWeights.thick);
+  push("shadow-sm", t.shape.shadow.sm);
+  push("shadow-md", t.shape.shadow.md);
+  push("shadow-lg", t.shape.shadow.lg);
+  return `:root{\n${lines.join("\n")}\n}`;
+}
+/** Google Fonts <link> for a theme's display+body+mono families (if Google-hosted). */
+export function themeFontHref(t: ThemeTokens): string | null {
+  const families = new Map<string, number[]>();
+  families.set(t.type.display.family, t.type.display.weights);
+  families.set(t.type.body.family, t.type.body.weights);
+  if (t.type.mono) families.set(t.type.mono.family, t.type.mono.weights);
+  const params = [...families]
+    .filter(([fam]) => !SYSTEM_FONTS.has(fam))
+    .map(([fam, weights]) => {
+      const w = [...new Set(weights)].sort((a, b) => a - b).join(";");
+      return `family=${encodeURIComponent(fam).replace(/%20/g, "+")}:wght@${w}`;
+    });
+  if (!params.length) return null;
+  return `https://fonts.googleapis.com/css2?${params.join("&")}&display=swap`;
+}
+const SYSTEM_FONTS = new Set([
+  "system-ui",
+  "-apple-system",
+  "Arial",
+  "Helvetica",
+  "Georgia",
+]);