@syncedco/flow 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # 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.

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/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/system-primitives.md

@@ -10,7 +10,7 @@ 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. |

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
 

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);

package/examples/wordpress/assets/css/synced-flow.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));
@@ -202,7 +214,7 @@
 @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; }
@@ -212,11 +224,15 @@
 }
 
 @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;
@@ -244,7 +260,7 @@
   :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;
   }
 
@@ -330,11 +346,47 @@
   }
 
   .sf-app-shell {
+    --sf-app-header-height: 4rem;
+    --sf-app-sidebar-collapsed-width: 4.75rem;
     background: var(--color-background);
     color: var(--color-foreground);
     display: grid;
     grid-template-columns: minmax(14rem, var(--sf-app-sidebar-width, 16rem)) minmax(0, 1fr);
     min-block-size: 100dvh;
+    position: relative;
+    transition: grid-template-columns var(--duration-normal) var(--ease-standard);
+  }
+
+  .sf-app-header {
+    align-items: center;
+    background: var(--color-card);
+    border-block-end: 1px solid var(--color-border);
+    display: flex;
+    gap: var(--space-s);
+    grid-column: 1 / -1;
+    justify-content: space-between;
+    min-block-size: var(--sf-app-header-height);
+    padding-inline: var(--space-s-m);
+    z-index: 20;
+  }
+
+  .sf-app-shell[data-layout~="fixed-header"] {
+    grid-template-rows: var(--sf-app-header-height) minmax(0, 1fr);
+  }
+
+  .sf-app-shell[data-layout~="fixed-header"] .sf-app-header {
+    inset-block-start: 0;
+    position: sticky;
+  }
+
+  .sf-app-shell[data-layout~="fixed-header"] .sf-app-sidebar {
+    inset-block-start: var(--sf-app-header-height);
+    max-block-size: calc(100dvh - var(--sf-app-header-height));
+    min-block-size: calc(100dvh - var(--sf-app-header-height));
+  }
+
+  .sf-app-shell[data-collapsed="true"] {
+    grid-template-columns: var(--sf-app-sidebar-collapsed-width) minmax(0, 1fr);
   }
 
   .sf-app-sidebar {
@@ -350,6 +402,7 @@
     padding: var(--space-s);
     position: sticky;
     inset-block-start: 0;
+    transition: transform var(--duration-normal) var(--ease-standard), inline-size var(--duration-normal) var(--ease-standard);
   }
 
   .sf-app-sidebar__brand {
@@ -402,6 +455,58 @@
     padding: var(--sf-app-main-padding, var(--space-m-l));
   }
 
+  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar {
+    overflow-x: hidden;
+  }
+
+  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar__brand,
+  .sf-app-shell[data-collapsed="true"] .sf-app-sidebar .sf-nav__link {
+    justify-content: center;
+  }
+
+  .sf-app-shell[data-collapsed="true"] [data-hide-collapsed="true"] {
+    display: none;
+  }
+
+  .sf-app-backdrop {
+    display: none;
+  }
+
+  @media (max-width: 48rem) {
+    .sf-app-shell[data-mobile="drawer"] {
+      display: block;
+    }
+
+    .sf-app-shell[data-mobile="drawer"] .sf-app-header {
+      position: sticky;
+      inset-block-start: 0;
+    }
+
+    .sf-app-shell[data-mobile="drawer"] .sf-app-sidebar {
+      box-shadow: var(--shadow-xl);
+      inline-size: min(18rem, calc(100vw - var(--space-l)));
+      inset-block: 0;
+      inset-inline-start: 0;
+      max-block-size: none;
+      min-block-size: 100dvh;
+      position: fixed;
+      transform: translateX(-100%);
+      z-index: 30;
+    }
+
+    .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-sidebar {
+      transform: translateX(0);
+    }
+
+    .sf-app-shell[data-mobile="drawer"][data-sidebar-open="true"] .sf-app-backdrop {
+      background: var(--color-backdrop);
+      display: block;
+      inset: 0;
+      position: fixed;
+      z-index: 25;
+    }
+  }
+
   .sf-grid {
     display: grid;
     gap: var(--grid-gutter);
@@ -725,11 +830,268 @@
     overflow: hidden;
   }
 
