@kilivi/payloadcms-theme-management 2.0.0 → 2.2.0

package/dist/utils/themeUtils.js

@@ -5,7 +5,7 @@ import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
     const cssRules = [];
     const customization = config.customization;
     const themeSelector = config.theme ? `:root[data-theme='${config.theme}']` : ':root';
-    // Start root CSS rules
+    // ── :root block — CSS custom properties ─────────────────────────────────
     cssRules.push(`${themeSelector} {`);
     applyCustomizationRootRules(cssRules, customization);
     applyBorderRadiusRule(cssRules, config);
@@ -13,12 +13,17 @@ import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
     applySpacingRule(cssRules, config);
     applyAnimationRule(cssRules, config);
     applyTypographyRules(cssRules, config);
+    applyVisualEffectsCSSVars(cssRules, config);
+    applyComponentStyleCSSVars(cssRules, config);
     cssRules.push('}');
-    // Color mode specific overrides
+    // ── Element-level effect rules (outside :root) ──────────────────────────
+    applyTypographyBaseRules(cssRules, config);
+    applyEffectElementRules(cssRules, config);
+    // ── Color mode overrides ────────────────────────────────────────────────
     applyDarkModeOverrides(cssRules, config, customization, themeSelector);
-    // Animation level: none - respect prefers-reduced-motion
+    // ── Animation: none — respect prefers-reduced-motion ───────────────────
     applyReducedMotionOverride(cssRules, config);
-    // Custom CSS
+    // ── Custom CSS ──────────────────────────────────────────────────────────
     appendCustomCSS(cssRules, customization);
     return cssRules.join('\n');
 }
@@ -109,6 +114,10 @@ function applySpacingRule(rules, config) {
     const multiplier = spacingMultipliers[config.spacing] ?? '1';
     rules.push(`  --spacing-scale: ${multiplier};`);
     rules.push(`  --theme-spacing: ${multiplier};`);
+    // Ready-to-use rhythm tokens so the spacing choice is visible without extra math.
+    rules.push(`  --section-spacing: calc(clamp(3rem, 8vw, 6rem) * ${multiplier});`);
+    rules.push(`  --card-padding: calc(1.5rem * ${multiplier});`);
+    rules.push(`  --stack-gap: calc(1rem * ${multiplier});`);
 }
 function applyAnimationRule(rules, config) {
     if (!config.animationLevel) return;
@@ -128,7 +137,7 @@ function applyAnimationRule(rules, config) {
             easing: 'ease-out',
             scale: '1'
         },
-        full: {
+        high: {
             duration: '0.3s',
             easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
             scale: '1.2'
@@ -136,7 +145,6 @@ function applyAnimationRule(rules, config) {
     };
     const level = config.animationLevel;
     const settings = animationSettings[level] ?? animationSettings.medium;
-    if (!settings) return;
     rules.push(`  --animation-duration: ${settings.duration};`);
     rules.push(`  --animation-easing: ${settings.easing};`);
     rules.push(`  --animation-scale: ${settings.scale};`);
@@ -171,6 +179,466 @@ function applyTypographyRules(rules, config) {
             }
         });
     }
