@kilivi/payloadcms-theme-management 1.1.2 → 2.1.0
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 +318 -847
- package/dist/components/AppearanceSessionControls.d.ts +15 -0
- package/dist/components/AppearanceSessionControls.d.ts.map +1 -0
- package/dist/components/AppearanceSessionControls.js +152 -0
- package/dist/components/AppearanceSessionControls.js.map +1 -0
- package/dist/components/ColorModeToggle.css +42 -0
- package/dist/components/ColorModeToggle.d.ts +40 -0
- package/dist/components/ColorModeToggle.d.ts.map +1 -0
- package/dist/components/ColorModeToggle.js +111 -0
- package/dist/components/ColorModeToggle.js.map +1 -0
- package/dist/components/ServerThemeInjector.d.ts.map +1 -1
- package/dist/components/ServerThemeInjector.js +41 -14
- package/dist/components/ServerThemeInjector.js.map +1 -1
- package/dist/components/ThemeLivePreviewSync.d.ts +1 -0
- package/dist/components/ThemeLivePreviewSync.d.ts.map +1 -1
- package/dist/components/ThemeLivePreviewSync.js +1 -1
- package/dist/components/ThemeLivePreviewSync.js.map +1 -1
- package/dist/components/ThemeSwitcher.d.ts +36 -0
- package/dist/components/ThemeSwitcher.d.ts.map +1 -0
- package/dist/components/ThemeSwitcher.js +89 -0
- package/dist/components/ThemeSwitcher.js.map +1 -0
- package/dist/components/typographyPreviewUtils.d.ts.map +1 -1
- package/dist/components/typographyPreviewUtils.js +8 -1
- package/dist/components/typographyPreviewUtils.js.map +1 -1
- package/dist/constants/devicePreviews.d.ts +35 -0
- package/dist/constants/devicePreviews.d.ts.map +1 -0
- package/dist/constants/devicePreviews.js +43 -0
- package/dist/constants/devicePreviews.js.map +1 -0
- package/dist/constants/themeFonts.js +9 -9
- package/dist/constants/themeFonts.js.map +1 -1
- package/dist/extended-presets.d.ts +0 -4
- package/dist/extended-presets.d.ts.map +1 -1
- package/dist/extended-presets.js +1 -18
- package/dist/extended-presets.js.map +1 -1
- package/dist/extended-themes.d.ts.map +1 -1
- package/dist/extended-themes.js +428 -0
- package/dist/extended-themes.js.map +1 -1
- package/dist/fields/AccessibilityAuditField.d.ts +2 -0
- package/dist/fields/AccessibilityAuditField.d.ts.map +1 -0
- package/dist/fields/AccessibilityAuditField.js +303 -0
- package/dist/fields/AccessibilityAuditField.js.map +1 -0
- package/dist/fields/AppearancePreviewField.d.ts +2 -0
- package/dist/fields/AppearancePreviewField.d.ts.map +1 -0
- package/dist/fields/AppearancePreviewField.js +763 -0
- package/dist/fields/AppearancePreviewField.js.map +1 -0
- package/dist/fields/ColorPickerField.d.ts.map +1 -1
- package/dist/fields/ColorPickerField.js +89 -85
- package/dist/fields/ColorPickerField.js.map +1 -1
- package/dist/fields/FontSelectField.d.ts +6 -0
- package/dist/fields/FontSelectField.d.ts.map +1 -1
- package/dist/fields/FontSelectField.js +195 -122
- package/dist/fields/FontSelectField.js.map +1 -1
- package/dist/fields/PaletteGeneratorField.d.ts +7 -0
- package/dist/fields/PaletteGeneratorField.d.ts.map +1 -0
- package/dist/fields/PaletteGeneratorField.js +327 -0
- package/dist/fields/PaletteGeneratorField.js.map +1 -0
- package/dist/fields/StylePresetField.d.ts +3 -0
- package/dist/fields/StylePresetField.d.ts.map +1 -0
- package/dist/fields/StylePresetField.js +462 -0
- package/dist/fields/StylePresetField.js.map +1 -0
- package/dist/fields/ThemeColorPickerField.css +115 -35
- package/dist/fields/ThemeColorPickerField.d.ts.map +1 -1
- package/dist/fields/ThemeColorPickerField.js +204 -70
- package/dist/fields/ThemeColorPickerField.js.map +1 -1
- package/dist/fields/ThemeExportField.d.ts +6 -0
- package/dist/fields/ThemeExportField.d.ts.map +1 -0
- package/dist/fields/ThemeExportField.js +202 -0
- package/dist/fields/ThemeExportField.js.map +1 -0
- package/dist/fields/ThemePresetImportField.d.ts.map +1 -1
- package/dist/fields/ThemePresetImportField.js +56 -25
- package/dist/fields/ThemePresetImportField.js.map +1 -1
- package/dist/fields/ThemePreviewField.css +382 -5
- package/dist/fields/ThemePreviewField.d.ts.map +1 -1
- package/dist/fields/ThemePreviewField.js +268 -170
- package/dist/fields/ThemePreviewField.js.map +1 -1
- package/dist/fields/ThemeTokenSelectField.d.ts.map +1 -1
- package/dist/fields/ThemeTokenSelectField.js +278 -80
- package/dist/fields/ThemeTokenSelectField.js.map +1 -1
- package/dist/fields/colorFieldHelpers.d.ts +90 -0
- package/dist/fields/colorFieldHelpers.d.ts.map +1 -0
- package/dist/fields/colorFieldHelpers.js +133 -0
- package/dist/fields/colorFieldHelpers.js.map +1 -0
- package/dist/fields/colorModeFields.d.ts +1 -1
- package/dist/fields/colorModeFields.d.ts.map +1 -1
- package/dist/fields/colorModeFields.js +49 -7
- package/dist/fields/colorModeFields.js.map +1 -1
- package/dist/fields/themeConfigurationField.d.ts +8 -1
- package/dist/fields/themeConfigurationField.d.ts.map +1 -1
- package/dist/fields/themeConfigurationField.js +961 -29
- package/dist/fields/themeConfigurationField.js.map +1 -1
- package/dist/globals/ThemeSettings/FontPicker/FontPreview.d.ts.map +1 -1
- package/dist/globals/ThemeSettings/FontPicker/FontPreview.js +8 -4
- package/dist/globals/ThemeSettings/FontPicker/FontPreview.js.map +1 -1
- package/dist/globals/ThemeSettings/FontPicker/index.d.ts.map +1 -1
- package/dist/globals/ThemeSettings/FontPicker/index.js +81 -26
- package/dist/globals/ThemeSettings/FontPicker/index.js.map +1 -1
- package/dist/globals/ThemeSettings/FontPicker/styles.css +98 -41
- package/dist/globals/ThemeSettings/FontPicker/translations.d.ts +6 -0
- package/dist/globals/ThemeSettings/FontPicker/translations.d.ts.map +1 -1
- package/dist/globals/ThemeSettings/FontPicker/translations.js +14 -2
- package/dist/globals/ThemeSettings/FontPicker/translations.js.map +1 -1
- package/dist/globals/ThemeSettings/config.d.ts.map +1 -1
- package/dist/globals/ThemeSettings/config.js +76 -79
- package/dist/globals/ThemeSettings/config.js.map +1 -1
- package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.d.ts.map +1 -1
- package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.js +63 -62
- package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.js.map +1 -1
- package/dist/globals/ThemeSettings/fields/TypographyInfoField.d.ts.map +1 -1
- package/dist/globals/ThemeSettings/fields/TypographyInfoField.js +22 -25
- package/dist/globals/ThemeSettings/fields/TypographyInfoField.js.map +1 -1
- package/dist/hooks/useAppearanceSession.d.ts +50 -0
- package/dist/hooks/useAppearanceSession.d.ts.map +1 -0
- package/dist/hooks/useAppearanceSession.js +91 -0
- package/dist/hooks/useAppearanceSession.js.map +1 -0
- package/dist/hooks/useThemeTranslations.d.ts +13 -0
- package/dist/hooks/useThemeTranslations.d.ts.map +1 -0
- package/dist/hooks/useThemeTranslations.js +22 -0
- package/dist/hooks/useThemeTranslations.js.map +1 -0
- package/dist/i18n.d.ts +53 -0
- package/dist/i18n.d.ts.map +1 -0
- package/dist/i18n.js +53 -0
- package/dist/i18n.js.map +1 -0
- package/dist/index.d.ts +10 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +130 -32
- package/dist/index.js.map +1 -1
- package/dist/payload-types.d.ts +24 -0
- package/dist/payload-types.d.ts.map +1 -1
- package/dist/payload-types.js.map +1 -1
- package/dist/presets.d.ts +8 -0
- package/dist/presets.d.ts.map +1 -1
- package/dist/presets.js.map +1 -1
- package/dist/providers/Theme/index.d.ts.map +1 -1
- package/dist/providers/Theme/index.js +75 -11
- package/dist/providers/Theme/index.js.map +1 -1
- package/dist/providers/Theme/themeConfig.d.ts.map +1 -1
- package/dist/providers/Theme/themeConfig.js +104 -0
- package/dist/providers/Theme/themeConfig.js.map +1 -1
- package/dist/providers/Theme/types.d.ts +1 -1
- package/dist/providers/Theme/types.d.ts.map +1 -1
- package/dist/providers/Theme/types.js +10 -1
- package/dist/providers/Theme/types.js.map +1 -1
- package/dist/style-presets.d.ts +66 -0
- package/dist/style-presets.d.ts.map +1 -0
- package/dist/style-presets.js +556 -0
- package/dist/style-presets.js.map +1 -0
- package/dist/translations.d.ts +159 -1
- package/dist/translations.d.ts.map +1 -1
- package/dist/translations.js +310 -9
- package/dist/translations.js.map +1 -1
- package/dist/tweakcn-special-themes.d.ts.map +1 -1
- package/dist/tweakcn-special-themes.js +585 -9
- package/dist/tweakcn-special-themes.js.map +1 -1
- package/dist/types/css.d.js +3 -0
- package/dist/types/css.d.js.map +1 -0
- package/dist/types.d.ts +30 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +1 -1
- package/dist/types.js.map +1 -1
- package/dist/utilities/getThemeSettings.d.ts.map +1 -1
- package/dist/utilities/getThemeSettings.js +2 -14
- package/dist/utilities/getThemeSettings.js.map +1 -1
- package/dist/utils/contrast.d.ts +63 -0
- package/dist/utils/contrast.d.ts.map +1 -0
- package/dist/utils/contrast.js +158 -0
- package/dist/utils/contrast.js.map +1 -0
- package/dist/utils/exportTokens.d.ts +30 -0
- package/dist/utils/exportTokens.d.ts.map +1 -0
- package/dist/utils/exportTokens.js +183 -0
- package/dist/utils/exportTokens.js.map +1 -0
- package/dist/utils/generatePalette.d.ts +46 -0
- package/dist/utils/generatePalette.d.ts.map +1 -0
- package/dist/utils/generatePalette.js +127 -0
- package/dist/utils/generatePalette.js.map +1 -0
- package/dist/utils/generateThemeCSS.d.ts.map +1 -1
- package/dist/utils/generateThemeCSS.js +2 -40
- package/dist/utils/generateThemeCSS.js.map +1 -1
- package/dist/utils/livePreviewThemeRuntime.d.ts +16 -2
- package/dist/utils/livePreviewThemeRuntime.d.ts.map +1 -1
- package/dist/utils/livePreviewThemeRuntime.js +37 -14
- package/dist/utils/livePreviewThemeRuntime.js.map +1 -1
- package/dist/utils/localizedText.d.ts +8 -0
- package/dist/utils/localizedText.d.ts.map +1 -0
- package/dist/utils/localizedText.js +21 -0
- package/dist/utils/localizedText.js.map +1 -0
- package/dist/utils/resolveThemeConfiguration.d.ts +45 -1
- package/dist/utils/resolveThemeConfiguration.d.ts.map +1 -1
- package/dist/utils/resolveThemeConfiguration.js +12 -5
- package/dist/utils/resolveThemeConfiguration.js.map +1 -1
- package/dist/utils/themeColors.d.ts +3 -0
- package/dist/utils/themeColors.d.ts.map +1 -1
- package/dist/utils/themeColors.js +30 -1
- package/dist/utils/themeColors.js.map +1 -1
- package/dist/utils/themeHtmlAttributes.d.ts +32 -12
- package/dist/utils/themeHtmlAttributes.d.ts.map +1 -1
- package/dist/utils/themeHtmlAttributes.js +38 -5
- package/dist/utils/themeHtmlAttributes.js.map +1 -1
- package/dist/utils/themeUtils.d.ts +3 -5
- package/dist/utils/themeUtils.d.ts.map +1 -1
- package/dist/utils/themeUtils.js +416 -6
- package/dist/utils/themeUtils.js.map +1 -1
- package/dist/utils/tweakcnConverter.d.ts +1 -3
- package/dist/utils/tweakcnConverter.d.ts.map +1 -1
- package/dist/utils/tweakcnConverter.js +1 -3
- package/dist/utils/tweakcnConverter.js.map +1 -1
- package/package.json +11 -5
- package/dist/components/ThemePreview.d.ts +0 -3
- package/dist/components/ThemePreview.d.ts.map +0 -1
- package/dist/components/ThemePreview.js +0 -321
- package/dist/components/ThemePreview.js.map +0 -1
- package/dist/plugin.d.ts +0 -2
- package/dist/plugin.d.ts.map +0 -1
- package/dist/plugin.js +0 -3
- package/dist/plugin.js.map +0 -1
|
@@ -1,321 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useField } from '@payloadcms/ui';
|
|
4
|
-
import React, { useMemo } from 'react';
|
|
5
|
-
import { allThemePresets } from '../presets.js';
|
|
6
|
-
import { themeIsValid } from '../providers/Theme/types.js';
|
|
7
|
-
import { getTranslations } from '../translations.js';
|
|
8
|
-
import { getAdminLanguage } from '../utils/getAdminLanguage.js';
|
|
9
|
-
const DEFAULT_THEME_KEY = 'cool';
|
|
10
|
-
const basePresetMap = allThemePresets.reduce((accumulator, preset)=>{
|
|
11
|
-
accumulator[preset.name] = preset;
|
|
12
|
-
return accumulator;
|
|
13
|
-
}, {});
|
|
14
|
-
const fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? allThemePresets[0];
|
|
15
|
-
const fallbackLightMode = fallbackPreset?.lightMode ?? {
|
|
16
|
-
primary: '#3b82f6',
|
|
17
|
-
accent: '#06b6d4',
|
|
18
|
-
background: '#ffffff',
|
|
19
|
-
foreground: '#1f2937'
|
|
20
|
-
};
|
|
21
|
-
export default function ThemePreview() {
|
|
22
|
-
// Get individual field values using useField hooks
|
|
23
|
-
const { value: selectedTheme } = useField({
|
|
24
|
-
path: 'themeConfiguration.theme'
|
|
25
|
-
});
|
|
26
|
-
const { value: primaryColor } = useField({
|
|
27
|
-
path: 'themeConfiguration.customization.primaryColor'
|
|
28
|
-
});
|
|
29
|
-
const { value: accentColor } = useField({
|
|
30
|
-
path: 'themeConfiguration.customization.accentColor'
|
|
31
|
-
});
|
|
32
|
-
const { value: backgroundColor } = useField({
|
|
33
|
-
path: 'themeConfiguration.customization.backgroundColor'
|
|
34
|
-
});
|
|
35
|
-
const { value: textColor } = useField({
|
|
36
|
-
path: 'themeConfiguration.customization.textColor'
|
|
37
|
-
});
|
|
38
|
-
// Determine current theme and if overrides are active
|
|
39
|
-
const currentTheme = themeIsValid(selectedTheme) ? selectedTheme : fallbackPreset?.name ?? 'cool';
|
|
40
|
-
const hasOverrides = Boolean(primaryColor || accentColor || backgroundColor || textColor);
|
|
41
|
-
const themeColors = useMemo(()=>{
|
|
42
|
-
const preset = basePresetMap[currentTheme] ?? fallbackPreset;
|
|
43
|
-
const lightMode = preset?.lightMode ?? fallbackLightMode;
|
|
44
|
-
return {
|
|
45
|
-
primary: lightMode?.primary ?? fallbackLightMode.primary,
|
|
46
|
-
accent: lightMode?.accent ?? lightMode?.secondary ?? fallbackLightMode.accent ?? fallbackLightMode.primary,
|
|
47
|
-
background: lightMode?.background ?? fallbackLightMode.background,
|
|
48
|
-
text: lightMode?.foreground ?? fallbackLightMode.foreground
|
|
49
|
-
};
|
|
50
|
-
}, [
|
|
51
|
-
currentTheme
|
|
52
|
-
]);
|
|
53
|
-
const currentColors = useMemo(()=>({
|
|
54
|
-
primary: primaryColor || themeColors.primary,
|
|
55
|
-
accent: accentColor || themeColors.accent,
|
|
56
|
-
background: backgroundColor || themeColors.background,
|
|
57
|
-
text: textColor || themeColors.text
|
|
58
|
-
}), [
|
|
59
|
-
primaryColor,
|
|
60
|
-
accentColor,
|
|
61
|
-
backgroundColor,
|
|
62
|
-
textColor,
|
|
63
|
-
themeColors
|
|
64
|
-
]);
|
|
65
|
-
const t = getTranslations(getAdminLanguage());
|
|
66
|
-
return /*#__PURE__*/ _jsxs("div", {
|
|
67
|
-
className: "theme-preview",
|
|
68
|
-
style: {
|
|
69
|
-
marginTop: '20px'
|
|
70
|
-
},
|
|
71
|
-
children: [
|
|
72
|
-
/*#__PURE__*/ _jsx("div", {
|
|
73
|
-
style: {
|
|
74
|
-
fontSize: '16px',
|
|
75
|
-
fontWeight: '600',
|
|
76
|
-
marginBottom: '16px',
|
|
77
|
-
color: '#374151'
|
|
78
|
-
},
|
|
79
|
-
children: t.livePreview.largeTitle
|
|
80
|
-
}),
|
|
81
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
82
|
-
className: "preview-container",
|
|
83
|
-
style: {
|
|
84
|
-
border: '2px solid #e5e7eb',
|
|
85
|
-
borderRadius: '12px',
|
|
86
|
-
overflow: 'hidden',
|
|
87
|
-
backgroundColor: currentColors.background,
|
|
88
|
-
color: currentColors.text,
|
|
89
|
-
minHeight: '300px'
|
|
90
|
-
},
|
|
91
|
-
children: [
|
|
92
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
93
|
-
style: {
|
|
94
|
-
backgroundColor: currentColors.primary,
|
|
95
|
-
color: currentColors.background,
|
|
96
|
-
padding: '16px 24px',
|
|
97
|
-
display: 'flex',
|
|
98
|
-
justifyContent: 'space-between',
|
|
99
|
-
alignItems: 'center'
|
|
100
|
-
},
|
|
101
|
-
children: [
|
|
102
|
-
/*#__PURE__*/ _jsx("div", {
|
|
103
|
-
style: {
|
|
104
|
-
fontSize: '20px',
|
|
105
|
-
fontWeight: '700'
|
|
106
|
-
},
|
|
107
|
-
children: t.preview.siteTitle
|
|
108
|
-
}),
|
|
109
|
-
/*#__PURE__*/ _jsxs("nav", {
|
|
110
|
-
style: {
|
|
111
|
-
display: 'flex',
|
|
112
|
-
gap: '24px',
|
|
113
|
-
fontSize: '14px'
|
|
114
|
-
},
|
|
115
|
-
children: [
|
|
116
|
-
/*#__PURE__*/ _jsx("span", {
|
|
117
|
-
children: t.preview.nav.home
|
|
118
|
-
}),
|
|
119
|
-
/*#__PURE__*/ _jsx("span", {
|
|
120
|
-
children: t.preview.nav.about
|
|
121
|
-
}),
|
|
122
|
-
/*#__PURE__*/ _jsx("span", {
|
|
123
|
-
children: t.preview.nav.services
|
|
124
|
-
}),
|
|
125
|
-
/*#__PURE__*/ _jsx("span", {
|
|
126
|
-
children: t.preview.nav.contact
|
|
127
|
-
})
|
|
128
|
-
]
|
|
129
|
-
})
|
|
130
|
-
]
|
|
131
|
-
}),
|
|
132
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
133
|
-
style: {
|
|
134
|
-
padding: '32px 24px'
|
|
135
|
-
},
|
|
136
|
-
children: [
|
|
137
|
-
/*#__PURE__*/ _jsx("h1", {
|
|
138
|
-
style: {
|
|
139
|
-
fontSize: '32px',
|
|
140
|
-
fontWeight: '800',
|
|
141
|
-
marginBottom: '16px',
|
|
142
|
-
color: currentColors.text
|
|
143
|
-
},
|
|
144
|
-
children: t.preview.welcomeTitle
|
|
145
|
-
}),
|
|
146
|
-
/*#__PURE__*/ _jsx("p", {
|
|
147
|
-
style: {
|
|
148
|
-
fontSize: '16px',
|
|
149
|
-
lineHeight: '1.6',
|
|
150
|
-
marginBottom: '24px',
|
|
151
|
-
color: currentColors.text,
|
|
152
|
-
opacity: 0.8
|
|
153
|
-
},
|
|
154
|
-
children: t.preview.welcomeCopy
|
|
155
|
-
}),
|
|
156
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
157
|
-
style: {
|
|
158
|
-
display: 'flex',
|
|
159
|
-
gap: '12px',
|
|
160
|
-
marginBottom: '24px'
|
|
161
|
-
},
|
|
162
|
-
children: [
|
|
163
|
-
/*#__PURE__*/ _jsx("button", {
|
|
164
|
-
style: {
|
|
165
|
-
backgroundColor: currentColors.primary,
|
|
166
|
-
color: currentColors.background,
|
|
167
|
-
border: 'none',
|
|
168
|
-
padding: '12px 24px',
|
|
169
|
-
borderRadius: '6px',
|
|
170
|
-
fontSize: '14px',
|
|
171
|
-
fontWeight: '600',
|
|
172
|
-
cursor: 'pointer'
|
|
173
|
-
},
|
|
174
|
-
children: "Primary Button"
|
|
175
|
-
}),
|
|
176
|
-
/*#__PURE__*/ _jsx("button", {
|
|
177
|
-
style: {
|
|
178
|
-
backgroundColor: 'transparent',
|
|
179
|
-
color: currentColors.primary,
|
|
180
|
-
border: `2px solid ${currentColors.primary}`,
|
|
181
|
-
padding: '10px 24px',
|
|
182
|
-
borderRadius: '6px',
|
|
183
|
-
fontSize: '14px',
|
|
184
|
-
fontWeight: '600',
|
|
185
|
-
cursor: 'pointer'
|
|
186
|
-
},
|
|
187
|
-
children: "Secondary Button"
|
|
188
|
-
})
|
|
189
|
-
]
|
|
190
|
-
}),
|
|
191
|
-
/*#__PURE__*/ _jsx("div", {
|
|
192
|
-
style: {
|
|
193
|
-
backgroundColor: currentColors.text,
|
|
194
|
-
color: currentColors.background,
|
|
195
|
-
padding: '24px',
|
|
196
|
-
borderRadius: '8px',
|
|
197
|
-
opacity: 0.05,
|
|
198
|
-
marginBottom: '16px'
|
|
199
|
-
}
|
|
200
|
-
}),
|
|
201
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
202
|
-
style: {
|
|
203
|
-
border: `1px solid ${currentColors.text}`,
|
|
204
|
-
padding: '20px',
|
|
205
|
-
borderRadius: '8px',
|
|
206
|
-
opacity: 0.1
|
|
207
|
-
},
|
|
208
|
-
children: [
|
|
209
|
-
/*#__PURE__*/ _jsx("h2", {
|
|
210
|
-
style: {
|
|
211
|
-
fontSize: '18px',
|
|
212
|
-
fontWeight: '600',
|
|
213
|
-
marginBottom: '12px',
|
|
214
|
-
color: currentColors.text
|
|
215
|
-
},
|
|
216
|
-
children: t.preview.sampleCardTitle
|
|
217
|
-
}),
|
|
218
|
-
/*#__PURE__*/ _jsx("p", {
|
|
219
|
-
style: {
|
|
220
|
-
fontSize: '14px',
|
|
221
|
-
color: currentColors.text,
|
|
222
|
-
opacity: 0.7
|
|
223
|
-
},
|
|
224
|
-
children: "This shows how cards and content blocks will appear."
|
|
225
|
-
})
|
|
226
|
-
]
|
|
227
|
-
})
|
|
228
|
-
]
|
|
229
|
-
}),
|
|
230
|
-
/*#__PURE__*/ _jsx("div", {
|
|
231
|
-
style: {
|
|
232
|
-
backgroundColor: currentColors.accent,
|
|
233
|
-
color: currentColors.background,
|
|
234
|
-
padding: '16px 24px',
|
|
235
|
-
textAlign: 'center',
|
|
236
|
-
fontSize: '14px',
|
|
237
|
-
marginTop: 'auto'
|
|
238
|
-
},
|
|
239
|
-
children: t.preview.footer
|
|
240
|
-
})
|
|
241
|
-
]
|
|
242
|
-
}),
|
|
243
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
244
|
-
style: {
|
|
245
|
-
marginTop: '12px',
|
|
246
|
-
fontSize: '12px',
|
|
247
|
-
color: '#6b7280',
|
|
248
|
-
display: 'grid',
|
|
249
|
-
gridTemplateColumns: 'repeat(2, 1fr)',
|
|
250
|
-
gap: '8px'
|
|
251
|
-
},
|
|
252
|
-
children: [
|
|
253
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
254
|
-
children: [
|
|
255
|
-
/*#__PURE__*/ _jsx("strong", {
|
|
256
|
-
children: "Active Theme:"
|
|
257
|
-
}),
|
|
258
|
-
" ",
|
|
259
|
-
currentTheme
|
|
260
|
-
]
|
|
261
|
-
}),
|
|
262
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
263
|
-
children: [
|
|
264
|
-
/*#__PURE__*/ _jsx("strong", {
|
|
265
|
-
children: "Primary:"
|
|
266
|
-
}),
|
|
267
|
-
" ",
|
|
268
|
-
currentColors.primary
|
|
269
|
-
]
|
|
270
|
-
}),
|
|
271
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
272
|
-
children: [
|
|
273
|
-
/*#__PURE__*/ _jsx("strong", {
|
|
274
|
-
children: "Accent:"
|
|
275
|
-
}),
|
|
276
|
-
" ",
|
|
277
|
-
currentColors.accent
|
|
278
|
-
]
|
|
279
|
-
}),
|
|
280
|
-
/*#__PURE__*/ _jsxs("div", {
|
|
281
|
-
children: [
|
|
282
|
-
/*#__PURE__*/ _jsx("strong", {
|
|
283
|
-
children: "Background:"
|
|
284
|
-
}),
|
|
285
|
-
" ",
|
|
286
|
-
currentColors.background
|
|
287
|
-
]
|
|
288
|
-
})
|
|
289
|
-
]
|
|
290
|
-
}),
|
|
291
|
-
hasOverrides && /*#__PURE__*/ _jsxs("div", {
|
|
292
|
-
style: {
|
|
293
|
-
marginTop: '8px',
|
|
294
|
-
padding: '8px 12px',
|
|
295
|
-
backgroundColor: '#fef3c7',
|
|
296
|
-
borderRadius: '6px',
|
|
297
|
-
fontSize: '11px',
|
|
298
|
-
color: '#92400e',
|
|
299
|
-
display: 'flex',
|
|
300
|
-
alignItems: 'center',
|
|
301
|
-
gap: '6px'
|
|
302
|
-
},
|
|
303
|
-
children: [
|
|
304
|
-
/*#__PURE__*/ _jsx("span", {
|
|
305
|
-
children: "⚡"
|
|
306
|
-
}),
|
|
307
|
-
/*#__PURE__*/ _jsxs("span", {
|
|
308
|
-
children: [
|
|
309
|
-
/*#__PURE__*/ _jsx("strong", {
|
|
310
|
-
children: "Custom colors applied"
|
|
311
|
-
}),
|
|
312
|
-
" - overriding theme defaults"
|
|
313
|
-
]
|
|
314
|
-
})
|
|
315
|
-
]
|
|
316
|
-
})
|
|
317
|
-
]
|
|
318
|
-
});
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
//# sourceMappingURL=ThemePreview.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/ThemePreview.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport React, { useMemo } from 'react'\nimport { allThemePresets } from '../presets.js'\nimport { themeIsValid } from '../providers/Theme/types.js'\nimport { getTranslations } from '../translations.js'\nimport { getAdminLanguage } from '../utils/getAdminLanguage.js'\n\nconst DEFAULT_THEME_KEY = 'cool'\nconst basePresetMap = allThemePresets.reduce<Record<string, (typeof allThemePresets)[number]>>(\n (accumulator, preset) => {\n accumulator[preset.name] = preset\n return accumulator\n },\n {},\n)\n\nconst fallbackPreset = basePresetMap[DEFAULT_THEME_KEY] ?? allThemePresets[0]\nconst fallbackLightMode = fallbackPreset?.lightMode ?? {\n primary: '#3b82f6',\n accent: '#06b6d4',\n background: '#ffffff',\n foreground: '#1f2937',\n}\n\nexport default function ThemePreview() {\n // Get individual field values using useField hooks\n const { value: selectedTheme } = useField<string>({ path: 'themeConfiguration.theme' })\n const { value: primaryColor } = useField<string>({\n path: 'themeConfiguration.customization.primaryColor',\n })\n const { value: accentColor } = useField<string>({\n path: 'themeConfiguration.customization.accentColor',\n })\n const { value: backgroundColor } = useField<string>({\n path: 'themeConfiguration.customization.backgroundColor',\n })\n const { value: textColor } = useField<string>({\n path: 'themeConfiguration.customization.textColor',\n })\n\n // Determine current theme and if overrides are active\n const currentTheme = themeIsValid(selectedTheme)\n ? selectedTheme\n : (fallbackPreset?.name ?? 'cool')\n const hasOverrides = Boolean(primaryColor || accentColor || backgroundColor || textColor)\n\n const themeColors = useMemo(() => {\n const preset = basePresetMap[currentTheme] ?? fallbackPreset\n const lightMode = preset?.lightMode ?? fallbackLightMode\n\n return {\n primary: lightMode?.primary ?? fallbackLightMode.primary,\n accent:\n lightMode?.accent ??\n lightMode?.secondary ??\n fallbackLightMode.accent ??\n fallbackLightMode.primary,\n background: lightMode?.background ?? fallbackLightMode.background,\n text: lightMode?.foreground ?? fallbackLightMode.foreground,\n }\n }, [currentTheme])\n\n const currentColors = useMemo(\n () => ({\n primary: primaryColor || themeColors.primary,\n accent: accentColor || themeColors.accent,\n background: backgroundColor || themeColors.background,\n text: textColor || themeColors.text,\n }),\n [primaryColor, accentColor, backgroundColor, textColor, themeColors],\n )\n\n const t = getTranslations(getAdminLanguage())\n\n return (\n <div className=\"theme-preview\" style={{ marginTop: '20px' }}>\n <div\n style={{\n fontSize: '16px',\n fontWeight: '600',\n marginBottom: '16px',\n color: '#374151',\n }}\n >\n {t.livePreview.largeTitle}\n </div>\n\n <div\n className=\"preview-container\"\n style={{\n border: '2px solid #e5e7eb',\n borderRadius: '12px',\n overflow: 'hidden',\n backgroundColor: currentColors.background,\n color: currentColors.text,\n minHeight: '300px',\n }}\n >\n {/* Header */}\n <div\n style={{\n backgroundColor: currentColors.primary,\n color: currentColors.background,\n padding: '16px 24px',\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n }}\n >\n <div style={{ fontSize: '20px', fontWeight: '700' }}>{t.preview.siteTitle}</div>\n <nav style={{ display: 'flex', gap: '24px', fontSize: '14px' }}>\n <span>{t.preview.nav.home}</span>\n <span>{t.preview.nav.about}</span>\n <span>{t.preview.nav.services}</span>\n <span>{t.preview.nav.contact}</span>\n </nav>\n </div>\n\n {/* Content */}\n <div style={{ padding: '32px 24px' }}>\n <h1\n style={{\n fontSize: '32px',\n fontWeight: '800',\n marginBottom: '16px',\n color: currentColors.text,\n }}\n >\n {t.preview.welcomeTitle}\n </h1>\n\n <p\n style={{\n fontSize: '16px',\n lineHeight: '1.6',\n marginBottom: '24px',\n color: currentColors.text,\n opacity: 0.8,\n }}\n >\n {t.preview.welcomeCopy}\n </p>\n <div style={{ display: 'flex', gap: '12px', marginBottom: '24px' }}>\n <button\n style={{\n backgroundColor: currentColors.primary,\n color: currentColors.background,\n border: 'none',\n padding: '12px 24px',\n borderRadius: '6px',\n fontSize: '14px',\n fontWeight: '600',\n cursor: 'pointer',\n }}\n >\n Primary Button\n </button>\n <button\n style={{\n backgroundColor: 'transparent',\n color: currentColors.primary,\n border: `2px solid ${currentColors.primary}`,\n padding: '10px 24px',\n borderRadius: '6px',\n fontSize: '14px',\n fontWeight: '600',\n cursor: 'pointer',\n }}\n >\n Secondary Button\n </button>\n </div>\n\n {/* Card */}\n <div\n style={{\n backgroundColor: currentColors.text,\n color: currentColors.background,\n padding: '24px',\n borderRadius: '8px',\n opacity: 0.05,\n marginBottom: '16px',\n }}\n />\n <div\n style={{\n border: `1px solid ${currentColors.text}`,\n padding: '20px',\n borderRadius: '8px',\n opacity: 0.1,\n }}\n >\n <h2\n style={{\n fontSize: '18px',\n fontWeight: '600',\n marginBottom: '12px',\n color: currentColors.text,\n }}\n >\n {t.preview.sampleCardTitle}\n </h2>\n <p\n style={{\n fontSize: '14px',\n color: currentColors.text,\n opacity: 0.7,\n }}\n >\n This shows how cards and content blocks will appear.\n </p>\n </div>\n </div>\n\n {/* Footer */}\n <div\n style={{\n backgroundColor: currentColors.accent,\n color: currentColors.background,\n padding: '16px 24px',\n textAlign: 'center',\n fontSize: '14px',\n marginTop: 'auto',\n }}\n >\n {t.preview.footer}\n </div>\n </div>\n\n {/* Theme info */}\n <div\n style={{\n marginTop: '12px',\n fontSize: '12px',\n color: '#6b7280',\n display: 'grid',\n gridTemplateColumns: 'repeat(2, 1fr)',\n gap: '8px',\n }}\n >\n <div>\n <strong>Active Theme:</strong> {currentTheme}\n </div>\n <div>\n <strong>Primary:</strong> {currentColors.primary}\n </div>\n <div>\n <strong>Accent:</strong> {currentColors.accent}\n </div>\n <div>\n <strong>Background:</strong> {currentColors.background}\n </div>\n </div>\n\n {/* Customization indicator */}\n {hasOverrides && (\n <div\n style={{\n marginTop: '8px',\n padding: '8px 12px',\n backgroundColor: '#fef3c7',\n borderRadius: '6px',\n fontSize: '11px',\n color: '#92400e',\n display: 'flex',\n alignItems: 'center',\n gap: '6px',\n }}\n >\n <span>⚡</span>\n <span>\n <strong>Custom colors applied</strong> - overriding theme defaults\n </span>\n </div>\n )}\n </div>\n )\n}\n"],"names":["useField","React","useMemo","allThemePresets","themeIsValid","getTranslations","getAdminLanguage","DEFAULT_THEME_KEY","basePresetMap","reduce","accumulator","preset","name","fallbackPreset","fallbackLightMode","lightMode","primary","accent","background","foreground","ThemePreview","value","selectedTheme","path","primaryColor","accentColor","backgroundColor","textColor","currentTheme","hasOverrides","Boolean","themeColors","secondary","text","currentColors","t","div","className","style","marginTop","fontSize","fontWeight","marginBottom","color","livePreview","largeTitle","border","borderRadius","overflow","minHeight","padding","display","justifyContent","alignItems","preview","siteTitle","nav","gap","span","home","about","services","contact","h1","welcomeTitle","p","lineHeight","opacity","welcomeCopy","button","cursor","h2","sampleCardTitle","textAlign","footer","gridTemplateColumns","strong"],"mappings":"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"}
|
package/dist/plugin.d.ts
DELETED
package/dist/plugin.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC"}
|
package/dist/plugin.js
DELETED
package/dist/plugin.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/plugin.ts"],"sourcesContent":["export type { ThemeManagementPluginOptions } from './types.js';\n"],"names":[],"mappings":"AAAA,WAA+D"}
|