@kilivi/payloadcms-theme-management 1.1.2 → 2.1.0

package/dist/fields/themeConfigurationField.js

@@ -1,30 +1,33 @@
 import { BASE_FONT_SIZE_OPTIONS, BODY_FONT_OPTIONS, HEADING_FONT_OPTIONS, LINE_HEIGHT_OPTIONS } from '../constants/themeFonts.js';
+import { getTranslations } from '../translations.js';
 import { darkModeField, lightModeField } from './colorModeFields.js';
 /**
  * Theme Configuration Field with Theme Selection as default value setter
  * Theme Selection populates lightMode/darkMode colors automatically
  */ export function createThemeConfigurationField(options) {
-    const { themePresets, defaultTheme, includeColorModeToggle, includeCustomCSS, enableAdvancedFeatures = true, useThemePreviewField = true } = options;
+    const { themePresets, defaultTheme, includeColorModeToggle, includeCustomCSS, enableAdvancedFeatures = true, useThemePreviewField = true, customThemeConfigurationFields, customThemeConfigurationSections } = options;
     const fields = [
+        // NOTE: the palette generator is rendered *inside* ThemePreviewField (in the
+        // preset column, above the preset list) — it is not a separate UI field.
         {
             name: 'theme',
             type: 'text',
             required: true,
             defaultValue: defaultTheme,
             label: {
-                en: '🎨 Theme Selection',
-                cs: '🎨 Výběr tématu'
+                en: 'Theme Selection',
+                cs: 'Výběr motivu'
             },
-            validate: (value)=>{
+            validate: (value, options)=>{
                 if (typeof value === 'string' && value.trim().length > 0) {
                     return true;
                 }
-                return 'Select a theme';
+                return getTranslations(options?.req?.i18n?.language ?? 'en').ui.selectThemeError;
             },
             admin: {
                 description: {
-                    en: 'Select a theme to auto-populate color values. You can customize colors after selection.',
-                    cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.'
+                    en: 'Pick a theme to fill in the colours. You can fine-tune them afterwards.',
+                    cs: 'Vyberte motiv a barvy se předvyplní. Potom je můžete dál upravovat.'
                 },
                 components: {
                     Field: '@kilivi/payloadcms-theme-management/fields/ThemePreviewField'
@@ -36,6 +39,50 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
             }
         }
     ];
+    // Live preview: colours, fonts and component styles in one place. On wide admins
+    // it occupies a sticky right-hand column spanning the whole tab (see
+    // ThemePreviewField.css, `.tm-appearance`); on narrow ones it follows the theme picker.
+    fields.push({
+        name: 'appearancePreview',
+        type: 'ui',
+        admin: {
+            components: {
+                Field: '@kilivi/payloadcms-theme-management/fields/AppearancePreviewField'
+            }
+        }
+    });
+    // Style Preset - visual style selection independent of colors
+    fields.push({
+        type: 'collapsible',
+        label: {
+            en: 'Style Preset',
+            cs: 'Styl vzhledu'
+        },
+        admin: {
+            initCollapsed: true,
+            className: 'tm-section-style-preset',
+            description: {
+                en: 'Choose a visual style (Brutalism, Swiss, Glassmorphism …) without changing the colour palette.',
+                cs: 'Zvolte vizuální styl (Brutalismus, Švýcarský, Glassmorphism …) bez změny barevné palety.'
+            }
+        },
+        fields: [
+            {
+                name: 'stylePreset',
+                type: 'text',
+                label: {
+                    en: 'Active Style Preset',
+                    cs: 'Aktivní styl vzhledu'
+                },
+                defaultValue: '',
+                admin: {
+                    components: {
+                        Field: '@kilivi/payloadcms-theme-management/fields/StylePresetField'
+                    }
+                }
+            }
+        ]
+    });
     // Border Radius Configuration - Always visible
     fields.push({
         type: 'row',
@@ -44,8 +91,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
                 name: 'borderRadius',
                 type: 'select',
                 label: {
-                    en: '📐 Border Radius',
-                    cs: '📐 Zaoblení rohů'
+                    en: 'Border Radius',
+                    cs: 'Zaoblení rohů'
                 },
                 defaultValue: 'medium',
                 options: [
@@ -98,8 +145,8 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
                 name: 'spacing',
                 type: 'select',
                 label: {
-                    en: '📏 Spacing Scale',
-                    cs: '📏 Škála rozestupů'
+                    en: 'Spacing Scale',
+                    cs: 'Škála rozestupů'
                 },
                 defaultValue: 'medium',
                 options: [
@@ -141,14 +188,15 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
         fields.push({
             type: 'collapsible',
             label: {
-                en: '🌗 Color Mode Settings',
-                cs: '🌗 Nastavení barevného režimu'
+                en: 'Color Mode Settings',
+                cs: 'Nastavení barevného režimu'
             },
             admin: {
-                initCollapsed: false,
+                // Fine-tuning: collapsed by default so presets and the preview lead the tab.
+                initCollapsed: true,
                 description: {
-                    en: 'Configure light and dark mode colors. Changes here override theme selection.',
-                    cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.'
+                    en: 'Individual light and dark mode colours. Edits here take precedence over the theme.',
+                    cs: 'Jednotlivé barvy světlého a tmavého režimu. Úpravy zde mají přednost před motivem.'
                 }
             },
             fields: [
@@ -214,7 +262,25 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
                     ]
                 },
                 lightModeField,
-                darkModeField
+                darkModeField,
+                {
+                    name: 'accessibilityAudit',
+                    type: 'ui',
+                    admin: {
+                        components: {
+                            Field: '@kilivi/payloadcms-theme-management/fields/AccessibilityAuditField'
+                        }
+                    }
+                },
+                {
+                    name: 'themeExport',
+                    type: 'ui',
+                    admin: {
+                        components: {
+                            Field: '@kilivi/payloadcms-theme-management/fields/ThemeExportField'
+                        }
+                    }
+                }
             ]
         });
     }
@@ -222,11 +288,12 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
     fields.push({
         type: 'collapsible',
         label: {
-            en: '🅰️ Typography',
-            cs: '🅰️ Typografie'
+            en: 'Typography',
+            cs: 'Typografie'
         },
         admin: {
             initCollapsed: true,
+            className: 'tm-section-typography',
             description: {
                 en: 'Choose font families and base typography settings. Leave fields on "Use preset" to inherit the theme defaults.',
                 cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota "Použít výchozí" zachová nastavení motivu.'
@@ -365,11 +432,12 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
     const customPresetsField = {
         type: 'collapsible',
         label: {
-            en: '🧩 Custom Theme Presets',
-            cs: '🧩 Vlastní motivy'
+            en: 'Custom Theme Presets',
+            cs: 'Vlastní motivy'
         },
         admin: {
             initCollapsed: true,
+            className: 'tm-section-custom-presets',
             description: {
                 en: 'Import additional theme presets via JSON to extend or override the defaults. These presets become available instantly in the Theme Selection above.',
                 cs: 'Importujte další motivy pomocí JSONu a rozšiřte nebo přepište výchozí nabídku. Motivy budou ihned k dispozici ve výběru výše.'
@@ -386,7 +454,7 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
                 admin: {
                     description: {
                         en: 'Paste or import an array (or object map) of theme presets. Each entry should include at least a unique "name" and "label" with optional lightMode/darkMode colors.',
-                        cs: 'Vložte nebo importujte pole (či objekt) motivů. Každý motiv musí mít unikátní „name“ a „label“ a volitelně barvy pro světly/tmavý režim.'
+                        cs: 'Vložte nebo importujte pole (či objekt) motivů. Každý motiv musí mít unikátní „name“ a „label“ a volitelně barvy pro světlý a tmavý režim.'
                     },
                     components: {
                         Field: '@kilivi/payloadcms-theme-management/fields/ThemePresetImportField'
@@ -396,6 +464,868 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
         ]
     };
     fields.push(customPresetsField);
+    // Visual Effects — glassmorphism, shadows, border style
+    fields.push({
+        type: 'collapsible',
+        label: {
+            en: 'Visual Effects',
+            cs: 'Vizuální efekty'
+        },
+        admin: {
+            initCollapsed: true,
+            className: 'tm-section-effects',
+            description: {
+                en: 'Configure UI effect style, shadow intensity and border appearance.',
+                cs: 'Nastavte styl efektů UI, intenzitu stínů a vzhled okrajů.'
+            }
+        },
+        fields: [
+            {
+                name: 'visualEffects',
+                type: 'group',
+                fields: [
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'effectStyle',
+                                type: 'select',
+                                label: {
+                                    en: 'Effect Style',
+                                    cs: 'Styl efektů'
+                                },
+                                defaultValue: 'flat',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'Flat',
+                                            cs: 'Plochý'
+                                        },
+                                        value: 'flat'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Elevated (Box shadows)',
+                                            cs: 'Vyvýšený (stíny)'
+                                        },
+                                        value: 'elevated'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Glassmorphism (Frosted glass)',
+                                            cs: 'Glassmorphism (mléčné sklo)'
+                                        },
+                                        value: 'glass'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Neumorphism (Soft UI)',
+                                            cs: 'Neumorphism (měkké UI)'
+                                        },
+                                        value: 'neumorphic'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Claymorphism (Clay-like)',
+                                            cs: 'Claymorphism (hlína)'
+                                        },
+                                        value: 'clay'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Visual style applied to cards, panels and interactive elements.',
+                                        cs: 'Vizuální styl karet, panelů a interaktivních prvků.'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'effect_style'
+                            },
+                            {
+                                name: 'shadowIntensity',
+                                type: 'select',
+                                label: {
+                                    en: 'Shadow Intensity',
+                                    cs: 'Intenzita stínů'
+                                },
+                                defaultValue: 'medium',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'None',
+                                            cs: 'Žádné'
+                                        },
+                                        value: 'none'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Subtle',
+                                            cs: 'Jemné'
+                                        },
+                                        value: 'subtle'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Medium',
+                                            cs: 'Střední'
+                                        },
+                                        value: 'medium'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Strong',
+                                            cs: 'Silné'
+                                        },
+                                        value: 'strong'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Dramatic',
+                                            cs: 'Dramatické'
+                                        },
+                                        value: 'dramatic'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Global shadow depth for elevated elements.',
+                                        cs: 'Globální hloubka stínů pro vyvýšené prvky.'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'shadow_intensity'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'backdropBlur',
+                                type: 'select',
+                                label: {
+                                    en: 'Backdrop Blur',
+                                    cs: 'Rozmazání pozadí'
+                                },
+                                defaultValue: 'none',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'None',
+                                            cs: 'Žádné'
+                                        },
+                                        value: 'none'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Slight (4px)',
+                                            cs: 'Jemné (4px)'
+                                        },
+                                        value: 'slight'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Medium (8px)',
+                                            cs: 'Střední (8px)'
+                                        },
+                                        value: 'medium'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Strong (16px)',
+                                            cs: 'Silné (16px)'
+                                        },
+                                        value: 'strong'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Heavy (24px)',
+                                            cs: 'Intenzivní (24px)'
+                                        },
+                                        value: 'heavy'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Blur effect behind translucent elements (requires glass effect style).',
+                                        cs: 'Rozmazání za průhledné prvky (vyžaduje styl skla).'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'backdrop_blur'
+                            },
+                            {
+                                name: 'borderStyle',
+                                type: 'select',
+                                label: {
+                                    en: 'Border Style',
+                                    cs: 'Styl okrajů'
+                                },
+                                defaultValue: 'solid',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'None',
+                                            cs: 'Žádné'
+                                        },
+                                        value: 'none'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Solid',
+                                            cs: 'Plné'
+                                        },
+                                        value: 'solid'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Dashed',
+                                            cs: 'Čárkované'
+                                        },
+                                        value: 'dashed'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Dotted',
+                                            cs: 'Tečkované'
+                                        },
+                                        value: 'dotted'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Double',
+                                            cs: 'Dvojité'
+                                        },
+                                        value: 'double'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Default border style for cards, inputs and dividers.',
+                                        cs: 'Výchozí styl okrajů pro karty, vstupy a oddělovače.'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'border_style'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'borderWidth',
+                                type: 'select',
+                                label: {
+                                    en: 'Border Width',
+                                    cs: 'Tloušťka okraje'
+                                },
+                                defaultValue: '1px',
+                                options: [
+                                    {
+                                        label: '0px',
+                                        value: '0px'
+                                    },
+                                    {
+                                        label: '1px',
+                                        value: '1px'
+                                    },
+                                    {
+                                        label: '2px',
+                                        value: '2px'
+                                    },
+                                    {
+                                        label: '3px',
+                                        value: '3px'
+                                    },
+                                    {
+                                        label: '4px',
+                                        value: '4px'
+                                    }
+                                ],
+                                admin: {
+                                    width: '50%'
+                                },
+                                dbName: 'border_width'
+                            },
+                            {
+                                name: 'glassOpacity',
+                                type: 'number',
+                                label: {
+                                    en: 'Glass Opacity (%)',
+                                    cs: 'Průhlednost skla (%)'
+                                },
+                                defaultValue: 60,
+                                min: 0,
+                                max: 100,
+                                admin: {
+                                    description: {
+                                        en: 'Card/panel opacity when using glass effect (0 = fully transparent, 100 = opaque).',
+                                        cs: 'Průhlednost karet/panelů při skleněném efektu (0 = plně průhledné, 100 = neprůhledné).'
+                                    },
+                                    width: '50%',
+                                    condition: (_, siblingData)=>siblingData?.effectStyle === 'glass'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    });
+    // Component Styles — buttons, cards, images, icons
+    fields.push({
+        type: 'collapsible',
+        label: {
+            en: 'Component Styles',
+            cs: 'Styly komponent'
+        },
+        admin: {
+            initCollapsed: true,
+            className: 'tm-section-components',
+            description: {
+                en: 'Customize button variant, card style and navbar appearance.',
+                cs: 'Přizpůsobte styl tlačítek, karet a navigační lišty.'
+            }
+        },
+        fields: [
+            {
+                name: 'componentStyles',
+                type: 'group',
+                fields: [
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'buttonVariant',
+                                type: 'select',
+                                label: {
+                                    en: 'Primary Button Style',
+                                    cs: 'Styl primárního tlačítka'
+                                },
+                                defaultValue: 'filled',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'Filled (solid)',
+                                            cs: 'Plné (solid)'
+                                        },
+                                        value: 'filled'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Outlined',
+                                            cs: 'Ohraničené'
+                                        },
+                                        value: 'outlined'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Ghost (transparent)',
+                                            cs: 'Průhledné'
+                                        },
+                                        value: 'ghost'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Gradient',
+                                            cs: 'Přechodové'
+                                        },
+                                        value: 'gradient'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Pill (full rounded)',
+                                            cs: 'Pill (plné zaoblení)'
+                                        },
+                                        value: 'pill'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Brutalist (thick border)',
+                                            cs: 'Brutalistické (silný okraj)'
+                                        },
+                                        value: 'brutal'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Default visual style of primary action buttons.',
+                                        cs: 'Výchozí vizuální styl primárních tlačítek.'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'button_variant'
+                            },
+                            {
+                                name: 'buttonSize',
+                                type: 'select',
+                                label: {
+                                    en: 'Button Size',
+                                    cs: 'Velikost tlačítka'
+                                },
+                                defaultValue: 'medium',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'Small',
+                                            cs: 'Malé'
+                                        },
+                                        value: 'small'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Medium',
+                                            cs: 'Střední'
+                                        },
+                                        value: 'medium'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Large',
+                                            cs: 'Velké'
+                                        },
+                                        value: 'large'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'XL',
+                                            cs: 'XL'
+                                        },
+                                        value: 'xl'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Default padding / font-size of buttons.',
+                                        cs: 'Výchozí odsazení a velikost písma tlačítek.'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'button_size'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'cardStyle',
+                                type: 'select',
+                                label: {
+                                    en: 'Card Style',
+                                    cs: 'Styl karet'
+                                },
+                                defaultValue: 'elevated',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'Elevated (shadow)',
+                                            cs: 'Vyvýšené (stín)'
+                                        },
+                                        value: 'elevated'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Flat (no shadow)',
+                                            cs: 'Ploché (bez stínu)'
+                                        },
+                                        value: 'flat'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Bordered',
+                                            cs: 'S okrajem'
+                                        },
+                                        value: 'bordered'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Glass',
+                                            cs: 'Skleněné'
+                                        },
+                                        value: 'glass'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Neumorphic',
+                                            cs: 'Neumorfní'
+                                        },
+                                        value: 'neumorphic'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Gradient border',
+                                            cs: 'Přechodový okraj'
+                                        },
+                                        value: 'gradient-border'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Default card/panel visual style across the website.',
+                                        cs: 'Výchozí vizuální styl karet a panelů na webu.'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'card_style'
+                            },
+                            {
+                                name: 'cardHoverEffect',
+                                type: 'select',
+                                label: {
+                                    en: 'Card Hover Effect',
+                                    cs: 'Efekt při najetí na kartu'
+                                },
+                                defaultValue: 'lift',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'None',
+                                            cs: 'Žádný'
+                                        },
+                                        value: 'none'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Lift (translate up)',
+                                            cs: 'Zvednutí (posun nahoru)'
+                                        },
+                                        value: 'lift'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Scale up',
+                                            cs: 'Zvětšení'
+                                        },
+                                        value: 'scale'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Shadow grow',
+                                            cs: 'Větší stín'
+                                        },
+                                        value: 'shadow'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Border glow',
+                                            cs: 'Zářící okraj'
+                                        },
+                                        value: 'glow'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Tilt 3D',
+                                            cs: '3D náklon'
+                                        },
+                                        value: 'tilt'
+                                    }
+                                ],
+                                admin: {
+                                    width: '50%'
+                                },
+                                dbName: 'card_hover_effect'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'navbarStyle',
+                                type: 'select',
+                                label: {
+                                    en: 'Navbar Style',
+                                    cs: 'Styl navigace'
+                                },
+                                defaultValue: 'solid',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'Solid',
+                                            cs: 'Plná'
+                                        },
+                                        value: 'solid'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Transparent (on hero)',
+                                            cs: 'Průhledná (nad hero)'
+                                        },
+                                        value: 'transparent'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Blurred glass',
+                                            cs: 'Rozmazané sklo'
+                                        },
+                                        value: 'blur'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Floating',
+                                            cs: 'Plovoucí'
+                                        },
+                                        value: 'floating'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Minimal (bottom border only)',
+                                            cs: 'Minimalistická (jen spodní okraj)'
+                                        },
+                                        value: 'minimal'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Navigation bar visual style.',
+                                        cs: 'Vizuální styl navigační lišty.'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'navbar_style'
+                            },
+                            {
+                                name: 'footerStyle',
+                                type: 'select',
+                                label: {
+                                    en: 'Footer Style',
+                                    cs: 'Styl patičky'
+                                },
+                                defaultValue: 'standard',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'Standard',
+                                            cs: 'Standardní'
+                                        },
+                                        value: 'standard'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Minimal',
+                                            cs: 'Minimalistická'
+                                        },
+                                        value: 'minimal'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Dark',
+                                            cs: 'Tmavá'
+                                        },
+                                        value: 'dark'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Gradient top edge',
+                                            cs: 'Gradient horní hrana'
+                                        },
+                                        value: 'gradient-top'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Full colour',
+                                            cs: 'Plná barva'
+                                        },
+                                        value: 'full-color'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Footer visual style.',
+                                        cs: 'Vizuální styl patičky.'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'footer_style'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'imageStyle',
+                                type: 'select',
+                                label: {
+                                    en: 'Image Style',
+                                    cs: 'Styl obrázků'
+                                },
+                                defaultValue: 'default',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'Default',
+                                            cs: 'Výchozí'
+                                        },
+                                        value: 'default'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Rounded',
+                                            cs: 'Zaoblené'
+                                        },
+                                        value: 'rounded'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Circle',
+                                            cs: 'Kruhové'
+                                        },
+                                        value: 'circle'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Vignette',
+                                            cs: 'Vinětace'
+                                        },
+                                        value: 'vignette'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Grayscale',
+                                            cs: 'Černobílé'
+                                        },
+                                        value: 'grayscale'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Duotone',
+                                            cs: 'Duotón'
+                                        },
+                                        value: 'duotone'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Polaroid',
+                                            cs: 'Polaroid'
+                                        },
+                                        value: 'polaroid'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Default treatment for content images (applied via [data-img] / .themed-image).',
+                                        cs: 'Výchozí úprava obsahových obrázků (přes [data-img] / .themed-image).'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'image_style'
+                            },
+                            {
+                                name: 'linkStyle',
+                                type: 'select',
+                                label: {
+                                    en: 'Link Style',
+                                    cs: 'Styl odkazů'
+                                },
+                                defaultValue: 'underline-hover',
+                                options: [
+                                    {
+                                        label: {
+                                            en: 'Always underlined',
+                                            cs: 'Vždy podtržené'
+                                        },
+                                        value: 'underline'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Underline on hover',
+                                            cs: 'Podtržení při najetí'
+                                        },
+                                        value: 'underline-hover'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'No underline',
+                                            cs: 'Bez podtržení'
+                                        },
+                                        value: 'none'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Highlight',
+                                            cs: 'Zvýraznění'
+                                        },
+                                        value: 'highlight'
+                                    },
+                                    {
+                                        label: {
+                                            en: 'Animated underline',
+                                            cs: 'Animované podtržení'
+                                        },
+                                        value: 'animated'
+                                    }
+                                ],
+                                admin: {
+                                    description: {
+                                        en: 'Default style for in-content links (applied via [data-link] / .themed-link).',
+                                        cs: 'Výchozí styl odkazů v obsahu (přes [data-link] / .themed-link).'
+                                    },
+                                    width: '50%'
+                                },
+                                dbName: 'link_style'
+                            }
+                        ]
+                    },
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'enableScrollReveal',
+                                type: 'checkbox',
+                                label: {
+                                    en: 'Scroll reveal animations',
+                                    cs: 'Animace při scrollování'
+                                },
+                                defaultValue: true,
+                                admin: {
+                                    description: {
+                                        en: 'Reveal elements as they enter the viewport.',
+                                        cs: 'Odhalovat prvky při vstupu do viewportu.'
+                                    },
+                                    width: '50%'
+                                }
+                            },
+                            {
+                                name: 'enableHoverAnimations',
+                                type: 'checkbox',
+                                label: {
+                                    en: 'Hover micro-animations',
+                                    cs: 'Hover mikro-animace'
+                                },
+                                defaultValue: true,
+                                admin: {
+                                    description: {
+                                        en: 'Subtle motion on interactive elements when hovered.',
+                                        cs: 'Jemný pohyb interaktivních prvků při najetí.'
+                                    },
+                                    width: '50%'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    });
+    if (customThemeConfigurationFields?.length) {
+        fields.push(...customThemeConfigurationFields);
+    }
+    if (customThemeConfigurationSections?.length) {
+        customThemeConfigurationSections.forEach((section)=>{
+            fields.push({
+                type: 'collapsible',
+                label: section.label,
+                admin: {
+                    initCollapsed: section.initCollapsed ?? true,
+                    description: section.description
+                },
+                fields: section.fields
+            });
+        });
+    }
     // Advanced Settings (when using extended theme configuration)
     if (enableAdvancedFeatures) {
         const advancedFields = [
@@ -467,11 +1397,12 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
         fields.push({
             type: 'collapsible',
             label: {
-                en: '⚙️ Advanced Settings',
-                cs: '⚙️ Pokročilé nastavení'
+                en: 'Advanced Settings',
+                cs: 'Pokročilé nastavení'
             },
             admin: {
-                initCollapsed: true
+                initCollapsed: true,
+                className: 'tm-section-advanced'
             },
             fields: advancedFields
         });
@@ -479,17 +1410,18 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
     // Return as tab configuration to be injected into tabs structure
     return {
         label: {
-            en: '🎨 Appearance Settings',
-            cs: '🎨 Nastavení vzhledu'
+            en: 'Appearance Settings',
+            cs: 'Nastavení vzhledu'
         },
         fields: [
             {
                 name: 'themeConfiguration',
                 type: 'group',
                 admin: {
+                    className: 'tm-appearance',
                     description: {
-                        en: 'Configure website appearance and styling',
-                        cs: 'Nakonfigurujte vzhled a stylování webu'
+                        en: 'Appearance and style of the whole website',
+                        cs: 'Vzhled a styl celého webu'
                     }
                 },
                 fields