@deneb-ui/core 2.0.67 → 2.0.69

package/dist/index.d.ts

@@ -7,3 +7,4 @@ export * from './engine/domPatcher';
 export * from './engine/tokenResolver';
 export * from './engine/deepMerge';
 export * from './validation/styleSchemaValidator';
+export * from './theme';

package/dist/index.js

@@ -23,3 +23,4 @@ __exportStar(require("./engine/domPatcher"), exports);
 __exportStar(require("./engine/tokenResolver"), exports);
 __exportStar(require("./engine/deepMerge"), exports);
 __exportStar(require("./validation/styleSchemaValidator"), exports);
+__exportStar(require("./theme"), exports);

package/dist/theme/contrast.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Determines whether a color is considered "dark" based on perceived relative luminance.
+ * Uses standard ITU-R BT.601 formula (r*299 + g*587 + b*114) / 1000 < 130.
+ * Supports 3-digit and 6-digit hex values.
+ */
+export declare function isDarkColor(color?: unknown): boolean;
+/**
+ * Returns an auto-contrasting text color (default white for dark backgrounds, dark slate for light backgrounds).
+ */
+export declare function getAutoContrastTextColor(backgroundColor?: string, lightText?: string, darkText?: string): string;
+/**
+ * Normalizes a 3-digit or 6-digit hex color to canonical 6-digit lowercase hex.
+ * Returns fallback if invalid.
+ */
+export declare function toHexColor(color: string | undefined, fallback: string): string;
+/**
+ * Parses and returns a valid 6-char hex string, or null if invalid.
+ */
+export declare function normalizeHexColor(color: string | undefined): string | null;

