@deneb-ui/ui 2.0.68 → 2.0.69

package/dist/EditableCategoryPills.js

@@ -102,9 +102,9 @@ function EditableCategoryPills({ categories, fieldPath = 'categories', selectedC
                     whiteSpace: 'nowrap',
                     cursor: 'pointer',
                     transition: 'all 0.2s ease',
-                    border: isSelected ? '1px solid var(--color-primary, #0f172a)' : '1px solid #e2e8f0',
-                    backgroundColor: isSelected ? 'var(--color-primary, #0f172a)' : '#ffffff',
-                    color: isSelected ? '#ffffff' : '#475569',
+                    border: isSelected ? '1px solid var(--brand-color, var(--color-primary, #0f172a))' : '1px solid var(--color-border, #e2e8f0)',
+                    backgroundColor: isSelected ? 'var(--brand-color, var(--color-primary, #0f172a))' : 'var(--card-bg, var(--color-surface, #ffffff))',
+                    color: isSelected ? '#ffffff' : 'var(--color-text-muted, var(--muted-text, #475569))',
                     boxShadow: isSelected ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
                 }, "data-preview-field-path": `${fieldPath}.${idx}`, "aria-pressed": isSelected, children: cat }, `${cat}-${idx}`));
         }) }));

package/dist/EditableContactForm.js

@@ -98,10 +98,11 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
-                            border: '1px solid #cbd5e1',
+                            border: '1px solid var(--input-border, #cbd5e1)',
                             fontSize: '0.95rem',
                             outline: 'none',
-                            backgroundColor: '#ffffff',
+                            backgroundColor: 'var(--input-bg, #ffffff)',
+                            color: 'var(--input-color, var(--page-text, inherit))',
                             boxSizing: 'border-box',
                         } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-email", "data-preview-field-path": emailLabelPath, style: {
                             display: 'block',
@@ -113,10 +114,11 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
-                            border: '1px solid #cbd5e1',
+                            border: '1px solid var(--input-border, #cbd5e1)',
                             fontSize: '0.95rem',
                             outline: 'none',
-                            backgroundColor: '#ffffff',
+                            backgroundColor: 'var(--input-bg, #ffffff)',
+                            color: 'var(--input-color, var(--page-text, inherit))',
                             boxSizing: 'border-box',
                         } })] }), showPhone && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-phone", "data-preview-field-path": phoneLabelPath, style: {
                             display: 'block',
@@ -143,10 +145,11 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
-                            border: '1px solid #cbd5e1',
+                            border: '1px solid var(--input-border, #cbd5e1)',
                             fontSize: '0.95rem',
                             outline: 'none',
