npm - @syncedco/flow - Versions diffs - 0.1.0 - Mend

@syncedco/flow 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 (90) hide show

package/CODE_OF_CONDUCT.md +26 -0
package/CONTRIBUTING.md +54 -0
package/LICENSE +21 -0
package/README.md +334 -0
package/SECURITY.md +30 -0
package/SUPPORT.md +32 -0
package/TRADEMARKS.md +14 -0
package/base.css +100 -0
package/bin/synced-flow.mjs +4639 -0
package/components.css +1392 -0
package/defaults.css +26 -0
package/dist/config.d.ts +94 -0
package/dist/config.js +3 -0
package/dist/index.d.ts +45 -0
package/dist/index.js +67 -0
package/docs/accessibility-css.md +133 -0
package/docs/ai-usage.md +112 -0
package/docs/api-contract.md +81 -0
package/docs/base-styling.md +113 -0
package/docs/build-a-site-walkthrough.md +122 -0
package/docs/cli-reference.md +230 -0
package/docs/config-reference.md +81 -0
package/docs/css-optimisation.md +117 -0
package/docs/migration-from-tailwind.md +60 -0
package/docs/native-components.md +156 -0
package/docs/patterns.md +32 -0
package/docs/presets.md +60 -0
package/docs/quick-start.md +252 -0
package/docs/recipes.md +285 -0
package/docs/release-readiness.md +63 -0
package/docs/system-primitives.md +150 -0
package/docs/tailwind-comparison.md +66 -0
package/docs/tokens.md +79 -0
package/docs/website-patterns.md +114 -0
package/docs/why-synced-flow.md +99 -0
package/docs/wordpress.md +66 -0
package/examples/README.md +16 -0
package/examples/astro/package.json +19 -0
package/examples/astro/src/pages/index.astro +85 -0
package/examples/astro/src/styles/synced-flow.css +2 -0
package/examples/astro/src/styles/synced-flow.generated.css +206 -0
package/examples/astro/synced-flow.config.mjs +9 -0
package/examples/next/app/layout.tsx +14 -0
package/examples/next/app/page.tsx +92 -0
package/examples/next/app/synced-flow.css +2 -0
package/examples/next/app/synced-flow.generated.css +205 -0
package/examples/next/package.json +19 -0
package/examples/next/synced-flow.config.mjs +9 -0
package/examples/plain-html/index.html +384 -0
package/examples/plain-html/package.json +15 -0
package/examples/plain-html/synced-flow.config.mjs +9 -0
package/examples/plain-html/synced-flow.css +2 -0
package/examples/plain-html/synced-flow.generated.css +205 -0
package/examples/templates/README.md +22 -0
package/examples/templates/blog-index.html +41 -0
package/examples/templates/coming-soon.html +27 -0
package/examples/templates/portfolio-scroll.html +45 -0
package/examples/templates/saas-dashboard.html +171 -0
package/examples/templates/saas-landing.html +104 -0
package/examples/vite/index.html +2 -0
package/examples/vite/package.json +20 -0
package/examples/vite/src/main.jsx +27 -0
package/examples/vite/src/synced-flow.css +2 -0
package/examples/vite/src/synced-flow.generated.css +205 -0
package/examples/vite/synced-flow.config.mjs +9 -0
package/examples/wordpress/assets/css/synced-flow.css +641 -0
package/examples/wordpress/functions.php +13 -0
package/examples/wordpress/package.json +15 -0
package/examples/wordpress/parts/footer.html +12 -0
package/examples/wordpress/parts/header.html +10 -0
package/examples/wordpress/patterns/contact-cta.php +28 -0
package/examples/wordpress/patterns/feature-grid.php +38 -0
package/examples/wordpress/patterns/landing-hero.php +45 -0
package/examples/wordpress/synced-flow.config.mjs +11 -0
package/examples/wordpress/templates/front-page.html +11 -0
package/examples/wordpress/templates/index.html +27 -0
package/examples/wordpress/theme.json +19 -0
package/layout.css +365 -0
package/package.json +93 -0
package/reset.css +13 -0
package/skills/synced-flow/SKILL.md +151 -0
package/src/config.ts +98 -0
package/src/index.ts +75 -0
package/src/presets.d.mts +21 -0
package/src/presets.mjs +171 -0
package/src/tokens.mjs +138 -0
package/src/utility-tokens.mjs +47 -0
package/styles.css +2313 -0
package/tokens.css +198 -0
package/utilities.css +255 -0

