@syncedco/flow 0.3.1 → 0.4.1

package/docs/tokens.md

@@ -23,7 +23,7 @@ Semantic tokens describe intent.
 ```css
 --sf-colour-background: var(--sf-colour-neutral-50);
 --sf-colour-foreground: var(--sf-colour-neutral-900);
---sf-colour-primary: var(--sf-colour-orange-600);
+--sf-colour-primary: var(--sf-colour-orange-800);
 --sf-colour-surface-raised: var(--sf-colour-neutral-0);
 --sf-colour-success-soft: oklch(62% 0.13 150 / 0.12);
 ```
@@ -37,6 +37,9 @@ Theme overrides use `.sf-theme-dark`, `[data-sf-theme="dark"]`,
 `.sf-theme-light`, and `[data-sf-theme="light"]` selectors directly so they have
 enough specificity to override default `:root` values.
 
+The default action and link oranges use the darker 800/900 steps so white
+button text and orange text on light surfaces meet normal-text contrast.
+
 Use semantic utilities in projects:
 
 ```html
@@ -64,10 +67,15 @@ Type and space tokens use Utopia-style `clamp()` values.
 
 ```css
 --sf-step-0: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+--sf-type-body: var(--sf-step-0);
+--sf-text-base: var(--sf-type-body);
 --sf-space-s-l: clamp(1rem, 0.6173rem + 1.7007vw, 2.25rem);
 ```
 
-Prefer these tokens for new project CSS instead of fixed pixel values.
+Prefer these tokens for new project CSS instead of fixed pixel values. The root
+`html` element stays at `font-size: 100%` so browser and user accessibility
+settings remain in control; Synced Flow starts its fluid body scale from
+`--sf-text-base`.
 
 ## Core Starter Tokens
 

package/examples/README.md

@@ -7,8 +7,8 @@ These examples show the intended starting point for new projects.
 - `vite` - Vite React setup
 - `plain-html` - no framework setup with a complete website demo using only
   Synced Flow primitives for header, hero, content, cards, form, notice, and footer
-- `templates` - copy-ready full-page HTML templates for SaaS, portfolio, blog,
-  and coming soon pages
+- `templates` - copy-ready full-page HTML templates for SaaS, app settings,
+  portfolio, blog, and coming soon pages
 - `wordpress` - block theme style setup with enqueue code, templates, parts,
   and PHP patterns
 

package/examples/astro/src/styles/synced-flow.generated.css

@@ -19,6 +19,8 @@
     --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);
+    --type-caption-sm: var(--step--2);
+    --text-base: var(--step-0);
 
     --space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
     --space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
@@ -88,7 +90,9 @@
     --color-destructive: var(--sf-colour-destructive, oklch(55% 0.2 28));
     --color-destructive-foreground: var(--sf-colour-destructive-foreground, oklch(98% 0.01 95));
     --color-border: var(--sf-colour-border, oklch(100% 0 0 / 0.12));
+    --color-border-subtle: var(--sf-colour-border-subtle, oklch(100% 0 0 / 0.08));
     --color-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --color-backdrop: var(--sf-colour-backdrop, oklch(0% 0 0 / 0.56));
     --color-ring: var(--sf-colour-ring, oklch(69% 0.18 44));
     --color-heading: var(--sf-colour-heading, oklch(20% 0.02 18));
     --color-page-text: var(--sf-colour-page-text, oklch(23% 0.02 18));
@@ -97,6 +101,14 @@
     --color-subdued: var(--sf-colour-subdued, oklch(42% 0.02 20));
     --color-surface: var(--sf-colour-surface, oklch(96% 0.015 80));
     --color-surface-alt: var(--sf-colour-surface-alt, oklch(96.6% 0.018 82));
+    --color-surface-hover: var(--sf-colour-surface-hover, color-mix(in oklch, var(--color-surface-alt) 86%, var(--color-primary)));
+    --color-surface-raised-2: var(--sf-colour-surface-raised-2, color-mix(in oklch, var(--color-surface) 86%, white));
+    --color-categorical-1: var(--sf-colour-categorical-1, var(--color-primary));
+    --color-categorical-2: var(--sf-colour-categorical-2, var(--color-green));
+    --color-categorical-3: var(--sf-colour-categorical-3, var(--color-deco-blue));
+    --color-categorical-4: var(--sf-colour-categorical-4, var(--color-deco-lime));
+    --color-categorical-5: var(--sf-colour-categorical-5, var(--color-warm-icon));
+    --color-categorical-6: var(--sf-colour-categorical-6, var(--color-purple-icon));
     --color-hero-bg: oklch(8% 0.02 260);
     --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
     --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
@@ -168,6 +180,8 @@
     --color-surface: var(--sf-colour-surface);
     --sf-colour-surface-alt: oklch(94% 0.02 80);
     --color-surface-alt: var(--sf-colour-surface-alt);
+    --sf-colour-surface-elevated: var(--sf-colour-surface-raised);
+    --color-surface-elevated: var(--sf-colour-surface-elevated);
     --sf-colour-border: oklch(18% 0.022 55 / 0.14);
     --color-border: var(--sf-colour-border);
     --sf-colour-primary: oklch(58% 0.17 42);

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

@@ -19,6 +19,8 @@
     --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);
+    --type-caption-sm: var(--step--2);
+    --text-base: var(--step-0);
 
     --space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
     --space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
@@ -88,7 +90,9 @@
     --color-destructive: var(--sf-colour-destructive, oklch(55% 0.2 28));
     --color-destructive-foreground: var(--sf-colour-destructive-foreground, oklch(98% 0.01 95));
     --color-border: var(--sf-colour-border, oklch(100% 0 0 / 0.12));
+    --color-border-subtle: var(--sf-colour-border-subtle, oklch(100% 0 0 / 0.08));
     --color-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --color-backdrop: var(--sf-colour-backdrop, oklch(0% 0 0 / 0.56));
     --color-ring: var(--sf-colour-ring, oklch(69% 0.18 44));
     --color-heading: var(--sf-colour-heading, oklch(20% 0.02 18));
     --color-page-text: var(--sf-colour-page-text, oklch(23% 0.02 18));
@@ -97,6 +101,14 @@
     --color-subdued: var(--sf-colour-subdued, oklch(42% 0.02 20));
     --color-surface: var(--sf-colour-surface, oklch(96% 0.015 80));
     --color-surface-alt: var(--sf-colour-surface-alt, oklch(96.6% 0.018 82));
+    --color-surface-hover: var(--sf-colour-surface-hover, color-mix(in oklch, var(--color-surface-alt) 86%, var(--color-primary)));
+    --color-surface-raised-2: var(--sf-colour-surface-raised-2, color-mix(in oklch, var(--color-surface) 86%, white));
+    --color-categorical-1: var(--sf-colour-categorical-1, var(--color-primary));
+    --color-categorical-2: var(--sf-colour-categorical-2, var(--color-green));
+    --color-categorical-3: var(--sf-colour-categorical-3, var(--color-deco-blue));
+    --color-categorical-4: var(--sf-colour-categorical-4, var(--color-deco-lime));
+    --color-categorical-5: var(--sf-colour-categorical-5, var(--color-warm-icon));
+    --color-categorical-6: var(--sf-colour-categorical-6, var(--color-purple-icon));
     --color-hero-bg: oklch(8% 0.02 260);
     --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
     --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
@@ -168,21 +180,23 @@
     --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-surface-elevated: var(--sf-colour-surface-raised);
+    --color-surface-elevated: var(--sf-colour-surface-elevated);
     --sf-colour-border: oklch(18% 0.026 250 / 0.12);
     --color-border: var(--sf-colour-border);
-    --sf-colour-primary: oklch(68% 0.18 44);
+    --sf-colour-primary: oklch(50% 0.16 40);
     --color-primary: var(--sf-colour-primary);
-    --sf-colour-primary-hover: oklch(60% 0.17 42);
+    --sf-colour-primary-hover: oklch(44% 0.14 40);
     --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);
+    --sf-colour-link: oklch(50% 0.16 40);
     --color-link: var(--sf-colour-link);
-    --sf-colour-link-hover: oklch(68% 0.18 44);
+    --sf-colour-link-hover: oklch(44% 0.14 40);
     --color-link-hover: var(--sf-colour-link-hover);
-    --sf-colour-ring: oklch(68% 0.18 44);
+    --sf-colour-ring: oklch(50% 0.16 40);
     --color-ring: var(--sf-colour-ring);
     --sf-button-radius: 0.5rem;
     --button-radius: 0.5rem;

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

@@ -19,6 +19,8 @@
     --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);
+    --type-caption-sm: var(--step--2);
+    --text-base: var(--step-0);
 
     --space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
     --space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
@@ -88,7 +90,9 @@
     --color-destructive: var(--sf-colour-destructive, oklch(55% 0.2 28));
     --color-destructive-foreground: var(--sf-colour-destructive-foreground, oklch(98% 0.01 95));
     --color-border: var(--sf-colour-border, oklch(100% 0 0 / 0.12));
+    --color-border-subtle: var(--sf-colour-border-subtle, oklch(100% 0 0 / 0.08));
     --color-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --color-backdrop: var(--sf-colour-backdrop, oklch(0% 0 0 / 0.56));
     --color-ring: var(--sf-colour-ring, oklch(69% 0.18 44));
     --color-heading: var(--sf-colour-heading, oklch(20% 0.02 18));
     --color-page-text: var(--sf-colour-page-text, oklch(23% 0.02 18));
@@ -97,6 +101,14 @@
     --color-subdued: var(--sf-colour-subdued, oklch(42% 0.02 20));
     --color-surface: var(--sf-colour-surface, oklch(96% 0.015 80));
     --color-surface-alt: var(--sf-colour-surface-alt, oklch(96.6% 0.018 82));
+    --color-surface-hover: var(--sf-colour-surface-hover, color-mix(in oklch, var(--color-surface-alt) 86%, var(--color-primary)));
+    --color-surface-raised-2: var(--sf-colour-surface-raised-2, color-mix(in oklch, var(--color-surface) 86%, white));
+    --color-categorical-1: var(--sf-colour-categorical-1, var(--color-primary));
+    --color-categorical-2: var(--sf-colour-categorical-2, var(--color-green));
+    --color-categorical-3: var(--sf-colour-categorical-3, var(--color-deco-blue));
+    --color-categorical-4: var(--sf-colour-categorical-4, var(--color-deco-lime));
+    --color-categorical-5: var(--sf-colour-categorical-5, var(--color-warm-icon));
+    --color-categorical-6: var(--sf-colour-categorical-6, var(--color-purple-icon));
     --color-hero-bg: oklch(8% 0.02 260);
     --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
     --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
@@ -168,21 +180,23 @@
     --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-surface-elevated: var(--sf-colour-surface-raised);
+    --color-surface-elevated: var(--sf-colour-surface-elevated);
     --sf-colour-border: oklch(18% 0.026 250 / 0.12);
     --color-border: var(--sf-colour-border);
-    --sf-colour-primary: oklch(68% 0.18 44);
+    --sf-colour-primary: oklch(50% 0.16 40);
     --color-primary: var(--sf-colour-primary);
-    --sf-colour-primary-hover: oklch(60% 0.17 42);
+    --sf-colour-primary-hover: oklch(44% 0.14 40);
     --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);
+    --sf-colour-link: oklch(50% 0.16 40);
     --color-link: var(--sf-colour-link);
-    --sf-colour-link-hover: oklch(68% 0.18 44);
+    --sf-colour-link-hover: oklch(44% 0.14 40);
     --color-link-hover: var(--sf-colour-link-hover);
-    --sf-colour-ring: oklch(68% 0.18 44);
+    --sf-colour-ring: oklch(50% 0.16 40);
     --color-ring: var(--sf-colour-ring);
     --sf-button-radius: 0.5rem;
     --button-radius: 0.5rem;

package/examples/templates/README.md

@@ -10,6 +10,7 @@ Use the CLI for framework-specific output:
 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 app-settings-workflow --markup
 pnpm exec synced-flow recipe portfolio-scroll --framework astro --markup
 ```
 