-                            backgroundColor: '#ffffff',
+                            backgroundColor: 'var(--input-bg, #ffffff)',
+                            color: 'var(--input-color, var(--page-text, inherit))',
                             boxSizing: 'border-box',
                             fontFamily: 'inherit',
                         } })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: status === 'submitting', style: {

package/dist/EditableDialog.js

@@ -66,7 +66,9 @@ function EditableDialog({ open = false, onClose, title, description, titleFieldP
                     position: 'relative',
                     width: '100%',
                     maxWidth,
-                    backgroundColor: '#ffffff',
+                    backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+                    color: 'var(--page-text, inherit)',
+                    border: '1px solid var(--color-border, rgba(0, 0, 0, 0.05))',
                     borderRadius: '20px',
                     boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05)',
                     padding: '2rem',

package/dist/EditableNavbar.js

@@ -62,10 +62,10 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
             top: 0,
             zIndex: 50,
             width: '100%',
-            backgroundColor: 'rgba(255, 255, 255, 0.82)',
+            backgroundColor: 'var(--header-bg, rgba(255, 255, 255, 0.82))',
             backdropFilter: 'blur(16px)',
             WebkitBackdropFilter: 'blur(16px)',
-            borderBottom: '1px solid rgba(226, 232, 240, 0.8)',
+            borderBottom: '1px solid var(--color-border, rgba(226, 232, 240, 0.8))',
             transition: 'all 0.2s ease',
             ...style,
         }, className: `deneb-navbar sticky top-0 z-50 w-full border-b border-slate-200/80 bg-white/80 backdrop-blur-md dark:border-slate-800/80 dark:bg-slate-950/80 ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
@@ -144,7 +144,7 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
                                     cursor: 'pointer',
                                 }, className: "deneb-mobile-toggle md:hidden flex items-center justify-center w-10 h-10 rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-100 dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800 transition-colors", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: mobileMenuOpen ? ((0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })) : ((0, jsx_runtime_1.jsx)("path", { d: "M4 6h16M4 12h16M4 18h16" })) }) })] })] }), mobileMenuOpen && ((0, jsx_runtime_1.jsxs)("div", { style: {
                     borderTop: '1px solid var(--color-border, #e2e8f0)',
-                    backgroundColor: 'rgba(255, 255, 255, 0.98)',
+                    backgroundColor: 'var(--card-bg, var(--page-background, rgba(255, 255, 255, 0.98)))',
                     padding: '1.25rem 1.5rem',
                     display: 'flex',
                     flexDirection: 'column',
@@ -170,7 +170,7 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
                                 }, className: `block w-full text-left px-3.5 py-2.5 rounded-lg text-base font-medium transition-colors border-0 cursor-pointer ${isActive
                                     ? 'bg-slate-100 text-slate-900 font-semibold dark:bg-slate-800 dark:text-white'
                                     : 'bg-transparent text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `common.navLabels.${link.id}`, children: label }) }) }, `mobile-${link.id}`));
-                    }), hasContact ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", style: { marginTop: '0.5rem', paddingTop: '0.75rem', borderTop: '1px solid rgba(226,232,240,0.8)' }, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                    }), hasContact ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", style: { marginTop: '0.5rem', paddingTop: '0.75rem', borderTop: '1px solid var(--color-border, rgba(226, 232, 240, 0.8))' }, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
                                 setMobileMenuOpen(false);
                                 navigate('/contact');
                             }, style: {

package/dist/EditablePricingCard.js

@@ -20,8 +20,8 @@ function EditablePricingCard({ itemPath, item, as: Component = 'div', isPopular
     const popular = item?.isPopular || isPopular;
     const cardStyle = {
         position: 'relative',
-        backgroundColor: popular ? '#ffffff' : 'rgba(255, 255, 255, 0.85)',
-        border: popular ? '2px solid var(--brand-color, #2563eb)' : '1px solid #e2e8f0',
+        backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+        border: popular ? '2px solid var(--brand-color, #2563eb)' : '1px solid var(--card-border, var(--color-border, #e2e8f0))',
         borderRadius: '20px',
         padding: '2.5rem 2rem',
         boxShadow: popular

package/dist/EditableProductCard.js

@@ -67,10 +67,10 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
     };
     const variantStyles = {
         'modern-glass': {
-            backgroundColor: 'var(--product-card-bg, #0F1424)',
+            backgroundColor: 'var(--product-card-bg, var(--card-bg, var(--color-surface, rgba(255, 255, 255, 0.85))))',
             backdropFilter: 'blur(16px)',
             WebkitBackdropFilter: 'blur(16px)',
-            border: '1px solid var(--product-card-border, #1E2638)',
+            border: '1px solid var(--product-card-border, var(--card-border, var(--color-border, rgba(226, 232, 240, 0.8))))',
             borderRadius: '16px',
             boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.4)',
             overflow: 'hidden',
@@ -79,8 +79,8 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
             flexDirection: 'column',
         },
         classic: {
-            backgroundColor: '#ffffff',
-            border: '1px solid #e2e8f0',
+            backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+            border: '1px solid var(--card-border, var(--color-border, #e2e8f0))',
             borderRadius: '14px',
             boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.05)',
             overflow: 'hidden',
@@ -96,8 +96,8 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
             flexDirection: 'column',
         },
         horizontal: {
-            backgroundColor: '#ffffff',
-            border: '1px solid #e2e8f0',
+            backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+            border: '1px solid var(--card-border, var(--color-border, #e2e8f0))',
             borderRadius: '16px',
             overflow: 'hidden',
             display: 'flex',
@@ -131,8 +131,8 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                             fontWeight: 700,
                                             letterSpacing: '0.08em',
                                             textTransform: 'uppercase',
-                                            color: '#94a3b8',
-                                            backgroundColor: 'rgba(30, 41, 59, 0.8)',
+                                            color: 'var(--tag-color, var(--muted-text, var(--color-muted, #64748b)))',
+                                            backgroundColor: 'var(--tag-bg, var(--color-secondary, rgba(241, 245, 249, 0.9)))',
                                             padding: '2px 8px',
                                             borderRadius: '6px',
                                         } })) : null] }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: `${itemPath}.name`, "data-preview-field-path": `${itemPath}.name`, defaultValue: name, style: {
@@ -153,7 +153,7 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                 } })) : null] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             marginTop: '0.75rem',
                             paddingTop: '0.75rem',
