@woodsportal/hubspot-kit 1.0.41 → 1.0.42-dev.0

package/scripts/wp-cli-smoke.test.mjs

@@ -0,0 +1,263 @@
+import assert from 'node:assert/strict'
+import { existsSync, mkdtempSync, readFileSync, rmSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join, resolve } from 'node:path'
+import { test } from 'node:test'
+
+import {
+  assertExit,
+  copyFixture,
+  kitRoot,
+  parseJsonLine,
+  runWp,
+  seedCdnBuildPrereqs,
+  seedHubspotConfig,
+  seedRegressionShims,
+  withTempFixture,
+} from './cli-smoke-helpers.mjs'
+
+/** @typedef {{ id: string; args: string[]; fixture?: string; expectedExit: number | number[]; setup?: (dir: string) => void; assertJson?: (json: Record<string, unknown>) => void; skipProject?: boolean; cwd?: string }} MatrixRow */
+
+/** @type {MatrixRow[]} */
+const MATRIX = [
+  {
+    id: 'doctor',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['doctor'],
+    expectedExit: [0, 2],
+  },
+  {
+    id: 'setup-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'setup'],
+    expectedExit: 0,
+  },
+  {
+    id: 'config-validate-json',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--json', 'config', 'validate'],
+    expectedExit: 0,
+    assertJson: (json) => {
+      assert.equal(json.valid, true)
+    },
+  },
+  {
+    id: 'migrate-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'migrate'],
+    expectedExit: 0,
+  },
+  {
+    id: 'dev-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'dev'],
+    expectedExit: 0,
+  },
+  {
+    id: 'build-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'build', '--tier', 'dev'],
+    expectedExit: 0,
+    setup: (dir) => seedCdnBuildPrereqs(dir),
+  },
+  {
+    id: 'build-cdn-only-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'build', '--cdn-only'],
+    expectedExit: 0,
+    setup: (dir) => seedCdnBuildPrereqs(dir),
+  },
+  {
+    id: 'build-hubspot-only-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'build', '--hubspot-only'],
+    expectedExit: 0,
+  },
+  {
+    id: 'deploy-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'deploy', '--tier', 'dev'],
+    expectedExit: 0,
+    setup: (dir) => seedCdnBuildPrereqs(dir),
+  },
+  {
+    id: 'publish-dry-run-hybrid',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'publish', '--tier', 'dev'],
+    expectedExit: 0,
+  },
+  {
+    id: 'publish-no-cdn-monolith',
+    fixture: 'fixtures/adopted-module-monolith',
+    args: ['publish', '--tier', 'dev'],
+    expectedExit: 1,
+  },
+  {
+    id: 'audit-ship-bundle-json',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--json', 'audit', 'ship-bundle'],
+    expectedExit: 0,
+    assertJson: (json) => {
+      assert.equal(json.ok, true)
+    },
+  },
+  {
+    id: 'audit-secrets-json',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--json', 'audit', 'secrets'],
+    expectedExit: 0,
+    assertJson: (json) => {
+      assert.equal(json.ok, true)
+    },
+  },
+  {
+    id: 'audit-parity-json',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--json', 'audit', 'parity'],
+    expectedExit: 0,
+    assertJson: (json) => {
+      assert.equal(json.ok, true)
+    },
+  },
+  {
+    id: 'audit-baseline-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'audit', 'baseline'],
+    expectedExit: 0,
+  },
+  {
+    id: 'fields-sync-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'fields', 'sync'],
+    expectedExit: 0,
+  },
+  {
+    id: 'examples-list-json',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--json', 'examples', 'list'],
+    expectedExit: 0,
+    assertJson: (json) => {
+      assert.ok(Array.isArray(json.scenarios))
+      assert.ok(json.scenarios.length > 0)
+    },
+  },
+  {
+    id: 'examples-smoke-static-scenario',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['examples', 'smoke', '--tier', 'static', '--scenario', 'greenfield-module-hybrid-cdn'],
+    expectedExit: 0,
+  },
+  {
+    id: 'regression-smoke-skip-doctor',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--json', 'regression', 'smoke', '--skip-doctor'],
+    expectedExit: 0,
+    setup: (dir) => seedRegressionShims(dir),
+    assertJson: (json) => {
+      assert.equal(json.ok, true)
+    },
+  },
+  {
+    id: 'watch-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'watch', '--tier', 'dev'],
+    expectedExit: 0,
+  },
+  {
+    id: 'upload-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'upload', '--tier', 'dev'],
+    expectedExit: 0,
+  },
+  {
+    id: 'auth-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'auth'],
+    expectedExit: 0,
+  },
+  {
+    id: 'portal-list-json',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--json', 'portal', 'list'],
+    expectedExit: 0,
+    setup: (dir) => seedHubspotConfig(dir),
+    assertJson: (json) => {
+      assert.ok(Array.isArray(json.portals))
+      assert.equal(json.portals.length, 1)
+    },
+  },
+  {
+    id: 'portal-use-dry-run',
+    fixture: 'greenfield/module-hybrid-cdn',
+    args: ['--dry-run', 'portal', 'use', 'dev'],
+    expectedExit: 0,
+    setup: (dir) => seedHubspotConfig(dir),
+  },
+]
+
+for (const row of MATRIX) {
+  test(`wp CLI smoke: ${row.id}`, async () => {
+    await withTempFixture(row.fixture ?? 'greenfield/module-hybrid-cdn', (dir) => {
+      row.setup?.(dir)
+      const result = runWp(dir, row.args, {
+        skipProject: row.skipProject,
+        cwd: row.cwd,
+      })
+      assertExit(row.expectedExit, result, row.id)
+      if (row.assertJson) {
+        const json = parseJsonLine(result.stdout)
+        row.assertJson(json)
+      }
+    })
+  })
+}
+
+test('wp CLI smoke: init dry-run into empty directory', () => {
+  const targetDir = mkdtempSync(join(tmpdir(), 'wphs-cli-init-'))
+  try {
+    const result = runWp(
+      kitRoot,
+      [
+        '--dry-run',
+        'init',
+        '-t',
+        'module-hybrid-cdn',
+        '-n',
+        'cli-smoke-init',
+        '-d',
+        targetDir,
+      ],
+      { skipProject: true, cwd: kitRoot },
+    )
+    assertExit(0, result, 'init-dry-run')
+  } finally {
+    rmSync(targetDir, { recursive: true, force: true })
+  }
+})
+
+test('wp CLI smoke: page add, list, remove', async () => {
+  await withTempFixture('greenfield/module-hybrid-cdn', (dir) => {
+    const add = runWp(dir, ['page', 'add', 'about', '--public', '--nav'])
+    assertExit(0, add, 'page-add')
+    assert.ok(existsSync(resolve(dir, 'src/features/pages/about-page.tsx')))
+
+    const list = runWp(dir, ['--json', 'page', 'list'])
+    assertExit(0, list, 'page-list')
+    const listed = parseJsonLine(list.stdout)
+    assert.equal(listed.pages.length, 1)
+    assert.equal(listed.pages[0].slug, 'about')
+
+    const remove = runWp(dir, ['page', 'remove', 'about'])
+    assertExit(0, remove, 'page-remove')
+    assert.ok(!existsSync(resolve(dir, 'src/features/pages/about-page.tsx')))
+  })
+})
+
+test('wp CLI smoke: scaffold auth upgrade dry-run', async () => {
+  await withTempFixture('greenfield/module-hybrid-cdn-auth-starter', (dir) => {
+    const before = readFileSync(resolve(dir, 'woodscli.json'), 'utf8')
+    const upgrade = runWp(dir, ['--dry-run', 'scaffold', 'auth', 'upgrade', '--tier', 'sso'])
+    assertExit(0, upgrade, 'scaffold-auth-upgrade-dry-run')
+    assert.equal(readFileSync(resolve(dir, 'woodscli.json'), 'utf8'), before)
+  })
+})

