ui-thing 0.1.55 → 0.2.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.
Files changed (39) hide show
  1. package/.husky/pre-commit +1 -0
  2. package/CHANGELOG.md +80 -0
  3. package/README.md +4 -3
  4. package/dist/index.js +1273 -15547
  5. package/dist/index.js.map +1 -1
  6. package/package.json +33 -21
  7. package/src/commands/add.ts +218 -274
  8. package/src/commands/init.ts +107 -58
  9. package/src/commands/prettier.ts +6 -8
  10. package/src/commands/shortcuts.ts +13 -13
  11. package/src/commands/theme.ts +9 -6
  12. package/src/index.ts +2 -2
  13. package/src/templates/css.ts +958 -773
  14. package/src/templates/prettier.ts +14 -16
  15. package/src/templates/shortcuts.ts +225 -126
  16. package/src/templates/tw-helper.ts +8 -0
  17. package/src/templates/vs-code.ts +24 -0
  18. package/src/types.ts +74 -3
  19. package/src/utils/addPrettierConfig.ts +49 -6
  20. package/src/utils/addShortcutFiles.ts +5 -4
  21. package/src/utils/addTailwindVitePlugin.ts +35 -0
  22. package/src/utils/addVSCodeFiles.ts +13 -0
  23. package/src/utils/compareUIConfig.ts +1 -2
  24. package/src/utils/config.ts +59 -86
  25. package/src/utils/constants.ts +67 -13
  26. package/src/utils/detectNuxtVersion.ts +20 -0
  27. package/src/utils/fetchComponents.ts +14 -1
  28. package/src/utils/installPackages.ts +3 -27
  29. package/src/utils/mergeJsonFile.ts +28 -0
  30. package/src/utils/printFancyBoxMessage.ts +62 -16
  31. package/src/utils/promptForComponents.ts +8 -6
  32. package/src/utils/uiConfigPrompt.ts +12 -37
  33. package/tsconfig.json +2 -1
  34. package/dist/chunk-FW4363Y4.js +0 -2
  35. package/dist/chunk-FW4363Y4.js.map +0 -1
  36. package/dist/prompt-4NXDAQWE.js +0 -46
  37. package/dist/prompt-4NXDAQWE.js.map +0 -1
  38. package/src/comps.ts +0 -3181
  39. package/src/templates/tailwind.ts +0 -142