@@ -17,6 +18,7 @@ Templates:
 
 - `saas-landing.html`
 - `saas-dashboard.html`
+- `app-settings-workflow.html`
 - `portfolio-scroll.html`
 - `blog-index.html`
 - `coming-soon.html`

package/examples/templates/app-settings-workflow.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Synced Flow Application Settings Template</title>
+    <link rel="stylesheet" href="../plain-html/synced-flow.css" />
+  </head>
+  <body>
+    <a class="sf-skip-link" href="#settings-main">Skip to settings</a>
+    <main class="sf-section" id="settings-main">
+      <div class="sf-container sf-split">
+        <nav aria-label="Setup progress">
+          <ol class="sf-stepper">
+            <li class="sf-stepper__step" data-complete="true"><span class="sf-stepper__marker" aria-hidden="true">✓</span><span class="sf-stepper__label"><span class="sr-only">Completed: </span>Workspace</span></li>
+            <li class="sf-stepper__step" aria-current="step"><span class="sf-stepper__marker" aria-hidden="true"></span><span class="sf-stepper__label">Preferences</span></li>
+            <li class="sf-stepper__step"><span class="sf-stepper__marker" aria-hidden="true"></span><span class="sf-stepper__label">Review</span></li>
+          </ol>
+        </nav>
+
+        <form class="sf-card sf-form" aria-labelledby="preferences-title">
+          <header class="sf-stack">
+            <p class="sf-kicker">Step 2 of 3</p>
+            <h1 id="preferences-title">Workspace preferences</h1>
+          </header>
+
+          <label class="sf-field">
+            <span class="sf-label">Workspace URL</span>
+            <span class="sf-input-group">
+              <span class="sf-input-group__leading" aria-hidden="true">https://</span>
+              <input class="sf-input" name="workspace" autocomplete="organization" />
+              <span class="sf-input-group__trailing" aria-hidden="true">.example.com</span>
+            </span>
+          </label>
+
+          <fieldset class="sf-fieldset">
+            <legend>Billing cycle</legend>
+            <div class="sf-segmented-control">
+              <label class="sf-segmented-control__option"><input type="radio" name="cycle" value="monthly" checked /><span class="sf-segmented-control__label">Monthly</span></label>
+              <label class="sf-segmented-control__option"><input type="radio" name="cycle" value="annual" /><span class="sf-segmented-control__label">Annual</span></label>
+            </div>
+          </fieldset>
+
+          <label class="sf-switch">
+            <input type="checkbox" role="switch" name="weekly_summary" checked />
+            <span class="sf-switch__control" aria-hidden="true"></span>
+            <span class="sf-switch__label">Email weekly summary</span>
+          </label>
+
+          <label class="sf-field">
+            <span class="sf-label" id="team-size-label">Team size: <output for="team-size">12</output></span>
+            <input class="sf-range" id="team-size" type="range" name="team_size" min="1" max="50" value="12" aria-labelledby="team-size-label" />
+          </label>
+
+          <label class="sf-field">
+            <span class="sf-label">Brand mark</span>
+            <input class="sf-file-input" type="file" name="brand_mark" accept="image/png,image/svg+xml" />
+            <span class="sf-help">PNG or SVG.</span>
+          </label>
+
+          <div class="sf-field">
+            <label class="sf-label" for="owner-search">Workspace owner</label>
+            <div class="sf-combobox">
+              <input class="sf-input" id="owner-search" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="owner-options" />
+              <ul class="sf-combobox__listbox" id="owner-options" role="listbox" hidden>
+                <li class="sf-combobox__option" id="owner-option-1" role="option" aria-selected="true">Alex Morgan</li>
+                <li class="sf-combobox__option" id="owner-option-2" role="option" aria-selected="false">Jamie Lee</li>
+              </ul>
+            </div>
+            <span class="sf-help">This static fixture shows presentation. The consuming app must implement combobox behavior.</span>
+          </div>
+
+          <div class="sf-wizard-actions">
+            <button class="sf-button sf-button--outline" type="button">Back</button>
+            <button class="sf-button" type="submit"><span class="sf-spinner" aria-hidden="true" hidden></span><span>Continue</span></button>
+          </div>
+        </form>
+      </div>
+    </main>
+  </body>
+</html>