package/dist/theme/contrast.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDarkColor = isDarkColor;
+exports.getAutoContrastTextColor = getAutoContrastTextColor;
+exports.toHexColor = toHexColor;
+exports.normalizeHexColor = normalizeHexColor;
+/**
+ * Determines whether a color is considered "dark" based on perceived relative luminance.
+ * Uses standard ITU-R BT.601 formula (r*299 + g*587 + b*114) / 1000 < 130.
+ * Supports 3-digit and 6-digit hex values.
+ */
+function isDarkColor(color) {
+    if (typeof color !== 'string' || !color)
+        return false;
+    const hex = color.trim().toLowerCase();
+    if (!/^#[0-9a-f]{3,6}$/i.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;
+}
+/**
+ * Returns an auto-contrasting text color (default white for dark backgrounds, dark slate for light backgrounds).
+ */
+function getAutoContrastTextColor(backgroundColor, lightText = '#ffffff', darkText = '#0f172a') {
+    return isDarkColor(backgroundColor) ? lightText : darkText;
+}
+/**
+ * Normalizes a 3-digit or 6-digit hex color to canonical 6-digit lowercase hex.
+ * Returns fallback if invalid.
+ */
+function toHexColor(color, fallback) {
+    if (!color)
+        return fallback;
+    const trimmed = color.trim();
+    if (/^#[0-9a-f]{6}$/i.test(trimmed))
+        return trimmed.toLowerCase();
+    if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
+        return `#${trimmed[1]}${trimmed[1]}${trimmed[2]}${trimmed[2]}${trimmed[3]}${trimmed[3]}`.toLowerCase();
+    }
+    return fallback;
+}
+/**
+ * Parses and returns a valid 6-char hex string, or null if invalid.
+ */
+function normalizeHexColor(color) {
+    if (!color)
+        return null;
+    const trimmed = color.trim();
+    if (/^#[0-9a-f]{6}$/i.test(trimmed))
+        return trimmed.toLowerCase();
+    if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
+        return `#${trimmed[1]}${trimmed[1]}${trimmed[2]}${trimmed[2]}${trimmed[3]}${trimmed[3]}`.toLowerCase();
+    }
+    return null;
+}

package/dist/theme/cssGenerator.d.ts

@@ -0,0 +1,6 @@
+import { TemplateThemeShape } from './types';
+/**
+ * Computes all canonical CSS variables for a theme, automatically resolving
+ * dark/light mode contrasts, button states, card surfaces, and input tokens.
+ */
+export declare function generateThemeVariables(theme?: TemplateThemeShape | null): Record<string, string>;

package/dist/theme/cssGenerator.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateThemeVariables = generateThemeVariables;
+const contrast_1 = require("./contrast");
+/**
+ * Computes all canonical CSS variables for a theme, automatically resolving
+ * dark/light mode contrasts, button states, card surfaces, and input tokens.
+ */
+function generateThemeVariables(theme) {
+    const customVars = {};
+    if (theme) {
+        for (const [key, val] of Object.entries(theme)) {
+            if (typeof val === 'string' || typeof val === 'number') {
+                const cssVarName = `--${key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()}`;
+                customVars[cssVarName] = String(val);
+            }
+        }
+    }
+    const isDark = (0, contrast_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 = theme?.borderColor ||
+        (isDark ? 'rgba(255, 255, 255, 0.1)' : '#e2e8f0');
+    const cardBg = theme?.cardBackgroundColor ||
+        theme?.surfaceColor ||
+        (isDark ? '#111a2e' : '#ffffff');
+    const cardBorder = isDark ? 'rgba(255, 255, 255, 0.09)' : borderColor;
+    const primaryColor = theme?.primaryColor || '#2563eb';
+    const secondaryColor = theme?.secondaryColor || (isDark ? '#1e293b' : '#0f172a');
+    const accentColor = theme?.accentColor || '#14b8a6';
+    const buttonBg = theme?.buttonBackgroundColor || primaryColor;
+    const autoButtonText = (0, contrast_1.getAutoContrastTextColor)(buttonBg);
+    const buttonText = theme?.buttonTextColor || autoButtonText;
+    const buttonSecondaryBg = isDark
+        ? 'rgba(255, 255, 255, 0.08)'
+        : secondaryColor && !(0, contrast_1.isDarkColor)(secondaryColor)
+            ? secondaryColor
+            : '#f1f5f9';
+    const buttonSecondaryText = isDark ? '#f8fafc' : '#0f172a';
+    return {
+        '--brand-color': primaryColor,
+        '--brand-primary': primaryColor,
+        '--primary-color': primaryColor,
+        '--color-primary': primaryColor,
+        '--brand-secondary': secondaryColor,
+        '--secondary-color': secondaryColor,
+        '--brand-accent': accentColor,
+        '--accent-color': accentColor,
+        '--page-background': bgColor,
+        '--page-bg': bgColor,
+        '--background': bgColor,
+        '--page-text': textColor,
+        '--heading-color': theme?.headingColor || (isDark ? '#ffffff' : secondaryColor),
+        '--color-heading': theme?.headingColor || (isDark ? '#ffffff' : secondaryColor),
+        '--muted-text': mutedColor,
+        '--text-muted': mutedColor,
+        '--color-text': textColor,
+        '--color-text-muted': mutedColor,
+        '--link-color': theme?.linkColor || primaryColor,
+        '--border-primary': borderColor,
+        '--border': borderColor,
+        '--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': theme?.headerBackgroundColor || (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,
+        '--hero-min-height': theme?.heroMinHeight || '72vh',
+        '--section-padding': theme?.sectionPadding || '5rem',
+        '--base-size': theme?.baseSize || '16px',
+        '--heading-font': theme?.headingFont || 'Inter, sans-serif',
+        '--body-font': theme?.bodyFont || 'Inter, sans-serif',
+        '--border-radius': theme?.borderRadius || '8px',
+        '--content-align': theme?.align || 'left',
+        ...customVars,
+    };
+}

package/dist/theme/fonts.d.ts

@@ -0,0 +1,4 @@
+import { FontPairing } from './types';
+export declare const GLOBAL_FONT_OPTIONS: readonly ["Inter", "Playfair Display", "DM Sans", "Poppins", "Montserrat", "Plus Jakarta Sans", "Georgia", "Editorial Serif"];
+export type GlobalFontOption = (typeof GLOBAL_FONT_OPTIONS)[number];
+export declare const FONT_PAIRINGS: FontPairing[];

package/dist/theme/fonts.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = void 0;
+exports.GLOBAL_FONT_OPTIONS = [
+    'Inter',
+    'Playfair Display',
+    'DM Sans',
+    'Poppins',
+    'Montserrat',
+    'Plus Jakarta Sans',
+    'Georgia',
+    'Editorial Serif',
+];
+exports.FONT_PAIRINGS = [
+    {
+        id: 'modern-clean',
+        name: 'Modern & Clean',
+        headingFont: 'Plus Jakarta Sans',
+        bodyFont: 'Inter',
+        description: 'Crisp, contemporary tech and SaaS feel with high readability',
+    },
+    {
+        id: 'editorial-luxury',
+        name: 'Editorial Luxury',
+        headingFont: 'Playfair Display',
+        bodyFont: 'Inter',
+        description: 'Elegant serif headline paired with neutral modern body text',
+    },
+    {
+        id: 'tech-forward',
+        name: 'Tech Forward',
+        headingFont: 'Inter',
+        bodyFont: 'Inter',
+        description: 'Minimalist, uniform sans-serif design system',
+    },
+    {
+        id: 'vibrant-lifestyle',
+        name: 'Vibrant Lifestyle',
+        headingFont: 'Poppins',
+        bodyFont: 'DM Sans',
+        description: 'Warm, geometric sans pairing suited for retail and wellness',
+    },
+    {
+        id: 'classic-prestige',
+        name: 'Classic Prestige',
+        headingFont: 'Montserrat',
+        bodyFont: 'Inter',
+        description: 'Authoritative, balanced typography for premium brands',
+    },
+];

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+export * from './types';
+export * from './contrast';
+export * from './palettes';
+export * from './fonts';
+export * from './parser';
+export * from './cssGenerator';

package/dist/theme/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./contrast"), exports);
+__exportStar(require("./palettes"), exports);
+__exportStar(require("./fonts"), exports);
+__exportStar(require("./parser"), exports);
+__exportStar(require("./cssGenerator"), exports);

package/dist/theme/palettes.d.ts

@@ -0,0 +1,2 @@
+import { ThemePalette } from './types';
+export declare const THEME_PALETTES: ThemePalette[];

package/dist/theme/palettes.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEME_PALETTES = void 0;
+exports.THEME_PALETTES = [
+    // --- Light Themes ---
+    {
+        id: 'classic-luxe',
+        name: 'Classic Luxe',
+        badge: 'Light • Warm Luxe',
+        mode: 'light',
+        primary: '#1e293b',
+        secondary: '#d97706',
+        accent: '#f59e0b',
+        background: '#fdfbf7',
+        card: '#ffffff',
+        text: '#1e293b',
+        muted: '#64748b',
+        buttonBg: '#1e293b',
+        buttonText: '#ffffff',
+    },
+    {
+        id: 'ocean-modern',
+        name: 'Ocean Modern',
+        badge: 'Light • Crisp Ocean',
+        mode: 'light',
+        primary: '#0284c7',
+        secondary: '#0369a1',
+        accent: '#38bdf8',
+        background: '#f8fafc',
+        card: '#ffffff',
+        text: '#0f172a',
+        muted: '#64748b',
+        buttonBg: '#0284c7',
+        buttonText: '#ffffff',
+    },
+    {
+        id: 'forest-emerald',
+        name: 'Forest Emerald',
+        badge: 'Light • Organic Green',
+        mode: 'light',
+        primary: '#065f46',
+        secondary: '#047857',
+        accent: '#10b981',
+        background: '#f0fdf4',
+        card: '#ffffff',
+        text: '#064e3b',
+        muted: '#475569',
+        buttonBg: '#065f46',
+        buttonText: '#ffffff',
+    },
+    {
+        id: 'warm-terracotta',
+        name: 'Warm Terracotta',
+        badge: 'Light • Artisanal',
+        mode: 'light',
+        primary: '#c2410c',
+        secondary: '#ea580c',
+        accent: '#f97316',
+        background: '#fffaf5',
+        card: '#ffffff',
+        text: '#431407',
+        muted: '#78350f',
+        buttonBg: '#c2410c',
+        buttonText: '#ffffff',
+    },
+    {
+        id: 'velvet-berry',
+        name: 'Velvet Berry',
+        badge: 'Light • Vibrant Chic',
+        mode: 'light',
+        primary: '#9f1239',
+        secondary: '#be123c',
+        accent: '#f43f5e',
+        background: '#fff5f7',
+        card: '#ffffff',
+        text: '#4c0519',
+        muted: '#881337',
+        buttonBg: '#9f1239',
+        buttonText: '#ffffff',
+    },
+    // --- Dark Themes ---
+    {
+        id: 'sleek-obsidian',
+        name: 'Sleek Obsidian',
+        badge: 'Dark • Obsidian',
+        mode: 'dark',
+        primary: '#60a5fa',
+        secondary: '#38bdf8',
+        accent: '#93c5fd',
+        background: '#090d16',
+        card: '#131b2e',
+        text: '#f8fafc',
+        muted: '#94a3b8',
+        buttonBg: '#60a5fa',
+        buttonText: '#090d16',
+    },
+    {
+        id: 'midnight-cyber',
+        name: 'Midnight Cyber',
+        badge: 'Dark • Neon Cyber',
+        mode: 'dark',
+        primary: '#818cf8',
+        secondary: '#6366f1',
+        accent: '#22d3ee',
+        background: '#09090b',
+        card: '#18181b',
+        text: '#f4f4f5',
+        muted: '#a1a1aa',
+        buttonBg: '#818cf8',
+        buttonText: '#09090b',
+    },
+    {
+        id: 'royal-gold-dark',
+        name: 'Royal Gold & Dark',
+        badge: 'Dark • Imperial Gold',
+        mode: 'dark',
+        primary: '#f59e0b',
+        secondary: '#d97706',
+        accent: '#fbbf24',
+        background: '#0c0a09',
+        card: '#1c1917',
+        text: '#f5f5f4',
+        muted: '#a8a29e',
+        buttonBg: '#f59e0b',
+        buttonText: '#0c0a09',
+    },
+    {
+        id: 'emerald-nocturne',
+        name: 'Emerald Nocturne',
+        badge: 'Dark • Deep Emerald',
+        mode: 'dark',
+        primary: '#34d399',
+        secondary: '#10b981',
+        accent: '#6ee7b7',
+        background: '#022c22',
+        card: '#064e3b',
+        text: '#ecfdf5',
+        muted: '#a7f3d0',
+        buttonBg: '#34d399',
+        buttonText: '#022c22',
+    },
+];

package/dist/theme/parser.d.ts

@@ -0,0 +1,4 @@
+import { VisualCustomization, TemplateThemeShape } from './types';
+export declare function parseVisualCustomization(value: unknown): VisualCustomization;
+export declare function customizationToTheme(customization: VisualCustomization): TemplateThemeShape;
+export declare function mergeVisualCustomizationIntoTheme(baseTheme: TemplateThemeShape | null | undefined, customization: unknown): TemplateThemeShape | null;

package/dist/theme/parser.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseVisualCustomization = parseVisualCustomization;
+exports.customizationToTheme = customizationToTheme;
+exports.mergeVisualCustomizationIntoTheme = mergeVisualCustomizationIntoTheme;
+function isPlainRecord(value) {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+function parseVisualCustomization(value) {
+    if (!isPlainRecord(value))
+        return { version: 1 };
+    return {
+        version: 1,
+        colors: isPlainRecord(value.colors)
+            ? value.colors
+            : undefined,
+        colorReplacements: isPlainRecord(value.colorReplacements)
+            ? value.colorReplacements
+            : undefined,
+        typography: isPlainRecord(value.typography)
+            ? value.typography
+            : undefined,
+        spacing: isPlainRecord(value.spacing)
+            ? value.spacing
+            : undefined,
+        layout: isPlainRecord(value.layout)
+            ? value.layout
+            : undefined,
+        components: isPlainRecord(value.components)
+            ? value.components
+            : undefined,
+        sections: isPlainRecord(value.sections)
+            ? value.sections
+            : undefined,
+        elementStyles: isPlainRecord(value.elementStyles)
+            ? value.elementStyles
+            : undefined,
+    };
+}
+function customizationToTheme(customization) {
+    const colors = customization.colors ?? {};
+    return {
+        designCustomizationVersion: 1,
+        colorReplacements: customization.colorReplacements,
+        primaryColor: colors.primary,
+        secondaryColor: colors.secondary,
+        accentColor: colors.accent,
+        backgroundColor: colors.background,
+        textColor: colors.text,
+        surfaceColor: colors.surface ?? colors.cardBackground,
+        surfaceAltColor: colors.surfaceAlt,
+        headingColor: colors.heading ?? colors.text,
+        mutedTextColor: colors.mutedText,
+        borderColor: colors.border,
+        headerBackgroundColor: colors.headerBackground,
+        footerBackgroundColor: colors.footerBackground,
+        cardBackgroundColor: colors.cardBackground ?? colors.surface,
+        buttonBackgroundColor: colors.buttonBackground,
+        buttonTextColor: colors.buttonText,
+        ...customization.typography,
+        ...customization.spacing,
+        ...customization.layout,
+        ...customization.components,
+        sections: customization.sections,
+        elementStyles: customization.elementStyles,
+    };
+}
+function mergeVisualCustomizationIntoTheme(baseTheme, customization) {
+    const parsed = parseVisualCustomization(customization);
+    const hasOverrides = [
+        parsed.colors,
+        parsed.colorReplacements,
+        parsed.typography,
+        parsed.spacing,
+        parsed.layout,
+        parsed.components,
+        parsed.sections,
+        parsed.elementStyles,
+    ].some((group) => Boolean(group &&
+        Object.values(group).some((value) => value !== undefined && value !== '')));
+    if (!hasOverrides)
+        return baseTheme ?? null;
+    return Object.fromEntries(Object.entries({
+        ...(baseTheme ?? {}),
+        ...customizationToTheme(parsed),
+    }).filter(([, value]) => value !== undefined));
+}

package/dist/theme/types.d.ts

@@ -0,0 +1,197 @@
+export interface VisualCustomizationColors {
+    primary?: string;
+    secondary?: string;
+    accent?: string;
+    background?: string;
+    text?: string;
+    surface?: string;
+    surfaceAlt?: string;
+    heading?: string;
+    mutedText?: string;
+    border?: string;
+    headerBackground?: string;
+    footerBackground?: string;
+    cardBackground?: string;
+    buttonBackground?: string;
+    buttonText?: string;
+}
+export interface VisualCustomizationTypography {
+    headingFont?: string;
+    bodyFont?: string;
+    baseSize?: string;
+    headingScale?: string;
+    bodyLineHeight?: string;
+    headingLineHeight?: string;
+    headingWeight?: string;
+    bodyWeight?: string;
+    letterSpacing?: string;
+}
+export interface VisualCustomizationSpacing {
+    heroMinHeight?: string;
+    sectionPadding?: string;
+    contentMaxWidth?: string;
+    containerPadding?: string;
+    sectionGap?: string;
+    elementGap?: string;
+    gridGap?: string;
+}
+export interface VisualCustomizationLayout {
+    textAlign?: string;
+    contentAlign?: string;
+    heroTextAlign?: string;
+    cardTextAlign?: string;
+    gridColumns?: string;
+}
+export interface VisualCustomizationComponents {
+    cardWidth?: string;
+    cardMinHeight?: string;
+    cardPadding?: string;
+    cardRadius?: string;
+    cardBorderWidth?: string;
+    cardShadow?: string;
+    buttonPadding?: string;
+    buttonRadius?: string;
+    buttonShadow?: string;
+    imageRadius?: string;
+    headerHeight?: string;
+}
+export interface VisualCustomizationSectionOverride {
+    backgroundColor?: string;
+    textColor?: string;
+    headingColor?: string;
+    minHeight?: string;
+    padding?: string;
+    contentMaxWidth?: string;
+    gap?: string;
+    textAlign?: string;
+    contentAlign?: string;
+    cardBackgroundColor?: string;
+    cardWidth?: string;
+    cardMinHeight?: string;
+    cardRadius?: string;
+    gridColumns?: string;
+    visible?: boolean;
+}
+export interface VisualCustomizationElementStyle {
+    fontFamily?: string;
+    fontSize?: string;
+    lineHeight?: string;
+    fontWeight?: string;
+    letterSpacing?: string;
+    color?: string;
+    backgroundColor?: string;
+    textAlign?: string;
+    width?: string;
+    height?: string;
+    minWidth?: string;
+    minHeight?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    marginTop?: string;
+    marginRight?: string;
+    marginBottom?: string;
+    marginLeft?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    borderWidth?: string;
+    borderStyle?: string;
+    borderColor?: string;
+    borderRadius?: string;
+    boxShadow?: string;
+    opacity?: string;
+    display?: string;
+    flexDirection?: string;
+    justifyContent?: string;
+    alignItems?: string;
+    gap?: string;
+}
+export interface VisualCustomization {
+    version: 1;
+    colors?: VisualCustomizationColors;
+    colorReplacements?: Record<string, string>;
+    typography?: VisualCustomizationTypography;
+    spacing?: VisualCustomizationSpacing;
+    layout?: VisualCustomizationLayout;
+    components?: VisualCustomizationComponents;
+    sections?: Record<string, VisualCustomizationSectionOverride>;
+    elementStyles?: Record<string, VisualCustomizationElementStyle>;
+}
+export interface TemplateThemeShape {
+    primaryColor?: string;
+    secondaryColor?: string;
+    accentColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    surfaceColor?: string;
+    surfaceAltColor?: string;
+    headingColor?: string;
+    mutedTextColor?: string;
+    borderColor?: string;
+    headerBackgroundColor?: string;
+    footerBackgroundColor?: string;
+    cardBackgroundColor?: string;
+    buttonBackgroundColor?: string;
+    buttonTextColor?: string;
+    headingFont?: string;
+    bodyFont?: string;
+    baseSize?: string;
+    headingScale?: string;
+    bodyLineHeight?: string;
+    headingLineHeight?: string;
+    headingWeight?: string;
+    bodyWeight?: string;
+    letterSpacing?: string;
+    heroMinHeight?: string;
+    sectionPadding?: string;
+    contentMaxWidth?: string;
+    containerPadding?: string;
+    sectionGap?: string;
+    elementGap?: string;
+    gridGap?: string;
+    textAlign?: string;
+    contentAlign?: string;
+    heroTextAlign?: string;
+    cardTextAlign?: string;
+    gridColumns?: string;
+    cardWidth?: string;
+    cardMinHeight?: string;
+    cardPadding?: string;
+    cardRadius?: string;
+    cardBorderWidth?: string;
+    cardShadow?: string;
+    buttonPadding?: string;
+    buttonRadius?: string;
+    buttonShadow?: string;
+    imageRadius?: string;
+    headerHeight?: string;
+    style?: string;
+    designCustomizationVersion?: number;
+    colorReplacements?: Record<string, string>;
+    sections?: Record<string, VisualCustomizationSectionOverride>;
+    elementStyles?: Record<string, VisualCustomizationElementStyle>;
+    [key: string]: unknown;
+}
+export interface ThemePalette {
+    id: string;
+    name: string;
+    badge: string;
+    mode: 'light' | 'dark';
+    primary: string;
+    secondary: string;
+    accent: string;
+    background: string;
+    card: string;
+    text: string;
+    muted: string;
+    buttonBg?: string;
+    buttonText?: string;
+}
+export interface FontPairing {
+    id: string;
+    name: string;
+    headingFont: string;
+    bodyFont: string;
+    description: string;
+}

package/dist/theme/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/core",
-  "version": "2.0.67",
+  "version": "2.0.69",
   "description": "Headless style engine for real-time Fivora visual editing — CSS variables, DOM patcher, and preview protocol.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,6 +12,10 @@
     "./install-fonts": {
       "types": "./dist/fonts/installProject.d.ts",
       "default": "./dist/fonts/installProject.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "default": "./dist/theme/index.js"
     }
   },
   "publishConfig": {
@@ -32,7 +36,7 @@
   ],
   "scripts": {
     "build": "tsc",
-    "test": "npm run build && node --test src/fonts/__tests__/fonts.test.cjs",
+    "test": "npm run build && node --test src/fonts/__tests__/fonts.test.cjs src/theme/__tests__/theme.test.cjs",
     "prepublishOnly": "npm run build"
   },
   "keywords": [