@kilivi/payloadcms-theme-management 2.0.0 → 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.
Files changed (214) hide show
  1. package/README.md +318 -847
  2. package/dist/components/AppearanceSessionControls.d.ts +15 -0
  3. package/dist/components/AppearanceSessionControls.d.ts.map +1 -0
  4. package/dist/components/AppearanceSessionControls.js +152 -0
  5. package/dist/components/AppearanceSessionControls.js.map +1 -0
  6. package/dist/components/ColorModeToggle.css +42 -0
  7. package/dist/components/ColorModeToggle.d.ts +40 -0
  8. package/dist/components/ColorModeToggle.d.ts.map +1 -0
  9. package/dist/components/ColorModeToggle.js +111 -0
  10. package/dist/components/ColorModeToggle.js.map +1 -0
  11. package/dist/components/ServerThemeInjector.d.ts.map +1 -1
  12. package/dist/components/ServerThemeInjector.js +41 -14
  13. package/dist/components/ServerThemeInjector.js.map +1 -1
  14. package/dist/components/ThemeLivePreviewSync.d.ts +1 -0
  15. package/dist/components/ThemeLivePreviewSync.d.ts.map +1 -1
  16. package/dist/components/ThemeLivePreviewSync.js +1 -1
  17. package/dist/components/ThemeLivePreviewSync.js.map +1 -1
  18. package/dist/components/ThemeSwitcher.d.ts +36 -0
  19. package/dist/components/ThemeSwitcher.d.ts.map +1 -0
  20. package/dist/components/ThemeSwitcher.js +89 -0
  21. package/dist/components/ThemeSwitcher.js.map +1 -0
  22. package/dist/components/typographyPreviewUtils.d.ts.map +1 -1
  23. package/dist/components/typographyPreviewUtils.js +8 -1
  24. package/dist/components/typographyPreviewUtils.js.map +1 -1
  25. package/dist/constants/devicePreviews.d.ts +35 -0
  26. package/dist/constants/devicePreviews.d.ts.map +1 -0
  27. package/dist/constants/devicePreviews.js +43 -0
  28. package/dist/constants/devicePreviews.js.map +1 -0
  29. package/dist/constants/themeFonts.js +9 -9
  30. package/dist/constants/themeFonts.js.map +1 -1
  31. package/dist/extended-presets.d.ts +0 -4
  32. package/dist/extended-presets.d.ts.map +1 -1
  33. package/dist/extended-presets.js +1 -18
  34. package/dist/extended-presets.js.map +1 -1
  35. package/dist/extended-themes.d.ts.map +1 -1
  36. package/dist/extended-themes.js +428 -0
  37. package/dist/extended-themes.js.map +1 -1
  38. package/dist/fields/AccessibilityAuditField.d.ts +2 -0
  39. package/dist/fields/AccessibilityAuditField.d.ts.map +1 -0
  40. package/dist/fields/AccessibilityAuditField.js +303 -0
  41. package/dist/fields/AccessibilityAuditField.js.map +1 -0
  42. package/dist/fields/AppearancePreviewField.d.ts +2 -0
  43. package/dist/fields/AppearancePreviewField.d.ts.map +1 -0
  44. package/dist/fields/AppearancePreviewField.js +763 -0
  45. package/dist/fields/AppearancePreviewField.js.map +1 -0
  46. package/dist/fields/ColorPickerField.d.ts.map +1 -1
  47. package/dist/fields/ColorPickerField.js +89 -85
  48. package/dist/fields/ColorPickerField.js.map +1 -1
  49. package/dist/fields/FontSelectField.d.ts +6 -0
  50. package/dist/fields/FontSelectField.d.ts.map +1 -1
  51. package/dist/fields/FontSelectField.js +195 -122
  52. package/dist/fields/FontSelectField.js.map +1 -1
  53. package/dist/fields/PaletteGeneratorField.d.ts +7 -0
  54. package/dist/fields/PaletteGeneratorField.d.ts.map +1 -0
  55. package/dist/fields/PaletteGeneratorField.js +327 -0
  56. package/dist/fields/PaletteGeneratorField.js.map +1 -0
  57. package/dist/fields/StylePresetField.d.ts +3 -0
  58. package/dist/fields/StylePresetField.d.ts.map +1 -0
  59. package/dist/fields/StylePresetField.js +462 -0
  60. package/dist/fields/StylePresetField.js.map +1 -0
  61. package/dist/fields/ThemeColorPickerField.css +115 -35
  62. package/dist/fields/ThemeColorPickerField.d.ts.map +1 -1
  63. package/dist/fields/ThemeColorPickerField.js +204 -70
  64. package/dist/fields/ThemeColorPickerField.js.map +1 -1
  65. package/dist/fields/ThemeExportField.d.ts +6 -0
  66. package/dist/fields/ThemeExportField.d.ts.map +1 -0
  67. package/dist/fields/ThemeExportField.js +202 -0
  68. package/dist/fields/ThemeExportField.js.map +1 -0
  69. package/dist/fields/ThemePresetImportField.d.ts.map +1 -1
  70. package/dist/fields/ThemePresetImportField.js +56 -25
  71. package/dist/fields/ThemePresetImportField.js.map +1 -1
  72. package/dist/fields/ThemePreviewField.css +382 -5
  73. package/dist/fields/ThemePreviewField.d.ts.map +1 -1
  74. package/dist/fields/ThemePreviewField.js +268 -170
  75. package/dist/fields/ThemePreviewField.js.map +1 -1
  76. package/dist/fields/ThemeTokenSelectField.d.ts.map +1 -1
  77. package/dist/fields/ThemeTokenSelectField.js +278 -80
  78. package/dist/fields/ThemeTokenSelectField.js.map +1 -1
  79. package/dist/fields/colorFieldHelpers.d.ts +90 -0
  80. package/dist/fields/colorFieldHelpers.d.ts.map +1 -0
  81. package/dist/fields/colorFieldHelpers.js +133 -0
  82. package/dist/fields/colorFieldHelpers.js.map +1 -0
  83. package/dist/fields/colorModeFields.d.ts +1 -1
  84. package/dist/fields/colorModeFields.d.ts.map +1 -1
  85. package/dist/fields/colorModeFields.js +49 -7
  86. package/dist/fields/colorModeFields.js.map +1 -1
  87. package/dist/fields/themeConfigurationField.d.ts +8 -1
  88. package/dist/fields/themeConfigurationField.d.ts.map +1 -1
  89. package/dist/fields/themeConfigurationField.js +961 -29
  90. package/dist/fields/themeConfigurationField.js.map +1 -1
  91. package/dist/globals/ThemeSettings/FontPicker/FontPreview.d.ts.map +1 -1
  92. package/dist/globals/ThemeSettings/FontPicker/FontPreview.js +8 -4
  93. package/dist/globals/ThemeSettings/FontPicker/FontPreview.js.map +1 -1
  94. package/dist/globals/ThemeSettings/FontPicker/index.d.ts.map +1 -1
  95. package/dist/globals/ThemeSettings/FontPicker/index.js +81 -26
  96. package/dist/globals/ThemeSettings/FontPicker/index.js.map +1 -1
  97. package/dist/globals/ThemeSettings/FontPicker/styles.css +98 -41
  98. package/dist/globals/ThemeSettings/FontPicker/translations.d.ts +6 -0
  99. package/dist/globals/ThemeSettings/FontPicker/translations.d.ts.map +1 -1
  100. package/dist/globals/ThemeSettings/FontPicker/translations.js +14 -2
  101. package/dist/globals/ThemeSettings/FontPicker/translations.js.map +1 -1
  102. package/dist/globals/ThemeSettings/config.d.ts.map +1 -1
  103. package/dist/globals/ThemeSettings/config.js +76 -79
  104. package/dist/globals/ThemeSettings/config.js.map +1 -1
  105. package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.d.ts.map +1 -1
  106. package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.js +63 -62
  107. package/dist/globals/ThemeSettings/fields/FontLoadingGuideField.js.map +1 -1
  108. package/dist/globals/ThemeSettings/fields/TypographyInfoField.d.ts.map +1 -1
  109. package/dist/globals/ThemeSettings/fields/TypographyInfoField.js +22 -25
  110. package/dist/globals/ThemeSettings/fields/TypographyInfoField.js.map +1 -1
  111. package/dist/hooks/useAppearanceSession.d.ts +50 -0
  112. package/dist/hooks/useAppearanceSession.d.ts.map +1 -0
  113. package/dist/hooks/useAppearanceSession.js +91 -0
  114. package/dist/hooks/useAppearanceSession.js.map +1 -0
  115. package/dist/hooks/useThemeTranslations.d.ts +13 -0
  116. package/dist/hooks/useThemeTranslations.d.ts.map +1 -0
  117. package/dist/hooks/useThemeTranslations.js +22 -0
  118. package/dist/hooks/useThemeTranslations.js.map +1 -0
  119. package/dist/i18n.d.ts +53 -0
  120. package/dist/i18n.d.ts.map +1 -0
  121. package/dist/i18n.js +53 -0
  122. package/dist/i18n.js.map +1 -0
  123. package/dist/index.d.ts +10 -4
  124. package/dist/index.d.ts.map +1 -1
  125. package/dist/index.js +50 -29
  126. package/dist/index.js.map +1 -1
  127. package/dist/payload-types.d.ts +24 -0
  128. package/dist/payload-types.d.ts.map +1 -1
  129. package/dist/payload-types.js.map +1 -1
  130. package/dist/presets.d.ts +8 -0
  131. package/dist/presets.d.ts.map +1 -1
  132. package/dist/presets.js.map +1 -1
  133. package/dist/providers/Theme/index.d.ts.map +1 -1
  134. package/dist/providers/Theme/index.js +75 -11
  135. package/dist/providers/Theme/index.js.map +1 -1
  136. package/dist/providers/Theme/themeConfig.d.ts.map +1 -1
  137. package/dist/providers/Theme/themeConfig.js +104 -0
  138. package/dist/providers/Theme/themeConfig.js.map +1 -1
  139. package/dist/providers/Theme/types.d.ts +1 -1
  140. package/dist/providers/Theme/types.d.ts.map +1 -1
  141. package/dist/providers/Theme/types.js +10 -1
  142. package/dist/providers/Theme/types.js.map +1 -1
  143. package/dist/style-presets.d.ts +66 -0
  144. package/dist/style-presets.d.ts.map +1 -0
  145. package/dist/style-presets.js +556 -0
  146. package/dist/style-presets.js.map +1 -0
  147. package/dist/translations.d.ts +159 -1
  148. package/dist/translations.d.ts.map +1 -1
  149. package/dist/translations.js +310 -9
  150. package/dist/translations.js.map +1 -1
  151. package/dist/tweakcn-special-themes.d.ts.map +1 -1
  152. package/dist/tweakcn-special-themes.js +585 -9
  153. package/dist/tweakcn-special-themes.js.map +1 -1
  154. package/dist/types/css.d.js +3 -0
  155. package/dist/types/css.d.js.map +1 -0
  156. package/dist/types.d.ts +26 -0
  157. package/dist/types.d.ts.map +1 -1
  158. package/dist/types.js +1 -1
  159. package/dist/types.js.map +1 -1
  160. package/dist/utilities/getThemeSettings.d.ts.map +1 -1
  161. package/dist/utilities/getThemeSettings.js +2 -14
  162. package/dist/utilities/getThemeSettings.js.map +1 -1
  163. package/dist/utils/contrast.d.ts +63 -0
  164. package/dist/utils/contrast.d.ts.map +1 -0
  165. package/dist/utils/contrast.js +158 -0
  166. package/dist/utils/contrast.js.map +1 -0
  167. package/dist/utils/exportTokens.d.ts +30 -0
  168. package/dist/utils/exportTokens.d.ts.map +1 -0
  169. package/dist/utils/exportTokens.js +183 -0
  170. package/dist/utils/exportTokens.js.map +1 -0
  171. package/dist/utils/generatePalette.d.ts +46 -0
  172. package/dist/utils/generatePalette.d.ts.map +1 -0
  173. package/dist/utils/generatePalette.js +127 -0
  174. package/dist/utils/generatePalette.js.map +1 -0
  175. package/dist/utils/generateThemeCSS.d.ts.map +1 -1
  176. package/dist/utils/generateThemeCSS.js +2 -40
  177. package/dist/utils/generateThemeCSS.js.map +1 -1
  178. package/dist/utils/livePreviewThemeRuntime.d.ts +16 -2
  179. package/dist/utils/livePreviewThemeRuntime.d.ts.map +1 -1
  180. package/dist/utils/livePreviewThemeRuntime.js +37 -14
  181. package/dist/utils/livePreviewThemeRuntime.js.map +1 -1
  182. package/dist/utils/localizedText.d.ts +8 -0
  183. package/dist/utils/localizedText.d.ts.map +1 -0
  184. package/dist/utils/localizedText.js +21 -0
  185. package/dist/utils/localizedText.js.map +1 -0
  186. package/dist/utils/resolveThemeConfiguration.d.ts +45 -1
  187. package/dist/utils/resolveThemeConfiguration.d.ts.map +1 -1
  188. package/dist/utils/resolveThemeConfiguration.js +12 -5
  189. package/dist/utils/resolveThemeConfiguration.js.map +1 -1
  190. package/dist/utils/themeColors.d.ts +3 -0
  191. package/dist/utils/themeColors.d.ts.map +1 -1
  192. package/dist/utils/themeColors.js +30 -1
  193. package/dist/utils/themeColors.js.map +1 -1
  194. package/dist/utils/themeHtmlAttributes.d.ts +32 -12
  195. package/dist/utils/themeHtmlAttributes.d.ts.map +1 -1
  196. package/dist/utils/themeHtmlAttributes.js +38 -5
  197. package/dist/utils/themeHtmlAttributes.js.map +1 -1
  198. package/dist/utils/themeUtils.d.ts +3 -5
  199. package/dist/utils/themeUtils.d.ts.map +1 -1
  200. package/dist/utils/themeUtils.js +416 -6
  201. package/dist/utils/themeUtils.js.map +1 -1
  202. package/dist/utils/tweakcnConverter.d.ts +1 -3
  203. package/dist/utils/tweakcnConverter.d.ts.map +1 -1
  204. package/dist/utils/tweakcnConverter.js +1 -3
  205. package/dist/utils/tweakcnConverter.js.map +1 -1
  206. package/package.json +11 -5
  207. package/dist/components/ThemePreview.d.ts +0 -3
  208. package/dist/components/ThemePreview.d.ts.map +0 -1
  209. package/dist/components/ThemePreview.js +0 -321
  210. package/dist/components/ThemePreview.js.map +0 -1
  211. package/dist/plugin.d.ts +0 -2
  212. package/dist/plugin.d.ts.map +0 -1
  213. package/dist/plugin.js +0 -3
  214. 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
@@ -1,2 +0,0 @@
1
- export type { ThemeManagementPluginOptions } from './types.js';
2
- //# sourceMappingURL=plugin.d.ts.map
@@ -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
@@ -1,3 +0,0 @@
1
- export { };
2
-
3
- //# sourceMappingURL=plugin.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/plugin.ts"],"sourcesContent":["export type { ThemeManagementPluginOptions } from './types.js';\n"],"names":[],"mappings":"AAAA,WAA+D"}