From 1bf91f9ee589102894bab16f3c0e860b1c2b4aa5 Mon Sep 17 00:00:00 2001
From: devcluna <dev.cluna@gmail.com>
Date: Thu, 9 Jul 2026 19:13:12 -0500
Subject: [PATCH] feat(style): visual Style editor with live preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A dedicated Style mode (Fields | Style toggle) for theming the public form,
gated behind a "Custom styles" setting.

- feat: theme model + `resolveThemeVars` (single source) → `--sfb-*` variables
  shared by the admin live preview and the public embed/page via one stylesheet
  (`form-css.ts`), so there is no duplicated styling logic.
- feat: Style mode sidebar — accent / font / card + page background, field
  corners / style / label weight, button style / width, form width / spacing /
  card shadow / card border / card corners / placement (top | center), with a
  Desktop | Mobile live preview.
- feat: editable, persisted colour palettes (add via picker, remove per swatch)
  per colour group; "Reset to default theme" restores them.
- feat: enabling "Custom styles" in Settings reveals the Style tab immediately
  (no save required) with a link into the editor.
- feat: style changes follow the existing draft / publish flow (theme lives in
  settings, snapshotted on publish); toasts announce the state on save/publish.
- fix: public page applies theme vars via a <style> block instead of an inline
  attribute — a quoted font value no longer breaks the style and falls back to
  the browser's serif default.
- test: theme resolver coverage (colors, corners, border, placement, palettes).
---
 admin/src/components/StyleMode.tsx  | 224 ++++++++++++++++++++++++++++
 admin/src/form-css.ts               |  37 +++++
 admin/src/pages/FormBuilderPage.tsx |  50 ++++++-
 admin/src/theme.ts                  | 152 +++++++++++++++++++
 admin/src/types.ts                  |   6 +
 server/src/controllers/form.ts      |  66 ++++----
 tests/theme.test.ts                 |  49 ++++++
 7 files changed, 547 insertions(+), 37 deletions(-)
 create mode 100644 admin/src/components/StyleMode.tsx
 create mode 100644 admin/src/form-css.ts
 create mode 100644 admin/src/theme.ts
 create mode 100644 tests/theme.test.ts