+  .sf-progress {
+    accent-color: var(--progress-color, var(--color-primary));
+    block-size: var(--progress-size, .625rem);
+    inline-size: 100%;
+  }
+
+  .sf-progress::-webkit-progress-bar {
+    background: var(--color-surface-alt);
+    border-radius: var(--radius-full);
+  }
+
+  .sf-progress::-webkit-progress-value,
+  .sf-progress::-moz-progress-bar {
+    background: var(--progress-color, var(--color-primary));
+    border-radius: var(--radius-full);
+  }
+
+  .sf-skeleton {
+    background: color-mix(in oklch, var(--color-surface-alt) 82%, var(--color-foreground));
+    border-radius: var(--skeleton-radius, var(--radius-md));
+    color: transparent;
+    min-block-size: var(--skeleton-block-size, 1em);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sf-skeleton {
+      animation: sf-skeleton-pulse 1.4s var(--ease-standard) infinite alternate;
+    }
+  }
+
+  @keyframes sf-skeleton-pulse {
+    to { opacity: .62; }
+  }
+
+  .sf-filter-bar {
+    align-items: end;
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    padding: var(--space-s);
+  }
+
+  .sf-filter-bar > :where(.sf-field, form, label) {
+    flex: 1 1 min(100%, 14rem);
+  }
+
+  .sf-filter-bar > :where(.sf-button, button, a) {
+    flex: 0 0 auto;
+  }
+
+  .sf-data-table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    min-inline-size: var(--data-table-min, 44rem);
+  }
+
+  .sf-data-table :where(th, td) {
+    border-block-end: 1px solid var(--color-border);
+    padding-block: var(--data-table-padding-block, var(--space-xs));
+    padding-inline: var(--data-table-padding-inline, var(--space-s));
+    text-align: start;
+    vertical-align: middle;
+  }
+
+  .sf-data-table :where(th) {
+    background: var(--color-surface-alt);
+    color: var(--color-muted-foreground);
+    font-size: var(--step--1);
+    font-weight: 800;
+  }
+
+  .sf-data-table :where(tbody tr:hover) {
+    background: color-mix(in oklch, var(--color-primary) 6%, transparent);
+  }
+
+  .sf-data-table[data-density="compact"] {
+    --data-table-padding-block: var(--space-2xs);
+    --data-table-padding-inline: var(--space-xs);
+  }
+
+  .sf-data-table :where(th button, .sf-table-sort) {
+    align-items: center;
+    color: inherit;
+    display: inline-flex;
+    font: inherit;
+    font-weight: inherit;
+    gap: var(--space-3xs);
+    padding: 0;
+  }
+
+  .sf-data-table :where(th button, .sf-table-sort)[aria-sort]::after {
+    color: var(--color-muted-foreground);
+    content: "\2195";
+    font-size: var(--step--2);
+  }
+
+  .sf-data-table :where(th button, .sf-table-sort)[aria-sort="ascending"]::after { content: "\2191"; }
+  .sf-data-table :where(th button, .sf-table-sort)[aria-sort="descending"]::after { content: "\2193"; }
+
+  .sf-data-table tr[data-clickable="true"] {
+    cursor: pointer;
+  }
+
+  .sf-data-table tr[data-clickable="true"]:focus-within {
+    outline: 0.125rem solid var(--color-ring);
+    outline-offset: -0.125rem;
+  }
+
+  @container (max-width: 38rem) {
+    .sf-table-wrap[data-view="cards"] {
+      border: 0;
+      overflow: visible;
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table,
+    .sf-table-wrap[data-view="cards"] .sf-data-table :where(thead, tbody, tr, th, td) {
+      display: block;
+      min-inline-size: 0;
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table thead {
+      display: none;
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table tr {
+      background: var(--color-card);
+      border: 1px solid var(--color-border);
+      border-radius: var(--radius-lg);
+      margin-block-end: var(--space-xs);
+      padding: var(--space-xs);
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table td {
+      align-items: center;
+      border: 0;
+      display: flex;
+      gap: var(--space-s);
+      justify-content: space-between;
+      padding-block: var(--space-2xs);
+      padding-inline: 0;
+    }
+
+    .sf-table-wrap[data-view="cards"] .sf-data-table td::before {
+      color: var(--color-muted-foreground);
+      content: attr(data-label);
+      font-size: var(--step--1);
+      font-weight: 800;
+    }
+  }
+
+  .sf-status {
+    align-items: center;
+    background: var(--status-bg, var(--color-surface-alt));
+    border: 1px solid var(--status-border, var(--color-border));
+    border-radius: var(--radius-full);
+    color: var(--status-color, var(--color-foreground));
+    display: inline-flex;
+    font-size: var(--step--1);
+    font-weight: 700;
+    gap: var(--space-3xs);
+    line-height: 1;
+    min-block-size: 1.75rem;
+    padding-inline: .7em;
+  }
+
+  .sf-status[data-size="sm"] {
+    font-size: var(--step--2);
+    min-block-size: 1.35rem;
+    padding-inline: .55em;
+  }
+
+  .sf-status::before {
+    background: currentColor;
+    block-size: .42em;
+    border-radius: var(--radius-full);
+    content: "";
+    inline-size: .42em;
+  }
+
+  .sf-status[data-tone="success"] {
+    --status-bg: var(--sf-colour-success-soft, oklch(62% 0.13 150 / 0.12));
+    --status-border: color-mix(in oklch, var(--sf-colour-success, oklch(62% 0.13 150)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-success, oklch(62% 0.13 150)) 76%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="warning"] {
+    --status-bg: var(--sf-colour-warning-soft, oklch(78% 0.15 82 / 0.16));
+    --status-border: color-mix(in oklch, var(--sf-colour-warning, oklch(78% 0.15 82)) 38%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-warning, oklch(78% 0.15 82)) 70%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="danger"] {
+    --status-bg: var(--sf-colour-danger-soft, oklch(56% 0.2 28 / 0.12));
+    --status-border: color-mix(in oklch, var(--sf-colour-danger, var(--color-destructive)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-danger, var(--color-destructive)) 76%, var(--color-foreground));
+  }
+
+  .sf-status[data-tone="info"] {
+    --status-bg: var(--sf-colour-info-soft, oklch(70% 0.12 205 / 0.14));
+    --status-border: color-mix(in oklch, var(--sf-colour-info, oklch(70% 0.12 205)) 34%, transparent);
+    --status-color: color-mix(in oklch, var(--sf-colour-info, oklch(70% 0.12 205)) 76%, var(--color-foreground));
+  }
+
+  .sf-data-list {
+    display: grid;
+  }
+
+  .sf-data-list > * {
+    align-items: center;
+    border-block-end: 1px solid var(--color-border);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    justify-content: space-between;
+    padding-block: var(--space-xs);
+  }
+
+  .sf-data-list > :last-child {
+    border-block-end: 0;
+  }
+
+  .sf-empty-state {
+    align-items: center;
+    background: var(--color-surface-alt);
+    border: 1px dashed var(--color-border);
+    border-radius: var(--radius-lg);
+    color: var(--color-muted-foreground);
+    display: grid;
+    gap: var(--space-xs);
+    justify-items: center;
+    padding: var(--space-l);
+    text-align: center;
+  }
+
+  .sf-settings-section,
+  .sf-detail-panel {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    display: grid;
+    gap: var(--space-s);
+    padding: var(--space-m);
+  }
+
+  .sf-detail-panel {
+    background: var(--color-surface-alt);
+  }
+
   .sf-field {
     display: grid;
     gap: var(--space-2xs);
   }
 
+  .sf-form[data-density="compact"],
+  .sf-field[data-density="compact"] {
+    --input-block-size: 2.25rem;
+    --input-padding-inline: var(--space-xs);
+  }
+
   .sf-field > label {
     color: var(--color-muted-foreground);
     font-size: var(--step--1);
@@ -742,7 +1104,41 @@
     border-radius: var(--input-radius, var(--radius-md));
     color: var(--color-foreground);
     min-block-size: var(--input-block-size, 2.75rem);
-    padding-inline: var(--space-s);
+    padding-inline: var(--input-padding-inline, var(--space-s));
+  }
+
+  .sf-search {
+    position: relative;
+  }
+
+  .sf-search::before {
+    block-size: .75em;
+    border: 0.125em solid currentColor;
+    border-radius: var(--radius-full);
+    color: var(--color-muted-foreground);
+    content: "";
+    inline-size: .75em;
+    inset-block-start: 50%;
+    inset-inline-start: var(--space-xs);
+    line-height: 1;
+    position: absolute;
+    transform: translateY(-58%);
+  }
+
+  .sf-search::after {
+    background: var(--color-muted-foreground);
+    block-size: .125em;
+    content: "";
+    inline-size: .45em;
+    inset-block-start: 50%;
+    inset-inline-start: calc(var(--space-xs) + .58em);
+    position: absolute;
+    transform: translateY(120%) rotate(45deg);
+    transform-origin: inline-start center;
+  }
+
+  .sf-search > .sf-input {
+    padding-inline-start: var(--space-l);
   }
 
   .sf-input:focus-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncedco/flow",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "AI-friendly fluid CSS design system for brand-consistent websites and agency builds.",
   "type": "module",
   "packageManager": "pnpm@11.2.2",

package/reset.css

@@ -3,7 +3,7 @@
 @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; }

package/styles.css

@@ -21,6 +21,7 @@
     --sf-type-caption-sm: var(--sf-step--2);
     --sf-type-caption: var(--sf-step--1);
     --sf-type-body: var(--sf-step-0);
+    --sf-text-base: var(--sf-type-body);
     --sf-type-lead: var(--sf-step-1);
     --sf-type-h6: var(--sf-step-1);
     --sf-type-h5: var(--sf-step-2);
@@ -242,7 +243,7 @@
 @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; }
@@ -254,6 +255,7 @@
   html {
     background: var(--sf-colour-background);
     color: var(--sf-colour-foreground);
+    font-size: 100%;
     scroll-behavior: smooth;
   }
 
@@ -261,7 +263,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/tokens.css

@@ -21,6 +21,7 @@
     --sf-type-caption-sm: var(--sf-step--2);
     --sf-type-caption: var(--sf-step--1);
     --sf-type-body: var(--sf-step-0);
+    --sf-text-base: var(--sf-type-body);
     --sf-type-lead: var(--sf-step-1);
     --sf-type-h6: var(--sf-step-1);
     --sf-type-h5: var(--sf-step-2);