@kilivi/payloadcms-theme-management 0.1.15 → 0.1.16

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 (17) hide show
  1. package/dist/extended-presets.d.ts +62 -0
  2. package/dist/extended-presets.d.ts.map +1 -0
  3. package/dist/extended-presets.js +224 -0
  4. package/dist/extended-presets.js.map +1 -0
  5. package/dist/fields/colorModeFields.js +1 -1
  6. package/dist/fields/colorModeFields.js.map +1 -1
  7. package/dist/fields/themeConfigurationField.js +2 -2
  8. package/dist/fields/themeConfigurationField.js.map +1 -1
  9. package/dist/index.d.ts +3 -0
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.js +2 -0
  12. package/dist/index.js.map +1 -1
  13. package/dist/utils/extendedThemeHelpers.d.ts +119 -0
  14. package/dist/utils/extendedThemeHelpers.d.ts.map +1 -0
  15. package/dist/utils/extendedThemeHelpers.js +232 -0
  16. package/dist/utils/extendedThemeHelpers.js.map +1 -0
  17. package/package.json +1 -1
package/dist/extended-presets.d.ts ADDED
@@ -0,0 +1,62 @@
1
+ /**
2
+ * Extended Shadcn-style theme presets with full color token support
3
+ * Inspired by https://ui.shadcn.com/themes and https://tweakcn.com/editor/theme
4
+ *
5
+ * This extends the existing theme system with:
6
+ * - Full shadcn/ui color tokens
7
+ * - OKLCH color format support
8
+ * - Chart colors (chart-1 through chart-5)
9
+ * - Semantic color tokens (destructive, muted, accent, etc.)
10
+ * - CSS variable generation for Tailwind integration
11
+ */
12
+ export interface ShadcnColorTokens {
13
+ background: string;
14
+ foreground: string;
15
+ card: string;
16
+ 'card-foreground': string;
17
+ popover: string;
18
+ 'popover-foreground': string;
19
+ primary: string;
20
+ 'primary-foreground': string;
21
+ secondary: string;
22
+ 'secondary-foreground': string;
23
+ muted: string;
24
+ 'muted-foreground': string;
25
+ accent: string;
26
+ 'accent-foreground': string;
27
+ destructive: string;
28
+ 'destructive-foreground': string;
29
+ border: string;
30
+ input: string;
31
+ ring: string;
32
+ 'chart-1': string;
33
+ 'chart-2': string;
34
+ 'chart-3': string;
35
+ 'chart-4': string;
36
+ 'chart-5': string;
37
+ radius?: string;
38
+ 'font-sans'?: string;
39
+ 'font-mono'?: string;
40
+ }
41
+ export interface ExtendedThemePreset {
42
+ label: string;
43
+ value: string;
44
+ styles: {
45
+ light: ShadcnColorTokens;
46
+ dark: ShadcnColorTokens;
47
+ };
48
+ }
49
+ /**
50
+ * Extended theme presets with full shadcn/ui token support
51
+ * These work alongside the existing default presets
52
+ */
53
+ export declare const extendedThemePresets: Record<string, ExtendedThemePreset>;
54
+ /**
55
+ * Convert extended theme to CSS variables
56
+ */
57
+ export declare function extendedThemeToCSSVariables(theme: ExtendedThemePreset, mode?: 'light' | 'dark'): string;
58
+ /**
59
+ * Generate complete CSS for an extended theme
60
+ */
61
+ export declare function generateExtendedThemeCSS(theme: ExtendedThemePreset): string;
62
+ //# sourceMappingURL=extended-presets.d.ts.map
package/dist/extended-presets.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"extended-presets.d.ts","sourceRoot":"","sources":["../src/extended-presets.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,iBAAiB;IAEhC,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAGlB,IAAI,EAAE,MAAM,CAAA;IACZ,iBAAiB,EAAE,MAAM,CAAA;IAGzB,OAAO,EAAE,MAAM,CAAA;IACf,oBAAoB,EAAE,MAAM,CAAA;IAG5B,OAAO,EAAE,MAAM,CAAA;IACf,oBAAoB,EAAE,MAAM,CAAA;IAG5B,SAAS,EAAE,MAAM,CAAA;IACjB,sBAAsB,EAAE,MAAM,CAAA;IAG9B,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB,EAAE,MAAM,CAAA;IAG1B,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB,EAAE,MAAM,CAAA;IAG3B,WAAW,EAAE,MAAM,CAAA;IACnB,wBAAwB,EAAE,MAAM,CAAA;IAGhC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IAGZ,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IAGjB,MAAM,CAAC,EAAE,MAAM,CAAA;IAGf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE;QACN,KAAK,EAAE,iBAAiB,CAAA;QACxB,IAAI,EAAE,iBAAiB,CAAA;KACxB,CAAA;CACF;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAuLpE,CAAA;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,EAC1B,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,MAAM,CASR;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAe3E"}
package/dist/extended-presets.js ADDED
@@ -0,0 +1,224 @@
1
+ /**
2
+ * Extended Shadcn-style theme presets with full color token support
3
+ * Inspired by https://ui.shadcn.com/themes and https://tweakcn.com/editor/theme
4
+ *
5
+ * This extends the existing theme system with:
6
+ * - Full shadcn/ui color tokens
7
+ * - OKLCH color format support
8
+ * - Chart colors (chart-1 through chart-5)
9
+ * - Semantic color tokens (destructive, muted, accent, etc.)
10
+ * - CSS variable generation for Tailwind integration
11
+ */ /**
12
+ * Extended theme presets with full shadcn/ui token support
13
+ * These work alongside the existing default presets
14
+ */ export const extendedThemePresets = {
15
+ 'cool-extended': {
16
+ label: 'Cool & Professional (Extended)',
17
+ value: 'cool-extended',
18
+ styles: {
19
+ light: {
20
+ background: 'oklch(1 0 0)',
21
+ foreground: 'oklch(0.145 0 0)',
22
+ card: 'oklch(1 0 0)',
23
+ 'card-foreground': 'oklch(0.145 0 0)',
24
+ popover: 'oklch(1 0 0)',
25
+ 'popover-foreground': 'oklch(0.145 0 0)',
26
+ primary: 'oklch(0.549 0.184 250.847)',
27
+ 'primary-foreground': 'oklch(0.985 0.005 250.847)',
28
+ secondary: 'oklch(0.97 0 0)',
29
+ 'secondary-foreground': 'oklch(0.205 0 0)',
30
+ muted: 'oklch(0.97 0 0)',
31
+ 'muted-foreground': 'oklch(0.556 0 0)',
32
+ accent: 'oklch(0.97 0 0)',
33
+ 'accent-foreground': 'oklch(0.205 0 0)',
34
+ destructive: 'oklch(0.577 0.245 27.325)',
35
+ 'destructive-foreground': 'oklch(0.98 0 0)',
36
+ border: 'oklch(0.922 0 0)',
37
+ input: 'oklch(0.922 0 0)',
38
+ ring: 'oklch(0.549 0.184 250.847)',
39
+ 'chart-1': 'oklch(0.549 0.184 250.847)',
40
+ 'chart-2': 'oklch(0.645 0.168 250.847)',
41
+ 'chart-3': 'oklch(0.445 0.204 250.847)',
42
+ 'chart-4': 'oklch(0.349 0.184 250.847)',
43
+ 'chart-5': 'oklch(0.749 0.124 250.847)',
44
+ radius: '0.5rem'
45
+ },
46
+ dark: {
47
+ background: 'oklch(0.145 0 0)',
48
+ foreground: 'oklch(0.985 0 0)',
49
+ card: 'oklch(0.205 0 0)',
50
+ 'card-foreground': 'oklch(0.985 0 0)',
51
+ popover: 'oklch(0.269 0 0)',
52
+ 'popover-foreground': 'oklch(0.985 0 0)',
53
+ primary: 'oklch(0.645 0.168 250.847)',
54
+ 'primary-foreground': 'oklch(0.145 0.005 250.847)',
55
+ secondary: 'oklch(0.269 0 0)',
56
+ 'secondary-foreground': 'oklch(0.985 0 0)',
57
+ muted: 'oklch(0.269 0 0)',
58
+ 'muted-foreground': 'oklch(0.708 0 0)',
59
+ accent: 'oklch(0.371 0 0)',
60
+ 'accent-foreground': 'oklch(0.985 0 0)',
61
+ destructive: 'oklch(0.704 0.191 22.216)',
62
+ 'destructive-foreground': 'oklch(0.98 0 0)',
63
+ border: 'oklch(1 0 0 / 10%)',
64
+ input: 'oklch(1 0 0 / 15%)',
65
+ ring: 'oklch(0.645 0.168 250.847)',
66
+ 'chart-1': 'oklch(0.645 0.168 250.847)',
67
+ 'chart-2': 'oklch(0.549 0.184 250.847)',
68
+ 'chart-3': 'oklch(0.445 0.204 250.847)',
69
+ 'chart-4': 'oklch(0.749 0.124 250.847)',
70
+ 'chart-5': 'oklch(0.849 0.084 250.847)',
71
+ radius: '0.5rem'
72
+ }
73
+ }
74
+ },
75
+ 'neon-extended': {
76
+ label: 'Neon Cyberpunk (Extended)',
77
+ value: 'neon-extended',
78
+ styles: {
79
+ light: {
80
+ background: 'oklch(1 0 0)',
81
+ foreground: 'oklch(0.145 0 0)',
82
+ card: 'oklch(1 0 0)',
83
+ 'card-foreground': 'oklch(0.145 0 0)',
84
+ popover: 'oklch(1 0 0)',
85
+ 'popover-foreground': 'oklch(0.145 0 0)',
86
+ primary: 'oklch(0.628 0.258 328.363)',
87
+ 'primary-foreground': 'oklch(0.985 0.015 328.363)',
88
+ secondary: 'oklch(0.97 0 0)',
89
+ 'secondary-foreground': 'oklch(0.205 0 0)',
90
+ muted: 'oklch(0.97 0 0)',
91
+ 'muted-foreground': 'oklch(0.556 0 0)',
92
+ accent: 'oklch(0.749 0.168 305.365)',
93
+ 'accent-foreground': 'oklch(0.985 0.015 305.365)',
94
+ destructive: 'oklch(0.577 0.245 27.325)',
95
+ 'destructive-foreground': 'oklch(0.98 0 0)',
96
+ border: 'oklch(0.922 0 0)',
97
+ input: 'oklch(0.922 0 0)',
98
+ ring: 'oklch(0.628 0.258 328.363)',
99
+ 'chart-1': 'oklch(0.628 0.258 328.363)',
100
+ 'chart-2': 'oklch(0.749 0.168 305.365)',
101
+ 'chart-3': 'oklch(0.645 0.234 286.897)',
102
+ 'chart-4': 'oklch(0.545 0.298 328.363)',
103
+ 'chart-5': 'oklch(0.845 0.118 305.365)',
104
+ radius: '0.75rem'
105
+ },
106
+ dark: {
107
+ background: 'oklch(0.125 0.028 305.365)',
108
+ foreground: 'oklch(0.985 0.015 305.365)',
109
+ card: 'oklch(0.185 0.028 305.365)',
110
+ 'card-foreground': 'oklch(0.985 0.015 305.365)',
111
+ popover: 'oklch(0.245 0.028 305.365)',
112
+ 'popover-foreground': 'oklch(0.985 0.015 305.365)',
113
+ primary: 'oklch(0.749 0.168 305.365)',
114
+ 'primary-foreground': 'oklch(0.125 0.028 305.365)',
115
+ secondary: 'oklch(0.245 0.028 305.365)',
116
+ 'secondary-foreground': 'oklch(0.985 0.015 305.365)',
117
+ muted: 'oklch(0.245 0.028 305.365)',
118
+ 'muted-foreground': 'oklch(0.708 0.015 305.365)',
119
+ accent: 'oklch(0.628 0.258 328.363)',
120
+ 'accent-foreground': 'oklch(0.125 0.028 328.363)',
121
+ destructive: 'oklch(0.704 0.191 22.216)',
122
+ 'destructive-foreground': 'oklch(0.98 0 0)',
123
+ border: 'oklch(1 0 0 / 15%)',
124
+ input: 'oklch(1 0 0 / 20%)',
125
+ ring: 'oklch(0.749 0.168 305.365)',
126
+ 'chart-1': 'oklch(0.749 0.168 305.365)',
127
+ 'chart-2': 'oklch(0.628 0.258 328.363)',
128
+ 'chart-3': 'oklch(0.645 0.234 286.897)',
129
+ 'chart-4': 'oklch(0.845 0.118 305.365)',
130
+ 'chart-5': 'oklch(0.945 0.068 305.365)',
131
+ radius: '0.75rem'
132
+ }
133
+ }
134
+ },
135
+ 'solar-extended': {
136
+ label: 'Solar Warmth (Extended)',
137
+ value: 'solar-extended',
138
+ styles: {
139
+ light: {
140
+ background: 'oklch(0.985 0.01 83.124)',
141
+ foreground: 'oklch(0.145 0 0)',
142
+ card: 'oklch(1 0 0)',
143
+ 'card-foreground': 'oklch(0.145 0 0)',
144
+ popover: 'oklch(1 0 0)',
145
+ 'popover-foreground': 'oklch(0.145 0 0)',
146
+ primary: 'oklch(0.656 0.214 53.877)',
147
+ 'primary-foreground': 'oklch(0.985 0.015 53.877)',
148
+ secondary: 'oklch(0.97 0 0)',
149
+ 'secondary-foreground': 'oklch(0.205 0 0)',
150
+ muted: 'oklch(0.97 0 0)',
151
+ 'muted-foreground': 'oklch(0.556 0 0)',
152
+ accent: 'oklch(0.745 0.188 83.124)',
153
+ 'accent-foreground': 'oklch(0.145 0 0)',
154
+ destructive: 'oklch(0.577 0.245 27.325)',
155
+ 'destructive-foreground': 'oklch(0.98 0 0)',
156
+ border: 'oklch(0.922 0 0)',
157
+ input: 'oklch(0.922 0 0)',
158
+ ring: 'oklch(0.656 0.214 53.877)',
159
+ 'chart-1': 'oklch(0.656 0.214 53.877)',
160
+ 'chart-2': 'oklch(0.745 0.188 83.124)',
161
+ 'chart-3': 'oklch(0.556 0.234 53.877)',
162
+ 'chart-4': 'oklch(0.845 0.148 83.124)',
163
+ 'chart-5': 'oklch(0.456 0.254 53.877)',
164
+ radius: '0.625rem'
165
+ },
166
+ dark: {
167
+ background: 'oklch(0.125 0.015 53.877)',
168
+ foreground: 'oklch(0.985 0.015 83.124)',
169
+ card: 'oklch(0.185 0.015 53.877)',
170
+ 'card-foreground': 'oklch(0.985 0.015 83.124)',
171
+ popover: 'oklch(0.245 0.015 53.877)',
172
+ 'popover-foreground': 'oklch(0.985 0.015 83.124)',
173
+ primary: 'oklch(0.745 0.188 83.124)',
174
+ 'primary-foreground': 'oklch(0.125 0.015 83.124)',
175
+ secondary: 'oklch(0.245 0.015 53.877)',
176
+ 'secondary-foreground': 'oklch(0.985 0.015 83.124)',
177
+ muted: 'oklch(0.245 0.015 53.877)',
178
+ 'muted-foreground': 'oklch(0.708 0.015 83.124)',
179
+ accent: 'oklch(0.656 0.214 53.877)',
180
+ 'accent-foreground': 'oklch(0.985 0.015 53.877)',
181
+ destructive: 'oklch(0.704 0.191 22.216)',
182
+ 'destructive-foreground': 'oklch(0.98 0 0)',
183
+ border: 'oklch(1 0 0 / 12%)',
184
+ input: 'oklch(1 0 0 / 18%)',
185
+ ring: 'oklch(0.745 0.188 83.124)',
186
+ 'chart-1': 'oklch(0.745 0.188 83.124)',
187
+ 'chart-2': 'oklch(0.656 0.214 53.877)',
188
+ 'chart-3': 'oklch(0.845 0.148 83.124)',
189
+ 'chart-4': 'oklch(0.556 0.234 53.877)',
190
+ 'chart-5': 'oklch(0.945 0.088 83.124)',
191
+ radius: '0.625rem'
192
+ }
193
+ }
194
+ }
195
+ };
196
+ /**
197
+ * Convert extended theme to CSS variables
198
+ */ export function extendedThemeToCSSVariables(theme, mode = 'light') {
199
+ const tokens = theme.styles[mode];
200
+ const cssVars = [];
201
+ Object.entries(tokens).forEach(([key, value])=>{
202
+ cssVars.push(` --${key}: ${value};`);
203
+ });
204
+ return cssVars.join('\n');
205
+ }
206
+ /**
207
+ * Generate complete CSS for an extended theme
208
+ */ export function generateExtendedThemeCSS(theme) {
209
+ const lightCSS = extendedThemeToCSSVariables(theme, 'light');
210
+ const darkCSS = extendedThemeToCSSVariables(theme, 'dark');
211
+ return `:root {
212
+ ${lightCSS}
213
+ }
214
+
215
+ .dark {
216
+ ${darkCSS}
217
+ }
218
+
219
+ [data-theme-mode="dark"] {
220
+ ${darkCSS}
221
+ }`;
222
+ }
223
+
224
+ //# sourceMappingURL=extended-presets.js.map
package/dist/extended-presets.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/extended-presets.ts"],"sourcesContent":["/**\n * Extended Shadcn-style theme presets with full color token support\n * Inspired by https://ui.shadcn.com/themes and https://tweakcn.com/editor/theme\n * \n * This extends the existing theme system with:\n * - Full shadcn/ui color tokens\n * - OKLCH color format support\n * - Chart colors (chart-1 through chart-5)\n * - Semantic color tokens (destructive, muted, accent, etc.)\n * - CSS variable generation for Tailwind integration\n */\n\nexport interface ShadcnColorTokens {\n // Base colors\n background: string\n foreground: string\n \n // Card colors\n card: string\n 'card-foreground': string\n \n // Popover colors\n popover: string\n 'popover-foreground': string\n \n // Primary colors\n primary: string\n 'primary-foreground': string\n \n // Secondary colors\n secondary: string\n 'secondary-foreground': string\n \n // Muted colors\n muted: string\n 'muted-foreground': string\n \n // Accent colors\n accent: string\n 'accent-foreground': string\n \n // Destructive colors\n destructive: string\n 'destructive-foreground': string\n \n // Border & Input\n border: string\n input: string\n ring: string\n \n // Chart colors (for data visualization)\n 'chart-1': string\n 'chart-2': string\n 'chart-3': string\n 'chart-4': string\n 'chart-5': string\n \n // Border radius (optional)\n radius?: string\n \n // Font families (optional)\n 'font-sans'?: string\n 'font-mono'?: string\n}\n\nexport interface ExtendedThemePreset {\n label: string\n value: string\n styles: {\n light: ShadcnColorTokens\n dark: ShadcnColorTokens\n }\n}\n\n/**\n * Extended theme presets with full shadcn/ui token support\n * These work alongside the existing default presets\n */\nexport const extendedThemePresets: Record<string, ExtendedThemePreset> = {\n 'cool-extended': {\n label: 'Cool & Professional (Extended)',\n value: 'cool-extended',\n styles: {\n light: {\n background: 'oklch(1 0 0)',\n foreground: 'oklch(0.145 0 0)',\n card: 'oklch(1 0 0)',\n 'card-foreground': 'oklch(0.145 0 0)',\n popover: 'oklch(1 0 0)',\n 'popover-foreground': 'oklch(0.145 0 0)',\n primary: 'oklch(0.549 0.184 250.847)',\n 'primary-foreground': 'oklch(0.985 0.005 250.847)',\n secondary: 'oklch(0.97 0 0)',\n 'secondary-foreground': 'oklch(0.205 0 0)',\n muted: 'oklch(0.97 0 0)',\n 'muted-foreground': 'oklch(0.556 0 0)',\n accent: 'oklch(0.97 0 0)',\n 'accent-foreground': 'oklch(0.205 0 0)',\n destructive: 'oklch(0.577 0.245 27.325)',\n 'destructive-foreground': 'oklch(0.98 0 0)',\n border: 'oklch(0.922 0 0)',\n input: 'oklch(0.922 0 0)',\n ring: 'oklch(0.549 0.184 250.847)',\n 'chart-1': 'oklch(0.549 0.184 250.847)',\n 'chart-2': 'oklch(0.645 0.168 250.847)',\n 'chart-3': 'oklch(0.445 0.204 250.847)',\n 'chart-4': 'oklch(0.349 0.184 250.847)',\n 'chart-5': 'oklch(0.749 0.124 250.847)',\n radius: '0.5rem',\n },\n dark: {\n background: 'oklch(0.145 0 0)',\n foreground: 'oklch(0.985 0 0)',\n card: 'oklch(0.205 0 0)',\n 'card-foreground': 'oklch(0.985 0 0)',\n popover: 'oklch(0.269 0 0)',\n 'popover-foreground': 'oklch(0.985 0 0)',\n primary: 'oklch(0.645 0.168 250.847)',\n 'primary-foreground': 'oklch(0.145 0.005 250.847)',\n secondary: 'oklch(0.269 0 0)',\n 'secondary-foreground': 'oklch(0.985 0 0)',\n muted: 'oklch(0.269 0 0)',\n 'muted-foreground': 'oklch(0.708 0 0)',\n accent: 'oklch(0.371 0 0)',\n 'accent-foreground': 'oklch(0.985 0 0)',\n destructive: 'oklch(0.704 0.191 22.216)',\n 'destructive-foreground': 'oklch(0.98 0 0)',\n border: 'oklch(1 0 0 / 10%)',\n input: 'oklch(1 0 0 / 15%)',\n ring: 'oklch(0.645 0.168 250.847)',\n 'chart-1': 'oklch(0.645 0.168 250.847)',\n 'chart-2': 'oklch(0.549 0.184 250.847)',\n 'chart-3': 'oklch(0.445 0.204 250.847)',\n 'chart-4': 'oklch(0.749 0.124 250.847)',\n 'chart-5': 'oklch(0.849 0.084 250.847)',\n radius: '0.5rem',\n },\n },\n },\n \n 'neon-extended': {\n label: 'Neon Cyberpunk (Extended)',\n value: 'neon-extended',\n styles: {\n light: {\n background: 'oklch(1 0 0)',\n foreground: 'oklch(0.145 0 0)',\n card: 'oklch(1 0 0)',\n 'card-foreground': 'oklch(0.145 0 0)',\n popover: 'oklch(1 0 0)',\n 'popover-foreground': 'oklch(0.145 0 0)',\n primary: 'oklch(0.628 0.258 328.363)',\n 'primary-foreground': 'oklch(0.985 0.015 328.363)',\n secondary: 'oklch(0.97 0 0)',\n 'secondary-foreground': 'oklch(0.205 0 0)',\n muted: 'oklch(0.97 0 0)',\n 'muted-foreground': 'oklch(0.556 0 0)',\n accent: 'oklch(0.749 0.168 305.365)',\n 'accent-foreground': 'oklch(0.985 0.015 305.365)',\n destructive: 'oklch(0.577 0.245 27.325)',\n 'destructive-foreground': 'oklch(0.98 0 0)',\n border: 'oklch(0.922 0 0)',\n input: 'oklch(0.922 0 0)',\n ring: 'oklch(0.628 0.258 328.363)',\n 'chart-1': 'oklch(0.628 0.258 328.363)',\n 'chart-2': 'oklch(0.749 0.168 305.365)',\n 'chart-3': 'oklch(0.645 0.234 286.897)',\n 'chart-4': 'oklch(0.545 0.298 328.363)',\n 'chart-5': 'oklch(0.845 0.118 305.365)',\n radius: '0.75rem',\n },\n dark: {\n background: 'oklch(0.125 0.028 305.365)',\n foreground: 'oklch(0.985 0.015 305.365)',\n card: 'oklch(0.185 0.028 305.365)',\n 'card-foreground': 'oklch(0.985 0.015 305.365)',\n popover: 'oklch(0.245 0.028 305.365)',\n 'popover-foreground': 'oklch(0.985 0.015 305.365)',\n primary: 'oklch(0.749 0.168 305.365)',\n 'primary-foreground': 'oklch(0.125 0.028 305.365)',\n secondary: 'oklch(0.245 0.028 305.365)',\n 'secondary-foreground': 'oklch(0.985 0.015 305.365)',\n muted: 'oklch(0.245 0.028 305.365)',\n 'muted-foreground': 'oklch(0.708 0.015 305.365)',\n accent: 'oklch(0.628 0.258 328.363)',\n 'accent-foreground': 'oklch(0.125 0.028 328.363)',\n destructive: 'oklch(0.704 0.191 22.216)',\n 'destructive-foreground': 'oklch(0.98 0 0)',\n border: 'oklch(1 0 0 / 15%)',\n input: 'oklch(1 0 0 / 20%)',\n ring: 'oklch(0.749 0.168 305.365)',\n 'chart-1': 'oklch(0.749 0.168 305.365)',\n 'chart-2': 'oklch(0.628 0.258 328.363)',\n 'chart-3': 'oklch(0.645 0.234 286.897)',\n 'chart-4': 'oklch(0.845 0.118 305.365)',\n 'chart-5': 'oklch(0.945 0.068 305.365)',\n radius: '0.75rem',\n },\n },\n },\n \n 'solar-extended': {\n label: 'Solar Warmth (Extended)',\n value: 'solar-extended',\n styles: {\n light: {\n background: 'oklch(0.985 0.01 83.124)',\n foreground: 'oklch(0.145 0 0)',\n card: 'oklch(1 0 0)',\n 'card-foreground': 'oklch(0.145 0 0)',\n popover: 'oklch(1 0 0)',\n 'popover-foreground': 'oklch(0.145 0 0)',\n primary: 'oklch(0.656 0.214 53.877)',\n 'primary-foreground': 'oklch(0.985 0.015 53.877)',\n secondary: 'oklch(0.97 0 0)',\n 'secondary-foreground': 'oklch(0.205 0 0)',\n muted: 'oklch(0.97 0 0)',\n 'muted-foreground': 'oklch(0.556 0 0)',\n accent: 'oklch(0.745 0.188 83.124)',\n 'accent-foreground': 'oklch(0.145 0 0)',\n destructive: 'oklch(0.577 0.245 27.325)',\n 'destructive-foreground': 'oklch(0.98 0 0)',\n border: 'oklch(0.922 0 0)',\n input: 'oklch(0.922 0 0)',\n ring: 'oklch(0.656 0.214 53.877)',\n 'chart-1': 'oklch(0.656 0.214 53.877)',\n 'chart-2': 'oklch(0.745 0.188 83.124)',\n 'chart-3': 'oklch(0.556 0.234 53.877)',\n 'chart-4': 'oklch(0.845 0.148 83.124)',\n 'chart-5': 'oklch(0.456 0.254 53.877)',\n radius: '0.625rem',\n },\n dark: {\n background: 'oklch(0.125 0.015 53.877)',\n foreground: 'oklch(0.985 0.015 83.124)',\n card: 'oklch(0.185 0.015 53.877)',\n 'card-foreground': 'oklch(0.985 0.015 83.124)',\n popover: 'oklch(0.245 0.015 53.877)',\n 'popover-foreground': 'oklch(0.985 0.015 83.124)',\n primary: 'oklch(0.745 0.188 83.124)',\n 'primary-foreground': 'oklch(0.125 0.015 83.124)',\n secondary: 'oklch(0.245 0.015 53.877)',\n 'secondary-foreground': 'oklch(0.985 0.015 83.124)',\n muted: 'oklch(0.245 0.015 53.877)',\n 'muted-foreground': 'oklch(0.708 0.015 83.124)',\n accent: 'oklch(0.656 0.214 53.877)',\n 'accent-foreground': 'oklch(0.985 0.015 53.877)',\n destructive: 'oklch(0.704 0.191 22.216)',\n 'destructive-foreground': 'oklch(0.98 0 0)',\n border: 'oklch(1 0 0 / 12%)',\n input: 'oklch(1 0 0 / 18%)',\n ring: 'oklch(0.745 0.188 83.124)',\n 'chart-1': 'oklch(0.745 0.188 83.124)',\n 'chart-2': 'oklch(0.656 0.214 53.877)',\n 'chart-3': 'oklch(0.845 0.148 83.124)',\n 'chart-4': 'oklch(0.556 0.234 53.877)',\n 'chart-5': 'oklch(0.945 0.088 83.124)',\n radius: '0.625rem',\n },\n },\n },\n}\n\n/**\n * Convert extended theme to CSS variables\n */\nexport function extendedThemeToCSSVariables(\n theme: ExtendedThemePreset,\n mode: 'light' | 'dark' = 'light'\n): string {\n const tokens = theme.styles[mode]\n const cssVars: string[] = []\n \n Object.entries(tokens).forEach(([key, value]) => {\n cssVars.push(` --${key}: ${value};`)\n })\n \n return cssVars.join('\\n')\n}\n\n/**\n * Generate complete CSS for an extended theme\n */\nexport function generateExtendedThemeCSS(theme: ExtendedThemePreset): string {\n const lightCSS = extendedThemeToCSSVariables(theme, 'light')\n const darkCSS = extendedThemeToCSSVariables(theme, 'dark')\n \n return `:root {\n${lightCSS}\n}\n\n.dark {\n${darkCSS}\n}\n\n[data-theme-mode=\"dark\"] {\n${darkCSS}\n}`\n}\n"],"names":["extendedThemePresets","label","value","styles","light","background","foreground","card","popover","primary","secondary","muted","accent","destructive","border","input","ring","radius","dark","extendedThemeToCSSVariables","theme","mode","tokens","cssVars","Object","entries","forEach","key","push","join","generateExtendedThemeCSS","lightCSS","darkCSS"],"mappings":"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"}
package/dist/fields/colorModeFields.js CHANGED
@@ -1,4 +1,4 @@
1
- const themeColorPickerComponentPath = '@payloadcms-plugins/theme-management/fields/ThemeColorPickerField';
1
+ const themeColorPickerComponentPath = '@kilivi/payloadcms-theme-management/fields/ThemeColorPickerField';
2
2
  const colorFieldKeys = [
3
3
  'background',
4
4
  'foreground',
package/dist/fields/colorModeFields.js.map CHANGED
@@ -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'\n\nconst themeColorPickerComponentPath = '@kilivi/payloadcms-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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"}
package/dist/fields/themeConfigurationField.js CHANGED
@@ -30,7 +30,7 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
30
30
  cs: 'Vyberte téma pro automatické předvyplnění barev. Po výběru můžete barvy upravit.'
31
31
  },
32
32
  components: {
33
- Field: '@payloadcms-plugins/theme-management/fields/ThemePreviewField'
33
+ Field: '@kilivi/payloadcms-theme-management/fields/ThemePreviewField'
34
34
  }
35
35
  }
