ui-thing 0.0.5 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/.github/workflows/main.yml +19 -19
  2. package/.github/workflows/test.yml +19 -0
  3. package/.prettierrc +12 -12
  4. package/CHANGELOG.md +46 -26
  5. package/README.md +69 -69
  6. package/dist/index.js +51 -51
  7. package/dist/index.js.map +1 -1
  8. package/package.json +13 -7
  9. package/src/commands/add.ts +237 -237
  10. package/src/commands/init.ts +72 -72
  11. package/src/commands/prettier.ts +47 -47
  12. package/src/commands/theme.ts +61 -61
  13. package/src/comp.ts +2134 -2134
  14. package/src/index.ts +30 -30
  15. package/src/templates/css.ts +641 -641
  16. package/src/templates/prettier.ts +16 -16
  17. package/src/templates/tailwind.ts +101 -101
  18. package/src/types.ts +33 -13
  19. package/src/utils/addPrettierConfig.ts +24 -24
  20. package/src/utils/compareUIConfig.ts +35 -35
  21. package/src/utils/config.ts +84 -84
  22. package/src/utils/constants.ts +36 -36
  23. package/src/utils/fileExists.ts +10 -10
  24. package/src/utils/installPackages.ts +28 -28
  25. package/src/utils/printFancyBoxMessage.ts +19 -19
  26. package/src/utils/promptForComponents.ts +17 -17
  27. package/src/utils/uiConfigPrompt.ts +73 -73
  28. package/src/utils/writeFile.ts +18 -18
  29. package/tests/utils/addPrettierConfig.test.ts +78 -0
  30. package/tests/utils/fileExists.test.ts +38 -0
  31. package/tsconfig.json +16 -16
  32. package/tsup.config.ts +12 -12
  33. package/vite.config.ts +9 -0