package/src/templates/css.ts CHANGED
@@ -1,18 +1,157 @@
1
- export const CSS_START = `@tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
1
+ const CSS_START = `@import "tailwindcss";
2
+ @import "tw-animate-css";
3
+
4
+ @plugin "@tailwindcss/forms" {
5
+ strategy: "class";
6
+ }
7
+
8
+ @custom-variant dark (&:is(.dark *));
9
+
10
+ @theme {
11
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
12
+ "Segoe UI Symbol", "Noto Color Emoji";
13
+ --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
14
+ "Courier New", monospace;
15
+ --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
16
+
17
+ --animate-shine: shine 3s ease-out infinite;
18
+ --animate-gradient-flow: gradientFlow 10s ease 0s infinite normal none running;
19
+ --animate-meteor: meteor 5s linear infinite;
20
+ --animate-background-position-spin: background-position-spin 3000ms infinite alternate;
21
+ --animate-grid: grid 15s linear infinite;
22
+
23
+ @keyframes grid {
24
+ 0% {
25
+ transform: translateY(-50%);
26
+ }
27
+ 100% {
28
+ transform: translateY(0);
29
+ }
30
+ }
31
+
32
+ @keyframes shine {
33
+ 0% {
34
+ background-position: 200% 0;
35
+ }
36
+ 25%,
37
+ 100% {
38
+ background-position: -200% 0;
39
+ }
40
+ }
41
+
42
+ @keyframes gradientFlow {
43
+ 50% {
44
+ background-position: 100% 50%;
45
+ }
46
+ 0%,
47
+ 100% {
48
+ background-position: 0% 50%;
49
+ }
50
+ }
51
+
52
+ @keyframes meteor {
53
+ 0% {
54
+ transform: rotate(var(--angle)) translateX(0);
55
+ opacity: 1;
56
+ }
57
+ 70% {
58
+ opacity: 1;
59
+ }
60
+ 100% {
61
+ transform: rotate(var(--angle)) translateX(-500px);
62
+ opacity: 0;
63
+ }
64
+ }
65
+
66
+ @keyframes background-position-spin {
67
+ 0% {
68
+ background-position: top center;
69
+ }
70
+ 100% {
71
+ background-position: bottom center;
72
+ }
73
+ }
74
+ }
75
+
76
+ @theme inline {
77
+ --radius-sm: calc(var(--radius) - 4px);
78
+ --radius-md: calc(var(--radius) - 2px);
79
+ --radius-lg: var(--radius);
80
+ --radius-xl: calc(var(--radius) + 4px);
81
+
82
+ --color-background: var(--background);
83
+ --color-foreground: var(--foreground);
84
+ --color-card: var(--card);
85
+ --color-card-foreground: var(--card-foreground);
86
+ --color-popover: var(--popover);
87
+ --color-popover-foreground: var(--popover-foreground);
88
+ --color-primary: var(--primary);
89
+ --color-primary-foreground: var(--primary-foreground);
90
+ --color-secondary: var(--secondary);
91
+ --color-secondary-foreground: var(--secondary-foreground);
92
+ --color-muted: var(--muted);
93
+ --color-muted-foreground: var(--muted-foreground);
94
+ --color-accent: var(--accent);
95
+ --color-accent-foreground: var(--accent-foreground);
96
+ --color-destructive: var(--destructive);
97
+ --color-destructive-foreground: var(--destructive-foreground);
98
+ --color-border: var(--border);
99
+ --color-input: var(--input);
100
+ --color-ring: var(--ring);
101
+
102
+ --color-sidebar-background: var(--sidebar-background);
103
+ --color-sidebar-foreground: var(--sidebar-foreground);
104
+ --color-sidebar-primary: var(--sidebar-primary);
105
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
106
+ --color-sidebar-accent: var(--sidebar-accent);
107
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
108
+ --color-sidebar-border: var(--sidebar-border);
109
+ --color-sidebar-ring: var(--sidebar-ring);
110
+ --color-sidebar-input: var(--sidebar-input);
111
+
112
+ --color-gradient-lime: var(--gradient-lime);
113
+ --color-gradient-ocean: var(--gradient-ocean);
114
+ --color-gradient-wine: var(--gradient-wine);
115
+ --color-gradient-rust: var(--gradient-rust);
116
+ }
117
+
118
+ :root {
119
+ /* Gradient slide show Colors */
120
+ --gradient-lime: oklch(67.287% 0.1546 116.644);
121
+ --gradient-ocean: oklch(44.56% 0.10114 242.813);
122
+ --gradient-wine: oklch(32.332% 0.12034 5.266);
123
+ --gradient-rust: oklch(55.695% 0.19944 34.155);
124
+ }
125
+
4
126
  `;
5
127
 
6
- export const CSS_END = `@layer base {
128
+ const CSS_END = `@layer base {
129
+ * {
130
+ @apply border-border outline-ring/50;
131
+ }
7
132
  * {
8
- @apply border-border;
133
+ scrollbar-width: thin;
134
+ scrollbar-color: var(--border) transparent;
9
135
  }
10
136
  html {
11
137
  @apply antialiased;
12
138
  }
13
139
  body {
14
140
  @apply bg-background text-foreground;
15
- font-feature-settings: "cv02", "cv03", "cv04", "cv11";
141
+ }
142
+ ::-webkit-scrollbar {
143
+ width: 4px;
144
+ }
145
+ ::-webkit-scrollbar-track {
146
+ background: transparent;
147
+ }
148
+ ::-webkit-scrollbar-thumb {
149
+ background: var(--border);
150
+ border-radius: 4px;
151
+ }
152
+ button:not(:disabled),
153
+ [role="button"]:not(:disabled) {
154
+ cursor: pointer;
16
155
  }
17
156
  }
18
157
  `;
@@ -26,817 +165,863 @@ export const createCSS = (theme: keyof typeof themes) => {
26
165
  };
27
166
 
28
167
  export const ZINC_THEME = `
29
- @layer base {
30
- :root {
31
- --background: 0 0% 100%;
32
- --foreground: 240 10% 3.9%;
33
- --card: 0 0% 100%;
34
- --card-foreground: 240 10% 3.9%;
35
- --popover: 0 0% 100%;
36
- --popover-foreground: 240 10% 3.9%;
37
- --primary: 240 5.9% 10%;
38
- --primary-foreground: 0 0% 98%;
39
- --secondary: 240 4.8% 95.9%;
40
- --secondary-foreground: 240 5.9% 10%;
41
- --muted: 240 4.8% 95.9%;
42
- --muted-foreground: 240 3.8% 46.1%;
43
- --accent: 240 4.8% 95.9%;
44
- --accent-foreground: 240 5.9% 10%;
45
- --destructive: 0 84.2% 60.2%;
46
- --destructive-foreground: 0 0% 98%;
47
- --border: 240 5.9% 90%;
48
- --input: 240 5.9% 90%;
49
- --ring: 240 5.9% 10%;
50
- --radius: 0.5rem;
51
- --sidebar-background: 0 0% 98%;
52
- --sidebar-foreground: 240 5.3% 26.1%;
53
- --sidebar-primary: 240 5.9% 10%;
54
- --sidebar-primary-foreground: 0 0% 98%;
55
- --sidebar-accent: 240 4.8% 95.9%;
56
- --sidebar-accent-foreground: 240 5.9% 10%;
57
- --sidebar-border: 220 13% 91%;
58
- --sidebar-ring: 217.2 91.2% 59.8%;
59
- --sidebar-input: 240 3.7% 15.9%;
60
- --sidebar-input: 240 5.9% 90%;
61
- }
62
-
63
- .dark {
64
- --background: 240 10% 3.9%;
65
- --foreground: 0 0% 98%;
66
- --card: 240 10% 3.9%;
67
- --card-foreground: 0 0% 98%;
68
- --popover: 240 10% 3.9%;
69
- --popover-foreground: 0 0% 98%;
70
- --primary: 0 0% 98%;
71
- --primary-foreground: 240 5.9% 10%;
72
- --secondary: 240 3.7% 15.9%;
73
- --secondary-foreground: 0 0% 98%;
74
- --muted: 240 3.7% 15.9%;
75
- --muted-foreground: 240 5% 64.9%;
76
- --accent: 240 3.7% 15.9%;
77
- --accent-foreground: 0 0% 98%;
78
- --destructive: 0 62.8% 30.6%;
79
- --destructive-foreground: 0 0% 98%;
80
- --border: 240 3.7% 15.9%;
81
- --input: 240 3.7% 15.9%;
82
- --ring: 240 4.9% 83.9%;
83
- --sidebar-background: 240 5.9% 10%;
84
- --sidebar-foreground: 240 4.8% 95.9%;
85
- --sidebar-primary: 224.3 76.3% 48%;
86
- --sidebar-primary-foreground: 0 0% 100%;
87
- --sidebar-accent: 240 3.7% 15.9%;
88
- --sidebar-accent-foreground: 240 4.8% 95.9%;
89
- --sidebar-border: 240 3.7% 15.9%;
90
- --sidebar-ring: 217.2 91.2% 59.8%;
91
- --sidebar-input: 240 3.7% 15.9%;
92
- }
168
+ :root {
169
+ --radius: 0.65rem;
170
+ --background: oklch(1 0 0);
171
+ --foreground: oklch(0.145 0 0);
172
+ --card: oklch(1 0 0);
173
+ --card-foreground: oklch(0.145 0 0);
174
+ --popover: oklch(1 0 0);
175
+ --popover-foreground: oklch(0.145 0 0);
176
+ --primary: oklch(0.205 0 0);
177
+ --primary-foreground: oklch(0.985 0 0);
178
+ --secondary: oklch(0.97 0 0);
179
+ --secondary-foreground: oklch(0.205 0 0);
180
+ --muted: oklch(0.97 0 0);
181
+ --muted-foreground: oklch(0.556 0 0);
182
+ --accent: oklch(0.97 0 0);
183
+ --accent-foreground: oklch(0.205 0 0);
184
+ --destructive: oklch(0.577 0.245 27.325);
185
+ --border: oklch(0.922 0 0);
186
+ --input: oklch(0.922 0 0);
187
+ --ring: oklch(0.708 0 0);
188
+ --chart-1: oklch(0.646 0.222 41.116);
189
+ --chart-2: oklch(0.6 0.118 184.704);
190
+ --chart-3: oklch(0.398 0.07 227.392);
191
+ --chart-4: oklch(0.828 0.189 84.429);
192
+ --chart-5: oklch(0.769 0.188 70.08);
193
+ --sidebar: oklch(0.985 0 0);
194
+ --sidebar-foreground: oklch(0.145 0 0);
195
+ --sidebar-primary: oklch(0.205 0 0);
196
+ --sidebar-primary-foreground: oklch(0.985 0 0);
197
+ --sidebar-accent: oklch(0.97 0 0);
198
+ --sidebar-accent-foreground: oklch(0.205 0 0);
199
+ --sidebar-border: oklch(0.922 0 0);
200
+ --sidebar-ring: oklch(0.708 0 0);
201
+ }
202
+
203
+ .dark {
204
+ --background: oklch(0.145 0 0);
205
+ --foreground: oklch(0.985 0 0);
206
+ --card: oklch(0.205 0 0);
207
+ --card-foreground: oklch(0.985 0 0);
208
+ --popover: oklch(0.205 0 0);
209
+ --popover-foreground: oklch(0.985 0 0);
210
+ --primary: oklch(0.922 0 0);
211
+ --primary-foreground: oklch(0.205 0 0);
212
+ --secondary: oklch(0.269 0 0);
213
+ --secondary-foreground: oklch(0.985 0 0);
214
+ --muted: oklch(0.269 0 0);
215
+ --muted-foreground: oklch(0.708 0 0);
216
+ --accent: oklch(0.269 0 0);
217
+ --accent-foreground: oklch(0.985 0 0);
218
+ --destructive: oklch(0.704 0.191 22.216);
219
+ --border: oklch(1 0 0 / 10%);
220
+ --input: oklch(1 0 0 / 15%);
221
+ --ring: oklch(0.556 0 0);
222
+ --chart-1: oklch(0.488 0.243 264.376);
223
+ --chart-2: oklch(0.696 0.17 162.48);
224
+ --chart-3: oklch(0.769 0.188 70.08);
225
+ --chart-4: oklch(0.627 0.265 303.9);
226
+ --chart-5: oklch(0.645 0.246 16.439);
227
+ --sidebar: oklch(0.205 0 0);
228
+ --sidebar-foreground: oklch(0.985 0 0);
229
+ --sidebar-primary: oklch(0.488 0.243 264.376);
230
+ --sidebar-primary-foreground: oklch(0.985 0 0);
231
+ --sidebar-accent: oklch(0.269 0 0);
232
+ --sidebar-accent-foreground: oklch(0.985 0 0);
233
+ --sidebar-border: oklch(1 0 0 / 10%);
234
+ --sidebar-ring: oklch(0.556 0 0);
93
235
  }
94
236
 
95
237
  `;
96
- export const SLATE_THEME = `
97
- @layer base {
98
- :root {
99
- --background: 0 0% 100%;
100
- --foreground: 222.2 84% 4.9%;
101
- --card: 0 0% 100%;
102
- --card-foreground: 222.2 84% 4.9%;
103
- --popover: 0 0% 100%;
104
- --popover-foreground: 222.2 84% 4.9%;
105
- --primary: 222.2 47.4% 11.2%;
106
- --primary-foreground: 210 40% 98%;
107
- --secondary: 210 40% 96.1%;
108
- --secondary-foreground: 222.2 47.4% 11.2%;
109
- --muted: 210 40% 96.1%;
110
- --muted-foreground: 215.4 16.3% 46.9%;
111
- --accent: 210 40% 96.1%;
112
- --accent-foreground: 222.2 47.4% 11.2%;
113
- --destructive: 0 84.2% 60.2%;
114
- --destructive-foreground: 210 40% 98%;
115
- --border: 214.3 31.8% 91.4%;
116
- --input: 214.3 31.8% 91.4%;
117
- --ring: 222.2 84% 4.9%;
118
- --radius: 0.5rem;
119
- --sidebar-background: 210 40% 98%;
120
- --sidebar-foreground: 222.2 47.4% 11.2%;
121
- --sidebar-primary: 222.2 47.4% 11.2%;
122
- --sidebar-primary-foreground: 210 40% 98%;
123
- --sidebar-accent: 210 40% 96.1%;
124
- --sidebar-accent-foreground: 222.2 47.4% 11.2%;
125
- --sidebar-border: 214.3 31.8% 91.4%;
126
- --sidebar-ring: 222.2 47.4% 11.2%;
127
- --sidebar-input: 212.7 26.8% 83.9%;
128
- }
129
-
130
- .dark {
131
- --background: 222.2 84% 4.9%;
132
- --foreground: 210 40% 98%;
133
- --card: 222.2 84% 4.9%;
134
- --card-foreground: 210 40% 98%;
135
- --popover: 222.2 84% 4.9%;
136
- --popover-foreground: 210 40% 98%;
137
- --primary: 210 40% 98%;
138
- --primary-foreground: 222.2 47.4% 11.2%;
139
- --secondary: 217.2 32.6% 17.5%;
140
- --secondary-foreground: 210 40% 98%;
141
- --muted: 217.2 32.6% 17.5%;
142
- --muted-foreground: 215 20.2% 65.1%;
143
- --accent: 217.2 32.6% 17.5%;
144
- --accent-foreground: 210 40% 98%;
145
- --destructive: 0 62.8% 30.6%;
146
- --destructive-foreground: 210 40% 98%;
147
- --border: 217.2 32.6% 17.5%;
148
- --input: 217.2 32.6% 17.5%;
149
- --ring: 212.7 26.8% 83.9;
150
- --sidebar-background: 222.2 47.4% 9.2%;
151
- --sidebar-foreground: 210 40% 98%;
152
- --sidebar-primary: 158.1 64.4% 51.6%;
153
- --sidebar-primary-foreground: 222.2 47.4% 11.2%;
154
- --sidebar-accent: 217.2 32.6% 17.5%;
155
- --sidebar-accent-foreground: 210 40% 98%;
156
- --sidebar-border: 217.2 32.6% 17.5%;
157
- --sidebar-ring: 158.1 64.4% 40.6%;
158
- --sidebar-input: 217.2 32.6% 17.5%;
159
- }
238
+ const SLATE_THEME = `
239
+ :root {
240
+ --radius: 0.625rem;
241
+ --background: oklch(1 0 0);
242
+ --foreground: oklch(0.129 0.042 264.695);
243
+ --card: oklch(1 0 0);
244
+ --card-foreground: oklch(0.129 0.042 264.695);
245
+ --popover: oklch(1 0 0);
246
+ --popover-foreground: oklch(0.129 0.042 264.695);
247
+ --primary: oklch(0.208 0.042 265.755);
248
+ --primary-foreground: oklch(0.984 0.003 247.858);
249
+ --secondary: oklch(0.968 0.007 247.896);
250
+ --secondary-foreground: oklch(0.208 0.042 265.755);
251
+ --muted: oklch(0.968 0.007 247.896);
252
+ --muted-foreground: oklch(0.554 0.046 257.417);
253
+ --accent: oklch(0.968 0.007 247.896);
254
+ --accent-foreground: oklch(0.208 0.042 265.755);
255
+ --destructive: oklch(0.577 0.245 27.325);
256
+ --border: oklch(0.929 0.013 255.508);
257
+ --input: oklch(0.929 0.013 255.508);
258
+ --ring: oklch(0.704 0.04 256.788);
259
+ --chart-1: oklch(0.646 0.222 41.116);
260
+ --chart-2: oklch(0.6 0.118 184.704);
261
+ --chart-3: oklch(0.398 0.07 227.392);
262
+ --chart-4: oklch(0.828 0.189 84.429);
263
+ --chart-5: oklch(0.769 0.188 70.08);
264
+ --sidebar: oklch(0.984 0.003 247.858);
265
+ --sidebar-foreground: oklch(0.129 0.042 264.695);
266
+ --sidebar-primary: oklch(0.208 0.042 265.755);
267
+ --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
268
+ --sidebar-accent: oklch(0.968 0.007 247.896);
269
+ --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
270
+ --sidebar-border: oklch(0.929 0.013 255.508);
271
+ --sidebar-ring: oklch(0.704 0.04 256.788);
272
+ }
273
+
274
+ .dark {
275
+ --background: oklch(0.129 0.042 264.695);
276
+ --foreground: oklch(0.984 0.003 247.858);
277
+ --card: oklch(0.208 0.042 265.755);
278
+ --card-foreground: oklch(0.984 0.003 247.858);
279
+ --popover: oklch(0.208 0.042 265.755);
280
+ --popover-foreground: oklch(0.984 0.003 247.858);
281
+ --primary: oklch(0.929 0.013 255.508);
282
+ --primary-foreground: oklch(0.208 0.042 265.755);
283
+ --secondary: oklch(0.279 0.041 260.031);
284
+ --secondary-foreground: oklch(0.984 0.003 247.858);
285
+ --muted: oklch(0.279 0.041 260.031);
286
+ --muted-foreground: oklch(0.704 0.04 256.788);
287
+ --accent: oklch(0.279 0.041 260.031);
288
+ --accent-foreground: oklch(0.984 0.003 247.858);
289
+ --destructive: oklch(0.704 0.191 22.216);
290
+ --border: oklch(1 0 0 / 10%);
291
+ --input: oklch(1 0 0 / 15%);
292
+ --ring: oklch(0.551 0.027 264.364);
293
+ --chart-1: oklch(0.488 0.243 264.376);
294
+ --chart-2: oklch(0.696 0.17 162.48);
295
+ --chart-3: oklch(0.769 0.188 70.08);
296
+ --chart-4: oklch(0.627 0.265 303.9);
297
+ --chart-5: oklch(0.645 0.246 16.439);
298
+ --sidebar: oklch(0.208 0.042 265.755);
299
+ --sidebar-foreground: oklch(0.984 0.003 247.858);
300
+ --sidebar-primary: oklch(0.488 0.243 264.376);
301
+ --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
302
+ --sidebar-accent: oklch(0.279 0.041 260.031);
303
+ --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
304
+ --sidebar-border: oklch(1 0 0 / 10%);
305
+ --sidebar-ring: oklch(0.551 0.027 264.364);
160
306
  }
161
307
 
162
308
  `;
163
309
 
164
- export const STONE_THEME = `
165
- @layer base {
166
- :root {
167
- --background: 0 0% 100%;
168
- --foreground: 20 14.3% 4.1%;
169
- --card: 0 0% 100%;
170
- --card-foreground: 20 14.3% 4.1%;
171
- --popover: 0 0% 100%;
172
- --popover-foreground: 20 14.3% 4.1%;
173
- --primary: 24 9.8% 10%;
174
- --primary-foreground: 60 9.1% 97.8%;
175
- --secondary: 60 4.8% 95.9%;
176
- --secondary-foreground: 24 9.8% 10%;
177
- --muted: 60 4.8% 95.9%;
178
- --muted-foreground: 25 5.3% 44.7%;
179
- --accent: 60 4.8% 95.9%;
180
- --accent-foreground: 24 9.8% 10%;
181
- --destructive: 0 84.2% 60.2%;
182
- --destructive-foreground: 60 9.1% 97.8%;
183
- --border: 20 5.9% 90%;
184
- --input: 20 5.9% 90%;
185
- --ring: 20 14.3% 4.1%;
186
- --radius: 0.5rem;
187
- --sidebar-background: 60 9.1% 97.8%;
188
- --sidebar-foreground: 20 14.3% 4.1%;
189
- --sidebar-primary: 24 9.8% 10%;
190
- --sidebar-primary-foreground: 60 9.1% 97.8%;
191
- --sidebar-accent: 60 4.8% 95.9%;
192
- --sidebar-accent-foreground: 20 14.3% 4.1%;
193
- --sidebar-border: 20 5.9% 90%;
194
- --sidebar-ring: 20 14.3% 4.1%;
195
- --sidebar-input: 20 5.9% 90%;
196
- }
197
-
198
- .dark {
199
- --background: 20 14.3% 4.1%;
200
- --foreground: 60 9.1% 97.8%;
201
- --card: 20 14.3% 4.1%;
202
- --card-foreground: 60 9.1% 97.8%;
203
- --popover: 20 14.3% 4.1%;
204
- --popover-foreground: 60 9.1% 97.8%;
205
- --primary: 60 9.1% 97.8%;
206
- --primary-foreground: 24 9.8% 10%;
207
- --secondary: 12 6.5% 15.1%;
208
- --secondary-foreground: 60 9.1% 97.8%;
209
- --muted: 12 6.5% 15.1%;
210
- --muted-foreground: 24 5.4% 63.9%;
211
- --accent: 12 6.5% 15.1%;
212
- --accent-foreground: 60 9.1% 97.8%;
213
- --destructive: 0 62.8% 30.6%;
214
- --destructive-foreground: 60 9.1% 97.8%;
215
- --border: 12 6.5% 15.1%;
216
- --input: 12 6.5% 15.1%;
217
- --ring: 24 5.7% 82.9%;
218
- --sidebar-background: 24 9.8% 8%;
219
- --sidebar-foreground: 60 9.1% 97.8%;
220
- --sidebar-primary: 20.5 90.2% 48.2%;
221
- --sidebar-primary-foreground: 60 9.1% 97.8%;
222
- --sidebar-accent: 24 9.8% 12%;
223
- --sidebar-accent-foreground: 60 9.1% 97.8%;
224
- --sidebar-border: 12 6.5% 15.1%;
225
- --sidebar-ring: 20.5 90.2% 48.2%;
226
- --sidebar-input: 12 6.5% 15.1%;
227
- }
310
+ const STONE_THEME = `
311
+ :root {
312
+ --radius: 0.625rem;
313
+ --background: oklch(1 0 0);
314
+ --foreground: oklch(0.147 0.004 49.25);
315
+ --card: oklch(1 0 0);
316
+ --card-foreground: oklch(0.147 0.004 49.25);
317
+ --popover: oklch(1 0 0);
318
+ --popover-foreground: oklch(0.147 0.004 49.25);
319
+ --primary: oklch(0.216 0.006 56.043);
320
+ --primary-foreground: oklch(0.985 0.001 106.423);
321
+ --secondary: oklch(0.97 0.001 106.424);
322
+ --secondary-foreground: oklch(0.216 0.006 56.043);
323
+ --muted: oklch(0.97 0.001 106.424);
324
+ --muted-foreground: oklch(0.553 0.013 58.071);
325
+ --accent: oklch(0.97 0.001 106.424);
326
+ --accent-foreground: oklch(0.216 0.006 56.043);
327
+ --destructive: oklch(0.577 0.245 27.325);
328
+ --border: oklch(0.923 0.003 48.717);
329
+ --input: oklch(0.923 0.003 48.717);
330
+ --ring: oklch(0.709 0.01 56.259);
331
+ --chart-1: oklch(0.646 0.222 41.116);
332
+ --chart-2: oklch(0.6 0.118 184.704);
333
+ --chart-3: oklch(0.398 0.07 227.392);
334
+ --chart-4: oklch(0.828 0.189 84.429);
335
+ --chart-5: oklch(0.769 0.188 70.08);
336
+ --sidebar: oklch(0.985 0.001 106.423);
337
+ --sidebar-foreground: oklch(0.147 0.004 49.25);
338
+ --sidebar-primary: oklch(0.216 0.006 56.043);
339
+ --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
340
+ --sidebar-accent: oklch(0.97 0.001 106.424);
341
+ --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
342
+ --sidebar-border: oklch(0.923 0.003 48.717);
343
+ --sidebar-ring: oklch(0.709 0.01 56.259);
344
+ }
345
+ .dark {
346
+ --background: oklch(0.147 0.004 49.25);
347
+ --foreground: oklch(0.985 0.001 106.423);
348
+ --card: oklch(0.216 0.006 56.043);
349
+ --card-foreground: oklch(0.985 0.001 106.423);
350
+ --popover: oklch(0.216 0.006 56.043);
351
+ --popover-foreground: oklch(0.985 0.001 106.423);
352
+ --primary: oklch(0.923 0.003 48.717);
353
+ --primary-foreground: oklch(0.216 0.006 56.043);
354
+ --secondary: oklch(0.268 0.007 34.298);
355
+ --secondary-foreground: oklch(0.985 0.001 106.423);
356
+ --muted: oklch(0.268 0.007 34.298);
357
+ --muted-foreground: oklch(0.709 0.01 56.259);
358
+ --accent: oklch(0.268 0.007 34.298);
359
+ --accent-foreground: oklch(0.985 0.001 106.423);
360
+ --destructive: oklch(0.704 0.191 22.216);
361
+ --border: oklch(1 0 0 / 10%);
362
+ --input: oklch(1 0 0 / 15%);
363
+ --ring: oklch(0.553 0.013 58.071);
364
+ --chart-1: oklch(0.488 0.243 264.376);
365
+ --chart-2: oklch(0.696 0.17 162.48);
366
+ --chart-3: oklch(0.769 0.188 70.08);
367
+ --chart-4: oklch(0.627 0.265 303.9);
368
+ --chart-5: oklch(0.645 0.246 16.439);
369
+ --sidebar: oklch(0.216 0.006 56.043);
370
+ --sidebar-foreground: oklch(0.985 0.001 106.423);
371
+ --sidebar-primary: oklch(0.488 0.243 264.376);
372
+ --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
373
+ --sidebar-accent: oklch(0.268 0.007 34.298);
374
+ --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
375
+ --sidebar-border: oklch(1 0 0 / 10%);
376
+ --sidebar-ring: oklch(0.553 0.013 58.071);
228
377
  }
229
378
 
230
379
  `;
231
380
 
232
- export const GRAY_THEME = `
233
- @layer base {
234
- :root {
235
- --background: 0 0% 100%;
236
- --foreground: 224 71.4% 4.1%;
237
- --card: 0 0% 100%;
238
- --card-foreground: 224 71.4% 4.1%;
239
- --popover: 0 0% 100%;
240
- --popover-foreground: 224 71.4% 4.1%;
241
- --primary: 220.9 39.3% 11%;
242
- --primary-foreground: 210 20% 98%;
243
- --secondary: 220 14.3% 95.9%;
244
- --secondary-foreground: 220.9 39.3% 11%;
245
- --muted: 220 14.3% 95.9%;
246
- --muted-foreground: 220 8.9% 46.1%;
247
- --accent: 220 14.3% 95.9%;
248
- --accent-foreground: 220.9 39.3% 11%;
249
- --destructive: 0 84.2% 60.2%;
250
- --destructive-foreground: 210 20% 98%;
251
- --border: 220 13% 91%;
252
- --input: 220 13% 91%;
253
- --ring: 224 71.4% 4.1%;
254
- --radius: 0.5rem;
255
- --sidebar-background: 210 20% 98%;
256
- --sidebar-foreground: 224 71.4% 4.1%;
257
- --sidebar-primary: 220.9 39.3% 11%;
258
- --sidebar-primary-foreground: 210 20% 98%;
259
- --sidebar-accent: 220 14.3% 95.9%;
260
- --sidebar-accent-foreground: 224 71.4% 4.1;
261
- --sidebar-border: 220 13% 91%;
262
- --sidebar-ring: 220.9 39.3% 11%;
263
- --sidebar-input: 220 13% 91%;
264
- }
265
-
266
- .dark {
267
- --background: 224 71.4% 4.1%;
268
- --foreground: 210 20% 98%;
269
- --card: 224 71.4% 4.1%;
270
- --card-foreground: 210 20% 98%;
271
- --popover: 224 71.4% 4.1%;
272
- --popover-foreground: 210 20% 98%;
273
- --primary: 210 20% 98%;
274
- --primary-foreground: 220.9 39.3% 11%;
275
- --secondary: 215 27.9% 16.9%;
276
- --secondary-foreground: 210 20% 98%;
277
- --muted: 215 27.9% 16.9%;
278
- --muted-foreground: 217.9 10.6% 64.9%;
279
- --accent: 215 27.9% 16.9%;
280
- --accent-foreground: 210 20% 98%;
281
- --destructive: 0 62.8% 30.6%;
282
- --destructive-foreground: 210 20% 98%;
283
- --border: 215 27.9% 16.9%;
284
- --input: 215 27.9% 16.9%;
285
- --ring: 216 12.2% 83.9%;
286
- --sidebar-background: 220.9 39.3% 9%;
287
- --sidebar-foreground: 210 20% 98%;
288
- --sidebar-primary: 243.4 75.4% 58.6%;
289
- --sidebar-primary-foreground: 210 20% 98%;
290
- --sidebar-accent: 217.2 32.6% 17.5%;
291
- --sidebar-accent-foreground: 210 20% 98%;
292
- --sidebar-border: 215 27.9% 16.9%;
293
- --sidebar-ring: 243.4 75.4% 58.6%;
294
- --sidebar-input: 215 27.9% 16.9%;
295
- }
381
+ const GRAY_THEME = `
382
+ :root {
383
+ --radius: 0.625rem;
384
+ --background: oklch(1 0 0);
385
+ --foreground: oklch(0.13 0.028 261.692);
386
+ --card: oklch(1 0 0);
387
+ --card-foreground: oklch(0.13 0.028 261.692);
388
+ --popover: oklch(1 0 0);
389
+ --popover-foreground: oklch(0.13 0.028 261.692);
390
+ --primary: oklch(0.21 0.034 264.665);
391
+ --primary-foreground: oklch(0.985 0.002 247.839);
392
+ --secondary: oklch(0.967 0.003 264.542);
393
+ --secondary-foreground: oklch(0.21 0.034 264.665);
394
+ --muted: oklch(0.967 0.003 264.542);
395
+ --muted-foreground: oklch(0.551 0.027 264.364);
396
+ --accent: oklch(0.967 0.003 264.542);
397
+ --accent-foreground: oklch(0.21 0.034 264.665);
398
+ --destructive: oklch(0.577 0.245 27.325);
399
+ --border: oklch(0.928 0.006 264.531);
400
+ --input: oklch(0.928 0.006 264.531);
401
+ --ring: oklch(0.707 0.022 261.325);
402
+ --chart-1: oklch(0.646 0.222 41.116);
403
+ --chart-2: oklch(0.6 0.118 184.704);
404
+ --chart-3: oklch(0.398 0.07 227.392);
405
+ --chart-4: oklch(0.828 0.189 84.429);
406
+ --chart-5: oklch(0.769 0.188 70.08);
407
+ --sidebar: oklch(0.985 0.002 247.839);
408
+ --sidebar-foreground: oklch(0.13 0.028 261.692);
409
+ --sidebar-primary: oklch(0.21 0.034 264.665);
410
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
411
+ --sidebar-accent: oklch(0.967 0.003 264.542);
412
+ --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
413
+ --sidebar-border: oklch(0.928 0.006 264.531);
414
+ --sidebar-ring: oklch(0.707 0.022 261.325);
415
+ }
416
+
417
+ .dark {
418
+ --background: oklch(0.13 0.028 261.692);
419
+ --foreground: oklch(0.985 0.002 247.839);
420
+ --card: oklch(0.21 0.034 264.665);
421
+ --card-foreground: oklch(0.985 0.002 247.839);
422
+ --popover: oklch(0.21 0.034 264.665);
423
+ --popover-foreground: oklch(0.985 0.002 247.839);
424
+ --primary: oklch(0.928 0.006 264.531);
425
+ --primary-foreground: oklch(0.21 0.034 264.665);
426
+ --secondary: oklch(0.278 0.033 256.848);
427
+ --secondary-foreground: oklch(0.985 0.002 247.839);
428
+ --muted: oklch(0.278 0.033 256.848);
429
+ --muted-foreground: oklch(0.707 0.022 261.325);
430
+ --accent: oklch(0.278 0.033 256.848);
431
+ --accent-foreground: oklch(0.985 0.002 247.839);
432
+ --destructive: oklch(0.704 0.191 22.216);
433
+ --border: oklch(1 0 0 / 10%);
434
+ --input: oklch(1 0 0 / 15%);
435
+ --ring: oklch(0.551 0.027 264.364);
436
+ --chart-1: oklch(0.488 0.243 264.376);
437
+ --chart-2: oklch(0.696 0.17 162.48);
438
+ --chart-3: oklch(0.769 0.188 70.08);
439
+ --chart-4: oklch(0.627 0.265 303.9);
440
+ --chart-5: oklch(0.645 0.246 16.439);
441
+ --sidebar: oklch(0.21 0.034 264.665);
442
+ --sidebar-foreground: oklch(0.985 0.002 247.839);
443
+ --sidebar-primary: oklch(0.488 0.243 264.376);
444
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
445
+ --sidebar-accent: oklch(0.278 0.033 256.848);
446
+ --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
447
+ --sidebar-border: oklch(1 0 0 / 10%);
448
+ --sidebar-ring: oklch(0.551 0.027 264.364);
296
449
  }
297
450
 
298
451
  `;
299
452
 
300
- export const NEUTRAL_THEME = `
301
- @layer base {
302
- :root {
303
- --background: 0 0% 100%;
304
- --foreground: 0 0% 3.9%;
305
- --card: 0 0% 100%;
306
- --card-foreground: 0 0% 3.9%;
307
- --popover: 0 0% 100%;
308
- --popover-foreground: 0 0% 3.9%;
309
- --primary: 0 0% 9%;
310
- --primary-foreground: 0 0% 98%;
311
- --secondary: 0 0% 96.1%;
312
- --secondary-foreground: 0 0% 9%;
313
- --muted: 0 0% 96.1%;
314
- --muted-foreground: 0 0% 45.1%;
315
- --accent: 0 0% 96.1%;
316
- --accent-foreground: 0 0% 9%;
317
- --destructive: 0 84.2% 60.2%;
318
- --destructive-foreground: 0 0% 98%;
319
- --border: 0 0% 89.8%;
320
- --input: 0 0% 89.8%;
321
- --ring: 0 0% 3.9%;
322
- --radius: 0.5rem;
323
- --sidebar-background: 0 0% 98%;
324
- --sidebar-foreground: 0 0% 3.9%;
325
- --sidebar-primary: 0 0% 9%;
326
- --sidebar-primary-foreground: 0 0% 98%;
327
- --sidebar-accent: 0 0% 96.1%;
328
- --sidebar-accent-foreground: 0 0% 9%;
329
- --sidebar-border: 0 0% 89.8%;
330
- --sidebar-ring: 0 0% 9%;
331
- --sidebar-input: 0 0% 89.8%;
332
- }
333
-
334
- .dark {
335
- --background: 0 0% 3.9%;
336
- --foreground: 0 0% 98%;
337
- --card: 0 0% 3.9%;
338
- --card-foreground: 0 0% 98%;
339
- --popover: 0 0% 3.9%;
340
- --popover-foreground: 0 0% 98%;
341
- --primary: 0 0% 98%;
342
- --primary-foreground: 0 0% 9%;
343
- --secondary: 0 0% 14.9%;
344
- --secondary-foreground: 0 0% 98%;
345
- --muted: 0 0% 14.9%;
346
- --muted-foreground: 0 0% 63.9%;
347
- --accent: 0 0% 14.9%;
348
- --accent-foreground: 0 0% 98%;
349
- --destructive: 0 62.8% 30.6%;
350
- --destructive-foreground: 0 0% 98%;
351
- --border: 0 0% 14.9%;
352
- --input: 0 0% 14.9%;
353
- --ring: 0 0% 83.1%;
354
- --sidebar-background: 0 0% 9%;
355
- --sidebar-foreground: 0 0% 98%;
356
- --sidebar-primary: 346.8 77.2% 49.8%;
357
- --sidebar-primary-foreground: 0 0% 98%;
358
- --sidebar-accent: 0 0% 14.9%;
359
- --sidebar-accent-foreground: 0 0% 98%;
360
- --sidebar-border: 0 0% 14.9%;
361
- --sidebar-ring: 346.8 77.2% 49.8%;
362
- --sidebar-input: 0 0% 14.9%;
363
- }
453
+ const NEUTRAL_THEME = `
454
+ :root {
455
+ --radius: 0.625rem;
456
+ --background: oklch(1 0 0);
457
+ --foreground: oklch(0.145 0 0);
458
+ --card: oklch(1 0 0);
459
+ --card-foreground: oklch(0.145 0 0);
460
+ --popover: oklch(1 0 0);
461
+ --popover-foreground: oklch(0.145 0 0);
462
+ --primary: oklch(0.205 0 0);
463
+ --primary-foreground: oklch(0.985 0 0);
464
+ --secondary: oklch(0.97 0 0);
465
+ --secondary-foreground: oklch(0.205 0 0);
466
+ --muted: oklch(0.97 0 0);
467
+ --muted-foreground: oklch(0.556 0 0);
468
+ --accent: oklch(0.97 0 0);
469
+ --accent-foreground: oklch(0.205 0 0);
470
+ --destructive: oklch(0.577 0.245 27.325);
471
+ --border: oklch(0.922 0 0);
472
+ --input: oklch(0.922 0 0);
473
+ --ring: oklch(0.708 0 0);
474
+ --chart-1: oklch(0.646 0.222 41.116);
475
+ --chart-2: oklch(0.6 0.118 184.704);
476
+ --chart-3: oklch(0.398 0.07 227.392);
477
+ --chart-4: oklch(0.828 0.189 84.429);
478
+ --chart-5: oklch(0.769 0.188 70.08);
479
+ --sidebar: oklch(0.985 0 0);
480
+ --sidebar-foreground: oklch(0.145 0 0);
481
+ --sidebar-primary: oklch(0.205 0 0);
482
+ --sidebar-primary-foreground: oklch(0.985 0 0);
483
+ --sidebar-accent: oklch(0.97 0 0);
484
+ --sidebar-accent-foreground: oklch(0.205 0 0);
485
+ --sidebar-border: oklch(0.922 0 0);
486
+ --sidebar-ring: oklch(0.708 0 0);
487
+ }
488
+
489
+ .dark {
490
+ --background: oklch(0.145 0 0);
491
+ --foreground: oklch(0.985 0 0);
492
+ --card: oklch(0.205 0 0);
493
+ --card-foreground: oklch(0.985 0 0);
494
+ --popover: oklch(0.205 0 0);
495
+ --popover-foreground: oklch(0.985 0 0);
496
+ --primary: oklch(0.922 0 0);
497
+ --primary-foreground: oklch(0.205 0 0);
498
+ --secondary: oklch(0.269 0 0);
499
+ --secondary-foreground: oklch(0.985 0 0);
500
+ --muted: oklch(0.269 0 0);
501
+ --muted-foreground: oklch(0.708 0 0);
502
+ --accent: oklch(0.269 0 0);
503
+ --accent-foreground: oklch(0.985 0 0);
504
+ --destructive: oklch(0.704 0.191 22.216);
505
+ --border: oklch(1 0 0 / 10%);
506
+ --input: oklch(1 0 0 / 15%);
507
+ --ring: oklch(0.556 0 0);
508
+ --chart-1: oklch(0.488 0.243 264.376);
509
+ --chart-2: oklch(0.696 0.17 162.48);
510
+ --chart-3: oklch(0.769 0.188 70.08);
511
+ --chart-4: oklch(0.627 0.265 303.9);
512
+ --chart-5: oklch(0.645 0.246 16.439);
513
+ --sidebar: oklch(0.205 0 0);
514
+ --sidebar-foreground: oklch(0.985 0 0);
515
+ --sidebar-primary: oklch(0.488 0.243 264.376);
516
+ --sidebar-primary-foreground: oklch(0.985 0 0);
517
+ --sidebar-accent: oklch(0.269 0 0);
518
+ --sidebar-accent-foreground: oklch(0.985 0 0);
519
+ --sidebar-border: oklch(1 0 0 / 10%);
520
+ --sidebar-ring: oklch(0.556 0 0);
364
521
  }
365
522
 
366
523
  `;
367
524
 
368
- export const RED_THEME = `
369
- @layer base {
370
- :root {
371
- --background: 0 0% 100%;
372
- --foreground: 0 0% 3.9%;
373
- --card: 0 0% 100%;
374
- --card-foreground: 0 0% 3.9%;
375
- --popover: 0 0% 100%;
376
- --popover-foreground: 0 0% 3.9%;
377
- --primary: 0 72.2% 50.6%;
378
- --primary-foreground: 0 85.7% 97.3%;
379
- --secondary: 0 0% 96.1%;
380
- --secondary-foreground: 0 0% 9%;
381
- --muted: 0 0% 96.1%;
382
- --muted-foreground: 0 0% 45.1%;
383
- --accent: 0 0% 96.1%;
384
- --accent-foreground: 0 0% 9%;
385
- --destructive: 0 84.2% 60.2%;
386
- --destructive-foreground: 0 0% 98%;
387
- --border: 0 0% 89.8%;
388
- --input: 0 0% 89.8%;
389
- --ring: 0 72.2% 50.6%;
390
- --radius: 0.5rem;
391
- --sidebar-background: 0 0% 98%;
392
- --sidebar-foreground: 0 0% 3.9%;
393
- --sidebar-primary: 0 72.2% 50.6%;
394
- --sidebar-primary-foreground: 0 85.7% 97.3%;
395
- --sidebar-accent: 0 0% 96.1%;
396
- --sidebar-accent-foreground: 0 0% 9%;
397
- --sidebar-border: 0 0% 89.8%;
398
- --sidebar-ring: 0 72.2% 50.6%;
399
- --sidebar-input: 0 0% 89.8%;
400
- }
401
-
402
- .dark {
403
- --background: 0 0% 3.9%;
404
- --foreground: 0 0% 98%;
405
- --card: 0 0% 3.9%;
406
- --card-foreground: 0 0% 98%;
407
- --popover: 0 0% 3.9%;
408
- --popover-foreground: 0 0% 98%;
409
- --primary: 0 72.2% 50.6%;
410
- --primary-foreground: 0 85.7% 97.3%;
411
- --secondary: 0 0% 14.9%;
412
- --secondary-foreground: 0 0% 98%;
413
- --muted: 0 0% 14.9%;
414
- --muted-foreground: 0 0% 63.9%;
415
- --accent: 0 0% 14.9%;
416
- --accent-foreground: 0 0% 98%;
417
- --destructive: 0 62.8% 30.6%;
418
- --destructive-foreground: 0 0% 98%;
419
- --border: 0 0% 14.9%;
420
- --input: 0 0% 14.9%;
421
- --ring: 0 72.2% 50.6%;
422
- --sidebar-background: 0 0% 9%;
423
- --sidebar-foreground: 0 0% 98%;
424
- --sidebar-primary: 0 72.2% 50.6%;
425
- --sidebar-primary-foreground: 0 85.7% 97.3%;
426
- --sidebar-accent: 0 0% 14.9%;
427
- --sidebar-accent-foreground: 0 0% 98%;
428
- --sidebar-border: 0 0% 14.9%;
429
- --sidebar-ring: 0 72.2% 50.6%;
430
- --sidebar-input: 0 0% 14.9%;
431
- }
525
+ const RED_THEME = `
526
+ :root {
527
+ --radius: 0.65rem;
528
+ --background: oklch(1 0 0);
529
+ --foreground: oklch(0.141 0.005 285.823);
530
+ --card: oklch(1 0 0);
531
+ --card-foreground: oklch(0.141 0.005 285.823);
532
+ --popover: oklch(1 0 0);
533
+ --popover-foreground: oklch(0.141 0.005 285.823);
534
+ --primary: oklch(0.637 0.237 25.331);
535
+ --primary-foreground: oklch(0.971 0.013 17.38);
536
+ --secondary: oklch(0.967 0.001 286.375);
537
+ --secondary-foreground: oklch(0.21 0.006 285.885);
538
+ --muted: oklch(0.967 0.001 286.375);
539
+ --muted-foreground: oklch(0.552 0.016 285.938);
540
+ --accent: oklch(0.967 0.001 286.375);
541
+ --accent-foreground: oklch(0.21 0.006 285.885);
542
+ --destructive: oklch(0.577 0.245 27.325);
543
+ --border: oklch(0.92 0.004 286.32);
544
+ --input: oklch(0.92 0.004 286.32);
545
+ --ring: oklch(0.637 0.237 25.331);
546
+ --chart-1: oklch(0.646 0.222 41.116);
547
+ --chart-2: oklch(0.6 0.118 184.704);
548
+ --chart-3: oklch(0.398 0.07 227.392);
549
+ --chart-4: oklch(0.828 0.189 84.429);
550
+ --chart-5: oklch(0.769 0.188 70.08);
551
+ --sidebar: oklch(0.985 0 0);
552
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
553
+ --sidebar-primary: oklch(0.637 0.237 25.331);
554
+ --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
555
+ --sidebar-accent: oklch(0.967 0.001 286.375);
556
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
557
+ --sidebar-border: oklch(0.92 0.004 286.32);
558
+ --sidebar-ring: oklch(0.637 0.237 25.331);
559
+ }
560
+
561
+ .dark {
562
+ --background: oklch(0.141 0.005 285.823);
563
+ --foreground: oklch(0.985 0 0);
564
+ --card: oklch(0.21 0.006 285.885);
565
+ --card-foreground: oklch(0.985 0 0);
566
+ --popover: oklch(0.21 0.006 285.885);
567
+ --popover-foreground: oklch(0.985 0 0);
568
+ --primary: oklch(0.637 0.237 25.331);
569
+ --primary-foreground: oklch(0.971 0.013 17.38);
570
+ --secondary: oklch(0.274 0.006 286.033);
571
+ --secondary-foreground: oklch(0.985 0 0);
572
+ --muted: oklch(0.274 0.006 286.033);
573
+ --muted-foreground: oklch(0.705 0.015 286.067);
574
+ --accent: oklch(0.274 0.006 286.033);
575
+ --accent-foreground: oklch(0.985 0 0);
576
+ --destructive: oklch(0.704 0.191 22.216);
577
+ --border: oklch(1 0 0 / 10%);
578
+ --input: oklch(1 0 0 / 15%);
579
+ --ring: oklch(0.637 0.237 25.331);
580
+ --chart-1: oklch(0.488 0.243 264.376);
581
+ --chart-2: oklch(0.696 0.17 162.48);
582
+ --chart-3: oklch(0.769 0.188 70.08);
583
+ --chart-4: oklch(0.627 0.265 303.9);
584
+ --chart-5: oklch(0.645 0.246 16.439);
585
+ --sidebar: oklch(0.21 0.006 285.885);
586
+ --sidebar-foreground: oklch(0.985 0 0);
587
+ --sidebar-primary: oklch(0.637 0.237 25.331);
588
+ --sidebar-primary-foreground: oklch(0.971 0.013 17.38);
589
+ --sidebar-accent: oklch(0.274 0.006 286.033);
590
+ --sidebar-accent-foreground: oklch(0.985 0 0);
591
+ --sidebar-border: oklch(1 0 0 / 10%);
592
+ --sidebar-ring: oklch(0.637 0.237 25.331);
432
593
  }
433
594
 
434
595
  `;
435
596
 
436
- export const ROSE_THEME = `
437
- @layer base {
438
- :root {
439
- --background: 0 0% 100%;
440
- --foreground: 240 10% 3.9%;
441
- --card: 0 0% 100%;
442
- --card-foreground: 240 10% 3.9%;
443
- --popover: 0 0% 100%;
444
- --popover-foreground: 240 10% 3.9%;
445
- --primary: 346.8 77.2% 49.8%;
446
- --primary-foreground: 355.7 100% 97.3%;
447
- --secondary: 240 4.8% 95.9%;
448
- --secondary-foreground: 240 5.9% 10%;
449
- --muted: 240 4.8% 95.9%;
450
- --muted-foreground: 240 3.8% 46.1%;
451
- --accent: 240 4.8% 95.9%;
452
- --accent-foreground: 240 5.9% 10%;
453
- --destructive: 0 84.2% 60.2%;
454
- --destructive-foreground: 0 0% 98%;
455
- --border: 240 5.9% 90%;
456
- --input: 240 5.9% 90%;
457
- --ring: 346.8 77.2% 49.8%;
458
- --radius: 0.5rem;
459
- --sidebar-background: 60 9.1% 97.8%;
460
- --sidebar-foreground: 20 14.3% 4.1%;
461
- --sidebar-primary: 346.8 77.2% 49.8%;
462
- --sidebar-primary-foreground: 355.7 100% 97.3%;
463
- --sidebar-accent: 60 4.8% 95.9%;
464
- --sidebar-accent-foreground: 20 14.3% 4.1%;
465
- --sidebar-border: 20 5.9% 90%;
466
- --sidebar-ring: 346.8 77.2% 49.8%;
467
- --sidebar-input: 20 5.9% 90%;
468
- }
469
-
470
- .dark {
471
- --background: 20 14.3% 4.1%;
472
- --foreground: 0 0% 95%;
473
- --card: 24 9.8% 10%;
474
- --card-foreground: 0 0% 95%;
475
- --popover: 0 0% 9%;
476
- --popover-foreground: 0 0% 95%;
477
- --primary: 346.8 77.2% 49.8%;
478
- --primary-foreground: 355.7 100% 97.3%;
479
- --secondary: 240 3.7% 15.9%;
480
- --secondary-foreground: 0 0% 98%;
481
- --muted: 0 0% 15%;
482
- --muted-foreground: 240 5% 64.9%;
483
- --accent: 12 6.5% 15.1%;
484
- --accent-foreground: 0 0% 98%;
485
- --destructive: 0 62.8% 30.6%;
486
- --destructive-foreground: 0 85.7% 97.3%;
487
- --border: 240 3.7% 15.9%;
488
- --input: 240 3.7% 15.9%;
489
- --ring: 346.8 77.2% 49.8%;
490
- --sidebar-background: 24 9.8% 8%;
491
- --sidebar-foreground: 60 9.1% 97.8%;
492
- --sidebar-primary: 346.8 77.2% 49.8%;
493
- --sidebar-primary-foreground: 355.7 100% 97.3%;
494
- --sidebar-accent: 24 9.8% 12%;
495
- --sidebar-accent-foreground: 355.7 100% 97.3%;
496
- --sidebar-border: 12 6.5% 15.1%;
497
- --sidebar-ring: 346.8 77.2% 49.8%;
498
- --sidebar-input: 12 6.5% 15.1%;
499
- }
597
+ const ROSE_THEME = `
598
+ :root {
599
+ --radius: 0.65rem;
600
+ --background: oklch(1 0 0);
601
+ --foreground: oklch(0.141 0.005 285.823);
602
+ --card: oklch(1 0 0);
603
+ --card-foreground: oklch(0.141 0.005 285.823);
604
+ --popover: oklch(1 0 0);
605
+ --popover-foreground: oklch(0.141 0.005 285.823);
606
+ --primary: oklch(0.645 0.246 16.439);
607
+ --primary-foreground: oklch(0.969 0.015 12.422);
608
+ --secondary: oklch(0.967 0.001 286.375);
609
+ --secondary-foreground: oklch(0.21 0.006 285.885);
610
+ --muted: oklch(0.967 0.001 286.375);
611
+ --muted-foreground: oklch(0.552 0.016 285.938);
612
+ --accent: oklch(0.967 0.001 286.375);
613
+ --accent-foreground: oklch(0.21 0.006 285.885);
614
+ --destructive: oklch(0.577 0.245 27.325);
615
+ --border: oklch(0.92 0.004 286.32);
616
+ --input: oklch(0.92 0.004 286.32);
617
+ --ring: oklch(0.645 0.246 16.439);
618
+ --chart-1: oklch(0.646 0.222 41.116);
619
+ --chart-2: oklch(0.6 0.118 184.704);
620
+ --chart-3: oklch(0.398 0.07 227.392);
621
+ --chart-4: oklch(0.828 0.189 84.429);
622
+ --chart-5: oklch(0.769 0.188 70.08);
623
+ --sidebar: oklch(0.985 0 0);
624
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
625
+ --sidebar-primary: oklch(0.645 0.246 16.439);
626
+ --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
627
+ --sidebar-accent: oklch(0.967 0.001 286.375);
628
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
629
+ --sidebar-border: oklch(0.92 0.004 286.32);
630
+ --sidebar-ring: oklch(0.645 0.246 16.439);
631
+ }
632
+
633
+ .dark {
634
+ --background: oklch(0.141 0.005 285.823);
635
+ --foreground: oklch(0.985 0 0);
636
+ --card: oklch(0.21 0.006 285.885);
637
+ --card-foreground: oklch(0.985 0 0);
638
+ --popover: oklch(0.21 0.006 285.885);
639
+ --popover-foreground: oklch(0.985 0 0);
640
+ --primary: oklch(0.645 0.246 16.439);
641
+ --primary-foreground: oklch(0.969 0.015 12.422);
642
+ --secondary: oklch(0.274 0.006 286.033);
643
+ --secondary-foreground: oklch(0.985 0 0);
644
+ --muted: oklch(0.274 0.006 286.033);
645
+ --muted-foreground: oklch(0.705 0.015 286.067);
646
+ --accent: oklch(0.274 0.006 286.033);
647
+ --accent-foreground: oklch(0.985 0 0);
648
+ --destructive: oklch(0.704 0.191 22.216);
649
+ --border: oklch(1 0 0 / 10%);
650
+ --input: oklch(1 0 0 / 15%);
651
+ --ring: oklch(0.645 0.246 16.439);
652
+ --chart-1: oklch(0.488 0.243 264.376);
653
+ --chart-2: oklch(0.696 0.17 162.48);
654
+ --chart-3: oklch(0.769 0.188 70.08);
655
+ --chart-4: oklch(0.627 0.265 303.9);
656
+ --chart-5: oklch(0.645 0.246 16.439);
657
+ --sidebar: oklch(0.21 0.006 285.885);
658
+ --sidebar-foreground: oklch(0.985 0 0);
659
+ --sidebar-primary: oklch(0.645 0.246 16.439);
660
+ --sidebar-primary-foreground: oklch(0.969 0.015 12.422);
661
+ --sidebar-accent: oklch(0.274 0.006 286.033);
662
+ --sidebar-accent-foreground: oklch(0.985 0 0);
663
+ --sidebar-border: oklch(1 0 0 / 10%);
664
+ --sidebar-ring: oklch(0.645 0.246 16.439);
500
665
  }
501
666
 
502
667
  `;
503
668
 
504
- export const ORANGE_THEME = `
505
- @layer base {
506
- :root {
507
- --background: 0 0% 100%;
508
- --foreground: 20 14.3% 4.1%;
509
- --card: 0 0% 100%;
510
- --card-foreground: 20 14.3% 4.1%;
511
- --popover: 0 0% 100%;
512
- --popover-foreground: 20 14.3% 4.1%;
513
- --primary: 24.6 95% 53.1%;
514
- --primary-foreground: 60 9.1% 97.8%;
515
- --secondary: 60 4.8% 95.9%;
516
- --secondary-foreground: 24 9.8% 10%;
517
- --muted: 60 4.8% 95.9%;
518
- --muted-foreground: 25 5.3% 44.7%;
519
- --accent: 60 4.8% 95.9%;
520
- --accent-foreground: 24 9.8% 10%;
521
- --destructive: 0 84.2% 60.2%;
522
- --destructive-foreground: 60 9.1% 97.8%;
523
- --border: 20 5.9% 90%;
524
- --input: 20 5.9% 90%;
525
- --ring: 24.6 95% 53.1%;
526
- --radius: 0.5rem;
527
- --sidebar-background: 60 9.1% 97.8%;
528
- --sidebar-foreground: 20 14.3% 4.1%;
529
- --sidebar-primary: 24.6 95% 53.1%;
530
- --sidebar-primary-foreground: 60 9.1% 97.8%;
531
- --sidebar-accent: 60 4.8% 95.9%;
532
- --sidebar-accent-foreground: 20 14.3% 4.1%;
533
- --sidebar-border: 20 5.9% 90%;
534
- --sidebar-ring: 24.6 95% 53.1%;
535
- --sidebar-input: 20 5.9% 90%;
536
- }
537
-
538
- .dark {
539
- --background: 20 14.3% 4.1%;
540
- --foreground: 60 9.1% 97.8%;
541
- --card: 20 14.3% 4.1%;
542
- --card-foreground: 60 9.1% 97.8%;
543
- --popover: 20 14.3% 4.1%;
544
- --popover-foreground: 60 9.1% 97.8%;
545
- --primary: 20.5 90.2% 48.2%;
546
- --primary-foreground: 60 9.1% 97.8%;
547
- --secondary: 12 6.5% 15.1%;
548
- --secondary-foreground: 60 9.1% 97.8%;
549
- --muted: 12 6.5% 15.1%;
550
- --muted-foreground: 24 5.4% 63.9%;
551
- --accent: 12 6.5% 15.1%;
552
- --accent-foreground: 60 9.1% 97.8%;
553
- --destructive: 0 72.2% 50.6%;
554
- --destructive-foreground: 60 9.1% 97.8%;
555
- --border: 12 6.5% 15.1%;
556
- --input: 12 6.5% 15.1%;
557
- --ring: 20.5 90.2% 48.2%;
558
- --sidebar-background: 24 9.8% 8%;
559
- --sidebar-foreground: 60 9.1% 97.8%;
560
- --sidebar-primary: 20.5 90.2% 48.2%;
561
- --sidebar-primary-foreground: 60 9.1% 97.8%;
562
- --sidebar-accent: 24 9.8% 12%;
563
- --sidebar-accent-foreground: 60 9.1% 97.8%;
564
- --sidebar-border: 12 6.5% 15.1%;
565
- --sidebar-ring: 20.5 90.2% 48.2%;
566
- --sidebar-input: 12 6.5% 15.1%;
567
- }
669
+ const ORANGE_THEME = `
670
+ :root {
671
+ --radius: 0.65rem;
672
+ --background: oklch(1 0 0);
673
+ --foreground: oklch(0.141 0.005 285.823);
674
+ --card: oklch(1 0 0);
675
+ --card-foreground: oklch(0.141 0.005 285.823);
676
+ --popover: oklch(1 0 0);
677
+ --popover-foreground: oklch(0.141 0.005 285.823);
678
+ --primary: oklch(0.705 0.213 47.604);
679
+ --primary-foreground: oklch(0.98 0.016 73.684);
680
+ --secondary: oklch(0.967 0.001 286.375);
681
+ --secondary-foreground: oklch(0.21 0.006 285.885);
682
+ --muted: oklch(0.967 0.001 286.375);
683
+ --muted-foreground: oklch(0.552 0.016 285.938);
684
+ --accent: oklch(0.967 0.001 286.375);
685
+ --accent-foreground: oklch(0.21 0.006 285.885);
686
+ --destructive: oklch(0.577 0.245 27.325);
687
+ --border: oklch(0.92 0.004 286.32);
688
+ --input: oklch(0.92 0.004 286.32);
689
+ --ring: oklch(0.705 0.213 47.604);
690
+ --chart-1: oklch(0.646 0.222 41.116);
691
+ --chart-2: oklch(0.6 0.118 184.704);
692
+ --chart-3: oklch(0.398 0.07 227.392);
693
+ --chart-4: oklch(0.828 0.189 84.429);
694
+ --chart-5: oklch(0.769 0.188 70.08);
695
+ --sidebar: oklch(0.985 0 0);
696
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
697
+ --sidebar-primary: oklch(0.705 0.213 47.604);
698
+ --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
699
+ --sidebar-accent: oklch(0.967 0.001 286.375);
700
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
701
+ --sidebar-border: oklch(0.92 0.004 286.32);
702
+ --sidebar-ring: oklch(0.705 0.213 47.604);
703
+ }
704
+
705
+ .dark {
706
+ --background: oklch(0.141 0.005 285.823);
707
+ --foreground: oklch(0.985 0 0);
708
+ --card: oklch(0.21 0.006 285.885);
709
+ --card-foreground: oklch(0.985 0 0);
710
+ --popover: oklch(0.21 0.006 285.885);
711
+ --popover-foreground: oklch(0.985 0 0);
712
+ --primary: oklch(0.646 0.222 41.116);
713
+ --primary-foreground: oklch(0.98 0.016 73.684);
714
+ --secondary: oklch(0.274 0.006 286.033);
715
+ --secondary-foreground: oklch(0.985 0 0);
716
+ --muted: oklch(0.274 0.006 286.033);
717
+ --muted-foreground: oklch(0.705 0.015 286.067);
718
+ --accent: oklch(0.274 0.006 286.033);
719
+ --accent-foreground: oklch(0.985 0 0);
720
+ --destructive: oklch(0.704 0.191 22.216);
721
+ --border: oklch(1 0 0 / 10%);
722
+ --input: oklch(1 0 0 / 15%);
723
+ --ring: oklch(0.646 0.222 41.116);
724
+ --chart-1: oklch(0.488 0.243 264.376);
725
+ --chart-2: oklch(0.696 0.17 162.48);
726
+ --chart-3: oklch(0.769 0.188 70.08);
727
+ --chart-4: oklch(0.627 0.265 303.9);
728
+ --chart-5: oklch(0.645 0.246 16.439);
729
+ --sidebar: oklch(0.21 0.006 285.885);
730
+ --sidebar-foreground: oklch(0.985 0 0);
731
+ --sidebar-primary: oklch(0.646 0.222 41.116);
732
+ --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
733
+ --sidebar-accent: oklch(0.274 0.006 286.033);
734
+ --sidebar-accent-foreground: oklch(0.985 0 0);
735
+ --sidebar-border: oklch(1 0 0 / 10%);
736
+ --sidebar-ring: oklch(0.646 0.222 41.116);
568
737
  }
569
738
 
570
739
  `;
571
740
 
572
- export const GREEN_THEME = `
573
- @layer base {
574
- :root {
575
- --background: 0 0% 100%;
576
- --foreground: 240 10% 3.9%;
577
- --card: 0 0% 100%;
578
- --card-foreground: 240 10% 3.9%;
579
- --popover: 0 0% 100%;
580
- --popover-foreground: 240 10% 3.9%;
581
- --primary: 142.1 76.2% 36.3%;
582
- --primary-foreground: 355.7 100% 97.3%;
583
- --secondary: 240 4.8% 95.9%;
584
- --secondary-foreground: 240 5.9% 10%;
585
- --muted: 240 4.8% 95.9%;
586
- --muted-foreground: 240 3.8% 46.1%;
587
- --accent: 240 4.8% 95.9%;
588
- --accent-foreground: 240 5.9% 10%;
589
- --destructive: 0 84.2% 60.2%;
590
- --destructive-foreground: 0 0% 98%;
591
- --border: 240 5.9% 90%;
592
- --input: 240 5.9% 90%;
593
- --ring: 142.1 76.2% 36.3%;
594
- --radius: 0.5rem;
595
- --sidebar-background: 60 9.1% 97.8%;
596
- --sidebar-foreground: 20 14.3% 4.1%;
597
- --sidebar-primary: 142.1 76.2% 36.3%;
598
- --sidebar-primary-foreground: 355.7 100% 97.3%;
599
- --sidebar-accent: 60 4.8% 95.9%;
600
- --sidebar-accent-foreground: 20 14.3% 4.1%;
601
- --sidebar-border: 20 5.9% 90%;
602
- --sidebar-ring: 142.1 76.2% 36.3%;
603
- --sidebar-input: 20 5.9% 90%;
604
- }
605
-
606
- .dark {
607
- --background: 20 14.3% 4.1%;
608
- --foreground: 0 0% 95%;
609
- --card: 24 9.8% 10%;
610
- --card-foreground: 0 0% 95%;
611
- --popover: 0 0% 9%;
612
- --popover-foreground: 0 0% 95%;
613
- --primary: 142.1 70.6% 45.3%;
614
- --primary-foreground: 144.9 80.4% 10%;
615
- --secondary: 240 3.7% 15.9%;
616
- --secondary-foreground: 0 0% 98%;
617
- --muted: 0 0% 15%;
618
- --muted-foreground: 240 5% 64.9%;
619
- --accent: 12 6.5% 15.1%;
620
- --accent-foreground: 0 0% 98%;
621
- --destructive: 0 62.8% 30.6%;
622
- --destructive-foreground: 0 85.7% 97.3%;
623
- --border: 240 3.7% 15.9%;
624
- --input: 240 3.7% 15.9%;
625
- --ring: 142.4 71.8% 29.2%;
626
- --sidebar-background: 24 9.8% 8%;
627
- --sidebar-foreground: 60 9.1% 97.8%;
628
- --sidebar-primary: 142.1 70.6% 45.3%;
629
- --sidebar-primary-foreground: 144.9 80.4% 10%;
630
- --sidebar-accent: 24 9.8% 12%;
631
- --sidebar-accent-foreground: 60 9.1% 97.8%;
632
- --sidebar-border: 12 6.5% 15.1%;
633
- --sidebar-ring: 142.1 70.6% 45.3%;
634
- --sidebar-input: 12 6.5% 15.1%;
635
- }
741
+ const GREEN_THEME = `
742
+ :root {
743
+ --radius: 0.65rem;
744
+ --background: oklch(1 0 0);
745
+ --foreground: oklch(0.141 0.005 285.823);
746
+ --card: oklch(1 0 0);
747
+ --card-foreground: oklch(0.141 0.005 285.823);
748
+ --popover: oklch(1 0 0);
749
+ --popover-foreground: oklch(0.141 0.005 285.823);
750
+ --primary: oklch(0.723 0.219 149.579);
751
+ --primary-foreground: oklch(0.982 0.018 155.826);
752
+ --secondary: oklch(0.967 0.001 286.375);
753
+ --secondary-foreground: oklch(0.21 0.006 285.885);
754
+ --muted: oklch(0.967 0.001 286.375);
755
+ --muted-foreground: oklch(0.552 0.016 285.938);
756
+ --accent: oklch(0.967 0.001 286.375);
757
+ --accent-foreground: oklch(0.21 0.006 285.885);
758
+ --destructive: oklch(0.577 0.245 27.325);
759
+ --border: oklch(0.92 0.004 286.32);
760
+ --input: oklch(0.92 0.004 286.32);
761
+ --ring: oklch(0.723 0.219 149.579);
762
+ --chart-1: oklch(0.646 0.222 41.116);
763
+ --chart-2: oklch(0.6 0.118 184.704);
764
+ --chart-3: oklch(0.398 0.07 227.392);
765
+ --chart-4: oklch(0.828 0.189 84.429);
766
+ --chart-5: oklch(0.769 0.188 70.08);
767
+ --sidebar: oklch(0.985 0 0);
768
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
769
+ --sidebar-primary: oklch(0.723 0.219 149.579);
770
+ --sidebar-primary-foreground: oklch(0.982 0.018 155.826);
771
+ --sidebar-accent: oklch(0.967 0.001 286.375);
772
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
773
+ --sidebar-border: oklch(0.92 0.004 286.32);
774
+ --sidebar-ring: oklch(0.723 0.219 149.579);
775
+ }
776
+
777
+ .dark {
778
+ --background: oklch(0.141 0.005 285.823);
779
+ --foreground: oklch(0.985 0 0);
780
+ --card: oklch(0.21 0.006 285.885);
781
+ --card-foreground: oklch(0.985 0 0);
782
+ --popover: oklch(0.21 0.006 285.885);
783
+ --popover-foreground: oklch(0.985 0 0);
784
+ --primary: oklch(0.696 0.17 162.48);
785
+ --primary-foreground: oklch(0.393 0.095 152.535);
786
+ --secondary: oklch(0.274 0.006 286.033);
787
+ --secondary-foreground: oklch(0.985 0 0);
788
+ --muted: oklch(0.274 0.006 286.033);
789
+ --muted-foreground: oklch(0.705 0.015 286.067);
790
+ --accent: oklch(0.274 0.006 286.033);
791
+ --accent-foreground: oklch(0.985 0 0);
792
+ --destructive: oklch(0.704 0.191 22.216);
793
+ --border: oklch(1 0 0 / 10%);
794
+ --input: oklch(1 0 0 / 15%);
795
+ --ring: oklch(0.527 0.154 150.069);
796
+ --chart-1: oklch(0.488 0.243 264.376);
797
+ --chart-2: oklch(0.696 0.17 162.48);
798
+ --chart-3: oklch(0.769 0.188 70.08);
799
+ --chart-4: oklch(0.627 0.265 303.9);
800
+ --chart-5: oklch(0.645 0.246 16.439);
801
+ --sidebar: oklch(0.21 0.006 285.885);
802
+ --sidebar-foreground: oklch(0.985 0 0);
803
+ --sidebar-primary: oklch(0.696 0.17 162.48);
804
+ --sidebar-primary-foreground: oklch(0.393 0.095 152.535);
805
+ --sidebar-accent: oklch(0.274 0.006 286.033);
806
+ --sidebar-accent-foreground: oklch(0.985 0 0);
807
+ --sidebar-border: oklch(1 0 0 / 10%);
808
+ --sidebar-ring: oklch(0.527 0.154 150.069);
636
809
  }
637
810
 
638
811
  `;
639
812
 
640
813
  export const BLUE_THEME = `
641
- @layer base {
642
- :root {
643
- --background: 0 0% 100%;
644
- --foreground: 222.2 84% 4.9%;
645
- --card: 0 0% 100%;
646
- --card-foreground: 222.2 84% 4.9%;
647
- --popover: 0 0% 100%;
648
- --popover-foreground: 222.2 84% 4.9%;
649
- --primary: 221.2 83.2% 53.3%;
650
- --primary-foreground: 210 40% 98%;
651
- --secondary: 210 40% 96.1%;
652
- --secondary-foreground: 222.2 47.4% 11.2%;
653
- --muted: 210 40% 96.1%;
654
- --muted-foreground: 215.4 16.3% 46.9%;
655
- --accent: 210 40% 96.1%;
656
- --accent-foreground: 222.2 47.4% 11.2%;
657
- --destructive: 0 84.2% 60.2%;
658
- --destructive-foreground: 210 40% 98%;
659
- --border: 214.3 31.8% 91.4%;
660
- --input: 214.3 31.8% 91.4%;
661
- --ring: 221.2 83.2% 53.3%;
662
- --radius: 0.5rem;
663
- --sidebar-background: 210 40% 98%;
664
- --sidebar-foreground: 222.2 47.4% 11.2%;
665
- --sidebar-primary: 221.2 83.2% 53.3%;
666
- --sidebar-primary-foreground: 210 40% 98%;
667
- --sidebar-accent: 210 40% 96.1%;
668
- --sidebar-accent-foreground: 222.2 47.4% 11.2%;
669
- --sidebar-border: 214.3 31.8% 91.4%;
670
- --sidebar-ring: 221.2 83.2% 53.3%;
671
- --sidebar-input: 212.7 26.8% 83.9%;
672
- }
673
-
674
- .dark {
675
- --background: 222.2 84% 4.9%;
676
- --foreground: 210 40% 98%;
677
- --card: 222.2 84% 4.9%;
678
- --card-foreground: 210 40% 98%;
679
- --popover: 222.2 84% 4.9%;
680
- --popover-foreground: 210 40% 98%;
681
- --primary: 217.2 91.2% 59.8%;
682
- --primary-foreground: 222.2 47.4% 11.2%;
683
- --secondary: 217.2 32.6% 17.5%;
684
- --secondary-foreground: 210 40% 98%;
685
- --muted: 217.2 32.6% 17.5%;
686
- --muted-foreground: 215 20.2% 65.1%;
687
- --accent: 217.2 32.6% 17.5%;
688
- --accent-foreground: 210 40% 98%;
689
- --destructive: 0 62.8% 30.6%;
690
- --destructive-foreground: 210 40% 98%;
691
- --border: 217.2 32.6% 17.5%;
692
- --input: 217.2 32.6% 17.5%;
693
- --ring: 224.3 76.3% 48%;
694
- --sidebar-background: 222.2 47.4% 9.2%;
695
- --sidebar-foreground: 210 40% 98%;
696
- --sidebar-primary: 217.2 91.2% 59.8%;
697
- --sidebar-primary-foreground: 210 40% 98%;
698
- --sidebar-accent: 217.2 32.6% 17.5%;
699
- --sidebar-accent-foreground: 210 40% 98%;
700
- --sidebar-border: 217.2 32.6% 17.5%;
701
- --sidebar-ring: 217.2 91.2% 59.8%;
702
- --sidebar-input: 217.2 32.6% 17.5%;
703
- }
814
+ :root {
815
+ --radius: 0.65rem;
816
+ --background: oklch(1 0 0);
817
+ --foreground: oklch(0.141 0.005 285.823);
818
+ --card: oklch(1 0 0);
819
+ --card-foreground: oklch(0.141 0.005 285.823);
820
+ --popover: oklch(1 0 0);
821
+ --popover-foreground: oklch(0.141 0.005 285.823);
822
+ --primary: oklch(0.623 0.214 259.815);
823
+ --primary-foreground: oklch(0.97 0.014 254.604);
824
+ --secondary: oklch(0.967 0.001 286.375);
825
+ --secondary-foreground: oklch(0.21 0.006 285.885);
826
+ --muted: oklch(0.967 0.001 286.375);
827
+ --muted-foreground: oklch(0.552 0.016 285.938);
828
+ --accent: oklch(0.967 0.001 286.375);
829
+ --accent-foreground: oklch(0.21 0.006 285.885);
830
+ --destructive: oklch(0.577 0.245 27.325);
831
+ --border: oklch(0.92 0.004 286.32);
832
+ --input: oklch(0.92 0.004 286.32);
833
+ --ring: oklch(0.623 0.214 259.815);
834
+ --chart-1: oklch(0.646 0.222 41.116);
835
+ --chart-2: oklch(0.6 0.118 184.704);
836
+ --chart-3: oklch(0.398 0.07 227.392);
837
+ --chart-4: oklch(0.828 0.189 84.429);
838
+ --chart-5: oklch(0.769 0.188 70.08);
839
+ --sidebar: oklch(0.985 0 0);
840
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
841
+ --sidebar-primary: oklch(0.623 0.214 259.815);
842
+ --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
843
+ --sidebar-accent: oklch(0.967 0.001 286.375);
844
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
845
+ --sidebar-border: oklch(0.92 0.004 286.32);
846
+ --sidebar-ring: oklch(0.623 0.214 259.815);
847
+ }
848
+
849
+ .dark {
850
+ --background: oklch(0.141 0.005 285.823);
851
+ --foreground: oklch(0.985 0 0);
852
+ --card: oklch(0.21 0.006 285.885);
853
+ --card-foreground: oklch(0.985 0 0);
854
+ --popover: oklch(0.21 0.006 285.885);
855
+ --popover-foreground: oklch(0.985 0 0);
856
+ --primary: oklch(0.546 0.245 262.881);
857
+ --primary-foreground: oklch(0.379 0.146 265.522);
858
+ --secondary: oklch(0.274 0.006 286.033);
859
+ --secondary-foreground: oklch(0.985 0 0);
860
+ --muted: oklch(0.274 0.006 286.033);
861
+ --muted-foreground: oklch(0.705 0.015 286.067);
862
+ --accent: oklch(0.274 0.006 286.033);
863
+ --accent-foreground: oklch(0.985 0 0);
864
+ --destructive: oklch(0.704 0.191 22.216);
865
+ --border: oklch(1 0 0 / 10%);
866
+ --input: oklch(1 0 0 / 15%);
867
+ --ring: oklch(0.488 0.243 264.376);
868
+ --chart-1: oklch(0.488 0.243 264.376);
869
+ --chart-2: oklch(0.696 0.17 162.48);
870
+ --chart-3: oklch(0.769 0.188 70.08);
871
+ --chart-4: oklch(0.627 0.265 303.9);
872
+ --chart-5: oklch(0.645 0.246 16.439);
873
+ --sidebar: oklch(0.21 0.006 285.885);
874
+ --sidebar-foreground: oklch(0.985 0 0);
875
+ --sidebar-primary: oklch(0.546 0.245 262.881);
876
+ --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
877
+ --sidebar-accent: oklch(0.274 0.006 286.033);
878
+ --sidebar-accent-foreground: oklch(0.985 0 0);
879
+ --sidebar-border: oklch(1 0 0 / 10%);
880
+ --sidebar-ring: oklch(0.488 0.243 264.376);
704
881
  }
705
882
 
706
883
  `;
707
884
 
708
- export const YELLOW_THEME = `
709
- @layer base {
710
- :root {
711
- --background: 0 0% 100%;
712
- --foreground: 20 14.3% 4.1%;
713
- --card: 0 0% 100%;
714
- --card-foreground: 20 14.3% 4.1%;
715
- --popover: 0 0% 100%;
716
- --popover-foreground: 20 14.3% 4.1%;
717
- --primary: 47.9 95.8% 53.1%;
718
- --primary-foreground: 26 83.3% 14.1%;
719
- --secondary: 60 4.8% 95.9%;
720
- --secondary-foreground: 24 9.8% 10%;
721
- --muted: 60 4.8% 95.9%;
722
- --muted-foreground: 25 5.3% 44.7%;
723
- --accent: 60 4.8% 95.9%;
724
- --accent-foreground: 24 9.8% 10%;
725
- --destructive: 0 84.2% 60.2%;
726
- --destructive-foreground: 60 9.1% 97.8%;
727
- --border: 20 5.9% 90%;
728
- --input: 20 5.9% 90%;
729
- --ring: 20 14.3% 4.1%;
730
- --radius: 0.5rem;
731
- --sidebar-background: 60 9.1% 97.8%;
732
- --sidebar-foreground: 20 14.3% 4.1%;
733
- --sidebar-primary: 47.9 95.8% 53.1%;
734
- --sidebar-primary-foreground: 26 83.3% 14.1%;
735
- --sidebar-accent: 60 4.8% 95.9%;
736
- --sidebar-accent-foreground: 20 14.3% 4.1%;
737
- --sidebar-border: 20 5.9% 90%;
738
- --sidebar-ring: 47.9 95.8% 53.1%;
739
- --sidebar-input: 20 5.9% 90%;
740
- }
741
-
742
- .dark {
743
- --background: 20 14.3% 4.1%;
744
- --foreground: 60 9.1% 97.8%;
745
- --card: 20 14.3% 4.1%;
746
- --card-foreground: 60 9.1% 97.8%;
747
- --popover: 20 14.3% 4.1%;
748
- --popover-foreground: 60 9.1% 97.8%;
749
- --primary: 47.9 95.8% 53.1%;
750
- --primary-foreground: 26 83.3% 14.1%;
751
- --secondary: 12 6.5% 15.1%;
752
- --secondary-foreground: 60 9.1% 97.8%;
753
- --muted: 12 6.5% 15.1%;
754
- --muted-foreground: 24 5.4% 63.9%;
755
- --accent: 12 6.5% 15.1%;
756
- --accent-foreground: 60 9.1% 97.8%;
757
- --destructive: 0 62.8% 30.6%;
758
- --destructive-foreground: 60 9.1% 97.8%;
759
- --border: 12 6.5% 15.1%;
760
- --input: 12 6.5% 15.1%;
761
- --ring: 35.5 91.7% 32.9%;
762
- --sidebar-background: 24 9.8% 8%;
763
- --sidebar-foreground: 60 9.1% 97.8%;
764
- --sidebar-primary: 47.9 95.8% 53.1%;
765
- --sidebar-primary-foreground: 26 83.3% 14.1%;
766
- --sidebar-accent: 24 9.8% 12%;
767
- --sidebar-accent-foreground: 60 9.1% 97.8%;
768
- --sidebar-border: 12 6.5% 15.1%;
769
- --sidebar-ring: 47.9 95.8% 53.1%;
770
- --sidebar-input: 12 6.5% 15.1%;
771
- }
885
+ const YELLOW_THEME = `
886
+ :root {
887
+ --radius: 0.65rem;
888
+ --background: oklch(1 0 0);
889
+ --foreground: oklch(0.141 0.005 285.823);
890
+ --card: oklch(1 0 0);
891
+ --card-foreground: oklch(0.141 0.005 285.823);
892
+ --popover: oklch(1 0 0);
893
+ --popover-foreground: oklch(0.141 0.005 285.823);
894
+ --primary: oklch(0.795 0.184 86.047);
895
+ --primary-foreground: oklch(0.421 0.095 57.708);
896
+ --secondary: oklch(0.967 0.001 286.375);
897
+ --secondary-foreground: oklch(0.21 0.006 285.885);
898
+ --muted: oklch(0.967 0.001 286.375);
899
+ --muted-foreground: oklch(0.552 0.016 285.938);
900
+ --accent: oklch(0.967 0.001 286.375);
901
+ --accent-foreground: oklch(0.21 0.006 285.885);
902
+ --destructive: oklch(0.577 0.245 27.325);
903
+ --border: oklch(0.92 0.004 286.32);
904
+ --input: oklch(0.92 0.004 286.32);
905
+ --ring: oklch(0.795 0.184 86.047);
906
+ --chart-1: oklch(0.646 0.222 41.116);
907
+ --chart-2: oklch(0.6 0.118 184.704);
908
+ --chart-3: oklch(0.398 0.07 227.392);
909
+ --chart-4: oklch(0.828 0.189 84.429);
910
+ --chart-5: oklch(0.769 0.188 70.08);
911
+ --sidebar: oklch(0.985 0 0);
912
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
913
+ --sidebar-primary: oklch(0.795 0.184 86.047);
914
+ --sidebar-primary-foreground: oklch(0.421 0.095 57.708);
915
+ --sidebar-accent: oklch(0.967 0.001 286.375);
916
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
917
+ --sidebar-border: oklch(0.92 0.004 286.32);
918
+ --sidebar-ring: oklch(0.795 0.184 86.047);
919
+ }
920
+
921
+ .dark {
922
+ --background: oklch(0.141 0.005 285.823);
923
+ --foreground: oklch(0.985 0 0);
924
+ --card: oklch(0.21 0.006 285.885);
925
+ --card-foreground: oklch(0.985 0 0);
926
+ --popover: oklch(0.21 0.006 285.885);
927
+ --popover-foreground: oklch(0.985 0 0);
928
+ --primary: oklch(0.795 0.184 86.047);
929
+ --primary-foreground: oklch(0.421 0.095 57.708);
930
+ --secondary: oklch(0.274 0.006 286.033);
931
+ --secondary-foreground: oklch(0.985 0 0);
932
+ --muted: oklch(0.274 0.006 286.033);
933
+ --muted-foreground: oklch(0.705 0.015 286.067);
934
+ --accent: oklch(0.274 0.006 286.033);
935
+ --accent-foreground: oklch(0.985 0 0);
936
+ --destructive: oklch(0.704 0.191 22.216);
937
+ --border: oklch(1 0 0 / 10%);
938
+ --input: oklch(1 0 0 / 15%);
939
+ --ring: oklch(0.554 0.135 66.442);
940
+ --chart-1: oklch(0.488 0.243 264.376);
941
+ --chart-2: oklch(0.696 0.17 162.48);
942
+ --chart-3: oklch(0.769 0.188 70.08);
943
+ --chart-4: oklch(0.627 0.265 303.9);
944
+ --chart-5: oklch(0.645 0.246 16.439);
945
+ --sidebar: oklch(0.21 0.006 285.885);
946
+ --sidebar-foreground: oklch(0.985 0 0);
947
+ --sidebar-primary: oklch(0.795 0.184 86.047);
948
+ --sidebar-primary-foreground: oklch(0.421 0.095 57.708);
949
+ --sidebar-accent: oklch(0.274 0.006 286.033);
950
+ --sidebar-accent-foreground: oklch(0.985 0 0);
951
+ --sidebar-border: oklch(1 0 0 / 10%);
952
+ --sidebar-ring: oklch(0.554 0.135 66.442);
772
953
  }
773
954
 
774
955
  `;
775
956
 
776
- export const VIOLET_THEME = `
777
- @layer base {
778
- :root {
779
- --background: 0 0% 100%;
780
- --foreground: 224 71.4% 4.1%;
781
- --card: 0 0% 100%;
782
- --card-foreground: 224 71.4% 4.1%;
783
- --popover: 0 0% 100%;
784
- --popover-foreground: 224 71.4% 4.1%;
785
- --primary: 262.1 83.3% 57.8%;
786
- --primary-foreground: 210 20% 98%;
787
- --secondary: 220 14.3% 95.9%;
788
- --secondary-foreground: 220.9 39.3% 11%;
789
- --muted: 220 14.3% 95.9%;
790
- --muted-foreground: 220 8.9% 46.1%;
791
- --accent: 220 14.3% 95.9%;
792
- --accent-foreground: 220.9 39.3% 11%;
793
- --destructive: 0 84.2% 60.2%;
794
- --destructive-foreground: 210 20% 98%;
795
- --border: 220 13% 91%;
796
- --input: 220 13% 91%;
797
- --ring: 262.1 83.3% 57.8%;
798
- --radius: 0.5rem;
799
- --sidebar-background: 210 20% 98%;
800
- --sidebar-foreground: 224 71.4% 4.1%;
801
- --sidebar-primary: 262.1 83.3% 57.8%;
802
- --sidebar-primary-foreground: 210 20% 98%;
803
- --sidebar-accent: 220 14.3% 95.9%;
804
- --sidebar-accent-foreground: 224 71.4% 4.1;
805
- --sidebar-border: 220 13% 91%;
806
- --sidebar-ring: 262.1 83.3% 57.8%;
807
- --sidebar-input: 220 13% 91%;
808
- }
809
-
810
- .dark {
811
- --background: 224 71.4% 4.1%;
812
- --foreground: 210 20% 98%;
813
- --card: 224 71.4% 4.1%;
814
- --card-foreground: 210 20% 98%;
815
- --popover: 224 71.4% 4.1%;
816
- --popover-foreground: 210 20% 98%;
817
- --primary: 263.4 70% 50.4%;
818
- --primary-foreground: 210 20% 98%;
819
- --secondary: 215 27.9% 16.9%;
820
- --secondary-foreground: 210 20% 98%;
821
- --muted: 215 27.9% 16.9%;
822
- --muted-foreground: 217.9 10.6% 64.9%;
823
- --accent: 215 27.9% 16.9%;
824
- --accent-foreground: 210 20% 98%;
825
- --destructive: 0 62.8% 30.6%;
826
- --destructive-foreground: 210 20% 98%;
827
- --border: 215 27.9% 16.9%;
828
- --input: 215 27.9% 16.9%;
829
- --ring: 263.4 70% 50.4%;
830
- --sidebar-background: 220.9 39.3% 9%;
831
- --sidebar-foreground: 210 20% 98%;
832
- --sidebar-primary: 263.4 70% 50.4%;
833
- --sidebar-primary-foreground: 210 20% 98%;
834
- --sidebar-accent: 217.2 32.6% 17.5%;
835
- --sidebar-accent-foreground: 210 20% 98%;
836
- --sidebar-border: 215 27.9% 16.9%;
837
- --sidebar-ring: 263.4 70% 50.4%;
838
- --sidebar-input: 215 27.9% 16.9%;
839
- }
957
+ const VIOLET_THEME = `
958
+ :root {
959
+ --radius: 0.65rem;
960
+ --background: oklch(1 0 0);
961
+ --foreground: oklch(0.141 0.005 285.823);
962
+ --card: oklch(1 0 0);
963
+ --card-foreground: oklch(0.141 0.005 285.823);
964
+ --popover: oklch(1 0 0);
965
+ --popover-foreground: oklch(0.141 0.005 285.823);
966
+ --primary: oklch(0.606 0.25 292.717);
967
+ --primary-foreground: oklch(0.969 0.016 293.756);
968
+ --secondary: oklch(0.967 0.001 286.375);
969
+ --secondary-foreground: oklch(0.21 0.006 285.885);
970
+ --muted: oklch(0.967 0.001 286.375);
971
+ --muted-foreground: oklch(0.552 0.016 285.938);
972
+ --accent: oklch(0.967 0.001 286.375);
973
+ --accent-foreground: oklch(0.21 0.006 285.885);
974
+ --destructive: oklch(0.577 0.245 27.325);
975
+ --border: oklch(0.92 0.004 286.32);
976
+ --input: oklch(0.92 0.004 286.32);
977
+ --ring: oklch(0.606 0.25 292.717);
978
+ --chart-1: oklch(0.646 0.222 41.116);
979
+ --chart-2: oklch(0.6 0.118 184.704);
980
+ --chart-3: oklch(0.398 0.07 227.392);
981
+ --chart-4: oklch(0.828 0.189 84.429);
982
+ --chart-5: oklch(0.769 0.188 70.08);
983
+ --sidebar: oklch(0.985 0 0);
984
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
985
+ --sidebar-primary: oklch(0.606 0.25 292.717);
986
+ --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
987
+ --sidebar-accent: oklch(0.967 0.001 286.375);
988
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
989
+ --sidebar-border: oklch(0.92 0.004 286.32);
990
+ --sidebar-ring: oklch(0.606 0.25 292.717);
991
+ }
992
+
993
+ .dark {
994
+ --background: oklch(0.141 0.005 285.823);
995
+ --foreground: oklch(0.985 0 0);
996
+ --card: oklch(0.21 0.006 285.885);
997
+ --card-foreground: oklch(0.985 0 0);
998
+ --popover: oklch(0.21 0.006 285.885);
999
+ --popover-foreground: oklch(0.985 0 0);
1000
+ --primary: oklch(0.541 0.281 293.009);
1001
+ --primary-foreground: oklch(0.969 0.016 293.756);
1002
+ --secondary: oklch(0.274 0.006 286.033);
1003
+ --secondary-foreground: oklch(0.985 0 0);
1004
+ --muted: oklch(0.274 0.006 286.033);
1005
+ --muted-foreground: oklch(0.705 0.015 286.067);
1006
+ --accent: oklch(0.274 0.006 286.033);
1007
+ --accent-foreground: oklch(0.985 0 0);
1008
+ --destructive: oklch(0.704 0.191 22.216);
1009
+ --border: oklch(1 0 0 / 10%);
1010
+ --input: oklch(1 0 0 / 15%);
1011
+ --ring: oklch(0.541 0.281 293.009);
1012
+ --chart-1: oklch(0.488 0.243 264.376);
1013
+ --chart-2: oklch(0.696 0.17 162.48);
1014
+ --chart-3: oklch(0.769 0.188 70.08);
1015
+ --chart-4: oklch(0.627 0.265 303.9);
1016
+ --chart-5: oklch(0.645 0.246 16.439);
1017
+ --sidebar: oklch(0.21 0.006 285.885);
1018
+ --sidebar-foreground: oklch(0.985 0 0);
1019
+ --sidebar-primary: oklch(0.541 0.281 293.009);
1020
+ --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
1021
+ --sidebar-accent: oklch(0.274 0.006 286.033);
1022
+ --sidebar-accent-foreground: oklch(0.985 0 0);
1023
+ --sidebar-border: oklch(1 0 0 / 10%);
1024
+ --sidebar-ring: oklch(0.541 0.281 293.009);
840
1025
  }
841
1026
 
842
1027
  `;