36
36
  }
@@ -309,7 +309,7 @@ import { darkModeField, lightModeField } from './colorModeFields.js';
309
309
  ],
310
310
  admin: {
311
311
  components: {
312
- Field: '@payloadcms-plugins/theme-management/fields/RadiusField'
312
+ Field: '@kilivi/payloadcms-theme-management/fields/RadiusField'
313
313
  },
314
314
  width: '33%'
315
315
  }
package/dist/fields/themeConfigurationField.js.map CHANGED
@@ -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'\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: '@kilivi/payloadcms-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: '@kilivi/payloadcms-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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"}
package/dist/index.d.ts CHANGED
@@ -9,6 +9,9 @@ export declare const getThemePreset: (themeName: string) => ThemePreset | null;
9
9
  export declare const getAvailableThemePresets: () => ThemePreset[];
10
10
  export { defaultThemePresets } from './presets.js';
11
11
  export type { ThemePreset, ThemeTypographyPreset } from './presets.js';
12
+ export { extendedThemePresets, extendedThemeToCSSVariables, } from './extended-presets.js';
13
+ export type { ExtendedThemePreset, ShadcnColorTokens } from './extended-presets.js';
14
+ export { applyExtendedTheme, generateExtendedThemeCSS, resetExtendedTheme, getExtendedThemeTokens, createUseExtendedTheme, getTailwindVarReferences, } from './utils/extendedThemeHelpers.js';
12
15
  export type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } from './types.js';