package/examples/plain-html/index.html ADDED Viewed

@@ -0,0 +1,384 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Synced Flow Plain HTML Example</title>
+    <link rel="icon" href="data:," />
+    <link rel="stylesheet" href="./synced-flow.css" />
+  </head>
+  <body>
+    <a class="sf-skip-link" href="#main">Skip to main content</a>
+    <header class="sf-section sf-section--compact sf-sticky-top sf-bg-background">
+      <nav class="sf-container sf-nav" aria-label="Primary">
+        <a class="sf-link-plain sf-text-h4 sf-font-display" href="/">Synced Flow</a>
+        <ul class="sf-nav__list">
+          <li><a class="sf-nav__link" href="#features" aria-current="page">Features</a></li>
+          <li><a class="sf-nav__link" href="#systems">Systems</a></li>
+          <li><a class="sf-nav__link" href="#native">Native UI</a></li>
+          <li><a class="sf-nav__link" href="#contact">Contact</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main id="main">
+      <section class="sf-hero">
+        <div class="sf-container sf-split">
+          <div class="sf-stack sf-stack--loose">
+            <div class="sf-stack sf-stack--tight">
+              <p class="sf-badge">Plain HTML starter</p>
+              <h1 class="sf-text-display">Build a modern fluid website without custom component CSS.</h1>
+            </div>
+            <p class="sf-text-lead sf-prose sf-text-muted">
+              This page uses Synced Flow tokens, base styles, layouts, components, and utilities for
+              common website needs: navigation, sections, cards, forms, alerts, buttons, and responsive flow.
+            </p>
+            <div class="sf-button-group">
+              <a class="sf-button sf-button--default" href="#contact">Start building</a>
+              <a class="sf-button sf-button--outline" href="#features">View primitives</a>
+            </div>
+          </div>
+          <aside class="sf-surface sf-surface--raised sf-stack" aria-label="Starter coverage">
+            <p class="sf-kicker">Included primitives</p>
+            <ul class="sf-list-disc sf-flow">
+              <li>Fluid type and spacing tokens</li>
+              <li>Containers, stacks, splits, grids, and surfaces</li>
+              <li>Buttons, links, forms, cards, alerts, and focus states</li>
+            </ul>
+          </aside>
+        </div>
+      </section>
+      <section class="sf-section" id="features">
+        <div class="sf-container sf-stack sf-stack--loose">
+          <div class="sf-section-header" data-align="center">
+            <p class="sf-kicker">Core building blocks</p>
+            <h2 class="sf-text-h1">Enough structure for a real website.</h2>
+            <p class="sf-text-lead sf-text-muted">
+              A developer can compose these pieces without writing one-off CSS for basic layout,
+              spacing, surfaces, typography, or interactive states.
+            </p>
+          </div>
+          <div class="sf-auto-grid">
+            <article class="sf-card sf-card--interactive sf-stack">
+              <div class="sf-card__header">
+                <h3 class="sf-card__title">Fluid foundations</h3>
+                <p class="sf-card__description">Type, spacing, radii, borders, shadows, and semantic colour roles.</p>
+              </div>
+            </article>
+            <article class="sf-card sf-card--interactive sf-stack">
+              <div class="sf-card__header">
+                <h3 class="sf-card__title">Layout primitives</h3>
+                <p class="sf-card__description">Containers, sections, stacks, clusters, splits, grids, frames, and covers.</p>
+              </div>
+            </article>
+            <article class="sf-card sf-card--interactive sf-stack">
+              <div class="sf-card__header">
+                <h3 class="sf-card__title">Common UI</h3>
+                <p class="sf-card__description">Buttons, forms, cards, alerts, nav links, badges, and accessible helpers.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section class="sf-section sf-bg-surface-alt" id="systems">
+        <div class="sf-container sf-stack sf-stack--loose">
+          <div class="sf-logo-cloud" aria-label="Example trusted by">
+            <span>Studio</span>
+            <span>Agency</span>
+            <span>Startup</span>
+            <span>Product</span>
+          </div>
+          <div class="sf-split">
+            <div class="sf-stack">
+              <p class="sf-kicker">System first</p>
+              <h2>Start with reusable decisions, then customize only what matters.</h2>
+              <p class="sf-prose sf-text-muted">
+                Synced Flow keeps defaults practical and gives projects semantic variables for
+                brand-specific choices. That keeps the first page fast while leaving room for product
+                or client identity.
+              </p>
+            </div>
+            <div class="sf-alert sf-alert--info" role="status">
+              <p class="sf-alert__title">No page CSS required for this demo</p>
+              <p>
+                The page uses the package stylesheet, semantic tokens, and reusable classes for all
+                visible layout and common UI styling.
+              </p>
+            </div>
+          </div>
+          <div class="sf-stats">
+            <div class="sf-stat">
+              <p class="sf-stat__value">10.5 KB</p>
+              <p class="sf-stat__label">Full core gzip size</p>
+            </div>
+            <div class="sf-stat">
+              <p class="sf-stat__value">0</p>
+              <p class="sf-stat__label">Runtime dependencies</p>
+            </div>
+            <div class="sf-stat">
+              <p class="sf-stat__value">1</p>
+              <p class="sf-stat__label">CSS entry to import</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section class="sf-section">
+        <div class="sf-container sf-stack sf-stack--loose">
+          <div class="sf-section-header">
+            <p class="sf-kicker">Website patterns</p>
+            <h2>Common sections without inventing new CSS every time.</h2>
+          </div>
+          <div class="sf-auto-grid">
+            <article class="sf-feature">
+              <span class="sf-feature__icon" aria-hidden="true">1</span>
+              <h3 class="sf-feature__title">Feature blocks</h3>
+              <p class="sf-feature__text">Use icons, titles, and supporting text for product or service sections.</p>
+            </article>
+            <article class="sf-feature">
+              <span class="sf-feature__icon" aria-hidden="true">2</span>
+              <h3 class="sf-feature__title">Proof sections</h3>
+              <p class="sf-feature__text">Combine stats, testimonials, and logo clouds with the same token rhythm.</p>
+            </article>
+            <article class="sf-feature">
+              <span class="sf-feature__icon" aria-hidden="true">3</span>
+              <h3 class="sf-feature__title">Conversion patterns</h3>
+              <p class="sf-feature__text">Build pricing, FAQs, forms, notices, and calls to action from named primitives.</p>
+            </article>
+          </div>
+          <figure class="sf-testimonial">
+            <blockquote class="sf-testimonial__quote">
+              "Synced Flow gives us the repeatable parts first, so custom CSS is reserved for the brand moments."
+            </blockquote>
+            <figcaption class="sf-testimonial__meta">Example client, product team</figcaption>
+          </figure>
+        </div>
+      </section>
+      <section class="sf-section sf-bg-surface-alt">
+        <div class="sf-container sf-stack sf-stack--loose">
+          <div class="sf-section-header" data-align="center">
+            <p class="sf-kicker">Pricing and FAQ</p>
+            <h2>Useful commercial sections are part of the starter kit.</h2>
+          </div>
+          <div class="sf-pricing-grid">
+            <article class="sf-price-card">
+              <h3 class="sf-card__title">Starter</h3>
+              <div class="sf-price">
+                <span class="sf-price__value">£0</span>
+                <span class="sf-price__interval">prototype</span>
+              </div>
+              <p class="sf-card__description">Use the core primitives to build and test a new site direction.</p>
+              <a class="sf-button sf-button--outline sf-button--block" href="#contact">Try it</a>
+            </article>
+            <article class="sf-price-card sf-price-card--featured">
+              <p class="sf-badge">Most useful</p>
+              <h3 class="sf-card__title">Website</h3>
+              <div class="sf-price">
+                <span class="sf-price__value">£49</span>
+                <span class="sf-price__interval">project</span>
+              </div>
+              <p class="sf-card__description">Use patterns, docs, and examples to ship a complete marketing site.</p>
+              <a class="sf-button sf-button--default sf-button--block" href="#contact">Start</a>
+            </article>
+          </div>
+          <div class="sf-faq">
+            <details class="sf-faq__item">
+              <summary>Is this trying to replace Tailwind?</summary>
+              <p>No. Synced Flow offers named CSS primitives and patterns for common website work.</p>
+            </details>
+            <details class="sf-faq__item">
+              <summary>Can I still customize a project?</summary>
+              <p>Yes. Override semantic tokens first, then add project CSS only for unique brand moments.</p>
+            </details>
+          </div>
+        </div>
+      </section>
+      <section class="sf-section" id="contact">
+        <div class="sf-container sf-split">
+          <div class="sf-stack">
+            <p class="sf-kicker">Forms included</p>
+            <h2>Collect a lead without rebuilding inputs from scratch.</h2>
+            <p class="sf-prose sf-text-muted">
+              Fields, labels, help text, textarea, select, checkbox, focus rings, disabled states,
+              and buttons all share the same token system.
+            </p>
+          </div>
+          <form class="sf-surface sf-form" action="/" method="post">
+            <div class="sf-field">
+              <label class="sf-required" for="name">Name</label>
+              <input class="sf-input" id="name" name="name" autocomplete="name" placeholder="Alex Morgan" required aria-describedby="name-help" />
+              <p class="sf-help" id="name-help">Your name is required so the form has a clear accessible label and requirement.</p>
+            </div>
+            <div class="sf-field">
+              <label for="project">Project type</label>
+              <select class="sf-select" id="project" name="project">
+                <option>Marketing website</option>
+                <option>Product site</option>
+                <option>Web app shell</option>
+              </select>
+            </div>
+            <div class="sf-field" data-invalid="true">
+              <label for="message">Project notes</label>
+              <textarea class="sf-textarea" id="message" name="message" placeholder="Tell us what you want to build" aria-invalid="true" aria-describedby="message-help message-error"></textarea>
+              <p class="sf-help" id="message-help">Use semantic classes first; add custom CSS only for truly project-specific styling.</p>
+              <p class="sf-error" id="message-error">Example invalid state: add a little more project detail.</p>
+            </div>
+            <label class="sf-check">
+              <input type="checkbox" name="updates" />
+              <span>Send me practical CSS system updates.</span>
+            </label>
+            <button class="sf-button sf-button--default sf-button--block" type="submit">Send enquiry</button>
+          </form>
+        </div>
+      </section>
+      <section class="sf-section sf-bg-surface-alt" id="native">
+        <div class="sf-container sf-stack sf-stack--loose">
+          <div class="sf-section-header">
+            <p class="sf-kicker">Native component layer</p>
+            <h2>Dialog, popover, disclosure, tabs, and scroll patterns without a JS component library.</h2>
+            <p class="sf-text-muted sf-prose">
+              Synced Flow styles native browser primitives and progressive state hooks. Projects can add tiny helper scripts only when accessible state sync needs it.
+            </p>
+          </div>
+          <div class="sf-auto-grid">
+            <article class="sf-card sf-stack">
+              <h3 class="sf-card__title">Dialog</h3>
+              <p class="sf-card__description">Use the native dialog element with tokenized panels and backdrops.</p>
+              <button class="sf-button sf-button--outline" type="button" commandfor="demo-dialog" command="show-modal">Open dialog</button>
+            </article>
+            <article class="sf-card sf-stack">
+              <h3 class="sf-card__title">Popover and tooltip</h3>
+              <p class="sf-card__description">
+                <button class="sf-tooltip-trigger" type="button" interestfor="demo-tooltip" aria-describedby="demo-tooltip">Hover or focus</button>
+                for native popover help where supported.
+              </p>
+              <p class="sf-tooltip" id="demo-tooltip" popover="hint">Tooltips keep the accessible description in markup.</p>
+              <button class="sf-button sf-button--secondary" type="button" popovertarget="demo-toast">Show toast</button>
+            </article>
+            <article class="sf-card sf-stack">
+              <h3 class="sf-card__title">Disclosure</h3>
+              <div class="sf-accordion">
+                <details name="native-demo">
+                  <summary>Can accordions be native?</summary>
+                  <p>Yes. Details elements with the same name behave as an exclusive accordion in supporting browsers.</p>
+                </details>
+                <details name="native-demo">
+                  <summary>Does this ship JavaScript?</summary>
+                  <p>No. The package ships CSS and documented markup contracts only.</p>
+                </details>
+              </div>
+            </article>
+            <article class="sf-card sf-stack">
+              <h3 class="sf-card__title">Drawer</h3>
+              <p class="sf-card__description">Use popover-backed drawers for menus, filters, and lightweight panels.</p>
+              <button class="sf-button sf-button--secondary" type="button" popovertarget="demo-drawer">Open drawer</button>
+            </article>
+          </div>
+          <section class="sf-tabs" aria-labelledby="tabs-title">
+            <h3 class="sf-text-h4" id="tabs-title">CSS-first tabs</h3>
+            <input id="tab-one" name="demo-tabs" type="radio" checked />
+            <input id="tab-two" name="demo-tabs" type="radio" />
+            <div class="sf-tab-list" aria-label="Native component examples">
+              <label class="sf-tab" for="tab-one">Markup</label>
+              <label class="sf-tab" for="tab-two">Theming</label>
+            </div>
+            <div class="sf-tab-panels">
+              <div class="sf-tab-panel">
+                <p>Use the CSS-only radio pattern for simple panels, or add example-level JavaScript for full tab keyboard behavior.</p>
+              </div>
+              <div class="sf-tab-panel">
+                <p>Native controls inherit light and dark semantic tokens through <code>color-scheme</code> and <code>data-sf-theme</code>.</p>
+              </div>
+            </div>
+          </section>
+          <div class="sf-scroll-viewport" data-snap="mandatory" data-size="preview" aria-label="Scroll snap demo">
+            <section class="sf-scroll-panel sf-surface">
+              <div class="sf-stack">
+                <p class="sf-kicker">Scroll panel</p>
+                <h3>First snap section</h3>
+              </div>
+            </section>
+            <section class="sf-scroll-panel sf-surface sf-surface--raised">
+              <div class="sf-stack">
+                <p class="sf-kicker">Sticky and snap</p>
+                <h3>Second snap section</h3>
+              </div>
+            </section>
+          </div>
+        </div>
+      </section>
+      <dialog class="sf-dialog" id="demo-dialog" aria-labelledby="demo-dialog-title">
+        <header class="sf-dialog__header">
+          <h2 id="demo-dialog-title">Native dialog</h2>
+          <button class="sf-button sf-button--ghost" type="button" commandfor="demo-dialog" command="close">Close</button>
+        </header>
+        <div class="sf-dialog__body">
+          <p class="sf-prose">The dialog uses native focus handling where supported and Synced Flow tokens for its surface, border, radius, and backdrop.</p>
+        </div>
+        <footer class="sf-dialog__footer">
+          <button class="sf-button" type="button" commandfor="demo-dialog" command="close">Done</button>
+        </footer>
+      </dialog>
+      <aside class="sf-toast" id="demo-toast" popover role="status">
+        <p class="sf-alert__title">Saved</p>
+        <p>This toast is a popover-backed status message.</p>
+      </aside>
+      <aside class="sf-drawer sf-drawer--right sf-stack" id="demo-drawer" popover aria-label="Example drawer">
+        <p class="sf-kicker">Drawer</p>
+        <h2 class="sf-text-h4">Native popover panel</h2>
+        <p class="sf-prose">Drawers use the Popover API and inherit the same semantic surface tokens.</p>
+        <button class="sf-button sf-button--outline" type="button" popovertarget="demo-drawer" popovertargetaction="hide">Close drawer</button>
+      </aside>
+      <section class="sf-section sf-section--compact">
+        <div class="sf-container">
+          <div class="sf-cta" data-layout="split" role="status">
+            <div class="sf-stack sf-stack--tight">
+              <p class="sf-alert__title">Ready for a basic website build</p>
+              <p>
+                Header, hero, content, cards, proof, pricing, FAQ, form, call to action, and footer
+                are all composed from Synced Flow primitives.
+              </p>
+            </div>
+            <a class="sf-button sf-button--default" href="#contact">Use the patterns</a>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer class="sf-footer">
+      <div class="sf-container sf-repel">
+        <p class="sf-text-caption sf-text-muted">Synced Flow plain HTML example</p>
+        <a class="sf-link" href="#main">Back to top</a>
+      </div>
+    </footer>
+  </body>
+</html>