-                            borderTop: cardVariant === 'minimal' ? 'none' : '1px solid rgba(51, 65, 85, 0.6)',
+                            borderTop: cardVariant === 'minimal' ? 'none' : '1px solid var(--card-border, var(--color-border, rgba(226, 232, 240, 0.7)))',
                             display: 'flex',
                             flexDirection: 'column',
                             gap: '0.75rem',
@@ -191,8 +191,8 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                             transition: 'all 0.2s ease',
                                             boxShadow: '0 2px 8px rgba(37, 211, 102, 0.25)',
                                         }, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(WhatsAppIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.whatsappButtonText`, "data-preview-field-path": `${itemPath}.whatsappButtonText`, defaultValue: resolvedWhatsAppText, style: { color: '#ffffff', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] })), showAddToCartButton && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleAddToCartClick, title: "Add this product to shopping cart", style: {
-                                            backgroundColor: 'var(--brand-color, #2563eb)',
-                                            color: '#ffffff',
+                                            backgroundColor: 'var(--button-bg, var(--brand-color, #2563eb))',
+                                            color: 'var(--button-text, #ffffff)',
                                             border: 'none',
                                             padding: '0.55rem 0.75rem',
                                             borderRadius: '10px',
@@ -205,5 +205,5 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                             gap: '0.375rem',
                                             transition: 'all 0.2s ease',
                                             boxShadow: '0 2px 8px rgba(37, 99, 235, 0.25)',
-                                        }, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(CartIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.addToCartButtonText`, "data-preview-field-path": `${itemPath}.addToCartButtonText`, defaultValue: resolvedAddToCartText, style: { color: '#ffffff', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] }))] }))] })] })] }));
+                                        }, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(CartIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.addToCartButtonText`, "data-preview-field-path": `${itemPath}.addToCartButtonText`, defaultValue: resolvedAddToCartText, style: { color: 'var(--button-text, #ffffff)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] }))] }))] })] })] }));
 }

package/dist/EditableTestimonialCard.js

@@ -11,8 +11,8 @@ function EditableTestimonialCard({ itemPath, item, as: Component = 'div', classN
     const avatar = String(item?.avatar || '');
     const rating = Number(item?.rating || 5);
     const cardStyle = {
-        backgroundColor: 'var(--color-surface, #ffffff)',
-        border: '1px solid var(--color-border, #f1f5f9)',
+        backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+        border: '1px solid var(--card-border, var(--color-border, #f1f5f9))',
         borderRadius: '16px',
         padding: '2rem',
         boxShadow: 'var(--card-shadow, 0 4px 20px -2px rgba(0, 0, 0, 0.04))',

package/dist/EditableText.js

@@ -251,37 +251,37 @@ function EditableButton({ id, 'data-preview-field-path': previewFieldPath, defau
     };
     const variantStyles = {
         primary: {
-            backgroundColor: 'var(--brand-color, #2563eb)',
-            color: '#ffffff',
+            backgroundColor: 'var(--button-bg, var(--brand-color, #2563eb))',
+            color: 'var(--button-text, #ffffff)',
             border: 'none',
             boxShadow: '0 4px 14px 0 rgba(37, 99, 235, 0.35)',
         },
         secondary: {
-            backgroundColor: 'var(--brand-secondary, #0f172a)',
-            color: '#ffffff',
-            border: 'none',
+            backgroundColor: 'var(--button-secondary-bg, var(--color-secondary, var(--brand-secondary, #0f172a)))',
+            color: 'var(--button-secondary-text, var(--color-text, #ffffff))',
+            border: '1px solid var(--button-secondary-border, var(--color-border, transparent))',
         },
         accent: {
             backgroundColor: 'var(--brand-accent, #14b8a6)',
-            color: '#ffffff',
+            color: 'var(--button-accent-text, #ffffff)',
             border: 'none',
         },
         outline: {
             backgroundColor: 'transparent',
-            color: 'var(--page-text, #0f172a)',
-            border: '1.5px solid currentColor',
+            color: 'var(--button-outline-text, var(--color-text, var(--page-text, #0f172a)))',
+            border: '1.5px solid var(--button-outline-border, var(--color-border, currentColor))',
         },
         ghost: {
             backgroundColor: 'transparent',
-            color: 'var(--page-text, #0f172a)',
+            color: 'var(--button-ghost-text, var(--color-text, var(--page-text, #0f172a)))',
             border: 'none',
         },
         glass: {
-            backgroundColor: 'rgba(255, 255, 255, 0.25)',
+            backgroundColor: 'var(--glass-bg, rgba(255, 255, 255, 0.15))',
             backdropFilter: 'blur(12px)',
             WebkitBackdropFilter: 'blur(12px)',
-            color: 'var(--page-text, #0f172a)',
-            border: '1px solid rgba(255, 255, 255, 0.4)',
+            color: 'var(--color-text, var(--page-text, #0f172a))',
+            border: '1px solid var(--card-border, rgba(255, 255, 255, 0.2))',
         },
     };
     const baseStyle = {

package/dist/SiteDataProvider.d.ts

@@ -59,6 +59,8 @@ export type SiteData = {
 };
 export declare const SiteDataContext: React.Context<SiteData>;
 export declare function isRecord(value: unknown): value is GenericRecord;
+export declare function isDarkColor(color?: unknown): boolean;
+export declare function syncThemeToDocument(theme: unknown): void;
 export declare function mergeSiteData(current: unknown, incoming: unknown, depth?: number, seen?: WeakSet<object>): unknown;
 export declare function normalizeOrigin(value?: string | null, baseOrigin?: string | null): string | null;
 /**

package/dist/SiteDataProvider.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DenebDataContext = exports.useDenebData = exports.DenebDataProvider = exports.SiteDataContext = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.PREVIEW_FIELD_ATTRIBUTE = exports.LEGACY_PREVIEW_FOCUS_MESSAGE = exports.PREVIEW_FOCUS_MESSAGE = exports.DENEB_PREVIEW_FOCUS_MESSAGE = exports.LEGACY_PREVIEW_READY_MESSAGE = exports.PREVIEW_READY_MESSAGE = exports.DENEB_PREVIEW_READY_MESSAGE = exports.LEGACY_PREVIEW_DATA_MESSAGE = exports.PREVIEW_DATA_MESSAGE = exports.DENEB_PREVIEW_DATA_MESSAGE = void 0;
 exports.isRecord = isRecord;
+exports.isDarkColor = isDarkColor;
+exports.syncThemeToDocument = syncThemeToDocument;
 exports.mergeSiteData = mergeSiteData;
 exports.normalizeOrigin = normalizeOrigin;
 exports.resolveParentOrigin = resolveParentOrigin;
@@ -52,6 +54,54 @@ exports.SiteDataContext = (0, react_1.createContext)({});
 function isRecord(value) {
     return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
 }
+function isDarkColor(color) {
+    if (typeof color !== "string" || !color)
+        return false;
+    const hex = color.trim().toLowerCase();
+    if (!/^#[0-9a-f]{3,6}$/.test(hex))
+        return false;
+    const fullHex = hex.length === 4
+        ? "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
+        : hex;
+    const r = Number.parseInt(fullHex.slice(1, 3), 16);
+    const g = Number.parseInt(fullHex.slice(3, 5), 16);
+    const b = Number.parseInt(fullHex.slice(5, 7), 16);
+    return (r * 299 + g * 587 + b * 114) / 1000 < 130;
+}
+function syncThemeToDocument(theme) {
+    if (typeof document === "undefined" || !isRecord(theme))
+        return;
+    const rootStyle = document.documentElement.style;
+    if (typeof theme.primaryColor === "string") {
+        rootStyle.setProperty("--brand-primary", theme.primaryColor);
+        rootStyle.setProperty("--brand-color", theme.primaryColor);
+        rootStyle.setProperty("--color-primary", theme.primaryColor);
+        const isPrimaryDark = isDarkColor(theme.primaryColor);
+        const autoBtnText = isPrimaryDark ? "#ffffff" : "#0f172a";
+        rootStyle.setProperty("--button-bg", String(theme.buttonBackgroundColor || theme.primaryColor));
+        rootStyle.setProperty("--button-text", String(theme.buttonTextColor || autoBtnText));
+    }
+    if (typeof theme.secondaryColor === "string") {
+        rootStyle.setProperty("--brand-secondary", theme.secondaryColor);
+    }
+    if (typeof theme.accentColor === "string") {
+        rootStyle.setProperty("--brand-accent", theme.accentColor);
+        rootStyle.setProperty("--color-accent", theme.accentColor);
+    }
+    if (typeof theme.backgroundColor === "string") {
+        const isDark = isDarkColor(theme.backgroundColor);
+        document.documentElement.classList.toggle("dark", isDark);
+        document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");
+        rootStyle.colorScheme = isDark ? "dark" : "light";
+        rootStyle.setProperty("--page-background", theme.backgroundColor);
+        rootStyle.setProperty("--card-bg", isDark ? "#111a2e" : "#ffffff");
+        rootStyle.setProperty("--product-card-bg", isDark ? "#111a2e" : "#ffffff");
+        rootStyle.setProperty("--color-surface", isDark ? "rgba(255,255,255,0.05)" : "#ffffff");
+        rootStyle.setProperty("--color-secondary", isDark ? "rgba(255,255,255,0.08)" : "#f1f5f9");
+        rootStyle.setProperty("--button-secondary-bg", isDark ? "rgba(255,255,255,0.08)" : "#f1f5f9");
+        rootStyle.setProperty("--button-secondary-text", isDark ? "#f8fafc" : "#0f172a");
+    }
+}
 function mergeSiteData(current, incoming, depth = 0, seen = new WeakSet()) {
     if (depth > 50)
         return incoming;
@@ -237,16 +287,7 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
             });
             // Dynamic theme variable injection for instant color updates
             if (isRecord(live.theme)) {
-                const rootStyle = document.documentElement.style;
-                if (typeof live.theme.primaryColor === "string") {
-                    rootStyle.setProperty("--brand-primary", live.theme.primaryColor);
-                }
-                if (typeof live.theme.secondaryColor === "string") {
-                    rootStyle.setProperty("--brand-secondary", live.theme.secondaryColor);
-                }
-                if (typeof live.theme.accentColor === "string") {
-                    rootStyle.setProperty("--brand-accent", live.theme.accentColor);
-                }
+                syncThemeToDocument(live.theme);
             }
         };
         const loadLiveCatalog = async (attempt = 0) => {
@@ -312,6 +353,17 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
             if (!isRecord(incoming))
                 return;
             setSiteData((current) => mergeSiteData(current, incoming));
+            try {
+                const inc = incoming;
+                const theme = (isRecord(inc.template) && isRecord(inc.template.structure))
+                    ? inc.template.structure?.theme
+                    : inc.theme;
+                if (theme)
+                    syncThemeToDocument(theme);
+            }
+            catch {
+                // Best-effort
+            }
             try {
                 window[SITE_DATA_GLOBAL_KEY] =
                     incoming;

package/dist/StickyMobileBar.js

@@ -71,10 +71,10 @@ function StickyMobileBar({ fieldPath, actions, showOnDesktop = false, className
         }
     };
     return ((0, jsx_runtime_1.jsx)("aside", { className: `deneb-sticky-mobile-bar fixed bottom-0 left-0 right-0 z-50 p-2 sm:p-3 transition-transform duration-300 ${showOnDesktop ? 'block' : 'lg:hidden'} ${className}`, "data-preview-field-path": fieldPath, style: {
-            backgroundColor: 'rgba(255, 255, 255, 0.92)',
+            backgroundColor: 'var(--header-bg, var(--card-bg, rgba(255, 255, 255, 0.92)))',
             backdropFilter: 'blur(12px)',
             WebkitBackdropFilter: 'blur(12px)',
-            borderTop: '1px solid rgba(226, 232, 240, 0.8)',
+            borderTop: '1px solid var(--color-border, rgba(226, 232, 240, 0.8))',
             boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.08)',
             ...style,
         }, children: (0, jsx_runtime_1.jsx)("div", { className: "max-w-md mx-auto flex items-center justify-between gap-2", children: resolvedActions.map((action) => {

package/dist/ThemeStyles.d.ts

@@ -15,6 +15,8 @@ export interface TemplateTheme {
     bodyFont?: string;
     borderRadius?: string;
     align?: 'left' | 'center' | 'right';
+    buttonBackgroundColor?: string;
+    buttonTextColor?: string;
     [key: string]: unknown;
 }
 /**

package/dist/ThemeStyles.js

@@ -5,6 +5,7 @@ exports.getCategoryTheme = getCategoryTheme;
 exports.getThemeCssProperties = getThemeCssProperties;
 exports.ThemeStyles = ThemeStyles;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@deneb-ui/core");
 const ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
 /**
  * Pre-configured, high-converting theme presets tailored for different business categories.
@@ -144,15 +145,30 @@ function getThemeCssProperties(theme) {
             }
         }
     }
+    const isDark = (0, core_1.isDarkColor)(theme?.backgroundColor);
+    const bgColor = theme?.backgroundColor || (isDark ? '#0f172a' : '#ffffff');
+    const textColor = theme?.textColor || (isDark ? '#f8fafc' : '#0f172a');
+    const mutedColor = theme?.mutedTextColor || (isDark ? 'rgba(248, 250, 252, 0.7)' : '#64748b');
+    const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : '#e2e8f0';
+    const cardBg = isDark ? '#111a2e' : '#ffffff';
+    const cardBorder = isDark ? 'rgba(255, 255, 255, 0.09)' : '#e2e8f0';
+    const primaryColor = theme?.primaryColor || '#2563eb';
+    const buttonBg = String(theme?.buttonBackgroundColor || primaryColor || '#2563eb');
+    const autoButtonText = (0, core_1.getAutoContrastTextColor)(buttonBg);
+    const buttonText = String(theme?.buttonTextColor || autoButtonText);
+    const buttonSecondaryBg = isDark
+        ? 'rgba(255, 255, 255, 0.08)'
+        : (theme?.secondaryColor && !(0, core_1.isDarkColor)(theme.secondaryColor) ? theme.secondaryColor : '#f1f5f9');
+    const buttonSecondaryText = isDark ? '#f8fafc' : '#0f172a';
     return {
-        '--brand-color': theme?.primaryColor || '#2563eb',
-        '--brand-secondary': theme?.secondaryColor || '#0f172a',
+        '--brand-color': primaryColor,
+        '--brand-secondary': theme?.secondaryColor || (isDark ? '#1e293b' : '#0f172a'),
         '--brand-accent': theme?.accentColor || '#14b8a6',
-        '--page-background': theme?.backgroundColor || '#ffffff',
-        '--page-text': theme?.textColor || '#0f172a',
-        '--heading-color': theme?.headingColor || theme?.secondaryColor || '#0f172a',
-        '--muted-text': theme?.mutedTextColor || '#64748b',
-        '--link-color': theme?.linkColor || theme?.primaryColor || '#2563eb',
+        '--page-background': bgColor,
+        '--page-text': textColor,
+        '--heading-color': theme?.headingColor || (isDark ? '#ffffff' : theme?.secondaryColor || '#0f172a'),
+        '--muted-text': mutedColor,
+        '--link-color': theme?.linkColor || primaryColor,
         '--hero-min-height': theme?.heroMinHeight || '72vh',
         '--section-padding': theme?.sectionPadding || '5rem',
         '--base-size': theme?.baseSize || '16px',
@@ -160,6 +176,35 @@ function getThemeCssProperties(theme) {
         '--body-font': theme?.bodyFont || 'Inter, sans-serif',
         '--border-radius': theme?.borderRadius || '8px',
         '--content-align': theme?.align || 'left',
+        // Canonical color system tokens for light & dark mode harmony
+        '--color-primary': primaryColor,
+        '--color-secondary': buttonSecondaryBg,
+        '--color-accent': theme?.accentColor || '#14b8a6',
+        '--color-text': textColor,
+        '--color-text-muted': mutedColor,
+        '--color-border': borderColor,
+        '--color-surface': isDark ? 'rgba(255,255,255,0.05)' : '#ffffff',
+        '--card-bg': cardBg,
+        '--card-border': cardBorder,
+        '--product-card-bg': cardBg,
+        '--product-card-border': cardBorder,
+        '--tag-bg': isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(241, 245, 249, 0.9)',
+        '--tag-color': mutedColor,
+        '--card-shadow': isDark ? '0 10px 25px -5px rgba(0, 0, 0, 0.4)' : '0 10px 25px -5px rgba(0, 0, 0, 0.05)',
+        '--header-bg': isDark ? 'rgba(15, 23, 42, 0.85)' : 'rgba(255, 255, 255, 0.82)',
+        '--input-bg': isDark ? '#1e293b' : '#ffffff',
+        '--input-border': isDark ? 'rgba(255, 255, 255, 0.15)' : '#cbd5e1',
+        '--input-color': textColor,
+        // Dedicated Button Design Tokens
+        '--button-bg': buttonBg,
+        '--button-text': buttonText,
+        '--button-primary-bg': buttonBg,
+        '--button-primary-text': buttonText,
+        '--button-secondary-bg': buttonSecondaryBg,
+        '--button-secondary-text': buttonSecondaryText,
+        '--button-outline-border': isDark ? 'rgba(255, 255, 255, 0.22)' : 'currentColor',
+        '--button-outline-text': isDark ? '#f8fafc' : textColor,
+        '--button-ghost-text': isDark ? '#f8fafc' : textColor,
         fontFamily: theme?.bodyFont || 'Inter, sans-serif',
         ...customVars,
     };

package/dist/contact/ContactButton.js

@@ -58,22 +58,23 @@ function ContactButton({ type = 'whatsapp', value, href, label, children, fieldP
     };
     const variantStyles = {
         primary: {
-            backgroundColor: 'var(--color-primary, #0f172a)',
-            color: '#ffffff',
+            backgroundColor: 'var(--button-bg, var(--color-primary, #0f172a))',
+            color: 'var(--button-text, #ffffff)',
             boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
         },
         secondary: {
-            backgroundColor: 'var(--color-secondary, #f1f5f9)',
-            color: 'var(--color-text, #0f172a)',
+            backgroundColor: 'var(--button-secondary-bg, var(--color-secondary, #f1f5f9))',
+            color: 'var(--button-secondary-text, var(--color-text, #0f172a))',
+            border: '1px solid var(--button-secondary-border, var(--color-border, transparent))',
         },
         outline: {
             backgroundColor: 'transparent',
-            border: '1px solid var(--color-border, #e2e8f0)',
-            color: 'var(--color-text, #0f172a)',
+            border: '1px solid var(--button-outline-border, var(--color-border, #e2e8f0))',
+            color: 'var(--button-outline-text, var(--color-text, #0f172a))',
         },
         ghost: {
             backgroundColor: 'transparent',
-            color: 'var(--color-text, #0f172a)',
+            color: 'var(--button-ghost-text, var(--color-text, #0f172a))',
         },
         whatsapp: {
             backgroundColor: '#25D366',

package/dist/contact/FloatingContactWidget.js

@@ -58,10 +58,11 @@ function FloatingContactWidget({ fieldPath = 'contact', defaultPhone, defaultWha
         [isRight ? 'right' : 'left']: '0',
         width: 'min(18rem, calc(100vw - 2rem))',
         maxWidth: 'calc(100vw - 2rem)',
-        backgroundColor: '#ffffff',
+        backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+        color: 'var(--page-text, inherit)',
         borderRadius: '1rem',
         boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-        border: '1px solid rgba(226, 232, 240, 0.8)',
+        border: '1px solid var(--color-border, rgba(226, 232, 240, 0.8))',
         overflow: 'hidden',
         animation: 'deneb-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
     };

package/dist/index.d.ts

@@ -94,3 +94,5 @@ export { PlatformAdditionalPages, AdditionalPagesNav } from './PlatformAdditiona
 export declare const DENEB_FRAMEWORK_NAME = "DENEB UI";
 export declare const DENEB_FRAMEWORK_VERSION = "2.0.0";
 export declare const DENEB_AUTHOR = "Chamika Gayashan & Induranga Kawishwara";
+export { THEME_PALETTES, GLOBAL_FONT_OPTIONS, FONT_PAIRINGS, isDarkColor, getAutoContrastTextColor, toHexColor, normalizeHexColor, parseVisualCustomization, customizationToTheme, mergeVisualCustomizationIntoTheme, generateThemeVariables, } from '@deneb-ui/core';
+export type { ThemePalette, FontPairing, GlobalFontOption, VisualCustomization, VisualCustomizationColors, VisualCustomizationTypography, VisualCustomizationSpacing, VisualCustomizationLayout, VisualCustomizationComponents, VisualCustomizationSectionOverride, VisualCustomizationElementStyle, TemplateThemeShape, } from '@deneb-ui/core';

package/dist/index.js

@@ -19,7 +19,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FAQ = exports.Accordion = exports.Testimonials = exports.TestimonialSection = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.GoogleFeedback = exports.CustomerReviews = exports.ProductDetail = exports.ProductShowcase = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Map = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = exports.collectStyleTargetsFromHtml = exports.validateStyleTree = exports.styleToCssVariables = exports.patchStyleByPath = exports.patchElementStyle = exports.STYLE_TYPE_ATTRIBUTE = exports.STYLE_TARGET_ATTRIBUTE = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.formatResponsiveFontSize = exports.resolveInstallableFont = exports.normalizeFontId = exports.lookupFontDefinition = exports.listFontsByCategory = exports.collectFontIdsFromSiteData = exports.buildGoogleFontsStylesheetUrl = exports.DENEB_GOOGLE_FONT_COUNT = exports.DENEB_FONT_REGISTRY = exports.useDenebFonts = exports.DENEB_FONTS_LINK_ID = exports.FontLoader = exports.DenebComponentStyles = exports.ResponsiveBaseStyles = void 0;
-exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = void 0;
+exports.generateThemeVariables = exports.mergeVisualCustomizationIntoTheme = exports.customizationToTheme = exports.parseVisualCustomization = exports.normalizeHexColor = exports.toHexColor = exports.getAutoContrastTextColor = exports.isDarkColor = exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = exports.THEME_PALETTES = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = void 0;
 __exportStar(require("./PreviewField"), exports);
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
@@ -176,3 +176,15 @@ Object.defineProperty(exports, "AdditionalPagesNav", { enumerable: true, get: fu
 exports.DENEB_FRAMEWORK_NAME = 'DENEB UI';
 exports.DENEB_FRAMEWORK_VERSION = '2.0.0';
 exports.DENEB_AUTHOR = 'Chamika Gayashan & Induranga Kawishwara';
+var core_3 = require("@deneb-ui/core");
+Object.defineProperty(exports, "THEME_PALETTES", { enumerable: true, get: function () { return core_3.THEME_PALETTES; } });
+Object.defineProperty(exports, "GLOBAL_FONT_OPTIONS", { enumerable: true, get: function () { return core_3.GLOBAL_FONT_OPTIONS; } });
+Object.defineProperty(exports, "FONT_PAIRINGS", { enumerable: true, get: function () { return core_3.FONT_PAIRINGS; } });
+Object.defineProperty(exports, "isDarkColor", { enumerable: true, get: function () { return core_3.isDarkColor; } });
+Object.defineProperty(exports, "getAutoContrastTextColor", { enumerable: true, get: function () { return core_3.getAutoContrastTextColor; } });
+Object.defineProperty(exports, "toHexColor", { enumerable: true, get: function () { return core_3.toHexColor; } });
+Object.defineProperty(exports, "normalizeHexColor", { enumerable: true, get: function () { return core_3.normalizeHexColor; } });
+Object.defineProperty(exports, "parseVisualCustomization", { enumerable: true, get: function () { return core_3.parseVisualCustomization; } });
+Object.defineProperty(exports, "customizationToTheme", { enumerable: true, get: function () { return core_3.customizationToTheme; } });
+Object.defineProperty(exports, "mergeVisualCustomizationIntoTheme", { enumerable: true, get: function () { return core_3.mergeVisualCustomizationIntoTheme; } });
+Object.defineProperty(exports, "generateThemeVariables", { enumerable: true, get: function () { return core_3.generateThemeVariables; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.68",
+  "version": "2.0.69",
   "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -50,7 +50,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.68"
+    "@deneb-ui/core": "^2.0.69"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -68,6 +68,10 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./platform-contract": "./platform-contract.json"
+    "./platform-contract": "./platform-contract.json",
+    "./theme": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   }
 }