13
16
  export { DEFAULT_THEME_CONFIGURATION, resolveThemeConfiguration, } from './utils/resolveThemeConfiguration.js';
14
17
  export type { ResolvedThemeConfiguration } from './utils/resolveThemeConfiguration.js';
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,YAAY,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAA;AACtF,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE1D,eAAO,MAAM,qBAAqB,aApJa,4BAA4B,KAAQ,MAoJzB,CAAA;AAC1D,oDAAoD;AACpD,eAAO,MAAM,wBAAwB,aAtJU,4BAA4B,KAAQ,MAsJtB,CAAA;AAE7D,eAAe,qBAAqB,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,OAAO,EACL,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,uBAAuB,CAAA;AAC9B,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACnF,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,iCAAiC,CAAA;AACxC,YAAY,EAAE,4BAA4B,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAA;AAC9F,OAAO,EACL,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,sCAAsC,CAAA;AAC7C,YAAY,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAA;AACtF,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAE1D,eAAO,MAAM,qBAAqB,aAjKa,4BAA4B,KAAQ,MAiKzB,CAAA;AAC1D,oDAAoD;AACpD,eAAO,MAAM,wBAAwB,aAnKU,4BAA4B,KAAQ,MAmKtB,CAAA;AAE7D,eAAe,qBAAqB,CAAA"}
package/dist/index.js CHANGED
@@ -98,6 +98,8 @@ export const getAvailableThemePresets = ()=>{
98
98
  return defaultThemePresets;
99
99
  };