package/src/dev/bootstrap-greenfield.tsx

@@ -20,6 +20,8 @@ import wphsAdapter from '@wphs/adapter'
 export type MountGreenfieldDevOptions = {
   /** Scaffold-owned preview (e.g. templates/src/app/StarterPage.tsx). */
   preview?: ReactNode
+  /** Runs after module-config init, before the preview is rendered (e.g. SDK bootstrap). */
+  beforePreview?: () => void | Promise<void>
 }
 
 export async function mountGreenfieldDev(options: MountGreenfieldDevOptions = {}): Promise<void> {
@@ -32,6 +34,10 @@ export async function mountGreenfieldDev(options: MountGreenfieldDevOptions = {}
     syncHubSpotDataFromModuleState(moduleState)
     registerModuleConfigShortcutHint()
 
+    if (options.beforePreview) {
+      await options.beforePreview()
+    }
+
     if (!rootElement) {
       throw new Error('Missing #app element — add index.html with <div id="app">')
     }

package/src/dev-module-config/ui/module-config-overlay-side.ts

@@ -1,12 +1,22 @@
 export type ModuleConfigOverlaySide = 'left' | 'right'
 
-const STORAGE_KEY = 'woodsportal:module-config-overlay-side'
+const STORAGE_KEY = 'wp.d.cfg.side'
+const LEGACY_STORAGE_KEY = 'woodsportal:module-config-overlay-side'
 
 export function loadModuleConfigOverlaySide(): ModuleConfigOverlaySide {
   if (typeof window === 'undefined') return 'right'
   try {
-    const value = window.localStorage.getItem(STORAGE_KEY)
-    return value === 'left' ? 'left' : 'right'
+    const value =
+      window.localStorage.getItem(STORAGE_KEY) ??
+      window.localStorage.getItem(LEGACY_STORAGE_KEY)
+    if (value === 'left' || value === 'right') {
+      if (!window.localStorage.getItem(STORAGE_KEY)) {
+        window.localStorage.setItem(STORAGE_KEY, value)
+        window.localStorage.removeItem(LEGACY_STORAGE_KEY)
+      }
+      return value
+    }
+    return 'right'
   } catch {
     return 'right'
   }

package/src/dev-module-config/ui/module-config-toolbar-theme.ts

@@ -1,6 +1,7 @@
 export type ModuleConfigToolbarTheme = 'light' | 'dark'
 
-const STORAGE_KEY = 'woodsportal:module-config-toolbar-theme'
+const STORAGE_KEY = 'wp.d.cfg.theme'
+const LEGACY_STORAGE_KEY = 'woodsportal:module-config-toolbar-theme'
 
 export function detectPortalTheme(): ModuleConfigToolbarTheme {
   if (typeof document === 'undefined') return 'light'
@@ -10,8 +11,16 @@ export function detectPortalTheme(): ModuleConfigToolbarTheme {
 export function loadModuleConfigToolbarTheme(): ModuleConfigToolbarTheme {
   if (typeof window === 'undefined') return 'light'
   try {
-    const stored = window.localStorage.getItem(STORAGE_KEY)
-    if (stored === 'dark' || stored === 'light') return stored
+    const stored =
+      window.localStorage.getItem(STORAGE_KEY) ??
+      window.localStorage.getItem(LEGACY_STORAGE_KEY)
+    if (stored === 'dark' || stored === 'light') {
+      if (!window.localStorage.getItem(STORAGE_KEY)) {
+        window.localStorage.setItem(STORAGE_KEY, stored)
+        window.localStorage.removeItem(LEGACY_STORAGE_KEY)
+      }
+      return stored
+    }
   } catch {
     // ignore
   }

package/templates/module-hybrid-cdn/public/fields.json

@@ -30,17 +30,57 @@
   },
   {
     "type": "group",
-    "name": "styles",
-    "label": "Styles",
+    "name": "style",
+    "label": "Style",
     "tab": "STYLE",
     "children": [
       {
-        "name": "accent_color",
-        "label": "Accent color",
-        "type": "color",
+        "type": "group",
+        "name": "module_global_colors",
+        "label": "Module Global Colors",
+        "tab": "STYLE",
+        "children": [
+          {
+            "name": "primary_color",
+            "label": "Primary Color",
+            "type": "color",
+            "default": {
+              "color": "#FF7A59",
+              "opacity": 100
+            }
+          },
+          {
+            "name": "secondary_color",
+            "label": "Secondary Color",
+            "type": "color",
+            "default": {
+              "color": "#2797AF",
+              "opacity": 100
+            }
+          },
+          {
+            "name": "button_text_color",
+            "label": "Button Text Color",
+            "type": "color",
+            "default": {
+              "color": "#FFFFFF",
+              "opacity": 100
+            }
+          }
+        ],
         "default": {
-          "color": "#0091ae",
-          "opacity": 100
+          "primary_color": {
+            "color": "#FF7A59",
+            "opacity": 100
+          },
+          "secondary_color": {
+            "color": "#2797AF",
+            "opacity": 100
+          },
+          "button_text_color": {
+            "color": "#FFFFFF",
+            "opacity": 100
+          }
         }
       },
       {

package/templates/module-hybrid-cdn/public/module.html

@@ -4,7 +4,9 @@
 <style>
 {% scope_css %}
 :root {
-  --starter-accent: {{ module.styles.accent_color.color|default('#0091ae') }};
+  --primary-color: {{ module.style.module_global_colors.primary_color.color|default('#FF7A59') }};
+  --secondary-color: {{ module.style.module_global_colors.secondary_color.color|default('#2797AF') }};
+  --button-text-color: {{ module.style.module_global_colors.button_text_color.color|default('#FFFFFF') }};
 }
 p:not([class]) {
   margin: 0;
@@ -18,11 +20,10 @@ ul, ol {
 <script>
   window.hsInEditor = {{ in_cms_editor|lower }};
   window.hubSpotData = {
-    title: {{ module.title|tojson }},
-    tagline: {{ module.tagline|tojson }},
-    show_feature_cards: {{ module.show_feature_cards|lower }},
-    accent_color: {{ module.styles.accent_color|tojson }},
-    hero_style: {{ module.styles.hero_style|tojson }},
+    title: {{ module.content.title|default(module.title)|tojson }},
+    tagline: {{ module.content.tagline|default(module.tagline)|tojson }},
+    show_feature_cards: {{ module.content.show_feature_cards|default(module.show_feature_cards)|lower }},
+    hero_style: {{ module.style.hero_style|tojson }},
     assetBaseUrl: "__PORTAL_CDN_BASE__",
     buildId: "__PORTAL_BUILD_ID__",
     isInEditor: {{ in_cms_editor|lower }}

package/templates/module-hybrid-cdn/src/assets/css/main.dev.css

@@ -8,6 +8,13 @@
 @import 'tailwindcss';
 @import './tailwind.css.config.css';
 
+/* WoodsPortal module global colors — defaults until HubSpot fields / module-config apply overrides */
+:root {
+  --primary-color: #ff7a59;
+  --secondary-color: #2797af;
+  --button-text-color: #ffffff;
+}
+
 /* Kit dev-module-config — paths relative to this file (src/assets/css/) */
 @source '../../../.wphs/.kit-module-config/**/*.{ts,tsx}';
 @source '../../../.wphs/.kit-bootstrap.tsx';

package/templates/module-hybrid-cdn/src/components/layout/starter-nav.tsx

@@ -1,26 +1,23 @@
 import { Link } from '@tanstack/react-router'
 
-import { ROUTES } from '@/config/routes'
+import { starterNavItems } from '@/config/starter-nav'
 
 export function StarterNav() {
   return (
     <header className="border-b border-[#cbd6e2] bg-white/90 backdrop-blur">
       <div className="mx-auto flex max-w-4xl items-center justify-between gap-4 px-6 py-3 sm:px-10">
         <span className="text-sm font-semibold text-[#0091ae]">WoodsCLI starter</span>
-        <nav className="flex gap-4 text-sm font-medium">
-          <Link
-            to={ROUTES.home}
-            className="text-[#516f90] hover:text-[#0091ae] [&.active]:text-[#0091ae]"
-            activeOptions={{ exact: true }}
-          >
-            Home
-          </Link>
-          <Link
-            to={ROUTES.guide}
-            className="text-[#516f90] hover:text-[#0091ae] [&.active]:text-[#0091ae]"
-          >
-            Developer guide
-          </Link>
+        <nav className="flex flex-wrap gap-4 text-sm font-medium">
+          {starterNavItems.map((item) => (
+            <Link
+              key={item.to}
+              to={item.to}
+              className="text-[#516f90] hover:text-[#0091ae] [&.active]:text-[#0091ae]"
+              activeOptions={{ exact: item.to === '/' }}
+            >
+              {item.label}
+            </Link>
+          ))}
         </nav>
       </div>
     </header>

package/templates/module-hybrid-cdn/src/config/starter-nav.ts

@@ -0,0 +1,9 @@
+import { ROUTES } from '@/config/routes'
+
+/** No-auth module navigation — edit once; StarterNav reads this file. */
+export const starterNavItems = [
+  { to: ROUTES.home, label: 'Home' },
+  { to: ROUTES.guide, label: 'Developer guide' },
+] as const
+
+export type StarterNavItem = (typeof starterNavItems)[number]

package/templates/module-hybrid-cdn/src/features/starter/components/starter-home.tsx

@@ -2,35 +2,33 @@ import { useStarterPreview } from '../hooks/use-starter-preview'
 import { STARTER_FEATURES, WOODSCLI_ABOUT } from '../content/woodscli-guide-content'
 
 export function StarterHome() {
-  const { title, tagline, showFeatureCards, accentColor, heroStyle } = useStarterPreview()
+  const { title, tagline, showFeatureCards, heroStyle } = useStarterPreview()
 
   return (
     <>
-      <div style={{ ['--starter-accent' as string]: accentColor }}>
-        <section
-          className={
-            heroStyle === 'minimal'
-              ? 'px-6 py-14 sm:px-10 sm:py-16 bg-[var(--mc-bg-shell,#f5f8fa)] text-[var(--mc-text,#33475b)] border-b border-[var(--mc-border,#cbd6e2)]'
-              : heroStyle === 'bold'
-                ? 'px-6 py-14 sm:px-10 sm:py-16 bg-[#1c1c1f] text-white'
-                : 'px-6 py-14 sm:px-10 sm:py-16 bg-gradient-to-br from-[var(--starter-accent,#0091ae)] to-[#ff7a59] text-white'
-          }
-        >
-          <div className="mx-auto max-w-4xl">
-            <p className="mb-2 text-xs font-semibold uppercase tracking-widest opacity-80">
-              {WOODSCLI_ABOUT.package} · local dev
-            </p>
-            <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h1>
-            <p className="mt-4 max-w-2xl text-base leading-relaxed opacity-90 sm:text-lg">{tagline}</p>
-            <p className="mt-6 text-sm opacity-75">
-              Module config overlay:{' '}
-              <kbd className="rounded bg-black/10 px-1.5 py-0.5 font-mono text-xs">Ctrl+Shift+Z</kbd>
-              {' · '}
-              Mac: <kbd className="rounded bg-black/10 px-1.5 py-0.5 font-mono text-xs">⌃⇧Z</kbd>
-            </p>
-          </div>
-        </section>
-      </div>
+      <section
+        className={
+          heroStyle === 'minimal'
+            ? 'px-6 py-14 sm:px-10 sm:py-16 bg-[var(--mc-bg-shell,#f5f8fa)] text-[var(--mc-text,#33475b)] border-b border-[var(--mc-border,#cbd6e2)]'
+            : heroStyle === 'bold'
+              ? 'px-6 py-14 sm:px-10 sm:py-16 bg-[#1c1c1f] text-white'
+              : 'px-6 py-14 sm:px-10 sm:py-16 bg-gradient-to-br from-[var(--primary-color,#FF7A59)] to-[var(--secondary-color,#2797AF)] text-white'
+        }
+      >
+        <div className="mx-auto max-w-4xl">
+          <p className="mb-2 text-xs font-semibold uppercase tracking-widest opacity-80">
+            {WOODSCLI_ABOUT.package} · local dev
+          </p>
+          <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h1>
+          <p className="mt-4 max-w-2xl text-base leading-relaxed opacity-90 sm:text-lg">{tagline}</p>
+          <p className="mt-6 text-sm opacity-75">
+            Module config overlay:{' '}
+            <kbd className="rounded bg-black/10 px-1.5 py-0.5 font-mono text-xs">Ctrl+Shift+Z</kbd>
+            {' · '}
+            Mac: <kbd className="rounded bg-black/10 px-1.5 py-0.5 font-mono text-xs">⌃⇧Z</kbd>
+          </p>
+        </div>
+      </section>
 
       {showFeatureCards ? (
         <div className="mx-auto grid max-w-4xl gap-4 px-6 py-10 sm:grid-cols-3 sm:px-10">
@@ -39,7 +37,7 @@ export function StarterHome() {
               key={feature.title}
               className="rounded-lg border border-[#cbd6e2] bg-white p-5 shadow-sm"
             >
-              <h2 className="text-sm font-semibold text-[#0091ae]">{feature.title}</h2>
+              <h2 className="text-sm font-semibold text-[var(--primary-color,#FF7A59)]">{feature.title}</h2>
               <p className="mt-2 text-sm leading-relaxed text-[#516f90]">{feature.body}</p>
             </article>
           ))}

package/templates/module-hybrid-cdn/src/features/starter/hooks/starter-preview-values.ts

@@ -2,7 +2,6 @@ export type StarterPreviewValues = {
   title: string
   tagline: string
   showFeatureCards: boolean
-  accentColor: string
   heroStyle: 'gradient' | 'minimal' | 'bold'
 }
 
@@ -21,8 +20,12 @@ function readContentField(module: Record<string, unknown>, key: string): unknown
   return module[key]
 }
 
-/** STYLE-tab fields may live under a `styles` group (fields.json) or flat legacy keys. */
+/** STYLE-tab fields may live under a `style` group (fields.json) or legacy `styles` / flat keys. */
 function readStyleField(module: Record<string, unknown>, key: string): unknown {
+  const style = module.style
+  if (style && typeof style === 'object' && key in (style as Record<string, unknown>)) {
+    return (style as Record<string, unknown>)[key]
+  }
   const styles = module.styles
   if (styles && typeof styles === 'object' && key in (styles as Record<string, unknown>)) {
     return (styles as Record<string, unknown>)[key]
@@ -31,8 +34,6 @@ function readStyleField(module: Record<string, unknown>, key: string): unknown {
 }
 
 export function mapStarterPreviewValues(module: Record<string, unknown>): StarterPreviewValues {
-  const accent = readStyleField(module, 'accent_color') as { color?: string } | undefined
-
   return {
     title: String(readContentField(module, 'title') ?? 'My HubSpot Portal'),
     tagline: String(
@@ -40,7 +41,6 @@ export function mapStarterPreviewValues(module: Record<string, unknown>): Starte
         'Customize this preview with Ctrl+Shift+Z, then replace this page with your portal app.',
     ),
     showFeatureCards: readContentField(module, 'show_feature_cards') !== false,
-    accentColor: accent?.color ?? '#0091ae',
     heroStyle: normalizeHeroStyle(readStyleField(module, 'hero_style')),
   }
 }

package/templates/module-monolith/public/fields.json

@@ -24,15 +24,58 @@
   },
   {
     "type": "group",
-    "name": "styles",
-    "label": "Styles",
+    "name": "style",
+    "label": "Style",
     "tab": "STYLE",
     "children": [
       {
-        "name": "accent_color",
-        "label": "Accent color",
-        "type": "color",
-        "default": { "color": "#0091ae", "opacity": 100 }
+        "type": "group",
+        "name": "module_global_colors",
+        "label": "Module Global Colors",
+        "tab": "STYLE",
+        "children": [
+          {
+            "name": "primary_color",
+            "label": "Primary Color",
+            "type": "color",
+            "default": {
+              "color": "#FF7A59",
+              "opacity": 100
+            }
+          },
+          {
+            "name": "secondary_color",
+            "label": "Secondary Color",
+            "type": "color",
+            "default": {
+              "color": "#2797AF",
+              "opacity": 100
+            }
+          },
+          {
+            "name": "button_text_color",
+            "label": "Button Text Color",
+            "type": "color",
+            "default": {
+              "color": "#FFFFFF",
+              "opacity": 100
+            }
+          }
+        ],
+        "default": {
+          "primary_color": {
+            "color": "#FF7A59",
+            "opacity": 100
+          },
+          "secondary_color": {
+            "color": "#2797AF",
+            "opacity": 100
+          },
+          "button_text_color": {
+            "color": "#FFFFFF",
+            "opacity": 100
+          }
+        }
       },
       {
         "name": "hero_style",