+    if (typography.headingWeight) {
+        rules.push(`  --typography-headingWeight: ${typography.headingWeight};`);
+    }
+    if (typography.headingLetterSpacing) {
+        rules.push(`  --typography-headingLetterSpacing: ${typography.headingLetterSpacing};`);
+    }
+    if (typography.headingTransform) {
+        rules.push(`  --typography-headingTransform: ${typography.headingTransform};`);
+    }
+}
+/**
+ * Zero-specificity base rules (`:where()`), so the chosen fonts show up on a site
+ * that has no typography CSS of its own, while any rule the site does have wins.
+ */ function applyTypographyBaseRules(rules, config) {
+    // Only when the editor chose typography explicitly: sites that never touched it
+    // keep rendering exactly as before.
+    if (!config.typography || !config.typographyOverridden) return;
+    rules.push('');
+    rules.push('/* ── Typography base (zero specificity — site CSS always wins) ── */');
+    rules.push(':where(html[data-theme]) :where(body) {');
+    rules.push('  font-family: var(--typography-fontFamily, system-ui, sans-serif);');
+    rules.push('  font-size: calc(var(--typography-baseFontSize, 16px) * var(--theme-font-scale, 1));');
+    rules.push('  line-height: var(--typography-lineHeight, 1.6);');
+    rules.push('}');
+    rules.push(':where(html[data-theme]) :where(h1, h2, h3, h4, h5, h6) {');
+    rules.push('  font-family: var(--typography-headingFamily, var(--typography-fontFamily, inherit));');
+    rules.push('  font-weight: var(--typography-headingWeight, var(--typography-fontWeights-bold, 700));');
+    rules.push('  letter-spacing: var(--typography-headingLetterSpacing, normal);');
+    rules.push('  text-transform: var(--typography-headingTransform, none);');
+    rules.push('}');
+}
+function getVE(config) {
+    return config.visualEffects ?? null;
+}
+function getCS(config) {
+    return config.componentStyles ?? null;
+}
+const SHADOW_MAP = {
+    none: 'none',
+    subtle: '0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
+    medium: '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)',
+    strong: '0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)',
+    dramatic: '0 25px 50px -12px rgba(0,0,0,0.25)'
+};
+const BLUR_PX_MAP = {
+    none: '0px',
+    slight: '4px',
+    medium: '8px',
+    strong: '16px',
+    heavy: '24px'
+};
+/**
+ * CSS custom properties for visual effects (emitted inside :root {})
+ */ function applyVisualEffectsCSSVars(rules, config) {
+    const ve = getVE(config);
+    if (!ve) return;
+    if (ve.effectStyle) rules.push(`  --effect-style: ${ve.effectStyle};`);
+    if (ve.shadowIntensity) {
+        rules.push(`  --shadow-intensity: ${ve.shadowIntensity};`);
+        const shadow = SHADOW_MAP[ve.shadowIntensity];
+        if (shadow) rules.push(`  --card-shadow: ${shadow};`);
+    }
+    if (ve.backdropBlur) {
+        const blurPx = BLUR_PX_MAP[ve.backdropBlur] ?? '0px';
+        rules.push(`  --backdrop-blur: ${blurPx};`);
+        // Token form (none|slight|...) — read by the client ThemeProvider to mirror
+        // the SSR data-backdrop-blur attribute.
+        rules.push(`  --backdrop-blur-level: ${ve.backdropBlur};`);
+    }
+    if (ve.borderStyle) rules.push(`  --border-style: ${ve.borderStyle};`);
+    if (ve.borderWidth) rules.push(`  --border-width: ${ve.borderWidth};`);
+    if (ve.glassOpacity != null) {
+        const opacity = Math.min(100, Math.max(0, ve.glassOpacity)) / 100;
+        rules.push(`  --glass-opacity: ${opacity.toFixed(2)};`);
+    }
+    // Always emit --card-bg-opacity and --card-backdrop-filter so .glass-card / .glass
+    // fallback rules in consumer globals.css can be overridden regardless of cached state.
+    // Glass effect: translucent card; all other effects: reset to opaque/none.
+    const opacity = ve.glassOpacity != null ? (ve.glassOpacity / 100).toFixed(2) : '0.60';
+    const blur = BLUR_PX_MAP[ve.backdropBlur ?? 'medium'] ?? '8px';
+    rules.push(`  --card-bg-opacity: ${opacity};`);
+    rules.push(`  --card-backdrop-filter: blur(${blur});`);
+    rules.push(`  --card-bg-opacity-non-glass: 1.0;`);
+    rules.push(`  --card-backdrop-filter-non-glass: none;`);
+}
+/**
+ * CSS custom properties for component styles (emitted inside :root {})
+ */ function applyComponentStyleCSSVars(rules, config) {
+    // Brand gradient composite — always emitted so gradient buttons / cards / text
+    // can reference a single token. Falls back to primary→accent when the editor
+    // has not set explicit gradient stops.
+    rules.push('  --gradient-brand: linear-gradient(' + 'var(--gradient-angle, 135deg), ' + 'var(--gradient-from, var(--primary)), ' + 'var(--gradient-via, var(--gradient-from, var(--primary))), ' + 'var(--gradient-to, var(--accent)));');
+    const cs = getCS(config);
+    if (!cs) return;
+    if (cs.buttonVariant) rules.push(`  --button-variant: ${cs.buttonVariant};`);
+    if (cs.buttonSize) rules.push(`  --button-size: ${cs.buttonSize};`);
+    if (cs.cardStyle) rules.push(`  --card-style: ${cs.cardStyle};`);
+    if (cs.cardHoverEffect) rules.push(`  --card-hover-effect: ${cs.cardHoverEffect};`);
+    if (cs.imageStyle) rules.push(`  --image-style: ${cs.imageStyle};`);
+    if (cs.navbarStyle) rules.push(`  --navbar-style: ${cs.navbarStyle};`);
+    if (cs.footerStyle) rules.push(`  --footer-style: ${cs.footerStyle};`);
+    if (cs.linkStyle) rules.push(`  --link-style: ${cs.linkStyle};`);
+    if (cs.enableScrollReveal != null) {
+        rules.push(`  --scroll-reveal: ${cs.enableScrollReveal ? '1' : '0'};`);
+    }
+    if (cs.enableHoverAnimations != null) {
+        rules.push(`  --hover-animations: ${cs.enableHoverAnimations ? '1' : '0'};`);
+    }
+}
+/**
+ * Element-level CSS overrides based on effect + component styles.
+ * These rules are emitted OUTSIDE the :root {} block so they target
+ * actual DOM elements. They rely on data-effect-style / data-card-style
+ * attributes set on <html> by layout.tsx (SSR) and ThemeProvider (client).
+ */ function applyEffectElementRules(rules, config) {
+    const ve = getVE(config);
+    const cs = getCS(config);
+    if (!ve && !cs) return;
+    rules.push('');
+    rules.push('/* ── Effect element overrides ── */');
+    // ── Card border style / width (effect rules below may still replace it) ──
+    // Skipped for the field defaults (solid / 1px) so existing cards are unchanged.
+    if (ve?.borderStyle && (ve.borderStyle !== 'solid' || (ve.borderWidth ?? '1px') !== '1px')) {
+        rules.push(`html[data-border-style] [data-card] {`);
+        rules.push(`  border-style: var(--border-style, solid);`);
+        rules.push(`  border-width: var(--border-width, 1px);`);
+        rules.push(`  border-color: var(--border);`);
+        rules.push(`}`);
+    }
+    // ── Glass effect ──────────────────────────────────────────────────────
+    // NOTE: All effect-style blocks are ALWAYS emitted regardless of the saved
+    // effectStyle value. The CSS selectors are scoped by html[data-effect-style='X']
+    // so only the matching data-attribute activates the rules. This means the CSS
+    // is always correct even when stale cached/draft data is served.
+    {
+        const opacity = ve?.glassOpacity != null ? ve.glassOpacity : 60;
+        const blur = BLUR_PX_MAP[ve?.backdropBlur ?? 'strong'] ?? '16px';
+        rules.push(`html[data-effect-style='glass'] [data-card],`);
+        rules.push(`html[data-effect-style='glass'] .glass-card,`);
+        rules.push(`html[data-effect-style='glass'] .glass {`);
+        rules.push(`  background-color: color-mix(in srgb, var(--card) ${opacity}%, transparent) !important;`);
+        rules.push(`  backdrop-filter: blur(${blur}) saturate(150%) !important;`);
+        rules.push(`  -webkit-backdrop-filter: blur(${blur}) saturate(150%) !important;`);
+        rules.push(`  border-color: color-mix(in srgb, var(--border) 40%, transparent) !important;`);
+        rules.push(`  box-shadow: 0 4px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.1) !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-effect-style='glass'] [data-card]:hover,`);
+        rules.push(`html[data-effect-style='glass'] .glass-card:hover,`);
+        rules.push(`html[data-effect-style='glass'] .glass:hover {`);
+        rules.push(`  background-color: color-mix(in srgb, var(--card) ${Math.min(opacity + 10, 90)}%, transparent) !important;`);
+        rules.push(`  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.15) !important;`);
+        rules.push(`}`);
+        // Apply the glass surface to the navbar container, but never to a <nav>
+        // nested inside a <header> (or <footer>) — otherwise the inner nav paints a
+        // second glass layer on top of the header's, producing a visible double-tint.
+        // A standalone top-level <nav> (header-less layouts) still gets the surface.
+        rules.push(`html[data-effect-style='glass'] header, html[data-effect-style='glass'] nav:not(header nav):not(footer nav) {`);
+        rules.push(`  background-color: color-mix(in srgb, var(--background) 65%, transparent) !important;`);
+        rules.push(`  backdrop-filter: blur(${blur}) saturate(150%) !important;`);
+        rules.push(`  -webkit-backdrop-filter: blur(${blur}) saturate(150%) !important;`);
+        rules.push(`}`);
+    }
+    // ── Neumorphic effect ──────────────────────────────────────────────────
+    {
+        rules.push(`html[data-effect-style='neumorphic'] [data-card],`);
+        rules.push(`html[data-effect-style='neumorphic'] .glass-card,`);
+        rules.push(`html[data-effect-style='neumorphic'] .glass {`);
+        rules.push(`  background-color: var(--background) !important;`);
+        rules.push(`  border: none !important;`);
+        rules.push(`  backdrop-filter: none !important;`);
+        rules.push(`  -webkit-backdrop-filter: none !important;`);
+        rules.push(`  box-shadow: 6px 6px 12px rgba(0,0,0,0.12), -6px -6px 12px rgba(255,255,255,0.75) !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-effect-style='neumorphic'] [data-card]:hover,`);
+        rules.push(`html[data-effect-style='neumorphic'] .glass-card:hover,`);
+        rules.push(`html[data-effect-style='neumorphic'] .glass:hover {`);
+        rules.push(`  box-shadow: 8px 8px 16px rgba(0,0,0,0.15), -8px -8px 16px rgba(255,255,255,0.85) !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-effect-style='neumorphic'][data-theme-mode='dark'] [data-card],`);
+        rules.push(`html[data-effect-style='neumorphic'].dark [data-card],`);
+        rules.push(`html[data-effect-style='neumorphic'][data-theme-mode='dark'] .glass-card,`);
+        rules.push(`html[data-effect-style='neumorphic'].dark .glass-card {`);
+        rules.push(`  box-shadow: 6px 6px 12px rgba(0,0,0,0.4), -6px -6px 12px rgba(255,255,255,0.04) !important;`);
+        rules.push(`}`);
+    }
+    // ── Clay effect ────────────────────────────────────────────────────────
+    {
+        rules.push(`html[data-effect-style='clay'] [data-card],`);
+        rules.push(`html[data-effect-style='clay'] .glass-card,`);
+        rules.push(`html[data-effect-style='clay'] .glass {`);
+        rules.push(`  border-radius: var(--radius-large, 1.5rem) !important;`);
+        rules.push(`  box-shadow: 4px 4px 0px rgba(0,0,0,0.22), 0 8px 20px rgba(0,0,0,0.08) !important;`);
+        rules.push(`  border: none !important;`);
+        rules.push(`  backdrop-filter: none !important;`);
+        rules.push(`  -webkit-backdrop-filter: none !important;`);
+        rules.push(`  transition: transform 200ms ease, box-shadow 200ms ease !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-effect-style='clay'] [data-card]:hover,`);
+        rules.push(`html[data-effect-style='clay'] .glass-card:hover,`);
+        rules.push(`html[data-effect-style='clay'] .glass:hover {`);
+        rules.push(`  transform: translateY(-3px) !important;`);
+        rules.push(`  box-shadow: 6px 6px 0px rgba(0,0,0,0.25), 0 12px 24px rgba(0,0,0,0.12) !important;`);
+        rules.push(`}`);
+    }
+    // ── Elevated effect ────────────────────────────────────────────────────
+    {
+        const shadow = ve?.shadowIntensity ? SHADOW_MAP[ve.shadowIntensity] ?? SHADOW_MAP.medium : SHADOW_MAP.medium;
+        rules.push(`html[data-effect-style='elevated'] [data-card],`);
+        rules.push(`html[data-effect-style='elevated'] .glass-card,`);
+        rules.push(`html[data-effect-style='elevated'] .glass {`);
+        rules.push(`  box-shadow: ${shadow} !important;`);
+        rules.push(`  border: none !important;`);
+        rules.push(`  backdrop-filter: none !important;`);
+        rules.push(`  -webkit-backdrop-filter: none !important;`);
+        rules.push(`  transition: box-shadow 200ms ease, transform 200ms ease !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-effect-style='elevated'] [data-card]:hover,`);
+        rules.push(`html[data-effect-style='elevated'] .glass-card:hover,`);
+        rules.push(`html[data-effect-style='elevated'] .glass:hover {`);
+        rules.push(`  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1) !important;`);
+        rules.push(`  transform: translateY(-2px) !important;`);
+        rules.push(`}`);
+    }
+    // ── Flat effect ────────────────────────────────────────────────────────
+    {
+        rules.push(`html[data-effect-style='flat'] [data-card],`);
+        rules.push(`html[data-effect-style='flat'] .glass-card,`);
+        rules.push(`html[data-effect-style='flat'] .glass {`);
+        rules.push(`  box-shadow: none !important;`);
+        rules.push(`  backdrop-filter: none !important;`);
+        rules.push(`  -webkit-backdrop-filter: none !important;`);
+        rules.push(`}`);
+    }
+    // ── Border overrides ───────────────────────────────────────────────────
+    if (ve?.borderWidth && ve.borderWidth !== '1px' && ve.borderWidth !== '0px') {
+        rules.push(`html[data-border-width='${ve.borderWidth}'] [data-card],`);
+        rules.push(`html[data-border-width='${ve.borderWidth}'] .glass-card {`);
+        rules.push(`  border-width: ${ve.borderWidth} !important;`);
+        rules.push(`}`);
+    }
+    // ── Card style: bordered (used by brutalism etc.) ──────────────────────
+    if (cs?.cardStyle === 'bordered') {
+        const bw = ve?.borderWidth ?? '2px';
+        rules.push(`html[data-card-style='bordered'] [data-card],`);
+        rules.push(`html[data-card-style='bordered'] .glass-card {`);
+        rules.push(`  border-width: ${bw} !important;`);
+        rules.push(`  border-style: solid !important;`);
+        rules.push(`  border-color: var(--foreground) !important;`);
+        rules.push(`  box-shadow: 4px 4px 0 var(--foreground) !important;`);
+        rules.push(`  border-radius: 0 !important;`);
+        rules.push(`  background-color: var(--card) !important;`);
+        rules.push(`  backdrop-filter: none !important;`);
+        rules.push(`  -webkit-backdrop-filter: none !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-card-style='bordered'] [data-card]:hover,`);
+        rules.push(`html[data-card-style='bordered'] .glass-card:hover {`);
+        rules.push(`  box-shadow: 6px 6px 0 var(--foreground) !important;`);
+        rules.push(`  transform: translate(-2px, -2px) !important;`);
+        rules.push(`}`);
+    }
+    // ── Card style: gradient-border ────────────────────────────────────────
+    if (cs?.cardStyle === 'gradient-border') {
+        rules.push(`html[data-card-style='gradient-border'] [data-card],`);
+        rules.push(`html[data-card-style='gradient-border'] .glass-card {`);
+        rules.push(`  border-image: var(--gradient-brand) 1 !important;`);
+        rules.push(`  border-width: 2px !important;`);
+        rules.push(`  border-style: solid !important;`);
+        rules.push(`}`);
+    }
+    // ── Navbar styles ──────────────────────────────────────────────────────
+    const navbarStyle = cs?.navbarStyle;
+    if (navbarStyle === 'blur') {
+        rules.push(`html[data-navbar-style='blur'] header {`);
+        rules.push(`  background-color: color-mix(in srgb, var(--background) 70%, transparent) !important;`);
+        rules.push(`  backdrop-filter: blur(12px) !important;`);
+        rules.push(`  -webkit-backdrop-filter: blur(12px) !important;`);
+        rules.push(`}`);
+    } else if (navbarStyle === 'transparent') {
+        rules.push(`html[data-navbar-style='transparent'] header {`);
+        rules.push(`  background-color: transparent !important;`);
+        rules.push(`  border-bottom-color: transparent !important;`);
+        rules.push(`}`);
+    } else if (navbarStyle === 'floating') {
+        rules.push(`html[data-navbar-style='floating'] header {`);
+        rules.push(`  margin: 12px 16px 0;`);
+        rules.push(`  border-radius: var(--radius-large, 1.5rem);`);
+        rules.push(`  border: 1px solid var(--border);`);
+        rules.push(`  box-shadow: 0 4px 24px rgba(0,0,0,0.08);`);
+        rules.push(`}`);
+    } else if (navbarStyle === 'minimal') {
+        rules.push(`html[data-navbar-style='minimal'] header {`);
+        rules.push(`  border-bottom-color: transparent !important;`);
+        rules.push(`  box-shadow: none !important;`);
+        rules.push(`}`);
+    }
+    // ── Button variant: brutal ─────────────────────────────────────────────
+    if (cs?.buttonVariant === 'brutal') {
+        rules.push(`html[data-button-variant='brutal'] [data-btn] {`);
+        rules.push(`  border: 2px solid var(--foreground) !important;`);
+        rules.push(`  border-radius: 0 !important;`);
+        rules.push(`  box-shadow: 3px 3px 0 var(--foreground) !important;`);
+        rules.push(`  transition: box-shadow 100ms ease, transform 100ms ease !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-button-variant='brutal'] [data-btn]:hover {`);
+        rules.push(`  box-shadow: 5px 5px 0 var(--foreground) !important;`);
+        rules.push(`  transform: translate(-2px, -2px) !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-button-variant='brutal'] [data-btn]:active {`);
+        rules.push(`  box-shadow: 1px 1px 0 var(--foreground) !important;`);
+        rules.push(`  transform: translate(2px, 2px) !important;`);
+        rules.push(`}`);
+    }
+    // ── Button variant: pill ───────────────────────────────────────────────
+    if (cs?.buttonVariant === 'pill') {
+        rules.push(`html[data-button-variant='pill'] [data-btn] {`);
+        rules.push(`  border-radius: 9999px !important;`);
+        rules.push(`}`);
+    }
+    // ── Button variants: outlined / ghost ──────────────────────────────────
+    if (cs?.buttonVariant === 'outlined') {
+        rules.push(`html[data-button-variant='outlined'] [data-btn] {`);
+        rules.push(`  background-color: transparent !important;`);
+        rules.push(`  color: var(--primary) !important;`);
+        rules.push(`  border: 1.5px solid var(--primary) !important;`);
+        rules.push(`  box-shadow: none !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-button-variant='outlined'] [data-btn]:hover {`);
+        rules.push(`  background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;`);
+        rules.push(`}`);
+    } else if (cs?.buttonVariant === 'ghost') {
+        rules.push(`html[data-button-variant='ghost'] [data-btn] {`);
+        rules.push(`  background-color: transparent !important;`);
+        rules.push(`  color: var(--primary) !important;`);
+        rules.push(`  border-color: transparent !important;`);
+        rules.push(`  box-shadow: none !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-button-variant='ghost'] [data-btn]:hover {`);
+        rules.push(`  background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;`);
+        rules.push(`}`);
+    }
+    // ── Card hover effects ─────────────────────────────────────────────────
+    if (cs?.cardHoverEffect === 'lift') {
+        rules.push(`html[data-card-hover='lift'] [data-card]:hover,`);
+        rules.push(`html[data-card-hover='lift'] .glass-card:hover {`);
+        rules.push(`  transform: translateY(-6px) !important;`);
+        rules.push(`  box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;`);
+        rules.push(`}`);
+    } else if (cs?.cardHoverEffect === 'scale') {
+        rules.push(`html[data-card-hover='scale'] [data-card]:hover,`);
+        rules.push(`html[data-card-hover='scale'] .glass-card:hover {`);
+        rules.push(`  transform: scale(1.02) !important;`);
+        rules.push(`}`);
+    } else if (cs?.cardHoverEffect === 'glow') {
+        rules.push(`html[data-card-hover='glow'] [data-card]:hover,`);
+        rules.push(`html[data-card-hover='glow'] .glass-card:hover {`);
+        rules.push(`  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent), 0 8px 32px rgba(0,0,0,0.1) !important;`);
+        rules.push(`}`);
+    } else if (cs?.cardHoverEffect === 'tilt') {
+        rules.push(`html[data-card-hover='tilt'] [data-card],`);
+        rules.push(`html[data-card-hover='tilt'] .glass-card {`);
+        rules.push(`  transition: transform 200ms ease !important;`);
+        rules.push(`}`);
+        rules.push(`html[data-card-hover='tilt'] [data-card]:hover,`);
+        rules.push(`html[data-card-hover='tilt'] .glass-card:hover {`);
+        rules.push(`  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) !important;`);
+        rules.push(`}`);
+    }
+    // ── Button variant: gradient ───────────────────────────────────────────
+    if (cs?.buttonVariant === 'gradient') {
+        rules.push(`html[data-button-variant='gradient'] [data-btn] {`);
+        rules.push(`  background-image: var(--gradient-brand) !important;`);
+        rules.push(`  background-color: transparent !important;`);
+        rules.push(`  color: var(--primary-foreground) !important;`);
+        rules.push(`  border: none !important;`);
+        rules.push(`}`);
+    }
+    // ── Button sizes ────────────────────────────────────────────────────────
+    if (cs?.buttonSize) {
+        const sizeMap = {
+            small: {
+                py: '0.375rem',
+                px: '0.75rem',
+                fs: '0.8125rem'
+            },
+            medium: {
+                py: '0.5rem',
+                px: '1rem',
+                fs: '0.875rem'
+            },
+            large: {
+                py: '0.625rem',
+                px: '1.5rem',
+                fs: '1rem'
+            },
+            xl: {
+                py: '0.875rem',
+                px: '2rem',
+                fs: '1.125rem'
+            }
+        };
+        const s = sizeMap[cs.buttonSize] ?? sizeMap.medium;
+        rules.push(`html[data-button-size='${cs.buttonSize}'] [data-btn] {`);
+        rules.push(`  padding: ${s.py} ${s.px} !important;`);
+        rules.push(`  font-size: ${s.fs} !important;`);
+        rules.push(`}`);
+    }
+    // ── Image styles ───────────────────────────────────────────────────────
+    // Target both [data-img] attributes and the .themed-image helper class.
+    if (cs?.imageStyle && cs.imageStyle !== 'default') {
+        const style = cs.imageStyle;
+        const sel = `html[data-image-style='${style}'] [data-img], html[data-image-style='${style}'] .themed-image`;
+        const hoverSel = `html[data-image-style='${style}'] [data-img]:hover, html[data-image-style='${style}'] .themed-image:hover`;
+        if (style === 'rounded') {
+            rules.push(`${sel} { border-radius: var(--radius-large, 1rem) !important; overflow: hidden; }`);
+        } else if (style === 'circle') {
+            rules.push(`${sel} { border-radius: 9999px !important; aspect-ratio: 1 / 1; object-fit: cover; }`);
+        } else if (style === 'grayscale') {
+            rules.push(`${sel} { filter: grayscale(1); transition: filter 300ms ease; }`);
+            rules.push(`${hoverSel} { filter: grayscale(0); }`);
+        } else if (style === 'duotone') {
+            rules.push(`${sel} { filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; }`);
+        } else if (style === 'vignette') {
+            rules.push(`${sel} { box-shadow: inset 0 0 60px rgba(0,0,0,0.45); }`);
+        } else if (style === 'polaroid') {
+            rules.push(`${sel} { background: #fff; padding: 10px 10px 36px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); border-radius: 2px; }`);
+        }
+    }
+    // ── Link styles ─────────────────────────────────────────────────────────
+    if (cs?.linkStyle) {
+        const style = cs.linkStyle;
+        const sel = `html[data-link-style='${style}'] [data-link], html[data-link-style='${style}'] .themed-link`;
+        const hoverSel = `html[data-link-style='${style}'] [data-link]:hover, html[data-link-style='${style}'] .themed-link:hover`;
+        if (style === 'underline') {
+            rules.push(`${sel} { text-decoration: underline; text-underline-offset: 0.15em; }`);
+        } else if (style === 'none') {
+            rules.push(`${sel} { text-decoration: none; }`);
+        } else if (style === 'underline-hover') {
+            rules.push(`${sel} { text-decoration: none; }`);
+            rules.push(`${hoverSel} { text-decoration: underline; text-underline-offset: 0.15em; }`);
+        } else if (style === 'highlight') {
+            rules.push(`${sel} { text-decoration: none; background-image: linear-gradient(transparent 60%, color-mix(in srgb, var(--primary) 28%, transparent) 0); }`);
+        } else if (style === 'animated') {
+            rules.push(`${sel} { text-decoration: none; background-image: var(--gradient-brand); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 300ms ease; }`);
+            rules.push(`${hoverSel} { background-size: 100% 2px; }`);
+        }
+    }
+    // ── Footer styles ─────────────────────────────────────────────────────────
+    if (cs?.footerStyle === 'dark') {
+        rules.push(`html[data-footer-style='dark'] footer { background-color: var(--foreground) !important; color: var(--background) !important; }`);
+    } else if (cs?.footerStyle === 'full-color') {
+        rules.push(`html[data-footer-style='full-color'] footer { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }`);
+    } else if (cs?.footerStyle === 'gradient-top') {
+        rules.push(`html[data-footer-style='gradient-top'] footer { border-top: 3px solid transparent; border-image: var(--gradient-brand) 1; }`);
+    } else if (cs?.footerStyle === 'minimal') {
+        rules.push(`html[data-footer-style='minimal'] footer { background: transparent !important; border-top: 1px solid var(--border) !important; box-shadow: none !important; }`);
+    }
+    // ── Hover animations off — neutralise interactive transforms ──────────────
+    if (cs?.enableHoverAnimations === false) {
+        rules.push(`html[data-hover-animations='off'] [data-card]:hover, html[data-hover-animations='off'] .glass-card:hover, html[data-hover-animations='off'] [data-btn]:hover { transform: none !important; }`);
+    }
 }
 function applyDarkModeOverrides(rules, config, customization, selector) {
     if (config.colorMode !== 'dark' && config.colorMode !== 'auto') return;