@tokenoftrust/storefront-runner 2.0.40 → 2.0.42

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

@@ -59,6 +59,19 @@
   --color-field-border: var(--color-field-border, color-mix(in srgb, var(--color-border) 52%, var(--color-text)));
   --color-star: var(--color-star, var(--color-accent));
 
+  /* Conversion-role aliases (style-concept.md §Semantic tokens). The palette
+     above names a COLOR; these name the JOB a color does on a conversion
+     surface, so a reskin can move the buy button without dragging chrome,
+     headings and ::selection with it (all of which read --color-primary).
+     Each defaults to the palette role it plays today, so nothing renders
+     differently until a tenant supplies one — a tenant brand-tunes by emitting
+     color.cta / color.cta-hover / color.cta-contrast / color.trust, which
+     themeToCssVars serializes like any other --color-<k>. */
+  --color-cta: var(--color-cta, var(--color-primary));
+  --color-cta-hover: var(--color-cta-hover, var(--color-primary-hover));
+  --color-cta-contrast: var(--color-cta-contrast, var(--color-primary-contrast));
+  --color-trust: var(--color-trust, var(--color-success));
+
   --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;
@@ -85,6 +98,21 @@
        injected --tap-target (schema.ts, from shape.tapTarget) wins when present,
        else 44px. Components size touch controls with var(--tap-target). (F6.) */
     --tap-target: var(--tap-target, 44px);
+
+    /* Role aliases that are NOT colors and so cannot live in @theme (Tailwind
+       v4 owns the --text-* namespace for font sizes — a --text-muted there would
+       collide with the existing `text-muted` color utility). Declared here for
+       the same reason --tap-target is, and read by the conversion components
+       below so they survive a reskin:
+         --focus-ring   the whole keyboard-focus outline, not just its color, so
+                        a theme can change the ring's weight/style too
+         --surface-card raised card/panel fill (testimonials, proof cards)
+         --text-muted   secondary copy (help text, attributions, fine print)
+       Each resolves through an optional --color-<k> override first, so a theme
+       brand-tunes it over the normal token channel without a new mechanism. */
+    --focus-ring: var(--border-thick, 2px) solid var(--color-focus-ring);
+    --surface-card: var(--color-surface-card, var(--color-surface));
+    --text-muted: var(--color-text-muted, var(--color-muted));
   }
 
   html {
@@ -124,7 +152,9 @@
      dedicated --color-focus-ring token (defaults to the accent spark) so a theme
      can brand-tune the ring without touching the accent used elsewhere. */
   :focus-visible {
-    outline: var(--border-thick, 2px) solid var(--color-focus-ring);
+    /* --focus-ring is the whole outline; its own default is built from
+       --color-focus-ring, so the dedicated ring color still drives it. */
+    outline: var(--focus-ring, var(--border-thick, 2px) solid var(--color-focus-ring));
     outline-offset: 2px;
     border-radius: 2px;
   }
@@ -136,6 +166,36 @@
 
   img { max-width: 100%; height: auto; }
 
+  /* Disabled + busy controls (style-concept.md §Full interactive states).
+     --color-disabled / --color-disabled-contrast were declared for exactly this
+     and nothing read them, so an unstyled `<button disabled>` was pixel-identical
+     to a live one. This is a @layer base default: any component rule or Tailwind
+     utility (utilities layer) still wins, so controls that already carry their
+     own disabled treatment are untouched.
+     Checkboxes, radios, ranges, colors and file inputs are excluded — a
+     background-color on those replaces the native widget rather than tinting it. */
+  :where(button, [role="button"], a, input, select, textarea):disabled,
+  :where(button, [role="button"], a, input, select, textarea)[aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+
+  :is(
+    button,
+    [role="button"],
+    select,
+    textarea,
+    input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])
+  ):disabled {
+    background-color: var(--color-disabled);
+    color: var(--color-disabled-contrast);
+    border-color: var(--color-disabled);
+    box-shadow: none;
+  }
+
+  /* Loading/busy: the control holds its place and stops accepting input. */
+  [aria-busy="true"] { cursor: progress; }
+  :is(button, [role="button"], form, fieldset)[aria-busy="true"] { pointer-events: none; }
+
   /* Honor reduced motion (brief §6/§8). */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
@@ -147,6 +207,22 @@
   }
 }
 
