@syncedco/flow 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+## 0.3.2 - 2026-06-15
+
+- Add an explicit accessible root typography baseline with `html { font-size: 100%; }`.
+- Add `--sf-text-base` and generated `--text-base` aliases for fluid body text.
+- Use the new fluid body text token in shipped and generated base CSS.
+- Convert CLI-generated utility lengths for blur, rings, outlines, and thicker borders from static `px` to `rem`.
+- Extend guardrails and tests so shipped generated examples reject raw pixels outside allowed hairline, visually-hidden, and forced-colors exceptions.
+
+## 0.3.1 - 2026-06-13
+
+- Fix mobile app drawer scrolling by giving the drawer sidebar a viewport block size.
+- Vertically center `.sf-tab` contents.
+- Improve built-in dark theme token coverage for primary, state, soft, ring, and glow tokens.
+- Make `.sf-filter-bar` alignment token-configurable with a centered default.
+- Add a status-chip dot opt-out with `data-dot="false"` and `sf-status--label`.
+- Add reduced-motion safeguards for hover lift and marquee animation.
+- Add public `--sf-z-*` stacking tokens for header, backdrop, drawer, overlay, toast, sticky, and skip-link layers.
+- Reframe positioning copy from "AI-native" to "AI-friendly".
+- Document the global theme config scope and the project-CSS pattern for advanced theme matrices.

package/README.md

@@ -1,6 +1,6 @@
 # Synced Flow
 
-AI-native fluid CSS design system for brand-consistent websites, agency builds,
+AI-friendly fluid CSS design system for brand-consistent websites, agency builds,
 and modern frontend projects.
 
 Synced Flow gives developers and AI coding agents a shared styling contract:
@@ -58,6 +58,7 @@ documentation, and recipes.
 Useful project files:
 
 - [Contributing](CONTRIBUTING.md)
+- [Changelog](CHANGELOG.md)
 - [Security policy](SECURITY.md)
 - [Code of conduct](CODE_OF_CONDUCT.md)
 - [Support](SUPPORT.md)

package/base.css

@@ -4,6 +4,7 @@
   html {
     background: var(--sf-colour-background);
     color: var(--sf-colour-foreground);
+    font-size: 100%;
     scroll-behavior: smooth;
   }
 
@@ -11,7 +12,7 @@
     background: var(--sf-colour-background);
     color: var(--sf-colour-foreground);
     font-family: var(--sf-font-sans);
-    font-size: var(--sf-type-body);
+    font-size: var(--sf-text-base);
     line-height: var(--sf-line-height-body);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;

package/bin/synced-flow.mjs

@@ -2980,6 +2980,19 @@ function pxToRem(value) {
   })
 }
 
+function pixelNumberToRem(value) {
+  const number = Number(value)
+  if (Number.isNaN(number)) return null
+  if (number === 0) return '0'
+  return `${round(number / 16)}rem`
+}
+
+function borderWidthUnit(value) {
+  if (value === '0') return '0'
+  if (value === '1') return '1px'
+  return pixelNumberToRem(value)
+}
+
 function arbitraryValue(value) {
   return pxToRem(value.replace(/_/g, ' '))
 }
