@kilivi/payloadcms-theme-management 2.1.0 → 2.2.0

package/dist/style-presets.js

@@ -1,124 +1,249 @@
 /**
- * Style presets — define visual style (effects, component defaults, layout)
- * WITHOUT touching color palettes.
+ * Style presets — define the visual style (type, rhythm, effects, component
+ * styles) WITHOUT touching colour palettes.
  *
- * A user can combine any color preset (ThemePreset) with any style preset (StylePreset).
- */ export const allStylePresets = [
+ * A user can combine any colour preset (ThemePreset) with any style preset
+ * (StylePreset). Every value here must be a valid option of the matching admin
+ * field (see `themeConfigurationField.ts` and `constants/themeFonts.ts`),
+ * otherwise the document cannot be saved — `tests/unit/stylePresets.test.ts`
+ * guards this.
+ */ const LEGACY_STYLE_VALUES = {
+    spacing: {
+        spacious: 'comfortable'
+    },
+    'typography.baseFontSize': {
+        small: '15',
+        medium: '16',
+        large: '18'
+    },
+    'typography.lineHeight': {
+        compact: '1.4',
+        normal: '1.6',
+        relaxed: '1.8'
+    },
+    'typography.bodyFont': {
+        'Source Sans Pro': 'Source Sans 3',
+        'Helvetica Neue': 'helvetica'
+    },
+    'typography.headingFont': {
+        'Source Sans Pro': 'Source Sans 3',
+        'Helvetica Neue': 'helvetica'
+    }
+};
+/** Maps values from older StylePreset definitions onto the current field options. */ export function normalizeStylePresetValue(path, value) {
+    return typeof value === 'string' ? LEGACY_STYLE_VALUES[path]?.[value] ?? value : value;
+}
+export const allStylePresets = [
     // ─── Classic styles ───────────────────────────────────────────────────────
     {
-        name: 'brutalism',
+        name: 'swiss',
         label: {
-            en: 'Brutalism',
-            cs: 'Brutalismus'
+            en: 'Swiss / Clean',
+            cs: 'Švýcarský / čistý'
         },
         description: {
-            en: 'Raw, anti-aesthetic design. Thick borders, harsh shadows, zero roundness.',
-            cs: 'Surový, anti-estetický design. Silné okraje, tvrdé stíny, žádné zaoblení.'
+            en: 'Typographic clarity. Square corners, outlined buttons, strict grid, no decoration.',
+            cs: 'Typografická jasnost. Ostré rohy, obrysová tlačítka, přísná mřížka, žádná dekorace.'
         },
         category: 'classic',
         borderRadius: 'none',
-        animationLevel: 'none',
-        spacing: 'spacious',
+        animationLevel: 'reduced',
+        spacing: 'comfortable',
         typography: {
-            bodyFont: 'Space Mono',
-            headingFont: 'Space Mono',
-            baseFontSize: 'medium',
-            lineHeight: 'compact',
-            letterSpacing: 'normal',
+            bodyFont: 'helvetica',
+            headingFont: 'helvetica',
+            baseFontSize: '16',
+            lineHeight: '1.5',
+            letterSpacing: 'tight',
             headingWeight: '700'
         },
         visualEffects: {
-            effectStyle: 'elevated',
-            shadowIntensity: 'dramatic',
+            effectStyle: 'flat',
+            shadowIntensity: 'none',
+            backdropBlur: 'none',
             borderStyle: 'solid',
-            borderWidth: '3px'
+            borderWidth: '1px'
         },
         componentStyles: {
-            buttonVariant: 'brutal',
-            cardStyle: 'bordered',
-            cardHoverEffect: 'shadow',
-            navbarStyle: 'solid'
+            buttonVariant: 'outlined',
+            buttonSize: 'medium',
+            cardStyle: 'flat',
+            cardHoverEffect: 'none',
+            navbarStyle: 'minimal',
+            footerStyle: 'minimal',
+            imageStyle: 'default',
+            linkStyle: 'underline'
         }
     },
     {
-        name: 'swiss',
+        name: 'editorial',
         label: {
-            en: 'Swiss / Clean',
-            cs: 'Švýcarský / čistý'
+            en: 'Editorial / Magazine',
+            cs: 'Redakční / časopis'
         },
         description: {
-            en: 'Typographic clarity. No radius, outlined elements, strict grid, zero decoration.',
-            cs: 'Typografická jasnost. Žádné zaoblení, obrysové prvky, přísný grid, nulová dekorace.'
+            en: 'Serif headings, generous line spacing, ink-on-paper feel. Typography is the hero.',
+            cs: 'Patkové nadpisy, velké řádkování, pocit tisku na papíře. Hlavní roli hraje typografie.'
         },
         category: 'classic',
         borderRadius: 'none',
         animationLevel: 'reduced',
-        spacing: 'spacious',
+        spacing: 'comfortable',
         typography: {
-            bodyFont: 'Helvetica Neue, Arial, sans-serif',
-            headingFont: 'Helvetica Neue, Arial, sans-serif',
-            baseFontSize: 'medium',
-            lineHeight: 'normal',
+            bodyFont: 'Lora',
+            headingFont: 'Playfair Display',
+            baseFontSize: '18',
+            lineHeight: '1.8',
             letterSpacing: 'tight',
             headingWeight: '700'
         },
         visualEffects: {
             effectStyle: 'flat',
             shadowIntensity: 'none',
+            backdropBlur: 'none',
             borderStyle: 'solid',
             borderWidth: '1px'
         },
         componentStyles: {
             buttonVariant: 'outlined',
+            buttonSize: 'medium',
             cardStyle: 'flat',
             cardHoverEffect: 'none',
-            navbarStyle: 'minimal'
+            navbarStyle: 'minimal',
+            footerStyle: 'minimal',
+            imageStyle: 'default',
+            linkStyle: 'underline'
         }
     },
     {
-        name: 'flat-design',
+        name: 'luxury',
         label: {
-            en: 'Flat Design',
-            cs: 'Plochý design'
+            en: 'Luxury / Boutique',
+            cs: 'Luxusní / butik'
         },
         description: {
-            en: 'No shadows, no depth. Clean colours, simple icons, purely functional UI.',
-            cs: 'Bez stínů, bez hloubky. Čisté barvy, jednoduché ikony, čistě funkční UI.'
+            en: 'High-contrast display serif, light airy text, wide tracking and black-and-white imagery.',
+            cs: 'Kontrastní výrazné patkové písmo, lehký vzdušný text, široké prostrkání a černobílé fotky.'
+        },
+        category: 'classic',
+        borderRadius: 'none',
+        animationLevel: 'reduced',
+        spacing: 'comfortable',
+        typography: {
+            bodyFont: 'Manrope',
+            headingFont: 'DM Serif Display',
+            baseFontSize: '16',
+            lineHeight: '1.8',
+            letterSpacing: 'wide',
+            headingWeight: '400'
+        },
+        visualEffects: {
+            effectStyle: 'flat',
+            shadowIntensity: 'none',
+            backdropBlur: 'none',
+            borderStyle: 'solid',
+            borderWidth: '1px'
+        },
+        componentStyles: {
+            buttonVariant: 'outlined',
+            buttonSize: 'large',
+            cardStyle: 'flat',
+            cardHoverEffect: 'none',
+            navbarStyle: 'transparent',
+            footerStyle: 'dark',
+            imageStyle: 'grayscale',
+            linkStyle: 'animated'
+        }
+    },
+    {
+        name: 'art-deco',
+        label: {
+            en: 'Art Deco',
+            cs: 'Art deco'
+        },
+        description: {
+            en: 'Capitalised serif headings, double rules and a strong vertical rhythm.',
+            cs: 'Patkové nadpisy verzálkami, dvojité linky a silný vertikální rytmus.'
+        },
+        category: 'classic',
+        borderRadius: 'none',
+        animationLevel: 'reduced',
+        spacing: 'comfortable',
+        typography: {
+            bodyFont: 'Libre Baskerville',
+            headingFont: 'Cormorant Garamond',
+            baseFontSize: '17',
+            lineHeight: '1.7',
+            letterSpacing: 'wider',
+            headingWeight: '600'
+        },
+        visualEffects: {
+            effectStyle: 'flat',
+            shadowIntensity: 'none',
+            backdropBlur: 'none',
+            borderStyle: 'double',
+            borderWidth: '4px'
+        },
+        componentStyles: {
+            buttonVariant: 'outlined',
+            buttonSize: 'large',
+            cardStyle: 'flat',
+            cardHoverEffect: 'none',
+            navbarStyle: 'solid',
+            footerStyle: 'dark',
+            imageStyle: 'vignette',
+            linkStyle: 'underline'
+        }
+    },
+    {
+        name: 'corporate',
+        label: {
+            en: 'Corporate / Professional',
+            cs: 'Firemní / profesionální'
+        },
+        description: {
+            en: 'Trustworthy and calm. Clean sans-serif, soft shadows, solid buttons.',
+            cs: 'Důvěryhodný a klidný. Čisté bezpatkové písmo, jemné stíny, plná tlačítka.'
         },
         category: 'classic',
         borderRadius: 'small',
         animationLevel: 'reduced',
         spacing: 'medium',
         typography: {
-            bodyFont: 'Inter',
-            headingFont: 'Inter',
-            baseFontSize: 'medium',
-            lineHeight: 'normal',
+            bodyFont: 'Source Sans 3',
+            headingFont: 'Source Sans 3',
+            baseFontSize: '16',
+            lineHeight: '1.6',
             letterSpacing: 'normal',
             headingWeight: '600'
         },
         visualEffects: {
-            effectStyle: 'flat',
-            shadowIntensity: 'none',
-            borderStyle: 'none',
-            borderWidth: '0px'
+            effectStyle: 'elevated',
+            shadowIntensity: 'subtle',
+            backdropBlur: 'none',
+            borderStyle: 'solid',
+            borderWidth: '1px'
         },
         componentStyles: {
             buttonVariant: 'filled',
-            cardStyle: 'flat',
-            cardHoverEffect: 'scale',
-            navbarStyle: 'solid'
+            buttonSize: 'medium',
+            cardStyle: 'elevated',
+            cardHoverEffect: 'lift',
+            navbarStyle: 'solid',
+            footerStyle: 'standard',
+            imageStyle: 'rounded',
+            linkStyle: 'underline-hover'
         }
     },
     {
         name: 'material',
         label: {
             en: 'Material / Elevated',
-            cs: 'Material / Vyvýšený'
+            cs: 'Material / vyvýšený'
         },
         description: {
-            en: 'Google Material style — cards with shadows, layered surfaces, subtle depth.',
-            cs: 'Google Material styl — karty se stíny, vrstvené povrchy, jemná hloubka.'
+            en: 'Layered surfaces with clear shadows, medium rounding and lively motion.',
+            cs: 'Vrstvené plochy s výraznými stíny, středním zaoblením a živým pohybem.'
         },
         category: 'classic',
         borderRadius: 'medium',
@@ -127,22 +252,27 @@
         typography: {
             bodyFont: 'Roboto',
             headingFont: 'Roboto',
-            baseFontSize: 'medium',
-            lineHeight: 'normal',
+            baseFontSize: '16',
+            lineHeight: '1.5',
             letterSpacing: 'normal',
             headingWeight: '500'
         },
         visualEffects: {
             effectStyle: 'elevated',
             shadowIntensity: 'medium',
+            backdropBlur: 'none',
             borderStyle: 'none',
             borderWidth: '0px'
         },
         componentStyles: {
             buttonVariant: 'filled',
+            buttonSize: 'medium',
             cardStyle: 'elevated',
             cardHoverEffect: 'lift',
-            navbarStyle: 'solid'
+            navbarStyle: 'solid',
+            footerStyle: 'standard',
+            imageStyle: 'rounded',
+            linkStyle: 'underline-hover'
         }
     },
     {
@@ -152,183 +282,128 @@
             cs: 'Minimalismus'
         },
         description: {
-            en: 'Maximum whitespace, near-invisible borders, thin type. Only what is necessary.',
-            cs: 'Maximální bílý prostor, téměř neviditelné okraje, tenké písmo. Jen to nezbytné.'
+            en: 'Maximum whitespace, thin headings, ghost buttons. Only what is necessary.',
+            cs: 'Maximum volného prostoru, tenké nadpisy, průhledná tlačítka. Jen to nezbytné.'
         },
         category: 'classic',
         borderRadius: 'small',
         animationLevel: 'reduced',
-        spacing: 'spacious',
+        spacing: 'comfortable',
         typography: {
             bodyFont: 'DM Sans',
             headingFont: 'DM Sans',
-            baseFontSize: 'medium',
-            lineHeight: 'relaxed',
+            baseFontSize: '17',
+            lineHeight: '1.8',
             letterSpacing: 'wide',
             headingWeight: '300'
         },
         visualEffects: {
             effectStyle: 'flat',
             shadowIntensity: 'none',
+            backdropBlur: 'none',
             borderStyle: 'solid',
             borderWidth: '1px'
         },
         componentStyles: {
             buttonVariant: 'ghost',
+            buttonSize: 'small',
             cardStyle: 'flat',
             cardHoverEffect: 'none',
-            navbarStyle: 'minimal'
+            navbarStyle: 'minimal',
+            footerStyle: 'minimal',
+            imageStyle: 'default',
+            linkStyle: 'underline'
         }
     },
     {
-        name: 'editorial',
+        name: 'tech',
         label: {
-            en: 'Editorial / Magazine',
-            cs: 'Redakční / Časopis'
+            en: 'Tech / Product',
+            cs: 'Tech / produkt'
         },
         description: {
-            en: 'Serif headings, generous line spacing, ink-on-paper feel. Bold typography as the hero.',
-            cs: 'Serifové nadpisy, velké řádkování, pocit inkoustu na papíře. Typografie jako hrdina.'
+            en: 'Geometric grotesk, tight headings, hairline borders and a glow on hover.',
+            cs: 'Geometrický grotesk, sevřené nadpisy, vlasové linky a záře při najetí.'
         },
         category: 'classic',
-        borderRadius: 'none',
-        animationLevel: 'reduced',
-        spacing: 'spacious',
+        borderRadius: 'small',
+        animationLevel: 'medium',
+        spacing: 'medium',
         typography: {
-            bodyFont: 'Lora',
-            headingFont: 'Playfair Display',
-            baseFontSize: 'large',
-            lineHeight: 'relaxed',
+            bodyFont: 'Inter',
+            headingFont: 'Space Grotesk',
+            baseFontSize: '16',
+            lineHeight: '1.6',
             letterSpacing: 'tight',
-            headingWeight: '700'
+            headingWeight: '600'
         },
         visualEffects: {
             effectStyle: 'flat',
             shadowIntensity: 'none',
+            backdropBlur: 'medium',
             borderStyle: 'solid',
             borderWidth: '1px'
         },
         componentStyles: {
-            buttonVariant: 'outlined',
+            buttonVariant: 'filled',
+            buttonSize: 'small',
             cardStyle: 'flat',
-            cardHoverEffect: 'none',
-            navbarStyle: 'minimal'
+            cardHoverEffect: 'glow',
+            navbarStyle: 'blur',
+            footerStyle: 'minimal',
+            imageStyle: 'rounded',
+            linkStyle: 'animated'
         }
     },
     {
-        name: 'retro',
+        name: 'poster',
         label: {
-            en: 'Retro / 90s',
-            cs: 'Retro / 90. léta'
+            en: 'Bold / Poster',
+            cs: 'Výrazný / plakát'
         },
         description: {
-            en: 'Chunky type, bold outlines, pixel-inspired borders. Nostalgic web aesthetic.',
-            cs: 'Tučné písmo, silné obrysy, pixelové hranice. Nostalgická webová estetika.'
+            en: 'Huge expressive headings, extra-large buttons and a full-colour footer.',
+            cs: 'Velké výrazné nadpisy, extra velká tlačítka a patička v plné barvě.'
         },
         category: 'classic',
-        borderRadius: 'none',
+        borderRadius: 'medium',
         animationLevel: 'medium',
-        spacing: 'compact',
-        typography: {
-            bodyFont: 'IBM Plex Mono',
-            headingFont: 'Bebas Neue',
-            baseFontSize: 'large',
-            lineHeight: 'compact',
-            letterSpacing: 'wider',
-            headingWeight: '400'
-        },
-        visualEffects: {
-            effectStyle: 'elevated',
-            shadowIntensity: 'dramatic',
-            borderStyle: 'solid',
-            borderWidth: '2px'
-        },
-        componentStyles: {
-            buttonVariant: 'brutal',
-            cardStyle: 'bordered',
-            cardHoverEffect: 'shadow',
-            navbarStyle: 'solid'
-        }
-    },
-    {
-        name: 'art-deco',
-        label: {
-            en: 'Art Deco',
-            cs: 'Art Deco'
-        },
-        description: {
-            en: 'Geometric symmetry, ornate headings, gold accents and strong vertical rhythm.',
-            cs: 'Geometrická symetrie, ozdobné nadpisy, zlaté akcenty a silný vertikální rytmus.'
-        },
-        category: 'classic',
-        borderRadius: 'none',
-        animationLevel: 'reduced',
-        spacing: 'spacious',
+        spacing: 'comfortable',
         typography: {
-            bodyFont: 'Cormorant Garamond',
-            headingFont: 'Cormorant Garamond',
-            baseFontSize: 'medium',
-            lineHeight: 'relaxed',
-            letterSpacing: 'wider',
-            headingWeight: '600'
+            bodyFont: 'Archivo',
+            headingFont: 'Syne',
+            baseFontSize: '17',
+            lineHeight: '1.6',
+            letterSpacing: 'tight',
+            headingWeight: '800'
         },
         visualEffects: {
             effectStyle: 'flat',
-            shadowIntensity: 'subtle',
-            borderStyle: 'double',
-            borderWidth: '3px'
-        },
-        componentStyles: {
-            buttonVariant: 'outlined',
-            cardStyle: 'bordered',
-            cardHoverEffect: 'none',
-            navbarStyle: 'solid'
-        }
-    },
-    {
-        name: 'corporate',
-        label: {
-            en: 'Corporate / Professional',
-            cs: 'Korporátní / Profesionální'
-        },
-        description: {
-            en: 'Trustworthy, conservative design. Clean sans-serif, ample whitespace, minimal decoration.',
-            cs: 'Důvěryhodný, konzervativní design. Čisté sans-serif, dostatek prostoru, minimální dekorace.'
-        },
-        category: 'classic',
-        borderRadius: 'small',
-        animationLevel: 'reduced',
-        spacing: 'medium',
-        typography: {
-            bodyFont: 'Source Sans Pro',
-            headingFont: 'Source Sans Pro',
-            baseFontSize: 'medium',
-            lineHeight: 'normal',
-            letterSpacing: 'normal',
-            headingWeight: '600'
-        },
-        visualEffects: {
-            effectStyle: 'elevated',
-            shadowIntensity: 'subtle',
-            borderStyle: 'solid',
-            borderWidth: '1px'
+            shadowIntensity: 'none',
+            backdropBlur: 'none',
+            borderStyle: 'none',
+            borderWidth: '0px'
         },
         componentStyles: {
             buttonVariant: 'filled',
-            cardStyle: 'elevated',
+            buttonSize: 'xl',
+            cardStyle: 'flat',
             cardHoverEffect: 'lift',
-            navbarStyle: 'solid'
+            navbarStyle: 'solid',
+            footerStyle: 'full-color',
+            imageStyle: 'rounded',
+            linkStyle: 'highlight'
         }
     },
     {
         name: 'playful',
         label: {
             en: 'Playful / Rounded',
-            cs: 'Hravý / Zaoblený'
+            cs: 'Hravý / zaoblený'
         },
         description: {
-            en: 'Bubbly rounded corners, bouncy animations, friendly typefaces. Fun and approachable.',
-            cs: 'Bublinkové zaoblení, skákavé animace, přátelské písmo. Zábavné a přístupné.'
+            en: 'Bubbly corners, pill buttons, a floating navbar and friendly rounded type.',
+            cs: 'Bublinkové rohy, oblá tlačítka, plovoucí navigace a přátelské zaoblené písmo.'
         },
         category: 'classic',
         borderRadius: 'xl',
@@ -337,57 +412,147 @@
         typography: {
             bodyFont: 'Nunito',
             headingFont: 'Nunito',
-            baseFontSize: 'medium',
-            lineHeight: 'relaxed',
+            baseFontSize: '17',
+            lineHeight: '1.7',
             letterSpacing: 'normal',
-            headingWeight: '700'
+            headingWeight: '800'
         },
         visualEffects: {
             effectStyle: 'elevated',
             shadowIntensity: 'medium',
+            backdropBlur: 'none',
             borderStyle: 'none',
             borderWidth: '0px'
         },
         componentStyles: {
             buttonVariant: 'pill',
+            buttonSize: 'large',
             cardStyle: 'elevated',
             cardHoverEffect: 'scale',
-            navbarStyle: 'floating'
+            navbarStyle: 'floating',
+            footerStyle: 'full-color',
+            imageStyle: 'rounded',
+            linkStyle: 'highlight'
         }
     },
     {
         name: 'organic',
         label: {
             en: 'Organic / Nature',
-            cs: 'Organický / Příroda'
+            cs: 'Organický / příroda'
         },
         description: {
-            en: 'Soft curves, earthy tones, hand-crafted feel. Asymmetric shapes and warm spacing.',
-            cs: 'Jemné křivky, zemité tóny, ručně vyrobený pocit. Asymetrické tvary a teplé mezery.'
+            en: 'Soft serif headings, warm spacing, large rounding and a transparent navbar.',
+            cs: 'Měkké patkové nadpisy, vzdušné rozestupy, velké zaoblení a průhledná navigace.'
         },
         category: 'classic',
         borderRadius: 'large',
         animationLevel: 'medium',
-        spacing: 'spacious',
+        spacing: 'comfortable',
         typography: {
-            bodyFont: 'Crimson Pro',
-            headingFont: 'Crimson Pro',
-            baseFontSize: 'large',
-            lineHeight: 'relaxed',
+            bodyFont: 'Work Sans',
+            headingFont: 'Fraunces',
+            baseFontSize: '18',
+            lineHeight: '1.7',
             letterSpacing: 'tight',
-            headingWeight: '600'
+            headingWeight: '500'
         },
         visualEffects: {
             effectStyle: 'flat',
             shadowIntensity: 'subtle',
+            backdropBlur: 'none',
             borderStyle: 'none',
             borderWidth: '0px'
         },
         componentStyles: {
             buttonVariant: 'pill',
+            buttonSize: 'medium',
             cardStyle: 'flat',
             cardHoverEffect: 'lift',
-            navbarStyle: 'transparent'
+            navbarStyle: 'transparent',
+            footerStyle: 'gradient-top',
+            imageStyle: 'rounded',
+            linkStyle: 'highlight'
+        }
+    },
+    {
+        name: 'brutalism',
+        label: {
+            en: 'Brutalism',
+            cs: 'Brutalismus'
+        },
+        description: {
+            en: 'Raw and loud. Thick borders, hard offset shadows, zero rounding.',
+            cs: 'Surový a hlasitý. Silné okraje, tvrdé posunuté stíny, žádné zaoblení.'
+        },
+        category: 'classic',
+        borderRadius: 'none',
+        animationLevel: 'none',
+        spacing: 'comfortable',
+        typography: {
+            bodyFont: 'Space Grotesk',
+            headingFont: 'Archivo Black',
+            baseFontSize: '17',
+            lineHeight: '1.5',
+            letterSpacing: 'tight',
+            headingWeight: '400'
+        },
+        visualEffects: {
+            effectStyle: 'flat',
+            shadowIntensity: 'none',
+            backdropBlur: 'none',
+            borderStyle: 'solid',
+            borderWidth: '3px'
+        },
+        componentStyles: {
+            buttonVariant: 'brutal',
+            buttonSize: 'large',
+            cardStyle: 'bordered',
+            cardHoverEffect: 'shadow',
+            navbarStyle: 'solid',
+            footerStyle: 'dark',
+            imageStyle: 'grayscale',
+            linkStyle: 'highlight'
+        }
+    },
+    {
+        name: 'retro',
+        label: {
+            en: 'Retro / 90s',
+            cs: 'Retro / 90. léta'
+        },
+        description: {
+            en: 'Condensed capital headings, typewriter text, polaroid images and chunky outlines.',
+            cs: 'Úzké nadpisy verzálkami, strojopisný text, fotky jako polaroid a silné obrysy.'
+        },
+        category: 'classic',
+        borderRadius: 'none',
+        animationLevel: 'medium',
+        spacing: 'compact',
+        typography: {
+            bodyFont: 'IBM Plex Mono',
+            headingFont: 'Bebas Neue',
+            baseFontSize: '16',
+            lineHeight: '1.6',
+            letterSpacing: 'wider',
+            headingWeight: '400'
+        },
+        visualEffects: {
+            effectStyle: 'flat',
+            shadowIntensity: 'none',
+            backdropBlur: 'none',
+            borderStyle: 'solid',
+            borderWidth: '2px'
+        },
+        componentStyles: {
+            buttonVariant: 'brutal',
+            buttonSize: 'medium',
+            cardStyle: 'bordered',
+            cardHoverEffect: 'shadow',
+            navbarStyle: 'solid',
+            footerStyle: 'full-color',
+            imageStyle: 'polaroid',
+            linkStyle: 'highlight'
         }
     },
     // ─── Visual effect styles ─────────────────────────────────────────────────
@@ -395,11 +560,11 @@
         name: 'glassmorphism',
         label: {
             en: 'Glassmorphism',
-            cs: 'Glassmorphism'
+            cs: 'Mléčné sklo'
         },
         description: {
-            en: 'Frosted glass — blurred backgrounds, transparency, soft borders.',
-            cs: 'Mléčné sklo — rozmazané pozadí, průhlednost, jemné hranice.'
+            en: 'Frosted glass panels over colour — blur, translucency, soft edges. Best on a vivid background.',
+            cs: 'Panely z mléčného skla nad barvou — rozostření, průsvitnost, jemné hrany. Nejlépe na sytém pozadí.'
         },
         category: 'effect',
         borderRadius: 'large',
@@ -407,10 +572,10 @@
         spacing: 'medium',
         typography: {
             bodyFont: 'Inter',
-            headingFont: 'Inter',
-            baseFontSize: 'medium',
-            lineHeight: 'normal',
-            letterSpacing: 'normal',
+            headingFont: 'Outfit',
+            baseFontSize: '16',
+            lineHeight: '1.6',
+            letterSpacing: 'tight',
             headingWeight: '600'
         },
         visualEffects: {
@@ -422,21 +587,25 @@
             glassOpacity: 55
         },
         componentStyles: {
-            buttonVariant: 'ghost',
+            buttonVariant: 'filled',
+            buttonSize: 'medium',
             cardStyle: 'glass',
             cardHoverEffect: 'glow',
-            navbarStyle: 'blur'
+            navbarStyle: 'blur',
+            footerStyle: 'minimal',
+            imageStyle: 'rounded',
+            linkStyle: 'animated'
         }
     },
     {
         name: 'neumorphism',
         label: {
-            en: 'Neumorphism',
-            cs: 'Neumorphism'
+            en: 'Soft UI',
+            cs: 'Měkké UI'
         },
         description: {
-            en: 'Soft UI — elements look extruded from the background using dual light/dark shadows.',
-            cs: 'Měkké UI — prvky vypadají vytlačené z pozadí díky dvojitým stínům.'
+            en: 'Elements look pressed out of the background with paired light and dark shadows.',
+            cs: 'Prvky vypadají vytlačené z pozadí díky dvojici světlého a tmavého stínu.'
         },
         category: 'effect',
         borderRadius: 'large',
@@ -445,8 +614,8 @@
         typography: {
             bodyFont: 'DM Sans',
             headingFont: 'DM Sans',
-            baseFontSize: 'medium',
-            lineHeight: 'normal',
+            baseFontSize: '16',
+            lineHeight: '1.6',
             letterSpacing: 'normal',
             headingWeight: '500'
         },
@@ -459,20 +628,24 @@
         },
         componentStyles: {
             buttonVariant: 'filled',
+            buttonSize: 'medium',
             cardStyle: 'neumorphic',
             cardHoverEffect: 'shadow',
-            navbarStyle: 'solid'
+            navbarStyle: 'solid',
+            footerStyle: 'standard',
+            imageStyle: 'rounded',
+            linkStyle: 'underline-hover'
         }
     },
     {
         name: 'claymorphism',
         label: {
-            en: 'Claymorphism',
-            cs: 'Claymorphism'
+            en: 'Clay',
+            cs: 'Plastelína'
         },
         description: {
-            en: 'Soft, colourful 3D clay-like elements with large radius and inflated look.',
-            cs: 'Měkké, barevné 3D „plastelínové" prvky s velkým zaoblením a nafouklým vzhledem.'
+            en: 'Soft, inflated 3D clay shapes with large rounding and chunky type.',
+            cs: 'Měkké nafouklé 3D tvary jako z plastelíny, velké zaoblení a tučné písmo.'
         },
         category: 'effect',
         borderRadius: 'xl',
@@ -481,8 +654,8 @@
         typography: {
             bodyFont: 'Nunito',
             headingFont: 'Nunito',
-            baseFontSize: 'large',
-            lineHeight: 'relaxed',
+            baseFontSize: '18',
+            lineHeight: '1.7',
             letterSpacing: 'normal',
             headingWeight: '800'
         },
@@ -495,20 +668,24 @@
         },
         componentStyles: {
             buttonVariant: 'pill',
+            buttonSize: 'large',
             cardStyle: 'elevated',
             cardHoverEffect: 'scale',
-            navbarStyle: 'floating'
+            navbarStyle: 'floating',
+            footerStyle: 'full-color',
+            imageStyle: 'rounded',
+            linkStyle: 'highlight'
         }
     },
     {
         name: 'gradient-heavy',
         label: {
             en: 'Gradient',
-            cs: 'Gradientový'
+            cs: 'Přechodový'
         },
         description: {
-            en: 'Gradient borders and glow effects as the primary visual accent.',
-            cs: 'Gradientové okraje a záře jako hlavní vizuální akcent.'
+            en: 'The brand gradient leads: gradient buttons, gradient card borders and a glow.',
+            cs: 'Hlavní roli hraje brandový přechod: přechodová tlačítka, okraje karet a záře.'
         },
         category: 'effect',
         borderRadius: 'medium',
@@ -517,22 +694,27 @@
         typography: {
             bodyFont: 'Inter',
             headingFont: 'Plus Jakarta Sans',
-            baseFontSize: 'medium',
-            lineHeight: 'normal',
+            baseFontSize: '16',
+            lineHeight: '1.6',
             letterSpacing: 'tight',
-            headingWeight: '700'
+            headingWeight: '800'
         },
         visualEffects: {
             effectStyle: 'elevated',
             shadowIntensity: 'medium',
+            backdropBlur: 'medium',
             borderStyle: 'none',
             borderWidth: '0px'
         },
         componentStyles: {
             buttonVariant: 'gradient',
+            buttonSize: 'medium',
             cardStyle: 'gradient-border',
             cardHoverEffect: 'glow',
-            navbarStyle: 'blur'
+            navbarStyle: 'blur',
+            footerStyle: 'gradient-top',
+            imageStyle: 'rounded',
+            linkStyle: 'animated'
         }
     }
 ];
@@ -540,15 +722,15 @@ export const stylePresetCategories = [
     {
         name: 'classic',
         label: {
-            en: 'Classic Styles',
-            cs: 'Klasické styly'
+            en: 'Styles',
+            cs: 'Styly'
         }
     },
     {
         name: 'effect',
         label: {
-            en: 'Visual Effects',
-            cs: 'Vizuální efekty'
+            en: 'Effect styles',
+            cs: 'Styly s efekty'
         }
     }
 ];