@base44/app-plugin-commerce 0.9.4 → 0.10.0

package/src/commerce/storefront-ui/storefront-ui.css

@@ -0,0 +1,448 @@
+/**
+ * storefront-ui — the shipped Cart / MiniCart / Checkout / OrderReceived styles.
+ *
+ * Plain CSS on purpose: no Tailwind classes, no @apply, no postcss features, so
+ * these surfaces are immune to the app's build configuration. Every color is a
+ * PAIR (surface + on-surface); a component never uses one side without the
+ * other, which is what makes unreadable text structurally impossible. The
+ * `--sfui-*` tokens are the store's override surface — set them once in
+ * index.css, always in pairs. Unset, everything resolves through the app
+ * template's shadcn variables down to safe literals.
+ *
+ * Body font is inherited from the page (never set here), so typography follows
+ * the site automatically; only the heading font is a token.
+ */
+
+.sfui {
+  /* paired color tokens — override via --sfui-*, defaults follow the app theme */
+  --_surface: var(--sfui-surface, hsl(var(--background, 0 0% 100%)));
+  --_on-surface: var(--sfui-on-surface, hsl(var(--foreground, 224 10% 10%)));
+  --_subtle: var(--sfui-subtle, hsl(var(--muted, 220 14% 96%)));
+  --_on-subtle: var(--sfui-on-subtle, hsl(var(--muted-foreground, 220 9% 40%)));
+  --_accent: var(--sfui-accent, hsl(var(--primary, 224 71% 10%)));
+  --_on-accent: var(--sfui-on-accent, hsl(var(--primary-foreground, 0 0% 100%)));
+  --_danger: var(--sfui-danger, hsl(var(--destructive, 0 72% 42%)));
+  --_on-danger: var(--sfui-on-danger, hsl(var(--destructive-foreground, 0 0% 100%)));
+  --_border: var(--sfui-border, hsl(var(--border, 220 13% 88%)));
+  --_radius: var(--sfui-radius, var(--radius, 0.75rem));
+  --_radius-control: var(--sfui-radius-control, calc(var(--_radius) * 0.6));
+  --_font-heading: var(--sfui-font-heading, inherit);
+
+  background: transparent;
+  color: var(--_on-surface);
+  font: inherit;
+}
+
+/* ── primitives ────────────────────────────────────────────────────────────── */
+
+.sfui-heading {
+  font-family: var(--_font-heading);
+  font-weight: 600;
+  line-height: 1.15;
+  margin: 0;
+  color: var(--_on-surface);
+}
+.sfui-h1 { font-size: 1.75rem; letter-spacing: -0.01em; }
+.sfui-h2 { font-size: 1.0625rem; }
+
+.sfui-label {
+  display: block;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--_on-subtle);
+  margin-block-end: 0.5rem;
+}
+
+.sfui-muted { color: var(--_on-subtle); font-size: 0.875rem; }
+
+.sfui-panel {
+  background: var(--_surface);
+  color: var(--_on-surface);
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+}
+
+.sfui-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.875rem;
+  padding: 0.75rem 1.25rem;
+  border: 1px solid transparent;
+  border-radius: var(--_radius-control);
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  background: var(--_accent);
+  color: var(--_on-accent);
+  transition: opacity 120ms ease;
+}
+.sfui-btn:hover { opacity: 0.9; }
+.sfui-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.sfui-btn-ghost {
+  background: transparent;
+  color: var(--_on-surface);
+  border-color: var(--_border);
+}
+.sfui-btn-ghost:hover { opacity: 1; background: var(--_subtle); color: var(--_on-subtle); }
+.sfui-btn-inline { width: auto; min-height: 2.5rem; }
+
+.sfui a.sfui-link {
+  color: var(--_on-surface);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.sfui :is(button, a, input, select, textarea):focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: 2px;
+}
+
+.sfui input,
+.sfui select,
+.sfui textarea {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-height: 2.75rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius-control);
+  background: var(--_surface);
+  color: var(--_on-surface);
+  font: inherit;
+  font-size: 0.9375rem;
+}
+.sfui textarea { min-height: 5rem; resize: vertical; }
+.sfui input::placeholder, .sfui textarea::placeholder { color: var(--_on-subtle); }
+
+.sfui-error {
+  margin: 0.375rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--_danger);
+}
+.sfui-note {
+  margin: 0.375rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--_on-subtle);
+}
+
+.sfui-spinner {
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  border: 2px solid var(--_border);
+  border-block-start-color: var(--_accent);
+  border-radius: 50%;
+  animation: sfui-spin 0.8s linear infinite;
+}
+@keyframes sfui-spin { to { transform: rotate(360deg); } }
+
+.sfui-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 4rem 1.5rem;
+  text-align: center;
+}
+
+/* ── line rows (shared by CartPage and MiniCart) ───────────────────────────── */
+
+.sfui-lines { list-style: none; margin: 0; padding: 0; }
+.sfui-line {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 1rem;
+  padding-block: 1.25rem;
+  border-block-end: 1px solid var(--_border);
+}
+.sfui-line:last-child { border-block-end: 0; }
+.sfui-line-media {
+  inline-size: 4.5rem;
+  block-size: 5.5rem;
+  border-radius: var(--_radius-control);
+  overflow: hidden;
+  background: var(--_subtle);
+  color: var(--_on-subtle);
+  flex-shrink: 0;
+}
+.sfui-line-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
+.sfui-line-main { min-inline-size: 0; }
+.sfui-line-name { font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.25rem; }
+.sfui-line-attrs { font-size: 0.8125rem; color: var(--_on-subtle); margin: 0 0 0.625rem; }
+.sfui-line-end { display: flex; flex-direction: column; align-items: end; justify-content: space-between; }
+.sfui-line-price { font-weight: 600; font-size: 0.9375rem; white-space: nowrap; }
+
+.sfui-qty {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius-control);
+  background: var(--_surface);
+  color: var(--_on-surface);
+}
+.sfui-qty button {
+  inline-size: 2rem;
+  block-size: 2rem;
+  border: 0;
+  background: transparent;
+  color: var(--_on-surface);
+  font: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: var(--_radius-control);
+}
+.sfui-qty button:disabled { opacity: 0.35; cursor: not-allowed; }
+.sfui-qty span {
+  min-inline-size: 2rem;
+  text-align: center;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+}
+.sfui-line[data-pending="true"] .sfui-qty { opacity: 0.6; }
+
+.sfui-line-remove {
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--_on-subtle);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.sfui-line-remove:hover { color: var(--_danger); }
+
+/* ── totals ────────────────────────────────────────────────────────────────── */
+
+.sfui-totals { margin: 0; }
+.sfui-totals > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: var(--_on-subtle);
+  padding-block: 0.375rem;
+}
+.sfui-totals > div dt, .sfui-totals > div dd { margin: 0; }
+.sfui-totals > div[data-emphasis="true"] {
+  color: var(--_on-surface);
+  font-weight: 600;
+  font-size: 1rem;
+  border-block-start: 1px solid var(--_border);
+  margin-block-start: 0.5rem;
+  padding-block-start: 0.875rem;
+}
+
+/* ── coupon ────────────────────────────────────────────────────────────────── */
+
+.sfui-coupon { display: flex; gap: 0.5rem; }
+.sfui-coupon input { flex: 1; min-inline-size: 0; }
+.sfui-coupon-applied {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px dashed var(--_border);
+  border-radius: var(--_radius-control);
+}
+
+/* ── cart page ─────────────────────────────────────────────────────────────── */
+
+.sfui-cart { padding-block: 2.5rem 4rem; }
+.sfui-cart-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; max-inline-size: 68rem; margin-inline: auto; padding-inline: 1.25rem; }
+.sfui-summary { padding: 1.5rem; align-self: start; display: grid; gap: 1.25rem; }
+@media (min-width: 60rem) {
+  .sfui-cart-inner { grid-template-columns: 1fr 24rem; gap: 3rem; }
+  .sfui-summary { position: sticky; inset-block-start: 1.5rem; }
+}
+
+/* ── minicart drawer ───────────────────────────────────────────────────────── */
+
+.sfui-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(10, 10, 12, 0.45);
+  z-index: 60;
+  animation: sfui-fade 160ms ease;
+}
+.sfui-drawer {
+  position: fixed;
+  inset-block: 0;
+  inline-size: min(26rem, calc(100vw - 2.5rem));
+  background: var(--_surface);
+  color: var(--_on-surface);
+  z-index: 61;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 0 48px rgba(0, 0, 0, 0.18);
+}
+.sfui-drawer[data-side="right"] { inset-inline-end: 0; animation: sfui-slide-in-end 200ms ease; }
+.sfui-drawer[data-side="left"] { inset-inline-start: 0; animation: sfui-slide-in-start 200ms ease; }
+.sfui-drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem 1.25rem 1rem;
+  border-block-end: 1px solid var(--_border);
+}
+.sfui-drawer-close {
+  border: 0;
+  background: none;
+  color: var(--_on-surface);
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0.25rem;
+}
+.sfui-drawer-body { flex: 1; overflow-y: auto; padding-inline: 1.25rem; }
+.sfui-drawer-body .sfui-line-media { inline-size: 3.5rem; block-size: 4.25rem; }
+.sfui-drawer-foot {
+  padding: 1rem 1.25rem 1.25rem;
+  border-block-start: 1px solid var(--_border);
+  display: grid;
+  gap: 0.75rem;
+}
+.sfui-drawer-subtotal { display: flex; justify-content: space-between; font-weight: 600; }
+
+@keyframes sfui-fade { from { opacity: 0; } }
+@keyframes sfui-slide-in-end { from { transform: translateX(100%); } }
+@keyframes sfui-slide-in-start { from { transform: translateX(-100%); } }
+@media (prefers-reduced-motion: reduce) {
+  .sfui-drawer, .sfui-drawer-backdrop { animation: none; }
+}
+
+/* ── cart button (header trigger) ──────────────────────────────────────────── */
+
+.sfui-cart-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--_radius-control);
+}
+.sfui-cart-button svg { inline-size: 1.375rem; block-size: 1.375rem; }
+.sfui-cart-badge {
+  position: absolute;
+  inset-block-start: 0.125rem;
+  inset-inline-end: 0.125rem;
+  min-inline-size: 1.125rem;
+  block-size: 1.125rem;
+  padding-inline: 0.25rem;
+  border-radius: 999px;
+  background: var(--_accent);
+  color: var(--_on-accent);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1.125rem;
+  text-align: center;
+}
+
+/* ── checkout ──────────────────────────────────────────────────────────────── */
+
+.sfui-checkout { padding-block: 2.5rem 4rem; }
+.sfui-checkout-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; max-inline-size: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
+@media (min-width: 64rem) {
+  .sfui-checkout-inner[data-layout="two-column"] { grid-template-columns: 1fr 26rem; gap: 3rem; }
+  .sfui-checkout-inner[data-layout="two-column"] .sfui-summary { position: sticky; inset-block-start: 1.5rem; }
+}
+.sfui-checkout-form { display: grid; gap: 2rem; min-inline-size: 0; }
+.sfui-section { display: grid; gap: 0.875rem; }
+
+/* AddressFields integration: style the fields it exposes via data-part. */
+.sfui-address [data-part="address-fields"] {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.875rem 0.75rem;
+}
+.sfui-address [data-part="field"] { grid-column: span 2; min-inline-size: 0; }
+@media (min-width: 40rem) {
+  .sfui-address [data-part="field"][data-span="1"] { grid-column: span 1; }
+}
+.sfui-address [data-part="label"] {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  margin-block-end: 0.375rem;
+}
+.sfui-address [data-part="required"] { color: var(--_danger); margin-inline-start: 0.125rem; }
+.sfui-address [data-part="field"][data-invalid] [data-part="control"] { border-color: var(--_danger); }
+.sfui-address [data-part="error"] { margin: 0.375rem 0 0; font-size: 0.8125rem; color: var(--_danger); }
+
+.sfui-choices { display: grid; gap: 0.5rem; }
+.sfui-choice {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius-control);
+  cursor: pointer;
+}
+.sfui-choice[data-selected="true"] { border-color: var(--_accent); box-shadow: inset 0 0 0 1px var(--_accent); }
+.sfui-choice input { inline-size: 1rem; block-size: 1rem; min-height: 0; margin: 0; accent-color: var(--_accent); flex-shrink: 0; }
+.sfui-choice-main { flex: 1; min-inline-size: 0; }
+.sfui-choice-title { font-size: 0.9375rem; font-weight: 500; }
+.sfui-choice-desc { font-size: 0.8125rem; color: var(--_on-subtle); margin-block-start: 0.125rem; }
+.sfui-choice-cost { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
+.sfui-chosen-single {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius-control);
+  background: var(--_subtle);
+  color: var(--_on-subtle);
+  font-size: 0.9375rem;
+}
+
+.sfui-blockers { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
+.sfui-blockers li { font-size: 0.8125rem; color: var(--_on-subtle); }
+.sfui-checkbox { display: flex; align-items: center; gap: 0.625rem; font-size: 0.9375rem; cursor: pointer; }
+.sfui-checkbox input { inline-size: 1rem; block-size: 1rem; min-height: 0; margin: 0; accent-color: var(--_accent); }
+
+/* ── order received ────────────────────────────────────────────────────────── */
+
+.sfui-order { padding-block: 3rem 4rem; }
+.sfui-order-inner { max-inline-size: 42rem; margin-inline: auto; padding-inline: 1.25rem; display: grid; gap: 1.5rem; }
+.sfui-order-badge {
+  inline-size: 3.5rem;
+  block-size: 3.5rem;
+  margin-inline: auto;
+  border: 2px solid var(--_accent);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--_accent);
+  font-size: 1.5rem;
+}
+.sfui-order-head { text-align: center; display: grid; gap: 0.75rem; }
+.sfui-order-card { padding: 1.5rem; display: grid; gap: 1rem; }
+.sfui-order-meta { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--_border); }
+.sfui-order-meta dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--_on-subtle); margin: 0 0 0.25rem; }
+.sfui-order-meta dd { margin: 0; font-weight: 600; font-size: 0.9375rem; }
+.sfui-instructions { padding: 1.25rem; border: 1px dashed var(--_border); border-radius: var(--_radius-control); display: grid; gap: 0.75rem; }
+.sfui-instructions dl { margin: 0; display: grid; gap: 0.5rem; }
+.sfui-instructions dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
+.sfui-instructions dt { color: var(--_on-subtle); margin: 0; }
+.sfui-instructions dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; text-align: end; }

