@tokenoftrust/cli 1.3.4-rc.3 → 1.3.4-rc.5

package/template/sample-store/public/themes/sample.css

@@ -0,0 +1,76 @@
+/* ============================================================================
+   Sample Vapor Co. — "sample" theme (swappable token + base layer)
+   A fictional store used only to demo the local dev loop. Deep navy on white
+   with a warm gold accent. This file is the reskinnable layer: design tokens,
+   reset, and base element styles. Shared components live in pages/mkt.css;
+   home-only in pages/home.css. Token values mirror theme.json.
+   ========================================================================== */
+
+/* --- Design tokens -------------------------------------------------------- */
+:root {
+  --navy: #1b3b64;
+  --navy-dark: #142d4d;
+  --navy-ink: #0f2138;
+  --ink: #16243d;
+  --muted: #5b6a82;
+  --bg: #ffffff;
+  --surface: #f5f7fa;
+  --surface-2: #eaeef4;
+  --border: #e3e8ef;
+  --gold: #e0a83a;
+  --gold-dark: #c8901f;
+  --sale: #8a5d10;
+  --ok: #2f8a5b;
+
+  --radius-sm: 6px;
+  --radius: 10px;
+  --radius-lg: 16px;
+  --shadow-sm: 0 1px 2px rgba(15, 33, 56, .06), 0 1px 3px rgba(15, 33, 56, .08);
+  --shadow-md: 0 6px 18px rgba(15, 33, 56, .10);
+  --shadow-lg: 0 18px 48px rgba(15, 33, 56, .16);
+
+  --container: 1240px;
+  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: "Montserrat", var(--font-body);
+}
+
+/* --- Reset ---------------------------------------------------------------- */
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
+html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+body {
+  font-family: var(--font-body);
+  color: var(--ink);
+  background: var(--bg);
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+img, svg, video { display: block; max-width: 100%; height: auto; }
+a { color: inherit; text-decoration: none; }
+button { font: inherit; cursor: pointer; }
+ul { list-style: none; padding: 0; }
+
+/* --- Base typography ------------------------------------------------------ */
+h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; color: var(--ink); letter-spacing: -.01em; }
+h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); }
+h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
+h3 { font-size: 1.2rem; }
+p { color: var(--muted); }
+
+/* --- Accessibility -------------------------------------------------------- */
+:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
+.skip-link {
+  position: absolute; left: 8px; top: -48px; z-index: 200;
+  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px;
+  transition: top .15s ease;
+}
+.skip-link:focus { top: 0; }
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
+}

package/template/sample-store/theme.json

@@ -0,0 +1,38 @@
+{
+  "_vendor": "Sample Vapor Co.",
+  "_note": "Per-vendor theme override (DeepPartial<ThemeTokens>) for the FICTIONAL sample store shipped with the local dev loop. Matched from sample-store.example. Not a real merchant — neutral demo values only.",
+  "color": {
+    "bg": "#ffffff",
+    "surface": "#f5f7fa",
+    "text": "#16243d",
+    "muted": "#5b6a82",
+    "primary": "#1b3b64",
+    "primary-contrast": "#ffffff",
+    "accent": "#e0a83a",
+    "border": "#e3e8ef",
+    "success": "#2f8a5b",
+    "sale": "#8a5d10"
+  },
+  "type": {
+    "display": {
+      "family": "Montserrat",
+      "weights": [
+        600,
+        700,
+        800
+      ]
+    },
+    "body": {
+      "family": "Inter",
+      "weights": [
+        400,
+        500,
+        600
+      ]
+    }
+  },
+  "brand": {
+    "logoLight": "/tenants/sample-store.example/logo.svg",
+    "headerVariant": "dark"
+  }
+}