@syncedco/flow 0.1.0

package/examples/next/app/page.tsx

@@ -0,0 +1,92 @@
+export default function Page() {
+  return (
+    <main>
+      <header className="sf-section sf-section--compact sf-sticky-top sf-bg-background">
+        <nav className="sf-container sf-nav" aria-label="Main navigation">
+          <a className="sf-nav__link" href="#home">
+            Synced Studio
+          </a>
+          <ul className="sf-nav__list">
+            <li>
+              <a className="sf-nav__link" href="#work">
+                Work
+              </a>
+            </li>
+            <li>
+              <a className="sf-nav__link" href="#contact">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+
+      <section id="home" className="sf-section">
+        <div className="sf-container sf-split">
+          <div className="sf-stack">
+            <p className="sf-badge">Next.js template</p>
+            <h1 className="sf-text-display">Build with fluid tokens from the first screen.</h1>
+            <p className="sf-text-lead sf-prose">
+              This page composes a sticky nav, split hero, card grid, native disclosure, and contact form with Synced Flow classes.
+            </p>
+            <div className="sf-cluster">
+              <a className="sf-button sf-button--default" href="#contact">
+                Start discovery
+              </a>
+              <a className="sf-button sf-button--outline" href="#work">
+                View work
+              </a>
+            </div>
+          </div>
+          <div className="sf-card sf-stack">
+            <p className="sf-kicker">Replace this card</p>
+            <p className="sf-text-lead">Use this area for a product screenshot, proof points, or a short customer quote.</p>
+          </div>
+        </div>
+      </section>
+
+      <section id="work" className="sf-section">
+        <div className="sf-container sf-stack">
+          <div className="sf-section-header">
+            <p className="sf-kicker">Patterns</p>
+            <h2 className="sf-text-h2">Swap sections without writing page CSS.</h2>
+          </div>
+          <div className="sf-auto-grid">
+            {['Hero systems', 'Native overlays', 'Accessible forms'].map((item) => (
+              <article className="sf-card sf-card--interactive sf-stack" key={item}>
+                <h3 className="sf-text-h4">{item}</h3>
+                <p className="sf-text-muted">Replace this section with project content while keeping the class structure.</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section id="contact" className="sf-section">
+        <div className="sf-container sf-split">
+          <div className="sf-stack">
+            <p className="sf-kicker">Contact</p>
+            <h2 className="sf-text-h2">A styled form without custom field CSS.</h2>
+            <details className="sf-disclosure">
+              <summary>Can this run without JavaScript components?</summary>
+              <p>Yes. Synced Flow styles native HTML and CSS primitives; project JavaScript stays optional.</p>
+            </details>
+          </div>
+          <form className="sf-form sf-card">
+            <label className="sf-field">
+              <span className="sf-label">Email</span>
+              <input className="sf-input" type="email" placeholder="you@example.com" />
+            </label>
+            <label className="sf-field">
+              <span className="sf-label">Message</span>
+              <textarea className="sf-textarea" rows={4} placeholder="Tell us what you are building." />
+            </label>
+            <button className="sf-button sf-button--default" type="submit">
+              Send
+            </button>
+          </form>
+        </div>
+      </section>
+    </main>
+  )
+}

package/examples/next/app/synced-flow.css

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

package/examples/next/app/synced-flow.generated.css

@@ -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/next/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "synced-flow-next-example",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "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:../..",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}

package/examples/next/synced-flow.config.mjs

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