diff --git a/admin/src/components/StyleMode.tsx b/admin/src/components/StyleMode.tsx
new file mode 100644
index 0000000..7e9a1c9
--- /dev/null
+++ b/admin/src/components/StyleMode.tsx
@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import { FormField, FormSettings } from '../types';
+import { FormTheme, DEFAULT_THEME, resolveThemeVars, PaletteKey } from '../theme';
+import { FORM_CSS } from '../form-css';
+import { C, FF } from '../ui';
+
+interface Props {
+  title: string;
+  description: string;
+  fields: FormField[];
+  settings: FormSettings;
+  theme: FormTheme;
+  onChange: (t: FormTheme) => void;
+}
+
+/* ── small controls ────────────────────────────────────────────────────── */
+const grpT: React.CSSProperties = { font: `700 10px ${FF}`, letterSpacing: '.6px', textTransform: 'uppercase', color: C.n500, margin: '0 0 10px' };
+const ctlLbl: React.CSSProperties = { font: `600 13px ${FF}`, color: C.n800, display: 'block', margin: '0 0 7px' };
+
+function Seg<T extends string>({ value, options, onChange }: { value: T; options: { v: T; label: string }[]; onChange: (v: T) => void }) {
+  return (
+    <div style={{ display: 'flex', border: `1px solid ${C.n200}`, borderRadius: 6, overflow: 'hidden' }}>
+      {options.map((o, i) => {
+        const on = value === o.v;
+        return (
+          <button key={o.v} type="button" onClick={() => onChange(o.v)}
+            style={{ flex: 1, height: 34, border: 'none', borderLeft: i ? `1px solid ${C.n200}` : 'none', background: on ? C.p600 : C.n0, color: on ? '#fff' : C.n700, font: `600 12px ${FF}`, cursor: 'pointer' }}>
+            {o.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function Palette({ colors, value, onSelect, onAdd, onDelete }: {
+  colors: string[]; value: string;
+  onSelect: (c: string) => void; onAdd: (c: string) => void; onDelete: (c: string) => void;
+}) {
+  const [hover, setHover] = useState<string | null>(null);
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
+      {colors.map((c) => {
+        const on = value.toLowerCase() === c.toLowerCase();
+        return (
+          <div key={c} style={{ position: 'relative' }} onMouseEnter={() => setHover(c)} onMouseLeave={() => setHover(null)}>
+            <button type="button" onClick={() => onSelect(c)} title={c}
+              style={{ width: 34, height: 34, borderRadius: 8, background: c, cursor: 'pointer', border: on ? `2px solid ${C.p600}` : `1px solid ${C.n200}`, boxShadow: on ? `0 0 0 2px ${C.p200}` : 'none', outline: 'none', display: 'block' }} />
+            {hover === c && colors.length > 1 && (
+              <button type="button" title="Remove color" onClick={(e) => { e.stopPropagation(); onDelete(c); }}
+                style={{ position: 'absolute', top: -6, right: -6, width: 16, height: 16, borderRadius: '50%', background: C.n800, color: '#fff', border: '1.5px solid #fff', font: `700 10px ${FF}`, lineHeight: 1, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}>×</button>
+            )}
+          </div>
+        );
+      })}
+      {/* add a color to the palette via the native picker */}
+      <label title="Add a color" style={{ position: 'relative', width: 34, height: 34, borderRadius: 8, cursor: 'pointer', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', background: C.n0, border: `1px dashed ${C.n300}` }}>
+        <span style={{ font: `700 16px ${FF}`, color: C.n500, lineHeight: 1 }}>+</span>
+        <input type="color" onChange={(e) => onAdd(e.target.value)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, cursor: 'pointer', border: 'none', padding: 0 }} />
+      </label>
+    </div>
+  );
+}
+
+function Group({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div style={{ padding: '18px 0', borderBottom: `1px solid ${C.n150}` }}>
+      <div style={grpT}>{title}</div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>{children}</div>
+    </div>
+  );
+}
+
+/* ── faithful preview: same .sfb-* classes + FORM_CSS as the embed ─────── */
+function PreviewInput({ field }: { field: FormField }) {
+  const ph = field.placeholder || '';
+  if (field.type === 'textarea') return <textarea className="sfb-input" placeholder={ph} readOnly />;
+  if (field.type === 'select') return (
+    <select className="sfb-input"><option>{ph || 'Select an option…'}</option></select>
+  );
+  if (field.type === 'radio' || field.type === 'checkbox-group') return (
+    <div className="sfb-radio-group">
+      {(field.options || []).map((o, i) => (
+        <label key={i} className="sfb-radio-label"><input type={field.type === 'radio' ? 'radio' : 'checkbox'} name={field.name} readOnly />{o.label || o.value}</label>
+      ))}
+    </div>
+  );
+  const typeMap: Record<string, string> = { text: 'text', email: 'email', number: 'number', phone: 'tel', password: 'password', url: 'url', date: 'date', time: 'time' };
+  return <input className="sfb-input" type={typeMap[field.type] || 'text'} placeholder={ph} readOnly />;
+}
+
+function PreviewForm({ title, description, fields, settings }: { title: string; description: string; fields: FormField[]; settings: FormSettings }) {
+  return (
+    <>
+      <h1 style={{ fontSize: 22, fontWeight: 700, margin: '0 0 8px' }}>{title || 'Untitled form'}</h1>
+      {description && <p style={{ fontSize: 14, color: 'var(--sfb-muted)', margin: '0 0 24px', lineHeight: 1.55 }}>{description}</p>}
+      <form className="sfb-form" onSubmit={(e) => e.preventDefault()}>
+        <div className="sfb-grid">
+          {fields.filter((f) => f.type !== 'hidden').map((field) => {
+            if (field.type === 'divider') return <hr key={field.id} className="sfb-divider" style={{ gridColumn: '1 / -1' }} />;
+            if (field.type === 'heading') return <p key={field.id} className="sfb-heading" style={{ gridColumn: '1 / -1' }}>{field.label}</p>;
+            if (field.type === 'paragraph') return <p key={field.id} className="sfb-paragraph" style={{ gridColumn: '1 / -1' }}>{field.label}</p>;
+            const full = field.width !== 'half';
+            if (field.type === 'checkbox') return (
+              <label key={field.id} className="sfb-checkbox-label" style={{ gridColumn: full ? '1 / -1' : undefined }}>
+                <input type="checkbox" readOnly /> {field.label}{field.required && <span className="sfb-required"> *</span>}
+              </label>
+            );
+            return (
+              <div key={field.id} className={'sfb-field' + (field.cssClass ? ' ' + field.cssClass : '')} style={{ gridColumn: full ? '1 / -1' : undefined }}>
+                <label className="sfb-label">{field.label}{field.required && <span className="sfb-required"> *</span>}</label>
+                <PreviewInput field={field} />
+                {field.helpText && <p className="sfb-help">{field.helpText}</p>}
+              </div>
+            );
+          })}
+        </div>
+        {fields.length > 0 && <button type="submit" className="sfb-btn">{settings.submitButtonText || 'Submit'}</button>}
+      </form>
+    </>
+  );
+}
+
+export function StyleMode({ title, description, fields, settings, theme, onChange }: Props) {
+  const [device, setDevice] = useState<'desktop' | 'mobile'>('desktop');
+  const t = theme;
+  const set = (p: Partial<FormTheme>) => onChange({ ...t, ...p });
+  const vars = resolveThemeVars(t) as React.CSSProperties;
+
+  // editable, persisted color palettes
+  const pal = t.palettes || DEFAULT_THEME.palettes;
+  const selColor = (key: PaletteKey, c: string) => set({ [key]: c } as Partial<FormTheme>);
+  const addColor = (key: PaletteKey, c: string) => {
+    const list = pal[key];
+    const exists = list.some((x) => x.toLowerCase() === c.toLowerCase());
+    set({ [key]: c, palettes: { ...pal, [key]: exists ? list : [...list, c] } } as Partial<FormTheme>);
+  };
+  const delColor = (key: PaletteKey, c: string) => set({ palettes: { ...pal, [key]: pal[key].filter((x) => x !== c) } } as Partial<FormTheme>);
+
+  return (
+    <div style={{ flex: 1, display: 'flex', minHeight: 0, alignSelf: 'stretch' }}>
+      {/* sidebar */}
+      <div style={{ width: 300, minWidth: 300, background: C.n0, borderRight: `1px solid ${C.n150}`, overflowY: 'auto', padding: '18px 20px' }}>
+        <div style={{ font: `800 18px ${FF}`, color: C.n900 }}>Style</div>
+        <div style={{ font: `400 12px ${FF}`, color: C.n500, margin: '4px 0 4px', lineHeight: 1.5 }}>Design the public form — changes preview live.</div>
+
+        <Group title="Brand">
+          <div>
+            <label style={ctlLbl}>Accent color</label>
+            <Palette colors={pal.accent} value={t.accent} onSelect={(c) => selColor('accent', c)} onAdd={(c) => addColor('accent', c)} onDelete={(c) => delColor('accent', c)} />
+          </div>
+          <div>
+            <label style={ctlLbl}>Font</label>
+            <Seg value={t.font} onChange={(v) => set({ font: v })} options={[{ v: 'sans', label: 'Sans' }, { v: 'serif', label: 'Serif' }, { v: 'round', label: 'Round' }, { v: 'mono', label: 'Mono' }]} />
+          </div>
+        </Group>
+
+        <Group title="Background">
+          <div>
+            <label style={ctlLbl}>Form card</label>
+            <Palette colors={pal.cardBg} value={t.cardBg} onSelect={(c) => selColor('cardBg', c)} onAdd={(c) => addColor('cardBg', c)} onDelete={(c) => delColor('cardBg', c)} />
+          </div>
+          <div>
+            <label style={ctlLbl}>Page</label>
+            <Palette colors={pal.pageBg} value={t.pageBg} onSelect={(c) => selColor('pageBg', c)} onAdd={(c) => addColor('pageBg', c)} onDelete={(c) => delColor('pageBg', c)} />
+          </div>
+        </Group>
+
+        <Group title="Fields">
+          <div><label style={ctlLbl}>Corners</label><Seg value={t.corners} onChange={(v) => set({ corners: v })} options={[{ v: 'sharp', label: 'Sharp' }, { v: 'rounded', label: 'Rounded' }, { v: 'pill', label: 'Pill' }]} /></div>
+          <div><label style={ctlLbl}>Style</label><Seg value={t.fieldStyle} onChange={(v) => set({ fieldStyle: v })} options={[{ v: 'outline', label: 'Outline' }, { v: 'filled', label: 'Filled' }, { v: 'underline', label: 'Underline' }]} /></div>
+          <div><label style={ctlLbl}>Label weight</label><Seg value={t.labelWeight} onChange={(v) => set({ labelWeight: v })} options={[{ v: 'regular', label: 'Regular' }, { v: 'medium', label: 'Medium' }, { v: 'bold', label: 'Bold' }]} /></div>
+        </Group>
+
+        <Group title="Button">
+          <div><label style={ctlLbl}>Style</label><Seg value={t.buttonStyle} onChange={(v) => set({ buttonStyle: v })} options={[{ v: 'solid', label: 'Solid' }, { v: 'outline', label: 'Outline' }]} /></div>
+          <div><label style={ctlLbl}>Width</label><Seg value={t.buttonWidth} onChange={(v) => set({ buttonWidth: v })} options={[{ v: 'full', label: 'Full' }, { v: 'auto', label: 'Auto' }]} /></div>
+        </Group>
+
+        <Group title="Layout">
+          <div><label style={ctlLbl}>Form width</label><Seg value={t.formWidth} onChange={(v) => set({ formWidth: v })} options={[{ v: 'narrow', label: 'Narrow' }, { v: 'regular', label: 'Regular' }, { v: 'wide', label: 'Wide' }]} /></div>
+          <div><label style={ctlLbl}>Spacing</label><Seg value={t.spacing} onChange={(v) => set({ spacing: v })} options={[{ v: 'compact', label: 'Compact' }, { v: 'cozy', label: 'Cozy' }, { v: 'roomy', label: 'Roomy' }]} /></div>
+          <div><label style={ctlLbl}>Card shadow</label><Seg value={t.shadow} onChange={(v) => set({ shadow: v })} options={[{ v: 'none', label: 'None' }, { v: 'soft', label: 'Soft' }, { v: 'strong', label: 'Strong' }]} /></div>
+          <div><label style={ctlLbl}>Card border</label><Seg value={t.cardBorder} onChange={(v) => set({ cardBorder: v })} options={[{ v: 'none', label: 'None' }, { v: 'hairline', label: 'Hairline' }, { v: 'bold', label: 'Bold' }]} /></div>
+          <div><label style={ctlLbl}>Card corners</label><Seg value={t.cardCorners} onChange={(v) => set({ cardCorners: v })} options={[{ v: 'sharp', label: 'Sharp' }, { v: 'rounded', label: 'Rounded' }, { v: 'round', label: 'Round' }]} /></div>
+          <div><label style={ctlLbl}>Form placement</label><Seg value={t.placement} onChange={(v) => set({ placement: v })} options={[{ v: 'top', label: 'Top' }, { v: 'center', label: 'Center' }]} /></div>
+        </Group>
+
+        <div style={{ padding: '18px 0' }}>
+          <button type="button" onClick={() => onChange({ ...DEFAULT_THEME })} style={{ width: '100%', height: 38, borderRadius: 6, border: `1px solid ${C.n200}`, background: C.n0, color: C.n800, font: `600 13px ${FF}`, cursor: 'pointer' }}>Reset to default theme</button>
+        </div>
+      </div>
+
+      {/* live preview */}
+      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', background: C.n100 }}>
+        <div style={{ height: 46, borderBottom: `1px solid ${C.n150}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 16px', flex: 'none' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, font: `500 12px ${FF}`, color: C.n600 }}>
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: C.suc500 }} />Live preview
+          </div>
+          <div style={{ display: 'flex', border: `1px solid ${C.n200}`, borderRadius: 6, overflow: 'hidden' }}>
+            {(['desktop', 'mobile'] as const).map((d) => (
+              <button key={d} type="button" onClick={() => setDevice(d)} style={{ height: 28, padding: '0 12px', border: 'none', borderLeft: d === 'mobile' ? `1px solid ${C.n200}` : 'none', background: device === d ? C.p600 : C.n0, color: device === d ? '#fff' : C.n700, font: `600 12px ${FF}`, cursor: 'pointer', textTransform: 'capitalize' }}>{d}</button>
+            ))}
+          </div>
+        </div>
+        <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: 28, display: 'flex', justifyContent: 'center', alignItems: 'var(--sfb-page-align, flex-start)', background: 'var(--sfb-page-bg, #f5f5f9)', ...vars }}>
+          <style dangerouslySetInnerHTML={{ __html: FORM_CSS }} />
+          <div
+            data-sfb-fields={t.fieldStyle}
+            style={{
+              ...vars,
+              width: '100%', maxWidth: device === 'mobile' ? 380 : 'var(--sfb-form-width, 600px)',
+              background: 'var(--sfb-bg, #fff)', color: 'var(--sfb-text, #1f1f33)',
+              fontFamily: 'var(--sfb-font)', border: 'var(--sfb-card-border, 1px solid var(--sfb-border, #dcdce4))',
+              borderRadius: 'var(--sfb-card-radius, 14px)', boxShadow: 'var(--sfb-shadow, none)', padding: '36px 40px',
+            }}
+          >
+            <PreviewForm title={title} description={description} fields={fields} settings={settings} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/admin/src/form-css.ts b/admin/src/form-css.ts
new file mode 100644
index 0000000..751b7b3
--- /dev/null
+++ b/admin/src/form-css.ts
@@ -0,0 +1,37 @@
+/**
+ * The form's visual CSS — a single source shared by the public embed
+ * (server injects it) and the admin Style live preview (injected into a
+ * scoped container). Everything keys off `--sfb-*` variables and the
+ * `data-sfb-fields` attribute, so one stylesheet drives both surfaces.
+ */
+export const FORM_CSS = `
+.sfb-form { font-family: var(--sfb-font, inherit); text-align: left; color: var(--sfb-text, #1f1f33); line-height: 1.5; }
+.sfb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sfb-gap, 20px); margin-bottom: var(--sfb-gap, 20px); }
+.sfb-field { display: flex; flex-direction: column; gap: 6px; }
+.sfb-label { font-size: 13px; font-weight: var(--sfb-label-weight, 600); color: var(--sfb-text, #1f1f33); }
+.sfb-required { color: #ee5e52; }
+.sfb-input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--sfb-border, #dcdce4); border-radius: var(--sfb-radius, 8px); font-size: 14px; font-family: inherit; color: var(--sfb-text, #1f1f33); background: var(--sfb-input-bg, #fff); box-sizing: border-box; outline: none; transition: border-color .15s, box-shadow .15s; }
+.sfb-input::placeholder { color: var(--sfb-muted, #8a8a9e); }
+.sfb-input:focus { border-color: var(--sfb-accent, #4945ff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sfb-accent, #4945ff) 22%, transparent); }
+textarea.sfb-input { height: auto; min-height: 104px; padding: 11px 13px; resize: vertical; }
+select.sfb-input { appearance: none; cursor: pointer; }
+[data-sfb-fields="underline"] .sfb-input { border: none; border-bottom: 2px solid var(--sfb-border, #dcdce4); border-radius: 0; padding-left: 2px; padding-right: 2px; background: transparent; }
+[data-sfb-fields="underline"] .sfb-input:focus { box-shadow: none; border-bottom-color: var(--sfb-accent, #4945ff); }
+[data-sfb-fields="filled"] .sfb-input { border-color: transparent; }
+[data-sfb-fields="filled"] .sfb-input:focus { border-color: var(--sfb-accent, #4945ff); }
+.sfb-radio-group { display: flex; flex-direction: column; gap: 8px; }
+.sfb-radio-label, .sfb-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sfb-text, #1f1f33); cursor: pointer; }
+.sfb-radio-label input, .sfb-checkbox-label input { accent-color: var(--sfb-accent, #4945ff); width: 16px; height: 16px; cursor: pointer; }
+.sfb-help { font-size: 12px; color: var(--sfb-muted, #666687); margin: 0; }
+.sfb-btn { width: var(--sfb-btn-width, 100%); background: var(--sfb-btn-bg, var(--sfb-accent, #4945ff)); color: var(--sfb-btn-color, #fff); border: var(--sfb-btn-border, 2px solid transparent); border-radius: var(--sfb-radius, 8px); padding: 13px 26px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; transition: opacity .15s; }
+.sfb-btn:hover { opacity: .9; }
+.sfb-btn:disabled { opacity: .6; cursor: not-allowed; }
+.sfb-heading { font-size: 18px; font-weight: 700; color: var(--sfb-text, #1f1f33); margin: 4px 0; }
+.sfb-paragraph { font-size: 14px; color: var(--sfb-muted, #666687); margin: 4px 0; line-height: 1.6; }
+.sfb-divider { border: none; border-top: 1px solid var(--sfb-border, #dcdce4); margin: 4px 0; }
+.sfb-success { font-size: 15px; color: #27ae60; font-weight: 600; }
+.sfb-error { font-size: 13px; color: #ee5e52; margin-bottom: 12px; }
+.sfb-field-error { font-size: 12px; color: #ee5e52; margin: 4px 0 0; }
+.sfb-field--error .sfb-input, .sfb-field--error .sfb-radio-group { border-color: #ee5e52 !important; }
+.sfb-field--error > .sfb-label { color: #ee5e52; }
+`;
diff --git a/admin/src/pages/FormBuilderPage.tsx b/admin/src/pages/FormBuilderPage.tsx
index 138beb5..420a910 100644
--- a/admin/src/pages/FormBuilderPage.tsx
+++ b/admin/src/pages/FormBuilderPage.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
 import { Box, Flex, Loader } from '@strapi/design-system';
+import { useNotification } from '@strapi/strapi/admin';
 import { ArrowLeft, Pencil } from '@strapi/icons';
 import { v4 as uuid } from 'uuid';
 import { FieldPalette } from '../components/FieldPalette';
@@ -10,8 +11,10 @@ import { FormPreview } from '../components/FormPreview';
 import { EmbedModal } from '../components/EmbedModal';
 import { useFormsApi } from '../api';
 import { Form, FormField, FormSettings, FieldType } from '../types';
+import { StyleMode } from '../components/StyleMode';
 import { PLUGIN_ID } from '../pluginId';
 import { C, FF } from '../ui';
+import { FormTheme, DEFAULT_THEME, resolveThemeVars } from '../theme';
 
 const DEFAULT_SETTINGS: FormSettings = {
   submitButtonText: 'Submit',
@@ -24,6 +27,9 @@ const DEFAULT_SETTINGS: FormSettings = {
   customCss: '',
   publicPage: false,
   captcha: { provider: 'none', siteKey: '', secretKey: '' },
+  enableStyle: false,
+  theme: DEFAULT_THEME,
+  themeVars: resolveThemeVars(DEFAULT_THEME),
 };
 
 // Order-insensitive stringify so key ordering in stored JSON doesn't create false diffs.
@@ -85,13 +91,15 @@ function ToggleRow({ label, hint, on, onClick }: { label: string; hint: string;
   );
 }
 
-function SettingsDrawer({ initialDescription, initialSettings, slug, publishedAt, onClose, onSave }: {
+function SettingsDrawer({ initialDescription, initialSettings, slug, publishedAt, onClose, onSave, onToggleStyle, onOpenStyle }: {
   initialDescription: string;
   initialSettings: FormSettings;
   slug: string | null;
   publishedAt: string | null;
   onClose: () => void;
   onSave: (description: string, settings: FormSettings) => void;
+  onToggleStyle: (v: boolean) => void;
+  onOpenStyle: () => void;
 }) {
   // edits stay in a local buffer — they only reach the form on "Save settings"
   const [description, setDescription] = useState(initialDescription);
@@ -178,6 +186,19 @@ function SettingsDrawer({ initialDescription, initialSettings, slug, publishedAt
             )}
           </div>
 
+          <div style={{ padding: '20px 0', borderBottom: `1px solid ${C.n150}` }}>
+            <div style={dGroupT}>Style</div>
+            <ToggleRow label="Custom styles" hint="Enable the Style editor to theme the public form." on={!!settings.enableStyle} onClick={() => { const v = !settings.enableStyle; patch({ enableStyle: v }); onToggleStyle(v); }} />
+            {settings.enableStyle && (
+              <div style={{ marginTop: 12 }}>
+                <button type="button" onClick={onOpenStyle} style={{ font: `600 12px ${FF}`, color: C.p600, background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
+                  Open the style editor →
+                </button>
+                <div style={{ ...dHint, marginTop: 6 }}>Style changes follow draft / publish — they go live when you publish.</div>
+              </div>
+            )}
+          </div>
+
           <div style={{ padding: '20px 0', borderBottom: `1px solid ${C.n150}` }}>
             <div style={dGroupT}>Spam &amp; limits</div>
             <ToggleRow label="Honeypot protection" hint="Silently discards bot submissions." on={settings.enableHoneypot} onClick={() => patch({ enableHoneypot: !settings.enableHoneypot })} />
@@ -271,6 +292,7 @@ export function FormBuilderPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const api = useFormsApi();
+  const { toggleNotification } = useNotification();
   const isNew = !id || id === 'new';
   // seed a brand-new form from a template chosen on the list page (router state)
   const seed = (location.state || {}) as { templateFields?: FormField[]; templateTitle?: string };
@@ -283,6 +305,7 @@ export function FormBuilderPage() {
   const [fields, setFields] = useState<FormField[]>(seed.templateFields || []);
   const [settings, setSettings] = useState<FormSettings>(DEFAULT_SETTINGS);
   const [selectedFieldId, setSelectedFieldId] = useState<string | null>(null);
+  const [mode, setMode] = useState<'fields' | 'style'>('fields');
   const [showSettings, setShowSettings] = useState(false);
   const [showPreview, setShowPreview] = useState(false);
   const [showEmbed, setShowEmbed] = useState(false);
@@ -388,6 +411,7 @@ export function FormBuilderPage() {
         setPublishedAt(updated.publishedAt ?? null);
         markSaved();
       }
+      toggleNotification({ type: 'info', message: 'Saved as draft. Publish to make your changes — including styles — live.' });
     } finally {
       setSaving(false);
     }
@@ -413,6 +437,7 @@ export function FormBuilderPage() {
         setPublishedData(updated.publishedData ?? snap);
         markSaved();
       }
+      toggleNotification({ type: 'success', message: 'Published. Your form and styles are now live.' });
     } finally {
       setPublishing(false);
     }
@@ -465,6 +490,16 @@ export function FormBuilderPage() {
             {status.label}
           </span>
         </div>
+        {settings.enableStyle && (
+          <div style={{ display: 'flex', border: `1px solid ${C.n200}`, borderRadius: 8, overflow: 'hidden', flex: 'none' }}>
+            {(['fields', 'style'] as const).map((m, i) => (
+              <button key={m} type="button" onClick={() => setMode(m)}
+                style={{ height: 34, padding: '0 18px', border: 'none', borderLeft: i ? `1px solid ${C.n200}` : 'none', background: mode === m ? C.p600 : C.n0, color: mode === m ? '#fff' : C.n700, font: `600 13px ${FF}`, cursor: 'pointer', textTransform: 'capitalize' }}>
+                {m}
+              </button>
+            ))}
+          </div>
+        )}
         <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           {showLiveLink && (
             <a href={liveUrl} target="_blank" rel="noopener noreferrer" title="Open the live public form" style={{ font: `600 12px ${FF}`, color: C.p600, textDecoration: 'none', marginRight: 4 }}>
@@ -488,10 +523,13 @@ export function FormBuilderPage() {
           publishedAt={publishedAt}
           onClose={() => setShowSettings(false)}
           onSave={(desc, s) => { setDescription(desc); setSettings(s); setShowSettings(false); }}
+          onToggleStyle={(v) => setSettings((s) => ({ ...s, enableStyle: v }))}
+          onOpenStyle={() => { setShowSettings(false); setMode('style'); }}
         />
       )}
 
       {/* Main area */}
+      {mode === 'fields' || !settings.enableStyle ? (
       <Flex style={{ flex: 1, minHeight: 0 }}>
         <FieldPalette onAdd={addField} />
 
@@ -536,6 +574,16 @@ export function FormBuilderPage() {
           />
         )}
       </Flex>
+      ) : (
+        <StyleMode
+          title={title}
+          description={description}
+          fields={fields}
+          settings={settings}
+          theme={settings.theme || DEFAULT_THEME}
+          onChange={(t) => setSettings((s) => ({ ...s, theme: t, themeVars: resolveThemeVars(t) }))}
+        />
+      )}
 
       <FormPreview
         title={title}
diff --git a/admin/src/theme.ts b/admin/src/theme.ts
new file mode 100644
index 0000000..a159d66
--- /dev/null
+++ b/admin/src/theme.ts
@@ -0,0 +1,152 @@
+/**
+ * Single source of truth for form theming.
+ *
+ * A theme resolves to a small set of `--sfb-*` CSS custom properties plus two
+ * data-attributes (field + button variants that change structure, not just a
+ * token). Both the admin live preview and the public embed apply these verbatim,
+ * so there is no duplicated styling logic to keep in sync.
+ */
+
+export type FontId = 'sans' | 'serif' | 'round' | 'mono';
+export type CornersId = 'sharp' | 'rounded' | 'pill';
+export type FieldStyleId = 'outline' | 'filled' | 'underline';
+export type LabelWeightId = 'regular' | 'medium' | 'bold';
+export type ButtonStyleId = 'solid' | 'outline';
+export type ButtonWidthId = 'full' | 'auto';
+export type FormWidthId = 'narrow' | 'regular' | 'wide';
+export type SpacingId = 'compact' | 'cozy' | 'roomy';
+export type ShadowId = 'none' | 'soft' | 'strong';
+export type CardBorderId = 'none' | 'hairline' | 'bold';
+export type CardCornersId = 'sharp' | 'rounded' | 'round';
+export type PlacementId = 'top' | 'center';
+
+export interface Palettes {
+  accent: string[];
+  cardBg: string[];
+  pageBg: string[];
+}
+export type PaletteKey = keyof Palettes;
+
+export interface FormTheme {
+  accent: string;
+  font: FontId;
+  cardBg: string;
+  pageBg: string;
+  corners: CornersId;
+  fieldStyle: FieldStyleId;
+  labelWeight: LabelWeightId;
+  buttonStyle: ButtonStyleId;
+  buttonWidth: ButtonWidthId;
+  formWidth: FormWidthId;
+  spacing: SpacingId;
+  shadow: ShadowId;
+  cardBorder: CardBorderId;
+  cardCorners: CardCornersId;
+  placement: PlacementId;
+  // editable swatch palettes (persisted with the form; not part of the resolved look)
+  palettes: Palettes;
+}
+
+export const CARD_RADIUS: Record<CardCornersId, string> = { sharp: '0px', rounded: '14px', round: '28px' };
+
+/* ── swatch palettes (for the sidebar pickers) ─────────────────────────── */
+export const ACCENTS = ['#4945ff', '#2f6fed', '#2f8f4e', '#7c3aed', '#d1354a', '#d98218', '#12b886', '#1e1e2e'];
+export const CARD_BGS = ['#ffffff', '#faf7f0', '#f4f4fb', '#1a1a2e', '#0f0f1a'];
+export const PAGE_BGS = ['#f5f5f9', '#ffffff', '#eef0fb', '#f6f1e7', '#0f0f1a'];
+
+/* ── value maps ────────────────────────────────────────────────────────── */
+export const FONT: Record<FontId, string> = {
+  sans: '"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+  serif: 'Georgia, "Times New Roman", serif',
+  round: '"Nunito", "Segoe UI Rounded", system-ui, sans-serif',
+  mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+};
+export const CORNERS: Record<CornersId, string> = { sharp: '0px', rounded: '8px', pill: '999px' };
+export const LABEL_WEIGHT: Record<LabelWeightId, string> = { regular: '400', medium: '600', bold: '700' };
+export const FORM_WIDTH: Record<FormWidthId, string> = { narrow: '460px', regular: '600px', wide: '760px' };
+export const SPACING: Record<SpacingId, string> = { compact: '14px', cozy: '20px', roomy: '30px' };
+export const SHADOW: Record<ShadowId, string> = {
+  none: 'none',
+  soft: '0 4px 20px rgba(20,20,50,.08)',
+  strong: '0 12px 40px rgba(20,20,50,.18)',
+};
+
+export const DEFAULT_THEME: FormTheme = {
+  accent: '#4945ff',
+  font: 'sans',
+  cardBg: '#ffffff',
+  pageBg: '#f5f5f9',
+  corners: 'rounded',
+  fieldStyle: 'outline',
+  labelWeight: 'medium',
+  buttonStyle: 'solid',
+  buttonWidth: 'full',
+  formWidth: 'regular',
+  spacing: 'cozy',
+  shadow: 'soft',
+  cardBorder: 'hairline',
+  cardCorners: 'rounded',
+  placement: 'top',
+  palettes: { accent: ACCENTS, cardBg: CARD_BGS, pageBg: PAGE_BGS },
+};
+
+// Is a color dark enough to need light text on top of it?
+function isDark(hex: string): boolean {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return false;
+  const n = parseInt(m[1], 16);
+  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
+  // perceived luminance
+  return (0.299 * r + 0.587 * g + 0.114 * b) < 140;
+}
+
+/** Resolve a theme to the `--sfb-*` variables the form reads. */
+export function resolveThemeVars(theme: Partial<FormTheme> | undefined): Record<string, string> {
+  const t: FormTheme = { ...DEFAULT_THEME, ...(theme || {}) };
+  const darkCard = isDark(t.cardBg);
+  const text = darkCard ? '#f4f4f8' : '#1f1f33';
+  const muted = darkCard ? '#a6a6c0' : '#6a6a82';
+  const border = darkCard ? 'rgba(255,255,255,.18)' : '#dcdce4';
+  // filled fields use a subtle tint of the card
+  const fill = darkCard ? 'rgba(255,255,255,.06)' : '#f1f1f6';
+
+  return {
+    '--sfb-accent': t.accent,
+    '--sfb-accent-contrast': isDark(t.accent) ? '#ffffff' : (t.accent.toLowerCase() === '#ffffff' ? '#1f1f33' : '#ffffff'),
+    '--sfb-font': FONT[t.font],
+    '--sfb-bg': t.cardBg,
+    '--sfb-page-bg': t.pageBg,
+    '--sfb-text': text,
+    '--sfb-muted': muted,
+    '--sfb-border': border,
+    '--sfb-input-bg': t.fieldStyle === 'filled' ? fill : (t.fieldStyle === 'underline' ? 'transparent' : t.cardBg),
+    '--sfb-radius': CORNERS[t.corners],
+    '--sfb-label-weight': LABEL_WEIGHT[t.labelWeight],
+    '--sfb-form-width': FORM_WIDTH[t.formWidth],
+    '--sfb-gap': SPACING[t.spacing],
+    '--sfb-shadow': SHADOW[t.shadow],
+    '--sfb-card-border': t.cardBorder === 'none' ? 'none' : `${t.cardBorder === 'bold' ? '2px' : '1px'} solid ${border}`,
+    '--sfb-card-radius': CARD_RADIUS[t.cardCorners],
+    '--sfb-page-align': t.placement === 'center' ? 'center' : 'flex-start',
+    '--sfb-btn-width': t.buttonWidth === 'full' ? '100%' : 'auto',
+    // button: solid = accent bg / contrast text; outline = transparent bg / accent text + border
+    '--sfb-btn-bg': t.buttonStyle === 'solid' ? t.accent : 'transparent',
+    '--sfb-btn-color': t.buttonStyle === 'solid' ? (isDark(t.accent) ? '#fff' : '#fff') : t.accent,
+    '--sfb-btn-border': t.buttonStyle === 'outline' ? `2px solid ${t.accent}` : '2px solid transparent',
+  };
+}
+
+/** Data-attributes for the structural variants CSS keys off. */
+export function resolveThemeAttrs(theme: Partial<FormTheme> | undefined): Record<string, string> {
+  const t: FormTheme = { ...DEFAULT_THEME, ...(theme || {}) };
+  return { 'data-sfb-fields': t.fieldStyle };
+}
+
+// ponytail: one runnable check — preset + variant resolution.
+export function __selfCheck() {
+  const v = resolveThemeVars({ ...DEFAULT_THEME, cardBg: '#0f0f1a', fieldStyle: 'underline', corners: 'pill' });
+  if (v['--sfb-text'] !== '#f4f4f8') throw new Error('dark card should use light text');
+  if (v['--sfb-input-bg'] !== 'transparent') throw new Error('underline should have transparent input bg');
+  if (v['--sfb-radius'] !== '999px') throw new Error('pill radius not applied');
+  return true;
+}
diff --git a/admin/src/types.ts b/admin/src/types.ts
index ba80eda..fc0cae0 100644
--- a/admin/src/types.ts
+++ b/admin/src/types.ts
@@ -1,3 +1,5 @@
+import type { FormTheme } from './theme';
+
 export type FieldType =
   | 'text'
   | 'email'
@@ -72,6 +74,10 @@ export interface FormSettings {
     siteKey: string;
     secretKey: string;
   };
+  enableStyle?: boolean;
+  theme?: FormTheme;
+  // resolved --sfb-* vars, baked at edit time so the embed/public page apply them verbatim
+  themeVars?: Record<string, string>;
 }
 
 export interface Form {
diff --git a/server/src/controllers/form.ts b/server/src/controllers/form.ts
index 283bd05..f8cf401 100644
--- a/server/src/controllers/form.ts
+++ b/server/src/controllers/form.ts
@@ -1,3 +1,5 @@
+import { FORM_CSS } from '../../../admin/src/form-css';
+
 const PLUGIN_ID = 'strapi-plugin-form-builder-cms';
 
 function escapeHtml(s: string): string {
@@ -13,6 +15,11 @@ function publicPageHtml(form: any): string {
   const title = escapeHtml(form.title || 'Form');
   const description = escapeHtml(form.description || '');
   const formId = form.id;
+  // resolved theme vars → inline style on the card so it themes together with the form inside
+  const tv = (form.settings && form.settings.themeVars) || {};
+  const cardVars = Object.keys(tv)
+    .map((k) => `${k}: ${String(tv[k]).replace(/[;{}<>]/g, '')}`)
+    .join('; ');
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -24,30 +31,33 @@ function publicPageHtml(form: any): string {
     *, *::before, *::after { box-sizing: border-box; }
     body {
       margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      background: #f5f5f9;
-      color: #32324d;
+      font-family: var(--sfb-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+      background: var(--sfb-page-bg, #f5f5f9);
+      color: var(--sfb-text, #32324d);
       min-height: 100vh;
       display: flex;
-      align-items: flex-start;
+      align-items: var(--sfb-page-align, flex-start);
       justify-content: center;
       padding: 48px 20px;
     }
     .card {
-      background: #fff;
-      border: 1px solid #dcdce4;
-      border-radius: 8px;
+      background: var(--sfb-bg, #fff);
+      color: var(--sfb-text, #32324d);
+      border: var(--sfb-card-border, 1px solid var(--sfb-border, #dcdce4));
+      border-radius: var(--sfb-card-radius, 14px);
+      box-shadow: var(--sfb-shadow, none);
       padding: 40px 48px;
       width: 100%;
-      max-width: 640px;
+      max-width: var(--sfb-form-width, 640px);
     }
     h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
-    .desc { font-size: 14px; color: #666687; margin: 0 0 28px; }
+    .desc { font-size: 14px; color: var(--sfb-muted, #666687); margin: 0 0 28px; }
     @media (max-width: 600px) { .card { padding: 28px 20px; } }
+    body { ${cardVars} }
   </style>
 </head>
 <body>
-  <div class="card">
+  <div class="card"${form.settings && form.settings.theme && form.settings.theme.fieldStyle ? ` data-sfb-fields="${form.settings.theme.fieldStyle}"` : ''}>
     <h1>${title}</h1>
     ${description ? `<p class="desc">${description}</p>` : ''}
     <div id="sfb-form-${formId}"></div>
@@ -92,6 +102,15 @@ function embedScript(): string {
     // the browser's native required bubble
     formEl.noValidate = true;
 
+    // apply the form's resolved theme (variables + the field-style variant attribute)
+    if (form.settings && form.settings.themeVars) {
+      var tv = form.settings.themeVars;
+      for (var k in tv) { if (Object.prototype.hasOwnProperty.call(tv, k)) formEl.style.setProperty(k, tv[k]); }
+    }
+    if (form.settings && form.settings.theme && form.settings.theme.fieldStyle) {
+      formEl.setAttribute('data-sfb-fields', form.settings.theme.fieldStyle);
+    }
+
     var captchaCfg = (form.settings && form.settings.captcha) || null;
     var captchaOn = !!(captchaCfg && captchaCfg.provider && captchaCfg.provider !== 'none' && captchaCfg.siteKey);
 
@@ -428,32 +447,7 @@ function embedScript(): string {
     if (document.getElementById('sfb-css')) return;
     var s = document.createElement('style');
     s.id = 'sfb-css';
-    s.textContent = [
-      '.sfb-form { font-family: inherit; text-align: left; color: #32324d; line-height: 1.5; }',
-      '.sfb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }',
-      '.sfb-field { display: flex; flex-direction: column; gap: 4px; }',
-      '.sfb-label { font-size: 13px; font-weight: 600; color: #32324d; }',
-      '.sfb-required { color: #ee5e52; }',
-      '.sfb-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #dcdce4; border-radius: var(--sfb-radius, 4px); font-size: 14px; font-family: inherit; color: #32324d; background: #fff; box-sizing: border-box; outline: none; transition: border-color .15s; }',
-      '.sfb-input:focus { border-color: var(--sfb-accent, #4945ff); box-shadow: 0 0 0 2px rgba(73,69,255,.15); }',
-      'textarea.sfb-input { height: auto; padding: 8px 12px; resize: vertical; }',
-      'select.sfb-input { appearance: none; cursor: pointer; }',
-      '.sfb-radio-group { display: flex; flex-direction: column; gap: 8px; }',
-      '.sfb-radio-label, .sfb-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #32324d; cursor: pointer; }',
-      '.sfb-radio-label input, .sfb-checkbox-label input { accent-color: var(--sfb-accent, #4945ff); width: 16px; height: 16px; cursor: pointer; }',
-      '.sfb-help { font-size: 12px; color: #666687; margin: 0; }',
-      '.sfb-btn { background: var(--sfb-accent, #4945ff); color: #fff; border: none; border-radius: var(--sfb-radius, 4px); padding: 10px 24px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: opacity .15s; }',
-      '.sfb-btn:hover { opacity: .88; }',
-      '.sfb-btn:disabled { opacity: .6; cursor: not-allowed; }',
-      '.sfb-heading { font-size: 18px; font-weight: 700; color: #32324d; margin: 4px 0; }',
-      '.sfb-paragraph { font-size: 14px; color: #666687; margin: 4px 0; line-height: 1.6; }',
-      '.sfb-divider { border: none; border-top: 1px solid #dcdce4; margin: 4px 0; }',
-      '.sfb-success { font-size: 15px; color: #27ae60; font-weight: 600; }',
-      '.sfb-error { font-size: 13px; color: #ee5e52; margin-bottom: 12px; }',
-      '.sfb-field-error { font-size: 12px; color: #ee5e52; margin: 4px 0 0; }',
-      '.sfb-field--error .sfb-input, .sfb-field--error .sfb-radio-group { border-color: #ee5e52 !important; }',
-      '.sfb-field--error > .sfb-label { color: #ee5e52; }',
-    ].join('\\n');
+    s.textContent = ${JSON.stringify(FORM_CSS)};
     document.head.appendChild(s);
   }
 
diff --git a/tests/theme.test.ts b/tests/theme.test.ts
new file mode 100644
index 0000000..c5a3abc
--- /dev/null
+++ b/tests/theme.test.ts
@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { resolveThemeVars, DEFAULT_THEME, CORNERS, CARD_RADIUS, __selfCheck } from '../admin/src/theme';
+
+describe('resolveThemeVars', () => {
+  it('built-in self-check passes', () => {
+    expect(__selfCheck()).toBe(true);
+  });
+
+  it('uses light text on a dark card, dark text on a light card', () => {
+    expect(resolveThemeVars({ ...DEFAULT_THEME, cardBg: '#0f0f1a' })['--sfb-text']).toBe('#f4f4f8');
+    expect(resolveThemeVars({ ...DEFAULT_THEME, cardBg: '#ffffff' })['--sfb-text']).toBe('#1f1f33');
+  });
+
+  it('maps field corners to a radius', () => {
+    expect(resolveThemeVars({ ...DEFAULT_THEME, corners: 'pill' })['--sfb-radius']).toBe(CORNERS.pill);
+    expect(resolveThemeVars({ ...DEFAULT_THEME, corners: 'sharp' })['--sfb-radius']).toBe('0px');
+  });
+
+  it('maps card corners to a card radius', () => {
+    expect(resolveThemeVars({ ...DEFAULT_THEME, cardCorners: 'round' })['--sfb-card-radius']).toBe(CARD_RADIUS.round);
+    expect(resolveThemeVars({ ...DEFAULT_THEME, cardCorners: 'sharp' })['--sfb-card-radius']).toBe('0px');
+  });
+
+  it('hides the card border when cardBorder is none', () => {
+    expect(resolveThemeVars({ ...DEFAULT_THEME, cardBorder: 'none' })['--sfb-card-border']).toBe('none');
+    expect(resolveThemeVars({ ...DEFAULT_THEME, cardBorder: 'bold' })['--sfb-card-border']).toContain('2px');
+  });
+
+  it('maps placement to the page alignment', () => {
+    expect(resolveThemeVars({ ...DEFAULT_THEME, placement: 'center' })['--sfb-page-align']).toBe('center');
+    expect(resolveThemeVars({ ...DEFAULT_THEME, placement: 'top' })['--sfb-page-align']).toBe('flex-start');
+  });
+
+  it('underline fields use a transparent input background', () => {
+    expect(resolveThemeVars({ ...DEFAULT_THEME, fieldStyle: 'underline' })['--sfb-input-bg']).toBe('transparent');
+  });
+
+  it('outline button is transparent with an accent border', () => {
+    const v = resolveThemeVars({ ...DEFAULT_THEME, buttonStyle: 'outline', accent: '#ff0000' });
+    expect(v['--sfb-btn-bg']).toBe('transparent');
+    expect(v['--sfb-btn-border']).toContain('#ff0000');
+  });
+
+  it('editable palettes are editor-only — they never leak into the resolved CSS variables', () => {
+    const v = resolveThemeVars({ ...DEFAULT_THEME, palettes: { accent: ['#111111'], cardBg: ['#222222'], pageBg: ['#333333'] } });
+    expect(Object.keys(v).every((k) => k.startsWith('--sfb-'))).toBe(true);
+    expect(JSON.stringify(v)).not.toContain('#111111'); // a palette entry not selected must not appear
+  });
+});