@@ -3650,7 +3663,7 @@ function colourUtility(base) {
 function borderUtility(base) {
   if (base === 'border') return [['border-width', '1px']]
   if (base === 'border-0') return [['border-width', '0']]
-  if (base === 'border-2') return [['border-width', '2px']]
+  if (base === 'border-2') return [['border-width', '0.125rem']]
   if (base === 'border-t') return [['border-top-width', '1px']]
   if (base === 'border-r') return [['border-right-width', '1px']]
   if (base === 'border-b') return [['border-bottom-width', '1px']]
@@ -3660,7 +3673,7 @@ function borderUtility(base) {
   const sideWidth = base.match(/^border-(t|r|b|l)-(\d+)$/)
   if (sideWidth) {
     const side = { t: 'top', r: 'right', b: 'bottom', l: 'left' }[sideWidth[1]]
-    return [[`border-${side}-width`, `${sideWidth[2]}px`]]
+    return [[`border-${side}-width`, borderWidthUnit(sideWidth[2])]]
   }
   if (base === 'divide-y') return [['--sf-divide-y', '1px']]
   if (base === 'divide-x') return [['--sf-divide-x', '1px']]
@@ -3724,26 +3737,26 @@ function effectUtility(base) {
   if (match) return [['opacity', String(Number(match[1]) / 100)]]
   match = base.match(/^blur-(none|sm|md|lg|xl|2xl|3xl)$/)
   if (match) {
-    const map = { none: '0', sm: '4px', md: '12px', lg: '16px', xl: '24px', '2xl': '40px', '3xl': '64px' }
+    const map = { none: '0', sm: '0.25rem', md: '0.75rem', lg: '1rem', xl: '1.5rem', '2xl': '2.5rem', '3xl': '4rem' }
     return [['filter', `blur(${map[match[1]]})`]]
   }
   match = base.match(/^backdrop-blur(?:-(none|sm|md|lg|xl))?$/)
   if (match) {
-    const map = { undefined: '8px', none: '0', sm: '4px', md: '12px', lg: '16px', xl: '24px' }
+    const map = { undefined: '0.5rem', none: '0', sm: '0.25rem', md: '0.75rem', lg: '1rem', xl: '1.5rem' }
     return [['backdrop-filter', `blur(${map[match[1] ?? 'undefined']})`]]
   }
   match = base.match(/^ring(?:-(\d+))?$/)
-  if (match) return [['box-shadow', `0 0 0 ${match[1] ?? 3}px var(--sf-ring-color, var(--color-ring))`]]
+  if (match) return [['box-shadow', `0 0 0 ${pixelNumberToRem(match[1] ?? 3)} var(--sf-ring-color, var(--color-ring))`]]
   if (base === 'ring-offset-white') return [['--sf-ring-offset-color', 'var(--color-white)']]
   if (base === 'ring-offset-background') return [['--sf-ring-offset-color', 'var(--color-background)']]
   match = base.match(/^ring-offset-(\d+)$/)
-  if (match) return [['--sf-ring-offset-width', `${match[1]}px`]]
+  if (match) return [['--sf-ring-offset-width', pixelNumberToRem(match[1])]]
   if (base === 'outline') return [['outline-style', 'solid']]
-  if (base === 'outline-none') return [['outline', '2px solid transparent'], ['outline-offset', '2px']]
+  if (base === 'outline-none') return [['outline', '0.125rem solid transparent'], ['outline-offset', '0.125rem']]
   match = base.match(/^outline-(\d+)$/)
-  if (match) return [['outline-width', `${match[1]}px`]]
+  if (match) return [['outline-width', pixelNumberToRem(match[1])]]
   match = base.match(/^outline-offset-(\d+)$/)
-  if (match) return [['outline-offset', `${match[1]}px`]]
+  if (match) return [['outline-offset', pixelNumberToRem(match[1])]]
   match = base.match(/^outline-(.+)$/)
   if (match) {
     const value = colourValue(match[1])
@@ -3944,6 +3957,7 @@ function buildTokensCss() {
 
 ${steps.join('\n')}
     --type-caption-sm: var(--step--2);
+    --text-base: var(--step-0);
 
 ${spaces.join('\n')}
 ${pairs.join('\n')}
@@ -4074,7 +4088,7 @@ function buildBaseCss() {
   return `@layer reset {
   *, *::before, *::after { box-sizing: border-box; }
   *:where(:not(dialog)) { margin: 0; }
-  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+  html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
   body { min-block-size: 100%; }
   img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
   img, video { block-size: auto; }
@@ -4084,11 +4098,15 @@ function buildBaseCss() {
 }
 
 @layer base {
+  html {
+    font-size: 100%;
+  }
+
   body {
     background: var(--color-background);
     color: var(--color-foreground);
     font-family: var(--font-inter, var(--sf-font-sans, ui-sans-serif, system-ui, sans-serif));
-    font-size: var(--step-0);
+    font-size: var(--text-base);
     line-height: 1.5;
     font-feature-settings: "rlig" 1, "calt" 1;
     -webkit-font-smoothing: antialiased;
@@ -4116,7 +4134,7 @@ function buildBaseCss() {
   :where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
 
   :where(:focus-visible) {
-    outline: 2px solid var(--color-ring);
+    outline: 0.125rem solid var(--color-ring);
     outline-offset: .2rem;
   }
 

package/components.css

@@ -432,6 +432,16 @@
     to { transform: translateX(-50%); }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    :where(.sf-button:hover, .sf-card--interactive:hover) {
+      transform: none;
+    }
+
+    .sf-marquee__track {
+      animation: none;
+    }
+  }
+
   .sf-command-list {
     display: grid;
     font-family: var(--sf-font-mono);
@@ -837,7 +847,7 @@
   }
 
   .sf-filter-bar {
-    align-items: end;
+    align-items: var(--sf-filter-bar-align, center);
     background: var(--sf-colour-surface);
     border: 1px solid var(--sf-colour-border);
     border-radius: var(--sf-radius-panel);
@@ -984,6 +994,10 @@
     inline-size: .42em;
   }
 
+  :where(.sf-status[data-dot="false"], .sf-status--label)::before {
+    content: none;
+  }
+
   .sf-status[data-tone="success"] {
     --sf-status-bg: var(--sf-colour-success-soft);
     --sf-status-border: color-mix(in oklch, var(--sf-colour-success) 34%, transparent);
@@ -1418,6 +1432,7 @@
   :where(.sf-popover, .sf-menu-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer):popover-open {
     display: grid;
     gap: var(--sf-space-xs);
+    z-index: var(--sf-z-overlay);
   }
 
   .sf-popover {
@@ -1489,7 +1504,7 @@
     inset-block-start: var(--sf-space-s);
     inset-inline-end: var(--sf-space-s);
     position: fixed;
-    z-index: 50;
+    z-index: var(--sf-z-toast);
   }
 
   .sf-banner {
@@ -1604,6 +1619,7 @@
   }
 
   .sf-tab {
+    align-items: center;
     border-block-end: 0.125rem solid transparent;
     border-radius: var(--sf-radius-full);
     color: var(--sf-colour-muted);

package/docs/audit-2026-06.md

@@ -0,0 +1,113 @@
+# Synced Flow Audit — June 2026 (v0.3.0)
+
+Independent audit of `@syncedco/flow` at v0.3.0 (`a8a1f68`), run across three
+passes: product coherence (claims vs shipped), CSS quality, and tooling/release
+engineering. Findings are grounded in the source and in real consumer feedback
+from the Synced CRM (`synced-crm`, the first production app consumer).
+
+## Verdict
+
+Flow delivers its **original model (websites/agency) almost completely** and
+the **engineering discipline behind it impressively**. It falls short in three
+places: **app-tier depth**, **advanced theming scope**, and a few product
+positioning/docs gaps. It is a real, well-built system, and the positioning now
+fits better as AI-friendly / agent-ready.
+
+| Dimension | Rating | Summary |
+|---|---|---|
+| Fluid foundation (tokens, scales, layout) | ✅ Excellent | Genuine Utopia-style fluidity; modern CSS (layers, oklch, logical props, container queries); clean layer hygiene |
+| Website/agency coverage | ✅ ~90% | Everything claimed ships; agency-ready without custom CSS |
+| Tooling & release engineering | ✅ Excellent | 14 tested CLI commands, guardrails (size budgets, zero-dep, px policy), 40/40 tests, automated tag-driven publishing |
+| App/SaaS tier (0.2–0.3) | ⚠️ ~60% | Real scaffolding (proven by the CRM) but thin; consumers carry 20–40% custom CSS |
+| Dark mode | ✅ Patched after audit | `.sf-theme-dark` now overrides primary/status/soft/ring/glow tokens rather than inheriting light-tuned values |
+| Theming config | ✅ Documented boundary | Config handles global light/dark token themes; advanced per-surface/multi-variant theming belongs in project CSS token scopes |
+| AI positioning | ✅ Reframed | Positioning now uses AI-friendly / agent-ready language for the shipped CLI, skill, and agent guidance |
+| Docs | ⚠️ Improving | Website docs thorough; CHANGELOG and theming-scope docs added; app-tier docs can still mature |
+
+## Confirmed bugs (found by the CRM, verified in source)
+
+1. **Drawer can't scroll** — fixed after audit by adding `block-size: 100dvh`
+   to `.sf-app-shell[data-mobile="drawer"] .sf-app-sidebar`, giving the
+   existing `overflow: auto` a real viewport-height scroll container.
+2. **`.sf-tab` not vertically centred** — fixed after audit with
+   `align-items: center`.
+3. **`.sf-filter-bar` `align-items: end`** — fixed after audit with
+   `align-items: var(--sf-filter-bar-align, center)`, preserving a project
+   escape hatch without adding a new component variant.
+4. **`.sf-status` dot is mandatory** — fixed after audit with
+   `data-dot="false"` and `sf-status--label` opt-outs.
+
+## Higher-severity findings the CRM did NOT hit
+
+These mattered because no consumer had exercised them yet. They are now patched
+or documented, but should still be validated in the next real consumer.
+
+5. **Dark mode token coverage is critically incomplete** — fixed after audit
+   for the shipped base theme by adding dark-mode primary, state, soft, ring,
+   and glow token overrides.
+6. **Z-index scale is compressed and undocumented** — fixed after audit with
+   public `--sf-z-*` tokens wired into header, backdrop, drawer, overlay, toast,
+   sticky, and skip-link layers.
+7. **Missing `prefers-reduced-motion` guards** — fixed after audit for
+   `.sf-button:hover`, `.sf-card--interactive:hover`, and the marquee track.
+
+## Theming model limitation (real, undocumented)
+
+Config supports global light + `darkColours` + per-preset overrides. It does
+not try to express per-surface / multi-variant theming (e.g. `[data-theme]` ×
+`[data-surface]` matrices, per-tenant white-label, density-by-context). That is
+a legitimate design choice for Synced Flow's scope, and `config-reference.md`
+now documents the hand-written token-scope pattern for advanced cases.
+
+## AI-Friendly Positioning
+
+What ships is real and good: `catalog --json`, `suggest`, `pattern`, `recipe`,
+`lint`, `doctor`, a packaged skill, and `agents install` for 8 targets. The
+project now describes this as **AI-friendly** and agent-readable tooling rather
+than implying runtime AI integration.
+
+## App-tier coverage gaps (from real CRM adoption)
+
+Shipped and adopted: app-shell, data-table, empty-state, filter-bar, status
+chips, tabs, toast skin, form field shells. Still missing for production app
+work (CRM kept custom or deferred): combobox/searchable select, pagination
+depth (page size, jump-to-page), modal-with-form as a primitive (not just a
+pattern), bulk-actions toolbar, multi-step/wizard, skeleton loading compounds,
+sticky-header + horizontal-scroll tables. Kanban/timesheet/invoice-doc are
+deliberately consumer-specific and out of scope.
+
+## Strengths (keep doing)
+
+- Real fluidity; modern CSS; excellent cascade-layer hygiene.
+- Tooling/release engineering is the strongest area: guardrails enforce
+  zero-dependency, per-layer gzip size budgets, layer order, and a raw-px
+  policy; 40/40 tests pass; tag-driven OIDC publishing; complete exports map.
+- CLI catalog currently in sync with shipped CSS (verified) — though by hand.
+- AI agent guidance (skill + `agents install`) is current with 0.3.0 primitives.
+
+## Recommended roadmap
+
+**0.3.1 — bug patch (small, soon):**
+1. Drawer viewport scroll container. ✅
+2. `.sf-tab` `align-items: center`. ✅
+3. `.sf-filter-bar` tokenized alignment with centered default. ✅
+4. `.sf-status` dot opt-out. ✅
+5. `prefers-reduced-motion` guards on hover transforms + marquee. ✅
+
+**0.4.0 — structural gaps:**
+6. Continue dark-mode validation with a real consumer using Flow's built-in
+   theme selectors.
+7. Begin app-tier depth: combobox, pagination, modal-with-form, bulk-actions —
+   prioritised by what the CRM had to keep custom.
+
+**Docs / positioning / CI (cheap, high-trust):**
+8. CI: smoke-build the examples; add a test asserting the CLI catalog matches
+    the shipped CSS (in sync today only by hand); consider a CSS parse/lint and
+    a small visual-regression pass.
+
+## Meta-observation
+
+The four bugs the CRM surfaced are exactly the class only a real consumer finds
+— the proving-ground loop is working as intended. The most useful next
+validation step is getting a second consumer, or the CRM itself, onto Flow's
+built-in dark mode and app primitives before 1.0.

package/docs/base-styling.md

@@ -111,3 +111,8 @@ The base layer uses cascade layers, logical properties, low-specificity
 `prefers-reduced-motion`. Utopia informs the fluid type, space, and grid
 tokens; Synced Flow owns the reset, accessibility helpers, and component
 defaults.
+
+The root element is kept at `font-size: 100%` rather than a fixed pixel value so
+browser and user font-size settings remain respected. Body copy starts from the
+fluid text token with `body { font-size: var(--sf-text-base); }`, where
+`--sf-text-base` maps to the existing body type scale.

package/docs/config-reference.md

@@ -79,3 +79,30 @@ theme: {
   },
 }
 ```
+
+## Theme Scope
+
+The config theme model is intentionally global. Use `theme.colours` for the
+default token set and `theme.darkColours` for `.sf-theme-dark` /
+`[data-sf-theme="dark"]` overrides. This covers the common site or app case:
+one brand token set, with an optional dark-mode token set.
+
+Synced Flow does not try to encode every theme matrix in config. If a project
+needs per-tenant branding, `[data-surface]` variants, density-by-context, or
+other multi-axis theme rules, keep the reusable defaults in config and write
+the extra token scopes in project CSS:
+
+```css
+[data-tenant="acme"] {
+  --sf-colour-primary: oklch(62% 0.19 252);
+  --sf-colour-primary-hover: oklch(56% 0.19 252);
+}
+
+[data-surface="inset"] {
+  --sf-colour-surface: var(--sf-colour-surface-inset);
+  --sf-card-padding: var(--sf-space-s);
+}
+```
+
+Use this pattern for deliberate product theming. Avoid scattering one-off
+colour values through page components when a value can live in a token scope.

package/docs/system-primitives.md

@@ -10,13 +10,14 @@ Use the `--sf-*` variables as the stable CSS foundation.
 | Layer | Examples | Use for |
 | --- | --- | --- |
 | Font | `--sf-font-sans`, `--sf-font-display`, `--sf-font-mono` | Site typography families. |
-| Type | `--sf-type-body`, `--sf-type-lead`, `--sf-type-h1`, `--sf-type-display` | Fluid text sizes. |
+| Type | `--sf-text-base`, `--sf-type-body`, `--sf-type-lead`, `--sf-type-h1`, `--sf-type-display` | Fluid text sizes. |
 | Space | `--sf-space-s`, `--sf-space-m-l`, `--sf-space-xl-2xl` | Fluid padding, margin, and gaps. |
 | Radius | `--sf-radius-control`, `--sf-radius-panel`, `--sf-radius-full` | Controls, panels, pills. |
 | Colour | `--sf-colour-background`, `--sf-colour-surface`, `--sf-colour-primary` | Semantic UI colour roles. |
 | App colour | `--sf-colour-surface-hover`, `--sf-colour-surface-raised-2`, `--sf-colour-border-subtle`, `--sf-colour-backdrop` | App surfaces, hover states, subtle dividers, and overlays. |
 | Categorical colour | `--sf-colour-categorical-1` ... `--sf-colour-categorical-6` | Charts, stages, labels, and recurring data accents. |
 | State | `--sf-colour-success`, `--sf-colour-warning`, `--sf-colour-danger`, `--sf-colour-info` | Feedback and notices. |
+| Z-index | `--sf-z-header`, `--sf-z-backdrop`, `--sf-z-drawer`, `--sf-z-overlay`, `--sf-z-toast` | Shared stacking slots for app chrome, drawers, popovers, and feedback. |
 | Motion | `--sf-duration-fast`, `--sf-duration-normal`, `--sf-ease-standard` | Consistent transitions. |
 | Component | `--sf-button-*`, `--sf-card-*`, `--sf-input-*`, `--sf-alert-*` | Reusable component defaults. |
 | Accessibility | `:focus-visible`, `:target`, `[aria-invalid]`, `[aria-current]`, `[aria-expanded]`, `[aria-selected]`, `[aria-busy]`, `[aria-disabled]` | Visible native and ARIA states. |

package/docs/tokens.md

@@ -64,10 +64,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
 
@@ -86,6 +91,8 @@ The generated core includes enough semantic variables for common website UI:
 - structure: `--sf-colour-border-subtle`, `--sf-colour-border`,
   `--sf-colour-border-strong`, `--sf-colour-backdrop`,
   `--sf-radius-control`, `--sf-radius-panel`, `--sf-shadow-*`
+- stacking: `--sf-z-sticky`, `--sf-z-header`, `--sf-z-backdrop`,
+  `--sf-z-drawer`, `--sf-z-overlay`, `--sf-z-toast`, `--sf-z-skip-link`
 - data accents: `--sf-colour-categorical-1` through
   `--sf-colour-categorical-6`
 

package/docs/why-synced-flow.md

@@ -22,7 +22,7 @@ Synced Flow is designed to reduce the number of styling decisions made from scra
 
 Synced Flow is not trying to be a Tailwind clone, a Bootstrap replacement, or a React component library.
 
-It is an AI-native fluid CSS design system for brand-consistent websites and agency builds.
+It is an AI-friendly fluid CSS design system for brand-consistent websites and agency builds.
 
 Use it when you want:
 

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,6 +180,8 @@
     --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);

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,6 +180,8 @@
     --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);

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,6 +180,8 @@
     --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);