package/src/templates/css.ts CHANGED
@@ -1,641 +1,641 @@
1
- export const CSS_START = `@import url("https://rsms.me/inter/inter.css");
2
-
3
- @tailwind base;
4
- @tailwind components;
5
- @tailwind utilities;
6
- `;
7
-
8
- export const CSS_END = `@layer base {
9
- * {
10
- @apply border-border;
11
- }
12
- body {
13
- @apply bg-background text-foreground;
14
- font-feature-settings:
15
- "rlig" 1,
16
- "calt" 1;
17
- }
18
- }
19
-
20
- `;
21
-
22
- export const createCSS = (theme: keyof typeof themes) => {
23
- // if them is not in themes, set them to ZINC
24
- if (!themes[theme]) {
25
- theme = "ZINC";
26
- }
27
- return `${CSS_START}${themes[theme]}${CSS_END}`;
28
- };
29
-
30
- export const ZINC_THEME = `
31
- @layer base {
32
- :root {
33
- --background: 0 0% 100%;
34
- --foreground: 240 10% 3.9%;
35
- --card: 0 0% 100%;
36
- --card-foreground: 240 10% 3.9%;
37
- --popover: 0 0% 100%;
38
- --popover-foreground: 240 10% 3.9%;
39
- --primary: 240 5.9% 10%;
40
- --primary-foreground: 0 0% 98%;
41
- --secondary: 240 4.8% 95.9%;
42
- --secondary-foreground: 240 5.9% 10%;
43
- --muted: 240 4.8% 95.9%;
44
- --muted-foreground: 240 3.8% 46.1%;
45
- --accent: 240 4.8% 95.9%;
46
- --accent-foreground: 240 5.9% 10%;
47
- --destructive: 0 84.2% 60.2%;
48
- --destructive-foreground: 0 0% 98%;
49
- --border: 240 5.9% 90%;
50
- --input: 240 5.9% 90%;
51
- --ring: 240 5.9% 10%;
52
- --radius: 0.5rem;
53
- }
54
-
55
- .dark {
56
- --background: 240 10% 3.9%;
57
- --foreground: 0 0% 98%;
58
- --card: 240 10% 3.9%;
59
- --card-foreground: 0 0% 98%;
60
- --popover: 240 10% 3.9%;
61
- --popover-foreground: 0 0% 98%;
62
- --primary: 0 0% 98%;
63
- --primary-foreground: 240 5.9% 10%;
64
- --secondary: 240 3.7% 15.9%;
65
- --secondary-foreground: 0 0% 98%;
66
- --muted: 240 3.7% 15.9%;
67
- --muted-foreground: 240 5% 64.9%;
68
- --accent: 240 3.7% 15.9%;
69
- --accent-foreground: 0 0% 98%;
70
- --destructive: 0 62.8% 30.6%;
71
- --destructive-foreground: 0 0% 98%;
72
- --border: 240 3.7% 15.9%;
73
- --input: 240 3.7% 15.9%;
74
- --ring: 240 4.9% 83.9%;
75
- }
76
- }
77
-
78
- `;
79
- export const SLATE_THEME = `
80
- @layer base {
81
- :root {
82
- --background: 0 0% 100%;
83
- --foreground: 222.2 84% 4.9%;
84
- --card: 0 0% 100%;
85
- --card-foreground: 222.2 84% 4.9%;
86
- --popover: 0 0% 100%;
87
- --popover-foreground: 222.2 84% 4.9%;
88
- --primary: 222.2 47.4% 11.2%;
89
- --primary-foreground: 210 40% 98%;
90
- --secondary: 210 40% 96.1%;
91
- --secondary-foreground: 222.2 47.4% 11.2%;
92
- --muted: 210 40% 96.1%;
93
- --muted-foreground: 215.4 16.3% 46.9%;
94
- --accent: 210 40% 96.1%;
95
- --accent-foreground: 222.2 47.4% 11.2%;
96
- --destructive: 0 84.2% 60.2%;
97
- --destructive-foreground: 210 40% 98%;
98
- --border: 214.3 31.8% 91.4%;
99
- --input: 214.3 31.8% 91.4%;
100
- --ring: 222.2 84% 4.9%;
101
- --radius: 0.5rem;
102
- }
103
-
104
- .dark {
105
- --background: 222.2 84% 4.9%;
106
- --foreground: 210 40% 98%;
107
- --card: 222.2 84% 4.9%;
108
- --card-foreground: 210 40% 98%;
109
- --popover: 222.2 84% 4.9%;
110
- --popover-foreground: 210 40% 98%;
111
- --primary: 210 40% 98%;
112
- --primary-foreground: 222.2 47.4% 11.2%;
113
- --secondary: 217.2 32.6% 17.5%;
114
- --secondary-foreground: 210 40% 98%;
115
- --muted: 217.2 32.6% 17.5%;
116
- --muted-foreground: 215 20.2% 65.1%;
117
- --accent: 217.2 32.6% 17.5%;
118
- --accent-foreground: 210 40% 98%;
119
- --destructive: 0 62.8% 30.6%;
120
- --destructive-foreground: 210 40% 98%;
121
- --border: 217.2 32.6% 17.5%;
122
- --input: 217.2 32.6% 17.5%;
123
- --ring: 212.7 26.8% 83.9;
124
- }
125
- }
126
-
127
- `;
128
-
129
- export const STONE_THEME = `
130
- @layer base {
131
- :root {
132
- --background: 0 0% 100%;
133
- --foreground: 20 14.3% 4.1%;
134
- --card: 0 0% 100%;
135
- --card-foreground: 20 14.3% 4.1%;
136
- --popover: 0 0% 100%;
137
- --popover-foreground: 20 14.3% 4.1%;
138
- --primary: 24 9.8% 10%;
139
- --primary-foreground: 60 9.1% 97.8%;
140
- --secondary: 60 4.8% 95.9%;
141
- --secondary-foreground: 24 9.8% 10%;
142
- --muted: 60 4.8% 95.9%;
143
- --muted-foreground: 25 5.3% 44.7%;
144
- --accent: 60 4.8% 95.9%;
145
- --accent-foreground: 24 9.8% 10%;
146
- --destructive: 0 84.2% 60.2%;
147
- --destructive-foreground: 60 9.1% 97.8%;
148
- --border: 20 5.9% 90%;
149
- --input: 20 5.9% 90%;
150
- --ring: 20 14.3% 4.1%;
151
- --radius: 0.5rem;
152
- }
153
-
154
- .dark {
155
- --background: 20 14.3% 4.1%;
156
- --foreground: 60 9.1% 97.8%;
157
- --card: 20 14.3% 4.1%;
158
- --card-foreground: 60 9.1% 97.8%;
159
- --popover: 20 14.3% 4.1%;
160
- --popover-foreground: 60 9.1% 97.8%;
161
- --primary: 60 9.1% 97.8%;
162
- --primary-foreground: 24 9.8% 10%;
163
- --secondary: 12 6.5% 15.1%;
164
- --secondary-foreground: 60 9.1% 97.8%;
165
- --muted: 12 6.5% 15.1%;
166
- --muted-foreground: 24 5.4% 63.9%;
167
- --accent: 12 6.5% 15.1%;
168
- --accent-foreground: 60 9.1% 97.8%;
169
- --destructive: 0 62.8% 30.6%;
170
- --destructive-foreground: 60 9.1% 97.8%;
171
- --border: 12 6.5% 15.1%;
172
- --input: 12 6.5% 15.1%;
173
- --ring: 24 5.7% 82.9%;
174
- }
175
- }
176
-
177
- `;
178
-
179
- export const GRAY_THEME = `
180
- @layer base {
181
- :root {
182
- --background: 0 0% 100%;
183
- --foreground: 224 71.4% 4.1%;
184
- --card: 0 0% 100%;
185
- --card-foreground: 224 71.4% 4.1%;
186
- --popover: 0 0% 100%;
187
- --popover-foreground: 224 71.4% 4.1%;
188
- --primary: 220.9 39.3% 11%;
189
- --primary-foreground: 210 20% 98%;
190
- --secondary: 220 14.3% 95.9%;
191
- --secondary-foreground: 220.9 39.3% 11%;
192
- --muted: 220 14.3% 95.9%;
193
- --muted-foreground: 220 8.9% 46.1%;
194
- --accent: 220 14.3% 95.9%;
195
- --accent-foreground: 220.9 39.3% 11%;
196
- --destructive: 0 84.2% 60.2%;
197
- --destructive-foreground: 210 20% 98%;
198
- --border: 220 13% 91%;
199
- --input: 220 13% 91%;
200
- --ring: 224 71.4% 4.1%;
201
- --radius: 0.5rem;
202
- }
203
-
204
- .dark {
205
- --background: 224 71.4% 4.1%;
206
- --foreground: 210 20% 98%;
207
- --card: 224 71.4% 4.1%;
208
- --card-foreground: 210 20% 98%;
209
- --popover: 224 71.4% 4.1%;
210
- --popover-foreground: 210 20% 98%;
211
- --primary: 210 20% 98%;
212
- --primary-foreground: 220.9 39.3% 11%;
213
- --secondary: 215 27.9% 16.9%;
214
- --secondary-foreground: 210 20% 98%;
215
- --muted: 215 27.9% 16.9%;
216
- --muted-foreground: 217.9 10.6% 64.9%;
217
- --accent: 215 27.9% 16.9%;
218
- --accent-foreground: 210 20% 98%;
219
- --destructive: 0 62.8% 30.6%;
220
- --destructive-foreground: 210 20% 98%;
221
- --border: 215 27.9% 16.9%;
222
- --input: 215 27.9% 16.9%;
223
- --ring: 216 12.2% 83.9%;
224
- }
225
- }
226
-
227
- `;
228
-
229
- export const NEUTRAL_THEME = `
230
- @layer base {
231
- :root {
232
- --background: 0 0% 100%;
233
- --foreground: 0 0% 3.9%;
234
- --card: 0 0% 100%;
235
- --card-foreground: 0 0% 3.9%;
236
- --popover: 0 0% 100%;
237
- --popover-foreground: 0 0% 3.9%;
238
- --primary: 0 0% 9%;
239
- --primary-foreground: 0 0% 98%;
240
- --secondary: 0 0% 96.1%;
241
- --secondary-foreground: 0 0% 9%;
242
- --muted: 0 0% 96.1%;
243
- --muted-foreground: 0 0% 45.1%;
244
- --accent: 0 0% 96.1%;
245
- --accent-foreground: 0 0% 9%;
246
- --destructive: 0 84.2% 60.2%;
247
- --destructive-foreground: 0 0% 98%;
248
- --border: 0 0% 89.8%;
249
- --input: 0 0% 89.8%;
250
- --ring: 0 0% 3.9%;
251
- --radius: 0.5rem;
252
- }
253
-
254
- .dark {
255
- --background: 0 0% 3.9%;
256
- --foreground: 0 0% 98%;
257
- --card: 0 0% 3.9%;
258
- --card-foreground: 0 0% 98%;
259
- --popover: 0 0% 3.9%;
260
- --popover-foreground: 0 0% 98%;
261
- --primary: 0 0% 98%;
262
- --primary-foreground: 0 0% 9%;
263
- --secondary: 0 0% 14.9%;
264
- --secondary-foreground: 0 0% 98%;
265
- --muted: 0 0% 14.9%;
266
- --muted-foreground: 0 0% 63.9%;
267
- --accent: 0 0% 14.9%;
268
- --accent-foreground: 0 0% 98%;
269
- --destructive: 0 62.8% 30.6%;
270
- --destructive-foreground: 0 0% 98%;
271
- --border: 0 0% 14.9%;
272
- --input: 0 0% 14.9%;
273
- --ring: 0 0% 83.1%;
274
- }
275
- }
276
-
277
- `;
278
-
279
- export const RED_THEME = `
280
- @layer base {
281
- :root {
282
- --background: 0 0% 100%;
283
- --foreground: 0 0% 3.9%;
284
- --card: 0 0% 100%;
285
- --card-foreground: 0 0% 3.9%;
286
- --popover: 0 0% 100%;
287
- --popover-foreground: 0 0% 3.9%;
288
- --primary: 0 72.2% 50.6%;
289
- --primary-foreground: 0 85.7% 97.3%;
290
- --secondary: 0 0% 96.1%;
291
- --secondary-foreground: 0 0% 9%;
292
- --muted: 0 0% 96.1%;
293
- --muted-foreground: 0 0% 45.1%;
294
- --accent: 0 0% 96.1%;
295
- --accent-foreground: 0 0% 9%;
296
- --destructive: 0 84.2% 60.2%;
297
- --destructive-foreground: 0 0% 98%;
298
- --border: 0 0% 89.8%;
299
- --input: 0 0% 89.8%;
300
- --ring: 0 72.2% 50.6%;
301
- --radius: 0.5rem;
302
- }
303
-
304
- .dark {
305
- --background: 0 0% 3.9%;
306
- --foreground: 0 0% 98%;
307
- --card: 0 0% 3.9%;
308
- --card-foreground: 0 0% 98%;
309
- --popover: 0 0% 3.9%;
310
- --popover-foreground: 0 0% 98%;
311
- --primary: 0 72.2% 50.6%;
312
- --primary-foreground: 0 85.7% 97.3%;
313
- --secondary: 0 0% 14.9%;
314
- --secondary-foreground: 0 0% 98%;
315
- --muted: 0 0% 14.9%;
316
- --muted-foreground: 0 0% 63.9%;
317
- --accent: 0 0% 14.9%;
318
- --accent-foreground: 0 0% 98%;
319
- --destructive: 0 62.8% 30.6%;
320
- --destructive-foreground: 0 0% 98%;
321
- --border: 0 0% 14.9%;
322
- --input: 0 0% 14.9%;
323
- --ring: 0 72.2% 50.6%;
324
- }
325
- }
326
-
327
- `;
328
-
329
- export const ROSE_THEME = `
330
- @layer base {
331
- :root {
332
- --background: 0 0% 100%;
333
- --foreground: 240 10% 3.9%;
334
- --card: 0 0% 100%;
335
- --card-foreground: 240 10% 3.9%;
336
- --popover: 0 0% 100%;
337
- --popover-foreground: 240 10% 3.9%;
338
- --primary: 346.8 77.2% 49.8%;
339
- --primary-foreground: 355.7 100% 97.3%;
340
- --secondary: 240 4.8% 95.9%;
341
- --secondary-foreground: 240 5.9% 10%;
342
- --muted: 240 4.8% 95.9%;
343
- --muted-foreground: 240 3.8% 46.1%;
344
- --accent: 240 4.8% 95.9%;
345
- --accent-foreground: 240 5.9% 10%;
346
- --destructive: 0 84.2% 60.2%;
347
- --destructive-foreground: 0 0% 98%;
348
- --border: 240 5.9% 90%;
349
- --input: 240 5.9% 90%;
350
- --ring: 346.8 77.2% 49.8%;
351
- --radius: 0.5rem;
352
- }
353
-
354
- .dark {
355
- --background: 20 14.3% 4.1%;
356
- --foreground: 0 0% 95%;
357
- --card: 24 9.8% 10%;
358
- --card-foreground: 0 0% 95%;
359
- --popover: 0 0% 9%;
360
- --popover-foreground: 0 0% 95%;
361
- --primary: 346.8 77.2% 49.8%;
362
- --primary-foreground: 355.7 100% 97.3%;
363
- --secondary: 240 3.7% 15.9%;
364
- --secondary-foreground: 0 0% 98%;
365
- --muted: 0 0% 15%;
366
- --muted-foreground: 240 5% 64.9%;
367
- --accent: 12 6.5% 15.1%;
368
- --accent-foreground: 0 0% 98%;
369
- --destructive: 0 62.8% 30.6%;
370
- --destructive-foreground: 0 85.7% 97.3%;
371
- --border: 240 3.7% 15.9%;
372
- --input: 240 3.7% 15.9%;
373
- --ring: 346.8 77.2% 49.8%;
374
- }
375
- }
376
-
377
- `;
378
-
379
- export const ORANGE_THEME = `
380
- @layer base {
381
- :root {
382
- --background: 0 0% 100%;
383
- --foreground: 20 14.3% 4.1%;
384
- --card: 0 0% 100%;
385
- --card-foreground: 20 14.3% 4.1%;
386
- --popover: 0 0% 100%;
387
- --popover-foreground: 20 14.3% 4.1%;
388
- --primary: 24.6 95% 53.1%;
389
- --primary-foreground: 60 9.1% 97.8%;
390
- --secondary: 60 4.8% 95.9%;
391
- --secondary-foreground: 24 9.8% 10%;
392
- --muted: 60 4.8% 95.9%;
393
- --muted-foreground: 25 5.3% 44.7%;
394
- --accent: 60 4.8% 95.9%;
395
- --accent-foreground: 24 9.8% 10%;
396
- --destructive: 0 84.2% 60.2%;
397
- --destructive-foreground: 60 9.1% 97.8%;
398
- --border: 20 5.9% 90%;
399
- --input: 20 5.9% 90%;
400
- --ring: 24.6 95% 53.1%;
401
- --radius: 0.5rem;
402
- }
403
-
404
- .dark {
405
- --background: 20 14.3% 4.1%;
406
- --foreground: 60 9.1% 97.8%;
407
- --card: 20 14.3% 4.1%;
408
- --card-foreground: 60 9.1% 97.8%;
409
- --popover: 20 14.3% 4.1%;
410
- --popover-foreground: 60 9.1% 97.8%;
411
- --primary: 20.5 90.2% 48.2%;
412
- --primary-foreground: 60 9.1% 97.8%;
413
- --secondary: 12 6.5% 15.1%;
414
- --secondary-foreground: 60 9.1% 97.8%;
415
- --muted: 12 6.5% 15.1%;
416
- --muted-foreground: 24 5.4% 63.9%;
417
- --accent: 12 6.5% 15.1%;
418
- --accent-foreground: 60 9.1% 97.8%;
419
- --destructive: 0 72.2% 50.6%;
420
- --destructive-foreground: 60 9.1% 97.8%;
421
- --border: 12 6.5% 15.1%;
422
- --input: 12 6.5% 15.1%;
423
- --ring: 20.5 90.2% 48.2%;
424
- }
425
- }
426
-
427
- `;
428
-
429
- export const GREEN_THEME = `
430
- @layer base {
431
- :root {
432
- --background: 0 0% 100%;
433
- --foreground: 240 10% 3.9%;
434
- --card: 0 0% 100%;
435
- --card-foreground: 240 10% 3.9%;
436
- --popover: 0 0% 100%;
437
- --popover-foreground: 240 10% 3.9%;
438
- --primary: 142.1 76.2% 36.3%;
439
- --primary-foreground: 355.7 100% 97.3%;
440
- --secondary: 240 4.8% 95.9%;
441
- --secondary-foreground: 240 5.9% 10%;
442
- --muted: 240 4.8% 95.9%;
443
- --muted-foreground: 240 3.8% 46.1%;
444
- --accent: 240 4.8% 95.9%;
445
- --accent-foreground: 240 5.9% 10%;
446
- --destructive: 0 84.2% 60.2%;
447
- --destructive-foreground: 0 0% 98%;
448
- --border: 240 5.9% 90%;
449
- --input: 240 5.9% 90%;
450
- --ring: 142.1 76.2% 36.3%;
451
- --radius: 0.5rem;
452
- }
453
-
454
- .dark {
455
- --background: 20 14.3% 4.1%;
456
- --foreground: 0 0% 95%;
457
- --card: 24 9.8% 10%;
458
- --card-foreground: 0 0% 95%;
459
- --popover: 0 0% 9%;
460
- --popover-foreground: 0 0% 95%;
461
- --primary: 142.1 70.6% 45.3%;
462
- --primary-foreground: 144.9 80.4% 10%;
463
- --secondary: 240 3.7% 15.9%;
464
- --secondary-foreground: 0 0% 98%;
465
- --muted: 0 0% 15%;
466
- --muted-foreground: 240 5% 64.9%;
467
- --accent: 12 6.5% 15.1%;
468
- --accent-foreground: 0 0% 98%;
469
- --destructive: 0 62.8% 30.6%;
470
- --destructive-foreground: 0 85.7% 97.3%;
471
- --border: 240 3.7% 15.9%;
472
- --input: 240 3.7% 15.9%;
473
- --ring: 142.4 71.8% 29.2%;
474
- }
475
- }
476
-
477
- `;
478
-
479
- export const BLUE_THEME = `
480
- @layer base {
481
- :root {
482
- --background: 0 0% 100%;
483
- --foreground: 222.2 84% 4.9%;
484
- --card: 0 0% 100%;
485
- --card-foreground: 222.2 84% 4.9%;
486
- --popover: 0 0% 100%;
487
- --popover-foreground: 222.2 84% 4.9%;
488
- --primary: 221.2 83.2% 53.3%;
489
- --primary-foreground: 210 40% 98%;
490
- --secondary: 210 40% 96.1%;
491
- --secondary-foreground: 222.2 47.4% 11.2%;
492
- --muted: 210 40% 96.1%;
493
- --muted-foreground: 215.4 16.3% 46.9%;
494
- --accent: 210 40% 96.1%;
495
- --accent-foreground: 222.2 47.4% 11.2%;
496
- --destructive: 0 84.2% 60.2%;
497
- --destructive-foreground: 210 40% 98%;
498
- --border: 214.3 31.8% 91.4%;
499
- --input: 214.3 31.8% 91.4%;
500
- --ring: 221.2 83.2% 53.3%;
501
- --radius: 0.5rem;
502
- }
503
-
504
- .dark {
505
- --background: 222.2 84% 4.9%;
506
- --foreground: 210 40% 98%;
507
- --card: 222.2 84% 4.9%;
508
- --card-foreground: 210 40% 98%;
509
- --popover: 222.2 84% 4.9%;
510
- --popover-foreground: 210 40% 98%;
511
- --primary: 217.2 91.2% 59.8%;
512
- --primary-foreground: 222.2 47.4% 11.2%;
513
- --secondary: 217.2 32.6% 17.5%;
514
- --secondary-foreground: 210 40% 98%;
515
- --muted: 217.2 32.6% 17.5%;
516
- --muted-foreground: 215 20.2% 65.1%;
517
- --accent: 217.2 32.6% 17.5%;
518
- --accent-foreground: 210 40% 98%;
519
- --destructive: 0 62.8% 30.6%;
520
- --destructive-foreground: 210 40% 98%;
521
- --border: 217.2 32.6% 17.5%;
522
- --input: 217.2 32.6% 17.5%;
523
- --ring: 224.3 76.3% 48%;
524
- }
525
- }
526
-
527
- `;
528
-
529
- export const YELLOW_THEME = `
530
- @layer base {
531
- :root {
532
- --background: 0 0% 100%;
533
- --foreground: 20 14.3% 4.1%;
534
- --card: 0 0% 100%;
535
- --card-foreground: 20 14.3% 4.1%;
536
- --popover: 0 0% 100%;
537
- --popover-foreground: 20 14.3% 4.1%;
538
- --primary: 47.9 95.8% 53.1%;
539
- --primary-foreground: 26 83.3% 14.1%;
540
- --secondary: 60 4.8% 95.9%;
541
- --secondary-foreground: 24 9.8% 10%;
542
- --muted: 60 4.8% 95.9%;
543
- --muted-foreground: 25 5.3% 44.7%;
544
- --accent: 60 4.8% 95.9%;
545
- --accent-foreground: 24 9.8% 10%;
546
- --destructive: 0 84.2% 60.2%;
547
- --destructive-foreground: 60 9.1% 97.8%;
548
- --border: 20 5.9% 90%;
549
- --input: 20 5.9% 90%;
550
- --ring: 20 14.3% 4.1%;
551
- --radius: 0.5rem;
552
- }
553
-
554
- .dark {
555
- --background: 20 14.3% 4.1%;
556
- --foreground: 60 9.1% 97.8%;
557
- --card: 20 14.3% 4.1%;
558
- --card-foreground: 60 9.1% 97.8%;
559
- --popover: 20 14.3% 4.1%;
560
- --popover-foreground: 60 9.1% 97.8%;
561
- --primary: 47.9 95.8% 53.1%;
562
- --primary-foreground: 26 83.3% 14.1%;
563
- --secondary: 12 6.5% 15.1%;
564
- --secondary-foreground: 60 9.1% 97.8%;
565
- --muted: 12 6.5% 15.1%;
566
- --muted-foreground: 24 5.4% 63.9%;
567
- --accent: 12 6.5% 15.1%;
568
- --accent-foreground: 60 9.1% 97.8%;
569
- --destructive: 0 62.8% 30.6%;
570
- --destructive-foreground: 60 9.1% 97.8%;
571
- --border: 12 6.5% 15.1%;
572
- --input: 12 6.5% 15.1%;
573
- --ring: 35.5 91.7% 32.9%;
574
- }
575
- }
576
-
577
- `;
578
-
579
- export const VIOLET_THEME = `
580
- @layer base {
581
- :root {
582
- --background: 0 0% 100%;
583
- --foreground: 224 71.4% 4.1%;
584
- --card: 0 0% 100%;
585
- --card-foreground: 224 71.4% 4.1%;
586
- --popover: 0 0% 100%;
587
- --popover-foreground: 224 71.4% 4.1%;
588
- --primary: 262.1 83.3% 57.8%;
589
- --primary-foreground: 210 20% 98%;
590
- --secondary: 220 14.3% 95.9%;
591
- --secondary-foreground: 220.9 39.3% 11%;
592
- --muted: 220 14.3% 95.9%;
593
- --muted-foreground: 220 8.9% 46.1%;
594
- --accent: 220 14.3% 95.9%;
595
- --accent-foreground: 220.9 39.3% 11%;
596
- --destructive: 0 84.2% 60.2%;
597
- --destructive-foreground: 210 20% 98%;
598
- --border: 220 13% 91%;
599
- --input: 220 13% 91%;
600
- --ring: 262.1 83.3% 57.8%;
601
- --radius: 0.5rem;
602
- }
603
-
604
- .dark {
605
- --background: 224 71.4% 4.1%;
606
- --foreground: 210 20% 98%;
607
- --card: 224 71.4% 4.1%;
608
- --card-foreground: 210 20% 98%;
609
- --popover: 224 71.4% 4.1%;
610
- --popover-foreground: 210 20% 98%;
611
- --primary: 263.4 70% 50.4%;
612
- --primary-foreground: 210 20% 98%;
613
- --secondary: 215 27.9% 16.9%;
614
- --secondary-foreground: 210 20% 98%;
615
- --muted: 215 27.9% 16.9%;
616
- --muted-foreground: 217.9 10.6% 64.9%;
617
- --accent: 215 27.9% 16.9%;
618
- --accent-foreground: 210 20% 98%;
619
- --destructive: 0 62.8% 30.6%;
620
- --destructive-foreground: 210 20% 98%;
621
- --border: 215 27.9% 16.9%;
622
- --input: 215 27.9% 16.9%;
623
- --ring: 263.4 70% 50.4%;
624
- }
625
- }
626
-
627
- `;
628
- const themes = {
629
- ZINC: ZINC_THEME,
630
- SLATE: SLATE_THEME,
631
- STONE: STONE_THEME,
632
- GRAY: GRAY_THEME,
633
- NEUTRAL: NEUTRAL_THEME,
634
- RED: RED_THEME,
635
- ROSE: ROSE_THEME,
636
- ORANGE: ORANGE_THEME,
637
- GREEN: GREEN_THEME,
638
- BLUE: BLUE_THEME,
639
- YELLOW: YELLOW_THEME,
640
- VIOLET: VIOLET_THEME,
641
- };
1
+ export const CSS_START = `@import url("https://rsms.me/inter/inter.css");
2
+
3
+ @tailwind base;
4
+ @tailwind components;
5
+ @tailwind utilities;
6
+ `;
7
+
8
+ export const CSS_END = `@layer base {
9
+ * {
10
+ @apply border-border;
11
+ }
12
+ body {
13
+ @apply bg-background text-foreground;
14
+ font-feature-settings:
15
+ "rlig" 1,
16
+ "calt" 1;
17
+ }
18
+ }
19
+
20
+ `;
21
+
22
+ export const createCSS = (theme: keyof typeof themes) => {
23
+ // if them is not in themes, set them to ZINC
24
+ if (!themes[theme]) {
25
+ theme = "ZINC";
26
+ }
27
+ return `${CSS_START}${themes[theme]}${CSS_END}`;
28
+ };
29
+
30
+ export const ZINC_THEME = `
31
+ @layer base {
32
+ :root {
33
+ --background: 0 0% 100%;
34
+ --foreground: 240 10% 3.9%;
35
+ --card: 0 0% 100%;
36
+ --card-foreground: 240 10% 3.9%;
37
+ --popover: 0 0% 100%;
38
+ --popover-foreground: 240 10% 3.9%;
39
+ --primary: 240 5.9% 10%;
40
+ --primary-foreground: 0 0% 98%;
41
+ --secondary: 240 4.8% 95.9%;
42
+ --secondary-foreground: 240 5.9% 10%;
43
+ --muted: 240 4.8% 95.9%;
44
+ --muted-foreground: 240 3.8% 46.1%;
45
+ --accent: 240 4.8% 95.9%;
46
+ --accent-foreground: 240 5.9% 10%;
47
+ --destructive: 0 84.2% 60.2%;
48
+ --destructive-foreground: 0 0% 98%;
49
+ --border: 240 5.9% 90%;
50
+ --input: 240 5.9% 90%;
51
+ --ring: 240 5.9% 10%;
52
+ --radius: 0.5rem;
53
+ }
54
+
55
+ .dark {
56
+ --background: 240 10% 3.9%;
57
+ --foreground: 0 0% 98%;
58
+ --card: 240 10% 3.9%;
59
+ --card-foreground: 0 0% 98%;
60
+ --popover: 240 10% 3.9%;
61
+ --popover-foreground: 0 0% 98%;
62
+ --primary: 0 0% 98%;
63
+ --primary-foreground: 240 5.9% 10%;
64
+ --secondary: 240 3.7% 15.9%;
65
+ --secondary-foreground: 0 0% 98%;
66
+ --muted: 240 3.7% 15.9%;
67
+ --muted-foreground: 240 5% 64.9%;
68
+ --accent: 240 3.7% 15.9%;
69
+ --accent-foreground: 0 0% 98%;
70
+ --destructive: 0 62.8% 30.6%;
71
+ --destructive-foreground: 0 0% 98%;
72
+ --border: 240 3.7% 15.9%;
73
+ --input: 240 3.7% 15.9%;
74
+ --ring: 240 4.9% 83.9%;
75
+ }
76
+ }
77
+
78
+ `;
79
+ export const SLATE_THEME = `
80
+ @layer base {
81
+ :root {
82
+ --background: 0 0% 100%;
83
+ --foreground: 222.2 84% 4.9%;
84
+ --card: 0 0% 100%;
85
+ --card-foreground: 222.2 84% 4.9%;
86
+ --popover: 0 0% 100%;
87
+ --popover-foreground: 222.2 84% 4.9%;
88
+ --primary: 222.2 47.4% 11.2%;
89
+ --primary-foreground: 210 40% 98%;
90
+ --secondary: 210 40% 96.1%;
91
+ --secondary-foreground: 222.2 47.4% 11.2%;
92
+ --muted: 210 40% 96.1%;
93
+ --muted-foreground: 215.4 16.3% 46.9%;
94
+ --accent: 210 40% 96.1%;
95
+ --accent-foreground: 222.2 47.4% 11.2%;
96
+ --destructive: 0 84.2% 60.2%;
97
+ --destructive-foreground: 210 40% 98%;
98
+ --border: 214.3 31.8% 91.4%;
99
+ --input: 214.3 31.8% 91.4%;
100
+ --ring: 222.2 84% 4.9%;
101
+ --radius: 0.5rem;
102
+ }
103
+
104
+ .dark {
105
+ --background: 222.2 84% 4.9%;
106
+ --foreground: 210 40% 98%;
107
+ --card: 222.2 84% 4.9%;
108
+ --card-foreground: 210 40% 98%;
109
+ --popover: 222.2 84% 4.9%;
110
+ --popover-foreground: 210 40% 98%;
111
+ --primary: 210 40% 98%;
112
+ --primary-foreground: 222.2 47.4% 11.2%;
113
+ --secondary: 217.2 32.6% 17.5%;
114
+ --secondary-foreground: 210 40% 98%;
115
+ --muted: 217.2 32.6% 17.5%;
116
+ --muted-foreground: 215 20.2% 65.1%;
117
+ --accent: 217.2 32.6% 17.5%;
118
+ --accent-foreground: 210 40% 98%;
119
+ --destructive: 0 62.8% 30.6%;
120
+ --destructive-foreground: 210 40% 98%;
121
+ --border: 217.2 32.6% 17.5%;
122
+ --input: 217.2 32.6% 17.5%;
123
+ --ring: 212.7 26.8% 83.9;
124
+ }
125
+ }
126
+
127
+ `;
128
+
129
+ export const STONE_THEME = `
130
+ @layer base {
131
+ :root {
132
+ --background: 0 0% 100%;
133
+ --foreground: 20 14.3% 4.1%;
134
+ --card: 0 0% 100%;
135
+ --card-foreground: 20 14.3% 4.1%;
136
+ --popover: 0 0% 100%;
137
+ --popover-foreground: 20 14.3% 4.1%;
138
+ --primary: 24 9.8% 10%;
139
+ --primary-foreground: 60 9.1% 97.8%;
140
+ --secondary: 60 4.8% 95.9%;
141
+ --secondary-foreground: 24 9.8% 10%;
142
+ --muted: 60 4.8% 95.9%;
143
+ --muted-foreground: 25 5.3% 44.7%;
144
+ --accent: 60 4.8% 95.9%;
145
+ --accent-foreground: 24 9.8% 10%;
146
+ --destructive: 0 84.2% 60.2%;
147
+ --destructive-foreground: 60 9.1% 97.8%;
148
+ --border: 20 5.9% 90%;
149
+ --input: 20 5.9% 90%;
150
+ --ring: 20 14.3% 4.1%;
151
+ --radius: 0.5rem;
152
+ }
153
+
154
+ .dark {
155
+ --background: 20 14.3% 4.1%;
156
+ --foreground: 60 9.1% 97.8%;
157
+ --card: 20 14.3% 4.1%;
158
+ --card-foreground: 60 9.1% 97.8%;
159
+ --popover: 20 14.3% 4.1%;
160
+ --popover-foreground: 60 9.1% 97.8%;
161
+ --primary: 60 9.1% 97.8%;
162
+ --primary-foreground: 24 9.8% 10%;
163
+ --secondary: 12 6.5% 15.1%;
164
+ --secondary-foreground: 60 9.1% 97.8%;
165
+ --muted: 12 6.5% 15.1%;
166
+ --muted-foreground: 24 5.4% 63.9%;
167
+ --accent: 12 6.5% 15.1%;
168
+ --accent-foreground: 60 9.1% 97.8%;
169
+ --destructive: 0 62.8% 30.6%;
170
+ --destructive-foreground: 60 9.1% 97.8%;
171
+ --border: 12 6.5% 15.1%;
172
+ --input: 12 6.5% 15.1%;
173
+ --ring: 24 5.7% 82.9%;
174
+ }
175
+ }
176
+
177
+ `;
178
+
179
+ export const GRAY_THEME = `
180
+ @layer base {
181
+ :root {
182
+ --background: 0 0% 100%;
183
+ --foreground: 224 71.4% 4.1%;
184
+ --card: 0 0% 100%;
185
+ --card-foreground: 224 71.4% 4.1%;
186
+ --popover: 0 0% 100%;
187
+ --popover-foreground: 224 71.4% 4.1%;
188
+ --primary: 220.9 39.3% 11%;
189
+ --primary-foreground: 210 20% 98%;
190
+ --secondary: 220 14.3% 95.9%;
191
+ --secondary-foreground: 220.9 39.3% 11%;
192
+ --muted: 220 14.3% 95.9%;
193
+ --muted-foreground: 220 8.9% 46.1%;
194
+ --accent: 220 14.3% 95.9%;
195
+ --accent-foreground: 220.9 39.3% 11%;
196
+ --destructive: 0 84.2% 60.2%;
197
+ --destructive-foreground: 210 20% 98%;
198
+ --border: 220 13% 91%;
199
+ --input: 220 13% 91%;
200
+ --ring: 224 71.4% 4.1%;
201
+ --radius: 0.5rem;
202
+ }
203
+
204
+ .dark {
205
+ --background: 224 71.4% 4.1%;
206
+ --foreground: 210 20% 98%;
207
+ --card: 224 71.4% 4.1%;
208
+ --card-foreground: 210 20% 98%;
209
+ --popover: 224 71.4% 4.1%;
210
+ --popover-foreground: 210 20% 98%;
211
+ --primary: 210 20% 98%;
212
+ --primary-foreground: 220.9 39.3% 11%;
213
+ --secondary: 215 27.9% 16.9%;
214
+ --secondary-foreground: 210 20% 98%;
215
+ --muted: 215 27.9% 16.9%;
216
+ --muted-foreground: 217.9 10.6% 64.9%;
217
+ --accent: 215 27.9% 16.9%;
218
+ --accent-foreground: 210 20% 98%;
219
+ --destructive: 0 62.8% 30.6%;
220
+ --destructive-foreground: 210 20% 98%;
221
+ --border: 215 27.9% 16.9%;
222
+ --input: 215 27.9% 16.9%;
223
+ --ring: 216 12.2% 83.9%;
224
+ }
225
+ }
226
+
227
+ `;
228
+
229
+ export const NEUTRAL_THEME = `
230
+ @layer base {
231
+ :root {
232
+ --background: 0 0% 100%;
233
+ --foreground: 0 0% 3.9%;
234
+ --card: 0 0% 100%;
235
+ --card-foreground: 0 0% 3.9%;
236
+ --popover: 0 0% 100%;
237
+ --popover-foreground: 0 0% 3.9%;
238
+ --primary: 0 0% 9%;
239
+ --primary-foreground: 0 0% 98%;
240
+ --secondary: 0 0% 96.1%;
241
+ --secondary-foreground: 0 0% 9%;
242
+ --muted: 0 0% 96.1%;
243
+ --muted-foreground: 0 0% 45.1%;
244
+ --accent: 0 0% 96.1%;
245
+ --accent-foreground: 0 0% 9%;
246
+ --destructive: 0 84.2% 60.2%;
247
+ --destructive-foreground: 0 0% 98%;
248
+ --border: 0 0% 89.8%;
249
+ --input: 0 0% 89.8%;
250
+ --ring: 0 0% 3.9%;
251
+ --radius: 0.5rem;
252
+ }
253
+
254
+ .dark {
255
+ --background: 0 0% 3.9%;
256
+ --foreground: 0 0% 98%;
257
+ --card: 0 0% 3.9%;
258
+ --card-foreground: 0 0% 98%;
259
+ --popover: 0 0% 3.9%;
260
+ --popover-foreground: 0 0% 98%;
261
+ --primary: 0 0% 98%;
262
+ --primary-foreground: 0 0% 9%;
263
+ --secondary: 0 0% 14.9%;
264
+ --secondary-foreground: 0 0% 98%;
265
+ --muted: 0 0% 14.9%;
266
+ --muted-foreground: 0 0% 63.9%;
267
+ --accent: 0 0% 14.9%;
268
+ --accent-foreground: 0 0% 98%;
269
+ --destructive: 0 62.8% 30.6%;
270
+ --destructive-foreground: 0 0% 98%;
271
+ --border: 0 0% 14.9%;
272
+ --input: 0 0% 14.9%;
273
+ --ring: 0 0% 83.1%;
274
+ }
275
+ }
276
+
277
+ `;
278
+
279
+ export const RED_THEME = `
280
+ @layer base {
281
+ :root {
282
+ --background: 0 0% 100%;
283
+ --foreground: 0 0% 3.9%;
284
+ --card: 0 0% 100%;
285
+ --card-foreground: 0 0% 3.9%;
286
+ --popover: 0 0% 100%;
287
+ --popover-foreground: 0 0% 3.9%;
288
+ --primary: 0 72.2% 50.6%;
289
+ --primary-foreground: 0 85.7% 97.3%;
290
+ --secondary: 0 0% 96.1%;
291
+ --secondary-foreground: 0 0% 9%;
292
+ --muted: 0 0% 96.1%;
293
+ --muted-foreground: 0 0% 45.1%;
294
+ --accent: 0 0% 96.1%;
295
+ --accent-foreground: 0 0% 9%;
296
+ --destructive: 0 84.2% 60.2%;
297
+ --destructive-foreground: 0 0% 98%;
298
+ --border: 0 0% 89.8%;
299
+ --input: 0 0% 89.8%;
300
+ --ring: 0 72.2% 50.6%;
301
+ --radius: 0.5rem;
302
+ }
303
+
304
+ .dark {
305
+ --background: 0 0% 3.9%;
306
+ --foreground: 0 0% 98%;
307
+ --card: 0 0% 3.9%;
308
+ --card-foreground: 0 0% 98%;
309
+ --popover: 0 0% 3.9%;
310
+ --popover-foreground: 0 0% 98%;
311
+ --primary: 0 72.2% 50.6%;
312
+ --primary-foreground: 0 85.7% 97.3%;
313
+ --secondary: 0 0% 14.9%;
314
+ --secondary-foreground: 0 0% 98%;
315
+ --muted: 0 0% 14.9%;
316
+ --muted-foreground: 0 0% 63.9%;
317
+ --accent: 0 0% 14.9%;
318
+ --accent-foreground: 0 0% 98%;
319
+ --destructive: 0 62.8% 30.6%;
320
+ --destructive-foreground: 0 0% 98%;
321
+ --border: 0 0% 14.9%;
322
+ --input: 0 0% 14.9%;
323
+ --ring: 0 72.2% 50.6%;
324
+ }
325
+ }
326
+
327
+ `;
328
+
329
+ export const ROSE_THEME = `
330
+ @layer base {
331
+ :root {
332
+ --background: 0 0% 100%;
333
+ --foreground: 240 10% 3.9%;
334
+ --card: 0 0% 100%;
335
+ --card-foreground: 240 10% 3.9%;
336
+ --popover: 0 0% 100%;
337
+ --popover-foreground: 240 10% 3.9%;
338
+ --primary: 346.8 77.2% 49.8%;
339
+ --primary-foreground: 355.7 100% 97.3%;
340
+ --secondary: 240 4.8% 95.9%;
341
+ --secondary-foreground: 240 5.9% 10%;
342
+ --muted: 240 4.8% 95.9%;
343
+ --muted-foreground: 240 3.8% 46.1%;
344
+ --accent: 240 4.8% 95.9%;
345
+ --accent-foreground: 240 5.9% 10%;
346
+ --destructive: 0 84.2% 60.2%;
347
+ --destructive-foreground: 0 0% 98%;
348
+ --border: 240 5.9% 90%;
349
+ --input: 240 5.9% 90%;
350
+ --ring: 346.8 77.2% 49.8%;
351
+ --radius: 0.5rem;
352
+ }
353
+
354
+ .dark {
355
+ --background: 20 14.3% 4.1%;
356
+ --foreground: 0 0% 95%;
357
+ --card: 24 9.8% 10%;
358
+ --card-foreground: 0 0% 95%;
359
+ --popover: 0 0% 9%;
360
+ --popover-foreground: 0 0% 95%;
361
+ --primary: 346.8 77.2% 49.8%;
362
+ --primary-foreground: 355.7 100% 97.3%;
363
+ --secondary: 240 3.7% 15.9%;
364
+ --secondary-foreground: 0 0% 98%;
365
+ --muted: 0 0% 15%;
366
+ --muted-foreground: 240 5% 64.9%;
367
+ --accent: 12 6.5% 15.1%;
368
+ --accent-foreground: 0 0% 98%;
369
+ --destructive: 0 62.8% 30.6%;
370
+ --destructive-foreground: 0 85.7% 97.3%;
371
+ --border: 240 3.7% 15.9%;
372
+ --input: 240 3.7% 15.9%;
373
+ --ring: 346.8 77.2% 49.8%;
374
+ }
375
+ }
376
+
377
+ `;
378
+
379
+ export const ORANGE_THEME = `
380
+ @layer base {
381
+ :root {
382
+ --background: 0 0% 100%;
383
+ --foreground: 20 14.3% 4.1%;
384
+ --card: 0 0% 100%;
385
+ --card-foreground: 20 14.3% 4.1%;
386
+ --popover: 0 0% 100%;
387
+ --popover-foreground: 20 14.3% 4.1%;
388
+ --primary: 24.6 95% 53.1%;
389
+ --primary-foreground: 60 9.1% 97.8%;
390
+ --secondary: 60 4.8% 95.9%;
391
+ --secondary-foreground: 24 9.8% 10%;
392
+ --muted: 60 4.8% 95.9%;
393
+ --muted-foreground: 25 5.3% 44.7%;
394
+ --accent: 60 4.8% 95.9%;
395
+ --accent-foreground: 24 9.8% 10%;
396
+ --destructive: 0 84.2% 60.2%;
397
+ --destructive-foreground: 60 9.1% 97.8%;
398
+ --border: 20 5.9% 90%;
399
+ --input: 20 5.9% 90%;
400
+ --ring: 24.6 95% 53.1%;
401
+ --radius: 0.5rem;
402
+ }
403
+
404
+ .dark {
405
+ --background: 20 14.3% 4.1%;
406
+ --foreground: 60 9.1% 97.8%;
407
+ --card: 20 14.3% 4.1%;
408
+ --card-foreground: 60 9.1% 97.8%;
409
+ --popover: 20 14.3% 4.1%;
410
+ --popover-foreground: 60 9.1% 97.8%;
411
+ --primary: 20.5 90.2% 48.2%;
412
+ --primary-foreground: 60 9.1% 97.8%;
413
+ --secondary: 12 6.5% 15.1%;
414
+ --secondary-foreground: 60 9.1% 97.8%;
415
+ --muted: 12 6.5% 15.1%;
416
+ --muted-foreground: 24 5.4% 63.9%;
417
+ --accent: 12 6.5% 15.1%;
418
+ --accent-foreground: 60 9.1% 97.8%;
419
+ --destructive: 0 72.2% 50.6%;
420
+ --destructive-foreground: 60 9.1% 97.8%;
421
+ --border: 12 6.5% 15.1%;
422
+ --input: 12 6.5% 15.1%;
423
+ --ring: 20.5 90.2% 48.2%;
424
+ }
425
+ }
426
+
427
+ `;
428
+
429
+ export const GREEN_THEME = `
430
+ @layer base {
431
+ :root {
432
+ --background: 0 0% 100%;
433
+ --foreground: 240 10% 3.9%;
434
+ --card: 0 0% 100%;
435
+ --card-foreground: 240 10% 3.9%;
436
+ --popover: 0 0% 100%;
437
+ --popover-foreground: 240 10% 3.9%;
438
+ --primary: 142.1 76.2% 36.3%;
439
+ --primary-foreground: 355.7 100% 97.3%;
440
+ --secondary: 240 4.8% 95.9%;
441
+ --secondary-foreground: 240 5.9% 10%;
442
+ --muted: 240 4.8% 95.9%;
443
+ --muted-foreground: 240 3.8% 46.1%;
444
+ --accent: 240 4.8% 95.9%;
445
+ --accent-foreground: 240 5.9% 10%;
446
+ --destructive: 0 84.2% 60.2%;
447
+ --destructive-foreground: 0 0% 98%;
448
+ --border: 240 5.9% 90%;
449
+ --input: 240 5.9% 90%;
450
+ --ring: 142.1 76.2% 36.3%;
451
+ --radius: 0.5rem;
452
+ }
453
+
454
+ .dark {
455
+ --background: 20 14.3% 4.1%;
456
+ --foreground: 0 0% 95%;
457
+ --card: 24 9.8% 10%;
458
+ --card-foreground: 0 0% 95%;
459
+ --popover: 0 0% 9%;
460
+ --popover-foreground: 0 0% 95%;
461
+ --primary: 142.1 70.6% 45.3%;
462
+ --primary-foreground: 144.9 80.4% 10%;
463
+ --secondary: 240 3.7% 15.9%;
464
+ --secondary-foreground: 0 0% 98%;
465
+ --muted: 0 0% 15%;
466
+ --muted-foreground: 240 5% 64.9%;
467
+ --accent: 12 6.5% 15.1%;
468
+ --accent-foreground: 0 0% 98%;
469
+ --destructive: 0 62.8% 30.6%;
470
+ --destructive-foreground: 0 85.7% 97.3%;
471
+ --border: 240 3.7% 15.9%;
472
+ --input: 240 3.7% 15.9%;
473
+ --ring: 142.4 71.8% 29.2%;
474
+ }
475
+ }
476
+
477
+ `;
478
+
479
+ export const BLUE_THEME = `
480
+ @layer base {
481
+ :root {
482
+ --background: 0 0% 100%;
483
+ --foreground: 222.2 84% 4.9%;
484
+ --card: 0 0% 100%;
485
+ --card-foreground: 222.2 84% 4.9%;
486
+ --popover: 0 0% 100%;
487
+ --popover-foreground: 222.2 84% 4.9%;
488
+ --primary: 221.2 83.2% 53.3%;
489
+ --primary-foreground: 210 40% 98%;
490
+ --secondary: 210 40% 96.1%;
491
+ --secondary-foreground: 222.2 47.4% 11.2%;
492
+ --muted: 210 40% 96.1%;
493
+ --muted-foreground: 215.4 16.3% 46.9%;
494
+ --accent: 210 40% 96.1%;
495
+ --accent-foreground: 222.2 47.4% 11.2%;
496
+ --destructive: 0 84.2% 60.2%;
497
+ --destructive-foreground: 210 40% 98%;
498
+ --border: 214.3 31.8% 91.4%;
499
+ --input: 214.3 31.8% 91.4%;
500
+ --ring: 221.2 83.2% 53.3%;
501
+ --radius: 0.5rem;
502
+ }
503
+
504
+ .dark {
505
+ --background: 222.2 84% 4.9%;
506
+ --foreground: 210 40% 98%;
507
+ --card: 222.2 84% 4.9%;
508
+ --card-foreground: 210 40% 98%;
509
+ --popover: 222.2 84% 4.9%;
510
+ --popover-foreground: 210 40% 98%;
511
+ --primary: 217.2 91.2% 59.8%;
512
+ --primary-foreground: 222.2 47.4% 11.2%;
513
+ --secondary: 217.2 32.6% 17.5%;
514
+ --secondary-foreground: 210 40% 98%;
515
+ --muted: 217.2 32.6% 17.5%;
516
+ --muted-foreground: 215 20.2% 65.1%;
517
+ --accent: 217.2 32.6% 17.5%;
518
+ --accent-foreground: 210 40% 98%;
519
+ --destructive: 0 62.8% 30.6%;
520
+ --destructive-foreground: 210 40% 98%;
521
+ --border: 217.2 32.6% 17.5%;
522
+ --input: 217.2 32.6% 17.5%;
523
+ --ring: 224.3 76.3% 48%;
524
+ }
525
+ }
526
+
527
+ `;
528
+
529
+ export const YELLOW_THEME = `
530
+ @layer base {
531
+ :root {
532
+ --background: 0 0% 100%;
533
+ --foreground: 20 14.3% 4.1%;
534
+ --card: 0 0% 100%;
535
+ --card-foreground: 20 14.3% 4.1%;
536
+ --popover: 0 0% 100%;
537
+ --popover-foreground: 20 14.3% 4.1%;
538
+ --primary: 47.9 95.8% 53.1%;
539
+ --primary-foreground: 26 83.3% 14.1%;
540
+ --secondary: 60 4.8% 95.9%;
541
+ --secondary-foreground: 24 9.8% 10%;
542
+ --muted: 60 4.8% 95.9%;
543
+ --muted-foreground: 25 5.3% 44.7%;
544
+ --accent: 60 4.8% 95.9%;
545
+ --accent-foreground: 24 9.8% 10%;
546
+ --destructive: 0 84.2% 60.2%;
547
+ --destructive-foreground: 60 9.1% 97.8%;
548
+ --border: 20 5.9% 90%;
549
+ --input: 20 5.9% 90%;
550
+ --ring: 20 14.3% 4.1%;
551
+ --radius: 0.5rem;
552
+ }
553
+
554
+ .dark {
555
+ --background: 20 14.3% 4.1%;
556
+ --foreground: 60 9.1% 97.8%;
557
+ --card: 20 14.3% 4.1%;
558
+ --card-foreground: 60 9.1% 97.8%;
559
+ --popover: 20 14.3% 4.1%;
560
+ --popover-foreground: 60 9.1% 97.8%;
561
+ --primary: 47.9 95.8% 53.1%;
562
+ --primary-foreground: 26 83.3% 14.1%;
563
+ --secondary: 12 6.5% 15.1%;
564
+ --secondary-foreground: 60 9.1% 97.8%;
565
+ --muted: 12 6.5% 15.1%;
566
+ --muted-foreground: 24 5.4% 63.9%;
567
+ --accent: 12 6.5% 15.1%;
568
+ --accent-foreground: 60 9.1% 97.8%;
569
+ --destructive: 0 62.8% 30.6%;
570
+ --destructive-foreground: 60 9.1% 97.8%;
571
+ --border: 12 6.5% 15.1%;
572
+ --input: 12 6.5% 15.1%;
573
+ --ring: 35.5 91.7% 32.9%;
574
+ }
575
+ }
576
+
577
+ `;
578
+
579
+ export const VIOLET_THEME = `
580
+ @layer base {
581
+ :root {
582
+ --background: 0 0% 100%;
583
+ --foreground: 224 71.4% 4.1%;
584
+ --card: 0 0% 100%;
585
+ --card-foreground: 224 71.4% 4.1%;
586
+ --popover: 0 0% 100%;
587
+ --popover-foreground: 224 71.4% 4.1%;
588
+ --primary: 262.1 83.3% 57.8%;
589
+ --primary-foreground: 210 20% 98%;
590
+ --secondary: 220 14.3% 95.9%;
591
+ --secondary-foreground: 220.9 39.3% 11%;
592
+ --muted: 220 14.3% 95.9%;
593
+ --muted-foreground: 220 8.9% 46.1%;
594
+ --accent: 220 14.3% 95.9%;
595
+ --accent-foreground: 220.9 39.3% 11%;
596
+ --destructive: 0 84.2% 60.2%;
597
+ --destructive-foreground: 210 20% 98%;
598
+ --border: 220 13% 91%;
599
+ --input: 220 13% 91%;
600
+ --ring: 262.1 83.3% 57.8%;
601
+ --radius: 0.5rem;
602
+ }
603
+
604
+ .dark {
605
+ --background: 224 71.4% 4.1%;
606
+ --foreground: 210 20% 98%;
607
+ --card: 224 71.4% 4.1%;
608
+ --card-foreground: 210 20% 98%;
609
+ --popover: 224 71.4% 4.1%;
610
+ --popover-foreground: 210 20% 98%;
611
+ --primary: 263.4 70% 50.4%;
612
+ --primary-foreground: 210 20% 98%;
613
+ --secondary: 215 27.9% 16.9%;
614
+ --secondary-foreground: 210 20% 98%;
615
+ --muted: 215 27.9% 16.9%;
616
+ --muted-foreground: 217.9 10.6% 64.9%;
617
+ --accent: 215 27.9% 16.9%;
618
+ --accent-foreground: 210 20% 98%;
619
+ --destructive: 0 62.8% 30.6%;
620
+ --destructive-foreground: 210 20% 98%;
621
+ --border: 215 27.9% 16.9%;
622
+ --input: 215 27.9% 16.9%;
623
+ --ring: 263.4 70% 50.4%;
624
+ }
625
+ }
626
+
627
+ `;
628
+ const themes = {
629
+ ZINC: ZINC_THEME,
630
+ SLATE: SLATE_THEME,
631
+ STONE: STONE_THEME,
632
+ GRAY: GRAY_THEME,
633
+ NEUTRAL: NEUTRAL_THEME,
634
+ RED: RED_THEME,
635
+ ROSE: ROSE_THEME,
636
+ ORANGE: ORANGE_THEME,
637
+ GREEN: GREEN_THEME,
638
+ BLUE: BLUE_THEME,
639
+ YELLOW: YELLOW_THEME,
640
+ VIOLET: VIOLET_THEME,
641
+ };