@fakhrirafiki/theme-engine 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs ADDED
@@ -0,0 +1,4653 @@
1
+ // src/providers/UnifiedThemeProvider.tsx
2
+ import { createContext, useContext, useEffect, useState, useCallback, useMemo } from "react";
3
+
4
+ // src/types/presets.ts
5
+ var CSS_PROPERTY_CATEGORIES = {
6
+ colors: [
7
+ "background",
8
+ "foreground",
9
+ "card",
10
+ "card-foreground",
11
+ "popover",
12
+ "popover-foreground",
13
+ "primary",
14
+ "primary-foreground",
15
+ "secondary",
16
+ "secondary-foreground",
17
+ "muted",
18
+ "muted-foreground",
19
+ "accent",
20
+ "accent-foreground",
21
+ "destructive",
22
+ "destructive-foreground",
23
+ "border",
24
+ "input",
25
+ "ring",
26
+ "chart-1",
27
+ "chart-2",
28
+ "chart-3",
29
+ "chart-4",
30
+ "chart-5",
31
+ "sidebar",
32
+ "sidebar-foreground",
33
+ "sidebar-primary",
34
+ "sidebar-primary-foreground",
35
+ "sidebar-accent",
36
+ "sidebar-accent-foreground",
37
+ "sidebar-border",
38
+ "sidebar-ring"
39
+ ],
40
+ typography: [
41
+ "font-sans",
42
+ "font-serif",
43
+ "font-mono"
44
+ ],
45
+ layout: [
46
+ "radius"
47
+ ],
48
+ shadows: [
49
+ "shadow-color",
50
+ "shadow-opacity",
51
+ "shadow-blur",
52
+ "shadow-spread",
53
+ "shadow-offset-x",
54
+ "shadow-offset-y"
55
+ ],
56
+ spacing: [
57
+ "letter-spacing",
58
+ "spacing"
59
+ ]
60
+ };
61
+ var ALL_CSS_PROPERTIES = [
62
+ ...CSS_PROPERTY_CATEGORIES.colors,
63
+ ...CSS_PROPERTY_CATEGORIES.typography,
64
+ ...CSS_PROPERTY_CATEGORIES.layout,
65
+ ...CSS_PROPERTY_CATEGORIES.shadows,
66
+ ...CSS_PROPERTY_CATEGORIES.spacing
67
+ ];
68
+
69
+ // src/data/tweakcn-presets.ts
70
+ var tweakcnPresets = {
71
+ "modern-minimal": {
72
+ label: "Modern Minimal",
73
+ styles: {
74
+ light: {
75
+ background: "#ffffff",
76
+ foreground: "#333333",
77
+ card: "#ffffff",
78
+ "card-foreground": "#333333",
79
+ popover: "#ffffff",
80
+ "popover-foreground": "#333333",
81
+ primary: "#3b82f6",
82
+ "primary-foreground": "#ffffff",
83
+ secondary: "#f3f4f6",
84
+ "secondary-foreground": "#4b5563",
85
+ muted: "#f9fafb",
86
+ "muted-foreground": "#6b7280",
87
+ accent: "#e0f2fe",
88
+ "accent-foreground": "#1e3a8a",
89
+ destructive: "#ef4444",
90
+ "destructive-foreground": "#ffffff",
91
+ border: "#e5e7eb",
92
+ input: "#e5e7eb",
93
+ ring: "#3b82f6",
94
+ "chart-1": "#3b82f6",
95
+ "chart-2": "#2563eb",
96
+ "chart-3": "#1d4ed8",
97
+ "chart-4": "#1e40af",
98
+ "chart-5": "#1e3a8a",
99
+ radius: "0.375rem",
100
+ sidebar: "#f9fafb",
101
+ "sidebar-foreground": "#333333",
102
+ "sidebar-primary": "#3b82f6",
103
+ "sidebar-primary-foreground": "#ffffff",
104
+ "sidebar-accent": "#e0f2fe",
105
+ "sidebar-accent-foreground": "#1e3a8a",
106
+ "sidebar-border": "#e5e7eb",
107
+ "sidebar-ring": "#3b82f6",
108
+ "font-sans": "Inter, sans-serif",
109
+ "font-serif": "Source Serif 4, serif",
110
+ "font-mono": "JetBrains Mono, monospace"
111
+ },
112
+ dark: {
113
+ background: "#171717",
114
+ foreground: "#e5e5e5",
115
+ card: "#262626",
116
+ "card-foreground": "#e5e5e5",
117
+ popover: "#262626",
118
+ "popover-foreground": "#e5e5e5",
119
+ primary: "#3b82f6",
120
+ "primary-foreground": "#ffffff",
121
+ secondary: "#262626",
122
+ "secondary-foreground": "#e5e5e5",
123
+ muted: "#262626",
124
+ "muted-foreground": "#a3a3a3",
125
+ accent: "#1e3a8a",
126
+ "accent-foreground": "#bfdbfe",
127
+ destructive: "#ef4444",
128
+ "destructive-foreground": "#ffffff",
129
+ border: "#404040",
130
+ input: "#404040",
131
+ ring: "#3b82f6",
132
+ "chart-1": "#60a5fa",
133
+ "chart-2": "#3b82f6",
134
+ "chart-3": "#2563eb",
135
+ "chart-4": "#1d4ed8",
136
+ "chart-5": "#1e40af",
137
+ radius: "0.375rem",
138
+ sidebar: "#171717",
139
+ "sidebar-foreground": "#e5e5e5",
140
+ "sidebar-primary": "#3b82f6",
141
+ "sidebar-primary-foreground": "#ffffff",
142
+ "sidebar-accent": "#1e3a8a",
143
+ "sidebar-accent-foreground": "#bfdbfe",
144
+ "sidebar-border": "#404040",
145
+ "sidebar-ring": "#3b82f6"
146
+ }
147
+ }
148
+ },
149
+ "violet-bloom": {
150
+ label: "Violet Bloom",
151
+ createdAt: "2025-06-26",
152
+ styles: {
153
+ light: {
154
+ background: "#fdfdfd",
155
+ foreground: "#000000",
156
+ card: "#fdfdfd",
157
+ "card-foreground": "#000000",
158
+ popover: "#fcfcfc",
159
+ "popover-foreground": "#000000",
160
+ primary: "#7033ff",
161
+ "primary-foreground": "#ffffff",
162
+ secondary: "#edf0f4",
163
+ "secondary-foreground": "#080808",
164
+ muted: "#f5f5f5",
165
+ "muted-foreground": "#525252",
166
+ accent: "#e2ebff",
167
+ "accent-foreground": "#1e69dc",
168
+ destructive: "#e54b4f",
169
+ "destructive-foreground": "#ffffff",
170
+ border: "#e7e7ee",
171
+ input: "#ebebeb",
172
+ ring: "#000000",
173
+ "chart-1": "#4ac885",
174
+ "chart-2": "#7033ff",
175
+ "chart-3": "#fd822b",
176
+ "chart-4": "#3276e4",
177
+ "chart-5": "#747474",
178
+ sidebar: "#f5f8fb",
179
+ "sidebar-foreground": "#000000",
180
+ "sidebar-primary": "#000000",
181
+ "sidebar-primary-foreground": "#ffffff",
182
+ "sidebar-accent": "#ebebeb",
183
+ "sidebar-accent-foreground": "#000000",
184
+ "sidebar-border": "#ebebeb",
185
+ "sidebar-ring": "#000000",
186
+ "font-sans": "Plus Jakarta Sans, sans-serif",
187
+ "font-serif": "Lora, serif",
188
+ "font-mono": "IBM Plex Mono, monospace",
189
+ radius: "1.4rem",
190
+ "shadow-color": "hsl(0 0% 0%)",
191
+ "shadow-opacity": "0.16",
192
+ "shadow-blur": "3px",
193
+ "shadow-spread": "0px",
194
+ "shadow-offset-x": "0px",
195
+ "shadow-offset-y": "2px",
196
+ "letter-spacing": "-0.025em",
197
+ spacing: "0.27rem"
198
+ },
199
+ dark: {
200
+ background: "#1a1b1e",
201
+ foreground: "#f0f0f0",
202
+ card: "#222327",
203
+ "card-foreground": "#f0f0f0",
204
+ popover: "#222327",
205
+ "popover-foreground": "#f0f0f0",
206
+ primary: "#8c5cff",
207
+ "primary-foreground": "#ffffff",
208
+ secondary: "#2a2c33",
209
+ "secondary-foreground": "#f0f0f0",
210
+ muted: "#2a2c33",
211
+ "muted-foreground": "#a0a0a0",
212
+ accent: "#1e293b",
213
+ "accent-foreground": "#79c0ff",
214
+ destructive: "#f87171",
215
+ "destructive-foreground": "#ffffff",
216
+ border: "#33353a",
217
+ input: "#33353a",
218
+ ring: "#8c5cff",
219
+ "chart-1": "#4ade80",
220
+ "chart-2": "#8c5cff",
221
+ "chart-3": "#fca5a5",
222
+ "chart-4": "#5993f4",
223
+ "chart-5": "#a0a0a0",
224
+ sidebar: "#161618",
225
+ "sidebar-foreground": "#f0f0f0",
226
+ "sidebar-primary": "#8c5cff",
227
+ "sidebar-primary-foreground": "#ffffff",
228
+ "sidebar-accent": "#2a2c33",
229
+ "sidebar-accent-foreground": "#8c5cff",
230
+ "sidebar-border": "#33353a",
231
+ "sidebar-ring": "#8c5cff",
232
+ "font-sans": "Plus Jakarta Sans, sans-serif",
233
+ "font-serif": "Lora, serif",
234
+ "font-mono": "IBM Plex Mono, monospace",
235
+ radius: "1.4rem",
236
+ "shadow-color": "hsl(0 0% 0%)",
237
+ "shadow-opacity": "0.16",
238
+ "shadow-blur": "3px",
239
+ "shadow-spread": "0px",
240
+ "shadow-offset-x": "0px",
241
+ "shadow-offset-y": "2px",
242
+ "letter-spacing": "-0.025em",
243
+ spacing: "0.27rem"
244
+ }
245
+ }
246
+ },
247
+ "t3-chat": {
248
+ label: "T3 Chat",
249
+ createdAt: "2025-04-19",
250
+ styles: {
251
+ light: {
252
+ background: "#faf5fa",
253
+ foreground: "#501854",
254
+ card: "#faf5fa",
255
+ "card-foreground": "#501854",
256
+ popover: "#ffffff",
257
+ "popover-foreground": "#501854",
258
+ primary: "#a84370",
259
+ "primary-foreground": "#ffffff",
260
+ secondary: "#f1c4e6",
261
+ "secondary-foreground": "#77347c",
262
+ muted: "#f6e5f3",
263
+ "muted-foreground": "#834588",
264
+ accent: "#f1c4e6",
265
+ "accent-foreground": "#77347c",
266
+ destructive: "#ab4347",
267
+ "destructive-foreground": "#ffffff",
268
+ border: "#efbdeb",
269
+ input: "#e7c1dc",
270
+ ring: "#db2777",
271
+ "chart-1": "#d926a2",
272
+ "chart-2": "#6c12b9",
273
+ "chart-3": "#274754",
274
+ "chart-4": "#e8c468",
275
+ "chart-5": "#f4a462",
276
+ sidebar: "#f3e4f6",
277
+ "sidebar-foreground": "#ac1668",
278
+ "sidebar-primary": "#454554",
279
+ "sidebar-primary-foreground": "#faf1f7",
280
+ "sidebar-accent": "#f8f8f7",
281
+ "sidebar-accent-foreground": "#454554",
282
+ "sidebar-border": "#eceae9",
283
+ "sidebar-ring": "#db2777",
284
+ radius: "0.5rem"
285
+ },
286
+ dark: {
287
+ background: "#221d27",
288
+ foreground: "#d2c4de",
289
+ card: "#2c2632",
290
+ "card-foreground": "#dbc5d2",
291
+ popover: "#100a0e",
292
+ "popover-foreground": "#f8f1f5",
293
+ primary: "#a3004c",
294
+ "primary-foreground": "#efc0d8",
295
+ secondary: "#362d3d",
296
+ "secondary-foreground": "#d4c7e1",
297
+ muted: "#28222d",
298
+ "muted-foreground": "#c2b6cf",
299
+ accent: "#463753",
300
+ "accent-foreground": "#f8f1f5",
301
+ destructive: "#301015",
302
+ "destructive-foreground": "#ffffff",
303
+ border: "#3b3237",
304
+ input: "#3e343c",
305
+ ring: "#db2777",
306
+ "chart-1": "#a84370",
307
+ "chart-2": "#934dcb",
308
+ "chart-3": "#e88c30",
309
+ "chart-4": "#af57db",
310
+ "chart-5": "#e23670",
311
+ sidebar: "#181117",
312
+ "sidebar-foreground": "#e0cad6",
313
+ "sidebar-primary": "#1d4ed8",
314
+ "sidebar-primary-foreground": "#ffffff",
315
+ "sidebar-accent": "#261922",
316
+ "sidebar-accent-foreground": "#f4f4f5",
317
+ "sidebar-border": "#000000",
318
+ "sidebar-ring": "#db2777"
319
+ }
320
+ }
321
+ },
322
+ twitter: {
323
+ label: "Twitter",
324
+ createdAt: "2025-04-24",
325
+ styles: {
326
+ light: {
327
+ background: "#ffffff",
328
+ foreground: "#0f1419",
329
+ card: "#f7f8f8",
330
+ "card-foreground": "#0f1419",
331
+ popover: "#ffffff",
332
+ "popover-foreground": "#0f1419",
333
+ primary: "#1e9df1",
334
+ "primary-foreground": "#ffffff",
335
+ secondary: "#0f1419",
336
+ "secondary-foreground": "#ffffff",
337
+ muted: "#E5E5E6",
338
+ "muted-foreground": "#0f1419",
339
+ accent: "#E3ECF6",
340
+ "accent-foreground": "#1e9df1",
341
+ destructive: "#f4212e",
342
+ "destructive-foreground": "#ffffff",
343
+ border: "#e1eaef",
344
+ input: "#f7f9fa",
345
+ ring: "#1da1f2",
346
+ "chart-1": "#1e9df1",
347
+ "chart-2": "#00b87a",
348
+ "chart-3": "#f7b928",
349
+ "chart-4": "#17bf63",
350
+ "chart-5": "#e0245e",
351
+ sidebar: "#f7f8f8",
352
+ "sidebar-foreground": "#0f1419",
353
+ "sidebar-primary": "#1e9df1",
354
+ "sidebar-primary-foreground": "#ffffff",
355
+ "sidebar-accent": "#E3ECF6",
356
+ "sidebar-accent-foreground": "#1e9df1",
357
+ "sidebar-border": "#e1e8ed",
358
+ "sidebar-ring": "#1da1f2",
359
+ "font-sans": "Open Sans, sans-serif",
360
+ "font-serif": "Georgia, serif",
361
+ "font-mono": "Menlo, monospace",
362
+ radius: "1.3rem",
363
+ "shadow-color": "rgba(29,161,242,0.15)",
364
+ "shadow-opacity": "0",
365
+ "shadow-blur": "0px",
366
+ "shadow-spread": "0px",
367
+ "shadow-offset-x": "0px",
368
+ "shadow-offset-y": "2px"
369
+ },
370
+ dark: {
371
+ background: "#000000",
372
+ foreground: "#e7e9ea",
373
+ card: "#17181c",
374
+ "card-foreground": "#d9d9d9",
375
+ popover: "#000000",
376
+ "popover-foreground": "#e7e9ea",
377
+ primary: "#1c9cf0",
378
+ "primary-foreground": "#ffffff",
379
+ secondary: "#f0f3f4",
380
+ "secondary-foreground": "#0f1419",
381
+ muted: "#181818",
382
+ "muted-foreground": "#72767a",
383
+ accent: "#061622",
384
+ "accent-foreground": "#1c9cf0",
385
+ destructive: "#f4212e",
386
+ "destructive-foreground": "#ffffff",
387
+ border: "#242628",
388
+ input: "#22303c",
389
+ ring: "#1da1f2",
390
+ "chart-1": "#1e9df1",
391
+ "chart-2": "#00b87a",
392
+ "chart-3": "#f7b928",
393
+ "chart-4": "#17bf63",
394
+ "chart-5": "#e0245e",
395
+ sidebar: "#17181c",
396
+ "sidebar-foreground": "#d9d9d9",
397
+ "sidebar-primary": "#1da1f2",
398
+ "sidebar-primary-foreground": "#ffffff",
399
+ "sidebar-accent": "#061622",
400
+ "sidebar-accent-foreground": "#1c9cf0",
401
+ "sidebar-border": "#38444d",
402
+ "sidebar-ring": "#1da1f2",
403
+ "shadow-color": "rgba(29,161,242,0.25)"
404
+ }
405
+ }
406
+ },
407
+ "mocha-mousse": {
408
+ label: "Mocha Mousse",
409
+ createdAt: "2025-04-24",
410
+ styles: {
411
+ light: {
412
+ background: "#F1F0E5",
413
+ foreground: "#56453F",
414
+ card: "#F1F0E5",
415
+ "card-foreground": "#56453F",
416
+ popover: "#FFFFFF",
417
+ "popover-foreground": "#56453F",
418
+ primary: "#A37764",
419
+ "primary-foreground": "#FFFFFF",
420
+ secondary: "#BAAB92",
421
+ "secondary-foreground": "#ffffff",
422
+ muted: "#E4C7B8",
423
+ "muted-foreground": "#8A655A",
424
+ accent: "#E4C7B8",
425
+ "accent-foreground": "#56453F",
426
+ destructive: "#1f1a17",
427
+ "destructive-foreground": "#FFFFFF",
428
+ border: "#BAAB92",
429
+ input: "#BAAB92",
430
+ ring: "#A37764",
431
+ "chart-1": "#A37764",
432
+ "chart-2": "#8A655A",
433
+ "chart-3": "#C39E88",
434
+ "chart-4": "#BAAB92",
435
+ "chart-5": "#A28777",
436
+ sidebar: "#ebd6cb",
437
+ "sidebar-foreground": "#56453F",
438
+ "sidebar-primary": "#A37764",
439
+ "sidebar-primary-foreground": "#FFFFFF",
440
+ "sidebar-accent": "#C39E88",
441
+ "sidebar-accent-foreground": "#ffffff",
442
+ "sidebar-border": "#A28777",
443
+ "sidebar-ring": "#A37764",
444
+ "font-sans": "DM Sans, sans-serif",
445
+ "font-serif": "Georgia, serif",
446
+ "font-mono": "Menlo, monospace",
447
+ radius: "0.5rem",
448
+ "shadow-color": "hsl(20 18% 51% / 0.4)",
449
+ "shadow-opacity": "0.11",
450
+ "shadow-blur": "0px",
451
+ "shadow-spread": "0px",
452
+ "shadow-offset-x": "2px",
453
+ "shadow-offset-y": "2px"
454
+ },
455
+ dark: {
456
+ background: "#2d2521",
457
+ foreground: "#F1F0E5",
458
+ card: "#3c332e",
459
+ "card-foreground": "#F1F0E5",
460
+ popover: "#3c332e",
461
+ "popover-foreground": "#F1F0E5",
462
+ primary: "#C39E88",
463
+ "primary-foreground": "#2d2521",
464
+ secondary: "#8A655A",
465
+ "secondary-foreground": "#F1F0E5",
466
+ muted: "#56453F",
467
+ "muted-foreground": "#c5aa9b",
468
+ accent: "#BAAB92",
469
+ "accent-foreground": "#2d2521",
470
+ destructive: "#E57373",
471
+ "destructive-foreground": "#2d2521",
472
+ border: "#56453F",
473
+ input: "#56453F",
474
+ ring: "#C39E88",
475
+ "chart-1": "#C39E88",
476
+ "chart-2": "#BAAB92",
477
+ "chart-3": "#A37764",
478
+ "chart-4": "#8A655A",
479
+ "chart-5": "#A28777",
480
+ sidebar: "#1f1a17",
481
+ "sidebar-foreground": "#F1F0E5",
482
+ "sidebar-primary": "#C39E88",
483
+ "sidebar-primary-foreground": "#1f1a17",
484
+ "sidebar-accent": "#BAAB92",
485
+ "sidebar-accent-foreground": "#1f1a17",
486
+ "sidebar-border": "#56453F",
487
+ "sidebar-ring": "#C39E88",
488
+ "shadow-color": "hsl(20 18% 30% / 0.5)"
489
+ }
490
+ }
491
+ },
492
+ bubblegum: {
493
+ label: "Bubblegum",
494
+ createdAt: "2025-04-18",
495
+ styles: {
496
+ light: {
497
+ background: "#f6e6ee",
498
+ foreground: "#5b5b5b",
499
+ card: "#fdedc9",
500
+ "card-foreground": "#5b5b5b",
501
+ popover: "#ffffff",
502
+ "popover-foreground": "#5b5b5b",
503
+ primary: "#d04f99",
504
+ "primary-foreground": "#ffffff",
505
+ secondary: "#8acfd1",
506
+ "secondary-foreground": "#333333",
507
+ muted: "#b2e1eb",
508
+ "muted-foreground": "#7a7a7a",
509
+ accent: "#fbe2a7",
510
+ "accent-foreground": "#333333",
511
+ destructive: "#f96f70",
512
+ "destructive-foreground": "#ffffff",
513
+ border: "#d04f99",
514
+ input: "#e4e4e4",
515
+ ring: "#e670ab",
516
+ "chart-1": "#e670ab",
517
+ "chart-2": "#84d2e2",
518
+ "chart-3": "#fbe2a7",
519
+ "chart-4": "#f3a0ca",
520
+ "chart-5": "#d7488e",
521
+ sidebar: "#f8d8ea",
522
+ "sidebar-foreground": "#333333",
523
+ "sidebar-primary": "#ec4899",
524
+ "sidebar-primary-foreground": "#ffffff",
525
+ "sidebar-accent": "#f9a8d4",
526
+ "sidebar-accent-foreground": "#333333",
527
+ "sidebar-border": "#f3e8ff",
528
+ "sidebar-ring": "#ec4899",
529
+ "font-sans": "Poppins, sans-serif",
530
+ "font-serif": "Lora, serif",
531
+ "font-mono": "Fira Code, monospace",
532
+ radius: "0.4rem",
533
+ "shadow-color": "hsl(325.78 58.18% 56.86% / 0.5)",
534
+ "shadow-opacity": "1.0",
535
+ "shadow-blur": "0px",
536
+ "shadow-spread": "0px",
537
+ "shadow-offset-x": "3px",
538
+ "shadow-offset-y": "3px"
539
+ },
540
+ dark: {
541
+ background: "#12242e",
542
+ foreground: "#f3e3ea",
543
+ card: "#1c2e38",
544
+ "card-foreground": "#f3e3ea",
545
+ popover: "#1c2e38",
546
+ "popover-foreground": "#f3e3ea",
547
+ primary: "#fbe2a7",
548
+ "primary-foreground": "#12242e",
549
+ secondary: "#e4a2b1",
550
+ "secondary-foreground": "#12242e",
551
+ muted: "#24272b",
552
+ "muted-foreground": "#e4a2b1",
553
+ accent: "#c67b96",
554
+ "accent-foreground": "#f3e3ea",
555
+ destructive: "#e35ea4",
556
+ "destructive-foreground": "#12242e",
557
+ border: "#324859",
558
+ input: "#20333d",
559
+ ring: "#50afb6",
560
+ "chart-1": "#50afb6",
561
+ "chart-2": "#e4a2b1",
562
+ "chart-3": "#c67b96",
563
+ "chart-4": "#175c6c",
564
+ "chart-5": "#24272b",
565
+ sidebar: "#101f28",
566
+ "sidebar-foreground": "#f3f4f6",
567
+ "sidebar-primary": "#ec4899",
568
+ "sidebar-primary-foreground": "#ffffff",
569
+ "sidebar-accent": "#f9a8d4",
570
+ "sidebar-accent-foreground": "#1f2937",
571
+ "sidebar-border": "#374151",
572
+ "sidebar-ring": "#ec4899",
573
+ "font-sans": "Poppins, sans-serif",
574
+ "font-serif": "Lora, serif",
575
+ "font-mono": "Fira Code, monospace",
576
+ "shadow-color": "#324859"
577
+ }
578
+ }
579
+ },
580
+ "amethyst-haze": {
581
+ label: "Amethyst Haze",
582
+ createdAt: "2025-05-08",
583
+ styles: {
584
+ light: {
585
+ background: "#f8f7fa",
586
+ foreground: "#3d3c4f",
587
+ card: "#ffffff",
588
+ "card-foreground": "#3d3c4f",
589
+ popover: "#ffffff",
590
+ "popover-foreground": "#3d3c4f",
591
+ primary: "#8a79ab",
592
+ "primary-foreground": "#f8f7fa",
593
+ secondary: "#dfd9ec",
594
+ "secondary-foreground": "#3d3c4f",
595
+ muted: "#dcd9e3",
596
+ "muted-foreground": "#6b6880",
597
+ accent: "#e6a5b8",
598
+ "accent-foreground": "#4b2e36",
599
+ destructive: "#d95c5c",
600
+ "destructive-foreground": "#f8f7fa",
601
+ border: "#cec9d9",
602
+ input: "#eae7f0",
603
+ ring: "#8a79ab",
604
+ "chart-1": "#8a79ab",
605
+ "chart-2": "#e6a5b8",
606
+ "chart-3": "#77b8a1",
607
+ "chart-4": "#f0c88d",
608
+ "chart-5": "#a0bbe3",
609
+ sidebar: "#f1eff5",
610
+ "sidebar-foreground": "#3d3c4f",
611
+ "sidebar-primary": "#8a79ab",
612
+ "sidebar-primary-foreground": "#f8f7fa",
613
+ "sidebar-accent": "#e6a5b8",
614
+ "sidebar-accent-foreground": "#4b2e36",
615
+ "sidebar-border": "#d7d2e0",
616
+ "sidebar-ring": "#8a79ab",
617
+ "font-sans": "Geist, sans-serif",
618
+ "font-serif": '"Lora", Georgia, serif',
619
+ "font-mono": '"Fira Code", "Courier New", monospace',
620
+ radius: "0.5rem",
621
+ "shadow-color": "hsl(0 0% 0%)",
622
+ "shadow-opacity": "0.06",
623
+ "shadow-blur": "5px",
624
+ "shadow-spread": "1px",
625
+ "shadow-offset-x": "1px",
626
+ "shadow-offset-y": "2px",
627
+ "letter-spacing": "0em",
628
+ spacing: "0.25rem"
629
+ },
630
+ dark: {
631
+ background: "#1a1823",
632
+ foreground: "#e0ddef",
633
+ card: "#232030",
634
+ "card-foreground": "#e0ddef",
635
+ popover: "#232030",
636
+ "popover-foreground": "#e0ddef",
637
+ primary: "#a995c9",
638
+ "primary-foreground": "#1a1823",
639
+ secondary: "#5a5370",
640
+ "secondary-foreground": "#e0ddef",
641
+ muted: "#242031",
642
+ "muted-foreground": "#a09aad",
643
+ accent: "#372e3f",
644
+ "accent-foreground": "#f2b8c6",
645
+ destructive: "#e57373",
646
+ "destructive-foreground": "#1a1823",
647
+ border: "#302c40",
648
+ input: "#2a273a",
649
+ ring: "#a995c9",
650
+ "chart-1": "#a995c9",
651
+ "chart-2": "#f2b8c6",
652
+ "chart-3": "#77b8a1",
653
+ "chart-4": "#f0c88d",
654
+ "chart-5": "#a0bbe3",
655
+ sidebar: "#16141e",
656
+ "sidebar-foreground": "#e0ddef",
657
+ "sidebar-primary": "#a995c9",
658
+ "sidebar-primary-foreground": "#1a1823",
659
+ "sidebar-accent": "#372e3f",
660
+ "sidebar-accent-foreground": "#f2b8c6",
661
+ "sidebar-border": "#2a273a",
662
+ "sidebar-ring": "#a995c9"
663
+ }
664
+ }
665
+ },
666
+ notebook: {
667
+ label: "Notebook",
668
+ createdAt: "2025-05-10",
669
+ styles: {
670
+ light: {
671
+ background: "#f9f9f9",
672
+ foreground: "#3a3a3a",
673
+ card: "#ffffff",
674
+ "card-foreground": "#3a3a3a",
675
+ popover: "#ffffff",
676
+ "popover-foreground": "#3a3a3a",
677
+ primary: "#606060",
678
+ "primary-foreground": "#f0f0f0",
679
+ secondary: "#dedede",
680
+ "secondary-foreground": "#3a3a3a",
681
+ muted: "#e3e3e3",
682
+ "muted-foreground": "#505050",
683
+ accent: "#f3eac8",
684
+ "accent-foreground": "#5d4037",
685
+ destructive: "#c87a7a",
686
+ "destructive-foreground": "#ffffff",
687
+ border: "#747272",
688
+ input: "#ffffff",
689
+ ring: "#a0a0a0",
690
+ "chart-1": "#333333",
691
+ "chart-2": "#555555",
692
+ "chart-3": "#777777",
693
+ "chart-4": "#999999",
694
+ "chart-5": "#bbbbbb",
695
+ sidebar: "#f0f0f0",
696
+ "sidebar-foreground": "#3a3a3a",
697
+ "sidebar-primary": "#606060",
698
+ "sidebar-primary-foreground": "#f0f0f0",
699
+ "sidebar-accent": "#f3eac8",
700
+ "sidebar-accent-foreground": "#5d4037",
701
+ "sidebar-border": "#c0c0c0",
702
+ "sidebar-ring": "#a0a0a0",
703
+ "font-sans": "Architects Daughter, sans-serif",
704
+ "font-serif": '"Times New Roman", Times, serif',
705
+ "font-mono": '"Courier New", Courier, monospace',
706
+ radius: "0.625rem",
707
+ "shadow-color": "#000000",
708
+ "shadow-opacity": "0.03",
709
+ "shadow-blur": "5px",
710
+ "shadow-spread": "0px",
711
+ "shadow-offset-x": "1px",
712
+ "shadow-offset-y": "4px",
713
+ "letter-spacing": "0.5px",
714
+ spacing: "0.25rem"
715
+ },
716
+ dark: {
717
+ background: "#2b2b2b",
718
+ foreground: "#dcdcdc",
719
+ card: "#333333",
720
+ "card-foreground": "#dcdcdc",
721
+ popover: "#333333",
722
+ "popover-foreground": "#dcdcdc",
723
+ primary: "#b0b0b0",
724
+ "primary-foreground": "#2b2b2b",
725
+ secondary: "#5a5a5a",
726
+ "secondary-foreground": "#c0c0c0",
727
+ muted: "#454545",
728
+ "muted-foreground": "#a0a0a0",
729
+ accent: "#e0e0e0",
730
+ "accent-foreground": "#333333",
731
+ destructive: "#d9afaf",
732
+ "destructive-foreground": "#2b2b2b",
733
+ border: "#4f4f4f",
734
+ input: "#333333",
735
+ ring: "#c0c0c0",
736
+ "chart-1": "#efefef",
737
+ "chart-2": "#d0d0d0",
738
+ "chart-3": "#b0b0b0",
739
+ "chart-4": "#909090",
740
+ "chart-5": "#707070",
741
+ sidebar: "#212121",
742
+ "sidebar-foreground": "#dcdcdc",
743
+ "sidebar-primary": "#b0b0b0",
744
+ "sidebar-primary-foreground": "#212121",
745
+ "sidebar-accent": "#e0e0e0",
746
+ "sidebar-accent-foreground": "#333333",
747
+ "sidebar-border": "#4f4f4f",
748
+ "sidebar-ring": "#c0c0c0",
749
+ "font-sans": "Architects Daughter, sans-serif",
750
+ "font-serif": "Georgia, serif",
751
+ "font-mono": '"Fira Code", "Courier New", monospace',
752
+ radius: "0.625rem",
753
+ "shadow-color": "#000000",
754
+ "shadow-opacity": "0.03",
755
+ "shadow-blur": "5px",
756
+ "shadow-spread": "0px",
757
+ "shadow-offset-x": "1px",
758
+ "shadow-offset-y": "4px",
759
+ "letter-spacing": "0.5px",
760
+ spacing: "0.25rem"
761
+ }
762
+ }
763
+ },
764
+ "doom-64": {
765
+ label: "Doom 64",
766
+ createdAt: "2025-04-28",
767
+ styles: {
768
+ light: {
769
+ background: "#cccccc",
770
+ foreground: "#1f1f1f",
771
+ card: "#b0b0b0",
772
+ "card-foreground": "#1f1f1f",
773
+ popover: "#b0b0b0",
774
+ "popover-foreground": "#1f1f1f",
775
+ primary: "#b71c1c",
776
+ "primary-foreground": "#ffffff",
777
+ secondary: "#556b2f",
778
+ "secondary-foreground": "#ffffff",
779
+ muted: "#b8b8b8",
780
+ "muted-foreground": "#4a4a4a",
781
+ accent: "#4682b4",
782
+ "accent-foreground": "#ffffff",
783
+ destructive: "#ff6f00",
784
+ "destructive-foreground": "#000000",
785
+ border: "#505050",
786
+ input: "#505050",
787
+ ring: "#b71c1c",
788
+ "chart-1": "#b71c1c",
789
+ "chart-2": "#556b2f",
790
+ "chart-3": "#4682b4",
791
+ "chart-4": "#ff6f00",
792
+ "chart-5": "#8d6e63",
793
+ sidebar: "#b0b0b0",
794
+ "sidebar-foreground": "#1f1f1f",
795
+ "sidebar-primary": "#b71c1c",
796
+ "sidebar-primary-foreground": "#ffffff",
797
+ "sidebar-accent": "#4682b4",
798
+ "sidebar-accent-foreground": "#ffffff",
799
+ "sidebar-border": "#505050",
800
+ "sidebar-ring": "#b71c1c",
801
+ "font-sans": '"Oxanium", sans-serif',
802
+ "font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
803
+ "font-mono": '"Source Code Pro", monospace',
804
+ radius: "0px",
805
+ "shadow-color": "hsl(0 0% 0%)",
806
+ "shadow-opacity": "0.4",
807
+ "shadow-blur": "4px",
808
+ "shadow-spread": "0px",
809
+ "shadow-offset-x": "0px",
810
+ "shadow-offset-y": "2px",
811
+ "letter-spacing": "0em",
812
+ spacing: "0.25rem"
813
+ },
814
+ dark: {
815
+ background: "#1a1a1a",
816
+ foreground: "#e0e0e0",
817
+ card: "#2a2a2a",
818
+ "card-foreground": "#e0e0e0",
819
+ popover: "#2a2a2a",
820
+ "popover-foreground": "#e0e0e0",
821
+ primary: "#e53935",
822
+ "primary-foreground": "#ffffff",
823
+ secondary: "#689f38",
824
+ "secondary-foreground": "#000000",
825
+ muted: "#252525",
826
+ "muted-foreground": "#a0a0a0",
827
+ accent: "#64b5f6",
828
+ "accent-foreground": "#000000",
829
+ destructive: "#ffa000",
830
+ "destructive-foreground": "#000000",
831
+ border: "#4a4a4a",
832
+ input: "#4a4a4a",
833
+ ring: "#e53935",
834
+ "chart-1": "#e53935",
835
+ "chart-2": "#689f38",
836
+ "chart-3": "#64b5f6",
837
+ "chart-4": "#ffa000",
838
+ "chart-5": "#a1887f",
839
+ sidebar: "#141414",
840
+ "sidebar-foreground": "#e0e0e0",
841
+ "sidebar-primary": "#e53935",
842
+ "sidebar-primary-foreground": "#ffffff",
843
+ "sidebar-accent": "#64b5f6",
844
+ "sidebar-accent-foreground": "#000000",
845
+ "sidebar-border": "#4a4a4a",
846
+ "sidebar-ring": "#e53935",
847
+ "font-sans": '"Oxanium", sans-serif',
848
+ "font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
849
+ "font-mono": '"Source Code Pro", monospace',
850
+ radius: "0px",
851
+ "shadow-color": "hsl(0 0% 0%)",
852
+ "shadow-opacity": "0.6",
853
+ "shadow-blur": "5px",
854
+ "shadow-spread": "0px",
855
+ "shadow-offset-x": "0px",
856
+ "shadow-offset-y": "2px",
857
+ "letter-spacing": "0em",
858
+ spacing: "0.25rem"
859
+ }
860
+ }
861
+ },
862
+ catppuccin: {
863
+ label: "Catppuccin",
864
+ createdAt: "2025-04-18",
865
+ styles: {
866
+ light: {
867
+ background: "#eff1f5",
868
+ foreground: "#4c4f69",
869
+ card: "#ffffff",
870
+ "card-foreground": "#4c4f69",
871
+ popover: "#ccd0da",
872
+ "popover-foreground": "#4c4f69",
873
+ primary: "#8839ef",
874
+ "primary-foreground": "#ffffff",
875
+ secondary: "#ccd0da",
876
+ "secondary-foreground": "#4c4f69",
877
+ muted: "#dce0e8",
878
+ "muted-foreground": "#6c6f85",
879
+ accent: "#04a5e5",
880
+ "accent-foreground": "#ffffff",
881
+ destructive: "#d20f39",
882
+ "destructive-foreground": "#ffffff",
883
+ border: "#bcc0cc",
884
+ input: "#ccd0da",
885
+ ring: "#8839ef",
886
+ "chart-1": "#8839ef",
887
+ "chart-2": "#04a5e5",
888
+ "chart-3": "#40a02b",
889
+ "chart-4": "#fe640b",
890
+ "chart-5": "#dc8a78",
891
+ sidebar: "#e6e9ef",
892
+ "sidebar-foreground": "#4c4f69",
893
+ "sidebar-primary": "#8839ef",
894
+ "sidebar-primary-foreground": "#ffffff",
895
+ "sidebar-accent": "#04a5e5",
896
+ "sidebar-accent-foreground": "#ffffff",
897
+ "sidebar-border": "#bcc0cc",
898
+ "sidebar-ring": "#8839ef",
899
+ "font-sans": "Montserrat, sans-serif",
900
+ "font-serif": "Georgia, serif",
901
+ "font-mono": "Fira Code, monospace",
902
+ radius: "0.35rem",
903
+ "shadow-color": "hsl(240 30% 25%)",
904
+ "shadow-opacity": "0.12",
905
+ "shadow-blur": "6px",
906
+ "shadow-spread": "0px",
907
+ "shadow-offset-x": "0px",
908
+ "shadow-offset-y": "4px"
909
+ },
910
+ dark: {
911
+ background: "#181825",
912
+ foreground: "#cdd6f4",
913
+ card: "#1e1e2e",
914
+ "card-foreground": "#cdd6f4",
915
+ popover: "#45475a",
916
+ "popover-foreground": "#cdd6f4",
917
+ primary: "#cba6f7",
918
+ "primary-foreground": "#1e1e2e",
919
+ secondary: "#585b70",
920
+ "secondary-foreground": "#cdd6f4",
921
+ muted: "#292c3c",
922
+ "muted-foreground": "#a6adc8",
923
+ accent: "#89dceb",
924
+ "accent-foreground": "#1e1e2e",
925
+ destructive: "#f38ba8",
926
+ "destructive-foreground": "#1e1e2e",
927
+ border: "#313244",
928
+ input: "#313244",
929
+ ring: "#cba6f7",
930
+ "chart-1": "#cba6f7",
931
+ "chart-2": "#89dceb",
932
+ "chart-3": "#a6e3a1",
933
+ "chart-4": "#fab387",
934
+ "chart-5": "#f5e0dc",
935
+ sidebar: "#11111b",
936
+ "sidebar-foreground": "#cdd6f4",
937
+ "sidebar-primary": "#cba6f7",
938
+ "sidebar-primary-foreground": "#1e1e2e",
939
+ "sidebar-accent": "#89dceb",
940
+ "sidebar-accent-foreground": "#1e1e2e",
941
+ "sidebar-border": "#45475a",
942
+ "sidebar-ring": "#cba6f7"
943
+ }
944
+ }
945
+ },
946
+ graphite: {
947
+ label: "Graphite",
948
+ createdAt: "2025-04-17",
949
+ styles: {
950
+ light: {
951
+ background: "#f0f0f0",
952
+ foreground: "#333333",
953
+ card: "#f5f5f5",
954
+ "card-foreground": "#333333",
955
+ popover: "#f5f5f5",
956
+ "popover-foreground": "#333333",
957
+ primary: "#606060",
958
+ "primary-foreground": "#ffffff",
959
+ secondary: "#e0e0e0",
960
+ "secondary-foreground": "#333333",
961
+ muted: "#d9d9d9",
962
+ "muted-foreground": "#666666",
963
+ accent: "#c0c0c0",
964
+ "accent-foreground": "#333333",
965
+ destructive: "#cc3333",
966
+ "destructive-foreground": "#ffffff",
967
+ border: "#d0d0d0",
968
+ input: "#e0e0e0",
969
+ ring: "#606060",
970
+ "chart-1": "#606060",
971
+ "chart-2": "#476666",
972
+ "chart-3": "#909090",
973
+ "chart-4": "#a8a8a8",
974
+ "chart-5": "#c0c0c0",
975
+ sidebar: "#eaeaea",
976
+ "sidebar-foreground": "#333333",
977
+ "sidebar-primary": "#606060",
978
+ "sidebar-primary-foreground": "#ffffff",
979
+ "sidebar-accent": "#c0c0c0",
980
+ "sidebar-accent-foreground": "#333333",
981
+ "sidebar-border": "#d0d0d0",
982
+ "sidebar-ring": "#606060",
983
+ "font-sans": "Montserrat, sans-serif",
984
+ "font-serif": "Georgia, serif",
985
+ "font-mono": "Fira Code, monospace",
986
+ radius: "0.35rem",
987
+ "shadow-color": "hsl(0 0% 20% / 0.1)",
988
+ "shadow-opacity": "0.15",
989
+ "shadow-blur": "0px",
990
+ "shadow-spread": "0px",
991
+ "shadow-offset-x": "0px",
992
+ "shadow-offset-y": "2px"
993
+ },
994
+ dark: {
995
+ background: "#1a1a1a",
996
+ foreground: "#d9d9d9",
997
+ card: "#202020",
998
+ "card-foreground": "#d9d9d9",
999
+ popover: "#202020",
1000
+ "popover-foreground": "#d9d9d9",
1001
+ primary: "#a0a0a0",
1002
+ "primary-foreground": "#1a1a1a",
1003
+ secondary: "#303030",
1004
+ "secondary-foreground": "#d9d9d9",
1005
+ muted: "#2a2a2a",
1006
+ "muted-foreground": "#808080",
1007
+ accent: "#404040",
1008
+ "accent-foreground": "#d9d9d9",
1009
+ destructive: "#e06666",
1010
+ "destructive-foreground": "#ffffff",
1011
+ border: "#353535",
1012
+ input: "#303030",
1013
+ ring: "#a0a0a0",
1014
+ "chart-1": "#a0a0a0",
1015
+ "chart-2": "#7e9ca0",
1016
+ "chart-3": "#707070",
1017
+ "chart-4": "#585858",
1018
+ "chart-5": "#404040",
1019
+ sidebar: "#1f1f1f",
1020
+ "sidebar-foreground": "#d9d9d9",
1021
+ "sidebar-primary": "#a0a0a0",
1022
+ "sidebar-primary-foreground": "#1a1a1a",
1023
+ "sidebar-accent": "#404040",
1024
+ "sidebar-accent-foreground": "#d9d9d9",
1025
+ "sidebar-border": "#353535",
1026
+ "sidebar-ring": "#a0a0a0",
1027
+ "font-sans": "Inter, sans-serif",
1028
+ "font-serif": "Georgia, serif",
1029
+ "font-mono": "Fira Code, monospace"
1030
+ }
1031
+ }
1032
+ },
1033
+ perpetuity: {
1034
+ label: "Perpetuity",
1035
+ createdAt: "2025-04-01",
1036
+ styles: {
1037
+ light: {
1038
+ background: "#e8f0f0",
1039
+ foreground: "#0a4a55",
1040
+ card: "#f2f7f7",
1041
+ "card-foreground": "#0a4a55",
1042
+ popover: "#f2f7f7",
1043
+ "popover-foreground": "#0a4a55",
1044
+ primary: "#06858e",
1045
+ "primary-foreground": "#ffffff",
1046
+ secondary: "#d9eaea",
1047
+ "secondary-foreground": "#0a4a55",
1048
+ muted: "#e0eaea",
1049
+ "muted-foreground": "#427a7e",
1050
+ accent: "#c9e5e7",
1051
+ "accent-foreground": "#0a4a55",
1052
+ destructive: "#d13838",
1053
+ "destructive-foreground": "#ffffff",
1054
+ border: "#cde0e2",
1055
+ input: "#d9eaea",
1056
+ ring: "#06858e",
1057
+ "chart-1": "#06858e",
1058
+ "chart-2": "#1e9ea6",
1059
+ "chart-3": "#37b6be",
1060
+ "chart-4": "#5dc7ce",
1061
+ "chart-5": "#8ad8dd",
1062
+ sidebar: "#daebed",
1063
+ "sidebar-foreground": "#0a4a55",
1064
+ "sidebar-primary": "#06858e",
1065
+ "sidebar-primary-foreground": "#ffffff",
1066
+ "sidebar-accent": "#c9e5e7",
1067
+ "sidebar-accent-foreground": "#0a4a55",
1068
+ "sidebar-border": "#cde0e2",
1069
+ "sidebar-ring": "#06858e",
1070
+ "font-sans": "Courier New, monospace",
1071
+ "font-serif": "Courier New, monospace",
1072
+ "font-mono": "Courier New, monospace",
1073
+ radius: "0.125rem",
1074
+ "shadow-color": "hsl(185 70% 30% / 0.15)",
1075
+ "shadow-opacity": "0.15",
1076
+ "shadow-blur": "2px",
1077
+ "shadow-spread": "0px",
1078
+ "shadow-offset-x": "1px",
1079
+ "shadow-offset-y": "1px"
1080
+ },
1081
+ dark: {
1082
+ background: "#0a1a20",
1083
+ foreground: "#4de8e8",
1084
+ card: "#0c2025",
1085
+ "card-foreground": "#4de8e8",
1086
+ popover: "#0c2025",
1087
+ "popover-foreground": "#4de8e8",
1088
+ primary: "#4de8e8",
1089
+ "primary-foreground": "#0a1a20",
1090
+ secondary: "#164955",
1091
+ "secondary-foreground": "#4de8e8",
1092
+ muted: "#0f3039",
1093
+ "muted-foreground": "#36a5a5",
1094
+ accent: "#164955",
1095
+ "accent-foreground": "#4de8e8",
1096
+ destructive: "#e83c3c",
1097
+ "destructive-foreground": "#f2f2f2",
1098
+ border: "#164955",
1099
+ input: "#164955",
1100
+ ring: "#4de8e8",
1101
+ "chart-1": "#4de8e8",
1102
+ "chart-2": "#36a5a5",
1103
+ "chart-3": "#2d8a8a",
1104
+ "chart-4": "#19595e",
1105
+ "chart-5": "#0e383c",
1106
+ sidebar: "#0a1a20",
1107
+ "sidebar-foreground": "#4de8e8",
1108
+ "sidebar-primary": "#4de8e8",
1109
+ "sidebar-primary-foreground": "#0a1a20",
1110
+ "sidebar-accent": "#164955",
1111
+ "sidebar-accent-foreground": "#4de8e8",
1112
+ "sidebar-border": "#164955",
1113
+ "sidebar-ring": "#4de8e8",
1114
+ "font-sans": "Source Code Pro, monospace",
1115
+ "font-serif": "Source Code Pro, monospace",
1116
+ "font-mono": "Source Code Pro, monospace",
1117
+ radius: "0.125rem",
1118
+ "shadow-color": "hsl(180 70% 60% / 0.2)",
1119
+ "shadow-opacity": "0.2",
1120
+ "shadow-blur": "2px",
1121
+ "shadow-spread": "0px",
1122
+ "shadow-offset-x": "1px",
1123
+ "shadow-offset-y": "1px"
1124
+ }
1125
+ }
1126
+ },
1127
+ "kodama-grove": {
1128
+ label: "Kodama Grove",
1129
+ styles: {
1130
+ light: {
1131
+ background: "#e4d7b0",
1132
+ foreground: "#5c4b3e",
1133
+ card: "#e7dbbf",
1134
+ "card-foreground": "#5c4b3e",
1135
+ popover: "#f3ead2",
1136
+ "popover-foreground": "#5c4b3e",
1137
+ primary: "#8d9d4f",
1138
+ "primary-foreground": "#fdfbf6",
1139
+ secondary: "#decea0",
1140
+ "secondary-foreground": "#5c4b3e",
1141
+ muted: "#decea0",
1142
+ "muted-foreground": "#85766a",
1143
+ accent: "#dbc894",
1144
+ "accent-foreground": "#5c4b3e",
1145
+ destructive: "#d98b7e",
1146
+ "destructive-foreground": "#faf8f2",
1147
+ border: "#b19681",
1148
+ input: "#dbc894",
1149
+ ring: "#9db18c",
1150
+ "chart-1": "#9db18c",
1151
+ "chart-2": "#8a9f7b",
1152
+ "chart-3": "#bac9b4",
1153
+ "chart-4": "#71856a",
1154
+ "chart-5": "#5e6e58",
1155
+ sidebar: "#e2d1a2",
1156
+ "sidebar-foreground": "#5c4b3e",
1157
+ "sidebar-primary": "#9db18c",
1158
+ "sidebar-primary-foreground": "#fdfbf6",
1159
+ "sidebar-accent": "#eae5d9",
1160
+ "sidebar-accent-foreground": "#5c4b3e",
1161
+ "sidebar-border": "#e5e0d4",
1162
+ "sidebar-ring": "#9db18c",
1163
+ "font-sans": "Merriweather, serif",
1164
+ "font-serif": "Source Serif 4, serif",
1165
+ "font-mono": "JetBrains Mono, monospace",
1166
+ radius: "0.425rem",
1167
+ "shadow-color": "hsl(88 22% 35% / 0.15)",
1168
+ "shadow-opacity": "0.15",
1169
+ "shadow-blur": "2px",
1170
+ "shadow-spread": "0px",
1171
+ "shadow-offset-x": "3px",
1172
+ "shadow-offset-y": "3px"
1173
+ },
1174
+ dark: {
1175
+ background: "#3a3529",
1176
+ foreground: "#ede4d4",
1177
+ card: "#413c33",
1178
+ "card-foreground": "#ede4d4",
1179
+ popover: "#413c33",
1180
+ "popover-foreground": "#ede4d4",
1181
+ primary: "#8a9f7b",
1182
+ "primary-foreground": "#2a2521",
1183
+ secondary: "#5a5345",
1184
+ "secondary-foreground": "#ede4d4",
1185
+ muted: "#4a4439",
1186
+ "muted-foreground": "#a8a096",
1187
+ accent: "#a18f5c",
1188
+ "accent-foreground": "#2a2521",
1189
+ destructive: "#b5766a",
1190
+ "destructive-foreground": "#f0e9db",
1191
+ border: "#5a5345",
1192
+ input: "#5a5345",
1193
+ ring: "#8a9f7b",
1194
+ "chart-1": "#8a9f7b",
1195
+ "chart-2": "#9db18c",
1196
+ "chart-3": "#71856a",
1197
+ "chart-4": "#a18f5c",
1198
+ "chart-5": "#5e6e58",
1199
+ sidebar: "#3a3529",
1200
+ "sidebar-foreground": "#ede4d4",
1201
+ "sidebar-primary": "#8a9f7b",
1202
+ "sidebar-primary-foreground": "#2a2521",
1203
+ "sidebar-accent": "#a18f5c",
1204
+ "sidebar-accent-foreground": "#2a2521",
1205
+ "sidebar-border": "#5a5345",
1206
+ "sidebar-ring": "#8a9f7b"
1207
+ }
1208
+ }
1209
+ },
1210
+ "cosmic-night": {
1211
+ label: "Cosmic Night",
1212
+ createdAt: "2025-04-04",
1213
+ styles: {
1214
+ light: {
1215
+ background: "#f5f5ff",
1216
+ foreground: "#2a2a4a",
1217
+ card: "#ffffff",
1218
+ "card-foreground": "#2a2a4a",
1219
+ popover: "#ffffff",
1220
+ "popover-foreground": "#2a2a4a",
1221
+ primary: "#6e56cf",
1222
+ "primary-foreground": "#ffffff",
1223
+ secondary: "#e4dfff",
1224
+ "secondary-foreground": "#4a4080",
1225
+ muted: "#f0f0fa",
1226
+ "muted-foreground": "#6c6c8a",
1227
+ accent: "#d8e6ff",
1228
+ "accent-foreground": "#2a2a4a",
1229
+ destructive: "#ff5470",
1230
+ "destructive-foreground": "#ffffff",
1231
+ border: "#e0e0f0",
1232
+ input: "#e0e0f0",
1233
+ ring: "#6e56cf",
1234
+ "chart-1": "#6e56cf",
1235
+ "chart-2": "#9e8cfc",
1236
+ "chart-3": "#5d5fef",
1237
+ "chart-4": "#7c75fa",
1238
+ "chart-5": "#4740b3",
1239
+ radius: "0.5rem",
1240
+ sidebar: "#f0f0fa",
1241
+ "sidebar-foreground": "#2a2a4a",
1242
+ "sidebar-primary": "#6e56cf",
1243
+ "sidebar-primary-foreground": "#ffffff",
1244
+ "sidebar-accent": "#d8e6ff",
1245
+ "sidebar-accent-foreground": "#2a2a4a",
1246
+ "sidebar-border": "#e0e0f0",
1247
+ "sidebar-ring": "#6e56cf",
1248
+ "font-sans": "Inter, sans-serif",
1249
+ "font-serif": "Georgia, serif",
1250
+ "font-mono": "JetBrains Mono, monospace",
1251
+ "shadow-color": "hsl(240 30% 25%)",
1252
+ "shadow-opacity": "0.12",
1253
+ "shadow-blur": "10px",
1254
+ "shadow-spread": "0px",
1255
+ "shadow-offset-x": "0px",
1256
+ "shadow-offset-y": "4px"
1257
+ },
1258
+ dark: {
1259
+ background: "#0f0f1a",
1260
+ foreground: "#e2e2f5",
1261
+ card: "#1a1a2e",
1262
+ "card-foreground": "#e2e2f5",
1263
+ popover: "#1a1a2e",
1264
+ "popover-foreground": "#e2e2f5",
1265
+ primary: "#a48fff",
1266
+ "primary-foreground": "#0f0f1a",
1267
+ secondary: "#2d2b55",
1268
+ "secondary-foreground": "#c4c2ff",
1269
+ muted: "#222244",
1270
+ "muted-foreground": "#a0a0c0",
1271
+ accent: "#303060",
1272
+ "accent-foreground": "#e2e2f5",
1273
+ destructive: "#ff5470",
1274
+ "destructive-foreground": "#ffffff",
1275
+ border: "#303052",
1276
+ input: "#303052",
1277
+ ring: "#a48fff",
1278
+ "chart-1": "#a48fff",
1279
+ "chart-2": "#7986cb",
1280
+ "chart-3": "#64b5f6",
1281
+ "chart-4": "#4db6ac",
1282
+ "chart-5": "#ff79c6",
1283
+ radius: "0.5rem",
1284
+ sidebar: "#1a1a2e",
1285
+ "sidebar-foreground": "#e2e2f5",
1286
+ "sidebar-primary": "#a48fff",
1287
+ "sidebar-primary-foreground": "#0f0f1a",
1288
+ "sidebar-accent": "#303060",
1289
+ "sidebar-accent-foreground": "#e2e2f5",
1290
+ "sidebar-border": "#303052",
1291
+ "sidebar-ring": "#a48fff"
1292
+ }
1293
+ }
1294
+ },
1295
+ tangerine: {
1296
+ label: "Tangerine",
1297
+ createdAt: "2025-04-09",
1298
+ styles: {
1299
+ light: {
1300
+ background: "#e8ebed",
1301
+ foreground: "#333333",
1302
+ card: "#ffffff",
1303
+ "card-foreground": "#333333",
1304
+ popover: "#ffffff",
1305
+ "popover-foreground": "#333333",
1306
+ primary: "#e05d38",
1307
+ "primary-foreground": "#ffffff",
1308
+ secondary: "#f3f4f6",
1309
+ "secondary-foreground": "#4b5563",
1310
+ muted: "#f9fafb",
1311
+ "muted-foreground": "#6b7280",
1312
+ accent: "#d6e4f0",
1313
+ "accent-foreground": "#1e3a8a",
1314
+ destructive: "#ef4444",
1315
+ "destructive-foreground": "#ffffff",
1316
+ border: "#dcdfe2",
1317
+ input: "#f4f5f7",
1318
+ ring: "#e05d38",
1319
+ "chart-1": "#86a7c8",
1320
+ "chart-2": "#eea591",
1321
+ "chart-3": "#5a7ca6",
1322
+ "chart-4": "#466494",
1323
+ "chart-5": "#334c82",
1324
+ sidebar: "#dddfe2",
1325
+ "sidebar-foreground": "#333333",
1326
+ "sidebar-primary": "#e05d38",
1327
+ "sidebar-primary-foreground": "#ffffff",
1328
+ "sidebar-accent": "#d6e4f0",
1329
+ "sidebar-accent-foreground": "#1e3a8a",
1330
+ "sidebar-border": "#e5e7eb",
1331
+ "sidebar-ring": "#e05d38",
1332
+ "font-sans": "Inter, sans-serif",
1333
+ "font-serif": "Source Serif 4, serif",
1334
+ "font-mono": "JetBrains Mono, monospace",
1335
+ radius: "0.75rem",
1336
+ "shadow-color": "hsl(0 0% 0%)",
1337
+ "shadow-opacity": "0.1",
1338
+ "shadow-blur": "3px",
1339
+ "shadow-spread": "0px",
1340
+ "shadow-offset-x": "0px",
1341
+ "shadow-offset-y": "1px"
1342
+ },
1343
+ dark: {
1344
+ background: "#1c2433",
1345
+ foreground: "#e5e5e5",
1346
+ card: "#2a3040",
1347
+ "card-foreground": "#e5e5e5",
1348
+ popover: "#262b38",
1349
+ "popover-foreground": "#e5e5e5",
1350
+ primary: "#e05d38",
1351
+ "primary-foreground": "#ffffff",
1352
+ secondary: "#2a303e",
1353
+ "secondary-foreground": "#e5e5e5",
1354
+ muted: "#2a303e",
1355
+ "muted-foreground": "#a3a3a3",
1356
+ accent: "#2a3656",
1357
+ "accent-foreground": "#bfdbfe",
1358
+ destructive: "#ef4444",
1359
+ "destructive-foreground": "#ffffff",
1360
+ border: "#3d4354",
1361
+ input: "#3d4354",
1362
+ ring: "#e05d38",
1363
+ "chart-1": "#86a7c8",
1364
+ "chart-2": "#e6a08f",
1365
+ "chart-3": "#5a7ca6",
1366
+ "chart-4": "#466494",
1367
+ "chart-5": "#334c82",
1368
+ sidebar: "#2a303f",
1369
+ "sidebar-foreground": "#e5e5e5",
1370
+ "sidebar-primary": "#e05d38",
1371
+ "sidebar-primary-foreground": "#ffffff",
1372
+ "sidebar-accent": "#2a3656",
1373
+ "sidebar-accent-foreground": "#bfdbfe",
1374
+ "sidebar-border": "#3d4354",
1375
+ "sidebar-ring": "#e05d38"
1376
+ }
1377
+ }
1378
+ },
1379
+ "quantum-rose": {
1380
+ label: "Quantum Rose",
1381
+ createdAt: "2025-04-03",
1382
+ styles: {
1383
+ light: {
1384
+ background: "#fff0f8",
1385
+ foreground: "#91185c",
1386
+ card: "#fff7fc",
1387
+ "card-foreground": "#91185c",
1388
+ popover: "#fff7fc",
1389
+ "popover-foreground": "#91185c",
1390
+ primary: "#e6067a",
1391
+ "primary-foreground": "#ffffff",
1392
+ secondary: "#ffd6ff",
1393
+ "secondary-foreground": "#91185c",
1394
+ muted: "#ffe3f2",
1395
+ "muted-foreground": "#c04283",
1396
+ accent: "#ffc1e3",
1397
+ "accent-foreground": "#91185c",
1398
+ destructive: "#d13869",
1399
+ "destructive-foreground": "#ffffff",
1400
+ border: "#ffc7e6",
1401
+ input: "#ffd6ff",
1402
+ ring: "#e6067a",
1403
+ "chart-1": "#e6067a",
1404
+ "chart-2": "#c44b97",
1405
+ "chart-3": "#9969b6",
1406
+ "chart-4": "#7371bf",
1407
+ "chart-5": "#5e84ff",
1408
+ sidebar: "#ffedf6",
1409
+ "sidebar-foreground": "#91185c",
1410
+ "sidebar-primary": "#e6067a",
1411
+ "sidebar-primary-foreground": "#ffffff",
1412
+ "sidebar-accent": "#ffc1e3",
1413
+ "sidebar-accent-foreground": "#91185c",
1414
+ "sidebar-border": "#ffddf0",
1415
+ "sidebar-ring": "#e6067a",
1416
+ "font-sans": "Poppins, sans-serif",
1417
+ "font-serif": "Playfair Display, serif",
1418
+ "font-mono": "Space Mono, monospace",
1419
+ radius: "0.5rem",
1420
+ "shadow-color": "hsl(330 70% 30% / 0.12)",
1421
+ "shadow-opacity": "0.18",
1422
+ "shadow-blur": "0px",
1423
+ "shadow-spread": "0px",
1424
+ "shadow-offset-x": "0px",
1425
+ "shadow-offset-y": "3px"
1426
+ },
1427
+ dark: {
1428
+ background: "#1a0922",
1429
+ foreground: "#ffb3ff",
1430
+ card: "#2a1435",
1431
+ "card-foreground": "#ffb3ff",
1432
+ popover: "#2a1435",
1433
+ "popover-foreground": "#ffb3ff",
1434
+ primary: "#ff6bef",
1435
+ "primary-foreground": "#180518",
1436
+ secondary: "#46204f",
1437
+ "secondary-foreground": "#ffb3ff",
1438
+ muted: "#331941",
1439
+ "muted-foreground": "#d67ad6",
1440
+ accent: "#5a1f5d",
1441
+ "accent-foreground": "#ffb3ff",
1442
+ destructive: "#ff2876",
1443
+ "destructive-foreground": "#f9f9f9",
1444
+ border: "#4a1b5f",
1445
+ input: "#46204f",
1446
+ ring: "#ff6bef",
1447
+ "chart-1": "#ff6bef",
1448
+ "chart-2": "#c359e3",
1449
+ "chart-3": "#9161ff",
1450
+ "chart-4": "#6f73e2",
1451
+ "chart-5": "#547aff",
1452
+ sidebar: "#1c0d25",
1453
+ "sidebar-foreground": "#ffb3ff",
1454
+ "sidebar-primary": "#ff6bef",
1455
+ "sidebar-primary-foreground": "#180518",
1456
+ "sidebar-accent": "#5a1f5d",
1457
+ "sidebar-accent-foreground": "#ffb3ff",
1458
+ "sidebar-border": "#4a1b5f",
1459
+ "sidebar-ring": "#ff6bef",
1460
+ "font-sans": "Quicksand, sans-serif",
1461
+ "font-serif": "Playfair Display, serif",
1462
+ "font-mono": "Space Mono, monospace",
1463
+ "shadow-color": "hsl(300 80% 50% / 0.25)"
1464
+ }
1465
+ }
1466
+ },
1467
+ nature: {
1468
+ label: "Nature",
1469
+ styles: {
1470
+ light: {
1471
+ background: "#f8f5f0",
1472
+ foreground: "#3e2723",
1473
+ card: "#f8f5f0",
1474
+ "card-foreground": "#3e2723",
1475
+ popover: "#f8f5f0",
1476
+ "popover-foreground": "#3e2723",
1477
+ primary: "#2e7d32",
1478
+ "primary-foreground": "#ffffff",
1479
+ secondary: "#e8f5e9",
1480
+ "secondary-foreground": "#1b5e20",
1481
+ muted: "#f0e9e0",
1482
+ "muted-foreground": "#6d4c41",
1483
+ accent: "#c8e6c9",
1484
+ "accent-foreground": "#1b5e20",
1485
+ destructive: "#c62828",
1486
+ "destructive-foreground": "#ffffff",
1487
+ border: "#e0d6c9",
1488
+ input: "#e0d6c9",
1489
+ ring: "#2e7d32",
1490
+ "chart-1": "#4caf50",
1491
+ "chart-2": "#388e3c",
1492
+ "chart-3": "#2e7d32",
1493
+ "chart-4": "#1b5e20",
1494
+ "chart-5": "#0a1f0c",
1495
+ radius: "0.5rem",
1496
+ sidebar: "#f0e9e0",
1497
+ "sidebar-foreground": "#3e2723",
1498
+ "sidebar-primary": "#2e7d32",
1499
+ "sidebar-primary-foreground": "#ffffff",
1500
+ "sidebar-accent": "#c8e6c9",
1501
+ "sidebar-accent-foreground": "#1b5e20",
1502
+ "sidebar-border": "#e0d6c9",
1503
+ "sidebar-ring": "#2e7d32",
1504
+ "font-sans": "Montserrat, sans-serif",
1505
+ "font-serif": "Merriweather, serif",
1506
+ "font-mono": "Source Code Pro, monospace"
1507
+ },
1508
+ dark: {
1509
+ background: "#1c2a1f",
1510
+ foreground: "#f0ebe5",
1511
+ card: "#2d3a2e",
1512
+ "card-foreground": "#f0ebe5",
1513
+ popover: "#2d3a2e",
1514
+ "popover-foreground": "#f0ebe5",
1515
+ primary: "#4caf50",
1516
+ "primary-foreground": "#0a1f0c",
1517
+ secondary: "#3e4a3d",
1518
+ "secondary-foreground": "#d7e0d6",
1519
+ muted: "#2d3a2e",
1520
+ "muted-foreground": "#d7cfc4",
1521
+ accent: "#388e3c",
1522
+ "accent-foreground": "#f0ebe5",
1523
+ destructive: "#c62828",
1524
+ "destructive-foreground": "#f0ebe5",
1525
+ border: "#3e4a3d",
1526
+ input: "#3e4a3d",
1527
+ ring: "#4caf50",
1528
+ "chart-1": "#81c784",
1529
+ "chart-2": "#66bb6a",
1530
+ "chart-3": "#4caf50",
1531
+ "chart-4": "#43a047",
1532
+ "chart-5": "#388e3c",
1533
+ radius: "0.5rem",
1534
+ sidebar: "#1c2a1f",
1535
+ "sidebar-foreground": "#f0ebe5",
1536
+ "sidebar-primary": "#4caf50",
1537
+ "sidebar-primary-foreground": "#0a1f0c",
1538
+ "sidebar-accent": "#388e3c",
1539
+ "sidebar-accent-foreground": "#f0ebe5",
1540
+ "sidebar-border": "#3e4a3d",
1541
+ "sidebar-ring": "#4caf50"
1542
+ }
1543
+ }
1544
+ },
1545
+ "bold-tech": {
1546
+ label: "Bold Tech",
1547
+ styles: {
1548
+ light: {
1549
+ background: "#ffffff",
1550
+ foreground: "#312e81",
1551
+ card: "#ffffff",
1552
+ "card-foreground": "#312e81",
1553
+ popover: "#ffffff",
1554
+ "popover-foreground": "#312e81",
1555
+ primary: "#8b5cf6",
1556
+ "primary-foreground": "#ffffff",
1557
+ secondary: "#f3f0ff",
1558
+ "secondary-foreground": "#4338ca",
1559
+ muted: "#f5f3ff",
1560
+ "muted-foreground": "#7c3aed",
1561
+ accent: "#dbeafe",
1562
+ "accent-foreground": "#1e40af",
1563
+ destructive: "#ef4444",
1564
+ "destructive-foreground": "#ffffff",
1565
+ border: "#e0e7ff",
1566
+ input: "#e0e7ff",
1567
+ ring: "#8b5cf6",
1568
+ "chart-1": "#8b5cf6",
1569
+ "chart-2": "#7c3aed",
1570
+ "chart-3": "#6d28d9",
1571
+ "chart-4": "#5b21b6",
1572
+ "chart-5": "#4c1d95",
1573
+ radius: "0.625rem",
1574
+ sidebar: "#f5f3ff",
1575
+ "sidebar-foreground": "#312e81",
1576
+ "sidebar-primary": "#8b5cf6",
1577
+ "sidebar-primary-foreground": "#ffffff",
1578
+ "sidebar-accent": "#dbeafe",
1579
+ "sidebar-accent-foreground": "#1e40af",
1580
+ "sidebar-border": "#e0e7ff",
1581
+ "sidebar-ring": "#8b5cf6",
1582
+ "font-sans": "Roboto, sans-serif",
1583
+ "font-serif": "Playfair Display, serif",
1584
+ "font-mono": "Fira Code, monospace",
1585
+ "shadow-color": "hsl(255 86% 66%)",
1586
+ "shadow-opacity": "0.2",
1587
+ "shadow-blur": "4px",
1588
+ "shadow-spread": "0px",
1589
+ "shadow-offset-x": "2px",
1590
+ "shadow-offset-y": "2px"
1591
+ },
1592
+ dark: {
1593
+ background: "#0f172a",
1594
+ foreground: "#e0e7ff",
1595
+ card: "#1e1b4b",
1596
+ "card-foreground": "#e0e7ff",
1597
+ popover: "#1e1b4b",
1598
+ "popover-foreground": "#e0e7ff",
1599
+ primary: "#8b5cf6",
1600
+ "primary-foreground": "#ffffff",
1601
+ secondary: "#1e1b4b",
1602
+ "secondary-foreground": "#e0e7ff",
1603
+ muted: "#1e1b4b",
1604
+ "muted-foreground": "#c4b5fd",
1605
+ accent: "#4338ca",
1606
+ "accent-foreground": "#e0e7ff",
1607
+ destructive: "#ef4444",
1608
+ "destructive-foreground": "#ffffff",
1609
+ border: "#2e1065",
1610
+ input: "#2e1065",
1611
+ ring: "#8b5cf6",
1612
+ "chart-1": "#a78bfa",
1613
+ "chart-2": "#8b5cf6",
1614
+ "chart-3": "#7c3aed",
1615
+ "chart-4": "#6d28d9",
1616
+ "chart-5": "#5b21b6",
1617
+ radius: "0.625rem",
1618
+ sidebar: "#0f172a",
1619
+ "sidebar-foreground": "#e0e7ff",
1620
+ "sidebar-primary": "#8b5cf6",
1621
+ "sidebar-primary-foreground": "#ffffff",
1622
+ "sidebar-accent": "#4338ca",
1623
+ "sidebar-accent-foreground": "#e0e7ff",
1624
+ "sidebar-border": "#2e1065",
1625
+ "sidebar-ring": "#8b5cf6"
1626
+ }
1627
+ }
1628
+ },
1629
+ "elegant-luxury": {
1630
+ label: "Elegant Luxury",
1631
+ styles: {
1632
+ light: {
1633
+ background: "#faf7f5",
1634
+ foreground: "#1a1a1a",
1635
+ card: "#faf7f5",
1636
+ "card-foreground": "#1a1a1a",
1637
+ popover: "#faf7f5",
1638
+ "popover-foreground": "#1a1a1a",
1639
+ primary: "#9b2c2c",
1640
+ "primary-foreground": "#ffffff",
1641
+ secondary: "#fdf2d6",
1642
+ "secondary-foreground": "#805500",
1643
+ muted: "#f0ebe8",
1644
+ "muted-foreground": "#57534e",
1645
+ accent: "#fef3c7",
1646
+ "accent-foreground": "#7f1d1d",
1647
+ destructive: "#991b1b",
1648
+ "destructive-foreground": "#ffffff",
1649
+ border: "#f5e8d2",
1650
+ input: "#f5e8d2",
1651
+ ring: "#9b2c2c",
1652
+ "chart-1": "#b91c1c",
1653
+ "chart-2": "#9b2c2c",
1654
+ "chart-3": "#7f1d1d",
1655
+ "chart-4": "#b45309",
1656
+ "chart-5": "#92400e",
1657
+ radius: "0.375rem",
1658
+ sidebar: "#f0ebe8",
1659
+ "sidebar-foreground": "#1a1a1a",
1660
+ "sidebar-primary": "#9b2c2c",
1661
+ "sidebar-primary-foreground": "#ffffff",
1662
+ "sidebar-accent": "#fef3c7",
1663
+ "sidebar-accent-foreground": "#7f1d1d",
1664
+ "sidebar-border": "#f5e8d2",
1665
+ "sidebar-ring": "#9b2c2c",
1666
+ "font-sans": "Poppins, sans-serif",
1667
+ "font-serif": "Libre Baskerville, serif",
1668
+ "font-mono": "IBM Plex Mono, monospace",
1669
+ "shadow-color": "hsl(0 63% 18%)",
1670
+ "shadow-opacity": "0.12",
1671
+ "shadow-blur": "16px",
1672
+ "shadow-spread": "-2px",
1673
+ "shadow-offset-x": "1px",
1674
+ "shadow-offset-y": "1px"
1675
+ },
1676
+ dark: {
1677
+ background: "#1c1917",
1678
+ foreground: "#f5f5f4",
1679
+ card: "#292524",
1680
+ "card-foreground": "#f5f5f4",
1681
+ popover: "#292524",
1682
+ "popover-foreground": "#f5f5f4",
1683
+ primary: "#b91c1c",
1684
+ "primary-foreground": "#faf7f5",
1685
+ secondary: "#92400e",
1686
+ "secondary-foreground": "#fef3c7",
1687
+ muted: "#292524",
1688
+ "muted-foreground": "#d6d3d1",
1689
+ accent: "#b45309",
1690
+ "accent-foreground": "#fef3c7",
1691
+ destructive: "#ef4444",
1692
+ "destructive-foreground": "#ffffff",
1693
+ border: "#44403c",
1694
+ input: "#44403c",
1695
+ ring: "#b91c1c",
1696
+ "chart-1": "#f87171",
1697
+ "chart-2": "#ef4444",
1698
+ "chart-3": "#dc2626",
1699
+ "chart-4": "#fbbf24",
1700
+ "chart-5": "#f59e0b",
1701
+ radius: "0.375rem",
1702
+ sidebar: "#1c1917",
1703
+ "sidebar-foreground": "#f5f5f4",
1704
+ "sidebar-primary": "#b91c1c",
1705
+ "sidebar-primary-foreground": "#faf7f5",
1706
+ "sidebar-accent": "#b45309",
1707
+ "sidebar-accent-foreground": "#fef3c7",
1708
+ "sidebar-border": "#44403c",
1709
+ "sidebar-ring": "#b91c1c"
1710
+ }
1711
+ }
1712
+ },
1713
+ "amber-minimal": {
1714
+ label: "Amber Minimal",
1715
+ createdAt: "2025-04-27",
1716
+ styles: {
1717
+ light: {
1718
+ background: "#ffffff",
1719
+ foreground: "#262626",
1720
+ card: "#ffffff",
1721
+ "card-foreground": "#262626",
1722
+ popover: "#ffffff",
1723
+ "popover-foreground": "#262626",
1724
+ primary: "#f59e0b",
1725
+ "primary-foreground": "#000000",
1726
+ secondary: "#f3f4f6",
1727
+ "secondary-foreground": "#4b5563",
1728
+ muted: "#f9fafb",
1729
+ "muted-foreground": "#6b7280",
1730
+ accent: "#fffbeb",
1731
+ "accent-foreground": "#92400e",
1732
+ destructive: "#ef4444",
1733
+ "destructive-foreground": "#ffffff",
1734
+ border: "#e5e7eb",
1735
+ input: "#e5e7eb",
1736
+ ring: "#f59e0b",
1737
+ "chart-1": "#f59e0b",
1738
+ "chart-2": "#d97706",
1739
+ "chart-3": "#b45309",
1740
+ "chart-4": "#92400e",
1741
+ "chart-5": "#78350f",
1742
+ sidebar: "#f9fafb",
1743
+ "sidebar-foreground": "#262626",
1744
+ "sidebar-primary": "#f59e0b",
1745
+ "sidebar-primary-foreground": "#ffffff",
1746
+ "sidebar-accent": "#fffbeb",
1747
+ "sidebar-accent-foreground": "#92400e",
1748
+ "sidebar-border": "#e5e7eb",
1749
+ "sidebar-ring": "#f59e0b",
1750
+ "font-sans": "Inter, sans-serif",
1751
+ "font-serif": "Source Serif 4, serif",
1752
+ "font-mono": "JetBrains Mono, monospace",
1753
+ radius: "0.375rem",
1754
+ "shadow-color": "hsl(0 0% 0%)",
1755
+ "shadow-opacity": "0.1",
1756
+ "shadow-blur": "8px",
1757
+ "shadow-spread": "-1px",
1758
+ "shadow-offset-x": "0px",
1759
+ "shadow-offset-y": "4px",
1760
+ "letter-spacing": "0em",
1761
+ spacing: "0.25rem"
1762
+ },
1763
+ dark: {
1764
+ background: "#171717",
1765
+ foreground: "#e5e5e5",
1766
+ card: "#262626",
1767
+ "card-foreground": "#e5e5e5",
1768
+ popover: "#262626",
1769
+ "popover-foreground": "#e5e5e5",
1770
+ primary: "#f59e0b",
1771
+ "primary-foreground": "#000000",
1772
+ secondary: "#262626",
1773
+ "secondary-foreground": "#e5e5e5",
1774
+ muted: "#262626",
1775
+ "muted-foreground": "#a3a3a3",
1776
+ accent: "#92400e",
1777
+ "accent-foreground": "#fde68a",
1778
+ destructive: "#ef4444",
1779
+ "destructive-foreground": "#ffffff",
1780
+ border: "#404040",
1781
+ input: "#404040",
1782
+ ring: "#f59e0b",
1783
+ "chart-1": "#fbbf24",
1784
+ "chart-2": "#d97706",
1785
+ "chart-3": "#92400e",
1786
+ "chart-4": "#b45309",
1787
+ "chart-5": "#92400e",
1788
+ sidebar: "#0f0f0f",
1789
+ "sidebar-foreground": "#e5e5e5",
1790
+ "sidebar-primary": "#f59e0b",
1791
+ "sidebar-primary-foreground": "#ffffff",
1792
+ "sidebar-accent": "#92400e",
1793
+ "sidebar-accent-foreground": "#fde68a",
1794
+ "sidebar-border": "#404040",
1795
+ "sidebar-ring": "#f59e0b"
1796
+ }
1797
+ }
1798
+ },
1799
+ supabase: {
1800
+ label: "Supabase",
1801
+ createdAt: "2025-04-27",
1802
+ styles: {
1803
+ light: {
1804
+ background: "#fcfcfc",
1805
+ foreground: "#171717",
1806
+ card: "#fcfcfc",
1807
+ "card-foreground": "#171717",
1808
+ popover: "#fcfcfc",
1809
+ "popover-foreground": "#525252",
1810
+ primary: "#72e3ad",
1811
+ "primary-foreground": "#1e2723",
1812
+ secondary: "#fdfdfd",
1813
+ "secondary-foreground": "#171717",
1814
+ muted: "#ededed",
1815
+ "muted-foreground": "#202020",
1816
+ accent: "#ededed",
1817
+ "accent-foreground": "#202020",
1818
+ destructive: "#ca3214",
1819
+ "destructive-foreground": "#fffcfc",
1820
+ border: "#dfdfdf",
1821
+ input: "#f6f6f6",
1822
+ ring: "#72e3ad",
1823
+ "chart-1": "#72e3ad",
1824
+ "chart-2": "#3b82f6",
1825
+ "chart-3": "#8b5cf6",
1826
+ "chart-4": "#f59e0b",
1827
+ "chart-5": "#10b981",
1828
+ sidebar: "#fcfcfc",
1829
+ "sidebar-foreground": "#707070",
1830
+ "sidebar-primary": "#72e3ad",
1831
+ "sidebar-primary-foreground": "#1e2723",
1832
+ "sidebar-accent": "#ededed",
1833
+ "sidebar-accent-foreground": "#202020",
1834
+ "sidebar-border": "#dfdfdf",
1835
+ "sidebar-ring": "#72e3ad",
1836
+ "font-sans": "Outfit, sans-serif",
1837
+ "font-serif": 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
1838
+ "font-mono": "monospace",
1839
+ radius: "0.5rem",
1840
+ "shadow-color": "#000000",
1841
+ "shadow-opacity": "0.17",
1842
+ "shadow-blur": "3px",
1843
+ "shadow-spread": "0px",
1844
+ "shadow-offset-x": "0px",
1845
+ "shadow-offset-y": "1px",
1846
+ "letter-spacing": "0.025em"
1847
+ },
1848
+ dark: {
1849
+ background: "#121212",
1850
+ foreground: "#e2e8f0",
1851
+ card: "#171717",
1852
+ "card-foreground": "#e2e8f0",
1853
+ popover: "#242424",
1854
+ "popover-foreground": "#a9a9a9",
1855
+ primary: "#006239",
1856
+ "primary-foreground": "#dde8e3",
1857
+ secondary: "#242424",
1858
+ "secondary-foreground": "#fafafa",
1859
+ muted: "#1f1f1f",
1860
+ "muted-foreground": "#a2a2a2",
1861
+ accent: "#313131",
1862
+ "accent-foreground": "#fafafa",
1863
+ destructive: "#541c15",
1864
+ "destructive-foreground": "#ede9e8",
1865
+ border: "#292929",
1866
+ input: "#242424",
1867
+ ring: "#4ade80",
1868
+ "chart-1": "#4ade80",
1869
+ "chart-2": "#60a5fa",
1870
+ "chart-3": "#a78bfa",
1871
+ "chart-4": "#fbbf24",
1872
+ "chart-5": "#2dd4bf",
1873
+ sidebar: "#121212",
1874
+ "sidebar-foreground": "#898989",
1875
+ "sidebar-primary": "#006239",
1876
+ "sidebar-primary-foreground": "#dde8e3",
1877
+ "sidebar-accent": "#313131",
1878
+ "sidebar-accent-foreground": "#fafafa",
1879
+ "sidebar-border": "#292929",
1880
+ "sidebar-ring": "#4ade80"
1881
+ }
1882
+ }
1883
+ },
1884
+ "neo-brutalism": {
1885
+ label: "Neo Brutalism",
1886
+ styles: {
1887
+ light: {
1888
+ background: "#ffffff",
1889
+ foreground: "#000000",
1890
+ card: "#ffffff",
1891
+ "card-foreground": "#000000",
1892
+ popover: "#ffffff",
1893
+ "popover-foreground": "#000000",
1894
+ primary: "#ff3333",
1895
+ "primary-foreground": "#ffffff",
1896
+ secondary: "#ffff00",
1897
+ "secondary-foreground": "#000000",
1898
+ muted: "#f0f0f0",
1899
+ "muted-foreground": "#333333",
1900
+ accent: "#0066ff",
1901
+ "accent-foreground": "#ffffff",
1902
+ destructive: "#000000",
1903
+ "destructive-foreground": "#ffffff",
1904
+ border: "#000000",
1905
+ input: "#000000",
1906
+ ring: "#ff3333",
1907
+ "chart-1": "#ff3333",
1908
+ "chart-2": "#ffff00",
1909
+ "chart-3": "#0066ff",
1910
+ "chart-4": "#00cc00",
1911
+ "chart-5": "#cc00cc",
1912
+ radius: "0px",
1913
+ sidebar: "#f0f0f0",
1914
+ "sidebar-foreground": "#000000",
1915
+ "sidebar-primary": "#ff3333",
1916
+ "sidebar-primary-foreground": "#ffffff",
1917
+ "sidebar-accent": "#0066ff",
1918
+ "sidebar-accent-foreground": "#ffffff",
1919
+ "sidebar-border": "#000000",
1920
+ "sidebar-ring": "#ff3333",
1921
+ "font-sans": "DM Sans, sans-serif",
1922
+ "font-mono": "Space Mono, monospace",
1923
+ "shadow-color": "hsl(0 0% 0%)",
1924
+ "shadow-opacity": "1",
1925
+ "shadow-blur": "0px",
1926
+ "shadow-spread": "0px",
1927
+ "shadow-offset-x": "4px",
1928
+ "shadow-offset-y": "4px"
1929
+ },
1930
+ dark: {
1931
+ background: "#000000",
1932
+ foreground: "#ffffff",
1933
+ card: "#333333",
1934
+ "card-foreground": "#ffffff",
1935
+ popover: "#333333",
1936
+ "popover-foreground": "#ffffff",
1937
+ primary: "#ff6666",
1938
+ "primary-foreground": "#000000",
1939
+ secondary: "#ffff33",
1940
+ "secondary-foreground": "#000000",
1941
+ muted: "#333333",
1942
+ "muted-foreground": "#cccccc",
1943
+ accent: "#3399ff",
1944
+ "accent-foreground": "#000000",
1945
+ destructive: "#ffffff",
1946
+ "destructive-foreground": "#000000",
1947
+ border: "#ffffff",
1948
+ input: "#ffffff",
1949
+ ring: "#ff6666",
1950
+ "chart-1": "#ff6666",
1951
+ "chart-2": "#ffff33",
1952
+ "chart-3": "#3399ff",
1953
+ "chart-4": "#33cc33",
1954
+ "chart-5": "#cc33cc",
1955
+ radius: "0px",
1956
+ sidebar: "#000000",
1957
+ "sidebar-foreground": "#ffffff",
1958
+ "sidebar-primary": "#ff6666",
1959
+ "sidebar-primary-foreground": "#000000",
1960
+ "sidebar-accent": "#3399ff",
1961
+ "sidebar-accent-foreground": "#000000",
1962
+ "sidebar-border": "#ffffff",
1963
+ "sidebar-ring": "#ff6666"
1964
+ }
1965
+ }
1966
+ },
1967
+ "solar-dusk": {
1968
+ label: "Solar Dusk",
1969
+ createdAt: "2025-04-12",
1970
+ styles: {
1971
+ light: {
1972
+ background: "#FDFBF7",
1973
+ foreground: "#4A3B33",
1974
+ card: "#F8F4EE",
1975
+ "card-foreground": "#4A3B33",
1976
+ popover: "#F8F4EE",
1977
+ "popover-foreground": "#4A3B33",
1978
+ primary: "#B45309",
1979
+ "primary-foreground": "#FFFFFF",
1980
+ secondary: "#E4C090",
1981
+ "secondary-foreground": "#57534E",
1982
+ muted: "#F1E9DA",
1983
+ "muted-foreground": "#78716C",
1984
+ accent: "#f2daba",
1985
+ "accent-foreground": "#57534E",
1986
+ destructive: "#991B1B",
1987
+ "destructive-foreground": "#FFFFFF",
1988
+ border: "#E4D9BC",
1989
+ input: "#E4D9BC",
1990
+ ring: "#B45309",
1991
+ "chart-1": "#B45309",
1992
+ "chart-2": "#78716C",
1993
+ "chart-3": "#A16207",
1994
+ "chart-4": "#78716C",
1995
+ "chart-5": "#CA8A04",
1996
+ radius: "0.3rem",
1997
+ sidebar: "#F1E9DA",
1998
+ "sidebar-foreground": "#4A3B33",
1999
+ "sidebar-primary": "#B45309",
2000
+ "sidebar-primary-foreground": "#FFFFFF",
2001
+ "sidebar-accent": "#A16207",
2002
+ "sidebar-accent-foreground": "#FFFFFF",
2003
+ "sidebar-border": "#E4D9BC",
2004
+ "sidebar-ring": "#B45309",
2005
+ "font-sans": "Oxanium, sans-serif",
2006
+ "font-serif": "Merriweather, serif",
2007
+ "font-mono": "Fira Code, monospace",
2008
+ "shadow-color": "hsl(28 18% 25%)",
2009
+ "shadow-opacity": "0.18",
2010
+ "shadow-blur": "3px",
2011
+ "shadow-spread": "0px",
2012
+ "shadow-offset-x": "0px",
2013
+ "shadow-offset-y": "2px"
2014
+ },
2015
+ dark: {
2016
+ background: "#1C1917",
2017
+ foreground: "#F5F5F4",
2018
+ card: "#292524",
2019
+ "card-foreground": "#F5F5F4",
2020
+ popover: "#292524",
2021
+ "popover-foreground": "#F5F5F4",
2022
+ primary: "#F97316",
2023
+ "primary-foreground": "#FFFFFF",
2024
+ secondary: "#57534E",
2025
+ "secondary-foreground": "#E7E5E4",
2026
+ muted: "#292524",
2027
+ "muted-foreground": "#A8A29E",
2028
+ accent: "#1e4252",
2029
+ "accent-foreground": "#E7E5E4",
2030
+ destructive: "#DC2626",
2031
+ "destructive-foreground": "#FFFFFF",
2032
+ border: "#44403C",
2033
+ input: "#44403C",
2034
+ ring: "#F97316",
2035
+ "chart-1": "#F97316",
2036
+ "chart-2": "#0EA5E9",
2037
+ "chart-3": "#EAB308",
2038
+ "chart-4": "#A8A29E",
2039
+ "chart-5": "#78716C",
2040
+ radius: "0.3rem",
2041
+ sidebar: "#292524",
2042
+ "sidebar-foreground": "#F5F5F4",
2043
+ "sidebar-primary": "#F97316",
2044
+ "sidebar-primary-foreground": "#FFFFFF",
2045
+ "sidebar-accent": "#0EA5E9",
2046
+ "sidebar-accent-foreground": "#0C2A4D",
2047
+ "sidebar-border": "#44403C",
2048
+ "sidebar-ring": "#F97316",
2049
+ "shadow-color": "hsl(0 0% 5%)"
2050
+ }
2051
+ }
2052
+ },
2053
+ claymorphism: {
2054
+ label: "Claymorphism",
2055
+ styles: {
2056
+ light: {
2057
+ background: "#e7e5e4",
2058
+ foreground: "#1e293b",
2059
+ card: "#f5f5f4",
2060
+ "card-foreground": "#1e293b",
2061
+ popover: "#f5f5f4",
2062
+ "popover-foreground": "#1e293b",
2063
+ primary: "#6366f1",
2064
+ "primary-foreground": "#ffffff",
2065
+ secondary: "#d6d3d1",
2066
+ "secondary-foreground": "#4b5563",
2067
+ muted: "#e7e5e4",
2068
+ "muted-foreground": "#6b7280",
2069
+ accent: "#f3e5f5",
2070
+ "accent-foreground": "#374151",
2071
+ destructive: "#ef4444",
2072
+ "destructive-foreground": "#ffffff",
2073
+ border: "#d6d3d1",
2074
+ input: "#d6d3d1",
2075
+ ring: "#6366f1",
2076
+ "chart-1": "#6366f1",
2077
+ "chart-2": "#4f46e5",
2078
+ "chart-3": "#4338ca",
2079
+ "chart-4": "#3730a3",
2080
+ "chart-5": "#312e81",
2081
+ radius: "1.25rem",
2082
+ sidebar: "#d6d3d1",
2083
+ "sidebar-foreground": "#1e293b",
2084
+ "sidebar-primary": "#6366f1",
2085
+ "sidebar-primary-foreground": "#ffffff",
2086
+ "sidebar-accent": "#f3e5f5",
2087
+ "sidebar-accent-foreground": "#374151",
2088
+ "sidebar-border": "#d6d3d1",
2089
+ "sidebar-ring": "#6366f1",
2090
+ "font-sans": "Plus Jakarta Sans, sans-serif",
2091
+ "font-serif": "Lora, serif",
2092
+ "font-mono": "Roboto Mono, monospace",
2093
+ "shadow-color": "hsl(240 4% 60%)",
2094
+ "shadow-opacity": "0.18",
2095
+ "shadow-blur": "10px",
2096
+ "shadow-spread": "4px",
2097
+ "shadow-offset-x": "2px",
2098
+ "shadow-offset-y": "2px"
2099
+ },
2100
+ dark: {
2101
+ background: "#1e1b18",
2102
+ foreground: "#e2e8f0",
2103
+ card: "#2c2825",
2104
+ "card-foreground": "#e2e8f0",
2105
+ popover: "#2c2825",
2106
+ "popover-foreground": "#e2e8f0",
2107
+ primary: "#818cf8",
2108
+ "primary-foreground": "#1e1b18",
2109
+ secondary: "#3a3633",
2110
+ "secondary-foreground": "#d1d5db",
2111
+ muted: "#2c2825",
2112
+ "muted-foreground": "#9ca3af",
2113
+ accent: "#484441",
2114
+ "accent-foreground": "#d1d5db",
2115
+ destructive: "#ef4444",
2116
+ "destructive-foreground": "#1e1b18",
2117
+ border: "#3a3633",
2118
+ input: "#3a3633",
2119
+ ring: "#818cf8",
2120
+ "chart-1": "#818cf8",
2121
+ "chart-2": "#6366f1",
2122
+ "chart-3": "#4f46e5",
2123
+ "chart-4": "#4338ca",
2124
+ "chart-5": "#3730a3",
2125
+ radius: "1.25rem",
2126
+ sidebar: "#3a3633",
2127
+ "sidebar-foreground": "#e2e8f0",
2128
+ "sidebar-primary": "#818cf8",
2129
+ "sidebar-primary-foreground": "#1e1b18",
2130
+ "sidebar-accent": "#484441",
2131
+ "sidebar-accent-foreground": "#d1d5db",
2132
+ "sidebar-border": "#3a3633",
2133
+ "sidebar-ring": "#818cf8",
2134
+ "shadow-color": "hsl(0 0% 0%)"
2135
+ }
2136
+ }
2137
+ },
2138
+ cyberpunk: {
2139
+ label: "Cyberpunk",
2140
+ styles: {
2141
+ light: {
2142
+ background: "#f8f9fa",
2143
+ foreground: "#0c0c1d",
2144
+ card: "#ffffff",
2145
+ "card-foreground": "#0c0c1d",
2146
+ popover: "#ffffff",
2147
+ "popover-foreground": "#0c0c1d",
2148
+ primary: "#ff00c8",
2149
+ "primary-foreground": "#ffffff",
2150
+ secondary: "#f0f0ff",
2151
+ "secondary-foreground": "#0c0c1d",
2152
+ muted: "#f0f0ff",
2153
+ "muted-foreground": "#0c0c1d",
2154
+ accent: "#00ffcc",
2155
+ "accent-foreground": "#0c0c1d",
2156
+ destructive: "#ff3d00",
2157
+ "destructive-foreground": "#ffffff",
2158
+ border: "#dfe6e9",
2159
+ input: "#dfe6e9",
2160
+ ring: "#ff00c8",
2161
+ "chart-1": "#ff00c8",
2162
+ "chart-2": "#9000ff",
2163
+ "chart-3": "#00e5ff",
2164
+ "chart-4": "#00ffcc",
2165
+ "chart-5": "#ffe600",
2166
+ radius: "0.5rem",
2167
+ sidebar: "#f0f0ff",
2168
+ "sidebar-foreground": "#0c0c1d",
2169
+ "sidebar-primary": "#ff00c8",
2170
+ "sidebar-primary-foreground": "#ffffff",
2171
+ "sidebar-accent": "#00ffcc",
2172
+ "sidebar-accent-foreground": "#0c0c1d",
2173
+ "sidebar-border": "#dfe6e9",
2174
+ "sidebar-ring": "#ff00c8",
2175
+ "font-sans": "Outfit, sans-serif",
2176
+ "font-mono": "Fira Code, monospace",
2177
+ "shadow-color": "hsl(0 0% 0%)",
2178
+ "shadow-opacity": "0.1",
2179
+ "shadow-blur": "8px",
2180
+ "shadow-spread": "-2px",
2181
+ "shadow-offset-x": "0px",
2182
+ "shadow-offset-y": "4px"
2183
+ },
2184
+ dark: {
2185
+ background: "#0c0c1d",
2186
+ foreground: "#eceff4",
2187
+ card: "#1e1e3f",
2188
+ "card-foreground": "#eceff4",
2189
+ popover: "#1e1e3f",
2190
+ "popover-foreground": "#eceff4",
2191
+ primary: "#ff00c8",
2192
+ "primary-foreground": "#ffffff",
2193
+ secondary: "#1e1e3f",
2194
+ "secondary-foreground": "#eceff4",
2195
+ muted: "#1e1e3f",
2196
+ "muted-foreground": "#8085a6",
2197
+ accent: "#00ffcc",
2198
+ "accent-foreground": "#0c0c1d",
2199
+ destructive: "#ff3d00",
2200
+ "destructive-foreground": "#ffffff",
2201
+ border: "#2e2e5e",
2202
+ input: "#2e2e5e",
2203
+ ring: "#ff00c8",
2204
+ "chart-1": "#ff00c8",
2205
+ "chart-2": "#9000ff",
2206
+ "chart-3": "#00e5ff",
2207
+ "chart-4": "#00ffcc",
2208
+ "chart-5": "#ffe600",
2209
+ radius: "0.5rem",
2210
+ sidebar: "#0c0c1d",
2211
+ "sidebar-foreground": "#eceff4",
2212
+ "sidebar-primary": "#ff00c8",
2213
+ "sidebar-primary-foreground": "#ffffff",
2214
+ "sidebar-accent": "#00ffcc",
2215
+ "sidebar-accent-foreground": "#0c0c1d",
2216
+ "sidebar-border": "#2e2e5e",
2217
+ "sidebar-ring": "#ff00c8"
2218
+ }
2219
+ }
2220
+ },
2221
+ "pastel-dreams": {
2222
+ label: "Pastel Dreams",
2223
+ styles: {
2224
+ light: {
2225
+ background: "#f7f3f9",
2226
+ foreground: "#374151",
2227
+ card: "#ffffff",
2228
+ "card-foreground": "#374151",
2229
+ popover: "#ffffff",
2230
+ "popover-foreground": "#374151",
2231
+ primary: "#a78bfa",
2232
+ "primary-foreground": "#ffffff",
2233
+ secondary: "#e9d8fd",
2234
+ "secondary-foreground": "#4b5563",
2235
+ muted: "#f3e8ff",
2236
+ "muted-foreground": "#6b7280",
2237
+ accent: "#f3e5f5",
2238
+ "accent-foreground": "#374151",
2239
+ destructive: "#fca5a5",
2240
+ "destructive-foreground": "#ffffff",
2241
+ border: "#e9d8fd",
2242
+ input: "#e9d8fd",
2243
+ ring: "#a78bfa",
2244
+ "chart-1": "#a78bfa",
2245
+ "chart-2": "#8b5cf6",
2246
+ "chart-3": "#7c3aed",
2247
+ "chart-4": "#6d28d9",
2248
+ "chart-5": "#5b21b6",
2249
+ radius: "1.5rem",
2250
+ sidebar: "#e9d8fd",
2251
+ "sidebar-foreground": "#374151",
2252
+ "sidebar-primary": "#a78bfa",
2253
+ "sidebar-primary-foreground": "#ffffff",
2254
+ "sidebar-accent": "#f3e5f5",
2255
+ "sidebar-accent-foreground": "#374151",
2256
+ "sidebar-border": "#e9d8fd",
2257
+ "sidebar-ring": "#a78bfa",
2258
+ "font-sans": "Open Sans, sans-serif",
2259
+ "font-serif": "Source Serif 4, serif",
2260
+ "font-mono": "IBM Plex Mono, monospace",
2261
+ "shadow-color": "hsl(0 0% 0%)",
2262
+ "shadow-opacity": "0.08",
2263
+ "shadow-blur": "16px",
2264
+ "shadow-spread": "-4px",
2265
+ "shadow-offset-x": "0px",
2266
+ "shadow-offset-y": "8px"
2267
+ },
2268
+ dark: {
2269
+ background: "#1c1917",
2270
+ foreground: "#e0e7ff",
2271
+ card: "#2d2535",
2272
+ "card-foreground": "#e0e7ff",
2273
+ popover: "#2d2535",
2274
+ "popover-foreground": "#e0e7ff",
2275
+ primary: "#c0aafd",
2276
+ "primary-foreground": "#1c1917",
2277
+ secondary: "#3f324a",
2278
+ "secondary-foreground": "#d1d5db",
2279
+ muted: "#2d2535",
2280
+ "muted-foreground": "#9ca3af",
2281
+ accent: "#4a3d5a",
2282
+ "accent-foreground": "#d1d5db",
2283
+ destructive: "#fca5a5",
2284
+ "destructive-foreground": "#1c1917",
2285
+ border: "#3f324a",
2286
+ input: "#3f324a",
2287
+ ring: "#c0aafd",
2288
+ "chart-1": "#c0aafd",
2289
+ "chart-2": "#a78bfa",
2290
+ "chart-3": "#8b5cf6",
2291
+ "chart-4": "#7c3aed",
2292
+ "chart-5": "#6d28d9",
2293
+ radius: "1.5rem",
2294
+ sidebar: "#3f324a",
2295
+ "sidebar-foreground": "#e0e7ff",
2296
+ "sidebar-primary": "#c0aafd",
2297
+ "sidebar-primary-foreground": "#1c1917",
2298
+ "sidebar-accent": "#4a3d5a",
2299
+ "sidebar-accent-foreground": "#d1d5db",
2300
+ "sidebar-border": "#3f324a",
2301
+ "sidebar-ring": "#c0aafd"
2302
+ }
2303
+ }
2304
+ },
2305
+ "clean-slate": {
2306
+ label: "Clean Slate",
2307
+ styles: {
2308
+ light: {
2309
+ background: "#f8fafc",
2310
+ foreground: "#1e293b",
2311
+ card: "#ffffff",
2312
+ "card-foreground": "#1e293b",
2313
+ popover: "#ffffff",
2314
+ "popover-foreground": "#1e293b",
2315
+ primary: "#6366f1",
2316
+ "primary-foreground": "#ffffff",
2317
+ secondary: "#e5e7eb",
2318
+ "secondary-foreground": "#374151",
2319
+ muted: "#f3f4f6",
2320
+ "muted-foreground": "#6b7280",
2321
+ accent: "#e0e7ff",
2322
+ "accent-foreground": "#374151",
2323
+ destructive: "#ef4444",
2324
+ "destructive-foreground": "#ffffff",
2325
+ border: "#d1d5db",
2326
+ input: "#d1d5db",
2327
+ ring: "#6366f1",
2328
+ "chart-1": "#6366f1",
2329
+ "chart-2": "#4f46e5",
2330
+ "chart-3": "#4338ca",
2331
+ "chart-4": "#3730a3",
2332
+ "chart-5": "#312e81",
2333
+ radius: "0.5rem",
2334
+ sidebar: "#f3f4f6",
2335
+ "sidebar-foreground": "#1e293b",
2336
+ "sidebar-primary": "#6366f1",
2337
+ "sidebar-primary-foreground": "#ffffff",
2338
+ "sidebar-accent": "#e0e7ff",
2339
+ "sidebar-accent-foreground": "#374151",
2340
+ "sidebar-border": "#d1d5db",
2341
+ "sidebar-ring": "#6366f1",
2342
+ "font-sans": "Inter, sans-serif",
2343
+ "font-serif": "Merriweather, serif",
2344
+ "font-mono": "JetBrains Mono, monospace",
2345
+ "shadow-color": "hsl(0 0% 0%)",
2346
+ "shadow-opacity": "0.1",
2347
+ "shadow-blur": "8px",
2348
+ "shadow-spread": "-1px",
2349
+ "shadow-offset-x": "0px",
2350
+ "shadow-offset-y": "4px"
2351
+ },
2352
+ dark: {
2353
+ background: "#0f172a",
2354
+ foreground: "#e2e8f0",
2355
+ card: "#1e293b",
2356
+ "card-foreground": "#e2e8f0",
2357
+ popover: "#1e293b",
2358
+ "popover-foreground": "#e2e8f0",
2359
+ primary: "#818cf8",
2360
+ "primary-foreground": "#0f172a",
2361
+ secondary: "#2d3748",
2362
+ "secondary-foreground": "#d1d5db",
2363
+ muted: "#1e293b",
2364
+ "muted-foreground": "#9ca3af",
2365
+ accent: "#374151",
2366
+ "accent-foreground": "#d1d5db",
2367
+ destructive: "#ef4444",
2368
+ "destructive-foreground": "#0f172a",
2369
+ border: "#4b5563",
2370
+ input: "#4b5563",
2371
+ ring: "#818cf8",
2372
+ "chart-1": "#818cf8",
2373
+ "chart-2": "#6366f1",
2374
+ "chart-3": "#4f46e5",
2375
+ "chart-4": "#4338ca",
2376
+ "chart-5": "#3730a3",
2377
+ radius: "0.5rem",
2378
+ sidebar: "#1e293b",
2379
+ "sidebar-foreground": "#e2e8f0",
2380
+ "sidebar-primary": "#818cf8",
2381
+ "sidebar-primary-foreground": "#0f172a",
2382
+ "sidebar-accent": "#374151",
2383
+ "sidebar-accent-foreground": "#d1d5db",
2384
+ "sidebar-border": "#4b5563",
2385
+ "sidebar-ring": "#818cf8"
2386
+ }
2387
+ }
2388
+ },
2389
+ caffeine: {
2390
+ label: "Caffeine",
2391
+ styles: {
2392
+ light: {
2393
+ background: "#f9f9f9",
2394
+ foreground: "#202020",
2395
+ card: "#fcfcfc",
2396
+ "card-foreground": "#202020",
2397
+ popover: "#fcfcfc",
2398
+ "popover-foreground": "#202020",
2399
+ primary: "#644a40",
2400
+ "primary-foreground": "#ffffff",
2401
+ secondary: "#ffdfb5",
2402
+ "secondary-foreground": "#582d1d",
2403
+ muted: "#efefef",
2404
+ "muted-foreground": "#646464",
2405
+ accent: "#e8e8e8",
2406
+ "accent-foreground": "#202020",
2407
+ destructive: "#e54d2e",
2408
+ "destructive-foreground": "#ffffff",
2409
+ border: "#d8d8d8",
2410
+ input: "#d8d8d8",
2411
+ ring: "#644a40",
2412
+ "chart-1": "#644a40",
2413
+ "chart-2": "#ffdfb5",
2414
+ "chart-3": "#e8e8e8",
2415
+ "chart-4": "#ffe6c4",
2416
+ "chart-5": "#66493e",
2417
+ sidebar: "#fbfbfb",
2418
+ "sidebar-foreground": "#252525",
2419
+ "sidebar-primary": "#343434",
2420
+ "sidebar-primary-foreground": "#fbfbfb",
2421
+ "sidebar-accent": "#f7f7f7",
2422
+ "sidebar-accent-foreground": "#343434",
2423
+ "sidebar-border": "#ebebeb",
2424
+ "sidebar-ring": "#b5b5b5",
2425
+ radius: "0.5rem"
2426
+ },
2427
+ dark: {
2428
+ background: "#111111",
2429
+ foreground: "#eeeeee",
2430
+ card: "#191919",
2431
+ "card-foreground": "#eeeeee",
2432
+ popover: "#191919",
2433
+ "popover-foreground": "#eeeeee",
2434
+ primary: "#ffe0c2",
2435
+ "primary-foreground": "#081a1b",
2436
+ secondary: "#393028",
2437
+ "secondary-foreground": "#ffe0c2",
2438
+ muted: "#222222",
2439
+ "muted-foreground": "#b4b4b4",
2440
+ accent: "#2a2a2a",
2441
+ "accent-foreground": "#eeeeee",
2442
+ destructive: "#e54d2e",
2443
+ "destructive-foreground": "#ffffff",
2444
+ border: "#201e18",
2445
+ input: "#484848",
2446
+ ring: "#ffe0c2",
2447
+ "chart-1": "#ffe0c2",
2448
+ "chart-2": "#393028",
2449
+ "chart-3": "#2a2a2a",
2450
+ "chart-4": "#42382e",
2451
+ "chart-5": "#ffe0c1",
2452
+ sidebar: "#18181b",
2453
+ "sidebar-foreground": "#f4f4f5",
2454
+ "sidebar-primary": "#1d4ed8",
2455
+ "sidebar-primary-foreground": "#ffffff",
2456
+ "sidebar-accent": "#27272a",
2457
+ "sidebar-accent-foreground": "#f4f4f5",
2458
+ "sidebar-border": "#27272a",
2459
+ "sidebar-ring": "#d4d4d8",
2460
+ radius: "0.5rem"
2461
+ }
2462
+ }
2463
+ },
2464
+ "ocean-breeze": {
2465
+ label: "Ocean Breeze",
2466
+ styles: {
2467
+ light: {
2468
+ background: "#f0f8ff",
2469
+ foreground: "#374151",
2470
+ card: "#ffffff",
2471
+ "card-foreground": "#374151",
2472
+ popover: "#ffffff",
2473
+ "popover-foreground": "#374151",
2474
+ primary: "#22c55e",
2475
+ "primary-foreground": "#ffffff",
2476
+ secondary: "#e0f2fe",
2477
+ "secondary-foreground": "#4b5563",
2478
+ muted: "#f3f4f6",
2479
+ "muted-foreground": "#6b7280",
2480
+ accent: "#d1fae5",
2481
+ "accent-foreground": "#374151",
2482
+ destructive: "#ef4444",
2483
+ "destructive-foreground": "#ffffff",
2484
+ border: "#e5e7eb",
2485
+ input: "#e5e7eb",
2486
+ ring: "#22c55e",
2487
+ "chart-1": "#22c55e",
2488
+ "chart-2": "#10b981",
2489
+ "chart-3": "#059669",
2490
+ "chart-4": "#047857",
2491
+ "chart-5": "#065f46",
2492
+ radius: "0.5rem",
2493
+ sidebar: "#e0f2fe",
2494
+ "sidebar-foreground": "#374151",
2495
+ "sidebar-primary": "#22c55e",
2496
+ "sidebar-primary-foreground": "#ffffff",
2497
+ "sidebar-accent": "#d1fae5",
2498
+ "sidebar-accent-foreground": "#374151",
2499
+ "sidebar-border": "#e5e7eb",
2500
+ "sidebar-ring": "#22c55e",
2501
+ "font-sans": "DM Sans, sans-serif",
2502
+ "font-serif": "Lora, serif",
2503
+ "font-mono": "IBM Plex Mono, monospace",
2504
+ "shadow-color": "hsl(0 0% 0%)",
2505
+ "shadow-opacity": "0.1",
2506
+ "shadow-blur": "8px",
2507
+ "shadow-spread": "-1px",
2508
+ "shadow-offset-x": "0px",
2509
+ "shadow-offset-y": "4px"
2510
+ },
2511
+ dark: {
2512
+ background: "#0f172a",
2513
+ foreground: "#d1d5db",
2514
+ card: "#1e293b",
2515
+ "card-foreground": "#d1d5db",
2516
+ popover: "#1e293b",
2517
+ "popover-foreground": "#d1d5db",
2518
+ primary: "#34d399",
2519
+ "primary-foreground": "#0f172a",
2520
+ secondary: "#2d3748",
2521
+ "secondary-foreground": "#a1a1aa",
2522
+ muted: "#1e293b",
2523
+ "muted-foreground": "#6b7280",
2524
+ accent: "#374151",
2525
+ "accent-foreground": "#a1a1aa",
2526
+ destructive: "#ef4444",
2527
+ "destructive-foreground": "#0f172a",
2528
+ border: "#4b5563",
2529
+ input: "#4b5563",
2530
+ ring: "#34d399",
2531
+ "chart-1": "#34d399",
2532
+ "chart-2": "#2dd4bf",
2533
+ "chart-3": "#22c55e",
2534
+ "chart-4": "#10b981",
2535
+ "chart-5": "#059669",
2536
+ radius: "0.5rem",
2537
+ sidebar: "#1e293b",
2538
+ "sidebar-foreground": "#d1d5db",
2539
+ "sidebar-primary": "#34d399",
2540
+ "sidebar-primary-foreground": "#0f172a",
2541
+ "sidebar-accent": "#374151",
2542
+ "sidebar-accent-foreground": "#a1a1aa",
2543
+ "sidebar-border": "#4b5563",
2544
+ "sidebar-ring": "#34d399"
2545
+ }
2546
+ }
2547
+ },
2548
+ "retro-arcade": {
2549
+ label: "Retro Arcade",
2550
+ styles: {
2551
+ light: {
2552
+ background: "#fdf6e3",
2553
+ foreground: "#073642",
2554
+ card: "#eee8d5",
2555
+ "card-foreground": "#073642",
2556
+ popover: "#eee8d5",
2557
+ "popover-foreground": "#073642",
2558
+ primary: "#d33682",
2559
+ "primary-foreground": "#ffffff",
2560
+ secondary: "#2aa198",
2561
+ "secondary-foreground": "#ffffff",
2562
+ muted: "#93a1a1",
2563
+ "muted-foreground": "#073642",
2564
+ accent: "#cb4b16",
2565
+ "accent-foreground": "#ffffff",
2566
+ destructive: "#dc322f",
2567
+ "destructive-foreground": "#ffffff",
2568
+ border: "#839496",
2569
+ input: "#839496",
2570
+ ring: "#d33682",
2571
+ "chart-1": "#268bd2",
2572
+ "chart-2": "#2aa198",
2573
+ "chart-3": "#d33682",
2574
+ "chart-4": "#cb4b16",
2575
+ "chart-5": "#dc322f",
2576
+ radius: "0.25rem",
2577
+ sidebar: "#fdf6e3",
2578
+ "sidebar-foreground": "#073642",
2579
+ "sidebar-primary": "#d33682",
2580
+ "sidebar-primary-foreground": "#ffffff",
2581
+ "sidebar-accent": "#2aa198",
2582
+ "sidebar-accent-foreground": "#ffffff",
2583
+ "sidebar-border": "#839496",
2584
+ "sidebar-ring": "#d33682",
2585
+ "font-sans": "Outfit, sans-serif",
2586
+ "font-mono": "Space Mono, monospace",
2587
+ "shadow-color": "hsl(196 83% 10%)",
2588
+ "shadow-opacity": "0.15",
2589
+ "shadow-blur": "4px",
2590
+ "shadow-spread": "0px",
2591
+ "shadow-offset-x": "2px",
2592
+ "shadow-offset-y": "2px"
2593
+ },
2594
+ dark: {
2595
+ background: "#002b36",
2596
+ foreground: "#93a1a1",
2597
+ card: "#073642",
2598
+ "card-foreground": "#93a1a1",
2599
+ popover: "#073642",
2600
+ "popover-foreground": "#93a1a1",
2601
+ primary: "#d33682",
2602
+ "primary-foreground": "#ffffff",
2603
+ secondary: "#2aa198",
2604
+ "secondary-foreground": "#ffffff",
2605
+ muted: "#586e75",
2606
+ "muted-foreground": "#93a1a1",
2607
+ accent: "#cb4b16",
2608
+ "accent-foreground": "#ffffff",
2609
+ destructive: "#dc322f",
2610
+ "destructive-foreground": "#ffffff",
2611
+ border: "#586e75",
2612
+ input: "#586e75",
2613
+ ring: "#d33682",
2614
+ "chart-1": "#268bd2",
2615
+ "chart-2": "#2aa198",
2616
+ "chart-3": "#d33682",
2617
+ "chart-4": "#cb4b16",
2618
+ "chart-5": "#dc322f",
2619
+ radius: "0.25rem",
2620
+ sidebar: "#002b36",
2621
+ "sidebar-foreground": "#93a1a1",
2622
+ "sidebar-primary": "#d33682",
2623
+ "sidebar-primary-foreground": "#ffffff",
2624
+ "sidebar-accent": "#2aa198",
2625
+ "sidebar-accent-foreground": "#ffffff",
2626
+ "sidebar-border": "#586e75",
2627
+ "sidebar-ring": "#d33682"
2628
+ }
2629
+ }
2630
+ },
2631
+ "midnight-bloom": {
2632
+ label: "Midnight Bloom",
2633
+ styles: {
2634
+ light: {
2635
+ background: "#f9f9f9",
2636
+ foreground: "#333333",
2637
+ card: "#ffffff",
2638
+ "card-foreground": "#333333",
2639
+ popover: "#ffffff",
2640
+ "popover-foreground": "#333333",
2641
+ primary: "#6c5ce7",
2642
+ "primary-foreground": "#ffffff",
2643
+ secondary: "#a1c9f2",
2644
+ "secondary-foreground": "#333333",
2645
+ muted: "#c9c4b5",
2646
+ "muted-foreground": "#6e6e6e",
2647
+ accent: "#8b9467",
2648
+ "accent-foreground": "#ffffff",
2649
+ destructive: "#ef4444",
2650
+ "destructive-foreground": "#ffffff",
2651
+ border: "#d4d4d4",
2652
+ input: "#d4d4d4",
2653
+ ring: "#6c5ce7",
2654
+ "chart-1": "#6c5ce7",
2655
+ "chart-2": "#8e44ad",
2656
+ "chart-3": "#4b0082",
2657
+ "chart-4": "#6495ed",
2658
+ "chart-5": "#4682b4",
2659
+ radius: "0.5rem",
2660
+ sidebar: "#f9f9f9",
2661
+ "sidebar-foreground": "#333333",
2662
+ "sidebar-primary": "#6c5ce7",
2663
+ "sidebar-primary-foreground": "#ffffff",
2664
+ "sidebar-accent": "#8b9467",
2665
+ "sidebar-accent-foreground": "#ffffff",
2666
+ "sidebar-border": "#d4d4d4",
2667
+ "sidebar-ring": "#6c5ce7",
2668
+ "font-sans": "Montserrat, sans-serif",
2669
+ "font-serif": "Playfair Display, serif",
2670
+ "font-mono": "Source Code Pro, monospace",
2671
+ "shadow-color": "hsl(0 0% 0%)",
2672
+ "shadow-opacity": "0.1",
2673
+ "shadow-blur": "10px",
2674
+ "shadow-spread": "-2px",
2675
+ "shadow-offset-x": "0px",
2676
+ "shadow-offset-y": "5px"
2677
+ },
2678
+ dark: {
2679
+ background: "#1a1d23",
2680
+ foreground: "#e5e5e5",
2681
+ card: "#2f3436",
2682
+ "card-foreground": "#e5e5e5",
2683
+ popover: "#2f3436",
2684
+ "popover-foreground": "#e5e5e5",
2685
+ primary: "#6c5ce7",
2686
+ "primary-foreground": "#ffffff",
2687
+ secondary: "#4b0082",
2688
+ "secondary-foreground": "#e5e5e5",
2689
+ muted: "#444444",
2690
+ "muted-foreground": "#a3a3a3",
2691
+ accent: "#6495ed",
2692
+ "accent-foreground": "#e5e5e5",
2693
+ destructive: "#ef4444",
2694
+ "destructive-foreground": "#ffffff",
2695
+ border: "#444444",
2696
+ input: "#444444",
2697
+ ring: "#6c5ce7",
2698
+ "chart-1": "#6c5ce7",
2699
+ "chart-2": "#8e44ad",
2700
+ "chart-3": "#4b0082",
2701
+ "chart-4": "#6495ed",
2702
+ "chart-5": "#4682b4",
2703
+ radius: "0.5rem",
2704
+ sidebar: "#1a1d23",
2705
+ "sidebar-foreground": "#e5e5e5",
2706
+ "sidebar-primary": "#6c5ce7",
2707
+ "sidebar-primary-foreground": "#ffffff",
2708
+ "sidebar-accent": "#6495ed",
2709
+ "sidebar-accent-foreground": "#e5e5e5",
2710
+ "sidebar-border": "#444444",
2711
+ "sidebar-ring": "#6c5ce7"
2712
+ }
2713
+ }
2714
+ },
2715
+ candyland: {
2716
+ label: "Candyland",
2717
+ styles: {
2718
+ light: {
2719
+ background: "#f7f9fa",
2720
+ foreground: "#333333",
2721
+ card: "#ffffff",
2722
+ "card-foreground": "#333333",
2723
+ popover: "#ffffff",
2724
+ "popover-foreground": "#333333",
2725
+ primary: "#ffc0cb",
2726
+ "primary-foreground": "#000000",
2727
+ secondary: "#87ceeb",
2728
+ "secondary-foreground": "#000000",
2729
+ muted: "#ddd9c4",
2730
+ "muted-foreground": "#6e6e6e",
2731
+ accent: "#ffff00",
2732
+ "accent-foreground": "#000000",
2733
+ destructive: "#ef4444",
2734
+ "destructive-foreground": "#ffffff",
2735
+ border: "#d4d4d4",
2736
+ input: "#d4d4d4",
2737
+ ring: "#ffc0cb",
2738
+ "chart-1": "#ffc0cb",
2739
+ "chart-2": "#87ceeb",
2740
+ "chart-3": "#ffff00",
2741
+ "chart-4": "#ff99cc",
2742
+ "chart-5": "#33cc33",
2743
+ radius: "0.5rem",
2744
+ sidebar: "#f7f9fa",
2745
+ "sidebar-foreground": "#333333",
2746
+ "sidebar-primary": "#ffc0cb",
2747
+ "sidebar-primary-foreground": "#000000",
2748
+ "sidebar-accent": "#ffff00",
2749
+ "sidebar-accent-foreground": "#000000",
2750
+ "sidebar-border": "#d4d4d4",
2751
+ "sidebar-ring": "#ffc0cb",
2752
+ "font-sans": "Poppins, sans-serif",
2753
+ "font-mono": "Roboto Mono, monospace"
2754
+ },
2755
+ dark: {
2756
+ background: "#1a1d23",
2757
+ foreground: "#e5e5e5",
2758
+ card: "#2f3436",
2759
+ "card-foreground": "#e5e5e5",
2760
+ popover: "#2f3436",
2761
+ "popover-foreground": "#e5e5e5",
2762
+ primary: "#ff99cc",
2763
+ "primary-foreground": "#000000",
2764
+ secondary: "#33cc33",
2765
+ "secondary-foreground": "#000000",
2766
+ muted: "#444444",
2767
+ "muted-foreground": "#a3a3a3",
2768
+ accent: "#87ceeb",
2769
+ "accent-foreground": "#000000",
2770
+ destructive: "#ef4444",
2771
+ "destructive-foreground": "#ffffff",
2772
+ border: "#444444",
2773
+ input: "#444444",
2774
+ ring: "#ff99cc",
2775
+ "chart-1": "#ff99cc",
2776
+ "chart-2": "#33cc33",
2777
+ "chart-3": "#87ceeb",
2778
+ "chart-4": "#ffff00",
2779
+ "chart-5": "#ffcc00",
2780
+ radius: "0.5rem",
2781
+ sidebar: "#1a1d23",
2782
+ "sidebar-foreground": "#e5e5e5",
2783
+ "sidebar-primary": "#ff99cc",
2784
+ "sidebar-primary-foreground": "#000000",
2785
+ "sidebar-accent": "#87ceeb",
2786
+ "sidebar-accent-foreground": "#000000",
2787
+ "sidebar-border": "#444444",
2788
+ "sidebar-ring": "#ff99cc"
2789
+ }
2790
+ }
2791
+ },
2792
+ "northern-lights": {
2793
+ label: "Northern Lights",
2794
+ styles: {
2795
+ light: {
2796
+ background: "#f9f9fa",
2797
+ foreground: "#333333",
2798
+ card: "#ffffff",
2799
+ "card-foreground": "#333333",
2800
+ popover: "#ffffff",
2801
+ "popover-foreground": "#333333",
2802
+ primary: "#34a85a",
2803
+ "primary-foreground": "#ffffff",
2804
+ secondary: "#6495ed",
2805
+ "secondary-foreground": "#ffffff",
2806
+ muted: "#ddd9c4",
2807
+ "muted-foreground": "#6e6e6e",
2808
+ accent: "#66d9ef",
2809
+ "accent-foreground": "#333333",
2810
+ destructive: "#ef4444",
2811
+ "destructive-foreground": "#ffffff",
2812
+ border: "#d4d4d4",
2813
+ input: "#d4d4d4",
2814
+ ring: "#34a85a",
2815
+ "chart-1": "#34a85a",
2816
+ "chart-2": "#6495ed",
2817
+ "chart-3": "#66d9ef",
2818
+ "chart-4": "#4682b4",
2819
+ "chart-5": "#1a9641",
2820
+ radius: "0.5rem",
2821
+ sidebar: "#f9f9fa",
2822
+ "sidebar-foreground": "#333333",
2823
+ "sidebar-primary": "#34a85a",
2824
+ "sidebar-primary-foreground": "#ffffff",
2825
+ "sidebar-accent": "#66d9ef",
2826
+ "sidebar-accent-foreground": "#333333",
2827
+ "sidebar-border": "#d4d4d4",
2828
+ "sidebar-ring": "#34a85a",
2829
+ "font-sans": "Plus Jakarta Sans, sans-serif",
2830
+ "font-serif": "Source Serif 4, serif",
2831
+ "font-mono": "JetBrains Mono, monospace"
2832
+ },
2833
+ dark: {
2834
+ background: "#1a1d23",
2835
+ foreground: "#e5e5e5",
2836
+ card: "#2f3436",
2837
+ "card-foreground": "#e5e5e5",
2838
+ popover: "#2f3436",
2839
+ "popover-foreground": "#e5e5e5",
2840
+ primary: "#34a85a",
2841
+ "primary-foreground": "#ffffff",
2842
+ secondary: "#4682b4",
2843
+ "secondary-foreground": "#e5e5e5",
2844
+ muted: "#444444",
2845
+ "muted-foreground": "#a3a3a3",
2846
+ accent: "#6495ed",
2847
+ "accent-foreground": "#e5e5e5",
2848
+ destructive: "#ef4444",
2849
+ "destructive-foreground": "#ffffff",
2850
+ border: "#444444",
2851
+ input: "#444444",
2852
+ ring: "#34a85a",
2853
+ "chart-1": "#34a85a",
2854
+ "chart-2": "#4682b4",
2855
+ "chart-3": "#6495ed",
2856
+ "chart-4": "#66d9ef",
2857
+ "chart-5": "#1a9641",
2858
+ radius: "0.5rem",
2859
+ sidebar: "#1a1d23",
2860
+ "sidebar-foreground": "#e5e5e5",
2861
+ "sidebar-primary": "#34a85a",
2862
+ "sidebar-primary-foreground": "#ffffff",
2863
+ "sidebar-accent": "#6495ed",
2864
+ "sidebar-accent-foreground": "#e5e5e5",
2865
+ "sidebar-border": "#444444",
2866
+ "sidebar-ring": "#34a85a"
2867
+ }
2868
+ }
2869
+ },
2870
+ "vintage-paper": {
2871
+ label: "Vintage Paper",
2872
+ styles: {
2873
+ light: {
2874
+ background: "#f5f1e6",
2875
+ foreground: "#4a3f35",
2876
+ card: "#fffcf5",
2877
+ "card-foreground": "#4a3f35",
2878
+ popover: "#fffcf5",
2879
+ "popover-foreground": "#4a3f35",
2880
+ primary: "#a67c52",
2881
+ "primary-foreground": "#ffffff",
2882
+ secondary: "#e2d8c3",
2883
+ "secondary-foreground": "#5c4d3f",
2884
+ muted: "#ece5d8",
2885
+ "muted-foreground": "#7d6b56",
2886
+ accent: "#d4c8aa",
2887
+ "accent-foreground": "#4a3f35",
2888
+ destructive: "#b54a35",
2889
+ "destructive-foreground": "#ffffff",
2890
+ border: "#dbd0ba",
2891
+ input: "#dbd0ba",
2892
+ ring: "#a67c52",
2893
+ "chart-1": "#a67c52",
2894
+ "chart-2": "#8d6e4c",
2895
+ "chart-3": "#735a3a",
2896
+ "chart-4": "#b3906f",
2897
+ "chart-5": "#c0a080",
2898
+ radius: "0.25rem",
2899
+ sidebar: "#ece5d8",
2900
+ "sidebar-foreground": "#4a3f35",
2901
+ "sidebar-primary": "#a67c52",
2902
+ "sidebar-primary-foreground": "#ffffff",
2903
+ "sidebar-accent": "#d4c8aa",
2904
+ "sidebar-accent-foreground": "#4a3f35",
2905
+ "sidebar-border": "#dbd0ba",
2906
+ "sidebar-ring": "#a67c52",
2907
+ "font-sans": "Libre Baskerville, serif",
2908
+ "font-serif": "Lora, serif",
2909
+ "font-mono": "IBM Plex Mono, monospace",
2910
+ "shadow-color": "hsl(28 13% 20%)",
2911
+ "shadow-opacity": "0.12",
2912
+ "shadow-blur": "5px",
2913
+ "shadow-spread": "0px",
2914
+ "shadow-offset-x": "2px",
2915
+ "shadow-offset-y": "3px"
2916
+ },
2917
+ dark: {
2918
+ background: "#2d2621",
2919
+ foreground: "#ece5d8",
2920
+ card: "#3a322c",
2921
+ "card-foreground": "#ece5d8",
2922
+ popover: "#3a322c",
2923
+ "popover-foreground": "#ece5d8",
2924
+ primary: "#c0a080",
2925
+ "primary-foreground": "#2d2621",
2926
+ secondary: "#4a4039",
2927
+ "secondary-foreground": "#ece5d8",
2928
+ muted: "#3a322c",
2929
+ "muted-foreground": "#c5bcac",
2930
+ accent: "#59493e",
2931
+ "accent-foreground": "#ece5d8",
2932
+ destructive: "#b54a35",
2933
+ "destructive-foreground": "#ffffff",
2934
+ border: "#4a4039",
2935
+ input: "#4a4039",
2936
+ ring: "#c0a080",
2937
+ "chart-1": "#c0a080",
2938
+ "chart-2": "#b3906f",
2939
+ "chart-3": "#a67c52",
2940
+ "chart-4": "#8d6e4c",
2941
+ "chart-5": "#735a3a",
2942
+ radius: "0.25rem",
2943
+ sidebar: "#2d2621",
2944
+ "sidebar-foreground": "#ece5d8",
2945
+ "sidebar-primary": "#c0a080",
2946
+ "sidebar-primary-foreground": "#2d2621",
2947
+ "sidebar-accent": "#59493e",
2948
+ "sidebar-accent-foreground": "#ece5d8",
2949
+ "sidebar-border": "#4a4039",
2950
+ "sidebar-ring": "#c0a080"
2951
+ }
2952
+ }
2953
+ },
2954
+ "sunset-horizon": {
2955
+ label: "Sunset Horizon",
2956
+ styles: {
2957
+ light: {
2958
+ background: "#fff9f5",
2959
+ foreground: "#3d3436",
2960
+ card: "#ffffff",
2961
+ "card-foreground": "#3d3436",
2962
+ popover: "#ffffff",
2963
+ "popover-foreground": "#3d3436",
2964
+ primary: "#ff7e5f",
2965
+ "primary-foreground": "#ffffff",
2966
+ secondary: "#ffedea",
2967
+ "secondary-foreground": "#b35340",
2968
+ muted: "#fff0eb",
2969
+ "muted-foreground": "#78716C",
2970
+ accent: "#feb47b",
2971
+ "accent-foreground": "#3d3436",
2972
+ destructive: "#e63946",
2973
+ "destructive-foreground": "#ffffff",
2974
+ border: "#ffe0d6",
2975
+ input: "#ffe0d6",
2976
+ ring: "#ff7e5f",
2977
+ "chart-1": "#ff7e5f",
2978
+ "chart-2": "#feb47b",
2979
+ "chart-3": "#ffcaa7",
2980
+ "chart-4": "#ffad8f",
2981
+ "chart-5": "#ce6a57",
2982
+ radius: "0.625rem",
2983
+ sidebar: "#fff0eb",
2984
+ "sidebar-foreground": "#3d3436",
2985
+ "sidebar-primary": "#ff7e5f",
2986
+ "sidebar-primary-foreground": "#ffffff",
2987
+ "sidebar-accent": "#feb47b",
2988
+ "sidebar-accent-foreground": "#3d3436",
2989
+ "sidebar-border": "#ffe0d6",
2990
+ "sidebar-ring": "#ff7e5f",
2991
+ "font-sans": "Montserrat, sans-serif",
2992
+ "font-serif": "Merriweather, serif",
2993
+ "font-mono": "Ubuntu Mono, monospace",
2994
+ "shadow-color": "hsl(0 0% 0%)",
2995
+ "shadow-opacity": "0.09",
2996
+ "shadow-blur": "12px",
2997
+ "shadow-spread": "-3px",
2998
+ "shadow-offset-x": "0px",
2999
+ "shadow-offset-y": "6px"
3000
+ },
3001
+ dark: {
3002
+ background: "#2a2024",
3003
+ foreground: "#f2e9e4",
3004
+ card: "#392f35",
3005
+ "card-foreground": "#f2e9e4",
3006
+ popover: "#392f35",
3007
+ "popover-foreground": "#f2e9e4",
3008
+ primary: "#ff7e5f",
3009
+ "primary-foreground": "#ffffff",
3010
+ secondary: "#463a41",
3011
+ "secondary-foreground": "#f2e9e4",
3012
+ muted: "#392f35",
3013
+ "muted-foreground": "#d7c6bc",
3014
+ accent: "#feb47b",
3015
+ "accent-foreground": "#2a2024",
3016
+ destructive: "#e63946",
3017
+ "destructive-foreground": "#ffffff",
3018
+ border: "#463a41",
3019
+ input: "#463a41",
3020
+ ring: "#ff7e5f",
3021
+ "chart-1": "#ff7e5f",
3022
+ "chart-2": "#feb47b",
3023
+ "chart-3": "#ffcaa7",
3024
+ "chart-4": "#ffad8f",
3025
+ "chart-5": "#ce6a57",
3026
+ radius: "0.625rem",
3027
+ sidebar: "#2a2024",
3028
+ "sidebar-foreground": "#f2e9e4",
3029
+ "sidebar-primary": "#ff7e5f",
3030
+ "sidebar-primary-foreground": "#ffffff",
3031
+ "sidebar-accent": "#feb47b",
3032
+ "sidebar-accent-foreground": "#2a2024",
3033
+ "sidebar-border": "#463a41",
3034
+ "sidebar-ring": "#ff7e5f"
3035
+ }
3036
+ }
3037
+ },
3038
+ "starry-night": {
3039
+ label: "Starry Night",
3040
+ createdAt: "2025-04-16",
3041
+ styles: {
3042
+ light: {
3043
+ background: "#f5f7fa",
3044
+ foreground: "#1a2238",
3045
+ card: "#e3eaf2",
3046
+ "card-foreground": "#1a2238",
3047
+ popover: "#fffbe6",
3048
+ "popover-foreground": "#1a2238",
3049
+ primary: "#3a5ba0",
3050
+ "primary-foreground": "#fffbe6",
3051
+ secondary: "#f7c873",
3052
+ "secondary-foreground": "#1a2238",
3053
+ muted: "#e5e5df",
3054
+ "muted-foreground": "#3a5ba0",
3055
+ accent: "#6ea3c1",
3056
+ "accent-foreground": "#fffbe6",
3057
+ destructive: "#2d1e2f",
3058
+ "destructive-foreground": "#fffbe6",
3059
+ border: "#b0b8c1",
3060
+ input: "#6ea3c1",
3061
+ ring: "#f7c873",
3062
+ "chart-1": "#3a5ba0",
3063
+ "chart-2": "#f7c873",
3064
+ "chart-3": "#6ea3c1",
3065
+ "chart-4": "#b0b8c1",
3066
+ "chart-5": "#2d1e2f",
3067
+ sidebar: "#e3eaf2",
3068
+ "sidebar-foreground": "#1a2238",
3069
+ "sidebar-primary": "#3a5ba0",
3070
+ "sidebar-primary-foreground": "#fffbe6",
3071
+ "sidebar-accent": "#f7c873",
3072
+ "sidebar-accent-foreground": "#1a2238",
3073
+ "sidebar-border": "#b0b8c1",
3074
+ "sidebar-ring": "#f7c873",
3075
+ "font-sans": "Libre Baskerville, serif",
3076
+ radius: "0.5rem"
3077
+ },
3078
+ dark: {
3079
+ background: "#181a24",
3080
+ foreground: "#e6eaf3",
3081
+ card: "#23243a",
3082
+ "card-foreground": "#e6eaf3",
3083
+ popover: "#23243a",
3084
+ "popover-foreground": "#ffe066",
3085
+ primary: "#3a5ba0",
3086
+ "primary-foreground": "#ffe066",
3087
+ secondary: "#ffe066",
3088
+ "secondary-foreground": "#23243a",
3089
+ muted: "#23243a",
3090
+ "muted-foreground": "#7a88a1",
3091
+ accent: "#bccdf0",
3092
+ "accent-foreground": "#181a24",
3093
+ destructive: "#a04a6c",
3094
+ "destructive-foreground": "#ffe066",
3095
+ border: "#2d2e3e",
3096
+ input: "#3a5ba0",
3097
+ ring: "#ffe066",
3098
+ "chart-1": "#3a5ba0",
3099
+ "chart-2": "#ffe066",
3100
+ "chart-3": "#6ea3c1",
3101
+ "chart-4": "#7a88a1",
3102
+ "chart-5": "#a04a6c",
3103
+ sidebar: "#23243a",
3104
+ "sidebar-foreground": "#e6eaf3",
3105
+ "sidebar-primary": "#3a5ba0",
3106
+ "sidebar-primary-foreground": "#ffe066",
3107
+ "sidebar-accent": "#ffe066",
3108
+ "sidebar-accent-foreground": "#23243a",
3109
+ "sidebar-border": "#2d2e3e",
3110
+ "sidebar-ring": "#ffe066",
3111
+ radius: "0.5rem"
3112
+ }
3113
+ }
3114
+ },
3115
+ claude: {
3116
+ label: "Claude",
3117
+ styles: {
3118
+ light: {
3119
+ background: "#faf9f5",
3120
+ foreground: "#3d3929",
3121
+ card: "#faf9f5",
3122
+ "card-foreground": "#141413",
3123
+ popover: "#ffffff",
3124
+ "popover-foreground": "#28261b",
3125
+ primary: "#c96442",
3126
+ "primary-foreground": "#ffffff",
3127
+ secondary: "#e9e6dc",
3128
+ "secondary-foreground": "#535146",
3129
+ muted: "#ede9de",
3130
+ "muted-foreground": "#83827d",
3131
+ accent: "#e9e6dc",
3132
+ "accent-foreground": "#28261b",
3133
+ destructive: "#141413",
3134
+ "destructive-foreground": "#ffffff",
3135
+ border: "#dad9d4",
3136
+ input: "#b4b2a7",
3137
+ ring: "#c96442",
3138
+ "chart-1": "#b05730",
3139
+ "chart-2": "#9c87f5",
3140
+ "chart-3": "#ded8c4",
3141
+ "chart-4": "#dbd3f0",
3142
+ "chart-5": "#b4552d",
3143
+ sidebar: "#f5f4ee",
3144
+ "sidebar-foreground": "#3d3d3a",
3145
+ "sidebar-primary": "#c96442",
3146
+ "sidebar-primary-foreground": "#fbfbfb",
3147
+ "sidebar-accent": "#e9e6dc",
3148
+ "sidebar-accent-foreground": "#343434",
3149
+ "sidebar-border": "#ebebeb",
3150
+ "sidebar-ring": "#b5b5b5",
3151
+ radius: "0.5rem"
3152
+ },
3153
+ dark: {
3154
+ background: "#262624",
3155
+ foreground: "#c3c0b6",
3156
+ card: "#262624",
3157
+ "card-foreground": "#faf9f5",
3158
+ popover: "#30302e",
3159
+ "popover-foreground": "#e5e5e2",
3160
+ primary: "#d97757",
3161
+ "primary-foreground": "#ffffff",
3162
+ secondary: "#faf9f5",
3163
+ "secondary-foreground": "#30302e",
3164
+ muted: "#1b1b19",
3165
+ "muted-foreground": "#b7b5a9",
3166
+ accent: "#1a1915",
3167
+ "accent-foreground": "#f5f4ee",
3168
+ destructive: "#ef4444",
3169
+ "destructive-foreground": "#ffffff",
3170
+ border: "#3e3e38",
3171
+ input: "#52514a",
3172
+ ring: "#d97757",
3173
+ "chart-1": "#b05730",
3174
+ "chart-2": "#9c87f5",
3175
+ "chart-3": "#1a1915",
3176
+ "chart-4": "#2f2b48",
3177
+ "chart-5": "#b4552d",
3178
+ sidebar: "#1f1e1d",
3179
+ "sidebar-foreground": "#c3c0b6",
3180
+ "sidebar-primary": "#343434",
3181
+ "sidebar-primary-foreground": "#fbfbfb",
3182
+ "sidebar-accent": "#0f0f0e",
3183
+ "sidebar-accent-foreground": "#c3c0b6",
3184
+ "sidebar-border": "#ebebeb",
3185
+ "sidebar-ring": "#b5b5b5"
3186
+ }
3187
+ }
3188
+ },
3189
+ vercel: {
3190
+ label: "Vercel",
3191
+ createdAt: "2025-04-13",
3192
+ styles: {
3193
+ light: {
3194
+ background: "oklch(0.99 0 0)",
3195
+ foreground: "oklch(0 0 0)",
3196
+ card: "oklch(1.00 0 0)",
3197
+ "card-foreground": "oklch(0 0 0)",
3198
+ popover: "oklch(0.99 0 0)",
3199
+ "popover-foreground": "oklch(0 0 0)",
3200
+ primary: "oklch(0 0 0)",
3201
+ "primary-foreground": "oklch(1.00 0 0)",
3202
+ secondary: "oklch(0.94 0 0)",
3203
+ "secondary-foreground": "oklch(0 0 0)",
3204
+ muted: "oklch(0.97 0 0)",
3205
+ "muted-foreground": "oklch(0.44 0 0)",
3206
+ accent: "oklch(0.94 0 0)",
3207
+ "accent-foreground": "oklch(0 0 0)",
3208
+ destructive: "oklch(0.63 0.19 23.03)",
3209
+ "destructive-foreground": "oklch(1.00 0 0)",
3210
+ border: "oklch(0.92 0 0)",
3211
+ input: "oklch(0.94 0 0)",
3212
+ ring: "oklch(0 0 0)",
3213
+ "chart-1": "oklch(0.81 0.17 75.35)",
3214
+ "chart-2": "oklch(0.55 0.22 264.53)",
3215
+ "chart-3": "oklch(0.72 0 0)",
3216
+ "chart-4": "oklch(0.92 0 0)",
3217
+ "chart-5": "oklch(0.56 0 0)",
3218
+ sidebar: "oklch(0.99 0 0)",
3219
+ "sidebar-foreground": "oklch(0 0 0)",
3220
+ "sidebar-primary": "oklch(0 0 0)",
3221
+ "sidebar-primary-foreground": "oklch(1.00 0 0)",
3222
+ "sidebar-accent": "oklch(0.94 0 0)",
3223
+ "sidebar-accent-foreground": "oklch(0 0 0)",
3224
+ "sidebar-border": "oklch(0.94 0 0)",
3225
+ "sidebar-ring": "oklch(0 0 0)",
3226
+ "font-sans": "Geist, sans-serif",
3227
+ "font-serif": "Georgia, serif",
3228
+ "font-mono": "Geist Mono, monospace",
3229
+ radius: "0.5rem",
3230
+ "shadow-color": "hsl(0 0% 0%)",
3231
+ "shadow-opacity": "0.18",
3232
+ "shadow-blur": "2px",
3233
+ "shadow-spread": "0px",
3234
+ "shadow-offset-x": "0px",
3235
+ "shadow-offset-y": "1px"
3236
+ },
3237
+ dark: {
3238
+ background: "oklch(0 0 0)",
3239
+ foreground: "oklch(1.00 0 0)",
3240
+ card: "oklch(0.14 0 0)",
3241
+ "card-foreground": "oklch(1.00 0 0)",
3242
+ popover: "oklch(0.18 0 0)",
3243
+ "popover-foreground": "oklch(1.00 0 0)",
3244
+ primary: "oklch(1.00 0 0)",
3245
+ "primary-foreground": "oklch(0 0 0)",
3246
+ secondary: "oklch(0.25 0 0)",
3247
+ "secondary-foreground": "oklch(1.00 0 0)",
3248
+ muted: "oklch(0.23 0 0)",
3249
+ "muted-foreground": "oklch(0.72 0 0)",
3250
+ accent: "oklch(0.32 0 0)",
3251
+ "accent-foreground": "oklch(1.00 0 0)",
3252
+ destructive: "oklch(0.69 0.20 23.91)",
3253
+ "destructive-foreground": "oklch(0 0 0)",
3254
+ border: "oklch(0.26 0 0)",
3255
+ input: "oklch(0.32 0 0)",
3256
+ ring: "oklch(0.72 0 0)",
3257
+ "chart-1": "oklch(0.81 0.17 75.35)",
3258
+ "chart-2": "oklch(0.58 0.21 260.84)",
3259
+ "chart-3": "oklch(0.56 0 0)",
3260
+ "chart-4": "oklch(0.44 0 0)",
3261
+ "chart-5": "oklch(0.92 0 0)",
3262
+ sidebar: "oklch(0.18 0 0)",
3263
+ "sidebar-foreground": "oklch(1.00 0 0)",
3264
+ "sidebar-primary": "oklch(1.00 0 0)",
3265
+ "sidebar-primary-foreground": "oklch(0 0 0)",
3266
+ "sidebar-accent": "oklch(0.32 0 0)",
3267
+ "sidebar-accent-foreground": "oklch(1.00 0 0)",
3268
+ "sidebar-border": "oklch(0.32 0 0)",
3269
+ "sidebar-ring": "oklch(0.72 0 0)",
3270
+ "font-sans": "Geist, sans-serif",
3271
+ "font-serif": "Georgia, serif",
3272
+ "font-mono": "Geist Mono, monospace"
3273
+ }
3274
+ }
3275
+ },
3276
+ mono: {
3277
+ label: "Mono",
3278
+ createdAt: "2025-04-20",
3279
+ styles: {
3280
+ light: {
3281
+ background: "#ffffff",
3282
+ foreground: "#0a0a0a",
3283
+ card: "#ffffff",
3284
+ "card-foreground": "#0a0a0a",
3285
+ popover: "#ffffff",
3286
+ "popover-foreground": "#0a0a0a",
3287
+ primary: "#737373",
3288
+ "primary-foreground": "#fafafa",
3289
+ secondary: "#f5f5f5",
3290
+ "secondary-foreground": "#171717",
3291
+ muted: "#f5f5f5",
3292
+ "muted-foreground": "#717171",
3293
+ accent: "#f5f5f5",
3294
+ "accent-foreground": "#171717",
3295
+ destructive: "#e7000b",
3296
+ "destructive-foreground": "#f5f5f5",
3297
+ border: "#e5e5e5",
3298
+ input: "#e5e5e5",
3299
+ ring: "#a1a1a1",
3300
+ "chart-1": "#737373",
3301
+ "chart-2": "#737373",
3302
+ "chart-3": "#737373",
3303
+ "chart-4": "#737373",
3304
+ "chart-5": "#737373",
3305
+ sidebar: "#fafafa",
3306
+ "sidebar-foreground": "#0a0a0a",
3307
+ "sidebar-primary": "#171717",
3308
+ "sidebar-primary-foreground": "#fafafa",
3309
+ "sidebar-accent": "#f5f5f5",
3310
+ "sidebar-accent-foreground": "#171717",
3311
+ "sidebar-border": "#e5e5e5",
3312
+ "sidebar-ring": "#a1a1a1",
3313
+ "font-sans": "Geist Mono, monospace",
3314
+ "font-serif": "Geist Mono, monospace",
3315
+ "font-mono": "Geist Mono, monospace",
3316
+ radius: "0rem",
3317
+ "shadow-color": "hsl(0 0% 0%)",
3318
+ "shadow-opacity": "0",
3319
+ "shadow-blur": "0px",
3320
+ "shadow-spread": "0px",
3321
+ "shadow-offset-x": "0px",
3322
+ "shadow-offset-y": "1px"
3323
+ },
3324
+ dark: {
3325
+ background: "#0a0a0a",
3326
+ foreground: "#fafafa",
3327
+ card: "#191919",
3328
+ "card-foreground": "#fafafa",
3329
+ popover: "#262626",
3330
+ "popover-foreground": "#fafafa",
3331
+ primary: "#737373",
3332
+ "primary-foreground": "#fafafa",
3333
+ secondary: "#262626",
3334
+ "secondary-foreground": "#fafafa",
3335
+ muted: "#262626",
3336
+ "muted-foreground": "#a1a1a1",
3337
+ accent: "#404040",
3338
+ "accent-foreground": "#fafafa",
3339
+ destructive: "#ff6467",
3340
+ "destructive-foreground": "#262626",
3341
+ border: "#383838",
3342
+ input: "#525252",
3343
+ ring: "#737373",
3344
+ "chart-1": "#737373",
3345
+ "chart-2": "#737373",
3346
+ "chart-3": "#737373",
3347
+ "chart-4": "#737373",
3348
+ "chart-5": "#737373",
3349
+ sidebar: "#171717",
3350
+ "sidebar-foreground": "#fafafa",
3351
+ "sidebar-primary": "#fafafa",
3352
+ "sidebar-primary-foreground": "#171717",
3353
+ "sidebar-accent": "#262626",
3354
+ "sidebar-accent-foreground": "#fafafa",
3355
+ "sidebar-border": "#ffffff",
3356
+ "sidebar-ring": "#525252"
3357
+ }
3358
+ }
3359
+ },
3360
+ "soft-pop": {
3361
+ label: "Soft Pop",
3362
+ createdAt: "2025-07-08",
3363
+ styles: {
3364
+ light: {
3365
+ background: "#f7f9f3",
3366
+ foreground: "#000000",
3367
+ card: "#ffffff",
3368
+ "card-foreground": "#000000",
3369
+ popover: "#ffffff",
3370
+ "popover-foreground": "#000000",
3371
+ primary: "#4f46e5",
3372
+ "primary-foreground": "#ffffff",
3373
+ secondary: "#14b8a6",
3374
+ "secondary-foreground": "#ffffff",
3375
+ muted: "#f0f0f0",
3376
+ "muted-foreground": "#333333",
3377
+ accent: "#f59e0b",
3378
+ "accent-foreground": "#000000",
3379
+ destructive: "#ef4444",
3380
+ "destructive-foreground": "#ffffff",
3381
+ border: "#000000",
3382
+ input: "#737373",
3383
+ ring: "#a5b4fc",
3384
+ "chart-1": "#4f46e5",
3385
+ "chart-2": "#14b8a6",
3386
+ "chart-3": "#f59e0b",
3387
+ "chart-4": "#ec4899",
3388
+ "chart-5": "#22c55e",
3389
+ sidebar: "#f7f9f3",
3390
+ "sidebar-foreground": "#000000",
3391
+ "sidebar-primary": "#4f46e5",
3392
+ "sidebar-primary-foreground": "#ffffff",
3393
+ "sidebar-accent": "#f59e0b",
3394
+ "sidebar-accent-foreground": "#000000",
3395
+ "sidebar-border": "#000000",
3396
+ "sidebar-ring": "#a5b4fc",
3397
+ "font-sans": "DM Sans, sans-serif",
3398
+ "font-serif": "DM Sans, sans-serif",
3399
+ "font-mono": "Space Mono, monospace",
3400
+ radius: "1rem",
3401
+ "shadow-color": "#1a1a1a",
3402
+ "shadow-opacity": "0.05",
3403
+ "shadow-blur": "0px",
3404
+ "shadow-spread": "0px",
3405
+ "shadow-offset-x": "0px",
3406
+ "shadow-offset-y": "0px",
3407
+ "letter-spacing": "normal",
3408
+ spacing: "0.25rem"
3409
+ },
3410
+ dark: {
3411
+ background: "#000000",
3412
+ foreground: "#ffffff",
3413
+ card: "#1a212b",
3414
+ "card-foreground": "#ffffff",
3415
+ popover: "#1a212b",
3416
+ "popover-foreground": "#ffffff",
3417
+ primary: "#818cf8",
3418
+ "primary-foreground": "#000000",
3419
+ secondary: "#2dd4bf",
3420
+ "secondary-foreground": "#000000",
3421
+ muted: "#333333",
3422
+ "muted-foreground": "#cccccc",
3423
+ accent: "#fcd34d",
3424
+ "accent-foreground": "#000000",
3425
+ destructive: "#f87171",
3426
+ "destructive-foreground": "#000000",
3427
+ border: "#545454",
3428
+ input: "#ffffff",
3429
+ ring: "#818cf8",
3430
+ "chart-1": "#818cf8",
3431
+ "chart-2": "#2dd4bf",
3432
+ "chart-3": "#fcd34d",
3433
+ "chart-4": "#f472b6",
3434
+ "chart-5": "#4ade80",
3435
+ sidebar: "#000000",
3436
+ "sidebar-foreground": "#ffffff",
3437
+ "sidebar-primary": "#818cf8",
3438
+ "sidebar-primary-foreground": "#000000",
3439
+ "sidebar-accent": "#fcd34d",
3440
+ "sidebar-accent-foreground": "#000000",
3441
+ "sidebar-border": "#ffffff",
3442
+ "sidebar-ring": "#818cf8",
3443
+ "font-sans": "DM Sans, sans-serif",
3444
+ "font-serif": "DM Sans, sans-serif",
3445
+ "font-mono": "Space Mono, monospace",
3446
+ radius: "1rem",
3447
+ "shadow-color": "#1a1a1a",
3448
+ "shadow-opacity": "0.05",
3449
+ "shadow-blur": "0px",
3450
+ "shadow-spread": "0px",
3451
+ "shadow-offset-x": "0px",
3452
+ "shadow-offset-y": "0px",
3453
+ "letter-spacing": "normal",
3454
+ spacing: "0.25rem"
3455
+ }
3456
+ }
3457
+ }
3458
+ };
3459
+ function getPresetIds() {
3460
+ return Object.keys(tweakcnPresets);
3461
+ }
3462
+ function getPresetById(id) {
3463
+ return tweakcnPresets[id] || null;
3464
+ }
3465
+ function getPresetLabels() {
3466
+ return Object.values(tweakcnPresets).map((preset) => preset.label);
3467
+ }
3468
+ function searchPresets(query) {
3469
+ const lowerQuery = query.toLowerCase();
3470
+ return Object.entries(tweakcnPresets).filter(
3471
+ ([id, preset]) => preset.label.toLowerCase().includes(lowerQuery) || id.toLowerCase().includes(lowerQuery)
3472
+ ).map(([id, preset]) => ({ id, preset }));
3473
+ }
3474
+ function getPresetsCount() {
3475
+ return Object.keys(tweakcnPresets).length;
3476
+ }
3477
+ function getPresetEntries() {
3478
+ return Object.entries(tweakcnPresets);
3479
+ }
3480
+
3481
+ // src/utils/preset-validation.ts
3482
+ var REQUIRED_PROPERTIES = [
3483
+ "background",
3484
+ "foreground",
3485
+ "primary",
3486
+ "primary-foreground",
3487
+ "secondary",
3488
+ "secondary-foreground",
3489
+ "card",
3490
+ "card-foreground"
3491
+ ];
3492
+ var RECOMMENDED_PROPERTIES = [
3493
+ "border",
3494
+ "input",
3495
+ "ring",
3496
+ "muted",
3497
+ "muted-foreground",
3498
+ "accent",
3499
+ "accent-foreground",
3500
+ "destructive",
3501
+ "destructive-foreground",
3502
+ "popover",
3503
+ "popover-foreground"
3504
+ ];
3505
+ function validateTweakCNPreset(preset, presetId) {
3506
+ const errors = [];
3507
+ const warnings = [];
3508
+ const prefix = presetId ? `Preset "${presetId}":` : "Preset:";
3509
+ if (!preset || typeof preset !== "object") {
3510
+ errors.push(`${prefix} Must be an object`);
3511
+ return { isValid: false, errors, warnings };
3512
+ }
3513
+ if (!preset.label || typeof preset.label !== "string" || preset.label.trim() === "") {
3514
+ errors.push(`${prefix} Must have a non-empty label`);
3515
+ }
3516
+ if (!preset.styles || typeof preset.styles !== "object") {
3517
+ errors.push(`${prefix} Must have a styles object`);
3518
+ return { isValid: false, errors, warnings };
3519
+ }
3520
+ const modes = ["light", "dark"];
3521
+ for (const mode of modes) {
3522
+ const modeStyles = preset.styles[mode];
3523
+ if (!modeStyles || typeof modeStyles !== "object") {
3524
+ errors.push(`${prefix} Must have ${mode} mode styles`);
3525
+ continue;
3526
+ }
3527
+ for (const prop of REQUIRED_PROPERTIES) {
3528
+ if (!modeStyles[prop] || typeof modeStyles[prop] !== "string") {
3529
+ errors.push(`${prefix} Missing required ${mode} property: ${prop}`);
3530
+ }
3531
+ }
3532
+ for (const prop of RECOMMENDED_PROPERTIES) {
3533
+ if (!modeStyles[prop]) {
3534
+ warnings.push(`${prefix} Missing recommended ${mode} property: ${prop}`);
3535
+ }
3536
+ }
3537
+ for (const [key, value] of Object.entries(modeStyles)) {
3538
+ if (typeof value === "string" && value.trim() !== "") {
3539
+ if (!isValidColorValue(value)) {
3540
+ warnings.push(`${prefix} ${mode}.${key} may not be a valid color: "${value}"`);
3541
+ }
3542
+ }
3543
+ }
3544
+ }
3545
+ return {
3546
+ isValid: errors.length === 0,
3547
+ errors,
3548
+ warnings
3549
+ };
3550
+ }
3551
+ function validateCustomPresets(customPresets) {
3552
+ const allErrors = [];
3553
+ const allWarnings = [];
3554
+ if (!customPresets || typeof customPresets !== "object") {
3555
+ return {
3556
+ isValid: false,
3557
+ errors: ["Custom presets must be an object"],
3558
+ warnings: []
3559
+ };
3560
+ }
3561
+ for (const [id, preset] of Object.entries(customPresets)) {
3562
+ if (!id || typeof id !== "string" || id.trim() === "") {
3563
+ allErrors.push("Preset ID must be a non-empty string");
3564
+ continue;
3565
+ }
3566
+ if (!/^[a-z0-9-_]+$/.test(id)) {
3567
+ allWarnings.push(`Preset ID "${id}" should only contain lowercase letters, numbers, hyphens, and underscores`);
3568
+ }
3569
+ const result = validateTweakCNPreset(preset, id);
3570
+ allErrors.push(...result.errors);
3571
+ allWarnings.push(...result.warnings);
3572
+ }
3573
+ return {
3574
+ isValid: allErrors.length === 0,
3575
+ errors: allErrors,
3576
+ warnings: allWarnings
3577
+ };
3578
+ }
3579
+ function isValidColorValue(value) {
3580
+ const trimmed = value.trim();
3581
+ if (/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(trimmed)) {
3582
+ return true;
3583
+ }
3584
+ if (/^hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)$/i.test(trimmed)) {
3585
+ return true;
3586
+ }
3587
+ if (/^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/i.test(trimmed)) {
3588
+ return true;
3589
+ }
3590
+ if (/^var\(--[\w-]+\)$/i.test(trimmed)) {
3591
+ return true;
3592
+ }
3593
+ const cssColors = [
3594
+ "transparent",
3595
+ "inherit",
3596
+ "currentcolor",
3597
+ "black",
3598
+ "white",
3599
+ "red",
3600
+ "green",
3601
+ "blue",
3602
+ "yellow",
3603
+ "orange",
3604
+ "purple",
3605
+ "pink",
3606
+ "gray",
3607
+ "grey"
3608
+ ];
3609
+ if (cssColors.includes(trimmed.toLowerCase())) {
3610
+ return true;
3611
+ }
3612
+ return true;
3613
+ }
3614
+ function logValidationResult(result, context = "Custom presets") {
3615
+ if (result.isValid) {
3616
+ console.log(`\u2705 ${context}: Validation passed`);
3617
+ } else {
3618
+ console.error(`\u274C ${context}: Validation failed`);
3619
+ result.errors.forEach((error) => console.error(` Error: ${error}`));
3620
+ }
3621
+ if (result.warnings.length > 0) {
3622
+ console.warn(`\u26A0\uFE0F ${context}: Validation warnings`);
3623
+ result.warnings.forEach((warning) => console.warn(` Warning: ${warning}`));
3624
+ }
3625
+ }
3626
+
3627
+ // src/providers/UnifiedThemeProvider.tsx
3628
+ import { jsx } from "react/jsx-runtime";
3629
+ var UnifiedThemeContext = createContext(void 0);
3630
+ var THEME_STORAGE_KEY = "theme-engine-theme";
3631
+ function getSystemTheme() {
3632
+ if (typeof window === "undefined") return "light";
3633
+ return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
3634
+ }
3635
+ function getStoredMode(storageKey) {
3636
+ if (typeof window === "undefined") return null;
3637
+ try {
3638
+ return localStorage.getItem(storageKey) || null;
3639
+ } catch {
3640
+ return null;
3641
+ }
3642
+ }
3643
+ function setStoredMode(mode, storageKey) {
3644
+ try {
3645
+ localStorage.setItem(storageKey, mode);
3646
+ } catch {
3647
+ }
3648
+ }
3649
+ function ThemeProvider({
3650
+ children,
3651
+ defaultMode = "system",
3652
+ defaultPreset,
3653
+ enableTransitions = true,
3654
+ modeStorageKey = THEME_STORAGE_KEY,
3655
+ presetStorageKey = "theme-preset",
3656
+ enablePresets = true,
3657
+ customPresets = {},
3658
+ includeBuiltInPresets = true
3659
+ }) {
3660
+ const [mode, setMode] = useState(() => {
3661
+ const stored = getStoredMode(modeStorageKey);
3662
+ return stored || defaultMode;
3663
+ });
3664
+ const [resolvedMode, setResolvedMode] = useState(() => {
3665
+ if (mode === "system") {
3666
+ return getSystemTheme();
3667
+ }
3668
+ return mode;
3669
+ });
3670
+ const availablePresets = useMemo(() => {
3671
+ const merged = {};
3672
+ if (includeBuiltInPresets) {
3673
+ Object.assign(merged, tweakcnPresets);
3674
+ }
3675
+ if (customPresets && Object.keys(customPresets).length > 0) {
3676
+ const validationResult = validateCustomPresets(customPresets);
3677
+ const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
3678
+ if (isDevelopment) {
3679
+ logValidationResult(validationResult, "Custom presets");
3680
+ }
3681
+ if (validationResult.isValid || validationResult.errors.length === 0) {
3682
+ Object.assign(merged, customPresets);
3683
+ } else {
3684
+ if (isDevelopment) {
3685
+ console.error("\u{1F3A8} ThemeProvider: Skipping invalid custom presets");
3686
+ }
3687
+ }
3688
+ }
3689
+ return merged;
3690
+ }, [includeBuiltInPresets, customPresets]);
3691
+ const builtInPresets = useMemo(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
3692
+ const normalizedCustomPresets = useMemo(() => customPresets || {}, [customPresets]);
3693
+ const getAvailablePresetById = useCallback((id) => {
3694
+ return availablePresets[id] || null;
3695
+ }, [availablePresets]);
3696
+ const [currentPreset, setCurrentPreset] = useState(null);
3697
+ const [isReady, setIsReady] = useState(false);
3698
+ useEffect(() => {
3699
+ if (!enablePresets || typeof window === "undefined") {
3700
+ setIsReady(true);
3701
+ return;
3702
+ }
3703
+ try {
3704
+ const stored = localStorage.getItem(presetStorageKey);
3705
+ if (stored) {
3706
+ const preset = JSON.parse(stored);
3707
+ setCurrentPreset(preset);
3708
+ console.log("\u{1F3A8} UnifiedTheme: Loaded persisted preset:", preset.presetName);
3709
+ } else if (defaultPreset) {
3710
+ const preset = getAvailablePresetById(defaultPreset);
3711
+ if (preset) {
3712
+ const presetData = {
3713
+ presetId: defaultPreset,
3714
+ presetName: preset.label,
3715
+ colors: {
3716
+ light: preset.styles.light,
3717
+ dark: preset.styles.dark
3718
+ },
3719
+ appliedAt: Date.now()
3720
+ };
3721
+ setCurrentPreset(presetData);
3722
+ console.log("\u{1F3A8} UnifiedTheme: Applied default preset:", preset.label);
3723
+ } else {
3724
+ console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
3725
+ }
3726
+ }
3727
+ } catch (error) {
3728
+ console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset:", error);
3729
+ } finally {
3730
+ setIsReady(true);
3731
+ }
3732
+ }, [presetStorageKey, enablePresets, defaultPreset]);
3733
+ useEffect(() => {
3734
+ if (mode === "system") {
3735
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
3736
+ const updateResolvedMode = () => setResolvedMode(getSystemTheme());
3737
+ updateResolvedMode();
3738
+ mediaQuery.addEventListener("change", updateResolvedMode);
3739
+ return () => mediaQuery.removeEventListener("change", updateResolvedMode);
3740
+ } else {
3741
+ setResolvedMode(mode);
3742
+ return;
3743
+ }
3744
+ }, [mode]);
3745
+ useEffect(() => {
3746
+ if (typeof window === "undefined") return;
3747
+ const root = document.documentElement;
3748
+ root.classList.remove("light", "dark");
3749
+ root.classList.add(resolvedMode);
3750
+ root.style.colorScheme = resolvedMode;
3751
+ }, [resolvedMode]);
3752
+ const applyPresetColors = useCallback((preset, mode2) => {
3753
+ const root = document.documentElement;
3754
+ const colors = preset[mode2];
3755
+ if (!colors) return;
3756
+ const defaultValues = {
3757
+ "spacing": "0.25rem",
3758
+ "letter-spacing": "normal"
3759
+ };
3760
+ const allCategories = [
3761
+ ...CSS_PROPERTY_CATEGORIES.colors,
3762
+ ...CSS_PROPERTY_CATEGORIES.typography,
3763
+ ...CSS_PROPERTY_CATEGORIES.layout,
3764
+ ...CSS_PROPERTY_CATEGORIES.shadows,
3765
+ ...CSS_PROPERTY_CATEGORIES.spacing
3766
+ ];
3767
+ let clearedCount = 0;
3768
+ allCategories.forEach((prop) => {
3769
+ const cssVar = `--${prop}`;
3770
+ root.style.removeProperty(cssVar);
3771
+ clearedCount++;
3772
+ });
3773
+ console.log(`\u{1F3A8} UnifiedTheme: Cleared ${clearedCount} CSS properties before applying new theme`);
3774
+ const fontProperties = ["font-sans", "font-serif", "font-mono"];
3775
+ const otherMode = mode2 === "light" ? "dark" : "light";
3776
+ const otherModeColors = preset[otherMode];
3777
+ if (otherModeColors) {
3778
+ fontProperties.forEach((fontProp) => {
3779
+ if (!(fontProp in colors) && fontProp in otherModeColors) {
3780
+ colors[fontProp] = otherModeColors[fontProp];
3781
+ console.log(`\u{1F3A8} Inherited ${fontProp}: "${otherModeColors[fontProp]}" from ${otherMode} mode`);
3782
+ }
3783
+ });
3784
+ }
3785
+ let appliedCount = 0;
3786
+ allCategories.forEach((prop) => {
3787
+ let value = colors[prop];
3788
+ if (!value && defaultValues[prop]) {
3789
+ value = defaultValues[prop];
3790
+ console.log(`\u{1F3A8} Using default value for ${prop}: ${value}`);
3791
+ }
3792
+ if (value) {
3793
+ const cssVar = `--${prop}`;
3794
+ root.style.setProperty(cssVar, value);
3795
+ appliedCount++;
3796
+ console.log(`\u{1F3A8} Applied ${cssVar}: ${value}`);
3797
+ }
3798
+ });
3799
+ console.log(`\u{1F3A8} UnifiedTheme: Applied ${appliedCount} CSS properties for ${mode2} mode`);
3800
+ }, []);
3801
+ const handleModeChange = useCallback((newMode) => {
3802
+ setMode(newMode);
3803
+ setStoredMode(newMode, modeStorageKey);
3804
+ }, [modeStorageKey]);
3805
+ const handleModeToggle = useCallback((coordinates) => {
3806
+ const newMode = resolvedMode === "light" ? "dark" : "light";
3807
+ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
3808
+ if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
3809
+ const root = document.documentElement;
3810
+ if (coordinates) {
3811
+ root.style.setProperty("--x", `${coordinates.x}px`);
3812
+ root.style.setProperty("--y", `${coordinates.y}px`);
3813
+ }
3814
+ document.startViewTransition(() => {
3815
+ handleModeChange(newMode);
3816
+ });
3817
+ } else {
3818
+ handleModeChange(newMode);
3819
+ }
3820
+ }, [resolvedMode, enableTransitions, handleModeChange]);
3821
+ useEffect(() => {
3822
+ if (!currentPreset || typeof window === "undefined") return;
3823
+ applyPresetColors(currentPreset.colors, resolvedMode);
3824
+ }, [currentPreset, resolvedMode, applyPresetColors]);
3825
+ const applyPreset = useCallback((preset) => {
3826
+ const presetData = {
3827
+ presetId: preset.id,
3828
+ presetName: preset.name,
3829
+ colors: preset.colors,
3830
+ appliedAt: Date.now()
3831
+ };
3832
+ setCurrentPreset(presetData);
3833
+ if (enablePresets && typeof window !== "undefined") {
3834
+ try {
3835
+ localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
3836
+ console.log("\u{1F3A8} UnifiedTheme: Saved preset:", preset.name);
3837
+ } catch (error) {
3838
+ console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
3839
+ }
3840
+ }
3841
+ if (typeof window !== "undefined") {
3842
+ applyPresetColors(preset.colors, resolvedMode);
3843
+ }
3844
+ }, [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]);
3845
+ const clearPreset = useCallback(() => {
3846
+ if (enablePresets && typeof window !== "undefined") {
3847
+ try {
3848
+ localStorage.removeItem(presetStorageKey);
3849
+ console.log("\u{1F3A8} UnifiedTheme: Cleared preset");
3850
+ } catch (error) {
3851
+ console.error("\u{1F3A8} UnifiedTheme: Failed to clear preset:", error);
3852
+ }
3853
+ if (defaultPreset) {
3854
+ const preset = getAvailablePresetById(defaultPreset);
3855
+ if (preset) {
3856
+ const presetData = {
3857
+ presetId: defaultPreset,
3858
+ presetName: preset.label,
3859
+ colors: {
3860
+ light: preset.styles.light,
3861
+ dark: preset.styles.dark
3862
+ },
3863
+ appliedAt: Date.now()
3864
+ };
3865
+ setCurrentPreset(presetData);
3866
+ applyPresetColors(presetData.colors, resolvedMode);
3867
+ console.log("\u{1F3A8} UnifiedTheme: Reset to default preset:", preset.label);
3868
+ } else {
3869
+ console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
3870
+ setCurrentPreset(null);
3871
+ }
3872
+ } else {
3873
+ setCurrentPreset(null);
3874
+ const root = document.documentElement;
3875
+ const allProperties = [
3876
+ ...CSS_PROPERTY_CATEGORIES.colors,
3877
+ ...CSS_PROPERTY_CATEGORIES.typography,
3878
+ ...CSS_PROPERTY_CATEGORIES.layout,
3879
+ ...CSS_PROPERTY_CATEGORIES.shadows,
3880
+ ...CSS_PROPERTY_CATEGORIES.spacing
3881
+ ];
3882
+ let clearedCount = 0;
3883
+ allProperties.forEach((prop) => {
3884
+ const cssVar = `--${prop}`;
3885
+ root.style.removeProperty(cssVar);
3886
+ clearedCount++;
3887
+ });
3888
+ console.log(`\u{1F3A8} UnifiedTheme: Cleared ${clearedCount} CSS properties`);
3889
+ }
3890
+ }
3891
+ }, [presetStorageKey, enablePresets, defaultPreset, applyPresetColors, resolvedMode]);
3892
+ if (!isReady) {
3893
+ return null;
3894
+ }
3895
+ const contextValue = {
3896
+ mode,
3897
+ resolvedMode,
3898
+ setMode: handleModeChange,
3899
+ toggleMode: handleModeToggle,
3900
+ currentPreset,
3901
+ applyPreset,
3902
+ clearPreset,
3903
+ availablePresets,
3904
+ builtInPresets,
3905
+ customPresets: normalizedCustomPresets
3906
+ };
3907
+ return /* @__PURE__ */ jsx(UnifiedThemeContext.Provider, { value: contextValue, children });
3908
+ }
3909
+ function useTheme() {
3910
+ const context = useContext(UnifiedThemeContext);
3911
+ if (context === void 0) {
3912
+ throw new Error("useTheme must be used within a ThemeProvider");
3913
+ }
3914
+ return context;
3915
+ }
3916
+
3917
+ // src/components/UnifiedThemeScript.tsx
3918
+ import { useMemo as useMemo2 } from "react";
3919
+ import { jsx as jsx2 } from "react/jsx-runtime";
3920
+ function ThemeScript({
3921
+ presetStorageKey = "theme-preset",
3922
+ defaultPreset
3923
+ }) {
3924
+ const defaultPresetData = useMemo2(() => {
3925
+ if (!defaultPreset) return null;
3926
+ const preset = getPresetById(defaultPreset);
3927
+ return preset ? {
3928
+ presetId: defaultPreset,
3929
+ presetName: preset.label,
3930
+ colors: preset.styles
3931
+ } : null;
3932
+ }, [defaultPreset]);
3933
+ const scriptContent = useMemo2(() => `
3934
+ // Unified Theme Engine: Restore preset colors before hydration
3935
+ (function() {
3936
+ try {
3937
+ const presetStorageKey = "${presetStorageKey}";
3938
+
3939
+ // CSS property categories (inline for script)
3940
+ const CSS_CATEGORIES = {
3941
+ colors: [
3942
+ 'background', 'foreground', 'card', 'card-foreground', 'popover', 'popover-foreground',
3943
+ 'primary', 'primary-foreground', 'secondary', 'secondary-foreground',
3944
+ 'muted', 'muted-foreground', 'accent', 'accent-foreground',
3945
+ 'destructive', 'destructive-foreground', 'border', 'input', 'ring',
3946
+ 'chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5',
3947
+ 'sidebar', 'sidebar-foreground', 'sidebar-primary', 'sidebar-primary-foreground',
3948
+ 'sidebar-accent', 'sidebar-accent-foreground', 'sidebar-border', 'sidebar-ring'
3949
+ ],
3950
+ typography: ['font-sans', 'font-serif', 'font-mono'],
3951
+ layout: ['radius'],
3952
+ shadows: ['shadow-color', 'shadow-opacity', 'shadow-blur', 'shadow-spread', 'shadow-offset-x', 'shadow-offset-y'],
3953
+ spacing: ['letter-spacing', 'spacing']
3954
+ };
3955
+
3956
+ // Function to apply all preset properties - with proper clearing and defaults
3957
+ function applyPresetProperties(colors) {
3958
+ if (!colors) return;
3959
+
3960
+ const root = document.documentElement;
3961
+
3962
+ // Default values for essential properties that might be missing
3963
+ const defaultValues = {
3964
+ 'spacing': '0.25rem',
3965
+ 'letter-spacing': 'normal'
3966
+ };
3967
+
3968
+ // Get all possible CSS properties
3969
+ const allCategories = ['colors', 'typography', 'layout', 'shadows', 'spacing'];
3970
+ const allProperties = [];
3971
+ allCategories.forEach(function(category) {
3972
+ CSS_CATEGORIES[category].forEach(function(prop) {
3973
+ allProperties.push(prop);
3974
+ });
3975
+ });
3976
+
3977
+ // First, clear all properties to prevent leftover values
3978
+ let clearedCount = 0;
3979
+ allProperties.forEach(function(prop) {
3980
+ const cssVar = '--' + prop;
3981
+ root.style.removeProperty(cssVar);
3982
+ clearedCount++;
3983
+ });
3984
+ console.log('\u{1F3A8} UnifiedThemeScript: Cleared ' + clearedCount + ' CSS properties before applying new theme');
3985
+
3986
+ // Apply all properties with defaults for missing ones
3987
+ let appliedCount = 0;
3988
+ allProperties.forEach(function(prop) {
3989
+ let value = colors[prop];
3990
+
3991
+ // Apply default value if property is missing and we have a default
3992
+ if (!value && defaultValues[prop]) {
3993
+ value = defaultValues[prop];
3994
+ console.log('\u{1F3A8} Script using default value for ' + prop + ': ' + value);
3995
+ }
3996
+
3997
+ if (value) {
3998
+ const cssVar = '--' + prop;
3999
+ // Apply directly like TweakCN does - no conversion, no !important
4000
+ root.style.setProperty(cssVar, value);
4001
+ appliedCount++;
4002
+ console.log('\u{1F3A8} Script applied ' + cssVar + ': ' + value);
4003
+ }
4004
+ });
4005
+
4006
+ console.log('\u{1F3A8} UnifiedThemeScript: Applied ' + appliedCount + ' CSS properties');
4007
+ }
4008
+
4009
+ // Load and apply persisted preset or default preset
4010
+ const storedPreset = localStorage.getItem(presetStorageKey);
4011
+ let presetToApply = null;
4012
+
4013
+ if (storedPreset) {
4014
+ try {
4015
+ presetToApply = JSON.parse(storedPreset);
4016
+ console.log('\u{1F3A8} UnifiedThemeScript: Using stored preset:', presetToApply.presetName);
4017
+ } catch (error) {
4018
+ console.warn('\u{1F3A8} UnifiedThemeScript: Failed to parse stored preset:', error);
4019
+ }
4020
+ }
4021
+
4022
+ // Use default preset if no stored preset
4023
+ if (!presetToApply && ${JSON.stringify(defaultPresetData)}) {
4024
+ presetToApply = ${JSON.stringify(defaultPresetData)};
4025
+ console.log('\u{1F3A8} UnifiedThemeScript: Using default preset:', presetToApply.presetName);
4026
+ }
4027
+
4028
+ if (presetToApply) {
4029
+ // Determine current mode (will be set by ThemeProvider)
4030
+ // Default to light if no theme class is present yet
4031
+ const isDark = document.documentElement.classList.contains('dark');
4032
+ const mode = isDark ? 'dark' : 'light';
4033
+ const colors = presetToApply.colors && presetToApply.colors[mode];
4034
+
4035
+ if (colors) {
4036
+ // Font inheritance logic: inherit missing fonts from other mode
4037
+ const fontProperties = ['font-sans', 'font-serif', 'font-mono'];
4038
+ const otherMode = mode === 'light' ? 'dark' : 'light';
4039
+ const otherModeColors = presetToApply.colors && presetToApply.colors[otherMode];
4040
+
4041
+ if (otherModeColors) {
4042
+ fontProperties.forEach(function(fontProp) {
4043
+ if (!colors[fontProp] && otherModeColors[fontProp]) {
4044
+ colors[fontProp] = otherModeColors[fontProp];
4045
+ console.log('\u{1F3A8} Script inherited ' + fontProp + ': "' + otherModeColors[fontProp] + '" from ' + otherMode + ' mode');
4046
+ }
4047
+ });
4048
+ }
4049
+
4050
+ applyPresetProperties(colors);
4051
+ console.log('\u{1F3A8} UnifiedThemeScript: Applied preset properties for', mode, 'mode');
4052
+ }
4053
+ }
4054
+
4055
+ } catch (error) {
4056
+ console.error('\u{1F3A8} UnifiedThemeScript: Initialization failed:', error);
4057
+ }
4058
+ })();
4059
+ `, [presetStorageKey, defaultPresetData]);
4060
+ return /* @__PURE__ */ jsx2(
4061
+ "script",
4062
+ {
4063
+ dangerouslySetInnerHTML: { __html: scriptContent },
4064
+ suppressHydrationWarning: true
4065
+ }
4066
+ );
4067
+ }
4068
+
4069
+ // src/components/ThemeToggle.tsx
4070
+ import { forwardRef } from "react";
4071
+ import { clsx } from "clsx";
4072
+ import { jsx as jsx3, jsxs } from "react/jsx-runtime";
4073
+ var SunIcon = () => /* @__PURE__ */ jsxs(
4074
+ "svg",
4075
+ {
4076
+ xmlns: "http://www.w3.org/2000/svg",
4077
+ width: "16",
4078
+ height: "16",
4079
+ viewBox: "0 0 24 24",
4080
+ fill: "none",
4081
+ stroke: "currentColor",
4082
+ strokeWidth: "2",
4083
+ strokeLinecap: "round",
4084
+ strokeLinejoin: "round",
4085
+ className: "theme-toggle-icon",
4086
+ children: [
4087
+ /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "4" }),
4088
+ /* @__PURE__ */ jsx3("path", { d: "m12 2 0 2" }),
4089
+ /* @__PURE__ */ jsx3("path", { d: "m12 20 0 2" }),
4090
+ /* @__PURE__ */ jsx3("path", { d: "m4.93 4.93 1.41 1.41" }),
4091
+ /* @__PURE__ */ jsx3("path", { d: "m17.66 17.66 1.41 1.41" }),
4092
+ /* @__PURE__ */ jsx3("path", { d: "m2 12 2 0" }),
4093
+ /* @__PURE__ */ jsx3("path", { d: "m20 12 2 0" }),
4094
+ /* @__PURE__ */ jsx3("path", { d: "m6.34 17.66-1.41 1.41" }),
4095
+ /* @__PURE__ */ jsx3("path", { d: "m19.07 4.93-1.41 1.41" })
4096
+ ]
4097
+ }
4098
+ );
4099
+ var MoonIcon = () => /* @__PURE__ */ jsx3(
4100
+ "svg",
4101
+ {
4102
+ xmlns: "http://www.w3.org/2000/svg",
4103
+ width: "16",
4104
+ height: "16",
4105
+ viewBox: "0 0 24 24",
4106
+ fill: "none",
4107
+ stroke: "currentColor",
4108
+ strokeWidth: "2",
4109
+ strokeLinecap: "round",
4110
+ strokeLinejoin: "round",
4111
+ className: "theme-toggle-icon",
4112
+ children: /* @__PURE__ */ jsx3("path", { d: "m12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
4113
+ }
4114
+ );
4115
+ var SystemIcon = () => /* @__PURE__ */ jsxs(
4116
+ "svg",
4117
+ {
4118
+ xmlns: "http://www.w3.org/2000/svg",
4119
+ width: "16",
4120
+ height: "16",
4121
+ viewBox: "0 0 24 24",
4122
+ fill: "none",
4123
+ stroke: "currentColor",
4124
+ strokeWidth: "2",
4125
+ strokeLinecap: "round",
4126
+ strokeLinejoin: "round",
4127
+ className: "theme-toggle-icon",
4128
+ children: [
4129
+ /* @__PURE__ */ jsx3("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
4130
+ /* @__PURE__ */ jsx3("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
4131
+ /* @__PURE__ */ jsx3("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
4132
+ ]
4133
+ }
4134
+ );
4135
+ var ThemeToggle = forwardRef(
4136
+ ({ className, size = "md", variant = "default", children, ...props }, ref) => {
4137
+ const { mode, resolvedMode, toggleMode } = useTheme();
4138
+ const handleClick = (event) => {
4139
+ const { clientX: x, clientY: y } = event;
4140
+ toggleMode({ x, y });
4141
+ };
4142
+ const sizeClasses = {
4143
+ sm: "h-8 w-8 p-1.5",
4144
+ md: "h-9 w-9 p-2",
4145
+ lg: "h-10 w-10 p-2.5"
4146
+ };
4147
+ const variantClasses = {
4148
+ default: "bg-background border border-input hover:bg-accent hover:text-accent-foreground",
4149
+ outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
4150
+ ghost: "hover:bg-accent hover:text-accent-foreground"
4151
+ };
4152
+ const baseClasses = clsx(
4153
+ // Base button styles
4154
+ "theme-toggle",
4155
+ "inline-flex items-center justify-center",
4156
+ "rounded-md text-sm font-medium",
4157
+ "ring-offset-background transition-colors",
4158
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
4159
+ "disabled:pointer-events-none disabled:opacity-50",
4160
+ // Size and variant
4161
+ sizeClasses[size],
4162
+ variantClasses[variant],
4163
+ className
4164
+ );
4165
+ const renderIcon = () => {
4166
+ if (children) return children;
4167
+ switch (mode) {
4168
+ case "light":
4169
+ return /* @__PURE__ */ jsx3(SunIcon, {});
4170
+ case "dark":
4171
+ return /* @__PURE__ */ jsx3(MoonIcon, {});
4172
+ case "system":
4173
+ return /* @__PURE__ */ jsx3(SystemIcon, {});
4174
+ default:
4175
+ return resolvedMode === "dark" ? /* @__PURE__ */ jsx3(MoonIcon, {}) : /* @__PURE__ */ jsx3(SunIcon, {});
4176
+ }
4177
+ };
4178
+ return /* @__PURE__ */ jsx3(
4179
+ "button",
4180
+ {
4181
+ ref,
4182
+ className: baseClasses,
4183
+ onClick: handleClick,
4184
+ "data-mode": resolvedMode,
4185
+ "aria-label": `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,
4186
+ title: `Switch to ${resolvedMode === "light" ? "dark" : "light"} mode`,
4187
+ ...props,
4188
+ children: renderIcon()
4189
+ }
4190
+ );
4191
+ }
4192
+ );
4193
+ ThemeToggle.displayName = "ThemeToggle";
4194
+
4195
+ // src/components/ThemePresetButtons.tsx
4196
+ import { useEffect as useEffect2, useState as useState2, useCallback as useCallback2, useMemo as useMemo3, useRef } from "react";
4197
+ import { motion, useAnimate } from "framer-motion";
4198
+ import { clsx as clsx2 } from "clsx";
4199
+
4200
+ // src/utils/colors.ts
4201
+ function parseHSL(hslString) {
4202
+ try {
4203
+ const cleaned = hslString.replace(/hsl\(|\)/g, "").replace(/[,%]/g, " ").trim();
4204
+ const parts = cleaned.split(/\s+/).filter(Boolean);
4205
+ if (parts.length !== 3) return null;
4206
+ const h = parseFloat(parts[0]) || 0;
4207
+ const s = parseFloat(parts[1]) || 0;
4208
+ const l = parseFloat(parts[2]) || 0;
4209
+ return {
4210
+ h: Math.max(0, Math.min(360, h)),
4211
+ s: Math.max(0, Math.min(100, s)),
4212
+ l: Math.max(0, Math.min(100, l))
4213
+ };
4214
+ } catch {
4215
+ return null;
4216
+ }
4217
+ }
4218
+ function parseHex(hexString) {
4219
+ try {
4220
+ let hex = hexString.replace("#", "");
4221
+ if (hex.length === 3) {
4222
+ hex = hex.split("").map((char) => char + char).join("");
4223
+ }
4224
+ if (hex.length !== 6) return null;
4225
+ const r = parseInt(hex.substring(0, 2), 16);
4226
+ const s = parseInt(hex.substring(2, 4), 16);
4227
+ const l = parseInt(hex.substring(4, 6), 16);
4228
+ if (isNaN(r) || isNaN(s) || isNaN(l)) return null;
4229
+ return { r, g: s, b: l };
4230
+ } catch {
4231
+ return null;
4232
+ }
4233
+ }
4234
+ function hslToRgb(hsl) {
4235
+ const h = hsl.h / 360;
4236
+ const s = hsl.s / 100;
4237
+ const l = hsl.l / 100;
4238
+ if (s === 0) {
4239
+ const gray = Math.round(l * 255);
4240
+ return { r: gray, g: gray, b: gray };
4241
+ }
4242
+ const hue2rgb = (p2, q2, t) => {
4243
+ if (t < 0) t += 1;
4244
+ if (t > 1) t -= 1;
4245
+ if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
4246
+ if (t < 1 / 2) return q2;
4247
+ if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
4248
+ return p2;
4249
+ };
4250
+ const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
4251
+ const p = 2 * l - q;
4252
+ const r = Math.round(hue2rgb(p, q, h + 1 / 3) * 255);
4253
+ const g = Math.round(hue2rgb(p, q, h) * 255);
4254
+ const b = Math.round(hue2rgb(p, q, h - 1 / 3) * 255);
4255
+ return { r, g, b };
4256
+ }
4257
+ function rgbToHsl(rgb) {
4258
+ const r = rgb.r / 255;
4259
+ const g = rgb.g / 255;
4260
+ const b = rgb.b / 255;
4261
+ const max = Math.max(r, g, b);
4262
+ const min = Math.min(r, g, b);
4263
+ const diff = max - min;
4264
+ let h = 0;
4265
+ let s = 0;
4266
+ const l = (max + min) / 2;
4267
+ if (diff !== 0) {
4268
+ s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
4269
+ switch (max) {
4270
+ case r:
4271
+ h = (g - b) / diff + (g < b ? 6 : 0);
4272
+ break;
4273
+ case g:
4274
+ h = (b - r) / diff + 2;
4275
+ break;
4276
+ case b:
4277
+ h = (r - g) / diff + 4;
4278
+ break;
4279
+ }
4280
+ h /= 6;
4281
+ }
4282
+ return {
4283
+ h: Math.round(h * 360),
4284
+ s: Math.round(s * 100),
4285
+ l: Math.round(l * 100)
4286
+ };
4287
+ }
4288
+ function formatHSL(hsl, includeHslWrapper = true) {
4289
+ const values = `${hsl.h} ${hsl.s}% ${hsl.l}%`;
4290
+ return includeHslWrapper ? `hsl(${values})` : values;
4291
+ }
4292
+ function formatRGB(rgb) {
4293
+ return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
4294
+ }
4295
+ function formatHex(rgb) {
4296
+ const toHex = (n) => {
4297
+ const hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
4298
+ return hex.length === 1 ? "0" + hex : hex;
4299
+ };
4300
+ return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
4301
+ }
4302
+ function formatColor(colorInput, outputFormat = "hsl", includeFunctionWrapper = true) {
4303
+ let hsl = parseHSL(colorInput);
4304
+ if (!hsl) {
4305
+ const rgb = parseHex(colorInput);
4306
+ if (rgb) {
4307
+ hsl = rgbToHsl(rgb);
4308
+ }
4309
+ }
4310
+ if (!hsl) {
4311
+ return colorInput;
4312
+ }
4313
+ switch (outputFormat) {
4314
+ case "hsl":
4315
+ return formatHSL(hsl, includeFunctionWrapper);
4316
+ case "rgb":
4317
+ return formatRGB(hslToRgb(hsl));
4318
+ case "hex":
4319
+ return formatHex(hslToRgb(hsl));
4320
+ default:
4321
+ return colorInput;
4322
+ }
4323
+ }
4324
+ function withAlpha(colorInput, alpha) {
4325
+ const hsl = parseHSL(colorInput);
4326
+ if (!hsl) return colorInput;
4327
+ const rgb = hslToRgb(hsl);
4328
+ const clampedAlpha = Math.max(0, Math.min(1, alpha));
4329
+ return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clampedAlpha})`;
4330
+ }
4331
+
4332
+ // src/components/ThemePresetButtons.tsx
4333
+ import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
4334
+ var DEFAULT_ANIMATION = {
4335
+ enabled: true,
4336
+ duration: 5,
4337
+ // baseDurationPerItem from TweakCN
4338
+ easing: "linear",
4339
+ rowCount: 3,
4340
+ scrollSpeed: 1,
4341
+ hoverPause: true,
4342
+ duplicationFactor: 4
4343
+ };
4344
+ var DEFAULT_LAYOUT = {
4345
+ buttonWidth: 160,
4346
+ // Keep consistent with TweakCN
4347
+ buttonGap: 16,
4348
+ // space-x-4 -> 1rem = 16px
4349
+ rowGap: 16,
4350
+ // gap-y-4 -> 1rem = 16px
4351
+ showColorBoxes: true,
4352
+ colorBoxCount: 3,
4353
+ enableMask: true
4354
+ };
4355
+ var ColorBox = ({ color, className }) => {
4356
+ return /* @__PURE__ */ jsx4(
4357
+ "div",
4358
+ {
4359
+ className: clsx2("w-3 h-3 rounded-sm border border-black/20", className),
4360
+ style: { backgroundColor: formatColor(color, "hsl") }
4361
+ }
4362
+ );
4363
+ };
4364
+ var PresetButton = ({
4365
+ preset,
4366
+ isSelected,
4367
+ onClick,
4368
+ mode,
4369
+ layout,
4370
+ renderPreset,
4371
+ renderColorBox
4372
+ }) => {
4373
+ const colors = preset.colors[mode];
4374
+ if (renderPreset) {
4375
+ return /* @__PURE__ */ jsx4(
4376
+ "div",
4377
+ {
4378
+ onClick,
4379
+ className: "cursor-pointer",
4380
+ style: { minWidth: layout.buttonWidth },
4381
+ children: renderPreset(preset, isSelected)
4382
+ }
4383
+ );
4384
+ }
4385
+ return /* @__PURE__ */ jsx4(
4386
+ motion.div,
4387
+ {
4388
+ className: "flex-shrink-0",
4389
+ style: { minWidth: layout.buttonWidth },
4390
+ whileHover: { scale: 1.02, y: -3, zIndex: 20 },
4391
+ transition: { duration: 0.2, ease: "easeOut" },
4392
+ children: /* @__PURE__ */ jsx4(
4393
+ "div",
4394
+ {
4395
+ className: clsx2(
4396
+ "cursor-pointer bg-card hover:bg-card/80 border border-border rounded-lg",
4397
+ "flex w-full h-full items-center justify-center relative transition-all duration-200",
4398
+ "hover:shadow-lg hover:border-primary/20 px-4 py-3",
4399
+ isSelected ? "ring-2 ring-primary/50 shadow-md bg-primary/5" : ""
4400
+ ),
4401
+ onClick,
4402
+ children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2.5 text-center", children: [
4403
+ layout.showColorBoxes && /* @__PURE__ */ jsx4("div", { className: "flex gap-1", children: [colors.primary, colors.secondary, colors.accent].slice(0, layout.colorBoxCount).map(
4404
+ (color, index) => renderColorBox ? renderColorBox(color, index) : /* @__PURE__ */ jsx4(ColorBox, { color }, index)
4405
+ ) }),
4406
+ /* @__PURE__ */ jsx4("span", { className: "capitalize px-1 leading-tight text-sm font-medium text-foreground", children: preset.name.replace(/-/g, " ") })
4407
+ ] })
4408
+ }
4409
+ )
4410
+ }
4411
+ );
4412
+ };
4413
+ var AnimatedRow = ({
4414
+ presets,
4415
+ selectedPresetId,
4416
+ onPresetSelect,
4417
+ mode,
4418
+ animation,
4419
+ layout,
4420
+ renderPreset,
4421
+ renderColorBox
4422
+ }) => {
4423
+ const [scope, animate] = useAnimate();
4424
+ const controls = useRef(null);
4425
+ if (presets.length === 0) return null;
4426
+ const duplicatedPresets = Array(animation.duplicationFactor).fill(presets).flat();
4427
+ const totalWidth = presets.length * (layout.buttonWidth + layout.buttonGap);
4428
+ const animationDuration = presets.length * animation.duration;
4429
+ const target = {
4430
+ x: [0, -totalWidth]
4431
+ };
4432
+ const options = {
4433
+ duration: animationDuration,
4434
+ ease: animation.easing,
4435
+ repeat: Infinity
4436
+ };
4437
+ useEffect2(() => {
4438
+ if (animation.enabled) {
4439
+ controls.current = animate(scope.current, target, options);
4440
+ }
4441
+ }, [target, options, animate, scope, animation.enabled]);
4442
+ return /* @__PURE__ */ jsx4(
4443
+ motion.div,
4444
+ {
4445
+ ref: scope,
4446
+ className: "flex",
4447
+ onHoverStart: () => animation.hoverPause && controls.current?.pause(),
4448
+ onHoverEnd: () => animation.hoverPause && controls.current?.play(),
4449
+ children: /* @__PURE__ */ jsx4(
4450
+ "div",
4451
+ {
4452
+ className: "flex flex-shrink-0",
4453
+ style: { gap: `${layout.buttonGap}px` },
4454
+ children: duplicatedPresets.map((preset, index) => /* @__PURE__ */ jsx4(
4455
+ PresetButton,
4456
+ {
4457
+ preset,
4458
+ isSelected: preset.id === selectedPresetId,
4459
+ onClick: () => onPresetSelect(preset),
4460
+ mode,
4461
+ layout,
4462
+ renderPreset,
4463
+ renderColorBox
4464
+ },
4465
+ `${preset.id}-${index}`
4466
+ ))
4467
+ }
4468
+ )
4469
+ }
4470
+ );
4471
+ };
4472
+ var ThemePresetButtons = ({
4473
+ animation: animationOverrides = {},
4474
+ layout: layoutOverrides = {},
4475
+ renderPreset,
4476
+ renderColorBox,
4477
+ className,
4478
+ categories,
4479
+ maxPresets,
4480
+ showBuiltIn = true,
4481
+ showCustom = true,
4482
+ groupBy = "none",
4483
+ labels = {},
4484
+ showSectionHeaders = true
4485
+ }) => {
4486
+ const { currentPreset, applyPreset, resolvedMode, availablePresets, builtInPresets, customPresets } = useTheme();
4487
+ const selectedPresetId = currentPreset?.presetId || void 0;
4488
+ const onPresetSelect = applyPreset;
4489
+ const defaultLabels = {
4490
+ builtIn: labels.builtIn || "Built-in Themes",
4491
+ custom: labels.custom || "Custom Themes"
4492
+ };
4493
+ const isGrouped = groupBy !== "none";
4494
+ const shouldShowHeaders = showSectionHeaders && isGrouped;
4495
+ if (typeof window !== "undefined" && window.location?.hostname === "localhost") {
4496
+ console.log("\u{1F3A8} ThemePresetButtons: Categorization features", {
4497
+ groupBy,
4498
+ showBuiltIn,
4499
+ showCustom,
4500
+ labels: defaultLabels,
4501
+ shouldShowHeaders
4502
+ });
4503
+ }
4504
+ const [presets, setPresets] = useState2([]);
4505
+ const [loading, setLoading] = useState2(true);
4506
+ const [error, setError] = useState2(null);
4507
+ const animation = useMemo3(
4508
+ () => ({ ...DEFAULT_ANIMATION, ...animationOverrides }),
4509
+ [animationOverrides]
4510
+ );
4511
+ const layout = useMemo3(
4512
+ () => ({ ...DEFAULT_LAYOUT, ...layoutOverrides }),
4513
+ [layoutOverrides]
4514
+ );
4515
+ const loadPresets = useCallback2(() => {
4516
+ try {
4517
+ setLoading(true);
4518
+ setError(null);
4519
+ let allPresets = [];
4520
+ if (showBuiltIn) {
4521
+ const builtInPresetList = Object.entries(builtInPresets).map(([id, preset]) => ({
4522
+ id,
4523
+ name: preset.label,
4524
+ colors: {
4525
+ light: preset.styles.light,
4526
+ dark: preset.styles.dark
4527
+ },
4528
+ metadata: {
4529
+ category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
4530
+ tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
4531
+ createdAt: preset.createdAt,
4532
+ provider: "built-in"
4533
+ }
4534
+ }));
4535
+ allPresets.push(...builtInPresetList);
4536
+ }
4537
+ if (showCustom) {
4538
+ const customPresetList = Object.entries(customPresets).map(([id, preset]) => ({
4539
+ id,
4540
+ name: preset.label,
4541
+ colors: {
4542
+ light: preset.styles.light,
4543
+ dark: preset.styles.dark
4544
+ },
4545
+ metadata: {
4546
+ category: preset.label.toLowerCase().includes("minimal") ? "minimal" : preset.label.toLowerCase().includes("violet") || preset.label.toLowerCase().includes("purple") ? "vibrant" : "modern",
4547
+ tags: [preset.label.toLowerCase().replace(/\s+/g, "-")],
4548
+ createdAt: preset.createdAt,
4549
+ provider: "custom"
4550
+ }
4551
+ }));
4552
+ allPresets.push(...customPresetList);
4553
+ }
4554
+ if (categories && categories.length > 0) {
4555
+ allPresets = allPresets.filter(
4556
+ (preset) => categories.includes(preset.metadata?.category || "unknown")
4557
+ );
4558
+ }
4559
+ if (maxPresets && maxPresets > 0) {
4560
+ allPresets = allPresets.slice(0, maxPresets);
4561
+ }
4562
+ setPresets(allPresets);
4563
+ } catch (err) {
4564
+ setError(err instanceof Error ? err.message : "Failed to load presets");
4565
+ console.error("Failed to load presets:", err);
4566
+ } finally {
4567
+ setLoading(false);
4568
+ }
4569
+ }, [availablePresets, builtInPresets, customPresets, categories, maxPresets, showBuiltIn, showCustom]);
4570
+ useEffect2(() => {
4571
+ loadPresets();
4572
+ }, [loadPresets]);
4573
+ const presetsByRow = useMemo3(() => {
4574
+ if (presets.length === 0) return [];
4575
+ const rows = Array.from(
4576
+ { length: animation.rowCount },
4577
+ () => []
4578
+ );
4579
+ presets.forEach((preset, index) => {
4580
+ rows[index % animation.rowCount].push(preset);
4581
+ });
4582
+ return rows.filter((row) => row.length > 0);
4583
+ }, [presets, animation.rowCount]);
4584
+ const containerStyle = useMemo3(
4585
+ () => ({
4586
+ gap: layout.rowGap,
4587
+ ...layout.enableMask && {
4588
+ maskImage: "linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)",
4589
+ WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%)"
4590
+ }
4591
+ }),
4592
+ [layout.rowGap, layout.enableMask]
4593
+ );
4594
+ if (loading) {
4595
+ return /* @__PURE__ */ jsx4("div", { className: clsx2("flex items-center justify-center py-8", className), children: /* @__PURE__ */ jsx4("div", { className: "animate-pulse text-sm text-muted-foreground", children: "Loading presets..." }) });
4596
+ }
4597
+ if (error) {
4598
+ return /* @__PURE__ */ jsx4("div", { className: clsx2("flex items-center justify-center py-8", className), children: /* @__PURE__ */ jsxs2("div", { className: "text-sm text-destructive", children: [
4599
+ "Error: ",
4600
+ error
4601
+ ] }) });
4602
+ }
4603
+ if (presets.length === 0) {
4604
+ return /* @__PURE__ */ jsx4("div", { className: clsx2("flex items-center justify-center py-8", className), children: /* @__PURE__ */ jsx4("div", { className: "text-sm text-muted-foreground", children: "No presets available" }) });
4605
+ }
4606
+ return /* @__PURE__ */ jsx4(
4607
+ motion.div,
4608
+ {
4609
+ initial: { opacity: 0, y: 20 },
4610
+ whileInView: { opacity: 1, y: 0 },
4611
+ viewport: { once: true },
4612
+ transition: { duration: 0.5, ease: "easeOut" },
4613
+ className: clsx2(
4614
+ "w-full overflow-hidden mb-8 flex flex-col py-2 -my-2",
4615
+ className
4616
+ ),
4617
+ style: containerStyle,
4618
+ children: presetsByRow.map((rowPresets, index) => /* @__PURE__ */ jsx4(
4619
+ AnimatedRow,
4620
+ {
4621
+ presets: rowPresets,
4622
+ selectedPresetId,
4623
+ onPresetSelect,
4624
+ mode: resolvedMode,
4625
+ animation,
4626
+ layout,
4627
+ renderPreset,
4628
+ renderColorBox
4629
+ },
4630
+ `row-${index}`
4631
+ ))
4632
+ }
4633
+ );
4634
+ };
4635
+ export {
4636
+ ThemePresetButtons,
4637
+ ThemeProvider,
4638
+ ThemeScript,
4639
+ ThemeToggle,
4640
+ formatColor,
4641
+ getPresetById,
4642
+ getPresetEntries,
4643
+ getPresetIds,
4644
+ getPresetLabels,
4645
+ getPresetsCount,
4646
+ logValidationResult,
4647
+ searchPresets,
4648
+ tweakcnPresets,
4649
+ useTheme,
4650
+ validateCustomPresets,
4651
+ validateTweakCNPreset,
4652
+ withAlpha
4653
+ };