@kilivi/payloadcms-theme-management 0.3.4 → 0.5.2

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.
@@ -0,0 +1,131 @@
1
+ /**
2
+ * Converts TweakCN theme presets to standard ThemePreset format
3
+ */ import { tweakcnThemePresets } from '../tweakcn-presets.js';
4
+ /**
5
+ * Converts OKLCH color to HSL for preview
6
+ * Simple extraction - takes the lightness value
7
+ */ function oklchToPreviewColor(oklch) {
8
+ // Extract lightness from oklch(L C H)
9
+ const match = oklch.match(/oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)\)/);
10
+ if (!match) return '#3b82f6' // fallback blue
11
+ ;
12
+ const [, l, c, h] = match;
13
+ const lightness = Math.round(parseFloat(l) * 100);
14
+ const chroma = parseFloat(c);
15
+ const hue = parseFloat(h);
16
+ // Convert to HSL approximation for preview
17
+ const saturation = Math.min(100, Math.round(chroma * 100));
18
+ return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
19
+ }
20
+ /**
21
+ * Maps OKLCH color to RGB/HSL for Payload compatibility
22
+ */ function convertOklchColor(oklch) {
23
+ // For now, return the OKLCH as-is since browsers support it
24
+ // Could add polyfill conversion if needed
25
+ return oklch;
26
+ }
27
+ /**
28
+ * Converts ExtendedThemePreset to ThemePreset
29
+ */ export function convertTweakCNPreset(extended) {
30
+ const { label, value, styles } = extended;
31
+ const { light, dark } = styles;
32
+ // Extract border radius
33
+ const radiusValue = light.radius ?? '0.5rem';
34
+ let borderRadius;
35
+ if (radiusValue === '0' || radiusValue === '0px' || radiusValue === '0rem') {
36
+ borderRadius = 'none';
37
+ } else if (parseFloat(radiusValue) <= 0.25) {
38
+ borderRadius = 'small';
39
+ } else if (parseFloat(radiusValue) <= 0.5) {
40
+ borderRadius = 'medium';
41
+ } else if (parseFloat(radiusValue) <= 0.75) {
42
+ borderRadius = 'large';
43
+ } else {
44
+ borderRadius = 'xl';
45
+ }
46
+ // Convert light mode colors
47
+ const lightMode = {
48
+ background: convertOklchColor(light.background),
49
+ foreground: convertOklchColor(light.foreground),
50
+ card: convertOklchColor(light.card),
51
+ cardForeground: convertOklchColor(light['card-foreground']),
52
+ popover: convertOklchColor(light.popover),
53
+ popoverForeground: convertOklchColor(light['popover-foreground']),
54
+ primary: convertOklchColor(light.primary),
55
+ primaryForeground: convertOklchColor(light['primary-foreground']),
56
+ secondary: convertOklchColor(light.secondary),
57
+ secondaryForeground: convertOklchColor(light['secondary-foreground']),
58
+ muted: convertOklchColor(light.muted),
59
+ mutedForeground: convertOklchColor(light['muted-foreground']),
60
+ accent: convertOklchColor(light.accent),
61
+ accentForeground: convertOklchColor(light['accent-foreground']),
62
+ destructive: convertOklchColor(light.destructive),
63
+ destructiveForeground: convertOklchColor(light['destructive-foreground']),
64
+ border: convertOklchColor(light.border),
65
+ input: convertOklchColor(light.input),
66
+ ring: convertOklchColor(light.ring)
67
+ };
68
+ // Convert dark mode colors
69
+ const darkMode = {
70
+ background: convertOklchColor(dark.background),
71
+ foreground: convertOklchColor(dark.foreground),
72
+ card: convertOklchColor(dark.card),
73
+ cardForeground: convertOklchColor(dark['card-foreground']),
74
+ popover: convertOklchColor(dark.popover),
75
+ popoverForeground: convertOklchColor(dark['popover-foreground']),
76
+ primary: convertOklchColor(dark.primary),
77
+ primaryForeground: convertOklchColor(dark['primary-foreground']),
78
+ secondary: convertOklchColor(dark.secondary),
79
+ secondaryForeground: convertOklchColor(dark['secondary-foreground']),
80
+ muted: convertOklchColor(dark.muted),
81
+ mutedForeground: convertOklchColor(dark['muted-foreground']),
82
+ accent: convertOklchColor(dark.accent),
83
+ accentForeground: convertOklchColor(dark['accent-foreground']),
84
+ destructive: convertOklchColor(dark.destructive),
85
+ destructiveForeground: convertOklchColor(dark['destructive-foreground']),
86
+ border: convertOklchColor(dark.border),
87
+ input: convertOklchColor(dark.input),
88
+ ring: convertOklchColor(dark.ring)
89
+ };
90
+ // Generate preview colors
91
+ const preview = {
92
+ colors: {
93
+ primary: oklchToPreviewColor(light.primary),
94
+ background: oklchToPreviewColor(light.background),
95
+ accent: oklchToPreviewColor(light.accent)
96
+ }
97
+ };
98
+ // Typography configuration
99
+ const typography = light['font-sans'] ? {
100
+ fontFamily: light['font-sans'],
101
+ headingFamily: light['font-sans'],
102
+ baseFontSize: '16px',
103
+ lineHeight: '1.6',
104
+ fontWeights: {
105
+ normal: '400',
106
+ medium: '500',
107
+ semibold: '600',
108
+ bold: '700'
109
+ },
110
+ letterSpacing: {
111
+ normal: '0',
112
+ wide: '0.025em'
113
+ }
114
+ } : undefined;
115
+ return {
116
+ name: `tweakcn-${value}`,
117
+ label: `${label} (TweakCN)`,
118
+ borderRadius,
119
+ preview,
120
+ lightMode,
121
+ darkMode,
122
+ typography
123
+ };
124
+ }
125
+ /**
126
+ * Converts all TweakCN presets to ThemePreset format
127
+ */ export function getAllTweakCNPresets() {
128
+ return Object.values(tweakcnThemePresets).map(convertTweakCNPreset);
129
+ }
130
+
131
+ //# sourceMappingURL=tweakcnConverter.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/utils/tweakcnConverter.ts"],"sourcesContent":["/**\n * Converts TweakCN theme presets to standard ThemePreset format\n */\n\nimport type { ExtendedThemePreset } from '../extended-presets.js'\nimport type { ThemePreset } from '../presets.js'\nimport { tweakcnThemePresets } from '../tweakcn-presets.js'\n\n/**\n * Converts OKLCH color to HSL for preview\n * Simple extraction - takes the lightness value\n */\nfunction oklchToPreviewColor(oklch: string): string {\n // Extract lightness from oklch(L C H)\n const match = oklch.match(/oklch\\(([\\d.]+)\\s+([\\d.]+)\\s+([\\d.]+)\\)/)\n if (!match) return '#3b82f6' // fallback blue\n \n const [, l, c, h] = match\n const lightness = Math.round(parseFloat(l) * 100)\n const chroma = parseFloat(c)\n const hue = parseFloat(h)\n \n // Convert to HSL approximation for preview\n const saturation = Math.min(100, Math.round(chroma * 100))\n \n return `hsl(${hue}, ${saturation}%, ${lightness}%)`\n}\n\n/**\n * Maps OKLCH color to RGB/HSL for Payload compatibility\n */\nfunction convertOklchColor(oklch: string): string {\n // For now, return the OKLCH as-is since browsers support it\n // Could add polyfill conversion if needed\n return oklch\n}\n\n/**\n * Converts ExtendedThemePreset to ThemePreset\n */\nexport function convertTweakCNPreset(extended: ExtendedThemePreset): ThemePreset {\n const { label, value, styles } = extended\n const { light, dark } = styles\n \n // Extract border radius\n const radiusValue = light.radius ?? '0.5rem'\n let borderRadius: ThemePreset['borderRadius']\n \n if (radiusValue === '0' || radiusValue === '0px' || radiusValue === '0rem') {\n borderRadius = 'none'\n } else if (parseFloat(radiusValue) <= 0.25) {\n borderRadius = 'small'\n } else if (parseFloat(radiusValue) <= 0.5) {\n borderRadius = 'medium'\n } else if (parseFloat(radiusValue) <= 0.75) {\n borderRadius = 'large'\n } else {\n borderRadius = 'xl'\n }\n \n // Convert light mode colors\n const lightMode: Record<string, string> = {\n background: convertOklchColor(light.background),\n foreground: convertOklchColor(light.foreground),\n card: convertOklchColor(light.card),\n cardForeground: convertOklchColor(light['card-foreground']),\n popover: convertOklchColor(light.popover),\n popoverForeground: convertOklchColor(light['popover-foreground']),\n primary: convertOklchColor(light.primary),\n primaryForeground: convertOklchColor(light['primary-foreground']),\n secondary: convertOklchColor(light.secondary),\n secondaryForeground: convertOklchColor(light['secondary-foreground']),\n muted: convertOklchColor(light.muted),\n mutedForeground: convertOklchColor(light['muted-foreground']),\n accent: convertOklchColor(light.accent),\n accentForeground: convertOklchColor(light['accent-foreground']),\n destructive: convertOklchColor(light.destructive),\n destructiveForeground: convertOklchColor(light['destructive-foreground']),\n border: convertOklchColor(light.border),\n input: convertOklchColor(light.input),\n ring: convertOklchColor(light.ring),\n }\n \n // Convert dark mode colors\n const darkMode: Record<string, string> = {\n background: convertOklchColor(dark.background),\n foreground: convertOklchColor(dark.foreground),\n card: convertOklchColor(dark.card),\n cardForeground: convertOklchColor(dark['card-foreground']),\n popover: convertOklchColor(dark.popover),\n popoverForeground: convertOklchColor(dark['popover-foreground']),\n primary: convertOklchColor(dark.primary),\n primaryForeground: convertOklchColor(dark['primary-foreground']),\n secondary: convertOklchColor(dark.secondary),\n secondaryForeground: convertOklchColor(dark['secondary-foreground']),\n muted: convertOklchColor(dark.muted),\n mutedForeground: convertOklchColor(dark['muted-foreground']),\n accent: convertOklchColor(dark.accent),\n accentForeground: convertOklchColor(dark['accent-foreground']),\n destructive: convertOklchColor(dark.destructive),\n destructiveForeground: convertOklchColor(dark['destructive-foreground']),\n border: convertOklchColor(dark.border),\n input: convertOklchColor(dark.input),\n ring: convertOklchColor(dark.ring),\n }\n \n // Generate preview colors\n const preview = {\n colors: {\n primary: oklchToPreviewColor(light.primary),\n background: oklchToPreviewColor(light.background),\n accent: oklchToPreviewColor(light.accent),\n },\n }\n \n // Typography configuration\n const typography = light['font-sans'] ? {\n fontFamily: light['font-sans'],\n headingFamily: light['font-sans'],\n baseFontSize: '16px',\n lineHeight: '1.6',\n fontWeights: {\n normal: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n },\n letterSpacing: {\n normal: '0',\n wide: '0.025em',\n },\n } : undefined\n \n return {\n name: `tweakcn-${value}`,\n label: `${label} (TweakCN)`,\n borderRadius,\n preview,\n lightMode,\n darkMode,\n typography,\n }\n}\n\n/**\n * Converts all TweakCN presets to ThemePreset format\n */\nexport function getAllTweakCNPresets(): ThemePreset[] {\n return Object.values(tweakcnThemePresets).map(convertTweakCNPreset)\n}\n"],"names":["tweakcnThemePresets","oklchToPreviewColor","oklch","match","l","c","h","lightness","Math","round","parseFloat","chroma","hue","saturation","min","convertOklchColor","convertTweakCNPreset","extended","label","value","styles","light","dark","radiusValue","radius","borderRadius","lightMode","background","foreground","card","cardForeground","popover","popoverForeground","primary","primaryForeground","secondary","secondaryForeground","muted","mutedForeground","accent","accentForeground","destructive","destructiveForeground","border","input","ring","darkMode","preview","colors","typography","fontFamily","headingFamily","baseFontSize","lineHeight","fontWeights","normal","medium","semibold","bold","letterSpacing","wide","undefined","name","getAllTweakCNPresets","Object","values","map"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@kilivi/payloadcms-theme-management",
3
- "version": "0.3.4",
4
- "description": "Theme configuration plugin for Payload CMS v3",
3
+ "version": "0.5.2",
4
+ "description": "Theme configuration plugin for Payload CMS v3 with 60+ professional themes",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",