package/examples/vite/src/synced-flow.generated.css

@@ -19,6 +19,8 @@
     --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);
+    --type-caption-sm: var(--step--2);
+    --text-base: var(--step-0);
 
     --space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
     --space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
@@ -88,7 +90,9 @@
     --color-destructive: var(--sf-colour-destructive, oklch(55% 0.2 28));
     --color-destructive-foreground: var(--sf-colour-destructive-foreground, oklch(98% 0.01 95));
     --color-border: var(--sf-colour-border, oklch(100% 0 0 / 0.12));
+    --color-border-subtle: var(--sf-colour-border-subtle, oklch(100% 0 0 / 0.08));
     --color-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --color-backdrop: var(--sf-colour-backdrop, oklch(0% 0 0 / 0.56));
     --color-ring: var(--sf-colour-ring, oklch(69% 0.18 44));
     --color-heading: var(--sf-colour-heading, oklch(20% 0.02 18));
     --color-page-text: var(--sf-colour-page-text, oklch(23% 0.02 18));
@@ -97,6 +101,14 @@
     --color-subdued: var(--sf-colour-subdued, oklch(42% 0.02 20));
     --color-surface: var(--sf-colour-surface, oklch(96% 0.015 80));
     --color-surface-alt: var(--sf-colour-surface-alt, oklch(96.6% 0.018 82));