package/src/commerce/storefront-ui/theme.js

@@ -0,0 +1,76 @@
+import { useEffect } from "react";
+import "./storefront-ui.css";
+
+/**
+ * The design-solidity guard. Every color in storefront-ui exists only as a PAIR
+ * (surface + on-surface), so unreadable text requires overriding one side of a
+ * pair without the other. This hook closes even that hole: after mount it
+ * resolves each pair to real pixels and, when a pair's contrast is unreadable
+ * (< 3:1 — WCAG large-text floor), it resets BOTH sides of that pair on the
+ * component's own root back to the shipped defaults. Worst case is the default
+ * look, never invisible text. In dev it also names the broken pair on the
+ * console so the store fixes its override.
+ */
+
+const PAIRS = [
+  ["surface", "hsl(0 0% 100%)", "hsl(224 10% 10%)"],
+  ["subtle", "hsl(220 14% 96%)", "hsl(220 9% 40%)"],
+  ["accent", "hsl(224 71% 10%)", "hsl(0 0% 100%)"],
+  ["danger", "hsl(0 72% 42%)", "hsl(0 0% 100%)"],
+];
+
+function parseRgb(computed) {
+  const m = /rgba?\(([\d.]+)[ ,]+([\d.]+)[ ,]+([\d.]+)(?:[ ,/]+([\d.]+))?\)/.exec(computed);
+  if (!m) return null;
+  if (m[4] !== undefined && Number(m[4]) < 0.4) return null; // too transparent to judge
+  return [Number(m[1]), Number(m[2]), Number(m[3])];
+}
+
+function luminance([r, g, b]) {
+  const f = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+}
+
+function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+export function useThemeGuard(rootRef) {
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || typeof window === "undefined" || !window.getComputedStyle) return;
+    const probe = document.createElement("div");
+    probe.style.position = "absolute";
+    probe.style.visibility = "hidden";
+    root.appendChild(probe);
+    try {
+      for (const [name, defBg, defFg] of PAIRS) {
+        probe.style.backgroundColor = `var(--_${name})`;
+        probe.style.color = `var(--_on-${name})`;
+        const cs = window.getComputedStyle(probe);
+        const bg = parseRgb(cs.backgroundColor);
+        const fg = parseRgb(cs.color);
+        if (!bg || !fg) continue;
+        if (contrast(bg, fg) < 3) {
+          root.style.setProperty(`--_${name}`, defBg);
+          root.style.setProperty(`--_on-${name}`, defFg);
+          if (typeof console !== "undefined") {
+            console.warn(
+              `[storefront-ui] --sfui-${name}/--sfui-on-${name} are unreadable together ` +
+                `(contrast < 3:1); this surface fell back to the default pair. ` +
+                `Override the pair together in index.css.`,
+            );
+          }
+        }
+      }
+    } catch {
+      /* the guard must never break a page */
+    } finally {
+      root.removeChild(probe);
+    }
+  }, [rootRef]);
+}