package/examples/plain-html/package.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "name": "synced-flow-plain-html-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "flow:build": "synced-flow build",
+    "flow:check": "synced-flow build --check",
+    "flow:lint": "synced-flow lint",
+    "flow:watch": "synced-flow watch",
+    "flow:doctor": "synced-flow doctor"
+  },
+  "dependencies": {
+    "@syncedco/flow": "file:../.."
+  }
+}

package/examples/plain-html/synced-flow.config.mjs ADDED Viewed

@@ -0,0 +1,9 @@
+import { defineConfig } from '@syncedco/flow/config'
+import { themePresets } from '@syncedco/flow/presets'
+export default defineConfig({
+  scan: ['.'],
+  out: 'synced-flow.generated.css',
+  responsiveVariants: false,
+  theme: themePresets.synced,
+})

package/examples/plain-html/synced-flow.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ @import "../../styles.css";
2	+ @import "./synced-flow.generated.css";

package/examples/plain-html/synced-flow.generated.css ADDED Viewed

@@ -0,0 +1,205 @@
+/* Generated by @syncedco/flow. Edit synced-flow.config.mjs or run synced-flow build to refresh. */
+@layer reset, tokens, base, app, layout, components, utilities, overrides;
+@layer tokens {
+  :root {
+    color-scheme: light;
+    --font-sans: var(--sf-font-sans, ui-sans-serif, system-ui, sans-serif);
+    --font-display: var(--sf-font-display, ui-serif, Georgia, serif);
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+    --step--2: clamp(0.6944rem, 0.6866rem + 0.0348vw, 0.72rem);
+    --step--1: clamp(0.8333rem, 0.8129rem + 0.0907vw, 0.9rem);
+    --step-0: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --step-1: clamp(1.2rem, 1.1369rem + 0.2806vw, 1.4063rem);
+    --step-2: clamp(1.44rem, 1.3427rem + 0.4324vw, 1.7578rem);
+    --step-3: clamp(1.728rem, 1.5843rem + 0.6385vw, 2.1973rem);
+    --step-4: clamp(2.0736rem, 1.8676rem + 0.9156vw, 2.7466rem);
+    --step-5: clamp(2.4883rem, 2.1991rem + 1.2856vw, 3.4332rem);
+    --step-6: clamp(2.986rem, 2.5863rem + 1.7763vw, 4.2915rem);
+    --step-7: clamp(3.5832rem, 3.0379rem + 2.4235vw, 5.3644rem);
+    --step-8: clamp(4.2998rem, 3.5634rem + 3.2731vw, 6.7055rem);
+    --space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
+    --space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
+    --space-xs: clamp(0.75rem, 0.7213rem + 0.1276vw, 0.8438rem);
+    --space-s: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --space-m: clamp(1.5rem, 1.4426rem + 0.2551vw, 1.6875rem);
+    --space-l: clamp(2rem, 1.9235rem + 0.3401vw, 2.25rem);
+    --space-xl: clamp(3rem, 2.8852rem + 0.5102vw, 3.375rem);
+    --space-2xl: clamp(4rem, 3.8469rem + 0.6803vw, 4.5rem);
+    --space-3xl: clamp(6rem, 5.7704rem + 1.0204vw, 6.75rem);
+    --space-4xl: clamp(8rem, 7.6939rem + 1.3605vw, 9rem);
+    --space-3xs-2xs: clamp(0.25rem, 0.1543rem + 0.4252vw, 0.5625rem);
+    --space-2xs-xs: clamp(0.5rem, 0.3948rem + 0.4677vw, 0.8438rem);
+    --space-xs-s: clamp(0.75rem, 0.6352rem + 0.5102vw, 1.125rem);
+    --space-s-m: clamp(1rem, 0.7895rem + 0.9354vw, 1.6875rem);
+    --space-m-l: clamp(1.5rem, 1.2704rem + 1.0204vw, 2.25rem);
+    --space-l-xl: clamp(2rem, 1.5791rem + 1.8707vw, 3.375rem);
+    --space-xl-2xl: clamp(3rem, 2.5408rem + 2.0408vw, 4.5rem);
+    --space-2xl-3xl: clamp(4rem, 3.1582rem + 3.7415vw, 6.75rem);
+    --space-s-l: clamp(1rem, 0.6173rem + 1.7007vw, 2.25rem);
+    --space-m-xl: clamp(1.5rem, 0.926rem + 2.551vw, 3.375rem);
+    --space-l-2xl: clamp(2rem, 1.2347rem + 3.4014vw, 4.5rem);
+    --grid-max-width: 90rem;
+    --grid-gutter: var(--space-s-l);
+    --grid-columns: 12;
+    --radius-none: 0;
+    --radius-xs: 0.25rem;
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-2xl: 1.25rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 999rem;
+    --radius: var(--radius-xl);
+    --color-ink-950: oklch(14% 0.025 248);
+    --color-ink-900: oklch(18% 0.024 246);
+    --color-ink-800: oklch(24% 0.022 244);
+    --color-ink-700: oklch(34% 0.02 240);
+    --color-ink-600: oklch(45% 0.018 236);
+    --color-ink-500: oklch(56% 0.015 232);
+    --color-paper: oklch(98.6% 0.014 78);
+    --color-paper-alt: oklch(96.6% 0.018 82);
+    --color-white: oklch(100% 0 0);
+    --color-black: oklch(0% 0 0);
+    --color-background: oklch(14% 0.025 248);
+    --color-foreground: oklch(96% 0.01 92);
+    --color-card: oklch(18% 0.024 246);
+    --color-card-foreground: oklch(96% 0.01 92);
+    --color-popover: oklch(18% 0.024 246);
+    --color-popover-foreground: oklch(96% 0.01 92);
+    --color-primary: oklch(69% 0.18 44);
+    --color-primary-hover: oklch(64% 0.18 44);
+    --color-primary-label: oklch(55% 0.18 44);
+    --color-primary-border: oklch(66% 0.17 43);
+    --color-primary-foreground: oklch(98% 0.01 95);
+    --color-secondary: oklch(24% 0.018 22);
+    --color-secondary-foreground: oklch(96% 0.01 92);
+    --color-muted: oklch(26% 0.012 24);
+    --color-muted-foreground: oklch(76% 0.01 92);
+    --color-accent: oklch(24% 0.018 22);
+    --color-accent-foreground: oklch(96% 0.01 92);
+    --color-destructive: oklch(55% 0.2 28);
+    --color-destructive-foreground: oklch(98% 0.01 95);
+    --color-border: oklch(100% 0 0 / 0.12);
+    --color-input: oklch(100% 0 0 / 0.12);
+    --color-ring: oklch(69% 0.18 44);
+    --color-heading: oklch(20% 0.02 18);
+    --color-page-text: oklch(23% 0.02 18);
+    --color-body: oklch(45% 0.02 28);
+    --color-body-dark: oklch(40% 0.02 28);
+    --color-subdued: oklch(42% 0.02 20);
+    --color-surface: oklch(96% 0.015 80);
+    --color-surface-alt: oklch(96.6% 0.018 82);
+    --color-hero-bg: oklch(8% 0.02 260);
+    --color-green: oklch(55% 0.12 148);
+    --color-green-dark: oklch(45% 0.12 148);
+    --color-green-muted: oklch(40% 0.12 148);
+    --color-green-light: oklch(90% 0.06 148);
+    --color-green-lighter: oklch(92% 0.04 148);
+    --color-green-bg: oklch(88% 0.07 148);
+    --color-green-bg-alt: oklch(82% 0.1 148);
+    --color-green-vivid: oklch(78% 0.08 148);
+    --color-green-mid: oklch(75% 0.12 148);
+    --color-green-deep: oklch(70% 0.14 150);
+    --color-green-deepest: oklch(60% 0.14 150);
+    --color-green-wash: oklch(93% 0.06 148);
+    --color-green-wash-alt: oklch(88% 0.08 148);
+    --color-green-gradient-from: oklch(82% 0.1 148);
+    --color-green-gradient-to: oklch(86% 0.06 148);
+    --color-deco-lime: oklch(80% 0.18 130);
+    --color-deco-blue: oklch(60% 0.12 240);
+    --color-deco-warm: oklch(80% 0.06 60);
+    --color-deco-warm-light: oklch(92% 0.02 80);
+    --color-deco-warm-mid: oklch(80% 0.15 60);
+    --color-purple-light: oklch(95% 0.05 280);
+    --color-purple-mid: oklch(92% 0.05 280);
+    --color-purple-dark: oklch(90% 0.06 280);
+    --color-purple-darker: oklch(87% 0.07 280);
+    --color-purple-icon: oklch(55% 0.2 280);
+    --color-warm-light: oklch(95.6% 0.05 22);
+    --color-warm-mid: oklch(95% 0.04 40);
+    --color-warm-grad-to: oklch(90% 0.08 30);
+    --color-warm-grad-to-alt: oklch(90% 0.06 30);
+    --color-warm-icon: oklch(60% 0.17 44);
+    --color-cool-light: oklch(92% 0.04 200);
+    --color-cool-dark: oklch(87% 0.06 200);
+    --color-primary-glow: oklch(80% 0.12 44);
+    --color-primary-soft: oklch(69% 0.18 44 / 0.10);
+    --color-primary-soft-border: oklch(69% 0.18 44 / 0.30);
+    --color-primary-soft-border-light: oklch(69% 0.18 44 / 0.25);
+    --color-primary-soft-text: oklch(85% 0.08 44);
+    --color-primary-highlight: oklch(75% 0.14 44);
+    --shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.06);
+    --shadow-md: 0 0.5rem 1.5rem oklch(0% 0 0 / 0.08);
+    --shadow-lg: 0 1rem 2rem oklch(0% 0 0 / 0.1);
+    --shadow-xl: 0 1.5rem 3rem oklch(0% 0 0 / 0.14);
+    --shadow-2xl: 0 2rem 4rem oklch(0% 0 0 / 0.18);
+    --shadow-primary-cta: 0 0.875rem 1.875rem oklch(69% 0.18 44 / 0.24);
+    --shadow-glow: 0 0 2rem oklch(69% 0.18 44 / 0.28);
+    --duration-fast: 150ms;
+    --duration-normal: 220ms;
+    --duration-slow: 360ms;
+    --ease-standard: cubic-bezier(.2, 0, 0, 1);
+  }
+}
+@layer tokens {
+  :root {
+    --sf-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --font-sans: var(--sf-font-sans);
+    --sf-font-display: Fraunces, Georgia, serif;
+    --font-display: var(--sf-font-display);
+    --sf-colour-background: oklch(98.6% 0.006 80);
+    --color-background: var(--sf-colour-background);
+    --sf-colour-foreground: oklch(18% 0.026 250);
+    --color-foreground: var(--sf-colour-foreground);
+    --sf-colour-muted: oklch(45% 0.018 236);
+    --color-muted: var(--sf-colour-muted);
+    --sf-colour-surface: oklch(100% 0 0);
+    --color-surface: var(--sf-colour-surface);
+    --sf-colour-surface-alt: oklch(96.4% 0.011 80);
+    --color-surface-alt: var(--sf-colour-surface-alt);
+    --sf-colour-border: oklch(18% 0.026 250 / 0.12);
+    --color-border: var(--sf-colour-border);
+    --sf-colour-primary: oklch(68% 0.18 44);
+    --color-primary: var(--sf-colour-primary);
+    --sf-colour-primary-hover: oklch(60% 0.17 42);
+    --color-primary-hover: var(--sf-colour-primary-hover);
+    --sf-colour-primary-foreground: oklch(100% 0 0);
+    --color-primary-foreground: var(--sf-colour-primary-foreground);
+    --sf-colour-accent: oklch(70% 0.12 205);
+    --color-accent: var(--sf-colour-accent);
+    --sf-colour-link: oklch(58% 0.17 42);
+    --color-link: var(--sf-colour-link);
+    --sf-colour-link-hover: oklch(68% 0.18 44);
+    --color-link-hover: var(--sf-colour-link-hover);
+    --sf-colour-ring: oklch(68% 0.18 44);
+    --color-ring: var(--sf-colour-ring);
+    --sf-button-radius: 0.5rem;
+    --button-radius: 0.5rem;
+    --sf-button-block-size: 2.75rem;
+    --button-size: 2.75rem;
+    --sf-button-padding-inline: var(--sf-space-s);
+    --button-padding-inline: var(--sf-space-s);
+    --sf-card-radius: 0.75rem;
+    --card-radius: 0.75rem;
+    --sf-card-padding: var(--sf-space-m-l);
+    --sf-input-radius: 0.5rem;
+    --sf-input-block-size: 2.75rem;
+  }
+}
+@layer utilities {
+}

package/examples/templates/README.md ADDED Viewed

@@ -0,0 +1,22 @@
+# Full Page Templates
+These templates are copy-ready HTML examples built from Synced Flow primitives.
+They intentionally reuse the plain HTML example CSS entry so they do not add to
+the core CSS size.
+Use the CLI for framework-specific output:
+```bash
+pnpm exec synced-flow recipe saas-landing --markup
+pnpm exec synced-flow recipe saas-landing --framework next --markup
+pnpm exec synced-flow recipe saas-dashboard --framework next --markup
+pnpm exec synced-flow recipe portfolio-scroll --framework astro --markup
+```
+Templates:
+- `saas-landing.html`
+- `saas-dashboard.html`
+- `portfolio-scroll.html`
+- `blog-index.html`
+- `coming-soon.html`