100
100
  export { defaultThemePresets } from './presets.js';
101
+ export { extendedThemePresets, extendedThemeToCSSVariables } from './extended-presets.js';
102
+ export { applyExtendedTheme, generateExtendedThemeCSS, resetExtendedTheme, getExtendedThemeTokens, createUseExtendedTheme, getTailwindVarReferences } from './utils/extendedThemeHelpers.js';
101
103
  export { DEFAULT_THEME_CONFIGURATION, resolveThemeConfiguration } from './utils/resolveThemeConfiguration.js';
102
104
  export { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js';
103
105
  export { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js';
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 type { ResolvedThemeConfiguration } from './utils/resolveThemeConfiguration.js'\nexport { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js'\nexport { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js'\nexport { getThemeHtmlAttributes } from './utils/themeHtmlAttributes.js'\n\nexport type { Mode, ThemeDefaults } from './providers/Theme/types.js'\nexport { ThemeProvider } from './providers/Theme/index.js'\n\nexport const ThemeManagementPlugin = themeManagementPlugin\n/** @deprecated use {@link themeManagementPlugin} */\nexport const themeConfigurationPlugin = themeManagementPlugin\n\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","getThemeHtmlAttributes","ThemeProvider","ThemeManagementPlugin","themeConfigurationPlugin"],"mappings":"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"}
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 { \n extendedThemePresets,\n extendedThemeToCSSVariables,\n} from './extended-presets.js'\nexport type { ExtendedThemePreset, ShadcnColorTokens } from './extended-presets.js'\nexport {\n applyExtendedTheme,\n generateExtendedThemeCSS,\n resetExtendedTheme,\n getExtendedThemeTokens,\n createUseExtendedTheme,\n getTailwindVarReferences,\n} from './utils/extendedThemeHelpers.js'\nexport type { ThemeManagementPluginOptions, FetchThemeConfigurationOptions } from './types.js'\nexport {\n DEFAULT_THEME_CONFIGURATION,\n resolveThemeConfiguration,\n} from './utils/resolveThemeConfiguration.js'\nexport type { ResolvedThemeConfiguration } from './utils/resolveThemeConfiguration.js'\nexport { generateThemeColorsCss, hexToHsl } from './utils/themeColors.js'\nexport { generateThemeCSS, getThemeStyles } from './utils/themeUtils.js'\nexport { getThemeHtmlAttributes } from './utils/themeHtmlAttributes.js'\n\nexport type { Mode, ThemeDefaults } from './providers/Theme/types.js'\nexport { ThemeProvider } from './providers/Theme/index.js'\n\nexport const ThemeManagementPlugin = themeManagementPlugin\n/** @deprecated use {@link themeManagementPlugin} */\nexport const themeConfigurationPlugin = themeManagementPlugin\n\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","extendedThemePresets","extendedThemeToCSSVariables","applyExtendedTheme","generateExtendedThemeCSS","resetExtendedTheme","getExtendedThemeTokens","createUseExtendedTheme","getTailwindVarReferences","DEFAULT_THEME_CONFIGURATION","resolveThemeConfiguration","generateThemeColorsCss","hexToHsl","generateThemeCSS","getThemeStyles","getThemeHtmlAttributes","ThemeProvider","ThemeManagementPlugin","themeConfigurationPlugin"],"mappings":"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"}
package/dist/utils/extendedThemeHelpers.d.ts ADDED
@@ -0,0 +1,119 @@
1
+ import type { ExtendedThemePreset, ShadcnColorTokens } from '../extended-presets.js';
2
+ /**
3
+ * Apply an extended theme client-side by setting CSS variables on document.documentElement
4
+ * Works exactly like silicondeck/shadcn-dashboard-landing-template's useThemeManager
5
+ *
6
+ * @example
7
+ * ```tsx
8
+ * import { extendedThemePresets, applyExtendedTheme } from '@kilivi/payloadcms-theme-management'
9
+ *
10
+ * // In a client component or hook
11
+ * function useExtendedTheme() {
12
+ * const isDark = document.documentElement.classList.contains('dark')
13
+ *
14
+ * useEffect(() => {
15
+ * applyExtendedTheme(extendedThemePresets['cool-extended'], isDark ? 'dark' : 'light')
16
+ * }, [isDark])
17
+ * }
18
+ * ```
19
+ */
20
+ export declare function applyExtendedTheme(theme: ExtendedThemePreset, mode?: 'light' | 'dark'): void;
21
+ /**
22
+ * Generate CSS content for globals.css
23
+ * Add this to your globals.css file to define base theme variables
24
+ *
25
+ * @example
26
+ * ```tsx
27
+ * import { extendedThemePresets, generateExtendedThemeCSS } from '@kilivi/payloadcms-theme-management'
28
+ *
29
+ * // Generate CSS for cool-extended theme
30
+ * const css = generateExtendedThemeCSS(extendedThemePresets['cool-extended'])
31
+ *
32
+ * // Copy this to your globals.css:
33
+ * // :root {
34
+ * // --background: oklch(...);
35
+ * // ...
36
+ * // }
37
+ * // .dark {
38
+ * // --background: oklch(...);
39
+ * // ...
40
+ * // }
41
+ * ```
42
+ */
43
+ export declare function generateExtendedThemeCSS(theme: ExtendedThemePreset): string;
44
+ /**
45
+ * Reset all extended theme CSS variables
46
+ * Useful when switching between themes or resetting to defaults
47
+ *
48
+ * @example
49
+ * ```tsx
50
+ * import { resetExtendedTheme } from '@kilivi/payloadcms-theme-management'
51
+ *
52
+ * // Remove all extended theme variables
53
+ * resetExtendedTheme()
54
+ * ```
55
+ */
56
+ export declare function resetExtendedTheme(): void;
57
+ /**
58
+ * Extract specific color tokens from an extended theme
59
+ * Useful when you only need a subset of theme colors
60
+ *
61
+ * @example
62
+ * ```tsx
63
+ * import { extendedThemePresets, getExtendedThemeTokens } from '@kilivi/payloadcms-theme-management'
64
+ *
65
+ * const chartColors = getExtendedThemeTokens(
66
+ * extendedThemePresets['cool-extended'],
67
+ * 'light',
68
+ * ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5']
69
+ * )
70
+ * ```
71
+ */
72
+ export declare function getExtendedThemeTokens<K extends keyof ShadcnColorTokens>(theme: ExtendedThemePreset, mode: 'light' | 'dark', keys: K[]): Pick<ShadcnColorTokens, K>;
73
+ /**
74
+ * Create a React hook for theme management
75
+ * Factory function to create a custom hook tied to your theme system
76
+ *
77
+ * @example
78
+ * ```tsx
79
+ * import { extendedThemePresets, createUseExtendedTheme } from '@kilivi/payloadcms-theme-management'
80
+ *
81
+ * const useExtendedTheme = createUseExtendedTheme(extendedThemePresets)
82
+ *
83
+ * function MyComponent() {
84
+ * const { applyTheme, currentMode } = useExtendedTheme()
85
+ *
86
+ * return (
87
+ * <button onClick={() => applyTheme('neon-extended', 'dark')}>
88
+ * Apply Neon Dark
89
+ * </button>
90
+ * )
91
+ * }
92
+ * ```
93
+ */
94
+ export declare function createUseExtendedTheme(presets: Record<string, ExtendedThemePreset>): () => {
95
+ currentTheme: string;
96
+ currentMode: "light" | "dark";
97
+ applyTheme: (themeKey: string, mode: "light" | "dark") => void;
98
+ resetTheme: typeof resetExtendedTheme;
99
+ };
100
+ /**
101
+ * Get Tailwind CSS color references for extended themes
102
+ * Use this in your tailwind.config.ts to enable semantic color classes
103
+ *
104
+ * @example
105
+ * ```ts
106
+ * // tailwind.config.ts
107
+ * import { getTailwindVarReferences } from '@kilivi/payloadcms-theme-management'
108
+ *
109
+ * export default {
110
+ * theme: {
111
+ * extend: {
112
+ * colors: getTailwindVarReferences()
113
+ * }
114
+ * }
115
+ * }
116
+ * ```
117
+ */
118
+ export declare function getTailwindVarReferences(): any;
119
+ //# sourceMappingURL=extendedThemeHelpers.d.ts.map
package/dist/utils/extendedThemeHelpers.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"extendedThemeHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/extendedThemeHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAGpF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,mBAAmB,EAC1B,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,IAAI,CAaN;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAU3E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAgBzC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,iBAAiB,EACtE,KAAK,EAAE,mBAAmB,EAC1B,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,IAAI,EAAE,CAAC,EAAE,GACR,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAW5B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC;;;2BAK/B,MAAM,QAAQ,OAAO,GAAG,MAAM;;EAmBjF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,IAAI,GAAG,CA2C9C"}
package/dist/utils/extendedThemeHelpers.js ADDED
@@ -0,0 +1,232 @@
1
+ import * as React from 'react';
2
+ /**
3
+ * Apply an extended theme client-side by setting CSS variables on document.documentElement
4
+ * Works exactly like silicondeck/shadcn-dashboard-landing-template's useThemeManager
5
+ *
6
+ * @example
7
+ * ```tsx
8
+ * import { extendedThemePresets, applyExtendedTheme } from '@kilivi/payloadcms-theme-management'
9
+ *
10
+ * // In a client component or hook
11
+ * function useExtendedTheme() {
12
+ * const isDark = document.documentElement.classList.contains('dark')
13
+ *
14
+ * useEffect(() => {
15
+ * applyExtendedTheme(extendedThemePresets['cool-extended'], isDark ? 'dark' : 'light')
16
+ * }, [isDark])
17
+ * }
18
+ * ```
19
+ */ export function applyExtendedTheme(theme, mode = 'light') {
20
+ if (typeof document === 'undefined') {
21
+ console.warn('applyExtendedTheme can only be called in browser environment');
22
+ return;
23
+ }
24
+ const tokens = theme.styles[mode];
25
+ const root = document.documentElement;
26
+ // Apply CSS variables to document root (same as silicondeck's approach)
27
+ Object.entries(tokens).forEach(([key, value])=>{
28
+ root.style.setProperty(`--${key}`, value);
29
+ });
30
+ }
31
+ /**
32
+ * Generate CSS content for globals.css
33
+ * Add this to your globals.css file to define base theme variables
34
+ *
35
+ * @example
36
+ * ```tsx
37
+ * import { extendedThemePresets, generateExtendedThemeCSS } from '@kilivi/payloadcms-theme-management'
38
+ *
39
+ * // Generate CSS for cool-extended theme
40
+ * const css = generateExtendedThemeCSS(extendedThemePresets['cool-extended'])
41
+ *
42
+ * // Copy this to your globals.css:
43
+ * // :root {
44
+ * // --background: oklch(...);
45
+ * // ...
46
+ * // }
47
+ * // .dark {
48
+ * // --background: oklch(...);
49
+ * // ...
50
+ * // }
51
+ * ```
52
+ */ export function generateExtendedThemeCSS(theme) {
53
+ const lightVars = Object.entries(theme.styles.light).map(([key, value])=>` --${key}: ${value};`).join('\n');
54
+ const darkVars = Object.entries(theme.styles.dark).map(([key, value])=>` --${key}: ${value};`).join('\n');
55
+ return `:root {\n${lightVars}\n}\n\n.dark {\n${darkVars}\n}`;
56
+ }
57
+ /**
58
+ * Reset all extended theme CSS variables
59
+ * Useful when switching between themes or resetting to defaults
60
+ *
61
+ * @example
62
+ * ```tsx
63
+ * import { resetExtendedTheme } from '@kilivi/payloadcms-theme-management'
64
+ *
65
+ * // Remove all extended theme variables
66
+ * resetExtendedTheme()
67
+ * ```
68
+ */ export function resetExtendedTheme() {
69
+ if (typeof document === 'undefined') return;
70
+ const root = document.documentElement;
71
+ const allVars = [
72
+ 'background',
73
+ 'foreground',
74
+ 'card',
75
+ 'card-foreground',
76
+ 'popover',
77
+ 'popover-foreground',
78
+ 'primary',
79
+ 'primary-foreground',
80
+ 'secondary',
81
+ 'secondary-foreground',
82
+ 'muted',
83
+ 'muted-foreground',
84
+ 'accent',
85
+ 'accent-foreground',
86
+ 'destructive',
87
+ 'destructive-foreground',
88
+ 'border',
89
+ 'input',
90
+ 'ring',
91
+ 'chart-1',
92
+ 'chart-2',
93
+ 'chart-3',
94
+ 'chart-4',
95
+ 'chart-5',
96
+ 'radius',
97
+ 'font-sans',
98
+ 'font-mono'
99
+ ];
100
+ allVars.forEach((varName)=>{
101
+ root.style.removeProperty(`--${varName}`);
102
+ });
103
+ }
104
+ /**
105
+ * Extract specific color tokens from an extended theme
106
+ * Useful when you only need a subset of theme colors
107
+ *
108
+ * @example
109
+ * ```tsx
110
+ * import { extendedThemePresets, getExtendedThemeTokens } from '@kilivi/payloadcms-theme-management'
111
+ *
112
+ * const chartColors = getExtendedThemeTokens(
113
+ * extendedThemePresets['cool-extended'],
114
+ * 'light',
115
+ * ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5']
116
+ * )
117
+ * ```
118
+ */ export function getExtendedThemeTokens(theme, mode, keys) {
119
+ const tokens = theme.styles[mode];
120
+ const result = {};
121
+ keys.forEach((key)=>{
122
+ if (tokens[key]) {
123
+ result[key] = tokens[key];
124
+ }
125
+ });
126
+ return result;
127
+ }
128
+ /**
129
+ * Create a React hook for theme management
130
+ * Factory function to create a custom hook tied to your theme system
131
+ *
132
+ * @example
133
+ * ```tsx
134
+ * import { extendedThemePresets, createUseExtendedTheme } from '@kilivi/payloadcms-theme-management'
135
+ *
136
+ * const useExtendedTheme = createUseExtendedTheme(extendedThemePresets)
137
+ *
138
+ * function MyComponent() {
139
+ * const { applyTheme, currentMode } = useExtendedTheme()
140
+ *
141
+ * return (
142
+ * <button onClick={() => applyTheme('neon-extended', 'dark')}>
143
+ * Apply Neon Dark
144
+ * </button>
145
+ * )
146
+ * }
147
+ * ```
148
+ */ export function createUseExtendedTheme(presets) {
149
+ return function useExtendedTheme() {
150
+ const [currentTheme, setCurrentTheme] = React.useState('default');
151
+ const [currentMode, setCurrentMode] = React.useState('light');
152
+ const applyTheme = React.useCallback((themeKey, mode)=>{
153
+ const theme = presets[themeKey];
154
+ if (!theme) {
155
+ console.warn(`Theme "${themeKey}" not found`);
156
+ return;
157
+ }
158
+ applyExtendedTheme(theme, mode);
159
+ setCurrentTheme(themeKey);
160
+ setCurrentMode(mode);
161
+ }, []);
162
+ return {
163
+ currentTheme,
164
+ currentMode,
165
+ applyTheme,
166
+ resetTheme: resetExtendedTheme
167
+ };
168
+ };
169
+ }
170
+ /**
171
+ * Get Tailwind CSS color references for extended themes
172
+ * Use this in your tailwind.config.ts to enable semantic color classes
173
+ *
174
+ * @example
175
+ * ```ts
176
+ * // tailwind.config.ts
177
+ * import { getTailwindVarReferences } from '@kilivi/payloadcms-theme-management'
178
+ *
179
+ * export default {
180
+ * theme: {
181
+ * extend: {
182
+ * colors: getTailwindVarReferences()
183
+ * }
184
+ * }
185
+ * }
186
+ * ```
187
+ */ export function getTailwindVarReferences() {
188
+ return {
189
+ background: 'hsl(var(--background))',
190
+ foreground: 'hsl(var(--foreground))',
191
+ card: {
192
+ DEFAULT: 'hsl(var(--card))',
193
+ foreground: 'hsl(var(--card-foreground))'
194
+ },
195
+ popover: {
196
+ DEFAULT: 'hsl(var(--popover))',
197
+ foreground: 'hsl(var(--popover-foreground))'
198
+ },
199
+ primary: {
200
+ DEFAULT: 'hsl(var(--primary))',
201
+ foreground: 'hsl(var(--primary-foreground))'
202
+ },
203
+ secondary: {
204
+ DEFAULT: 'hsl(var(--secondary))',
205
+ foreground: 'hsl(var(--secondary-foreground))'
206
+ },
207
+ muted: {
208
+ DEFAULT: 'hsl(var(--muted))',
209
+ foreground: 'hsl(var(--muted-foreground))'
210
+ },
211
+ accent: {
212
+ DEFAULT: 'hsl(var(--accent))',
213
+ foreground: 'hsl(var(--accent-foreground))'
214
+ },
215
+ destructive: {
216
+ DEFAULT: 'hsl(var(--destructive))',
217
+ foreground: 'hsl(var(--destructive-foreground))'
218
+ },
219
+ border: 'hsl(var(--border))',
220
+ input: 'hsl(var(--input))',
221
+ ring: 'hsl(var(--ring))',
222
+ chart: {
223
+ '1': 'hsl(var(--chart-1))',
224
+ '2': 'hsl(var(--chart-2))',
225
+ '3': 'hsl(var(--chart-3))',
226
+ '4': 'hsl(var(--chart-4))',
227
+ '5': 'hsl(var(--chart-5))'
228
+ }
229
+ };
230
+ }
231
+
232
+ //# sourceMappingURL=extendedThemeHelpers.js.map
package/dist/utils/extendedThemeHelpers.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/utils/extendedThemeHelpers.ts"],"sourcesContent":["import type { ExtendedThemePreset, ShadcnColorTokens } from '../extended-presets.js'\nimport * as React from 'react'\n\n/**\n * Apply an extended theme client-side by setting CSS variables on document.documentElement\n * Works exactly like silicondeck/shadcn-dashboard-landing-template's useThemeManager\n * \n * @example\n * ```tsx\n * import { extendedThemePresets, applyExtendedTheme } from '@kilivi/payloadcms-theme-management'\n * \n * // In a client component or hook\n * function useExtendedTheme() {\n * const isDark = document.documentElement.classList.contains('dark')\n * \n * useEffect(() => {\n * applyExtendedTheme(extendedThemePresets['cool-extended'], isDark ? 'dark' : 'light')\n * }, [isDark])\n * }\n * ```\n */\nexport function applyExtendedTheme(\n theme: ExtendedThemePreset,\n mode: 'light' | 'dark' = 'light'\n): void {\n if (typeof document === 'undefined') {\n console.warn('applyExtendedTheme can only be called in browser environment')\n return\n }\n \n const tokens = theme.styles[mode]\n const root = document.documentElement\n \n // Apply CSS variables to document root (same as silicondeck's approach)\n Object.entries(tokens).forEach(([key, value]) => {\n root.style.setProperty(`--${key}`, value)\n })\n}\n\n/**\n * Generate CSS content for globals.css\n * Add this to your globals.css file to define base theme variables\n * \n * @example\n * ```tsx\n * import { extendedThemePresets, generateExtendedThemeCSS } from '@kilivi/payloadcms-theme-management'\n * \n * // Generate CSS for cool-extended theme\n * const css = generateExtendedThemeCSS(extendedThemePresets['cool-extended'])\n * \n * // Copy this to your globals.css:\n * // :root {\n * // --background: oklch(...);\n * // ...\n * // }\n * // .dark {\n * // --background: oklch(...);\n * // ...\n * // }\n * ```\n */\nexport function generateExtendedThemeCSS(theme: ExtendedThemePreset): string {\n const lightVars = Object.entries(theme.styles.light)\n .map(([key, value]) => ` --${key}: ${value};`)\n .join('\\n')\n\n const darkVars = Object.entries(theme.styles.dark)\n .map(([key, value]) => ` --${key}: ${value};`)\n .join('\\n')\n\n return `:root {\\n${lightVars}\\n}\\n\\n.dark {\\n${darkVars}\\n}`\n}\n\n/**\n * Reset all extended theme CSS variables\n * Useful when switching between themes or resetting to defaults\n * \n * @example\n * ```tsx\n * import { resetExtendedTheme } from '@kilivi/payloadcms-theme-management'\n * \n * // Remove all extended theme variables\n * resetExtendedTheme()\n * ```\n */\nexport function resetExtendedTheme(): void {\n if (typeof document === 'undefined') return\n\n const root = document.documentElement\n const allVars = [\n 'background', 'foreground', 'card', 'card-foreground', 'popover', 'popover-foreground',\n 'primary', 'primary-foreground', 'secondary', 'secondary-foreground',\n 'muted', 'muted-foreground', 'accent', 'accent-foreground',\n 'destructive', 'destructive-foreground', 'border', 'input', 'ring',\n 'chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5',\n 'radius', 'font-sans', 'font-mono'\n ]\n\n allVars.forEach(varName => {\n root.style.removeProperty(`--${varName}`)\n })\n}\n\n/**\n * Extract specific color tokens from an extended theme\n * Useful when you only need a subset of theme colors\n * \n * @example\n * ```tsx\n * import { extendedThemePresets, getExtendedThemeTokens } from '@kilivi/payloadcms-theme-management'\n * \n * const chartColors = getExtendedThemeTokens(\n * extendedThemePresets['cool-extended'],\n * 'light',\n * ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5']\n * )\n * ```\n */\nexport function getExtendedThemeTokens<K extends keyof ShadcnColorTokens>(\n theme: ExtendedThemePreset,\n mode: 'light' | 'dark',\n keys: K[]\n): Pick<ShadcnColorTokens, K> {\n const tokens = theme.styles[mode]\n const result = {} as Pick<ShadcnColorTokens, K>\n \n keys.forEach(key => {\n if (tokens[key]) {\n result[key] = tokens[key]\n }\n })\n \n return result\n}\n\n/**\n * Create a React hook for theme management\n * Factory function to create a custom hook tied to your theme system\n * \n * @example\n * ```tsx\n * import { extendedThemePresets, createUseExtendedTheme } from '@kilivi/payloadcms-theme-management'\n * \n * const useExtendedTheme = createUseExtendedTheme(extendedThemePresets)\n * \n * function MyComponent() {\n * const { applyTheme, currentMode } = useExtendedTheme()\n * \n * return (\n * <button onClick={() => applyTheme('neon-extended', 'dark')}>\n * Apply Neon Dark\n * </button>\n * )\n * }\n * ```\n */\nexport function createUseExtendedTheme(presets: Record<string, ExtendedThemePreset>) {\n return function useExtendedTheme() {\n const [currentTheme, setCurrentTheme] = React.useState<string>('default')\n const [currentMode, setCurrentMode] = React.useState<'light' | 'dark'>('light')\n\n const applyTheme = React.useCallback((themeKey: string, mode: 'light' | 'dark') => {\n const theme = presets[themeKey]\n if (!theme) {\n console.warn(`Theme \"${themeKey}\" not found`)\n return\n }\n\n applyExtendedTheme(theme, mode)\n setCurrentTheme(themeKey)\n setCurrentMode(mode)\n }, [])\n\n return {\n currentTheme,\n currentMode,\n applyTheme,\n resetTheme: resetExtendedTheme\n }\n }\n}\n\n/**\n * Get Tailwind CSS color references for extended themes\n * Use this in your tailwind.config.ts to enable semantic color classes\n * \n * @example\n * ```ts\n * // tailwind.config.ts\n * import { getTailwindVarReferences } from '@kilivi/payloadcms-theme-management'\n * \n * export default {\n * theme: {\n * extend: {\n * colors: getTailwindVarReferences()\n * }\n * }\n * }\n * ```\n */\nexport function getTailwindVarReferences(): any {\n return {\n background: 'hsl(var(--background))',\n foreground: 'hsl(var(--foreground))',\n card: {\n DEFAULT: 'hsl(var(--card))',\n foreground: 'hsl(var(--card-foreground))',\n },\n popover: {\n DEFAULT: 'hsl(var(--popover))',\n foreground: 'hsl(var(--popover-foreground))',\n },\n primary: {\n DEFAULT: 'hsl(var(--primary))',\n foreground: 'hsl(var(--primary-foreground))',\n },\n secondary: {\n DEFAULT: 'hsl(var(--secondary))',\n foreground: 'hsl(var(--secondary-foreground))',\n },\n muted: {\n DEFAULT: 'hsl(var(--muted))',\n foreground: 'hsl(var(--muted-foreground))',\n },\n accent: {\n DEFAULT: 'hsl(var(--accent))',\n foreground: 'hsl(var(--accent-foreground))',\n },\n destructive: {\n DEFAULT: 'hsl(var(--destructive))',\n foreground: 'hsl(var(--destructive-foreground))',\n },\n border: 'hsl(var(--border))',\n input: 'hsl(var(--input))',\n ring: 'hsl(var(--ring))',\n chart: {\n '1': 'hsl(var(--chart-1))',\n '2': 'hsl(var(--chart-2))',\n '3': 'hsl(var(--chart-3))',\n '4': 'hsl(var(--chart-4))',\n '5': 'hsl(var(--chart-5))',\n },\n }\n}\n"],"names":["React","applyExtendedTheme","theme","mode","document","console","warn","tokens","styles","root","documentElement","Object","entries","forEach","key","value","style","setProperty","generateExtendedThemeCSS","lightVars","light","map","join","darkVars","dark","resetExtendedTheme","allVars","varName","removeProperty","getExtendedThemeTokens","keys","result","createUseExtendedTheme","presets","useExtendedTheme","currentTheme","setCurrentTheme","useState","currentMode","setCurrentMode","applyTheme","useCallback","themeKey","resetTheme","getTailwindVarReferences","background","foreground","card","DEFAULT","popover","primary","secondary","muted","accent","destructive","border","input","ring","chart"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kilivi/payloadcms-theme-management",
3
- "version": "0.1.15",
3
+ "version": "0.1.16",
4
4
  "description": "Theme configuration plugin for Payload CMS v3",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",