@syncedco/flow 0.1.3 → 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))
 }

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/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/wordpress/assets/css/synced-flow.css

@@ -168,6 +168,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/parts/footer.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"tagName":"footer","className":"sf-footer"} -->
-<footer class="wp-block-group sf-footer">
+<!-- wp:group {"tagName":"footer","backgroundColor":"surface-elevated","className":"sf-footer"} -->
+<footer class="wp-block-group sf-footer has-surface-elevated-background-color has-background">
   <!-- wp:group {"className":"sf-container sf-repel"} -->
   <div class="wp-block-group sf-container sf-repel">
     <!-- wp:paragraph {"className":"sf-text-muted"} -->

package/examples/wordpress/parts/header.html

@@ -1,5 +1,5 @@
-<!-- wp:group {"tagName":"header","className":"sf-section sf-section--compact sf-sticky-top sf-bg-background"} -->
-<header class="wp-block-group sf-section sf-section--compact sf-sticky-top sf-bg-background">
+<!-- wp:group {"tagName":"header","backgroundColor":"surface-elevated","className":"sf-section sf-section--compact sf-sticky-top"} -->
+<header class="wp-block-group sf-section sf-section--compact sf-sticky-top has-surface-elevated-background-color has-background">
   <!-- wp:group {"className":"sf-container sf-nav","layout":{"type":"flex","justifyContent":"space-between"}} -->
   <div class="wp-block-group sf-container sf-nav">
     <!-- wp:site-title {"className":"sf-nav__link"} /-->

package/examples/wordpress/theme.json

@@ -3,12 +3,65 @@
   "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)"
     },

package/package.json

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

package/src/presets.mjs

@@ -10,6 +10,7 @@ export const themePresets = {
       muted: 'oklch(45% 0.018 236)',
       surface: 'oklch(100% 0 0)',
       surfaceAlt: 'oklch(96.4% 0.011 80)',
+      surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(18% 0.026 250 / 0.12)',
       primary: 'oklch(68% 0.18 44)',
       primaryHover: 'oklch(60% 0.17 42)',
@@ -46,6 +47,7 @@ export const themePresets = {
       muted: 'oklch(44.6% 0.043 257)',
       surface: 'oklch(100% 0 0)',
       surfaceAlt: 'oklch(96.8% 0.007 247)',
+      surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(20.8% 0.042 265 / 0.12)',
       primary: 'oklch(52% 0.14 250)',
       primaryHover: 'oklch(44% 0.13 250)',
@@ -84,6 +86,7 @@ export const themePresets = {
       muted: 'oklch(43% 0.02 65)',
       surface: 'oklch(100% 0 0)',
       surfaceAlt: 'oklch(94% 0.02 80)',
+      surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(18% 0.022 55 / 0.14)',
       primary: 'oklch(58% 0.17 42)',
       primaryHover: 'oklch(50% 0.16 40)',
@@ -122,6 +125,7 @@ export const themePresets = {
       muted: 'oklch(78% 0.012 86)',
       surface: 'oklch(18% 0.026 250)',
       surfaceAlt: 'oklch(22% 0.024 248)',
+      surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(100% 0 0 / 0.14)',
       primary: 'oklch(70% 0.12 205)',
       primaryHover: 'oklch(76% 0.12 205)',