@kilivi/payloadcms-theme-management 0.2.2 → 0.2.4

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 (42) hide show
  1. package/README.md +26 -4
  2. package/dist/extended-presets.d.ts +16 -1
  3. package/dist/extended-presets.d.ts.map +1 -1
  4. package/dist/extended-presets.js +8 -1
  5. package/dist/extended-presets.js.map +1 -1
  6. package/dist/fields/ThemeColorPickerField.css +350 -65
  7. package/dist/fields/ThemeColorPickerField.d.ts.map +1 -1
  8. package/dist/fields/ThemeColorPickerField.js +131 -13
  9. package/dist/fields/ThemeColorPickerField.js.map +1 -1
  10. package/dist/fields/ThemeLivePreview.css +190 -0
  11. package/dist/fields/ThemeLivePreview.d.ts +4 -0
  12. package/dist/fields/ThemeLivePreview.d.ts.map +1 -0
  13. package/dist/fields/ThemeLivePreview.js +199 -0
  14. package/dist/fields/ThemeLivePreview.js.map +1 -0
  15. package/dist/fields/extendedThemeFields.d.ts +121 -9
  16. package/dist/fields/extendedThemeFields.d.ts.map +1 -1
  17. package/dist/fields/extendedThemeFields.js +296 -101
  18. package/dist/fields/extendedThemeFields.js.map +1 -1
  19. package/dist/fields/themeConfigurationField.d.ts.map +1 -1
  20. package/dist/fields/themeConfigurationField.js +259 -252
  21. package/dist/fields/themeConfigurationField.js.map +1 -1
  22. package/dist/index.d.ts +2 -1
  23. package/dist/index.d.ts.map +1 -1
  24. package/dist/index.js +24 -2
  25. package/dist/index.js.map +1 -1
  26. package/dist/tweakcn-presets.d.ts +10 -0
  27. package/dist/tweakcn-presets.d.ts.map +1 -0
  28. package/dist/tweakcn-presets.js +714 -0
  29. package/dist/tweakcn-presets.js.map +1 -0
  30. package/dist/tweakcn-special-themes.d.ts +8 -0
  31. package/dist/tweakcn-special-themes.d.ts.map +1 -0
  32. package/dist/tweakcn-special-themes.js +614 -0
  33. package/dist/tweakcn-special-themes.js.map +1 -0
  34. package/dist/views/ThemePreviewView.d.ts +8 -0
  35. package/dist/views/ThemePreviewView.d.ts.map +1 -0
  36. package/dist/views/ThemePreviewView.js +44 -0
  37. package/dist/views/ThemePreviewView.js.map +1 -0
  38. package/dist/views/ThemePreviewViewClient.d.ts +7 -0
  39. package/dist/views/ThemePreviewViewClient.d.ts.map +1 -0
  40. package/dist/views/ThemePreviewViewClient.js +12 -0
  41. package/dist/views/ThemePreviewViewClient.js.map +1 -0
  42. package/package.json +7 -1
