@kilivi/payloadcms-theme-management 0.2.18 → 0.3.2

package/dist/fields/themeConfigurationField.js

@@ -1,9 +1,8 @@
 import { BASE_FONT_SIZE_OPTIONS, BODY_FONT_OPTIONS, HEADING_FONT_OPTIONS, LINE_HEIGHT_OPTIONS } from '../constants/themeFonts.js';
 import { darkModeField, lightModeField } from './colorModeFields.js';
-import { darkModeColorsField, designSystemConfigField, extendedThemeSelectionField, lightModeColorsField, shadowConfigField, typographyConfigField } from './extendedThemeFields.js';
 /**
- * Theme Configuration Tab Configuration
- * Returns tab config that can be injected into existing tabs field
+ * 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 } = options;
     const themeOptions = themePresets.map((preset)=>{
@@ -34,35 +33,108 @@ import { darkModeColorsField, designSystemConfigField, extendedThemeSelectionFie
                     Field: '@kilivi/payloadcms-theme-management/fields/ThemePreviewField'
                 }
             }
-        },
-        extendedThemeSelectionField
+        }
     ];
-    // Extended Theme Configuration (OKLCH colors, shadcn/ui compatible)
-    if (enableAdvancedFeatures) {
-        fields.push({
-            type: 'collapsible',
-            label: {
-                en: '🎨 Extended Theme Configuration',
-                cs: '🎨 Rozšířená konfigurace tématu'
-            },
-            admin: {
-                initCollapsed: true,
-                description: {
-                    en: 'Professional theme system with TweakCN compatibility. Full OKLCH color support, shadows, typography, and more.',
-                    cs: 'Profesionální systém témat s kompatibilitou TweakCN. Plná podpora OKLCH barev, stíny, typografie a další.'
+    // Border Radius Configuration - Always visible
+    fields.push({
+        type: 'row',
+        fields: [
+            {
+                name: 'borderRadius',
+                type: 'select',
+                label: {
+                    en: '📐 Border Radius',
+                    cs: '📐 Zaoblení rohů'
+                },
+                defaultValue: 'medium',
+                options: [
+                    {
+                        label: {
+                            en: 'None (0px)',
+                            cs: 'Žádné (0px)'
+                        },
+                        value: 'none'
+                    },
+                    {
+                        label: {
+                            en: 'Small (0.25rem)',
+                            cs: 'Malé (0.25rem)'
+                        },
+                        value: 'small'
+                    },
+                    {
+                        label: {
+                            en: 'Medium (0.5rem)',
+                            cs: 'Střední (0.5rem)'
+                        },
+                        value: 'medium'
+                    },
+                    {
+                        label: {
+                            en: 'Large (0.75rem)',
+                            cs: 'Velké (0.75rem)'
+                        },
+                        value: 'large'
+                    },
+                    {
+                        label: {
+                            en: 'XL (1rem)',
+                            cs: 'XL (1rem)'
+                        },
+                        value: 'xl'
+                    }
+                ],
+                admin: {
+                    description: {
+                        en: 'Default corner rounding for UI elements',
+                        cs: 'Výchozí zaoblení rohů pro UI prvky'
+                    },
+                    width: '50%'
                 }
             },
-            fields: [
-                lightModeColorsField,
-                darkModeColorsField,
-                shadowConfigField,
-                typographyConfigField,
-                designSystemConfigField
-            ]
-        });
-    }
-    // Color Mode Settings (only when NOT using extended theme configuration)
-    if (includeColorModeToggle && !enableAdvancedFeatures) {
+            {
+                name: 'spacing',
+                type: 'select',
+                label: {
+                    en: '📏 Spacing Scale',
+                    cs: '📏 Škála rozestupů'
+                },
+                defaultValue: 'medium',
+                options: [
+                    {
+                        label: {
+                            en: 'Compact',
+                            cs: 'Kompaktní'
+                        },
+                        value: 'compact'
+                    },
+                    {
+                        label: {
+                            en: 'Medium',
+                            cs: 'Střední'
+                        },
+                        value: 'medium'
+                    },
+                    {
+                        label: {
+                            en: 'Comfortable',
+                            cs: 'Pohodlné'
+                        },
+                        value: 'comfortable'
+                    }
+                ],
+                admin: {
+                    description: {
+                        en: 'Global spacing between elements',
+                        cs: 'Globální rozestupy mezi prvky'
+                    },
+                    width: '50%'
+                }
+            }
+        ]
+    });
+    // Color Mode Settings
+    if (includeColorModeToggle) {
         fields.push({
             type: 'collapsible',
             label: {
@@ -142,283 +214,144 @@ import { darkModeColorsField, designSystemConfigField, extendedThemeSelectionFie
             ]
         });
     }
-    // Typography (only when NOT using extended theme configuration)
-    if (!enableAdvancedFeatures) {
-        fields.push({
-            type: 'collapsible',
-            label: {
-                en: '🅰️ Typography',
-                cs: '🅰️ Typografie'
-            },
-            admin: {
-                initCollapsed: true,
-                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.'
-                }
-            },
-            fields: [
-                {
-                    name: 'typography',
-                    type: 'group',
-                    fields: [
-                        {
-                            type: 'row',
-                            fields: [
-                                {
-                                    name: 'bodyFont',
-                                    type: 'select',
-                                    label: {
-                                        en: 'Body font',
-                                        cs: 'Písmo pro text'
-                                    },
-                                    defaultValue: 'preset',
-                                    // @ts-expect-error - Pass full objects including fontFamily for custom rendering
-                                    options: BODY_FONT_OPTIONS,
-                                    admin: {
-                                        width: '50%',
-                                        components: {
-                                            Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField'
-                                        }
-                                    }
+    // Typography - Always visible
+    fields.push({
+        type: 'collapsible',
+        label: {
+            en: '🅰️ Typography',
+            cs: '🅰️ Typografie'
+        },
+        admin: {
+            initCollapsed: true,
+            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.'
+            }
+        },
+        fields: [
+            {
+                name: 'typography',
+                type: 'group',
+                fields: [
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'bodyFont',
+                                type: 'select',
+                                label: {
+                                    en: 'Body font',
+                                    cs: 'Písmo pro text'
                                 },
-                                {
-                                    name: 'headingFont',
-                                    type: 'select',
-                                    label: {
-                                        en: 'Heading font',
-                                        cs: 'Písmo pro nadpisy'
-                                    },
-                                    defaultValue: 'preset',
-                                    // @ts-expect-error - Pass full objects including fontFamily for custom rendering
-                                    options: HEADING_FONT_OPTIONS,
-                                    admin: {
-                                        width: '50%',
-                                        components: {
-                                            Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField'
-                                        }
+                                defaultValue: 'preset',
+                                // @ts-expect-error - Pass full objects including fontFamily for custom rendering
+                                options: BODY_FONT_OPTIONS,
+                                admin: {
+                                    width: '50%',
+                                    components: {
+                                        Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField'
                                     }
                                 }
-                            ]
-                        },
-                        {
-                            type: 'row',
-                            fields: [
-                                {
-                                    name: 'bodyFontCustom',
-                                    type: 'text',
-                                    label: {
-                                        en: 'Custom body font stack',
-                                        cs: 'Vlastní písmo pro text'
-                                    },
-                                    admin: {
-                                        width: '50%',
-                                        placeholder: '"IBM Plex Sans", sans-serif',
-                                        description: {
-                                            en: 'Provide full CSS font-family stack when using a custom font.',
-                                            cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.'
-                                        },
-                                        condition: (_, siblingData)=>siblingData?.bodyFont === 'custom'
-                                    }
+                            },
+                            {
+                                name: 'headingFont',
+                                type: 'select',
+                                label: {
+                                    en: 'Heading font',
+                                    cs: 'Písmo pro nadpisy'
                                 },
-                                {
-                                    name: 'headingFontCustom',
-                                    type: 'text',
-                                    label: {
-                                        en: 'Custom heading font stack',
-                                        cs: 'Vlastní písmo pro nadpisy'
-                                    },
-                                    admin: {
-                                        width: '50%',
-                                        placeholder: '"Cormorant Garamond", serif',
-                                        description: {
-                                            en: 'Provide full CSS font-family stack when using a custom heading font.',
-                                            cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.'
-                                        },
-                                        condition: (_, siblingData)=>siblingData?.headingFont === 'custom'
+                                defaultValue: 'preset',
+                                // @ts-expect-error - Pass full objects including fontFamily for custom rendering
+                                options: HEADING_FONT_OPTIONS,
+                                admin: {
+                                    width: '50%',
+                                    components: {
+                                        Field: '@kilivi/payloadcms-theme-management/fields/FontSelectField'
                                     }
                                 }
-                            ]
-                        },
-                        {
-                            type: 'row',
-                            fields: [
-                                {
-                                    name: 'baseFontSize',
-                                    type: 'select',
-                                    label: {
-                                        en: 'Base font size',
-                                        cs: 'Základní velikost písma'
-                                    },
-                                    defaultValue: 'preset',
-                                    options: BASE_FONT_SIZE_OPTIONS.map((option)=>({
-                                            label: option.label,
-                                            value: option.value
-                                        })),
-                                    admin: {
-                                        width: '50%'
-                                    }
+                            }
+                        ]
+                    },
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'bodyFontCustom',
+                                type: 'text',
+                                label: {
+                                    en: 'Custom body font stack',
+                                    cs: 'Vlastní písmo pro text'
                                 },
-                                {
-                                    name: 'lineHeight',
-                                    type: 'select',
-                                    label: {
-                                        en: 'Line height',
-                                        cs: 'Řádkování'
+                                admin: {
+                                    width: '50%',
+                                    placeholder: '"IBM Plex Sans", sans-serif',
+                                    description: {
+                                        en: 'Provide full CSS font-family stack when using a custom font.',
+                                        cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.'
                                     },
-                                    defaultValue: 'preset',
-                                    options: LINE_HEIGHT_OPTIONS.map((option)=>({
-                                            label: option.label,
-                                            value: option.value
-                                        })),
-                                    admin: {
-                                        width: '50%'
-                                    }
+                                    condition: (_, siblingData)=>siblingData?.bodyFont === 'custom'
                                 }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        });
-    }
-    // Design Customization (only when NOT using extended theme configuration)
-    if (!enableAdvancedFeatures) {
-        fields.push({
-            type: 'collapsible',
-            label: {
-                en: '✨ Design Customization',
-                cs: '✨ Přizpůsobení designu'
-            },
-            admin: {
-                initCollapsed: true
-            },
-            fields: [
-                {
-                    name: 'borderRadius',
-                    type: 'select',
-                    label: {
-                        en: 'Border Radius',
-                        cs: 'Zaoblení rohů'
-                    },
-                    defaultValue: 'medium',
-                    options: [
-                        {
-                            label: {
-                                en: 'None',
-                                cs: 'Žádné'
-                            },
-                            value: 'none'
-                        },
-                        {
-                            label: {
-                                en: 'Small',
-                                cs: 'Malé'
-                            },
-                            value: 'small'
-                        },
-                        {
-                            label: {
-                                en: 'Medium',
-                                cs: 'Střední'
-                            },
-                            value: 'medium'
-                        },
-                        {
-                            label: {
-                                en: 'Large',
-                                cs: 'Velké'
-                            },
-                            value: 'large'
-                        },
-                        {
-                            label: {
-                                en: 'Full',
-                                cs: 'Plné'
-                            },
-                            value: 'xl'
-                        }
-                    ],
-                    admin: {
-                        components: {
-                            Field: '@kilivi/payloadcms-theme-management/fields/RadiusField'
-                        },
-                        width: '33%'
-                    }
-                },
-                {
-                    name: 'fontScale',
-                    type: 'select',
-                    label: {
-                        en: 'Font Scale',
-                        cs: 'Velikost písma'
-                    },
-                    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'
-                        }
-                    ],
-                    admin: {
-                        width: '33%'
-                    }
-                },
-                {
-                    name: 'spacing',
-                    type: 'select',
-                    label: {
-                        en: 'Spacing',
-                        cs: 'Mezery'
+                            {
+                                name: 'headingFontCustom',
+                                type: 'text',
+                                label: {
+                                    en: 'Custom heading font stack',
+                                    cs: 'Vlastní písmo pro nadpisy'
+                                },
+                                admin: {
+                                    width: '50%',
+                                    placeholder: '"Cormorant Garamond", serif',
+                                    description: {
+                                        en: 'Provide full CSS font-family stack when using a custom heading font.',
+                                        cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.'
+                                    },
+                                    condition: (_, siblingData)=>siblingData?.headingFont === 'custom'
+                                }
+                            }
+                        ]
                     },
-                    defaultValue: 'medium',
-                    options: [
-                        {
-                            label: {
-                                en: 'Compact',
-                                cs: 'Kompaktní'
-                            },
-                            value: 'compact'
-                        },
-                        {
-                            label: {
-                                en: 'Medium',
-                                cs: 'Střední'
-                            },
-                            value: 'medium'
-                        },
-                        {
-                            label: {
-                                en: 'Spacious',
-                                cs: 'Prostorné'
+                    {
+                        type: 'row',
+                        fields: [
+                            {
+                                name: 'baseFontSize',
+                                type: 'select',
+                                label: {
+                                    en: 'Base font size',
+                                    cs: 'Základní velikost písma'
+                                },
+                                defaultValue: 'preset',
+                                options: BASE_FONT_SIZE_OPTIONS.map((option)=>({
+                                        label: option.label,
+                                        value: option.value
+                                    })),
+                                admin: {
+                                    width: '50%'
+                                }
                             },
-                            value: 'spacious'
-                        }
-                    ],
-                    admin: {
-                        width: '34%'
+                            {
+                                name: 'lineHeight',
+                                type: 'select',
+                                label: {
+                                    en: 'Line height',
+                                    cs: 'Řádkování'
+                                },
+                                defaultValue: 'preset',
+                                options: LINE_HEIGHT_OPTIONS.map((option)=>({
+                                        label: option.label,
+                                        value: option.value
+                                    })),
+                                admin: {
+                                    width: '50%'
+                                }
+                            }
+                        ]
                     }
-                }
-            ]
-        });
-    } // End of !enableAdvancedFeatures block
+                ]
+            }
+        ]
+    });
     // Advanced Settings (when using extended theme configuration)
     if (enableAdvancedFeatures) {
         const advancedFields = [
@@ -499,16 +432,19 @@ import { darkModeColorsField, designSystemConfigField, extendedThemeSelectionFie
         });
     }
     // Return just the tab configuration, not the full tabs field
-    // The plugin will inject this into existing tabs or create a group field
+    // Return as group field with all theme configuration
     return {
         name: 'themeConfiguration',
+        type: 'group',
         label: {
             en: '🎨 Appearance Settings',
             cs: '🎨 Nastavení vzhledu'
         },
-        description: {
-            en: 'Configure website appearance and styling',
-            cs: 'Nakonfigurujte vzhled a stylování webu'
+        admin: {
+            description: {
+                en: 'Configure website appearance and styling',
+                cs: 'Nakonfigurujte vzhled a stylování webu'
+            }
         },
         fields
     };