+@layer components {
+  .skip-link {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    z-index: 2147483646;
+    transform: translateY(-150%);
+    border-radius: var(--radius-md);
+    background: var(--color-primary);
+    color: var(--color-primary-contrast);
+    padding: .75rem 1rem;
+  }
+
+  .skip-link:focus-visible { transform: translateY(0); }
+}
+
 /* ---- shared component primitives ----------------------------------------- */
 @layer components {
   .container-prose {
@@ -158,7 +234,7 @@
 
   .eyebrow {
     font-family: var(--font-mono);
-    font-size: 0.72rem;
+    font-size: 0.875rem;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--color-muted);
@@ -249,7 +325,10 @@
   .link-accent {
     color: var(--color-text);
     background-image: linear-gradient(var(--color-accent-ink), var(--color-accent-ink));
-    background-position: 0 100%;
+    /* The underline sits against the CONTENT box, so `.link-accent--cta`'s
+       padding cannot push it away from the text. */
+    background-origin: content-box;
+    background-position: 0 calc(100% + 2px);
     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);
@@ -258,6 +337,17 @@
   .link-accent:focus-visible {
     color: var(--color-accent-ink);
   }
+  /* Standalone CTA form — a link on its own line, so it carries the
+     --tap-target minimum. Vertical padding on an INLINE box grows the hit area
+     and the measured rect without adding a pixel to the line box, so nothing
+     around it moves; keep these links inline, because an inline-block would lay
+     that padding out. 0.875rem clears 44px over the 18px content area of a
+     14px/1.25 line (measured in Chrome at 390px). Deliberately NOT on the base
+     class: `.link-accent` also marks up links inside a sentence, where the
+     padding would reach into the hit area of the line above. */
+  .link-accent--cta {
+    padding-block: 0.875rem;
+  }
   @media (prefers-reduced-motion: no-preference) {
     .link-accent { background-size: 0% 1.5px; }
     .link-accent:hover,
@@ -310,3 +400,307 @@
     to   { opacity: 1; transform: none; }
   }
 }
+
+/* ---- conversion patterns -------------------------------------------------- */
+/*
+ * The CTA hierarchy, trust/social-proof and accessible-form families the
+ * ecommerce quality bar asks of every theme
+ * (playbook/site-migration/style-concept.md §"Ecommerce quality bar"), built
+ * once at platform level so every tenant inherits them rather than re-deriving
+ * them per migration.
+ *
+ * Every value reads a contract token, so a reskin moves the whole set and a
+ * tenant never hand-writes a hex here.
+ *
+ * The class names are deliberately NOT `.btn` / `.field`: admin.css and several
+ * page-scoped <style> blocks already own those, and a bare `.btn` here would
+ * reach into them.
+ */
+@layer components {
+  /* --- CTA hierarchy -------------------------------------------------------
+     Three weights so a page can carry exactly ONE primary ask and route every
+     other action down a tier:
+       .btn-primary    the conversion action (buy, start, book) — one per view
+       .btn-secondary  the supporting action (compare, learn more)
+       .btn-tertiary   the low-commitment out (quiet/text; nav, footer, cards)
+     Placement rules for hero / nav / pricing / footer / mobile-sticky live in
+     the playbook; the treatments live here. */
+  .btn-primary,
+  .btn-secondary,
+  .btn-tertiary {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    /* WCAG 2.2 §2.5.8 — the same minimum every other touch control uses. */
+    min-height: var(--tap-target);
+    padding: 0.75rem 1.5rem;
+    border: var(--border-thin, 1px) solid transparent;
+    border-radius: var(--radius-full);
+    font-family: var(--font-display);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    text-align: center;
+    cursor: pointer;
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease,
+      color 0.2s ease;
+  }
+
+  .btn-primary {
+    background-color: var(--color-cta);
+    color: var(--color-cta-contrast);
+  }
+  .btn-primary:hover { background-color: var(--color-cta-hover); }
+  .btn-primary:active {
+    background-color: color-mix(in srgb, var(--color-cta-hover) 90%, #000);
+  }
+
+  .btn-secondary {
+    background-color: transparent;
+    border-color: var(--color-cta);
+    color: var(--color-cta);
+  }
+  .btn-secondary:hover {
+    background-color: color-mix(in srgb, var(--color-cta) 10%, transparent);
+    border-color: var(--color-cta-hover);
+    color: var(--color-cta-hover);
+  }
+  .btn-secondary:active {
+    background-color: color-mix(in srgb, var(--color-cta) 18%, transparent);
+  }
+
+  .btn-tertiary {
+    background-color: transparent;
+    padding-inline: 0.5rem;
+    color: var(--color-text);
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    text-underline-offset: 4px;
+    transition: color 0.2s ease, text-decoration-color 0.2s ease;
+  }
+  .btn-tertiary:hover {
+    color: var(--color-accent-ink);
+    text-decoration-color: currentColor;
+  }
+  .btn-tertiary:active { color: var(--color-cta-hover); }
+
+  /* Busy CTA: holds its box (no reflow mid-submit), reads as inactive, and the
+     base layer has already removed pointer events. */
+  .btn-primary[aria-busy="true"],
+  .btn-secondary[aria-busy="true"],
+  .btn-tertiary[aria-busy="true"] {
+    opacity: 0.7;
+  }
+
+  /* Full-width CTA — the mobile/sticky and in-card form. */
+  .btn-block { display: flex; width: 100%; }
+
+  /* --- Trust & social proof ------------------------------------------------
+     Boundary-safe SHELLS only. They style a claim; they never assert one. Copy
+     stays placeholder or `needs-review` until sourced (style-concept.md §Trust
+     and social proof components). */
+
+  /* Horizontal strip of short proof points under a hero or above a footer. */
+  .proof-strip {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem 2rem;
+    padding-block: 1rem;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  /* Review / rating display. The stars are decorative; the accessible value
+     belongs in the .rating__value text, never in color alone. */
+  .rating {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+  .rating__stars {
+    color: var(--color-star);
+    letter-spacing: 0.08em;
+    line-height: 1;
+  }
+  .rating__value {
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+  }
+
+  /* Customer testimonial / pull quote. */
+  .testimonial {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.5rem;
+    border: var(--border-thin, 1px) solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--surface-card);
+    box-shadow: var(--shadow-sm);
+  }
+  .testimonial__quote {
+    margin: 0;
+    font-size: var(--fs-md, 1.125rem);
+    line-height: 1.5;
+    text-wrap: pretty;
+  }
+  .testimonial__attribution {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+  }
+  .testimonial__avatar {
+    flex: none;
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: var(--radius-full);
+    object-fit: cover;
+  }
+
+  /* Security / compliance / certification badge. Reads --color-trust so the
+     reassurance palette moves independently of the CTA palette. */
+  .trust-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45em;
+    padding: 0.35rem 0.7rem;
+    border: var(--border-thin, 1px) solid
+      color-mix(in srgb, var(--color-trust) 42%, transparent);
+    border-radius: var(--radius-full);
+    background: color-mix(in srgb, var(--color-trust) 10%, transparent);
+    color: var(--color-trust);
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .trust-badge__icon {
+    flex: none;
+    width: 0.95em;
+    height: 0.95em;
+  }
+
+  /* Guarantee / returns / refund / warranty callout — the risk-reversal line
+     that sits next to the buy button. */
+  .reassurance {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.6rem;
+    padding: 0.75rem 1rem;
+    border-inline-start: var(--border-thick, 2px) solid var(--color-trust);
+    border-radius: var(--radius-sm);
+    background: color-mix(in srgb, var(--color-trust) 7%, transparent);
+    font-size: 0.875rem;
+    line-height: 1.45;
+  }
+  .reassurance__icon {
+    flex: none;
+    width: 1.1em;
+    height: 1.1em;
+    margin-top: 0.15em;
+    color: var(--color-trust);
+  }
+  .reassurance__note {
+    display: block;
+    color: var(--text-muted);
+    font-size: 0.8125rem;
+  }
+
+  /* "As seen in" / customer-logo strip. Logos are desaturated at rest so they
+     read as texture, not as endorsements competing with the CTA. */
+  .logo-strip {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 1.25rem 2.5rem;
+    padding-block: 1.25rem;
+  }
+  .logo-strip__item {
+    max-height: 2rem;
+    width: auto;
+    filter: grayscale(1);
+    opacity: 0.65;
+    transition: filter 0.2s ease, opacity 0.2s ease;
+  }
+  .logo-strip__item:hover {
+    filter: none;
+    opacity: 1;
+  }
+
+  /* --- Accessible forms ----------------------------------------------------
+     Lead-gen / contact / newsletter fields with every state the contract names:
+     label, help text, required + optional markers, validation error, success,
+     disabled and loading (the last two come from the base layer). Errors are
+     announced through aria-describedby + aria-invalid, never color alone. */
+  .form-field {
+    display: grid;
+    gap: 0.375rem;
+  }
+  .form-field__label {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-text);
+  }
+  /* Required/optional markers. The word is the signal; the color is decoration,
+     so the marker text must stay in the DOM for screen readers. */
+  .form-field__required { color: var(--color-error); }
+  .form-field__optional { color: var(--text-muted); font-weight: 400; }
+
+  .form-control {
+    width: 100%;
+    min-height: var(--tap-target);
+    padding: 0.625rem 0.85rem;
+    border: var(--border-thin, 1px) solid var(--color-field-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-family: inherit;
+    font-size: 1rem; /* >=16px: iOS zooms the page on focus below this. */
+    line-height: 1.4;
+    transition: border-color 0.15s ease;
+  }
+  .form-control::placeholder { color: var(--text-muted); }
+  .form-control:hover { border-color: var(--color-text); }
+
+  .form-control[aria-invalid="true"] { border-color: var(--color-error); }
+  .form-control[data-state="success"] { border-color: var(--color-success); }
+
+  /* Help text — the persistent hint, wired with aria-describedby. */
+  .form-field__help {
+    color: var(--text-muted);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+  /* Validation messages. Both carry a glyph so the state survives a
+     monochrome/color-blind read. */
+  .form-field__error,
+  .form-field__success {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.4em;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+  }
+  .form-field__error { color: var(--color-error); }
+  .form-field__error::before { content: "\26A0"; }
+  .form-field__success { color: var(--color-success); }
+  .form-field__success::before { content: "\2713"; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "2.0.40",
+  "version": "2.0.42",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",
@@ -17,6 +17,9 @@
     "typecheck": "pnpm -r typecheck",
     "depcruise": "pnpm --filter @tot/storefront-runner depcruise"
   },
+  "dependencies": {
+    "sharp": "^0.34.5"
+  },
   "devDependencies": {
     "typescript": "^5.6.3"
   },