package/dist/fields/themeConfigurationField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAS9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,8BAA8B,GACtC;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACjC,WAAW,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACvC,MAAM,EAAE,KAAK,EAAE,CAAA;CAChB,CAsaA"}
1
+ {"version":3,"file":"themeConfigurationField.d.ts","sourceRoot":"","sources":["../../src/fields/themeConfigurationField.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAW9C,UAAU,8BAA8B;IACtC,YAAY,EAAE,WAAW,EAAE,CAAA;IAC3B,YAAY,EAAE,MAAM,CAAA;IACpB,sBAAsB,EAAE,OAAO,CAAA;IAC/B,gBAAgB,EAAE,OAAO,CAAA;IACzB,oBAAoB,EAAE,OAAO,CAAA;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,8BAA8B,GACtC;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACjC,WAAW,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IACvC,MAAM,EAAE,KAAK,EAAE,CAAA;CAChB,CA6aA"}
package/dist/fields/themeConfigurationField.js CHANGED
@@ -1,6 +1,6 @@
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
- import { extendedThemeSelectionField, extendedLightModeField, extendedDarkModeField, chartColorsField } from './extendedThemeFields.js';
3
+ import { extendedThemeSelectionField, lightModeColorsField, darkModeColorsField, shadowConfigField, typographyConfigField, designSystemConfigField } from './extendedThemeFields.js';
4
4
  /**
5
5
  * Theme Configuration Tab Configuration
6
6
  * Returns tab config that can be injected into existing tabs field
@@ -48,19 +48,21 @@ import { extendedThemeSelectionField, extendedLightModeField, extendedDarkModeFi
48
48
  admin: {
49
49
  initCollapsed: true,
50
50
  description: {
51
- en: 'Advanced color configuration using OKLCH format. Compatible with shadcn/ui and TweakCN.',
52
- cs: 'Pokročilá konfigurace barev pomocí formátu OKLCH. Kompatibilní s shadcn/ui a TweakCN.'
51
+ en: 'Professional theme system with TweakCN compatibility. Full OKLCH color support, shadows, typography, and more.',
52
+ cs: 'Profesionální systém témat s kompatibilitou TweakCN. Plná podpora OKLCH barev, stíny, typografie a další.'
53
53
  }
54
54
  },
55
55
  fields: [
56
- extendedLightModeField,
57
- extendedDarkModeField,
58
- chartColorsField
56
+ lightModeColorsField,
57
+ darkModeColorsField,
58
+ shadowConfigField,
59
+ typographyConfigField,
60
+ designSystemConfigField
59
61
  ]
60
62
  });
61
63
  }
62
- // Color Mode Settings
63
- if (includeColorModeToggle) {
64
+ // Color Mode Settings (only when NOT using extended theme configuration)
65
+ if (includeColorModeToggle && !enableAdvancedFeatures) {
64
66
  fields.push({
65
67
  type: 'collapsible',
66
68
  label: {
@@ -140,277 +142,282 @@ import { extendedThemeSelectionField, extendedLightModeField, extendedDarkModeFi
140
142
  ]
141
143
  });
142
144
  }
143
- fields.push({
144
- type: 'collapsible',
145
- label: {
146
- en: '🅰️ Typography',
147
- cs: '🅰️ Typografie'
148
- },
149
- admin: {
150
- initCollapsed: true,
151
- description: {
152
- en: 'Choose font families and base typography settings. Leave fields on "Use preset" to inherit the theme defaults.',
153
- cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota "Použít výchozí" zachová nastavení motivu.'
154
- }
155
- },
156
- fields: [
157
- {
158
- name: 'typography',
159
- type: 'group',
160
- fields: [
161
- {
162
- type: 'row',
163
- fields: [
164
- {
165
- name: 'bodyFont',
166
- type: 'select',
167
- label: {
168
- en: 'Body font',
169
- cs: 'Písmo pro text'
170
- },
171
- defaultValue: 'preset',
172
- options: BODY_FONT_OPTIONS.map((option)=>({
173
- label: option.label,
174
- value: option.value
175
- })),
176
- admin: {
177
- width: '50%'
178
- }
179
- },
180
- {
181
- name: 'headingFont',
182
- type: 'select',
183
- label: {
184
- en: 'Heading font',
185
- cs: 'Písmo pro nadpisy'
145
+ // Typography (only when NOT using extended theme configuration)
146
+ if (!enableAdvancedFeatures) {
147
+ fields.push({
148
+ type: 'collapsible',
149
+ label: {
150
+ en: '🅰️ Typography',
151
+ cs: '🅰️ Typografie'
152
+ },
153
+ admin: {
154
+ initCollapsed: true,
155
+ description: {
156
+ en: 'Choose font families and base typography settings. Leave fields on "Use preset" to inherit the theme defaults.',
157
+ cs: 'Zvolte rodiny písem a základní typografické nastavení. Hodnota "Použít výchozí" zachová nastavení motivu.'
158
+ }
159
+ },
160
+ fields: [
161
+ {
162
+ name: 'typography',
163
+ type: 'group',
164
+ fields: [
165
+ {
166
+ type: 'row',
167
+ fields: [
168
+ {
169
+ name: 'bodyFont',
170
+ type: 'select',
171
+ label: {
172
+ en: 'Body font',
173
+ cs: 'Písmo pro text'
174
+ },
175
+ defaultValue: 'preset',
176
+ options: BODY_FONT_OPTIONS.map((option)=>({
177
+ label: option.label,
178
+ value: option.value
179
+ })),
180
+ admin: {
181
+ width: '50%'
182
+ }
186
183
  },
187
- defaultValue: 'preset',
188
- options: HEADING_FONT_OPTIONS.map((option)=>({
189
- label: option.label,
190
- value: option.value
191
- })),
192
- admin: {
193
- width: '50%'
184
+ {
185
+ name: 'headingFont',
186
+ type: 'select',
187
+ label: {
188
+ en: 'Heading font',
189
+ cs: 'Písmo pro nadpisy'
190
+ },
191
+ defaultValue: 'preset',
192
+ options: HEADING_FONT_OPTIONS.map((option)=>({
193
+ label: option.label,
194
+ value: option.value
195
+ })),
196
+ admin: {
197
+ width: '50%'
198
+ }
194
199
  }
195
- }
196
- ]
197
- },
198
- {
199
- type: 'row',
200
- fields: [
201
- {
202
- name: 'bodyFontCustom',
203
- type: 'text',
204
- label: {
205
- en: 'Custom body font stack',
206
- cs: 'Vlastní písmo pro text'
200
+ ]
201
+ },
202
+ {
203
+ type: 'row',
204
+ fields: [
205
+ {
206
+ name: 'bodyFontCustom',
207
+ type: 'text',
208
+ label: {
209
+ en: 'Custom body font stack',
210
+ cs: 'Vlastní písmo pro text'
211
+ },
212
+ admin: {
213
+ width: '50%',
214
+ placeholder: '"IBM Plex Sans", sans-serif',
215
+ description: {
216
+ en: 'Provide full CSS font-family stack when using a custom font.',
217
+ cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.'
218
+ },
219
+ condition: (_, siblingData)=>siblingData?.bodyFont === 'custom'
220
+ }
207
221
  },
208
- admin: {
209
- width: '50%',
210
- placeholder: '"IBM Plex Sans", sans-serif',
211
- description: {
212
- en: 'Provide full CSS font-family stack when using a custom font.',
213
- cs: 'Při volbě vlastního písma zadejte celý CSS zápis font-family.'
222
+ {
223
+ name: 'headingFontCustom',
224
+ type: 'text',
225
+ label: {
226
+ en: 'Custom heading font stack',
227
+ cs: 'Vlastní písmo pro nadpisy'
214
228
  },
215
- condition: (_, siblingData)=>siblingData?.bodyFont === 'custom'
229
+ admin: {
230
+ width: '50%',
231
+ placeholder: '"Cormorant Garamond", serif',
232
+ description: {
233
+ en: 'Provide full CSS font-family stack when using a custom heading font.',
234
+ cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.'
235
+ },
236
+ condition: (_, siblingData)=>siblingData?.headingFont === 'custom'
237
+ }
216
238
  }
217
- },
218
- {
219
- name: 'headingFontCustom',
220
- type: 'text',
221
- label: {
222
- en: 'Custom heading font stack',
223
- cs: 'Vlastní písmo pro nadpisy'
239
+ ]
240
+ },
241
+ {
242
+ type: 'row',
243
+ fields: [
244
+ {
245
+ name: 'baseFontSize',
246
+ type: 'select',
247
+ label: {
248
+ en: 'Base font size',
249
+ cs: 'Základní velikost písma'
250
+ },
251
+ defaultValue: 'preset',
252
+ options: BASE_FONT_SIZE_OPTIONS.map((option)=>({
253
+ label: option.label,
254
+ value: option.value
255
+ })),
256
+ admin: {
257
+ width: '50%'
258
+ }
224
259
  },
225
- admin: {
226
- width: '50%',
227
- placeholder: '"Cormorant Garamond", serif',
228
- description: {
229
- en: 'Provide full CSS font-family stack when using a custom heading font.',
230
- cs: 'Při volbě vlastního nadpisového písma zadejte celý CSS zápis font-family.'
260
+ {
261
+ name: 'lineHeight',
262
+ type: 'select',
263
+ label: {
264
+ en: 'Line height',
265
+ cs: 'Řádkování'
231
266
  },
232
- condition: (_, siblingData)=>siblingData?.headingFont === 'custom'
267
+ defaultValue: 'preset',
268
+ options: LINE_HEIGHT_OPTIONS.map((option)=>({
269
+ label: option.label,
270
+ value: option.value
271
+ })),
272
+ admin: {
273
+ width: '50%'
274
+ }
233
275
  }
234
- }
235
- ]
276
+ ]
277
+ }
278
+ ]
279
+ }
280
+ ]
281
+ });
282
+ }
283
+ // Design Customization (only when NOT using extended theme configuration)
284
+ if (!enableAdvancedFeatures) {
285
+ fields.push({
286
+ type: 'collapsible',
287
+ label: {
288
+ en: '✨ Design Customization',
289
+ cs: '✨ Přizpůsobení designu'
290
+ },
291
+ admin: {
292
+ initCollapsed: true
293
+ },
294
+ fields: [
295
+ {
296
+ name: 'borderRadius',
297
+ type: 'select',
298
+ label: {
299
+ en: 'Border Radius',
300
+ cs: 'Zaoblení rohů'
236
301
  },
237
- {
238
- type: 'row',
239
- fields: [
240
- {
241
- name: 'baseFontSize',
242
- type: 'select',
243
- label: {
244
- en: 'Base font size',
245
- cs: 'Základní velikost písma'
246
- },
247
- defaultValue: 'preset',
248
- options: BASE_FONT_SIZE_OPTIONS.map((option)=>({
249
- label: option.label,
250
- value: option.value
251
- })),
252
- admin: {
253
- width: '50%'
254
- }
302
+ defaultValue: 'medium',
303
+ options: [
304
+ {
305
+ label: {
306
+ en: 'None',
307
+ cs: 'Žádné'
255
308
  },
256
- {
257
- name: 'lineHeight',
258
- type: 'select',
259
- label: {
260
- en: 'Line height',
261
- cs: 'Řádkování'
262
- },
263
- defaultValue: 'preset',
264
- options: LINE_HEIGHT_OPTIONS.map((option)=>({
265
- label: option.label,
266
- value: option.value
267
- })),
268
- admin: {
269
- width: '50%'
270
- }
271
- }
272
- ]
273
- }
274
- ]
275
- }
276
- ]
277
- });
278
- // Design Customization
279
- fields.push({
280
- type: 'collapsible',
281
- label: {
282
- en: '✨ Design Customization',
283
- cs: '✨ Přizpůsobení designu'
284
- },
285
- admin: {
286
- initCollapsed: true
287
- },
288
- fields: [
289
- {
290
- name: 'borderRadius',
291
- type: 'select',
292
- label: {
293
- en: 'Border Radius',
294
- cs: 'Zaoblení rohů'
295
- },
296
- defaultValue: 'medium',
297
- options: [
298
- {
299
- label: {
300
- en: 'None',
301
- cs: 'Žádné'
309
+ value: 'none'
302
310
  },
303
- value: 'none'
304
- },
305
- {
306
- label: {
307
- en: 'Small',
308
- cs: 'Malé'
311
+ {
312
+ label: {
313
+ en: 'Small',
314
+ cs: 'Malé'
315
+ },
316
+ value: 'small'
309
317
  },
310
- value: 'small'
311
- },
312
- {
313
- label: {
314
- en: 'Medium',
315
- cs: 'Střední'
318
+ {
319
+ label: {
320
+ en: 'Medium',
321
+ cs: 'Střední'
322
+ },
323
+ value: 'medium'
316
324
  },
317
- value: 'medium'
318
- },
319
- {
320
- label: {
321
- en: 'Large',
322
- cs: 'Velké'
325
+ {
326
+ label: {
327
+ en: 'Large',
328
+ cs: 'Velké'
329
+ },
330
+ value: 'large'
323
331
  },
324
- value: 'large'
325
- },
326
- {
327
- label: {
328
- en: 'Full',
329
- cs: 'Plné'
332
+ {
333
+ label: {
334
+ en: 'Full',
335
+ cs: 'Plné'
336
+ },
337
+ value: 'xl'
338
+ }
339
+ ],
340
+ admin: {
341
+ components: {
342
+ Field: '@kilivi/payloadcms-theme-management/fields/RadiusField'
330
343
  },
331
- value: 'xl'
344
+ width: '33%'
332
345
  }
333
- ],
334
- admin: {
335
- components: {
336
- Field: '@kilivi/payloadcms-theme-management/fields/RadiusField'
337
- },
338
- width: '33%'
339
- }
340
- },
341
- {
342
- name: 'fontScale',
343
- type: 'select',
344
- label: {
345
- en: 'Font Scale',
346
- cs: 'Velikost písma'
347
346
  },
348
- defaultValue: 'medium',
349
- options: [
350
- {
351
- label: {
352
- en: 'Small',
353
- cs: 'Malé'
354
- },
355
- value: 'small'
347
+ {
348
+ name: 'fontScale',
349
+ type: 'select',
350
+ label: {
351
+ en: 'Font Scale',
352
+ cs: 'Velikost písma'
356
353
  },
357
- {
358
- label: {
359
- en: 'Medium',
360
- cs: 'Střední'
354
+ defaultValue: 'medium',
355
+ options: [
356
+ {
357
+ label: {
358
+ en: 'Small',
359
+ cs: 'Malé'
360
+ },
361
+ value: 'small'
361
362
  },
362
- value: 'medium'
363
- },
364
- {
365
- label: {
366
- en: 'Large',
367
- cs: 'Velké'
363
+ {
364
+ label: {
365
+ en: 'Medium',
366
+ cs: 'Střední'
367
+ },
368
+ value: 'medium'
368
369
  },
369
- value: 'large'
370
+ {
371
+ label: {
372
+ en: 'Large',
373
+ cs: 'Velké'
374
+ },
375
+ value: 'large'
376
+ }
377
+ ],
378
+ admin: {
379
+ width: '33%'
370
380
  }
371
- ],
372
- admin: {
373
- width: '33%'
374
- }
375
- },
376
- {
377
- name: 'spacing',
378
- type: 'select',
379
- label: {
380
- en: 'Spacing',
381
- cs: 'Mezery'
382
381
  },
383
- defaultValue: 'medium',
384
- options: [
385
- {
386
- label: {
387
- en: 'Compact',
388
- cs: 'Kompaktní'
389
- },
390
- value: 'compact'
382
+ {
383
+ name: 'spacing',
384
+ type: 'select',
385
+ label: {
386
+ en: 'Spacing',
387
+ cs: 'Mezery'
391
388
  },
392
- {
393
- label: {
394
- en: 'Medium',
395
- cs: 'Střední'
389
+ defaultValue: 'medium',
390
+ options: [
391
+ {
392
+ label: {
393
+ en: 'Compact',
394
+ cs: 'Kompaktní'
395
+ },
396
+ value: 'compact'
396
397
  },
397
- value: 'medium'
398
- },
399
- {
400
- label: {
401
- en: 'Spacious',
402
- cs: 'Prostorné'
398
+ {
399
+ label: {
400
+ en: 'Medium',
401
+ cs: 'Střední'
402
+ },
403
+ value: 'medium'
403
404
  },
404
- value: 'spacious'
405
+ {
406
+ label: {
407
+ en: 'Spacious',
408
+ cs: 'Prostorné'
409
+ },
410
+ value: 'spacious'
411
+ }
412
+ ],
413
+ admin: {
414
+ width: '34%'
405
415
  }
406
- ],
407
- admin: {
408
- width: '34%'
409
416
  }
410
- }
411
- ]
412
- });
413
- // Advanced Settings
417
+ ]
418
+ });
419
+ } // End of !enableAdvancedFeatures block
420
+ // Advanced Settings (when using extended theme configuration)
414
421
  if (enableAdvancedFeatures) {
415
422
  const advancedFields = [
416
423
  {