@syncedco/flow 0.1.2 → 0.1.4

package/bin/synced-flow.mjs

@@ -491,6 +491,10 @@ ${includeDefaults ? '@import "@syncedco/flow/defaults.css";\n' : ''}@import "./$
     )
   }
 
+  if (preset === 'wordpress') {
+    writeProjectFile(resolve(targetCwd, 'theme.json'), buildWordPressThemeJson(), force)
+  }
+
   if (!noScripts) addPackageScripts(targetCwd)
   if (agentsTarget !== undefined || args.includes('--agents')) {
     await installAgentGuidance({
@@ -2426,6 +2430,45 @@ function formatStringArray(values) {
   return `[${values.map((value) => `'${value}'`).join(', ')}]`
 }
 
+function buildWordPressThemeJson() {
+  return `${JSON.stringify({
+    $schema: 'https://schemas.wp.org/trunk/theme.json',
+    version: 3,
+    settings: {
+      appearanceTools: true,
+      color: {
+        palette: [
+          { slug: 'base', name: 'Base', color: 'var(--sf-colour-background)' },
+          { slug: 'foreground', name: 'Foreground', color: 'var(--sf-colour-foreground)' },
+          { slug: 'muted', name: 'Muted', color: 'var(--sf-colour-muted)' },
+          { slug: 'surface', name: 'Surface', color: 'var(--sf-colour-surface)' },
+          { slug: 'surface-alt', name: 'Surface Alt', color: 'var(--sf-colour-surface-alt)' },
+          { slug: 'surface-elevated', name: 'Surface Elevated', color: 'var(--sf-colour-surface-elevated, var(--sf-colour-surface-raised))' },
+          { slug: 'border', name: 'Border', color: 'var(--sf-colour-border)' },
+          { slug: 'primary', name: 'Primary', color: 'var(--sf-colour-primary)' },
+          { slug: 'primary-foreground', name: 'Primary Foreground', color: 'var(--sf-colour-primary-foreground)' },
+        ],
+      },
+      layout: {
+        contentSize: '72rem',
+        wideSize: '90rem',
+      },
+    },
+    styles: {
+      color: {
+        background: 'var(--sf-colour-background)',
+        text: 'var(--sf-colour-foreground)',
+      },
+      spacing: {
+        blockGap: 'var(--space-s-l)',
+      },
+      typography: {
+        fontFamily: 'var(--sf-font-sans)',
+      },
+    },
+  }, null, 2)}\n`
+}
+
 function projectContains(targetCwd, needle) {
   return allProjectFiles(targetCwd).some((file) => readFileSync(file, 'utf8').includes(needle))
 }
@@ -3569,7 +3612,7 @@ function buildThemeCss(theme) {
     sections.push(`  :root {\n${root.join('\n')}\n  }`)
   }
   if (dark.length) {
-    sections.push(`  :where(.sf-theme-dark, [data-sf-theme="dark"]) {\n${dark.join('\n')}\n  }`)
+    sections.push(`  .sf-theme-dark, [data-sf-theme="dark"] {\n${dark.join('\n')}\n  }`)
   }
 
   return sections.join('\n\n')
@@ -3651,74 +3694,74 @@ ${pairs.join('\n')}
     --color-white: ${colours.white};
     --color-black: ${colours.black};
 
-    --color-background: ${colours.ink950};
-    --color-foreground: oklch(96% 0.01 92);
-    --color-card: ${colours.ink900};
-    --color-card-foreground: oklch(96% 0.01 92);
-    --color-popover: ${colours.ink900};
-    --color-popover-foreground: oklch(96% 0.01 92);
-    --color-primary: ${colours.orange600};
-    --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: ${colours.red600};
-    --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: ${colours.orange600};
-    --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: ${colours.surfaceAlt};
-    --color-surface-alt: ${colours.paperAlt};
+    --color-background: var(--sf-colour-background, ${colours.ink950});
+    --color-foreground: var(--sf-colour-foreground, oklch(96% 0.01 92));
+    --color-card: var(--sf-colour-card, ${colours.ink900});
+    --color-card-foreground: var(--sf-colour-card-foreground, oklch(96% 0.01 92));
+    --color-popover: var(--sf-colour-popover, ${colours.ink900});
+    --color-popover-foreground: var(--sf-colour-popover-foreground, oklch(96% 0.01 92));
+    --color-primary: var(--sf-colour-primary, ${colours.orange600});
+    --color-primary-hover: var(--sf-colour-primary-hover, oklch(64% 0.18 44));
+    --color-primary-label: var(--sf-colour-primary-label, oklch(55% 0.18 44));
+    --color-primary-border: var(--sf-colour-primary-border, oklch(66% 0.17 43));
+    --color-primary-foreground: var(--sf-colour-primary-foreground, oklch(98% 0.01 95));
+    --color-secondary: var(--sf-colour-secondary, oklch(24% 0.018 22));
+    --color-secondary-foreground: var(--sf-colour-secondary-foreground, oklch(96% 0.01 92));
+    --color-muted: var(--sf-colour-muted, oklch(26% 0.012 24));
+    --color-muted-foreground: var(--sf-colour-muted-foreground, oklch(76% 0.01 92));
+    --color-accent: var(--sf-colour-accent, oklch(24% 0.018 22));
+    --color-accent-foreground: var(--sf-colour-accent-foreground, oklch(96% 0.01 92));
+    --color-destructive: var(--sf-colour-destructive, ${colours.red600});
+    --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-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --color-ring: var(--sf-colour-ring, ${colours.orange600});
+    --color-heading: var(--sf-colour-heading, oklch(20% 0.02 18));
+    --color-page-text: var(--sf-colour-page-text, oklch(23% 0.02 18));
+    --color-body: var(--sf-colour-body, oklch(45% 0.02 28));
+    --color-body-dark: var(--sf-colour-body-dark, oklch(40% 0.02 28));
+    --color-subdued: var(--sf-colour-subdued, oklch(42% 0.02 20));
+    --color-surface: var(--sf-colour-surface, ${colours.surfaceAlt});
+    --color-surface-alt: var(--sf-colour-surface-alt, ${colours.paperAlt});
     --color-hero-bg: oklch(8% 0.02 260);
-    --color-green: ${colours.green600};
-    --color-green-dark: ${colours.green700};
-    --color-green-muted: oklch(40% 0.12 148);
-    --color-green-light: ${colours.green100};
-    --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: ${colours.purple600};
-    --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);
+    --color-green: var(--sf-colour-green, ${colours.green600});
+    --color-green-dark: var(--sf-colour-green-dark, ${colours.green700});
+    --color-green-muted: var(--sf-colour-green-muted, oklch(40% 0.12 148));
+    --color-green-light: var(--sf-colour-green-light, ${colours.green100});
+    --color-green-lighter: var(--sf-colour-green-lighter, oklch(92% 0.04 148));
+    --color-green-bg: var(--sf-colour-green-bg, oklch(88% 0.07 148));
+    --color-green-bg-alt: var(--sf-colour-green-bg-alt, oklch(82% 0.1 148));
+    --color-green-vivid: var(--sf-colour-green-vivid, oklch(78% 0.08 148));
+    --color-green-mid: var(--sf-colour-green-mid, oklch(75% 0.12 148));
+    --color-green-deep: var(--sf-colour-green-deep, oklch(70% 0.14 150));
+    --color-green-deepest: var(--sf-colour-green-deepest, oklch(60% 0.14 150));
+    --color-green-wash: var(--sf-colour-green-wash, oklch(93% 0.06 148));
+    --color-green-wash-alt: var(--sf-colour-green-wash-alt, oklch(88% 0.08 148));
+    --color-green-gradient-from: var(--sf-colour-green-gradient-from, oklch(82% 0.1 148));
+    --color-green-gradient-to: var(--sf-colour-green-gradient-to, oklch(86% 0.06 148));
+    --color-deco-lime: var(--sf-colour-deco-lime, oklch(80% 0.18 130));
+    --color-deco-blue: var(--sf-colour-deco-blue, oklch(60% 0.12 240));
+    --color-deco-warm: var(--sf-colour-deco-warm, oklch(80% 0.06 60));
+    --color-deco-warm-light: var(--sf-colour-deco-warm-light, oklch(92% 0.02 80));
+    --color-deco-warm-mid: var(--sf-colour-deco-warm-mid, oklch(80% 0.15 60));
+    --color-purple-light: var(--sf-colour-purple-light, oklch(95% 0.05 280));
+    --color-purple-mid: var(--sf-colour-purple-mid, oklch(92% 0.05 280));
+    --color-purple-dark: var(--sf-colour-purple-dark, oklch(90% 0.06 280));
+    --color-purple-darker: var(--sf-colour-purple-darker, oklch(87% 0.07 280));
+    --color-purple-icon: var(--sf-colour-purple-icon, ${colours.purple600});
+    --color-warm-light: var(--sf-colour-warm-light, oklch(95.6% 0.05 22));
+    --color-warm-mid: var(--sf-colour-warm-mid, oklch(95% 0.04 40));
+    --color-warm-grad-to: var(--sf-colour-warm-grad-to, oklch(90% 0.08 30));
+    --color-warm-grad-to-alt: var(--sf-colour-warm-grad-to-alt, oklch(90% 0.06 30));
+    --color-warm-icon: var(--sf-colour-warm-icon, oklch(60% 0.17 44));
+    --color-cool-light: var(--sf-colour-cool-light, oklch(92% 0.04 200));
+    --color-cool-dark: var(--sf-colour-cool-dark, oklch(87% 0.06 200));
+    --color-primary-glow: var(--sf-colour-primary-glow, oklch(80% 0.12 44));
+    --color-primary-soft: var(--sf-colour-primary-soft, oklch(69% 0.18 44 / 0.10));
+    --color-primary-soft-border: var(--sf-colour-primary-soft-border, oklch(69% 0.18 44 / 0.30));
+    --color-primary-soft-border-light: var(--sf-colour-primary-soft-border-light, oklch(69% 0.18 44 / 0.25));
+    --color-primary-soft-text: var(--sf-colour-primary-soft-text, oklch(85% 0.08 44));
+    --color-primary-highlight: var(--sf-colour-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);

package/docs/api-contract.md

@@ -53,6 +53,10 @@ layers for reset, base, layout, components, and utilities, but foundational
 theme variables need the normal cascade so values from `synced-flow.config.mjs`
 are not weaker than unlayered project CSS.
 
+Theme selectors such as `.sf-theme-dark` and `[data-sf-theme="dark"]` are
+emitted with normal class/attribute specificity, not inside `:where()`, so they
+can override the default `:root` token values.
+
 Put reusable brand decisions in `theme.colours`, `theme.darkColours`,
 `theme.radii`, `theme.layout`, and `theme.components`. Theme switcher CSS should
 only style the toggle/control UI; it should not redefine `--sf-*` colour tokens.

package/docs/cli-reference.md

@@ -28,6 +28,11 @@ Options:
 | `--no-scripts` | Do not update `package.json`. |
 | `--force` | Overwrite init-managed files. |
 
+The WordPress preset also writes a `theme.json` colour palette that maps
+WordPress editor presets such as `base`, `surface`, `surface-elevated`, and
+`primary` to Synced Flow semantic tokens. Use those presets on blocks instead of
+overriding WordPress `.has-*` preset classes in CSS.
+
 ## agents
 
 Install or inspect project-level AI guidance.

package/docs/tokens.md

@@ -33,6 +33,10 @@ source of truth for brand colours, radius, layout, and component decisions.
 Use `theme.darkColours` for dark-mode values instead of maintaining a separate
 CSS file that redefines `--sf-*` variables.
 
+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.
+
 Use semantic utilities in projects:
 
 ```html

package/docs/wordpress.md

@@ -18,6 +18,8 @@ The WordPress preset:
 - scans PHP, HTML, JS, TS, JSX, TSX, Twig, Vue, Svelte, Astro, and MDX files
 - enables `includeCore`
 - writes `assets/css/synced-flow.css`
+- writes a `theme.json` palette that maps WordPress colour presets to Synced
+  Flow semantic tokens
 
 See [`examples/wordpress`](../examples/wordpress) for a lean block theme style
 template with `theme.json`, template parts, PHP patterns, enqueue code, and an
@@ -54,6 +56,37 @@ wp_enqueue_style(
 For plugins, use `plugins_url()` or `plugin_dir_url()` instead of
 `get_theme_file_uri()`.
 
+## WordPress Presets
+
+WordPress emits editor preset classes such as `.has-base-background-color`,
+`.has-primary-color`, and `.has-large-font-size` with `!important`. Treat those
+classes as the editor's chosen design value.
+
+Do not override `.has-*` preset classes in project CSS. Add or choose a better
+semantic preset instead, then use that preset on the block.
+
+The generated `theme.json` maps common WordPress colour presets to Synced Flow
+tokens:
+
+```json
+{
+  "slug": "surface-elevated",
+  "name": "Surface Elevated",
+  "color": "var(--sf-colour-surface-elevated, var(--sf-colour-surface-raised))"
+}
+```
+
+Use those presets for any block that needs an editor-visible design role:
+
+- `base` for page backgrounds
+- `surface` and `surface-alt` for standard panels
+- `surface-elevated` for chrome, mastheads, footers, sticky bars, and raised
+  regions
+- `primary` and `primary-foreground` for branded actions
+
+If a new visual role appears repeatedly, add it to `synced-flow.config.mjs` and
+expose it in `theme.json`; avoid adding `!important` overrides.
+
 ## Dynamic Classes
 
 Synced Flow generates utility CSS from complete class tokens. Keep class names

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

@@ -2,8 +2,7 @@
 
 @layer reset, tokens, base, app, layout, components, utilities, overrides;
 
-@layer tokens {
-  :root {
+: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);
@@ -69,74 +68,74 @@
     --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-background: var(--sf-colour-background, oklch(14% 0.025 248));
+    --color-foreground: var(--sf-colour-foreground, oklch(96% 0.01 92));
+    --color-card: var(--sf-colour-card, oklch(18% 0.024 246));
+    --color-card-foreground: var(--sf-colour-card-foreground, oklch(96% 0.01 92));
+    --color-popover: var(--sf-colour-popover, oklch(18% 0.024 246));
+    --color-popover-foreground: var(--sf-colour-popover-foreground, oklch(96% 0.01 92));
+    --color-primary: var(--sf-colour-primary, oklch(69% 0.18 44));
+    --color-primary-hover: var(--sf-colour-primary-hover, oklch(64% 0.18 44));
+    --color-primary-label: var(--sf-colour-primary-label, oklch(55% 0.18 44));
+    --color-primary-border: var(--sf-colour-primary-border, oklch(66% 0.17 43));
+    --color-primary-foreground: var(--sf-colour-primary-foreground, oklch(98% 0.01 95));
+    --color-secondary: var(--sf-colour-secondary, oklch(24% 0.018 22));
+    --color-secondary-foreground: var(--sf-colour-secondary-foreground, oklch(96% 0.01 92));
+    --color-muted: var(--sf-colour-muted, oklch(26% 0.012 24));
+    --color-muted-foreground: var(--sf-colour-muted-foreground, oklch(76% 0.01 92));
+    --color-accent: var(--sf-colour-accent, oklch(24% 0.018 22));
+    --color-accent-foreground: var(--sf-colour-accent-foreground, oklch(96% 0.01 92));
+    --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-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --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));
+    --color-body: var(--sf-colour-body, oklch(45% 0.02 28));
+    --color-body-dark: var(--sf-colour-body-dark, oklch(40% 0.02 28));
+    --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-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);
+    --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
+    --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
+    --color-green-muted: var(--sf-colour-green-muted, oklch(40% 0.12 148));
+    --color-green-light: var(--sf-colour-green-light, oklch(90% 0.06 148));
+    --color-green-lighter: var(--sf-colour-green-lighter, oklch(92% 0.04 148));
+    --color-green-bg: var(--sf-colour-green-bg, oklch(88% 0.07 148));
+    --color-green-bg-alt: var(--sf-colour-green-bg-alt, oklch(82% 0.1 148));
+    --color-green-vivid: var(--sf-colour-green-vivid, oklch(78% 0.08 148));
+    --color-green-mid: var(--sf-colour-green-mid, oklch(75% 0.12 148));
+    --color-green-deep: var(--sf-colour-green-deep, oklch(70% 0.14 150));
+    --color-green-deepest: var(--sf-colour-green-deepest, oklch(60% 0.14 150));
+    --color-green-wash: var(--sf-colour-green-wash, oklch(93% 0.06 148));
+    --color-green-wash-alt: var(--sf-colour-green-wash-alt, oklch(88% 0.08 148));
+    --color-green-gradient-from: var(--sf-colour-green-gradient-from, oklch(82% 0.1 148));
+    --color-green-gradient-to: var(--sf-colour-green-gradient-to, oklch(86% 0.06 148));
+    --color-deco-lime: var(--sf-colour-deco-lime, oklch(80% 0.18 130));
+    --color-deco-blue: var(--sf-colour-deco-blue, oklch(60% 0.12 240));
+    --color-deco-warm: var(--sf-colour-deco-warm, oklch(80% 0.06 60));
+    --color-deco-warm-light: var(--sf-colour-deco-warm-light, oklch(92% 0.02 80));
+    --color-deco-warm-mid: var(--sf-colour-deco-warm-mid, oklch(80% 0.15 60));
+    --color-purple-light: var(--sf-colour-purple-light, oklch(95% 0.05 280));
+    --color-purple-mid: var(--sf-colour-purple-mid, oklch(92% 0.05 280));
+    --color-purple-dark: var(--sf-colour-purple-dark, oklch(90% 0.06 280));
+    --color-purple-darker: var(--sf-colour-purple-darker, oklch(87% 0.07 280));
+    --color-purple-icon: var(--sf-colour-purple-icon, oklch(55% 0.2 280));
+    --color-warm-light: var(--sf-colour-warm-light, oklch(95.6% 0.05 22));
+    --color-warm-mid: var(--sf-colour-warm-mid, oklch(95% 0.04 40));
+    --color-warm-grad-to: var(--sf-colour-warm-grad-to, oklch(90% 0.08 30));
+    --color-warm-grad-to-alt: var(--sf-colour-warm-grad-to-alt, oklch(90% 0.06 30));
+    --color-warm-icon: var(--sf-colour-warm-icon, oklch(60% 0.17 44));
+    --color-cool-light: var(--sf-colour-cool-light, oklch(92% 0.04 200));
+    --color-cool-dark: var(--sf-colour-cool-dark, oklch(87% 0.06 200));
+    --color-primary-glow: var(--sf-colour-primary-glow, oklch(80% 0.12 44));
+    --color-primary-soft: var(--sf-colour-primary-soft, oklch(69% 0.18 44 / 0.10));
+    --color-primary-soft-border: var(--sf-colour-primary-soft-border, oklch(69% 0.18 44 / 0.30));
+    --color-primary-soft-border-light: var(--sf-colour-primary-soft-border-light, oklch(69% 0.18 44 / 0.25));
+    --color-primary-soft-text: var(--sf-colour-primary-soft-text, oklch(85% 0.08 44));
+    --color-primary-highlight: var(--sf-colour-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);
@@ -150,10 +149,10 @@
     --duration-normal: 220ms;
     --duration-slow: 360ms;
     --ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --icon-size: 1em;
+    --icon-stroke: 2;
   }
-}
 
-@layer tokens {
   :root {
     --sf-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
     --font-sans: var(--sf-font-sans);
@@ -198,7 +197,6 @@
     --sf-card-padding: var(--sf-space-l);
     --sf-input-radius: 0.375rem;
   }
-}
 
 @layer utilities {
 

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

@@ -2,8 +2,7 @@
 
 @layer reset, tokens, base, app, layout, components, utilities, overrides;
 
-@layer tokens {
-  :root {
+: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);
@@ -69,74 +68,74 @@
     --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-background: var(--sf-colour-background, oklch(14% 0.025 248));
+    --color-foreground: var(--sf-colour-foreground, oklch(96% 0.01 92));
+    --color-card: var(--sf-colour-card, oklch(18% 0.024 246));
+    --color-card-foreground: var(--sf-colour-card-foreground, oklch(96% 0.01 92));
+    --color-popover: var(--sf-colour-popover, oklch(18% 0.024 246));
+    --color-popover-foreground: var(--sf-colour-popover-foreground, oklch(96% 0.01 92));
+    --color-primary: var(--sf-colour-primary, oklch(69% 0.18 44));
+    --color-primary-hover: var(--sf-colour-primary-hover, oklch(64% 0.18 44));
+    --color-primary-label: var(--sf-colour-primary-label, oklch(55% 0.18 44));
+    --color-primary-border: var(--sf-colour-primary-border, oklch(66% 0.17 43));
+    --color-primary-foreground: var(--sf-colour-primary-foreground, oklch(98% 0.01 95));
+    --color-secondary: var(--sf-colour-secondary, oklch(24% 0.018 22));
+    --color-secondary-foreground: var(--sf-colour-secondary-foreground, oklch(96% 0.01 92));
+    --color-muted: var(--sf-colour-muted, oklch(26% 0.012 24));
+    --color-muted-foreground: var(--sf-colour-muted-foreground, oklch(76% 0.01 92));
+    --color-accent: var(--sf-colour-accent, oklch(24% 0.018 22));
+    --color-accent-foreground: var(--sf-colour-accent-foreground, oklch(96% 0.01 92));
+    --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-input: var(--sf-colour-input, oklch(100% 0 0 / 0.12));
+    --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));
+    --color-body: var(--sf-colour-body, oklch(45% 0.02 28));
+    --color-body-dark: var(--sf-colour-body-dark, oklch(40% 0.02 28));
+    --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-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);
+    --color-green: var(--sf-colour-green, oklch(55% 0.12 148));
+    --color-green-dark: var(--sf-colour-green-dark, oklch(45% 0.12 148));
+    --color-green-muted: var(--sf-colour-green-muted, oklch(40% 0.12 148));
+    --color-green-light: var(--sf-colour-green-light, oklch(90% 0.06 148));
+    --color-green-lighter: var(--sf-colour-green-lighter, oklch(92% 0.04 148));
+    --color-green-bg: var(--sf-colour-green-bg, oklch(88% 0.07 148));
+    --color-green-bg-alt: var(--sf-colour-green-bg-alt, oklch(82% 0.1 148));
+    --color-green-vivid: var(--sf-colour-green-vivid, oklch(78% 0.08 148));
+    --color-green-mid: var(--sf-colour-green-mid, oklch(75% 0.12 148));
+    --color-green-deep: var(--sf-colour-green-deep, oklch(70% 0.14 150));
+    --color-green-deepest: var(--sf-colour-green-deepest, oklch(60% 0.14 150));
+    --color-green-wash: var(--sf-colour-green-wash, oklch(93% 0.06 148));
+    --color-green-wash-alt: var(--sf-colour-green-wash-alt, oklch(88% 0.08 148));
+    --color-green-gradient-from: var(--sf-colour-green-gradient-from, oklch(82% 0.1 148));
+    --color-green-gradient-to: var(--sf-colour-green-gradient-to, oklch(86% 0.06 148));
+    --color-deco-lime: var(--sf-colour-deco-lime, oklch(80% 0.18 130));
+    --color-deco-blue: var(--sf-colour-deco-blue, oklch(60% 0.12 240));
+    --color-deco-warm: var(--sf-colour-deco-warm, oklch(80% 0.06 60));
+    --color-deco-warm-light: var(--sf-colour-deco-warm-light, oklch(92% 0.02 80));
+    --color-deco-warm-mid: var(--sf-colour-deco-warm-mid, oklch(80% 0.15 60));
+    --color-purple-light: var(--sf-colour-purple-light, oklch(95% 0.05 280));
+    --color-purple-mid: var(--sf-colour-purple-mid, oklch(92% 0.05 280));
+    --color-purple-dark: var(--sf-colour-purple-dark, oklch(90% 0.06 280));
+    --color-purple-darker: var(--sf-colour-purple-darker, oklch(87% 0.07 280));
+    --color-purple-icon: var(--sf-colour-purple-icon, oklch(55% 0.2 280));
+    --color-warm-light: var(--sf-colour-warm-light, oklch(95.6% 0.05 22));
+    --color-warm-mid: var(--sf-colour-warm-mid, oklch(95% 0.04 40));
+    --color-warm-grad-to: var(--sf-colour-warm-grad-to, oklch(90% 0.08 30));
+    --color-warm-grad-to-alt: var(--sf-colour-warm-grad-to-alt, oklch(90% 0.06 30));
+    --color-warm-icon: var(--sf-colour-warm-icon, oklch(60% 0.17 44));
+    --color-cool-light: var(--sf-colour-cool-light, oklch(92% 0.04 200));
+    --color-cool-dark: var(--sf-colour-cool-dark, oklch(87% 0.06 200));
+    --color-primary-glow: var(--sf-colour-primary-glow, oklch(80% 0.12 44));
+    --color-primary-soft: var(--sf-colour-primary-soft, oklch(69% 0.18 44 / 0.10));
+    --color-primary-soft-border: var(--sf-colour-primary-soft-border, oklch(69% 0.18 44 / 0.30));
+    --color-primary-soft-border-light: var(--sf-colour-primary-soft-border-light, oklch(69% 0.18 44 / 0.25));
+    --color-primary-soft-text: var(--sf-colour-primary-soft-text, oklch(85% 0.08 44));
+    --color-primary-highlight: var(--sf-colour-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);
@@ -150,10 +149,10 @@
     --duration-normal: 220ms;
     --duration-slow: 360ms;
     --ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --icon-size: 1em;
+    --icon-stroke: 2;
   }
-}
 
-@layer tokens {
   :root {
     --sf-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
     --font-sans: var(--sf-font-sans);
@@ -197,7 +196,6 @@
     --sf-input-radius: 0.5rem;
     --sf-input-block-size: 2.75rem;
   }
-}
 
 @layer utilities {