+    --color-surface-hover: var(--sf-colour-surface-hover, color-mix(in oklch, var(--color-surface-alt) 86%, var(--color-primary)));
+    --color-surface-raised-2: var(--sf-colour-surface-raised-2, color-mix(in oklch, var(--color-surface) 86%, white));
+    --color-categorical-1: var(--sf-colour-categorical-1, var(--color-primary));
+    --color-categorical-2: var(--sf-colour-categorical-2, var(--color-green));
+    --color-categorical-3: var(--sf-colour-categorical-3, var(--color-deco-blue));
+    --color-categorical-4: var(--sf-colour-categorical-4, var(--color-deco-lime));
+    --color-categorical-5: var(--sf-colour-categorical-5, var(--color-warm-icon));
+    --color-categorical-6: var(--sf-colour-categorical-6, var(--color-purple-icon));
     --color-hero-bg: oklch(8% 0.02 260);
     --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
     --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
@@ -168,21 +180,23 @@
     --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-surface-elevated: var(--sf-colour-surface-raised);
+    --color-surface-elevated: var(--sf-colour-surface-elevated);
     --sf-colour-border: oklch(18% 0.026 250 / 0.12);
     --color-border: var(--sf-colour-border);
-    --sf-colour-primary: oklch(68% 0.18 44);
+    --sf-colour-primary: oklch(50% 0.16 40);
     --color-primary: var(--sf-colour-primary);
-    --sf-colour-primary-hover: oklch(60% 0.17 42);
+    --sf-colour-primary-hover: oklch(44% 0.14 40);
     --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);
+    --sf-colour-link: oklch(50% 0.16 40);
     --color-link: var(--sf-colour-link);
-    --sf-colour-link-hover: oklch(68% 0.18 44);
+    --sf-colour-link-hover: oklch(44% 0.14 40);
     --color-link-hover: var(--sf-colour-link-hover);
-    --sf-colour-ring: oklch(68% 0.18 44);
+    --sf-colour-ring: oklch(50% 0.16 40);
     --color-ring: var(--sf-colour-ring);
     --sf-button-radius: 0.5rem;
     --button-radius: 0.5rem;