@kilivi/payloadcms-theme-management 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +331 -41
- package/dist/components/ServerThemeInjector.d.ts +12 -3
- package/dist/components/ServerThemeInjector.d.ts.map +1 -1
- package/dist/components/ServerThemeInjector.js +8 -12
- package/dist/components/ServerThemeInjector.js.map +1 -1
- package/dist/components/ThemePreview.js.map +1 -1
- package/dist/components/typographyPreviewUtils.js.map +1 -1
- package/dist/constants/themeFonts.js.map +1 -1
- package/dist/fields/ColorPickerField.js.map +1 -1
- package/dist/fields/RadiusField.js.map +1 -1
- package/dist/fields/ThemeColorPickerField.css +138 -138
- package/dist/fields/ThemeColorPickerField.js.map +1 -1
- package/dist/fields/ThemePreviewField.js.map +1 -1
- package/dist/fields/ThemeTokenSelectField.js.map +1 -1
- package/dist/fields/colorModeFields.js.map +1 -1
- package/dist/fields/themeConfigurationField.js +3 -3
- package/dist/fields/themeConfigurationField.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/index.js.map +1 -1
- package/dist/payload-types.js +3 -3
- package/dist/payload-types.js.map +1 -1
- package/dist/plugin.js.map +1 -1
- package/dist/presets.js.map +1 -1
- package/dist/providers/Theme/index.js.map +1 -1
- package/dist/providers/Theme/shared.js.map +1 -1
- package/dist/providers/Theme/themeConfig.js.map +1 -1
- package/dist/providers/Theme/types.js.map +1 -1
- package/dist/server.d.ts +1 -0
- package/dist/server.d.ts.map +1 -1
- package/dist/server.js +1 -0
- package/dist/server.js.map +1 -1
- package/dist/src/--verbose/dist/fields/ThemeColorPickerField.scss +138 -0
- package/dist/src/dist/fields/ThemeColorPickerField.scss +138 -0
- package/dist/types.js.map +1 -1
- package/dist/utils/resolveThemeConfiguration.js.map +1 -1
- package/dist/utils/themeAssets.js.map +1 -1
- package/dist/utils/themeColors.js.map +1 -1
- package/dist/utils/themeUtils.js +6 -6
- package/dist/utils/themeUtils.js.map +1 -1
- package/package.json +10 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/ThemePreviewField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useMemo, useRef, type ChangeEvent } from 'react'\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\nimport type {\n ResolvedTypographyPreview,\n TypographySelection,\n} from '../components/typographyPreviewUtils.js'\nimport { resolveTypographyPreview } from '../components/typographyPreviewUtils.js'\nimport { defaultThemePresets } from '../index.js'\nimport type { ThemeTypographyPreset } from '../presets.js'\nimport { darkModeDefaults, lightModeDefaults } from './colorModeFields.js'\n\ninterface ColorModeColors {\n background?: string\n foreground?: string\n card?: string\n cardForeground?: string\n popover?: string\n popoverForeground?: string\n primary?: string\n primaryForeground?: string\n secondary?: string\n secondaryForeground?: string\n muted?: string\n mutedForeground?: string\n accent?: string\n accentForeground?: string\n destructive?: string\n destructiveForeground?: string\n border?: string\n input?: string\n ring?: string\n}\n\ninterface ThemePresetDefinition {\n label: string\n lightMode: ColorModeColors\n darkMode: ColorModeColors\n typography?: ThemeTypographyPreset\n borderRadius: 'none' | 'small' | 'medium' | 'large' | 'xl'\n}\n\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\n\nconst themePresets = defaultThemePresets.reduce<Record<string, ThemePresetDefinition>>(\n (acc, preset) => {\n acc[preset.name] = {\n label: preset.label,\n lightMode: { ...lightModeDefaults, ...(preset.lightMode ?? {}) },\n darkMode: { ...darkModeDefaults, ...(preset.darkMode ?? {}) },\n typography: preset.typography,\n borderRadius: preset.borderRadius,\n }\n return acc\n },\n {},\n)\n\nconst colorKeys = Object.keys(lightModeDefaults) as (keyof ColorModeColors)[]\n\ninterface ModePreviewProps {\n icon: string\n title: string\n colors: ColorModeColors\n typography: ResolvedTypographyPreview\n radius: {\n card: string\n chip: string\n pill: string\n }\n}\n\nfunction ModePreview({ icon, title, colors, typography, radius }: Readonly<ModePreviewProps>) {\n const background = colors.background ?? '#ffffff'\n const foreground = colors.foreground ?? '#0a0a0a'\n const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)'\n const cardBackground = colors.card ?? background\n const cardForeground = colors.cardForeground ?? foreground\n const primary = colors.primary ?? foreground\n const primaryForeground = colors.primaryForeground ?? background\n const secondary = colors.secondary ?? '#f4f4f5'\n const secondaryForeground = colors.secondaryForeground ?? foreground\n const muted = colors.muted ?? secondary\n const mutedForeground = colors.mutedForeground ?? secondaryForeground\n const accent = colors.accent ?? secondary\n const accentForeground = colors.accentForeground ?? secondaryForeground\n const headingFont = typography.headingFont\n const bodyFont = typography.bodyFont\n const baseFontSize = typography.baseFontSize\n const lineHeight = typography.lineHeight\n\n return (\n <div\n style={{\n display: 'grid',\n gap: '16px',\n padding: '18px',\n borderRadius: '12px',\n backgroundColor: background,\n color: foreground,\n border: `1px solid ${borderColor}`,\n boxShadow: '0 8px 20px rgba(15, 23, 42, 0.08)',\n fontFamily: bodyFont,\n }}\n >\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '12px',\n fontWeight: 600,\n letterSpacing: '0.08em',\n textTransform: 'uppercase',\n opacity: 0.7,\n }}\n >\n <span>\n {icon} {title}\n </span>\n <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>\n {background.toUpperCase()}\n </span>\n </div>\n\n <div\n style={{\n backgroundColor: cardBackground,\n color: cardForeground,\n borderRadius: radius.card,\n border: `1px solid ${borderColor}`,\n padding: '16px',\n display: 'flex',\n gap: '12px',\n flexWrap: 'wrap',\n }}\n >\n <button\n type=\"button\"\n style={{\n padding: '10px 18px',\n borderRadius: radius.pill,\n border: 'none',\n cursor: 'pointer',\n fontSize: '12px',\n fontWeight: 600,\n letterSpacing: '0.02em',\n backgroundColor: primary,\n color: primaryForeground,\n boxShadow: '0 6px 14px rgba(15, 23, 42, 0.15)',\n }}\n >\n Primary Action\n </button>\n <button\n type=\"button\"\n style={{\n padding: '10px 18px',\n borderRadius: radius.chip,\n border: '1px solid transparent',\n cursor: 'pointer',\n fontSize: '12px',\n fontWeight: 600,\n letterSpacing: '0.02em',\n backgroundColor: secondary,\n color: secondaryForeground,\n boxShadow: 'inset 0 0 0 1px rgba(15, 23, 42, 0.08)',\n }}\n >\n Secondary\n </button>\n </div>\n\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',\n gap: '10px',\n }}\n >\n <div\n style={{\n borderRadius: radius.chip,\n padding: '10px 12px',\n fontSize: '12px',\n fontWeight: 500,\n backgroundColor: muted,\n color: mutedForeground,\n }}\n >\n Muted Card\n </div>\n <div\n style={{\n borderRadius: radius.chip,\n padding: '10px 12px',\n fontSize: '12px',\n fontWeight: 500,\n backgroundColor: accent,\n color: accentForeground,\n }}\n >\n Accent Tag\n </div>\n </div>\n\n <div\n style={{\n display: 'grid',\n gap: '8px',\n borderRadius: '10px',\n border: `1px dashed ${borderColor}`,\n padding: '14px',\n backgroundColor: 'rgba(148, 163, 184, 0.08)',\n }}\n >\n <div\n style={{\n fontFamily: headingFont,\n fontSize: 'clamp(24px, 3vw, 32px)',\n fontWeight: 600,\n lineHeight: 1.2,\n }}\n >\n Nadpis / Heading preview\n </div>\n <p\n style={{\n margin: 0,\n fontFamily: bodyFont,\n fontSize: baseFontSize,\n lineHeight,\n color: foreground,\n opacity: 0.85,\n }}\n >\n Sphinx of black quartz, judge my vow. Příliš žluťoučký kůň úpěl ďábelské ódy.\n </p>\n <div\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: '10px',\n fontSize: '11px',\n color: 'rgba(15, 23, 42, 0.7)',\n }}\n >\n <span>Body: {typography.bodyLabel}</span>\n <span>Heading: {typography.headingLabel}</span>\n <span>Base size: {baseFontSize}</span>\n <span>Line height: {lineHeight}</span>\n </div>\n </div>\n </div>\n )\n}\n\nexport default function ThemePreviewField(props: SelectFieldClientProps) {\n const { field, path } = props\n const { value: selectedTheme, setValue } = useField<string>({ path })\n const { dispatchFields } = useForm()\n const formFields = useFormFields(([formState]) => formState)\n const hasAppliedInitialPresetRef = useRef(false)\n\n const applyPreset = useCallback(\n (presetName: string) => {\n const preset = themePresets[presetName]\n if (!preset) {\n return\n }\n\n colorKeys.forEach((key) => {\n const lightValue = preset.lightMode[key]\n const darkValue = preset.darkMode[key]\n\n if (lightValue) {\n dispatchFields({\n type: 'UPDATE',\n path: `themeConfiguration.lightMode.${key}`,\n value: lightValue,\n })\n }\n\n if (darkValue) {\n dispatchFields({\n type: 'UPDATE',\n path: `themeConfiguration.darkMode.${key}`,\n value: darkValue,\n })\n }\n })\n },\n [dispatchFields],\n )\n\n const handleThemeChange = useCallback(\n (event: ChangeEvent<HTMLSelectElement>) => {\n const value = event.target.value\n setValue(value)\n\n if (!value) {\n return\n }\n\n hasAppliedInitialPresetRef.current = true\n applyPreset(value)\n },\n [applyPreset, setValue],\n )\n\n useEffect(() => {\n if (!selectedTheme) {\n return\n }\n\n if (themePresets[selectedTheme]) {\n return\n }\n\n hasAppliedInitialPresetRef.current = false\n setValue(FALLBACK_THEME)\n }, [selectedTheme, setValue])\n\n useEffect(() => {\n if (hasAppliedInitialPresetRef.current) {\n return\n }\n\n if (!selectedTheme) {\n return\n }\n\n if (!formFields) {\n return\n }\n\n const preset = themePresets[selectedTheme]\n if (!preset) {\n hasAppliedInitialPresetRef.current = true\n return\n }\n\n const hasExistingValues = colorKeys.some((key) => {\n const lightField = formFields[`themeConfiguration.lightMode.${key}`]\n const darkField = formFields[`themeConfiguration.darkMode.${key}`]\n\n const lightValue = typeof lightField?.value === 'string' && lightField.value.trim().length > 0\n const darkValue = typeof darkField?.value === 'string' && darkField.value.trim().length > 0\n\n return lightValue || darkValue\n })\n\n if (hasExistingValues) {\n hasAppliedInitialPresetRef.current = true\n return\n }\n\n applyPreset(selectedTheme)\n hasAppliedInitialPresetRef.current = true\n }, [selectedTheme, formFields, applyPreset])\n\n const lightModeColors = useMemo(() => {\n const presetLightMode = selectedTheme ? themePresets[selectedTheme]?.lightMode : undefined\n\n return colorKeys.reduce<ColorModeColors>((acc, key) => {\n const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`]\n const rawValue =\n typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\n ? fieldState.value\n : undefined\n\n acc[key] = rawValue ?? presetLightMode?.[key] ?? lightModeDefaults[key]\n return acc\n }, {} as ColorModeColors)\n }, [formFields, selectedTheme])\n\n const darkModeColors = useMemo(() => {\n const presetDarkMode = selectedTheme ? themePresets[selectedTheme]?.darkMode : undefined\n\n return colorKeys.reduce<ColorModeColors>((acc, key) => {\n const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`]\n const rawValue =\n typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\n ? fieldState.value\n : undefined\n\n acc[key] = rawValue ?? presetDarkMode?.[key] ?? darkModeDefaults[key]\n return acc\n }, {} as ColorModeColors)\n }, [formFields, selectedTheme])\n\n const activePreset = selectedTheme ? themePresets[selectedTheme] : undefined\n const formTypographySelection = useMemo<TypographySelection | null>(() => {\n if (!formFields) {\n return null\n }\n\n const getValue = (key: string) => formFields[`themeConfiguration.typography.${key}`]?.value\n\n return {\n bodyFont: (getValue('bodyFont') as string | undefined) ?? undefined,\n headingFont: (getValue('headingFont') as string | undefined) ?? undefined,\n bodyFontCustom: (getValue('bodyFontCustom') as string | undefined) ?? undefined,\n headingFontCustom: (getValue('headingFontCustom') as string | undefined) ?? undefined,\n baseFontSize: (getValue('baseFontSize') as string | undefined) ?? undefined,\n lineHeight: (getValue('lineHeight') as string | undefined) ?? undefined,\n }\n }, [formFields])\n\n const previewTypography = useMemo<ResolvedTypographyPreview>(() => {\n return resolveTypographyPreview(formTypographySelection, selectedTheme)\n }, [formTypographySelection, selectedTheme])\n\n const borderRadiusValue = formFields?.['themeConfiguration.borderRadius']?.value\n const presetRadius = activePreset?.borderRadius ?? 'medium'\n const resolvedBorderRadius = (\n typeof borderRadiusValue === 'string' && borderRadiusValue.length\n ? borderRadiusValue\n : presetRadius\n ) as keyof typeof borderRadiusPresets\n const borderRadiusPreset = borderRadiusPresets[resolvedBorderRadius] ?? borderRadiusPresets.medium\n const borderRadiusCSS =\n typeof borderRadiusPreset.css === 'string'\n ? { '--radius-default': borderRadiusPreset.css }\n : (borderRadiusPreset.css as Record<string, string>)\n const previewRadius = {\n card: borderRadiusCSS['--radius-large'] ?? '1rem',\n chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',\n pill:\n borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px',\n }\n\n const fieldLabel =\n typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme'\n\n return (\n <div style={{ marginBottom: '24px' }}>\n <label\n style={{\n display: 'block',\n marginBottom: '10px',\n fontSize: '13px',\n fontWeight: 600,\n color: 'var(--theme-elevation-800)',\n }}\n >\n {fieldLabel}\n </label>\n\n <div\n style={{\n display: 'flex',\n flexWrap: 'wrap',\n gap: '24px',\n alignItems: 'flex-start',\n }}\n >\n <div\n style={{\n flex: '0 0 320px',\n minWidth: '260px',\n maxWidth: '420px',\n display: 'grid',\n gap: '12px',\n }}\n >\n <select\n value={selectedTheme || ''}\n onChange={handleThemeChange}\n style={{\n width: '100%',\n padding: '12px 14px',\n fontSize: '14px',\n borderRadius: '8px',\n border: '1px solid var(--theme-elevation-250)',\n backgroundColor: 'var(--theme-input-bg)',\n color: 'var(--theme-elevation-800)',\n cursor: 'pointer',\n }}\n >\n <option value=\"\">Select a theme…</option>\n {Object.entries(themePresets).map(([key, preset]) => (\n <option key={key} value={key}>\n {preset.label}\n </option>\n ))}\n </select>\n\n {activePreset && (\n <div\n style={{\n padding: '12px',\n borderRadius: '10px',\n border: '1px solid var(--theme-elevation-200)',\n backgroundColor: 'var(--theme-elevation-50)',\n display: 'grid',\n gap: '6px',\n fontSize: '12px',\n color: 'var(--theme-elevation-600)',\n }}\n >\n <div style={{ fontWeight: 600, color: 'var(--theme-elevation-800)' }}>\n {activePreset.label}\n </div>\n <div>Primary color: {activePreset.lightMode.primary}</div>\n <div>Accent color: {activePreset.lightMode.accent}</div>\n </div>\n )}\n\n {field.admin?.description && (\n <div\n style={{\n fontSize: '12px',\n color: 'var(--theme-elevation-600)',\n lineHeight: 1.5,\n }}\n >\n {typeof field.admin.description === 'string'\n ? field.admin.description\n : field.admin.description?.en || field.admin.description?.cs || ''}\n </div>\n )}\n </div>\n\n <div\n style={{\n flex: '1 1 420px',\n minWidth: '320px',\n position: 'sticky',\n top: '96px',\n alignSelf: 'flex-start',\n }}\n >\n <div\n style={{\n width: '100%',\n borderRadius: '16px',\n border: '1px solid var(--theme-elevation-200)',\n backgroundColor: 'var(--theme-elevation-25)',\n padding: '20px',\n display: 'grid',\n gap: '18px',\n maxHeight: 'calc(100vh - 140px)',\n overflowY: 'auto',\n }}\n >\n <div\n style={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontWeight: 600,\n fontSize: '13px',\n color: 'var(--theme-elevation-800)',\n }}\n >\n <span>🎨 Live Preview</span>\n <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>\n {activePreset ? activePreset.label : 'Custom palette'}\n </span>\n </div>\n\n <div\n style={{\n display: 'grid',\n gap: '16px',\n }}\n >\n <ModePreview\n icon=\"☀️\"\n title=\"Light Mode\"\n colors={lightModeColors}\n typography={previewTypography}\n radius={previewRadius}\n />\n <ModePreview\n icon=\"🌙\"\n title=\"Dark Mode\"\n colors={darkModeColors}\n typography={previewTypography}\n radius={previewRadius}\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],"names":["useField","useForm","useFormFields","useCallback","useEffect","useMemo","useRef","borderRadiusPresets","resolveTypographyPreview","defaultThemePresets","darkModeDefaults","lightModeDefaults","FALLBACK_THEME","name","themePresets","reduce","acc","preset","label","lightMode","darkMode","typography","borderRadius","colorKeys","Object","keys","ModePreview","icon","title","colors","radius","background","foreground","borderColor","border","cardBackground","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","headingFont","bodyFont","baseFontSize","lineHeight","div","style","display","gap","padding","backgroundColor","color","boxShadow","fontFamily","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","textTransform","opacity","span","toUpperCase","flexWrap","button","type","pill","cursor","chip","gridTemplateColumns","p","margin","bodyLabel","headingLabel","ThemePreviewField","props","field","path","value","selectedTheme","setValue","dispatchFields","formFields","formState","hasAppliedInitialPresetRef","applyPreset","presetName","forEach","key","lightValue","darkValue","handleThemeChange","event","target","current","hasExistingValues","some","lightField","darkField","trim","length","lightModeColors","presetLightMode","undefined","fieldState","rawValue","darkModeColors","presetDarkMode","activePreset","formTypographySelection","getValue","bodyFontCustom","headingFontCustom","previewTypography","borderRadiusValue","presetRadius","resolvedBorderRadius","borderRadiusPreset","medium","borderRadiusCSS","css","previewRadius","fieldLabel","en","cs","marginBottom","flex","minWidth","maxWidth","select","onChange","width","option","entries","map","admin","description","position","top","alignSelf","maxHeight","overflowY"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/fields/ThemePreviewField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField, useForm, useFormFields } from '@payloadcms/ui'\r\nimport type { SelectFieldClientProps } from 'payload'\r\nimport { useCallback, useEffect, useMemo, useRef, type ChangeEvent } from 'react'\r\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\r\nimport type {\r\n ResolvedTypographyPreview,\r\n TypographySelection,\r\n} from '../components/typographyPreviewUtils.js'\r\nimport { resolveTypographyPreview } from '../components/typographyPreviewUtils.js'\r\nimport { defaultThemePresets } from '../index.js'\r\nimport type { ThemeTypographyPreset } from '../presets.js'\r\nimport { darkModeDefaults, lightModeDefaults } from './colorModeFields.js'\r\n\r\ninterface ColorModeColors {\r\n background?: string\r\n foreground?: string\r\n card?: string\r\n cardForeground?: string\r\n popover?: string\r\n popoverForeground?: string\r\n primary?: string\r\n primaryForeground?: string\r\n secondary?: string\r\n secondaryForeground?: string\r\n muted?: string\r\n mutedForeground?: string\r\n accent?: string\r\n accentForeground?: string\r\n destructive?: string\r\n destructiveForeground?: string\r\n border?: string\r\n input?: string\r\n ring?: string\r\n}\r\n\r\ninterface ThemePresetDefinition {\r\n label: string\r\n lightMode: ColorModeColors\r\n darkMode: ColorModeColors\r\n typography?: ThemeTypographyPreset\r\n borderRadius: 'none' | 'small' | 'medium' | 'large' | 'xl'\r\n}\r\n\r\nconst FALLBACK_THEME = defaultThemePresets[0]?.name ?? 'cool'\r\n\r\nconst themePresets = defaultThemePresets.reduce<Record<string, ThemePresetDefinition>>(\r\n (acc, preset) => {\r\n acc[preset.name] = {\r\n label: preset.label,\r\n lightMode: { ...lightModeDefaults, ...(preset.lightMode ?? {}) },\r\n darkMode: { ...darkModeDefaults, ...(preset.darkMode ?? {}) },\r\n typography: preset.typography,\r\n borderRadius: preset.borderRadius,\r\n }\r\n return acc\r\n },\r\n {},\r\n)\r\n\r\nconst colorKeys = Object.keys(lightModeDefaults) as (keyof ColorModeColors)[]\r\n\r\ninterface ModePreviewProps {\r\n icon: string\r\n title: string\r\n colors: ColorModeColors\r\n typography: ResolvedTypographyPreview\r\n radius: {\r\n card: string\r\n chip: string\r\n pill: string\r\n }\r\n}\r\n\r\nfunction ModePreview({ icon, title, colors, typography, radius }: Readonly<ModePreviewProps>) {\r\n const background = colors.background ?? '#ffffff'\r\n const foreground = colors.foreground ?? '#0a0a0a'\r\n const borderColor = colors.border ?? 'rgba(148, 163, 184, 0.35)'\r\n const cardBackground = colors.card ?? background\r\n const cardForeground = colors.cardForeground ?? foreground\r\n const primary = colors.primary ?? foreground\r\n const primaryForeground = colors.primaryForeground ?? background\r\n const secondary = colors.secondary ?? '#f4f4f5'\r\n const secondaryForeground = colors.secondaryForeground ?? foreground\r\n const muted = colors.muted ?? secondary\r\n const mutedForeground = colors.mutedForeground ?? secondaryForeground\r\n const accent = colors.accent ?? secondary\r\n const accentForeground = colors.accentForeground ?? secondaryForeground\r\n const headingFont = typography.headingFont\r\n const bodyFont = typography.bodyFont\r\n const baseFontSize = typography.baseFontSize\r\n const lineHeight = typography.lineHeight\r\n\r\n return (\r\n <div\r\n style={{\r\n display: 'grid',\r\n gap: '16px',\r\n padding: '18px',\r\n borderRadius: '12px',\r\n backgroundColor: background,\r\n color: foreground,\r\n border: `1px solid ${borderColor}`,\r\n boxShadow: '0 8px 20px rgba(15, 23, 42, 0.08)',\r\n fontFamily: bodyFont,\r\n }}\r\n >\r\n <div\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n fontSize: '12px',\r\n fontWeight: 600,\r\n letterSpacing: '0.08em',\r\n textTransform: 'uppercase',\r\n opacity: 0.7,\r\n }}\r\n >\r\n <span>\r\n {icon} {title}\r\n </span>\r\n <span style={{ fontFamily: 'monospace', fontSize: '11px' }}>\r\n {background.toUpperCase()}\r\n </span>\r\n </div>\r\n\r\n <div\r\n style={{\r\n backgroundColor: cardBackground,\r\n color: cardForeground,\r\n borderRadius: radius.card,\r\n border: `1px solid ${borderColor}`,\r\n padding: '16px',\r\n display: 'flex',\r\n gap: '12px',\r\n flexWrap: 'wrap',\r\n }}\r\n >\r\n <button\r\n type=\"button\"\r\n style={{\r\n padding: '10px 18px',\r\n borderRadius: radius.pill,\r\n border: 'none',\r\n cursor: 'pointer',\r\n fontSize: '12px',\r\n fontWeight: 600,\r\n letterSpacing: '0.02em',\r\n backgroundColor: primary,\r\n color: primaryForeground,\r\n boxShadow: '0 6px 14px rgba(15, 23, 42, 0.15)',\r\n }}\r\n >\r\n Primary Action\r\n </button>\r\n <button\r\n type=\"button\"\r\n style={{\r\n padding: '10px 18px',\r\n borderRadius: radius.chip,\r\n border: '1px solid transparent',\r\n cursor: 'pointer',\r\n fontSize: '12px',\r\n fontWeight: 600,\r\n letterSpacing: '0.02em',\r\n backgroundColor: secondary,\r\n color: secondaryForeground,\r\n boxShadow: 'inset 0 0 0 1px rgba(15, 23, 42, 0.08)',\r\n }}\r\n >\r\n Secondary\r\n </button>\r\n </div>\r\n\r\n <div\r\n style={{\r\n display: 'grid',\r\n gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',\r\n gap: '10px',\r\n }}\r\n >\r\n <div\r\n style={{\r\n borderRadius: radius.chip,\r\n padding: '10px 12px',\r\n fontSize: '12px',\r\n fontWeight: 500,\r\n backgroundColor: muted,\r\n color: mutedForeground,\r\n }}\r\n >\r\n Muted Card\r\n </div>\r\n <div\r\n style={{\r\n borderRadius: radius.chip,\r\n padding: '10px 12px',\r\n fontSize: '12px',\r\n fontWeight: 500,\r\n backgroundColor: accent,\r\n color: accentForeground,\r\n }}\r\n >\r\n Accent Tag\r\n </div>\r\n </div>\r\n\r\n <div\r\n style={{\r\n display: 'grid',\r\n gap: '8px',\r\n borderRadius: '10px',\r\n border: `1px dashed ${borderColor}`,\r\n padding: '14px',\r\n backgroundColor: 'rgba(148, 163, 184, 0.08)',\r\n }}\r\n >\r\n <div\r\n style={{\r\n fontFamily: headingFont,\r\n fontSize: 'clamp(24px, 3vw, 32px)',\r\n fontWeight: 600,\r\n lineHeight: 1.2,\r\n }}\r\n >\r\n Nadpis / Heading preview\r\n </div>\r\n <p\r\n style={{\r\n margin: 0,\r\n fontFamily: bodyFont,\r\n fontSize: baseFontSize,\r\n lineHeight,\r\n color: foreground,\r\n opacity: 0.85,\r\n }}\r\n >\r\n Sphinx of black quartz, judge my vow. Příliš žluťoučký kůň úpěl ďábelské ódy.\r\n </p>\r\n <div\r\n style={{\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n gap: '10px',\r\n fontSize: '11px',\r\n color: 'rgba(15, 23, 42, 0.7)',\r\n }}\r\n >\r\n <span>Body: {typography.bodyLabel}</span>\r\n <span>Heading: {typography.headingLabel}</span>\r\n <span>Base size: {baseFontSize}</span>\r\n <span>Line height: {lineHeight}</span>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n\r\nexport default function ThemePreviewField(props: SelectFieldClientProps) {\r\n const { field, path } = props\r\n const { value: selectedTheme, setValue } = useField<string>({ path })\r\n const { dispatchFields } = useForm()\r\n const formFields = useFormFields(([formState]) => formState)\r\n const hasAppliedInitialPresetRef = useRef(false)\r\n\r\n const applyPreset = useCallback(\r\n (presetName: string) => {\r\n const preset = themePresets[presetName]\r\n if (!preset) {\r\n return\r\n }\r\n\r\n colorKeys.forEach((key) => {\r\n const lightValue = preset.lightMode[key]\r\n const darkValue = preset.darkMode[key]\r\n\r\n if (lightValue) {\r\n dispatchFields({\r\n type: 'UPDATE',\r\n path: `themeConfiguration.lightMode.${key}`,\r\n value: lightValue,\r\n })\r\n }\r\n\r\n if (darkValue) {\r\n dispatchFields({\r\n type: 'UPDATE',\r\n path: `themeConfiguration.darkMode.${key}`,\r\n value: darkValue,\r\n })\r\n }\r\n })\r\n },\r\n [dispatchFields],\r\n )\r\n\r\n const handleThemeChange = useCallback(\r\n (event: ChangeEvent<HTMLSelectElement>) => {\r\n const value = event.target.value\r\n setValue(value)\r\n\r\n if (!value) {\r\n return\r\n }\r\n\r\n hasAppliedInitialPresetRef.current = true\r\n applyPreset(value)\r\n },\r\n [applyPreset, setValue],\r\n )\r\n\r\n useEffect(() => {\r\n if (!selectedTheme) {\r\n return\r\n }\r\n\r\n if (themePresets[selectedTheme]) {\r\n return\r\n }\r\n\r\n hasAppliedInitialPresetRef.current = false\r\n setValue(FALLBACK_THEME)\r\n }, [selectedTheme, setValue])\r\n\r\n useEffect(() => {\r\n if (hasAppliedInitialPresetRef.current) {\r\n return\r\n }\r\n\r\n if (!selectedTheme) {\r\n return\r\n }\r\n\r\n if (!formFields) {\r\n return\r\n }\r\n\r\n const preset = themePresets[selectedTheme]\r\n if (!preset) {\r\n hasAppliedInitialPresetRef.current = true\r\n return\r\n }\r\n\r\n const hasExistingValues = colorKeys.some((key) => {\r\n const lightField = formFields[`themeConfiguration.lightMode.${key}`]\r\n const darkField = formFields[`themeConfiguration.darkMode.${key}`]\r\n\r\n const lightValue = typeof lightField?.value === 'string' && lightField.value.trim().length > 0\r\n const darkValue = typeof darkField?.value === 'string' && darkField.value.trim().length > 0\r\n\r\n return lightValue || darkValue\r\n })\r\n\r\n if (hasExistingValues) {\r\n hasAppliedInitialPresetRef.current = true\r\n return\r\n }\r\n\r\n applyPreset(selectedTheme)\r\n hasAppliedInitialPresetRef.current = true\r\n }, [selectedTheme, formFields, applyPreset])\r\n\r\n const lightModeColors = useMemo(() => {\r\n const presetLightMode = selectedTheme ? themePresets[selectedTheme]?.lightMode : undefined\r\n\r\n return colorKeys.reduce<ColorModeColors>((acc, key) => {\r\n const fieldState = formFields?.[`themeConfiguration.lightMode.${key}`]\r\n const rawValue =\r\n typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\r\n ? fieldState.value\r\n : undefined\r\n\r\n acc[key] = rawValue ?? presetLightMode?.[key] ?? lightModeDefaults[key]\r\n return acc\r\n }, {} as ColorModeColors)\r\n }, [formFields, selectedTheme])\r\n\r\n const darkModeColors = useMemo(() => {\r\n const presetDarkMode = selectedTheme ? themePresets[selectedTheme]?.darkMode : undefined\r\n\r\n return colorKeys.reduce<ColorModeColors>((acc, key) => {\r\n const fieldState = formFields?.[`themeConfiguration.darkMode.${key}`]\r\n const rawValue =\r\n typeof fieldState?.value === 'string' && fieldState.value.trim().length > 0\r\n ? fieldState.value\r\n : undefined\r\n\r\n acc[key] = rawValue ?? presetDarkMode?.[key] ?? darkModeDefaults[key]\r\n return acc\r\n }, {} as ColorModeColors)\r\n }, [formFields, selectedTheme])\r\n\r\n const activePreset = selectedTheme ? themePresets[selectedTheme] : undefined\r\n const formTypographySelection = useMemo<TypographySelection | null>(() => {\r\n if (!formFields) {\r\n return null\r\n }\r\n\r\n const getValue = (key: string) => formFields[`themeConfiguration.typography.${key}`]?.value\r\n\r\n return {\r\n bodyFont: (getValue('bodyFont') as string | undefined) ?? undefined,\r\n headingFont: (getValue('headingFont') as string | undefined) ?? undefined,\r\n bodyFontCustom: (getValue('bodyFontCustom') as string | undefined) ?? undefined,\r\n headingFontCustom: (getValue('headingFontCustom') as string | undefined) ?? undefined,\r\n baseFontSize: (getValue('baseFontSize') as string | undefined) ?? undefined,\r\n lineHeight: (getValue('lineHeight') as string | undefined) ?? undefined,\r\n }\r\n }, [formFields])\r\n\r\n const previewTypography = useMemo<ResolvedTypographyPreview>(() => {\r\n return resolveTypographyPreview(formTypographySelection, selectedTheme)\r\n }, [formTypographySelection, selectedTheme])\r\n\r\n const borderRadiusValue = formFields?.['themeConfiguration.borderRadius']?.value\r\n const presetRadius = activePreset?.borderRadius ?? 'medium'\r\n const resolvedBorderRadius = (\r\n typeof borderRadiusValue === 'string' && borderRadiusValue.length\r\n ? borderRadiusValue\r\n : presetRadius\r\n ) as keyof typeof borderRadiusPresets\r\n const borderRadiusPreset = borderRadiusPresets[resolvedBorderRadius] ?? borderRadiusPresets.medium\r\n const borderRadiusCSS =\r\n typeof borderRadiusPreset.css === 'string'\r\n ? { '--radius-default': borderRadiusPreset.css }\r\n : (borderRadiusPreset.css as Record<string, string>)\r\n const previewRadius = {\r\n card: borderRadiusCSS['--radius-large'] ?? '1rem',\r\n chip: borderRadiusCSS['--radius-default'] ?? '0.75rem',\r\n pill:\r\n borderRadiusCSS['--radius-xl'] ?? borderRadiusCSS['--radius-large'] ?? '999px',\r\n }\r\n\r\n const fieldLabel =\r\n typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme'\r\n\r\n return (\r\n <div style={{ marginBottom: '24px' }}>\r\n <label\r\n style={{\r\n display: 'block',\r\n marginBottom: '10px',\r\n fontSize: '13px',\r\n fontWeight: 600,\r\n color: 'var(--theme-elevation-800)',\r\n }}\r\n >\r\n {fieldLabel}\r\n </label>\r\n\r\n <div\r\n style={{\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n gap: '24px',\r\n alignItems: 'flex-start',\r\n }}\r\n >\r\n <div\r\n style={{\r\n flex: '0 0 320px',\r\n minWidth: '260px',\r\n maxWidth: '420px',\r\n display: 'grid',\r\n gap: '12px',\r\n }}\r\n >\r\n <select\r\n value={selectedTheme || ''}\r\n onChange={handleThemeChange}\r\n style={{\r\n width: '100%',\r\n padding: '12px 14px',\r\n fontSize: '14px',\r\n borderRadius: '8px',\r\n border: '1px solid var(--theme-elevation-250)',\r\n backgroundColor: 'var(--theme-input-bg)',\r\n color: 'var(--theme-elevation-800)',\r\n cursor: 'pointer',\r\n }}\r\n >\r\n <option value=\"\">Select a theme…</option>\r\n {Object.entries(themePresets).map(([key, preset]) => (\r\n <option key={key} value={key}>\r\n {preset.label}\r\n </option>\r\n ))}\r\n </select>\r\n\r\n {activePreset && (\r\n <div\r\n style={{\r\n padding: '12px',\r\n borderRadius: '10px',\r\n border: '1px solid var(--theme-elevation-200)',\r\n backgroundColor: 'var(--theme-elevation-50)',\r\n display: 'grid',\r\n gap: '6px',\r\n fontSize: '12px',\r\n color: 'var(--theme-elevation-600)',\r\n }}\r\n >\r\n <div style={{ fontWeight: 600, color: 'var(--theme-elevation-800)' }}>\r\n {activePreset.label}\r\n </div>\r\n <div>Primary color: {activePreset.lightMode.primary}</div>\r\n <div>Accent color: {activePreset.lightMode.accent}</div>\r\n </div>\r\n )}\r\n\r\n {field.admin?.description && (\r\n <div\r\n style={{\r\n fontSize: '12px',\r\n color: 'var(--theme-elevation-600)',\r\n lineHeight: 1.5,\r\n }}\r\n >\r\n {typeof field.admin.description === 'string'\r\n ? field.admin.description\r\n : field.admin.description?.en || field.admin.description?.cs || ''}\r\n </div>\r\n )}\r\n </div>\r\n\r\n <div\r\n style={{\r\n flex: '1 1 420px',\r\n minWidth: '320px',\r\n position: 'sticky',\r\n top: '96px',\r\n alignSelf: 'flex-start',\r\n }}\r\n >\r\n <div\r\n style={{\r\n width: '100%',\r\n borderRadius: '16px',\r\n border: '1px solid var(--theme-elevation-200)',\r\n backgroundColor: 'var(--theme-elevation-25)',\r\n padding: '20px',\r\n display: 'grid',\r\n gap: '18px',\r\n maxHeight: 'calc(100vh - 140px)',\r\n overflowY: 'auto',\r\n }}\r\n >\r\n <div\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n fontWeight: 600,\r\n fontSize: '13px',\r\n color: 'var(--theme-elevation-800)',\r\n }}\r\n >\r\n <span>🎨 Live Preview</span>\r\n <span style={{ fontSize: '12px', color: 'var(--theme-elevation-600)' }}>\r\n {activePreset ? activePreset.label : 'Custom palette'}\r\n </span>\r\n </div>\r\n\r\n <div\r\n style={{\r\n display: 'grid',\r\n gap: '16px',\r\n }}\r\n >\r\n <ModePreview\r\n icon=\"☀️\"\r\n title=\"Light Mode\"\r\n colors={lightModeColors}\r\n typography={previewTypography}\r\n radius={previewRadius}\r\n />\r\n <ModePreview\r\n icon=\"🌙\"\r\n title=\"Dark Mode\"\r\n colors={darkModeColors}\r\n typography={previewTypography}\r\n radius={previewRadius}\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}\r\n"],"names":["useField","useForm","useFormFields","useCallback","useEffect","useMemo","useRef","borderRadiusPresets","resolveTypographyPreview","defaultThemePresets","darkModeDefaults","lightModeDefaults","FALLBACK_THEME","name","themePresets","reduce","acc","preset","label","lightMode","darkMode","typography","borderRadius","colorKeys","Object","keys","ModePreview","icon","title","colors","radius","background","foreground","borderColor","border","cardBackground","card","cardForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","headingFont","bodyFont","baseFontSize","lineHeight","div","style","display","gap","padding","backgroundColor","color","boxShadow","fontFamily","alignItems","justifyContent","fontSize","fontWeight","letterSpacing","textTransform","opacity","span","toUpperCase","flexWrap","button","type","pill","cursor","chip","gridTemplateColumns","p","margin","bodyLabel","headingLabel","ThemePreviewField","props","field","path","value","selectedTheme","setValue","dispatchFields","formFields","formState","hasAppliedInitialPresetRef","applyPreset","presetName","forEach","key","lightValue","darkValue","handleThemeChange","event","target","current","hasExistingValues","some","lightField","darkField","trim","length","lightModeColors","presetLightMode","undefined","fieldState","rawValue","darkModeColors","presetDarkMode","activePreset","formTypographySelection","getValue","bodyFontCustom","headingFontCustom","previewTypography","borderRadiusValue","presetRadius","resolvedBorderRadius","borderRadiusPreset","medium","borderRadiusCSS","css","previewRadius","fieldLabel","en","cs","marginBottom","flex","minWidth","maxWidth","select","onChange","width","option","entries","map","admin","description","position","top","alignSelf","maxHeight","overflowY"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useCallback, useEffect, useState } from 'react'\nimport { defaultThemePresets } from '../presets.js'\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\n\ninterface ThemeColorOption {\n value: string\n label: string\n color: string\n description?: string\n}\n\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\n { value: 'background', label: 'Theme background', color: 'var(--background)' },\n { value: 'card', label: 'Card background', color: 'var(--card)' },\n { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },\n { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },\n { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },\n { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },\n]\n\nasync function fetchThemeConfiguration(): Promise<Record<string, unknown> | null> {\n try {\n const response = await fetch('/api/site-settings')\n if (!response.ok) {\n return null\n }\n const data = await response.json()\n return data?.docs?.[0]?.themeConfiguration ?? null\n } catch (error) {\n console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error)\n return null\n }\n}\n\nfunction buildOptionsFromConfiguration(configuration: Record<string, unknown> | null): ThemeColorOption[] {\n if (!configuration) {\n return FALLBACK_TOKENS\n }\n\n const resolved = resolveThemeConfiguration(configuration)\n const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {}\n const orderedKeys: string[] = [\n 'background',\n 'card',\n 'muted',\n 'accent',\n 'secondary',\n 'primary',\n 'popover',\n ]\n\n const typedLightMode = lightMode as Record<string, string | null | undefined>\n\n const tokens = orderedKeys\n .map((key) => {\n const value = typedLightMode?.[key]\n if (typeof value !== 'string' || value.trim().length === 0) {\n return null\n }\n\n const labelMap: Record<string, string> = {\n background: 'Theme background',\n card: 'Card background',\n muted: 'Muted surface',\n accent: 'Accent surface',\n secondary: 'Secondary surface',\n primary: 'Primary surface',\n popover: 'Popover surface',\n }\n\n return {\n value: key,\n label: labelMap[key] ?? key,\n color: value,\n }\n })\n .filter((token): token is ThemeColorOption => Boolean(token))\n\n return tokens.length > 0 ? tokens : FALLBACK_TOKENS\n}\n\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\n const { path, field } = props\n const { value, setValue } = useField<string>({ path })\n const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\n const selectedValue = value || 'background'\n\n useEffect(() => {\n let isMounted = true\n\n fetchThemeConfiguration().then((configuration) => {\n if (!isMounted) return\n setOptions(buildOptionsFromConfiguration(configuration))\n })\n\n return () => {\n isMounted = false\n }\n }, [])\n\n const handleSelect = useCallback(\n (nextValue: string) => {\n setValue(nextValue)\n },\n [setValue],\n )\n\n const label = typeof field.label === 'string' ? field.label : ''\n let description = ''\n if (typeof field.admin?.description === 'string') {\n description = field.admin.description\n } else if (\n field.admin?.description &&\n typeof field.admin.description === 'object' &&\n typeof field.admin.description.en === 'string'\n ) {\n description = field.admin.description.en\n }\n\n return (\n <div className=\"field-type theme-token-select\">\n {label && (\n <label\n className=\"field-label\"\n htmlFor={path}\n style={{ display: 'block', marginBottom: '8px' }}\n >\n {label}\n {field.required && <span className=\"required\">*</span>}\n </label>\n )}\n\n {description && (\n <div\n className=\"field-description\"\n style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\n >\n {description}\n </div>\n )}\n\n <div\n className=\"token-grid\"\n style={{\n display: 'grid',\n gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\n gap: '10px',\n }}\n >\n {options.map((option) => {\n const isActive = option.value === selectedValue\n return (\n <button\n type=\"button\"\n key={option.value}\n onClick={() => handleSelect(option.value)}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '10px',\n padding: '10px 12px',\n borderRadius: '10px',\n border: isActive\n ? '2px solid var(--theme-primary-500)'\n : '1px solid var(--theme-elevation-150)',\n backgroundColor: 'var(--theme-elevation-0)',\n boxShadow: isActive\n ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\n : '0 1px 2px rgba(15, 23, 42, 0.08)',\n cursor: 'pointer',\n transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\n }}\n >\n <span\n aria-hidden\n style={{\n width: '32px',\n height: '32px',\n borderRadius: '8px',\n border: '1px solid rgba(15, 23, 42, 0.08)',\n background: option.color,\n }}\n />\n <span\n style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\n >\n {option.label}\n </span>\n </button>\n )\n })}\n </div>\n\n <select\n id={path}\n value={selectedValue}\n onChange={(event) => handleSelect(event.target.value)}\n style={{ display: 'none' }}\n >\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n </div>\n )\n}\n"],"names":["useField","useCallback","useEffect","useState","defaultThemePresets","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","color","fetchThemeConfiguration","response","fetch","ok","data","json","docs","themeConfiguration","error","console","warn","buildOptionsFromConfiguration","configuration","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","Boolean","ThemeTokenSelectField","props","path","field","setValue","options","setOptions","selectedValue","isMounted","then","handleSelect","nextValue","description","admin","en","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","option","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","fontWeight","select","id","onChange","event","target"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AAEzC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AACxD,SAASC,mBAAmB,QAAQ,gBAAe;AACnD,SAASC,yBAAyB,QAAQ,wCAAuC;AASjF,MAAMC,kBAAsC;IAC1C;QAAEC,OAAO;QAAcC,OAAO;QAAoBC,OAAO;IAAoB;IAC7E;QAAEF,OAAO;QAAQC,OAAO;QAAmBC,OAAO;IAAc;IAChE;QAAEF,OAAO;QAASC,OAAO;QAAiBC,OAAO;IAAe;IAChE;QAAEF,OAAO;QAAUC,OAAO;QAAkBC,OAAO;IAAgB;IACnE;QAAEF,OAAO;QAAaC,OAAO;QAAqBC,OAAO;IAAmB;IAC5E;QAAEF,OAAO;QAAWC,OAAO;QAAmBC,OAAO;IAAiB;CACvE;AAED,eAAeC;IACb,IAAI;QACF,MAAMC,WAAW,MAAMC,MAAM;QAC7B,IAAI,CAACD,SAASE,EAAE,EAAE;YAChB,OAAO;QACT;QACA,MAAMC,OAAO,MAAMH,SAASI,IAAI;QAChC,OAAOD,MAAME,MAAM,CAAC,EAAE,EAAEC,sBAAsB;IAChD,EAAE,OAAOC,OAAO;QACdC,QAAQC,IAAI,CAAC,gEAAgEF;QAC7E,OAAO;IACT;AACF;AAEA,SAASG,8BAA8BC,aAA6C;IAClF,IAAI,CAACA,eAAe;QAClB,OAAOhB;IACT;IAEA,MAAMiB,WAAWlB,0BAA0BiB;IAC3C,MAAME,YAAYD,SAASC,SAAS,IAAIpB,mBAAmB,CAAC,EAAE,EAAEoB,aAAa,CAAC;IAC9E,MAAMC,cAAwB;QAC5B;QACA;QACA;QACA;QACA;QACA;QACA;KACD;IAED,MAAMC,iBAAiBF;IAEvB,MAAMG,SAASF,YACZG,GAAG,CAAC,CAACC;QACJ,MAAMtB,QAAQmB,gBAAgB,CAACG,IAAI;QACnC,IAAI,OAAOtB,UAAU,YAAYA,MAAMuB,IAAI,GAAGC,MAAM,KAAK,GAAG;YAC1D,OAAO;QACT;QAEA,MAAMC,WAAmC;YACvCC,YAAY;YACZC,MAAM;YACNC,OAAO;YACPC,QAAQ;YACRC,WAAW;YACXC,SAAS;YACTC,SAAS;QACX;QAEA,OAAO;YACLhC,OAAOsB;YACPrB,OAAOwB,QAAQ,CAACH,IAAI,IAAIA;YACxBpB,OAAOF;QACT;IACF,GACCiC,MAAM,CAAC,CAACC,QAAqCC,QAAQD;IAExD,OAAOd,OAAOI,MAAM,GAAG,IAAIJ,SAASrB;AACtC;AAEA,eAAe,SAASqC,sBAAsBC,KAA6B;IACzE,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAM,EAAErC,KAAK,EAAEwC,QAAQ,EAAE,GAAG/C,SAAiB;QAAE6C;IAAK;IACpD,MAAM,CAACG,SAASC,WAAW,GAAG9C,SAA6BG;IAC3D,MAAM4C,gBAAgB3C,SAAS;IAE/BL,UAAU;QACR,IAAIiD,YAAY;QAEhBzC,0BAA0B0C,IAAI,CAAC,CAAC9B;YAC9B,IAAI,CAAC6B,WAAW;YAChBF,WAAW5B,8BAA8BC;QAC3C;QAEA,OAAO;YACL6B,YAAY;QACd;IACF,GAAG,EAAE;IAEL,MAAME,eAAepD,YACnB,CAACqD;QACCP,SAASO;IACX,GACA;QAACP;KAAS;IAGZ,MAAMvC,QAAQ,OAAOsC,MAAMtC,KAAK,KAAK,WAAWsC,MAAMtC,KAAK,GAAG;IAC9D,IAAI+C,cAAc;IAClB,IAAI,OAAOT,MAAMU,KAAK,EAAED,gBAAgB,UAAU;QAChDA,cAAcT,MAAMU,KAAK,CAACD,WAAW;IACvC,OAAO,IACLT,MAAMU,KAAK,EAAED,eACb,OAAOT,MAAMU,KAAK,CAACD,WAAW,KAAK,YACnC,OAAOT,MAAMU,KAAK,CAACD,WAAW,CAACE,EAAE,KAAK,UACtC;QACAF,cAAcT,MAAMU,KAAK,CAACD,WAAW,CAACE,EAAE;IAC1C;IAEA,qBACE,MAACC;QAAIC,WAAU;;YACZnD,uBACC,MAACA;gBACCmD,WAAU;gBACVC,SAASf;gBACTgB,OAAO;oBAAEC,SAAS;oBAASC,cAAc;gBAAM;;oBAE9CvD;oBACAsC,MAAMkB,QAAQ,kBAAI,KAACC;wBAAKN,WAAU;kCAAW;;;;YAIjDJ,6BACC,KAACG;gBACCC,WAAU;gBACVE,OAAO;oBAAEE,cAAc;oBAAQG,UAAU;oBAAQzD,OAAO;gBAA6B;0BAEpF8C;;0BAIL,KAACG;gBACCC,WAAU;gBACVE,OAAO;oBACLC,SAAS;oBACTK,qBAAqB;oBACrBC,KAAK;gBACP;0BAECpB,QAAQpB,GAAG,CAAC,CAACyC;oBACZ,MAAMC,WAAWD,OAAO9D,KAAK,KAAK2C;oBAClC,qBACE,MAACqB;wBACCC,MAAK;wBAELC,SAAS,IAAMpB,aAAagB,OAAO9D,KAAK;wBACxCsD,OAAO;4BACLC,SAAS;4BACTY,YAAY;4BACZN,KAAK;4BACLO,SAAS;4BACTC,cAAc;4BACdC,QAAQP,WACJ,uCACA;4BACJQ,iBAAiB;4BACjBC,WAAWT,WACP,8CACA;4BACJU,QAAQ;4BACRC,YAAY;wBACd;;0CAEA,KAAChB;gCACCiB,aAAW;gCACXrB,OAAO;oCACLsB,OAAO;oCACPC,QAAQ;oCACRR,cAAc;oCACdC,QAAQ;oCACR5C,YAAYoC,OAAO5D,KAAK;gCAC1B;;0CAEF,KAACwD;gCACCJ,OAAO;oCAAEK,UAAU;oCAAQmB,YAAY;oCAAK5E,OAAO;gCAA6B;0CAE/E4D,OAAO7D,KAAK;;;uBAhCV6D,OAAO9D,KAAK;gBAoCvB;;0BAGF,KAAC+E;gBACCC,IAAI1C;gBACJtC,OAAO2C;gBACPsC,UAAU,CAACC,QAAUpC,aAAaoC,MAAMC,MAAM,CAACnF,KAAK;gBACpDsD,OAAO;oBAAEC,SAAS;gBAAO;0BAExBd,QAAQpB,GAAG,CAAC,CAACyC,uBACZ,KAACA;wBAA0B9D,OAAO8D,OAAO9D,KAAK;kCAC3C8D,OAAO7D,KAAK;uBADF6D,OAAO9D,KAAK;;;;AAOnC"}
|
|
1
|
+
{"version":3,"sources":["../../src/fields/ThemeTokenSelectField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField } from '@payloadcms/ui'\r\nimport type { SelectFieldClientProps } from 'payload'\r\nimport { useCallback, useEffect, useState } from 'react'\r\nimport { defaultThemePresets } from '../presets.js'\r\nimport { resolveThemeConfiguration } from '../utils/resolveThemeConfiguration.js'\r\n\r\ninterface ThemeColorOption {\r\n value: string\r\n label: string\r\n color: string\r\n description?: string\r\n}\r\n\r\nconst FALLBACK_TOKENS: ThemeColorOption[] = [\r\n { value: 'background', label: 'Theme background', color: 'var(--background)' },\r\n { value: 'card', label: 'Card background', color: 'var(--card)' },\r\n { value: 'muted', label: 'Muted surface', color: 'var(--muted)' },\r\n { value: 'accent', label: 'Accent surface', color: 'var(--accent)' },\r\n { value: 'secondary', label: 'Secondary surface', color: 'var(--secondary)' },\r\n { value: 'primary', label: 'Primary surface', color: 'var(--primary)' },\r\n]\r\n\r\nasync function fetchThemeConfiguration(): Promise<Record<string, unknown> | null> {\r\n try {\r\n const response = await fetch('/api/site-settings')\r\n if (!response.ok) {\r\n return null\r\n }\r\n const data = await response.json()\r\n return data?.docs?.[0]?.themeConfiguration ?? null\r\n } catch (error) {\r\n console.warn('[ThemeTokenSelectField] Failed to fetch theme configuration:', error)\r\n return null\r\n }\r\n}\r\n\r\nfunction buildOptionsFromConfiguration(configuration: Record<string, unknown> | null): ThemeColorOption[] {\r\n if (!configuration) {\r\n return FALLBACK_TOKENS\r\n }\r\n\r\n const resolved = resolveThemeConfiguration(configuration)\r\n const lightMode = resolved.lightMode ?? defaultThemePresets[0]?.lightMode ?? {}\r\n const orderedKeys: string[] = [\r\n 'background',\r\n 'card',\r\n 'muted',\r\n 'accent',\r\n 'secondary',\r\n 'primary',\r\n 'popover',\r\n ]\r\n\r\n const typedLightMode = lightMode as Record<string, string | null | undefined>\r\n\r\n const tokens = orderedKeys\r\n .map((key) => {\r\n const value = typedLightMode?.[key]\r\n if (typeof value !== 'string' || value.trim().length === 0) {\r\n return null\r\n }\r\n\r\n const labelMap: Record<string, string> = {\r\n background: 'Theme background',\r\n card: 'Card background',\r\n muted: 'Muted surface',\r\n accent: 'Accent surface',\r\n secondary: 'Secondary surface',\r\n primary: 'Primary surface',\r\n popover: 'Popover surface',\r\n }\r\n\r\n return {\r\n value: key,\r\n label: labelMap[key] ?? key,\r\n color: value,\r\n }\r\n })\r\n .filter((token): token is ThemeColorOption => Boolean(token))\r\n\r\n return tokens.length > 0 ? tokens : FALLBACK_TOKENS\r\n}\r\n\r\nexport default function ThemeTokenSelectField(props: SelectFieldClientProps) {\r\n const { path, field } = props\r\n const { value, setValue } = useField<string>({ path })\r\n const [options, setOptions] = useState<ThemeColorOption[]>(FALLBACK_TOKENS)\r\n const selectedValue = value || 'background'\r\n\r\n useEffect(() => {\r\n let isMounted = true\r\n\r\n fetchThemeConfiguration().then((configuration) => {\r\n if (!isMounted) return\r\n setOptions(buildOptionsFromConfiguration(configuration))\r\n })\r\n\r\n return () => {\r\n isMounted = false\r\n }\r\n }, [])\r\n\r\n const handleSelect = useCallback(\r\n (nextValue: string) => {\r\n setValue(nextValue)\r\n },\r\n [setValue],\r\n )\r\n\r\n const label = typeof field.label === 'string' ? field.label : ''\r\n let description = ''\r\n if (typeof field.admin?.description === 'string') {\r\n description = field.admin.description\r\n } else if (\r\n field.admin?.description &&\r\n typeof field.admin.description === 'object' &&\r\n typeof field.admin.description.en === 'string'\r\n ) {\r\n description = field.admin.description.en\r\n }\r\n\r\n return (\r\n <div className=\"field-type theme-token-select\">\r\n {label && (\r\n <label\r\n className=\"field-label\"\r\n htmlFor={path}\r\n style={{ display: 'block', marginBottom: '8px' }}\r\n >\r\n {label}\r\n {field.required && <span className=\"required\">*</span>}\r\n </label>\r\n )}\r\n\r\n {description && (\r\n <div\r\n className=\"field-description\"\r\n style={{ marginBottom: '12px', fontSize: '13px', color: 'var(--theme-elevation-500)' }}\r\n >\r\n {description}\r\n </div>\r\n )}\r\n\r\n <div\r\n className=\"token-grid\"\r\n style={{\r\n display: 'grid',\r\n gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',\r\n gap: '10px',\r\n }}\r\n >\r\n {options.map((option) => {\r\n const isActive = option.value === selectedValue\r\n return (\r\n <button\r\n type=\"button\"\r\n key={option.value}\r\n onClick={() => handleSelect(option.value)}\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px',\r\n padding: '10px 12px',\r\n borderRadius: '10px',\r\n border: isActive\r\n ? '2px solid var(--theme-primary-500)'\r\n : '1px solid var(--theme-elevation-150)',\r\n backgroundColor: 'var(--theme-elevation-0)',\r\n boxShadow: isActive\r\n ? '0 10px 20px -10px rgba(59, 130, 246, 0.4)'\r\n : '0 1px 2px rgba(15, 23, 42, 0.08)',\r\n cursor: 'pointer',\r\n transition: 'border-color 0.2s ease, box-shadow 0.2s ease',\r\n }}\r\n >\r\n <span\r\n aria-hidden\r\n style={{\r\n width: '32px',\r\n height: '32px',\r\n borderRadius: '8px',\r\n border: '1px solid rgba(15, 23, 42, 0.08)',\r\n background: option.color,\r\n }}\r\n />\r\n <span\r\n style={{ fontSize: '13px', fontWeight: 600, color: 'var(--theme-elevation-800)' }}\r\n >\r\n {option.label}\r\n </span>\r\n </button>\r\n )\r\n })}\r\n </div>\r\n\r\n <select\r\n id={path}\r\n value={selectedValue}\r\n onChange={(event) => handleSelect(event.target.value)}\r\n style={{ display: 'none' }}\r\n >\r\n {options.map((option) => (\r\n <option key={option.value} value={option.value}>\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n </div>\r\n )\r\n}\r\n"],"names":["useField","useCallback","useEffect","useState","defaultThemePresets","resolveThemeConfiguration","FALLBACK_TOKENS","value","label","color","fetchThemeConfiguration","response","fetch","ok","data","json","docs","themeConfiguration","error","console","warn","buildOptionsFromConfiguration","configuration","resolved","lightMode","orderedKeys","typedLightMode","tokens","map","key","trim","length","labelMap","background","card","muted","accent","secondary","primary","popover","filter","token","Boolean","ThemeTokenSelectField","props","path","field","setValue","options","setOptions","selectedValue","isMounted","then","handleSelect","nextValue","description","admin","en","div","className","htmlFor","style","display","marginBottom","required","span","fontSize","gridTemplateColumns","gap","option","isActive","button","type","onClick","alignItems","padding","borderRadius","border","backgroundColor","boxShadow","cursor","transition","aria-hidden","width","height","fontWeight","select","id","onChange","event","target"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AAEzC,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AACxD,SAASC,mBAAmB,QAAQ,gBAAe;AACnD,SAASC,yBAAyB,QAAQ,wCAAuC;AASjF,MAAMC,kBAAsC;IAC1C;QAAEC,OAAO;QAAcC,OAAO;QAAoBC,OAAO;IAAoB;IAC7E;QAAEF,OAAO;QAAQC,OAAO;QAAmBC,OAAO;IAAc;IAChE;QAAEF,OAAO;QAASC,OAAO;QAAiBC,OAAO;IAAe;IAChE;QAAEF,OAAO;QAAUC,OAAO;QAAkBC,OAAO;IAAgB;IACnE;QAAEF,OAAO;QAAaC,OAAO;QAAqBC,OAAO;IAAmB;IAC5E;QAAEF,OAAO;QAAWC,OAAO;QAAmBC,OAAO;IAAiB;CACvE;AAED,eAAeC;IACb,IAAI;QACF,MAAMC,WAAW,MAAMC,MAAM;QAC7B,IAAI,CAACD,SAASE,EAAE,EAAE;YAChB,OAAO;QACT;QACA,MAAMC,OAAO,MAAMH,SAASI,IAAI;QAChC,OAAOD,MAAME,MAAM,CAAC,EAAE,EAAEC,sBAAsB;IAChD,EAAE,OAAOC,OAAO;QACdC,QAAQC,IAAI,CAAC,gEAAgEF;QAC7E,OAAO;IACT;AACF;AAEA,SAASG,8BAA8BC,aAA6C;IAClF,IAAI,CAACA,eAAe;QAClB,OAAOhB;IACT;IAEA,MAAMiB,WAAWlB,0BAA0BiB;IAC3C,MAAME,YAAYD,SAASC,SAAS,IAAIpB,mBAAmB,CAAC,EAAE,EAAEoB,aAAa,CAAC;IAC9E,MAAMC,cAAwB;QAC5B;QACA;QACA;QACA;QACA;QACA;QACA;KACD;IAED,MAAMC,iBAAiBF;IAEvB,MAAMG,SAASF,YACZG,GAAG,CAAC,CAACC;QACJ,MAAMtB,QAAQmB,gBAAgB,CAACG,IAAI;QACnC,IAAI,OAAOtB,UAAU,YAAYA,MAAMuB,IAAI,GAAGC,MAAM,KAAK,GAAG;YAC1D,OAAO;QACT;QAEA,MAAMC,WAAmC;YACvCC,YAAY;YACZC,MAAM;YACNC,OAAO;YACPC,QAAQ;YACRC,WAAW;YACXC,SAAS;YACTC,SAAS;QACX;QAEA,OAAO;YACLhC,OAAOsB;YACPrB,OAAOwB,QAAQ,CAACH,IAAI,IAAIA;YACxBpB,OAAOF;QACT;IACF,GACCiC,MAAM,CAAC,CAACC,QAAqCC,QAAQD;IAExD,OAAOd,OAAOI,MAAM,GAAG,IAAIJ,SAASrB;AACtC;AAEA,eAAe,SAASqC,sBAAsBC,KAA6B;IACzE,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGF;IACxB,MAAM,EAAErC,KAAK,EAAEwC,QAAQ,EAAE,GAAG/C,SAAiB;QAAE6C;IAAK;IACpD,MAAM,CAACG,SAASC,WAAW,GAAG9C,SAA6BG;IAC3D,MAAM4C,gBAAgB3C,SAAS;IAE/BL,UAAU;QACR,IAAIiD,YAAY;QAEhBzC,0BAA0B0C,IAAI,CAAC,CAAC9B;YAC9B,IAAI,CAAC6B,WAAW;YAChBF,WAAW5B,8BAA8BC;QAC3C;QAEA,OAAO;YACL6B,YAAY;QACd;IACF,GAAG,EAAE;IAEL,MAAME,eAAepD,YACnB,CAACqD;QACCP,SAASO;IACX,GACA;QAACP;KAAS;IAGZ,MAAMvC,QAAQ,OAAOsC,MAAMtC,KAAK,KAAK,WAAWsC,MAAMtC,KAAK,GAAG;IAC9D,IAAI+C,cAAc;IAClB,IAAI,OAAOT,MAAMU,KAAK,EAAED,gBAAgB,UAAU;QAChDA,cAAcT,MAAMU,KAAK,CAACD,WAAW;IACvC,OAAO,IACLT,MAAMU,KAAK,EAAED,eACb,OAAOT,MAAMU,KAAK,CAACD,WAAW,KAAK,YACnC,OAAOT,MAAMU,KAAK,CAACD,WAAW,CAACE,EAAE,KAAK,UACtC;QACAF,cAAcT,MAAMU,KAAK,CAACD,WAAW,CAACE,EAAE;IAC1C;IAEA,qBACE,MAACC;QAAIC,WAAU;;YACZnD,uBACC,MAACA;gBACCmD,WAAU;gBACVC,SAASf;gBACTgB,OAAO;oBAAEC,SAAS;oBAASC,cAAc;gBAAM;;oBAE9CvD;oBACAsC,MAAMkB,QAAQ,kBAAI,KAACC;wBAAKN,WAAU;kCAAW;;;;YAIjDJ,6BACC,KAACG;gBACCC,WAAU;gBACVE,OAAO;oBAAEE,cAAc;oBAAQG,UAAU;oBAAQzD,OAAO;gBAA6B;0BAEpF8C;;0BAIL,KAACG;gBACCC,WAAU;gBACVE,OAAO;oBACLC,SAAS;oBACTK,qBAAqB;oBACrBC,KAAK;gBACP;0BAECpB,QAAQpB,GAAG,CAAC,CAACyC;oBACZ,MAAMC,WAAWD,OAAO9D,KAAK,KAAK2C;oBAClC,qBACE,MAACqB;wBACCC,MAAK;wBAELC,SAAS,IAAMpB,aAAagB,OAAO9D,KAAK;wBACxCsD,OAAO;4BACLC,SAAS;4BACTY,YAAY;4BACZN,KAAK;4BACLO,SAAS;4BACTC,cAAc;4BACdC,QAAQP,WACJ,uCACA;4BACJQ,iBAAiB;4BACjBC,WAAWT,WACP,8CACA;4BACJU,QAAQ;4BACRC,YAAY;wBACd;;0CAEA,KAAChB;gCACCiB,aAAW;gCACXrB,OAAO;oCACLsB,OAAO;oCACPC,QAAQ;oCACRR,cAAc;oCACdC,QAAQ;oCACR5C,YAAYoC,OAAO5D,KAAK;gCAC1B;;0CAEF,KAACwD;gCACCJ,OAAO;oCAAEK,UAAU;oCAAQmB,YAAY;oCAAK5E,OAAO;gCAA6B;0CAE/E4D,OAAO7D,KAAK;;;uBAhCV6D,OAAO9D,KAAK;gBAoCvB;;0BAGF,KAAC+E;gBACCC,IAAI1C;gBACJtC,OAAO2C;gBACPsC,UAAU,CAACC,QAAUpC,aAAaoC,MAAMC,MAAM,CAACnF,KAAK;gBACpDsD,OAAO;oBAAEC,SAAS;gBAAO;0BAExBd,QAAQpB,GAAG,CAAC,CAACyC,uBACZ,KAACA;wBAA0B9D,OAAO8D,OAAO9D,KAAK;kCAC3C8D,OAAO7D,KAAK;uBADF6D,OAAO9D,KAAK;;;;AAOnC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/colorModeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\n\nconst themeColorPickerComponentPath = '@payloadcms-plugins/theme-management/fields/ThemeColorPickerField'\n\ntype LocalizedText = Record<string, string>\n\nconst colorFieldKeys = [\n 'background',\n 'foreground',\n 'primary',\n 'primaryForeground',\n 'card',\n 'cardForeground',\n 'popover',\n 'popoverForeground',\n 'secondary',\n 'secondaryForeground',\n 'muted',\n 'mutedForeground',\n 'accent',\n 'accentForeground',\n 'destructive',\n 'destructiveForeground',\n 'border',\n 'input',\n 'ring',\n] as const\n\ntype ColorToken = (typeof colorFieldKeys)[number]\n\ninterface ColorFieldDefinition {\n name: ColorToken\n label: LocalizedText\n description: LocalizedText\n}\n\ntype ColorPalette = Record<ColorToken, string>\n\nconst colorFieldDefinitions: ColorFieldDefinition[] = [\n {\n name: 'background',\n label: { en: 'Background', cs: 'Pozadí' },\n description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },\n },\n {\n name: 'foreground',\n label: { en: 'Foreground', cs: 'Popředí' },\n description: { en: 'Main text color', cs: 'Hlavní barva textu' },\n },\n {\n name: 'primary',\n label: { en: 'Primary', cs: 'Primární' },\n description: {\n en: 'Primary brand color for buttons, links',\n cs: 'Primární barva značky pro tlačítka, odkazy',\n },\n },\n {\n name: 'primaryForeground',\n label: { en: 'Primary Foreground', cs: 'Primární popředí' },\n description: {\n en: 'Text color on primary background',\n cs: 'Barva textu na primárním pozadí',\n },\n },\n {\n name: 'card',\n label: { en: 'Card', cs: 'Karta' },\n description: { en: 'Card background color', cs: 'Barva pozadí karty' },\n },\n {\n name: 'cardForeground',\n label: { en: 'Card Foreground', cs: 'Karta popředí' },\n description: {\n en: 'Text color on card background',\n cs: 'Barva textu na pozadí karty',\n },\n },\n {\n name: 'popover',\n label: { en: 'Popover', cs: 'Popover' },\n description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },\n },\n {\n name: 'popoverForeground',\n label: { en: 'Popover Foreground', cs: 'Popover popředí' },\n description: {\n en: 'Text color on popover background',\n cs: 'Barva textu na pozadí popoveru',\n },\n },\n {\n name: 'secondary',\n label: { en: 'Secondary', cs: 'Sekundární' },\n description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },\n },\n {\n name: 'secondaryForeground',\n label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },\n description: {\n en: 'Text color on secondary background',\n cs: 'Barva textu na sekundárním pozadí',\n },\n },\n {\n name: 'muted',\n label: { en: 'Muted', cs: 'Ztlumený' },\n description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },\n },\n {\n name: 'mutedForeground',\n label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },\n description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },\n },\n {\n name: 'accent',\n label: { en: 'Accent', cs: 'Akcent' },\n description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },\n },\n {\n name: 'accentForeground',\n label: { en: 'Accent Foreground', cs: 'Akcent popředí' },\n description: {\n en: 'Text color on accent background',\n cs: 'Barva textu na akcentovém pozadí',\n },\n },\n {\n name: 'destructive',\n label: { en: 'Destructive', cs: 'Destruktivní' },\n description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },\n },\n {\n name: 'destructiveForeground',\n label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },\n description: {\n en: 'Text color on destructive background',\n cs: 'Barva textu na destruktivním pozadí',\n },\n },\n {\n name: 'border',\n label: { en: 'Border', cs: 'Okraj' },\n description: { en: 'Border color', cs: 'Barva okraje' },\n },\n {\n name: 'input',\n label: { en: 'Input', cs: 'Vstup' },\n description: { en: 'Input border color', cs: 'Barva okraje vstupů' },\n },\n {\n name: 'ring',\n label: { en: 'Ring', cs: 'Prstenec' },\n description: { en: 'Focus ring color', cs: 'Barva focus prstence' },\n },\n]\n\n// Light Mode Default Colors (Shadcn UI inspired defaults)\nexport const lightModeDefaults: ColorPalette = {\n background: '#ffffff',\n foreground: '#0a0a0a',\n card: '#ffffff',\n cardForeground: '#0a0a0a',\n popover: '#ffffff',\n popoverForeground: '#0a0a0a',\n primary: '#9372f7',\n primaryForeground: '#fafafa',\n secondary: '#f4f4f5',\n secondaryForeground: '#18181b',\n muted: '#f4f4f5',\n mutedForeground: '#71717a',\n accent: '#f4f4f5',\n accentForeground: '#18181b',\n destructive: '#ef4444',\n destructiveForeground: '#fafafa',\n border: '#e4e4e7',\n input: '#e4e4e7',\n ring: '#18181b',\n}\n\n// Dark Mode Default Colors (Shadcn UI inspired defaults)\nexport const darkModeDefaults: ColorPalette = {\n background: '#0a0a0a',\n foreground: '#fafafa',\n card: '#09090b',\n cardForeground: '#fafafa',\n popover: '#09090b',\n popoverForeground: '#fafafa',\n primary: '#9372f7',\n primaryForeground: '#09090b',\n secondary: '#27272a',\n secondaryForeground: '#fafafa',\n muted: '#27272a',\n mutedForeground: '#a1a1aa',\n accent: '#27272a',\n accentForeground: '#fafafa',\n destructive: '#7f1d1d',\n destructiveForeground: '#fafafa',\n border: '#27272a',\n input: '#27272a',\n ring: '#d4d4d8',\n}\n\nfunction createColorFields(defaults: ColorPalette): Field[] {\n return colorFieldDefinitions.map(({ name, label, description }) => ({\n name,\n type: 'text',\n label,\n defaultValue: defaults[name],\n admin: {\n components: {\n Field: themeColorPickerComponentPath,\n },\n description,\n },\n }))\n}\n\nexport const lightModeField: Field = {\n type: 'collapsible',\n label: {\n en: '☀️ Light Mode Colors',\n cs: '☀️ Barvy světlého režimu',\n },\n admin: {\n initCollapsed: true,\n description: {\n en: 'Configure colors for light mode',\n cs: 'Nakonfigurujte barvy pro světlý režim',\n },\n },\n fields: [\n {\n name: 'lightMode',\n type: 'group',\n fields: createColorFields(lightModeDefaults),\n },\n ],\n}\n\nexport const darkModeField: Field = {\n type: 'collapsible',\n label: {\n en: '🌙 Dark Mode Colors',\n cs: '🌙 Barvy tmavého režimu',\n },\n admin: {\n initCollapsed: true,\n description: {\n en: 'Configure colors for dark mode',\n cs: 'Nakonfigurujte barvy pro tmavý režim',\n },\n },\n fields: [\n {\n name: 'darkMode',\n type: 'group',\n fields: createColorFields(darkModeDefaults),\n },\n ],\n}\n"],"names":["themeColorPickerComponentPath","colorFieldKeys","colorFieldDefinitions","name","label","en","cs","description","lightModeDefaults","background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructive","destructiveForeground","border","input","ring","darkModeDefaults","createColorFields","defaults","map","type","defaultValue","admin","components","Field","lightModeField","initCollapsed","fields","darkModeField"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/fields/colorModeFields.ts"],"sourcesContent":["import type { Field } from 'payload'\r\n\r\nconst themeColorPickerComponentPath = '@payloadcms-plugins/theme-management/fields/ThemeColorPickerField'\r\n\r\ntype LocalizedText = Record<string, string>\r\n\r\nconst colorFieldKeys = [\r\n 'background',\r\n 'foreground',\r\n 'primary',\r\n 'primaryForeground',\r\n 'card',\r\n 'cardForeground',\r\n 'popover',\r\n 'popoverForeground',\r\n 'secondary',\r\n 'secondaryForeground',\r\n 'muted',\r\n 'mutedForeground',\r\n 'accent',\r\n 'accentForeground',\r\n 'destructive',\r\n 'destructiveForeground',\r\n 'border',\r\n 'input',\r\n 'ring',\r\n] as const\r\n\r\ntype ColorToken = (typeof colorFieldKeys)[number]\r\n\r\ninterface ColorFieldDefinition {\r\n name: ColorToken\r\n label: LocalizedText\r\n description: LocalizedText\r\n}\r\n\r\ntype ColorPalette = Record<ColorToken, string>\r\n\r\nconst colorFieldDefinitions: ColorFieldDefinition[] = [\r\n {\r\n name: 'background',\r\n label: { en: 'Background', cs: 'Pozadí' },\r\n description: { en: 'Main background color', cs: 'Hlavní barva pozadí' },\r\n },\r\n {\r\n name: 'foreground',\r\n label: { en: 'Foreground', cs: 'Popředí' },\r\n description: { en: 'Main text color', cs: 'Hlavní barva textu' },\r\n },\r\n {\r\n name: 'primary',\r\n label: { en: 'Primary', cs: 'Primární' },\r\n description: {\r\n en: 'Primary brand color for buttons, links',\r\n cs: 'Primární barva značky pro tlačítka, odkazy',\r\n },\r\n },\r\n {\r\n name: 'primaryForeground',\r\n label: { en: 'Primary Foreground', cs: 'Primární popředí' },\r\n description: {\r\n en: 'Text color on primary background',\r\n cs: 'Barva textu na primárním pozadí',\r\n },\r\n },\r\n {\r\n name: 'card',\r\n label: { en: 'Card', cs: 'Karta' },\r\n description: { en: 'Card background color', cs: 'Barva pozadí karty' },\r\n },\r\n {\r\n name: 'cardForeground',\r\n label: { en: 'Card Foreground', cs: 'Karta popředí' },\r\n description: {\r\n en: 'Text color on card background',\r\n cs: 'Barva textu na pozadí karty',\r\n },\r\n },\r\n {\r\n name: 'popover',\r\n label: { en: 'Popover', cs: 'Popover' },\r\n description: { en: 'Popover background color', cs: 'Barva pozadí popoveru' },\r\n },\r\n {\r\n name: 'popoverForeground',\r\n label: { en: 'Popover Foreground', cs: 'Popover popředí' },\r\n description: {\r\n en: 'Text color on popover background',\r\n cs: 'Barva textu na pozadí popoveru',\r\n },\r\n },\r\n {\r\n name: 'secondary',\r\n label: { en: 'Secondary', cs: 'Sekundární' },\r\n description: { en: 'Secondary UI elements', cs: 'Sekundární UI prvky' },\r\n },\r\n {\r\n name: 'secondaryForeground',\r\n label: { en: 'Secondary Foreground', cs: 'Sekundární popředí' },\r\n description: {\r\n en: 'Text color on secondary background',\r\n cs: 'Barva textu na sekundárním pozadí',\r\n },\r\n },\r\n {\r\n name: 'muted',\r\n label: { en: 'Muted', cs: 'Ztlumený' },\r\n description: { en: 'Muted backgrounds', cs: 'Ztlumená pozadí' },\r\n },\r\n {\r\n name: 'mutedForeground',\r\n label: { en: 'Muted Foreground', cs: 'Ztlumené popředí' },\r\n description: { en: 'Muted text color', cs: 'Ztlumená barva textu' },\r\n },\r\n {\r\n name: 'accent',\r\n label: { en: 'Accent', cs: 'Akcent' },\r\n description: { en: 'Accent color for highlights', cs: 'Akcentová barva pro zvýraznění' },\r\n },\r\n {\r\n name: 'accentForeground',\r\n label: { en: 'Accent Foreground', cs: 'Akcent popředí' },\r\n description: {\r\n en: 'Text color on accent background',\r\n cs: 'Barva textu na akcentovém pozadí',\r\n },\r\n },\r\n {\r\n name: 'destructive',\r\n label: { en: 'Destructive', cs: 'Destruktivní' },\r\n description: { en: 'Error and destructive actions', cs: 'Chyby a destruktivní akce' },\r\n },\r\n {\r\n name: 'destructiveForeground',\r\n label: { en: 'Destructive Foreground', cs: 'Destruktivní popředí' },\r\n description: {\r\n en: 'Text color on destructive background',\r\n cs: 'Barva textu na destruktivním pozadí',\r\n },\r\n },\r\n {\r\n name: 'border',\r\n label: { en: 'Border', cs: 'Okraj' },\r\n description: { en: 'Border color', cs: 'Barva okraje' },\r\n },\r\n {\r\n name: 'input',\r\n label: { en: 'Input', cs: 'Vstup' },\r\n description: { en: 'Input border color', cs: 'Barva okraje vstupů' },\r\n },\r\n {\r\n name: 'ring',\r\n label: { en: 'Ring', cs: 'Prstenec' },\r\n description: { en: 'Focus ring color', cs: 'Barva focus prstence' },\r\n },\r\n]\r\n\r\n// Light Mode Default Colors (Shadcn UI inspired defaults)\r\nexport const lightModeDefaults: ColorPalette = {\r\n background: '#ffffff',\r\n foreground: '#0a0a0a',\r\n card: '#ffffff',\r\n cardForeground: '#0a0a0a',\r\n popover: '#ffffff',\r\n popoverForeground: '#0a0a0a',\r\n primary: '#9372f7',\r\n primaryForeground: '#fafafa',\r\n secondary: '#f4f4f5',\r\n secondaryForeground: '#18181b',\r\n muted: '#f4f4f5',\r\n mutedForeground: '#71717a',\r\n accent: '#f4f4f5',\r\n accentForeground: '#18181b',\r\n destructive: '#ef4444',\r\n destructiveForeground: '#fafafa',\r\n border: '#e4e4e7',\r\n input: '#e4e4e7',\r\n ring: '#18181b',\r\n}\r\n\r\n// Dark Mode Default Colors (Shadcn UI inspired defaults)\r\nexport const darkModeDefaults: ColorPalette = {\r\n background: '#0a0a0a',\r\n foreground: '#fafafa',\r\n card: '#09090b',\r\n cardForeground: '#fafafa',\r\n popover: '#09090b',\r\n popoverForeground: '#fafafa',\r\n primary: '#9372f7',\r\n primaryForeground: '#09090b',\r\n secondary: '#27272a',\r\n secondaryForeground: '#fafafa',\r\n muted: '#27272a',\r\n mutedForeground: '#a1a1aa',\r\n accent: '#27272a',\r\n accentForeground: '#fafafa',\r\n destructive: '#7f1d1d',\r\n destructiveForeground: '#fafafa',\r\n border: '#27272a',\r\n input: '#27272a',\r\n ring: '#d4d4d8',\r\n}\r\n\r\nfunction createColorFields(defaults: ColorPalette): Field[] {\r\n return colorFieldDefinitions.map(({ name, label, description }) => ({\r\n name,\r\n type: 'text',\r\n label,\r\n defaultValue: defaults[name],\r\n admin: {\r\n components: {\r\n Field: themeColorPickerComponentPath,\r\n },\r\n description,\r\n },\r\n }))\r\n}\r\n\r\nexport const lightModeField: Field = {\r\n type: 'collapsible',\r\n label: {\r\n en: '☀️ Light Mode Colors',\r\n cs: '☀️ Barvy světlého režimu',\r\n },\r\n admin: {\r\n initCollapsed: true,\r\n description: {\r\n en: 'Configure colors for light mode',\r\n cs: 'Nakonfigurujte barvy pro světlý režim',\r\n },\r\n },\r\n fields: [\r\n {\r\n name: 'lightMode',\r\n type: 'group',\r\n fields: createColorFields(lightModeDefaults),\r\n },\r\n ],\r\n}\r\n\r\nexport const darkModeField: Field = {\r\n type: 'collapsible',\r\n label: {\r\n en: '🌙 Dark Mode Colors',\r\n cs: '🌙 Barvy tmavého režimu',\r\n },\r\n admin: {\r\n initCollapsed: true,\r\n description: {\r\n en: 'Configure colors for dark mode',\r\n cs: 'Nakonfigurujte barvy pro tmavý režim',\r\n },\r\n },\r\n fields: [\r\n {\r\n name: 'darkMode',\r\n type: 'group',\r\n fields: createColorFields(darkModeDefaults),\r\n },\r\n ],\r\n}\r\n"],"names":["themeColorPickerComponentPath","colorFieldKeys","colorFieldDefinitions","name","label","en","cs","description","lightModeDefaults","background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructive","destructiveForeground","border","input","ring","darkModeDefaults","createColorFields","defaults","map","type","defaultValue","admin","components","Field","lightModeField","initCollapsed","fields","darkModeField"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { BASE_FONT_SIZE_OPTIONS, BODY_FONT_OPTIONS, HEADING_FONT_OPTIONS, LINE_HEIGHT_OPTIONS } from '../constants/themeFonts.js';
|
|
2
2
|
import { darkModeField, lightModeField } from './colorModeFields.js';
|
|
3
|
-
/**
|
|
4
|
-
* Theme Configuration Field with Theme Selection as default value setter
|
|
5
|
-
* Theme Selection populates lightMode/darkMode colors automatically
|
|
3
|
+
/**
|
|
4
|
+
* Theme Configuration Field with Theme Selection as default value setter
|
|
5
|
+
* Theme Selection populates lightMode/darkMode colors automatically
|
|
6
6
|
*/ export function createThemeConfigurationField(options) {
|
|
7
7
|
const { themePresets, defaultTheme, includeColorModeToggle, includeCustomCSS, enableAdvancedFeatures = true } = options;
|
|
8
8
|
const themeOptions = themePresets.map((preset)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/fields/themeConfigurationField.ts"],"sourcesContent":["import type { Field } from 'payload'\nimport {\n BASE_FONT_SIZE_OPTIONS,\n BODY_FONT_OPTIONS,\n HEADING_FONT_OPTIONS,\n LINE_HEIGHT_OPTIONS,\n} from '../constants/themeFonts.js'\nimport type { ThemePreset } from '../index.js'\nimport { darkModeField, lightModeField } from './colorModeFields.js'\n\ninterface ThemeConfigurationFieldOptions {\n themePresets: ThemePreset[]\n defaultTheme: string\n includeColorModeToggle: boolean\n includeCustomCSS: boolean\n includeBrandIdentity: boolean\n enableAdvancedFeatures?: boolean\n}\n\n/**\n * Theme Configuration Field with Theme Selection as default value setter\n * Theme Selection populates lightMode/darkMode colors automatically\n */\nexport function createThemeConfigurationField(options: ThemeConfigurationFieldOptions): Field {\n const {\n themePresets,\n defaultTheme,\n includeColorModeToggle,\n includeCustomCSS,\n enableAdvancedFeatures = true,\n } = options\n\n const themeOptions = themePresets.map((preset) => {\n const previewColor = preset.preview?.colors.primary\n const label = previewColor ? `${preset.label} • ${previewColor}` : preset.label\n return {\n label,\n value: preset.name,\n }\n })\n\n const fields: Field[] = [\n {\n name: 'theme',\n type: 'select',\n required: true,\n defaultValue: defaultTheme,\n options: themeOptions,\n label: {\n en: '🎨 Theme Selection',\n cs: '🎨 Výběr tématu',\n },\n admin: {\n description: {\n en: 'Select a theme to auto-populate color values. You can customize colors after selection.',\n cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.',\n },\n components: {\n Field: '@payloadcms-plugins/theme-management/fields/ThemePreviewField',\n },\n },\n },\n ]\n\n // Color Mode Settings\n if (includeColorModeToggle) {\n fields.push({\n type: 'collapsible',\n label: {\n en: '🌗 Color Mode Settings',\n cs: '🌗 Nastavení barevného režimu',\n },\n admin: {\n initCollapsed: false,\n description: {\n en: 'Configure light and dark mode colors. Changes here override theme selection.',\n cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.',\n },\n },\n fields: [\n {\n type: 'row',\n fields: [\n {\n name: 'colorMode',\n type: 'select',\n label: {\n en: 'Default Color Mode',\n cs: 'Výchozí barevný režim',\n },\n defaultValue: 'auto',\n options: [\n {\n label: {\n en: 'Auto (System)',\n cs: 'Automaticky (Systém)',\n },\n value: 'auto',\n },\n {\n label: { en: 'Light', cs: 'Světlý' },\n value: 'light',\n },\n {\n label: { en: 'Dark', cs: 'Tmavý' },\n value: 'dark',\n },\n ],\n admin: {\n description: {\n en: 'Default color mode for visitors',\n cs: 'Výchozí barevný režim pro návštěvníky',\n },\n width: '50%',\n },\n },\n {\n name: 'allowColorModeToggle',\n type: 'checkbox',\n label: {\n en: 'Enable Mode Toggle',\n cs: 'Povolit přepínač režimu',\n },\n defaultValue: true,\n admin: {\n description: {\n en: 'Let visitors switch modes',\n cs: 'Umožnit návštěvníkům přepínat režimy',\n },\n width: '50%',\n },\n },\n ],\n },\n lightModeField,\n darkModeField,\n ],\n })\n }\n\n fields.push({\n type: 'collapsible',\n label: {\n en: '🅰️ Typography',\n cs: '🅰️ Typografie',\n },\n admin: {\n initCollapsed: true,\n description: {\n en: 'Choose font families and base typography settings. Leave fields on \"Use preset\" to inherit the theme defaults.',\n cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota \"Použít výchozí\" zachová nastavení motivu.',\n },\n },\n fields: [\n {\n name: 'typography',\n type: 'group',\n fields: [\n {\n type: 'row',\n fields: [\n {\n name: 'bodyFont',\n type: 'select',\n label: {\n en: 'Body font',\n cs: 'Písmo pro text',\n },\n defaultValue: 'preset',\n options: BODY_FONT_OPTIONS.map((option) => ({\n label: option.label,\n value: option.value,\n })),\n admin: {\n width: '50%',\n },\n },\n {\n name: 'headingFont',\n type: 'select',\n label: {\n en: 'Heading font',\n cs: 'Písmo pro nadpisy',\n },\n defaultValue: 'preset',\n options: HEADING_FONT_OPTIONS.map((option) => ({\n label: option.label,\n value: option.value,\n })),\n admin: {\n width: '50%',\n },\n },\n ],\n },\n {\n type: 'row',\n fields: [\n {\n name: 'bodyFontCustom',\n type: 'text',\n label: {\n en: 'Custom body font stack',\n cs: 'Vlastní písmo pro text',\n },\n admin: {\n width: '50%',\n placeholder: '\"IBM Plex Sans\", sans-serif',\n description: {\n en: 'Provide full CSS font-family stack when using a custom font.',\n cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.',\n },\n condition: (_, siblingData) => siblingData?.bodyFont === 'custom',\n },\n },\n {\n name: 'headingFontCustom',\n type: 'text',\n label: {\n en: 'Custom heading font stack',\n cs: 'Vlastní písmo pro nadpisy',\n },\n admin: {\n width: '50%',\n placeholder: '\"Cormorant Garamond\", serif',\n description: {\n en: 'Provide full CSS font-family stack when using a custom heading font.',\n cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.',\n },\n condition: (_, siblingData) => siblingData?.headingFont === 'custom',\n },\n },\n ],\n },\n {\n type: 'row',\n fields: [\n {\n name: 'baseFontSize',\n type: 'select',\n label: {\n en: 'Base font size',\n cs: 'Základní velikost písma',\n },\n defaultValue: 'preset',\n options: BASE_FONT_SIZE_OPTIONS.map((option) => ({\n label: option.label,\n value: option.value,\n })),\n admin: {\n width: '50%',\n },\n },\n {\n name: 'lineHeight',\n type: 'select',\n label: {\n en: 'Line height',\n cs: 'Řádkování',\n },\n defaultValue: 'preset',\n options: LINE_HEIGHT_OPTIONS.map((option) => ({\n label: option.label,\n value: option.value,\n })),\n admin: {\n width: '50%',\n },\n },\n ],\n },\n ],\n },\n ],\n })\n\n // Design Customization\n fields.push({\n type: 'collapsible',\n label: {\n en: '✨ Design Customization',\n cs: '✨ Přizpůsobení designu',\n },\n admin: {\n initCollapsed: true,\n },\n fields: [\n {\n name: 'borderRadius',\n type: 'select',\n label: {\n en: 'Border Radius',\n cs: 'Zaoblení rohů',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\n { label: { en: 'Small', cs: 'Malé' }, value: 'small' },\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n { label: { en: 'Large', cs: 'Velké' }, value: 'large' },\n { label: { en: 'Full', cs: 'Plné' }, value: 'xl' },\n ],\n admin: {\n components: {\n Field: '@payloadcms-plugins/theme-management/fields/RadiusField',\n },\n width: '33%',\n },\n },\n {\n name: 'fontScale',\n type: 'select',\n label: {\n en: 'Font Scale',\n cs: 'Velikost písma',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'Small', cs: 'Malé' }, value: 'small' },\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n { label: { en: 'Large', cs: 'Velké' }, value: 'large' },\n ],\n admin: {\n width: '33%',\n },\n },\n {\n name: 'spacing',\n type: 'select',\n label: {\n en: 'Spacing',\n cs: 'Mezery',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'Compact', cs: 'Kompaktní' }, value: 'compact' },\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n { label: { en: 'Spacious', cs: 'Prostorné' }, value: 'spacious' },\n ],\n admin: {\n width: '34%',\n },\n },\n ],\n })\n\n // Advanced Settings\n if (enableAdvancedFeatures) {\n const advancedFields: Field[] = [\n {\n name: 'animationLevel',\n type: 'select',\n label: {\n en: 'Animation Level',\n cs: 'Úroveň animací',\n },\n defaultValue: 'medium',\n options: [\n { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\n { label: { en: 'Reduced', cs: 'Snížené' }, value: 'reduced' },\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\n { label: { en: 'High', cs: 'Vysoké' }, value: 'high' },\n ],\n admin: {\n description: {\n en: 'Control website animations and transitions',\n cs: 'Kontrola animací a přechodů na webu',\n },\n width: '50%',\n },\n },\n ]\n\n if (includeCustomCSS) {\n advancedFields.push({\n name: 'customCSS',\n type: 'code',\n label: {\n en: 'Custom CSS',\n cs: 'Vlastní CSS',\n },\n admin: {\n language: 'css',\n description: {\n en: 'Add custom CSS to override default styles',\n cs: 'Přidejte vlastní CSS pro přepsání výchozích stylů',\n },\n // placeholder:\n // ':root {\\n --primary: #your-color;\\n --border-radius: 8px;\\n --font-family: \"Your Font\";\\n}\\n\\n.custom-class {\\n /* Your custom styles */\\n}',\n // rows: 8,\n },\n })\n }\n\n fields.push({\n type: 'collapsible',\n label: {\n en: '⚙️ Advanced Settings',\n cs: '⚙️ Pokročilé nastavení',\n },\n admin: {\n initCollapsed: true,\n },\n fields: advancedFields,\n })\n }\n\n return {\n name: 'themeConfiguration',\n type: 'group',\n label: false,\n admin: {\n description: {\n en: 'Configure website appearance and styling',\n cs: 'Nakonfigurujte vzhled a stylování webu',\n },\n },\n fields,\n }\n}\n"],"names":["BASE_FONT_SIZE_OPTIONS","BODY_FONT_OPTIONS","HEADING_FONT_OPTIONS","LINE_HEIGHT_OPTIONS","darkModeField","lightModeField","createThemeConfigurationField","options","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","enableAdvancedFeatures","themeOptions","map","preset","previewColor","preview","colors","primary","label","value","name","fields","type","required","defaultValue","en","cs","admin","description","components","Field","push","initCollapsed","width","option","placeholder","condition","_","siblingData","bodyFont","headingFont","advancedFields","language"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/fields/themeConfigurationField.ts"],"sourcesContent":["import type { Field } from 'payload'\r\nimport {\r\n BASE_FONT_SIZE_OPTIONS,\r\n BODY_FONT_OPTIONS,\r\n HEADING_FONT_OPTIONS,\r\n LINE_HEIGHT_OPTIONS,\r\n} from '../constants/themeFonts.js'\r\nimport type { ThemePreset } from '../index.js'\r\nimport { darkModeField, lightModeField } from './colorModeFields.js'\r\n\r\ninterface ThemeConfigurationFieldOptions {\r\n themePresets: ThemePreset[]\r\n defaultTheme: string\r\n includeColorModeToggle: boolean\r\n includeCustomCSS: boolean\r\n includeBrandIdentity: boolean\r\n enableAdvancedFeatures?: boolean\r\n}\r\n\r\n/**\r\n * Theme Configuration Field with Theme Selection as default value setter\r\n * Theme Selection populates lightMode/darkMode colors automatically\r\n */\r\nexport function createThemeConfigurationField(options: ThemeConfigurationFieldOptions): Field {\r\n const {\r\n themePresets,\r\n defaultTheme,\r\n includeColorModeToggle,\r\n includeCustomCSS,\r\n enableAdvancedFeatures = true,\r\n } = options\r\n\r\n const themeOptions = themePresets.map((preset) => {\r\n const previewColor = preset.preview?.colors.primary\r\n const label = previewColor ? `${preset.label} • ${previewColor}` : preset.label\r\n return {\r\n label,\r\n value: preset.name,\r\n }\r\n })\r\n\r\n const fields: Field[] = [\r\n {\r\n name: 'theme',\r\n type: 'select',\r\n required: true,\r\n defaultValue: defaultTheme,\r\n options: themeOptions,\r\n label: {\r\n en: '🎨 Theme Selection',\r\n cs: '🎨 Výběr tématu',\r\n },\r\n admin: {\r\n description: {\r\n en: 'Select a theme to auto-populate color values. You can customize colors after selection.',\r\n cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.',\r\n },\r\n components: {\r\n Field: '@payloadcms-plugins/theme-management/fields/ThemePreviewField',\r\n },\r\n },\r\n },\r\n ]\r\n\r\n // Color Mode Settings\r\n if (includeColorModeToggle) {\r\n fields.push({\r\n type: 'collapsible',\r\n label: {\r\n en: '🌗 Color Mode Settings',\r\n cs: '🌗 Nastavení barevného režimu',\r\n },\r\n admin: {\r\n initCollapsed: false,\r\n description: {\r\n en: 'Configure light and dark mode colors. Changes here override theme selection.',\r\n cs: 'Nakonfigurujte barvy světlého a tmavého režimu. Změny zde přepíší výběr tématu.',\r\n },\r\n },\r\n fields: [\r\n {\r\n type: 'row',\r\n fields: [\r\n {\r\n name: 'colorMode',\r\n type: 'select',\r\n label: {\r\n en: 'Default Color Mode',\r\n cs: 'Výchozí barevný režim',\r\n },\r\n defaultValue: 'auto',\r\n options: [\r\n {\r\n label: {\r\n en: 'Auto (System)',\r\n cs: 'Automaticky (Systém)',\r\n },\r\n value: 'auto',\r\n },\r\n {\r\n label: { en: 'Light', cs: 'Světlý' },\r\n value: 'light',\r\n },\r\n {\r\n label: { en: 'Dark', cs: 'Tmavý' },\r\n value: 'dark',\r\n },\r\n ],\r\n admin: {\r\n description: {\r\n en: 'Default color mode for visitors',\r\n cs: 'Výchozí barevný režim pro návštěvníky',\r\n },\r\n width: '50%',\r\n },\r\n },\r\n {\r\n name: 'allowColorModeToggle',\r\n type: 'checkbox',\r\n label: {\r\n en: 'Enable Mode Toggle',\r\n cs: 'Povolit přepínač režimu',\r\n },\r\n defaultValue: true,\r\n admin: {\r\n description: {\r\n en: 'Let visitors switch modes',\r\n cs: 'Umožnit návštěvníkům přepínat režimy',\r\n },\r\n width: '50%',\r\n },\r\n },\r\n ],\r\n },\r\n lightModeField,\r\n darkModeField,\r\n ],\r\n })\r\n }\r\n\r\n fields.push({\r\n type: 'collapsible',\r\n label: {\r\n en: '🅰️ Typography',\r\n cs: '🅰️ Typografie',\r\n },\r\n admin: {\r\n initCollapsed: true,\r\n description: {\r\n en: 'Choose font families and base typography settings. Leave fields on \"Use preset\" to inherit the theme defaults.',\r\n cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota \"Použít výchozí\" zachová nastavení motivu.',\r\n },\r\n },\r\n fields: [\r\n {\r\n name: 'typography',\r\n type: 'group',\r\n fields: [\r\n {\r\n type: 'row',\r\n fields: [\r\n {\r\n name: 'bodyFont',\r\n type: 'select',\r\n label: {\r\n en: 'Body font',\r\n cs: 'Písmo pro text',\r\n },\r\n defaultValue: 'preset',\r\n options: BODY_FONT_OPTIONS.map((option) => ({\r\n label: option.label,\r\n value: option.value,\r\n })),\r\n admin: {\r\n width: '50%',\r\n },\r\n },\r\n {\r\n name: 'headingFont',\r\n type: 'select',\r\n label: {\r\n en: 'Heading font',\r\n cs: 'Písmo pro nadpisy',\r\n },\r\n defaultValue: 'preset',\r\n options: HEADING_FONT_OPTIONS.map((option) => ({\r\n label: option.label,\r\n value: option.value,\r\n })),\r\n admin: {\r\n width: '50%',\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n type: 'row',\r\n fields: [\r\n {\r\n name: 'bodyFontCustom',\r\n type: 'text',\r\n label: {\r\n en: 'Custom body font stack',\r\n cs: 'Vlastní písmo pro text',\r\n },\r\n admin: {\r\n width: '50%',\r\n placeholder: '\"IBM Plex Sans\", sans-serif',\r\n description: {\r\n en: 'Provide full CSS font-family stack when using a custom font.',\r\n cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.',\r\n },\r\n condition: (_, siblingData) => siblingData?.bodyFont === 'custom',\r\n },\r\n },\r\n {\r\n name: 'headingFontCustom',\r\n type: 'text',\r\n label: {\r\n en: 'Custom heading font stack',\r\n cs: 'Vlastní písmo pro nadpisy',\r\n },\r\n admin: {\r\n width: '50%',\r\n placeholder: '\"Cormorant Garamond\", serif',\r\n description: {\r\n en: 'Provide full CSS font-family stack when using a custom heading font.',\r\n cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.',\r\n },\r\n condition: (_, siblingData) => siblingData?.headingFont === 'custom',\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n type: 'row',\r\n fields: [\r\n {\r\n name: 'baseFontSize',\r\n type: 'select',\r\n label: {\r\n en: 'Base font size',\r\n cs: 'Základní velikost písma',\r\n },\r\n defaultValue: 'preset',\r\n options: BASE_FONT_SIZE_OPTIONS.map((option) => ({\r\n label: option.label,\r\n value: option.value,\r\n })),\r\n admin: {\r\n width: '50%',\r\n },\r\n },\r\n {\r\n name: 'lineHeight',\r\n type: 'select',\r\n label: {\r\n en: 'Line height',\r\n cs: 'Řádkování',\r\n },\r\n defaultValue: 'preset',\r\n options: LINE_HEIGHT_OPTIONS.map((option) => ({\r\n label: option.label,\r\n value: option.value,\r\n })),\r\n admin: {\r\n width: '50%',\r\n },\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n ],\r\n })\r\n\r\n // Design Customization\r\n fields.push({\r\n type: 'collapsible',\r\n label: {\r\n en: '✨ Design Customization',\r\n cs: '✨ Přizpůsobení designu',\r\n },\r\n admin: {\r\n initCollapsed: true,\r\n },\r\n fields: [\r\n {\r\n name: 'borderRadius',\r\n type: 'select',\r\n label: {\r\n en: 'Border Radius',\r\n cs: 'Zaoblení rohů',\r\n },\r\n defaultValue: 'medium',\r\n options: [\r\n { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\r\n { label: { en: 'Small', cs: 'Malé' }, value: 'small' },\r\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\r\n { label: { en: 'Large', cs: 'Velké' }, value: 'large' },\r\n { label: { en: 'Full', cs: 'Plné' }, value: 'xl' },\r\n ],\r\n admin: {\r\n components: {\r\n Field: '@payloadcms-plugins/theme-management/fields/RadiusField',\r\n },\r\n width: '33%',\r\n },\r\n },\r\n {\r\n name: 'fontScale',\r\n type: 'select',\r\n label: {\r\n en: 'Font Scale',\r\n cs: 'Velikost písma',\r\n },\r\n defaultValue: 'medium',\r\n options: [\r\n { label: { en: 'Small', cs: 'Malé' }, value: 'small' },\r\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\r\n { label: { en: 'Large', cs: 'Velké' }, value: 'large' },\r\n ],\r\n admin: {\r\n width: '33%',\r\n },\r\n },\r\n {\r\n name: 'spacing',\r\n type: 'select',\r\n label: {\r\n en: 'Spacing',\r\n cs: 'Mezery',\r\n },\r\n defaultValue: 'medium',\r\n options: [\r\n { label: { en: 'Compact', cs: 'Kompaktní' }, value: 'compact' },\r\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\r\n { label: { en: 'Spacious', cs: 'Prostorné' }, value: 'spacious' },\r\n ],\r\n admin: {\r\n width: '34%',\r\n },\r\n },\r\n ],\r\n })\r\n\r\n // Advanced Settings\r\n if (enableAdvancedFeatures) {\r\n const advancedFields: Field[] = [\r\n {\r\n name: 'animationLevel',\r\n type: 'select',\r\n label: {\r\n en: 'Animation Level',\r\n cs: 'Úroveň animací',\r\n },\r\n defaultValue: 'medium',\r\n options: [\r\n { label: { en: 'None', cs: 'Žádné' }, value: 'none' },\r\n { label: { en: 'Reduced', cs: 'Snížené' }, value: 'reduced' },\r\n { label: { en: 'Medium', cs: 'Střední' }, value: 'medium' },\r\n { label: { en: 'High', cs: 'Vysoké' }, value: 'high' },\r\n ],\r\n admin: {\r\n description: {\r\n en: 'Control website animations and transitions',\r\n cs: 'Kontrola animací a přechodů na webu',\r\n },\r\n width: '50%',\r\n },\r\n },\r\n ]\r\n\r\n if (includeCustomCSS) {\r\n advancedFields.push({\r\n name: 'customCSS',\r\n type: 'code',\r\n label: {\r\n en: 'Custom CSS',\r\n cs: 'Vlastní CSS',\r\n },\r\n admin: {\r\n language: 'css',\r\n description: {\r\n en: 'Add custom CSS to override default styles',\r\n cs: 'Přidejte vlastní CSS pro přepsání výchozích stylů',\r\n },\r\n // placeholder:\r\n // ':root {\\n --primary: #your-color;\\n --border-radius: 8px;\\n --font-family: \"Your Font\";\\n}\\n\\n.custom-class {\\n /* Your custom styles */\\n}',\r\n // rows: 8,\r\n },\r\n })\r\n }\r\n\r\n fields.push({\r\n type: 'collapsible',\r\n label: {\r\n en: '⚙️ Advanced Settings',\r\n cs: '⚙️ Pokročilé nastavení',\r\n },\r\n admin: {\r\n initCollapsed: true,\r\n },\r\n fields: advancedFields,\r\n })\r\n }\r\n\r\n return {\r\n name: 'themeConfiguration',\r\n type: 'group',\r\n label: false,\r\n admin: {\r\n description: {\r\n en: 'Configure website appearance and styling',\r\n cs: 'Nakonfigurujte vzhled a stylování webu',\r\n },\r\n },\r\n fields,\r\n }\r\n}\r\n"],"names":["BASE_FONT_SIZE_OPTIONS","BODY_FONT_OPTIONS","HEADING_FONT_OPTIONS","LINE_HEIGHT_OPTIONS","darkModeField","lightModeField","createThemeConfigurationField","options","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","enableAdvancedFeatures","themeOptions","map","preset","previewColor","preview","colors","primary","label","value","name","fields","type","required","defaultValue","en","cs","admin","description","components","Field","push","initCollapsed","width","option","placeholder","condition","_","siblingData","bodyFont","headingFont","advancedFields","language"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,6 @@ export type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } fro
|
|
|
13
13
|
export { DEFAULT_THEME_CONFIGURATION, resolveThemeConfiguration, } from './utils/resolveThemeConfiguration.js';
|
|
14
14
|
export { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js';
|
|
15
15
|
export { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js';
|
|
16
|
-
export { ServerThemeInjector } from './components/ServerThemeInjector.js';
|
|
17
16
|
export type { Mode, ThemeDefaults } from './providers/Theme/types.js';
|
|
18
17
|
export { ThemeProvider } from './providers/Theme/index.js';
|
|
19
18
|
export declare const ThemeManagementPlugin: (options?: ThemeManagementPluginOptions) => Plugin;
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAmC,MAAM,EAAE,MAAM,SAAS,CAAA;AAEtE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,KAAK,EACV,8BAA8B,EAC9B,4BAA4B,EAC7B,MAAM,YAAY,CAAA;AA2BnB,eAAO,MAAM,qBAAqB,GAAI,UAAS,4BAAiC,KAAG,MAqElF,CAAA;AAED,KAAK,iBAAiB,GAAG,MAAM,GAAG,8BAA8B,CAAA;AAEhE,eAAO,MAAM,uBAAuB,GAClC,UAAU,iBAAiB,KAC1B,OAAO,CAAC,sBAAsB,GAAG,IAAI,CA8CvC,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,KAAG,WAAW,GAAG,IAEhE,CAAA;AAED,eAAO,MAAM,wBAAwB,QAAO,WAAW,EAEtD,CAAA;AAID,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACtE,YAAY,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAA;AAC9F,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAmC,MAAM,EAAE,MAAM,SAAS,CAAA;AAEtE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,KAAK,EACV,8BAA8B,EAC9B,4BAA4B,EAC7B,MAAM,YAAY,CAAA;AA2BnB,eAAO,MAAM,qBAAqB,GAAI,UAAS,4BAAiC,KAAG,MAqElF,CAAA;AAED,KAAK,iBAAiB,GAAG,MAAM,GAAG,8BAA8B,CAAA;AAEhE,eAAO,MAAM,uBAAuB,GAClC,UAAU,iBAAiB,KAC1B,OAAO,CAAC,sBAAsB,GAAG,IAAI,CA8CvC,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,WAAW,MAAM,KAAG,WAAW,GAAG,IAEhE,CAAA;AAED,eAAO,MAAM,wBAAwB,QAAO,WAAW,EAEtD,CAAA;AAID,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACtE,YAAY,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAA;AAC9F,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAExE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE1D,eAAO,MAAM,qBAAqB,aAlJa,4BAA4B,KAAQ,MAkJzB,CAAA;AAC1D,oDAAoD;AACpD,eAAO,MAAM,wBAAwB,aApJU,4BAA4B,KAAQ,MAoJtB,CAAA;AAE7D,eAAe,qBAAqB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -101,7 +101,6 @@ export { defaultThemePresets } from './presets.js';
|
|
|
101
101
|
export { DEFAULT_THEME_CONFIGURATION, resolveThemeConfiguration } from './utils/resolveThemeConfiguration.js';
|
|
102
102
|
export { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js';
|
|
103
103
|
export { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js';
|
|
104
|
-
export { ServerThemeInjector } from './components/ServerThemeInjector.js';
|
|
105
104
|
export { ThemeProvider } from './providers/Theme/index.js';
|
|
106
105
|
export const ThemeManagementPlugin = themeManagementPlugin;
|
|
107
106
|
/** @deprecated use {@link themeManagementPlugin} */ export const themeConfigurationPlugin = themeManagementPlugin;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { CollectionConfig, Config, Field, Plugin } from 'payload'\nimport { createThemeConfigurationField } from './fields/themeConfigurationField.js'\nimport type { SiteThemeConfiguration } from './payload-types.js'\nimport type { ThemePreset } from './presets.js'\nimport { defaultThemePresets } from './presets.js'\nimport type {\n FetchThemeConfigurationOptions,\n ThemeManagementPluginOptions,\n} from './types.js'\n\nconst THEME_FIELD_NAME = 'themeConfiguration'\n\nconst removeExistingThemeField = (fields: Field[] = []): Field[] =>\n fields.filter((field) => {\n const candidate = field as { name?: unknown }\n return candidate?.name !== THEME_FIELD_NAME\n })\n\nconst upsertThemeField = (\n fields: Field[] | undefined,\n themeField: Field,\n enableLogging: boolean,\n): Field[] => {\n const sanitized = removeExistingThemeField(fields ?? [])\n\n if (enableLogging) {\n console.log('🎨 Theme Management Plugin: injecting theme configuration field')\n }\n\n return [...sanitized, themeField]\n}\n\nconst ensureCollectionsArray = (collections: Config['collections']): CollectionConfig[] =>\n Array.isArray(collections) ? collections : []\n\nexport const themeManagementPlugin = (options: ThemeManagementPluginOptions = {}): Plugin => {\n return (config: Config): Config => {\n const {\n enabled = true,\n targetCollection = 'site-settings',\n themePresets = defaultThemePresets,\n defaultTheme = 'cool',\n includeColorModeToggle = true,\n includeCustomCSS = true,\n includeBrandIdentity = false,\n enableAdvancedFeatures = true,\n enableLogging = false,\n } = options\n\n if (!enabled) {\n if (enableLogging) {\n console.log('🎨 Theme Management Plugin: disabled via options, skipping.')\n }\n return config\n }\n\n const themeField = createThemeConfigurationField({\n themePresets,\n defaultTheme,\n includeColorModeToggle,\n includeCustomCSS,\n includeBrandIdentity: includeBrandIdentity ?? false,\n enableAdvancedFeatures,\n })\n\n let collectionTouched = false\n\n const collections = ensureCollectionsArray(config.collections).map((collection) => {\n if (collection.slug !== targetCollection) {\n return collection\n }\n\n collectionTouched = true\n\n if (enableLogging) {\n console.log(\n `🎨 Theme Management Plugin: enhancing collection \"${collection.slug}\"`,\n )\n }\n\n const existingFields = Array.isArray(collection.fields) ? collection.fields : []\n\n const fields = upsertThemeField(existingFields, themeField, enableLogging)\n\n return {\n ...collection,\n fields,\n }\n })\n\n if (!collectionTouched) {\n if (enableLogging) {\n console.warn(\n `🎨 Theme Management Plugin: collection \"${targetCollection}\" was not found, leaving config untouched.`,\n )\n }\n return config\n }\n\n return {\n ...config,\n collections,\n }\n }\n}\n\ntype FetchOptionsInput = string | FetchThemeConfigurationOptions\n\nexport const fetchThemeConfiguration = async (\n options?: FetchOptionsInput,\n): Promise<SiteThemeConfiguration | null> => {\n const normalizedOptions =\n typeof options === 'string'\n ? { tenantSlug: options }\n : options ?? {}\n\n const {\n tenantSlug,\n collectionSlug = 'site-settings',\n depth,\n locale,\n draft,\n queryParams = {},\n } = normalizedOptions\n\n const params = new URLSearchParams({ limit: '1' })\n\n if (typeof depth === 'number') params.set('depth', String(depth))\n if (tenantSlug) params.set('tenant', tenantSlug)\n if (locale) params.set('locale', locale)\n if (draft) params.set('draft', 'true')\n\n Object.entries(queryParams).forEach(([key, value]) => {\n if (value === undefined) return\n params.set(key, String(value))\n })\n\n const url = `/api/${collectionSlug}?${params.toString()}`\n\n try {\n const response = await fetch(url)\n if (!response.ok) {\n throw new Error(`Failed to fetch theme configuration (status ${response.status})`)\n }\n\n const data = (await response.json()) as {\n docs?: Array<{ themeConfiguration?: SiteThemeConfiguration }>\n }\n\n const doc = data.docs?.[0]\n\n return doc?.themeConfiguration ?? null\n } catch (error) {\n console.warn('Failed to fetch theme configuration:', error)\n return null\n }\n}\n\nexport const getThemePreset = (themeName: string): ThemePreset | null => {\n return defaultThemePresets.find((preset) => preset.name === themeName) || null\n}\n\nexport const getAvailableThemePresets = (): ThemePreset[] => {\n return defaultThemePresets\n}\n\n\n\nexport { defaultThemePresets } from './presets.js'\nexport type { ThemePreset, ThemeTypographyPreset } from './presets.js'\nexport type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } from './types.js'\nexport {\n DEFAULT_THEME_CONFIGURATION,\n resolveThemeConfiguration,\n} from './utils/resolveThemeConfiguration.js'\nexport { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js'\nexport { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js'\
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { CollectionConfig, Config, Field, Plugin } from 'payload'\r\nimport { createThemeConfigurationField } from './fields/themeConfigurationField.js'\r\nimport type { SiteThemeConfiguration } from './payload-types.js'\r\nimport type { ThemePreset } from './presets.js'\r\nimport { defaultThemePresets } from './presets.js'\r\nimport type {\r\n FetchThemeConfigurationOptions,\r\n ThemeManagementPluginOptions,\r\n} from './types.js'\r\n\r\nconst THEME_FIELD_NAME = 'themeConfiguration'\r\n\r\nconst removeExistingThemeField = (fields: Field[] = []): Field[] =>\r\n fields.filter((field) => {\r\n const candidate = field as { name?: unknown }\r\n return candidate?.name !== THEME_FIELD_NAME\r\n })\r\n\r\nconst upsertThemeField = (\r\n fields: Field[] | undefined,\r\n themeField: Field,\r\n enableLogging: boolean,\r\n): Field[] => {\r\n const sanitized = removeExistingThemeField(fields ?? [])\r\n\r\n if (enableLogging) {\r\n console.log('🎨 Theme Management Plugin: injecting theme configuration field')\r\n }\r\n\r\n return [...sanitized, themeField]\r\n}\r\n\r\nconst ensureCollectionsArray = (collections: Config['collections']): CollectionConfig[] =>\r\n Array.isArray(collections) ? collections : []\r\n\r\nexport const themeManagementPlugin = (options: ThemeManagementPluginOptions = {}): Plugin => {\r\n return (config: Config): Config => {\r\n const {\r\n enabled = true,\r\n targetCollection = 'site-settings',\r\n themePresets = defaultThemePresets,\r\n defaultTheme = 'cool',\r\n includeColorModeToggle = true,\r\n includeCustomCSS = true,\r\n includeBrandIdentity = false,\r\n enableAdvancedFeatures = true,\r\n enableLogging = false,\r\n } = options\r\n\r\n if (!enabled) {\r\n if (enableLogging) {\r\n console.log('🎨 Theme Management Plugin: disabled via options, skipping.')\r\n }\r\n return config\r\n }\r\n\r\n const themeField = createThemeConfigurationField({\r\n themePresets,\r\n defaultTheme,\r\n includeColorModeToggle,\r\n includeCustomCSS,\r\n includeBrandIdentity: includeBrandIdentity ?? false,\r\n enableAdvancedFeatures,\r\n })\r\n\r\n let collectionTouched = false\r\n\r\n const collections = ensureCollectionsArray(config.collections).map((collection) => {\r\n if (collection.slug !== targetCollection) {\r\n return collection\r\n }\r\n\r\n collectionTouched = true\r\n\r\n if (enableLogging) {\r\n console.log(\r\n `🎨 Theme Management Plugin: enhancing collection \"${collection.slug}\"`,\r\n )\r\n }\r\n\r\n const existingFields = Array.isArray(collection.fields) ? collection.fields : []\r\n\r\n const fields = upsertThemeField(existingFields, themeField, enableLogging)\r\n\r\n return {\r\n ...collection,\r\n fields,\r\n }\r\n })\r\n\r\n if (!collectionTouched) {\r\n if (enableLogging) {\r\n console.warn(\r\n `🎨 Theme Management Plugin: collection \"${targetCollection}\" was not found, leaving config untouched.`,\r\n )\r\n }\r\n return config\r\n }\r\n\r\n return {\r\n ...config,\r\n collections,\r\n }\r\n }\r\n}\r\n\r\ntype FetchOptionsInput = string | FetchThemeConfigurationOptions\r\n\r\nexport const fetchThemeConfiguration = async (\r\n options?: FetchOptionsInput,\r\n): Promise<SiteThemeConfiguration | null> => {\r\n const normalizedOptions =\r\n typeof options === 'string'\r\n ? { tenantSlug: options }\r\n : options ?? {}\r\n\r\n const {\r\n tenantSlug,\r\n collectionSlug = 'site-settings',\r\n depth,\r\n locale,\r\n draft,\r\n queryParams = {},\r\n } = normalizedOptions\r\n\r\n const params = new URLSearchParams({ limit: '1' })\r\n\r\n if (typeof depth === 'number') params.set('depth', String(depth))\r\n if (tenantSlug) params.set('tenant', tenantSlug)\r\n if (locale) params.set('locale', locale)\r\n if (draft) params.set('draft', 'true')\r\n\r\n Object.entries(queryParams).forEach(([key, value]) => {\r\n if (value === undefined) return\r\n params.set(key, String(value))\r\n })\r\n\r\n const url = `/api/${collectionSlug}?${params.toString()}`\r\n\r\n try {\r\n const response = await fetch(url)\r\n if (!response.ok) {\r\n throw new Error(`Failed to fetch theme configuration (status ${response.status})`)\r\n }\r\n\r\n const data = (await response.json()) as {\r\n docs?: Array<{ themeConfiguration?: SiteThemeConfiguration }>\r\n }\r\n\r\n const doc = data.docs?.[0]\r\n\r\n return doc?.themeConfiguration ?? null\r\n } catch (error) {\r\n console.warn('Failed to fetch theme configuration:', error)\r\n return null\r\n }\r\n}\r\n\r\nexport const getThemePreset = (themeName: string): ThemePreset | null => {\r\n return defaultThemePresets.find((preset) => preset.name === themeName) || null\r\n}\r\n\r\nexport const getAvailableThemePresets = (): ThemePreset[] => {\r\n return defaultThemePresets\r\n}\r\n\r\n\r\n\r\nexport { defaultThemePresets } from './presets.js'\r\nexport type { ThemePreset, ThemeTypographyPreset } from './presets.js'\r\nexport type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } from './types.js'\r\nexport {\r\n DEFAULT_THEME_CONFIGURATION,\r\n resolveThemeConfiguration,\r\n} from './utils/resolveThemeConfiguration.js'\r\nexport { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js'\r\nexport { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js'\r\n\r\nexport type { Mode, ThemeDefaults } from './providers/Theme/types.js'\r\nexport { ThemeProvider } from './providers/Theme/index.js'\r\n\r\nexport const ThemeManagementPlugin = themeManagementPlugin\r\n/** @deprecated use {@link themeManagementPlugin} */\r\nexport const themeConfigurationPlugin = themeManagementPlugin\r\n\r\nexport default themeManagementPlugin"],"names":["createThemeConfigurationField","defaultThemePresets","THEME_FIELD_NAME","removeExistingThemeField","fields","filter","field","candidate","name","upsertThemeField","themeField","enableLogging","sanitized","console","log","ensureCollectionsArray","collections","Array","isArray","themeManagementPlugin","options","config","enabled","targetCollection","themePresets","defaultTheme","includeColorModeToggle","includeCustomCSS","includeBrandIdentity","enableAdvancedFeatures","collectionTouched","map","collection","slug","existingFields","warn","fetchThemeConfiguration","normalizedOptions","tenantSlug","collectionSlug","depth","locale","draft","queryParams","params","URLSearchParams","limit","set","String","Object","entries","forEach","key","value","undefined","url","toString","response","fetch","ok","Error","status","data","json","doc","docs","themeConfiguration","error","getThemePreset","themeName","find","preset","getAvailableThemePresets","DEFAULT_THEME_CONFIGURATION","resolveThemeConfiguration","generateThemeColorsCss","hexToHsl","generateThemeCSS","getThemeStyles","ThemeProvider","ThemeManagementPlugin","themeConfigurationPlugin"],"mappings":"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"}
|
package/dist/payload-types.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Payload types for theme configuration
|
|
3
|
-
* These are placeholder types that will be extended in the consuming application
|
|
1
|
+
/**
|
|
2
|
+
* Payload types for theme configuration
|
|
3
|
+
* These are placeholder types that will be extended in the consuming application
|
|
4
4
|
*/ export { };
|
|
5
5
|
|
|
6
6
|
//# sourceMappingURL=payload-types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/payload-types.ts"],"sourcesContent":["/**\n * Payload types for theme configuration\n * These are placeholder types that will be extended in the consuming application\n */\n\nexport interface ThemeColorOverride {\n [token: string]: string | null | undefined;\n primary?: string | null;\n secondary?: string | null;\n accent?: string | null;\n background?: string | null;\n surface?: string | null;\n surfaceVariant?: string | null;\n text?: string | null;\n textSecondary?: string | null;\n border?: string | null;\n success?: string | null;\n warning?: string | null;\n error?: string | null;\n info?: string | null;\n foreground?: string | null;\n card?: string | null;\n cardForeground?: string | null;\n popover?: string | null;\n popoverForeground?: string | null;\n primaryForeground?: string | null;\n secondaryForeground?: string | null;\n muted?: string | null;\n mutedForeground?: string | null;\n accentForeground?: string | null;\n destructive?: string | null;\n destructiveForeground?: string | null;\n input?: string | null;\n ring?: string | null;\n}\n\nexport interface ThemeTypographyOverride {\n bodyFont?:\n | (\n | 'preset'\n | 'system'\n | 'geist-sans'\n | 'inter'\n | 'manrope'\n | 'urbanist'\n | 'outfit'\n | 'lora'\n | 'custom'\n )\n | null;\n headingFont?:\n | (\n | 'preset'\n | 'geist-sans'\n | 'geist-mono'\n | 'outfit'\n | 'playfair'\n | 'lora'\n | 'serif-classic'\n | 'custom'\n )\n | null;\n bodyFontCustom?: string | null;\n headingFontCustom?: string | null;\n baseFontSize?: ('preset' | '14px' | '16px' | '18px' | '20px') | null;\n lineHeight?: ('preset' | '1.4' | '1.5' | '1.6' | '1.75' | '1.9') | null;\n fontWeights?: Partial<\n Record<'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'black', string | null>\n > | null;\n letterSpacing?: Partial<Record<'tight' | 'normal' | 'wide' | 'wider', string | null>> | null;\n}\n\nexport interface ThemeCustomization {\n primaryColor?: string | null;\n accentColor?: string | null;\n backgroundColor?: string | null;\n textColor?: string | null;\n customCSS?: string | null;\n}\n\nexport interface SiteThemeConfiguration {\n theme?: string | null;\n preset?: string | null;\n colorMode?: 'auto' | 'light' | 'dark' | null;\n allowColorModeToggle?: boolean | null;\n lightMode?: ThemeColorOverride | null;\n darkMode?: ThemeColorOverride | null;\n colors?: ThemeColorOverride | null;\n typography?: ThemeTypographyOverride | null;\n borderRadius?: 'none' | 'small' | 'medium' | 'large' | 'xl' | null;\n fontScale?: 'small' | 'medium' | 'large' | 'xl' | null;\n spacing?: 'compact' | 'medium' | 'spacious' | null;\n animationLevel?: 'none' | 'reduced' | 'medium' | 'high' | null;\n customCSS?: string | null;\n customization?: ThemeCustomization | null;\n radius?: string | null;\n}\n\nexport interface SiteSetting {\n id: string;\n title?: string | null;\n slug?: string | null;\n themeConfiguration: SiteThemeConfiguration | null;\n updatedAt: string;\n createdAt: string;\n}\n\nexport interface Config {\n collections: {\n 'site-settings': SiteSetting;\n };\n globals: Record<string, unknown>;\n}\n"],"names":[],"mappings":"AAAA;;;CAGC,GAwGD,WAKC"}
|
|
1
|
+
{"version":3,"sources":["../src/payload-types.ts"],"sourcesContent":["/**\r\n * Payload types for theme configuration\r\n * These are placeholder types that will be extended in the consuming application\r\n */\r\n\r\nexport interface ThemeColorOverride {\r\n [token: string]: string | null | undefined;\r\n primary?: string | null;\r\n secondary?: string | null;\r\n accent?: string | null;\r\n background?: string | null;\r\n surface?: string | null;\r\n surfaceVariant?: string | null;\r\n text?: string | null;\r\n textSecondary?: string | null;\r\n border?: string | null;\r\n success?: string | null;\r\n warning?: string | null;\r\n error?: string | null;\r\n info?: string | null;\r\n foreground?: string | null;\r\n card?: string | null;\r\n cardForeground?: string | null;\r\n popover?: string | null;\r\n popoverForeground?: string | null;\r\n primaryForeground?: string | null;\r\n secondaryForeground?: string | null;\r\n muted?: string | null;\r\n mutedForeground?: string | null;\r\n accentForeground?: string | null;\r\n destructive?: string | null;\r\n destructiveForeground?: string | null;\r\n input?: string | null;\r\n ring?: string | null;\r\n}\r\n\r\nexport interface ThemeTypographyOverride {\r\n bodyFont?:\r\n | (\r\n | 'preset'\r\n | 'system'\r\n | 'geist-sans'\r\n | 'inter'\r\n | 'manrope'\r\n | 'urbanist'\r\n | 'outfit'\r\n | 'lora'\r\n | 'custom'\r\n )\r\n | null;\r\n headingFont?:\r\n | (\r\n | 'preset'\r\n | 'geist-sans'\r\n | 'geist-mono'\r\n | 'outfit'\r\n | 'playfair'\r\n | 'lora'\r\n | 'serif-classic'\r\n | 'custom'\r\n )\r\n | null;\r\n bodyFontCustom?: string | null;\r\n headingFontCustom?: string | null;\r\n baseFontSize?: ('preset' | '14px' | '16px' | '18px' | '20px') | null;\r\n lineHeight?: ('preset' | '1.4' | '1.5' | '1.6' | '1.75' | '1.9') | null;\r\n fontWeights?: Partial<\r\n Record<'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'black', string | null>\r\n > | null;\r\n letterSpacing?: Partial<Record<'tight' | 'normal' | 'wide' | 'wider', string | null>> | null;\r\n}\r\n\r\nexport interface ThemeCustomization {\r\n primaryColor?: string | null;\r\n accentColor?: string | null;\r\n backgroundColor?: string | null;\r\n textColor?: string | null;\r\n customCSS?: string | null;\r\n}\r\n\r\nexport interface SiteThemeConfiguration {\r\n theme?: string | null;\r\n preset?: string | null;\r\n colorMode?: 'auto' | 'light' | 'dark' | null;\r\n allowColorModeToggle?: boolean | null;\r\n lightMode?: ThemeColorOverride | null;\r\n darkMode?: ThemeColorOverride | null;\r\n colors?: ThemeColorOverride | null;\r\n typography?: ThemeTypographyOverride | null;\r\n borderRadius?: 'none' | 'small' | 'medium' | 'large' | 'xl' | null;\r\n fontScale?: 'small' | 'medium' | 'large' | 'xl' | null;\r\n spacing?: 'compact' | 'medium' | 'spacious' | null;\r\n animationLevel?: 'none' | 'reduced' | 'medium' | 'high' | null;\r\n customCSS?: string | null;\r\n customization?: ThemeCustomization | null;\r\n radius?: string | null;\r\n}\r\n\r\nexport interface SiteSetting {\r\n id: string;\r\n title?: string | null;\r\n slug?: string | null;\r\n themeConfiguration: SiteThemeConfiguration | null;\r\n updatedAt: string;\r\n createdAt: string;\r\n}\r\n\r\nexport interface Config {\r\n collections: {\r\n 'site-settings': SiteSetting;\r\n };\r\n globals: Record<string, unknown>;\r\n}\r\n"],"names":[],"mappings":"AAAA;;;CAGC,GAwGD,WAKC"}
|
package/dist/plugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/plugin.ts"],"sourcesContent":["export type { ThemeManagementPluginOptions } from './types.js';\n"],"names":[],"mappings":"AAAA,WAA+D"}
|
|
1
|
+
{"version":3,"sources":["../src/plugin.ts"],"sourcesContent":["export type { ThemeManagementPluginOptions } from './types.js';\r\n"],"names":[],"mappings":"AAAA,WAA+D"}
|