doo-boilerplate 0.1.14 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -34,7 +34,9 @@ async function collectOptions(defaults, isTTY2 = true) {
|
|
|
34
34
|
const packageManager2 = validPMs2.includes(defaults.pm) ? defaults.pm : "pnpm";
|
|
35
35
|
const features2 = (defaults.features ?? []).filter((f) => valid.includes(f));
|
|
36
36
|
const auth2 = defaults.auth === "jwt" || defaults.auth === "oauth" || defaults.auth === "none" ? defaults.auth : "jwt";
|
|
37
|
-
|
|
37
|
+
const validThemes2 = ["violet", "blue", "emerald", "rose"];
|
|
38
|
+
const theme2 = validThemes2.includes(defaults.theme) ? defaults.theme : "violet";
|
|
39
|
+
return { projectName: projectName2, framework: framework2, packageManager: packageManager2, features: features2, auth: auth2, theme: theme2 };
|
|
38
40
|
}
|
|
39
41
|
let projectName;
|
|
40
42
|
if (defaults.projectName) {
|
|
@@ -114,6 +116,26 @@ async function collectOptions(defaults, isTTY2 = true) {
|
|
|
114
116
|
}
|
|
115
117
|
features = answer;
|
|
116
118
|
}
|
|
119
|
+
const validThemes = ["violet", "blue", "emerald", "rose"];
|
|
120
|
+
let theme;
|
|
121
|
+
if (validThemes.includes(defaults.theme)) {
|
|
122
|
+
theme = defaults.theme;
|
|
123
|
+
} else {
|
|
124
|
+
const answer = await p.select({
|
|
125
|
+
message: "Color theme",
|
|
126
|
+
options: [
|
|
127
|
+
{ value: "violet", label: "Violet", hint: "hsl(262 83% 58%) \xB7 modern & distinctive" },
|
|
128
|
+
{ value: "blue", label: "Blue", hint: "hsl(217 91% 60%) \xB7 trustworthy & familiar" },
|
|
129
|
+
{ value: "emerald", label: "Emerald", hint: "hsl(158 64% 42%) \xB7 fresh & natural" },
|
|
130
|
+
{ value: "rose", label: "Rose", hint: "hsl(346 77% 49%) \xB7 bold & energetic" }
|
|
131
|
+
]
|
|
132
|
+
});
|
|
133
|
+
if (p.isCancel(answer)) {
|
|
134
|
+
p.cancel("Operation cancelled.");
|
|
135
|
+
process.exit(0);
|
|
136
|
+
}
|
|
137
|
+
theme = answer;
|
|
138
|
+
}
|
|
117
139
|
let auth;
|
|
118
140
|
if (defaults.auth === "jwt" || defaults.auth === "oauth" || defaults.auth === "none") {
|
|
119
141
|
auth = defaults.auth;
|
|
@@ -132,7 +154,7 @@ async function collectOptions(defaults, isTTY2 = true) {
|
|
|
132
154
|
}
|
|
133
155
|
auth = answer;
|
|
134
156
|
}
|
|
135
|
-
return { projectName, framework, packageManager, features, auth };
|
|
157
|
+
return { projectName, framework, packageManager, features, auth, theme };
|
|
136
158
|
}
|
|
137
159
|
|
|
138
160
|
// src/scaffold.ts
|
|
@@ -140,6 +162,303 @@ import fse3 from "fs-extra";
|
|
|
140
162
|
import path3 from "path";
|
|
141
163
|
import { fileURLToPath } from "url";
|
|
142
164
|
|
|
165
|
+
// src/themes.ts
|
|
166
|
+
function buildGlobalsCss(lightTokens, darkTokens, hasTailwindLayer) {
|
|
167
|
+
const baseStyles = hasTailwindLayer ? `
|
|
168
|
+
@layer base {
|
|
169
|
+
* {
|
|
170
|
+
@apply border-border;
|
|
171
|
+
}
|
|
172
|
+
body {
|
|
173
|
+
@apply bg-background text-foreground;
|
|
174
|
+
}
|
|
175
|
+
}` : `
|
|
176
|
+
* {
|
|
177
|
+
border-color: var(--color-border);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
body {
|
|
181
|
+
background-color: var(--color-background);
|
|
182
|
+
color: var(--color-foreground);
|
|
183
|
+
font-family: var(--font-sans);
|
|
184
|
+
}`;
|
|
185
|
+
return `@import "tailwindcss";
|
|
186
|
+
|
|
187
|
+
@theme {
|
|
188
|
+
/* Typography */
|
|
189
|
+
--font-sans: 'Inter', system-ui, sans-serif;
|
|
190
|
+
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
191
|
+
|
|
192
|
+
/* Radii \u2014 sharp minimal */
|
|
193
|
+
--radius-sm: 0.25rem;
|
|
194
|
+
--radius-md: 0.375rem;
|
|
195
|
+
--radius-lg: 0.5rem;
|
|
196
|
+
--radius-xl: 0.75rem;
|
|
197
|
+
|
|
198
|
+
${lightTokens}
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.dark {
|
|
202
|
+
${darkTokens}
|
|
203
|
+
}
|
|
204
|
+
${baseStyles}
|
|
205
|
+
|
|
206
|
+
/* View transition: circular reveal for theme toggle */
|
|
207
|
+
::view-transition-old(root),
|
|
208
|
+
::view-transition-new(root) {
|
|
209
|
+
animation: none;
|
|
210
|
+
mix-blend-mode: normal;
|
|
211
|
+
}
|
|
212
|
+
.dark::view-transition-old(root) {
|
|
213
|
+
z-index: 1;
|
|
214
|
+
}
|
|
215
|
+
.dark::view-transition-new(root) {
|
|
216
|
+
z-index: 999;
|
|
217
|
+
}
|
|
218
|
+
::view-transition-new(root) {
|
|
219
|
+
clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
|
|
220
|
+
animation: theme-reveal 0.45s ease-in-out;
|
|
221
|
+
}
|
|
222
|
+
@keyframes theme-reveal {
|
|
223
|
+
from { clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); }
|
|
224
|
+
to { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
|
|
225
|
+
}
|
|
226
|
+
`;
|
|
227
|
+
}
|
|
228
|
+
var VIOLET_LIGHT = ` /* Violet-tinted neutrals \u2014 cohesive with violet primary */
|
|
229
|
+
--color-background: hsl(0 0% 100%);
|
|
230
|
+
--color-foreground: hsl(262 30% 10%);
|
|
231
|
+
--color-card: hsl(0 0% 100%);
|
|
232
|
+
--color-card-foreground: hsl(262 30% 10%);
|
|
233
|
+
--color-popover: hsl(0 0% 100%);
|
|
234
|
+
--color-popover-foreground: hsl(262 30% 10%);
|
|
235
|
+
--color-primary: hsl(262 83% 58%);
|
|
236
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
237
|
+
--color-secondary: hsl(262 30% 96%);
|
|
238
|
+
--color-secondary-foreground: hsl(262 47% 12%);
|
|
239
|
+
--color-muted: hsl(262 30% 96%);
|
|
240
|
+
--color-muted-foreground: hsl(262 15% 47%);
|
|
241
|
+
--color-accent: hsl(262 30% 96%);
|
|
242
|
+
--color-accent-foreground: hsl(262 47% 12%);
|
|
243
|
+
--color-destructive: hsl(0 72% 51%);
|
|
244
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
245
|
+
--color-border: hsl(262 25% 90%);
|
|
246
|
+
--color-input: hsl(262 25% 90%);
|
|
247
|
+
--color-ring: hsl(262 83% 58%);
|
|
248
|
+
--color-sidebar: hsl(262 30% 98%);
|
|
249
|
+
--color-sidebar-foreground: hsl(262 20% 26%);
|
|
250
|
+
--color-sidebar-primary: hsl(262 83% 58%);
|
|
251
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
252
|
+
--color-sidebar-accent: hsl(262 30% 96%);
|
|
253
|
+
--color-sidebar-accent-foreground: hsl(262 47% 12%);
|
|
254
|
+
--color-sidebar-border: hsl(262 25% 90%);
|
|
255
|
+
--color-sidebar-ring: hsl(262 83% 58%);`;
|
|
256
|
+
var VIOLET_DARK = ` --color-background: hsl(262 20% 5%);
|
|
257
|
+
--color-foreground: hsl(0 0% 98%);
|
|
258
|
+
--color-card: hsl(262 20% 5%);
|
|
259
|
+
--color-card-foreground: hsl(0 0% 98%);
|
|
260
|
+
--color-popover: hsl(262 20% 7%);
|
|
261
|
+
--color-popover-foreground: hsl(0 0% 98%);
|
|
262
|
+
--color-primary: hsl(262 70% 67%);
|
|
263
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
264
|
+
--color-secondary: hsl(262 20% 15%);
|
|
265
|
+
--color-secondary-foreground: hsl(0 0% 98%);
|
|
266
|
+
--color-muted: hsl(262 20% 15%);
|
|
267
|
+
--color-muted-foreground: hsl(262 12% 65%);
|
|
268
|
+
--color-accent: hsl(262 20% 15%);
|
|
269
|
+
--color-accent-foreground: hsl(0 0% 98%);
|
|
270
|
+
--color-destructive: hsl(0 63% 31%);
|
|
271
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
272
|
+
--color-border: hsl(262 20% 15%);
|
|
273
|
+
--color-input: hsl(262 20% 15%);
|
|
274
|
+
--color-ring: hsl(262 70% 67%);
|
|
275
|
+
--color-sidebar: hsl(262 25% 8%);
|
|
276
|
+
--color-sidebar-foreground: hsl(262 10% 80%);
|
|
277
|
+
--color-sidebar-primary: hsl(262 70% 67%);
|
|
278
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
279
|
+
--color-sidebar-accent: hsl(262 20% 15%);
|
|
280
|
+
--color-sidebar-accent-foreground: hsl(0 0% 98%);
|
|
281
|
+
--color-sidebar-border: hsl(262 20% 15%);
|
|
282
|
+
--color-sidebar-ring: hsl(262 70% 67%);`;
|
|
283
|
+
var BLUE_LIGHT = ` /* Blue-tinted neutrals \u2014 cohesive with blue-500 primary */
|
|
284
|
+
--color-background: hsl(0 0% 100%);
|
|
285
|
+
--color-foreground: hsl(217 30% 10%);
|
|
286
|
+
--color-card: hsl(0 0% 100%);
|
|
287
|
+
--color-card-foreground: hsl(217 30% 10%);
|
|
288
|
+
--color-popover: hsl(0 0% 100%);
|
|
289
|
+
--color-popover-foreground: hsl(217 30% 10%);
|
|
290
|
+
--color-primary: hsl(217 91% 60%);
|
|
291
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
292
|
+
--color-secondary: hsl(217 40% 96%);
|
|
293
|
+
--color-secondary-foreground: hsl(217 47% 12%);
|
|
294
|
+
--color-muted: hsl(217 40% 96%);
|
|
295
|
+
--color-muted-foreground: hsl(217 15% 47%);
|
|
296
|
+
--color-accent: hsl(217 40% 96%);
|
|
297
|
+
--color-accent-foreground: hsl(217 47% 12%);
|
|
298
|
+
--color-destructive: hsl(0 72% 51%);
|
|
299
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
300
|
+
--color-border: hsl(217 30% 90%);
|
|
301
|
+
--color-input: hsl(217 30% 90%);
|
|
302
|
+
--color-ring: hsl(217 91% 60%);
|
|
303
|
+
--color-sidebar: hsl(217 40% 98%);
|
|
304
|
+
--color-sidebar-foreground: hsl(217 20% 26%);
|
|
305
|
+
--color-sidebar-primary: hsl(217 91% 60%);
|
|
306
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
307
|
+
--color-sidebar-accent: hsl(217 40% 96%);
|
|
308
|
+
--color-sidebar-accent-foreground: hsl(217 47% 12%);
|
|
309
|
+
--color-sidebar-border: hsl(217 30% 90%);
|
|
310
|
+
--color-sidebar-ring: hsl(217 91% 60%);`;
|
|
311
|
+
var BLUE_DARK = ` --color-background: hsl(217 25% 5%);
|
|
312
|
+
--color-foreground: hsl(0 0% 98%);
|
|
313
|
+
--color-card: hsl(217 25% 5%);
|
|
314
|
+
--color-card-foreground: hsl(0 0% 98%);
|
|
315
|
+
--color-popover: hsl(217 25% 7%);
|
|
316
|
+
--color-popover-foreground: hsl(0 0% 98%);
|
|
317
|
+
--color-primary: hsl(217 91% 65%);
|
|
318
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
319
|
+
--color-secondary: hsl(217 20% 15%);
|
|
320
|
+
--color-secondary-foreground: hsl(0 0% 98%);
|
|
321
|
+
--color-muted: hsl(217 20% 15%);
|
|
322
|
+
--color-muted-foreground: hsl(217 12% 65%);
|
|
323
|
+
--color-accent: hsl(217 20% 15%);
|
|
324
|
+
--color-accent-foreground: hsl(0 0% 98%);
|
|
325
|
+
--color-destructive: hsl(0 63% 31%);
|
|
326
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
327
|
+
--color-border: hsl(217 20% 15%);
|
|
328
|
+
--color-input: hsl(217 20% 15%);
|
|
329
|
+
--color-ring: hsl(217 91% 65%);
|
|
330
|
+
--color-sidebar: hsl(217 25% 8%);
|
|
331
|
+
--color-sidebar-foreground: hsl(217 10% 80%);
|
|
332
|
+
--color-sidebar-primary: hsl(217 91% 65%);
|
|
333
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
334
|
+
--color-sidebar-accent: hsl(217 20% 15%);
|
|
335
|
+
--color-sidebar-accent-foreground: hsl(0 0% 98%);
|
|
336
|
+
--color-sidebar-border: hsl(217 20% 15%);
|
|
337
|
+
--color-sidebar-ring: hsl(217 91% 65%);`;
|
|
338
|
+
var EMERALD_LIGHT = ` /* Emerald-tinted neutrals \u2014 cohesive with emerald-500 primary */
|
|
339
|
+
--color-background: hsl(0 0% 100%);
|
|
340
|
+
--color-foreground: hsl(158 30% 8%);
|
|
341
|
+
--color-card: hsl(0 0% 100%);
|
|
342
|
+
--color-card-foreground: hsl(158 30% 8%);
|
|
343
|
+
--color-popover: hsl(0 0% 100%);
|
|
344
|
+
--color-popover-foreground: hsl(158 30% 8%);
|
|
345
|
+
--color-primary: hsl(158 64% 42%);
|
|
346
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
347
|
+
--color-secondary: hsl(158 30% 95%);
|
|
348
|
+
--color-secondary-foreground: hsl(158 47% 10%);
|
|
349
|
+
--color-muted: hsl(158 30% 95%);
|
|
350
|
+
--color-muted-foreground: hsl(158 12% 46%);
|
|
351
|
+
--color-accent: hsl(158 30% 95%);
|
|
352
|
+
--color-accent-foreground: hsl(158 47% 10%);
|
|
353
|
+
--color-destructive: hsl(0 72% 51%);
|
|
354
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
355
|
+
--color-border: hsl(158 25% 89%);
|
|
356
|
+
--color-input: hsl(158 25% 89%);
|
|
357
|
+
--color-ring: hsl(158 64% 42%);
|
|
358
|
+
--color-sidebar: hsl(158 25% 98%);
|
|
359
|
+
--color-sidebar-foreground: hsl(158 18% 25%);
|
|
360
|
+
--color-sidebar-primary: hsl(158 64% 42%);
|
|
361
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
362
|
+
--color-sidebar-accent: hsl(158 30% 95%);
|
|
363
|
+
--color-sidebar-accent-foreground: hsl(158 47% 10%);
|
|
364
|
+
--color-sidebar-border: hsl(158 25% 89%);
|
|
365
|
+
--color-sidebar-ring: hsl(158 64% 42%);`;
|
|
366
|
+
var EMERALD_DARK = ` --color-background: hsl(158 20% 5%);
|
|
367
|
+
--color-foreground: hsl(0 0% 98%);
|
|
368
|
+
--color-card: hsl(158 20% 5%);
|
|
369
|
+
--color-card-foreground: hsl(0 0% 98%);
|
|
370
|
+
--color-popover: hsl(158 20% 7%);
|
|
371
|
+
--color-popover-foreground: hsl(0 0% 98%);
|
|
372
|
+
--color-primary: hsl(158 60% 52%);
|
|
373
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
374
|
+
--color-secondary: hsl(158 18% 14%);
|
|
375
|
+
--color-secondary-foreground: hsl(0 0% 98%);
|
|
376
|
+
--color-muted: hsl(158 18% 14%);
|
|
377
|
+
--color-muted-foreground: hsl(158 10% 64%);
|
|
378
|
+
--color-accent: hsl(158 18% 14%);
|
|
379
|
+
--color-accent-foreground: hsl(0 0% 98%);
|
|
380
|
+
--color-destructive: hsl(0 63% 31%);
|
|
381
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
382
|
+
--color-border: hsl(158 18% 14%);
|
|
383
|
+
--color-input: hsl(158 18% 14%);
|
|
384
|
+
--color-ring: hsl(158 60% 52%);
|
|
385
|
+
--color-sidebar: hsl(158 22% 8%);
|
|
386
|
+
--color-sidebar-foreground: hsl(158 8% 80%);
|
|
387
|
+
--color-sidebar-primary: hsl(158 60% 52%);
|
|
388
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
389
|
+
--color-sidebar-accent: hsl(158 18% 14%);
|
|
390
|
+
--color-sidebar-accent-foreground: hsl(0 0% 98%);
|
|
391
|
+
--color-sidebar-border: hsl(158 18% 14%);
|
|
392
|
+
--color-sidebar-ring: hsl(158 60% 52%);`;
|
|
393
|
+
var ROSE_LIGHT = ` /* Rose-tinted neutrals \u2014 cohesive with rose-600 primary */
|
|
394
|
+
--color-background: hsl(0 0% 100%);
|
|
395
|
+
--color-foreground: hsl(346 30% 10%);
|
|
396
|
+
--color-card: hsl(0 0% 100%);
|
|
397
|
+
--color-card-foreground: hsl(346 30% 10%);
|
|
398
|
+
--color-popover: hsl(0 0% 100%);
|
|
399
|
+
--color-popover-foreground: hsl(346 30% 10%);
|
|
400
|
+
--color-primary: hsl(346 77% 49%);
|
|
401
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
402
|
+
--color-secondary: hsl(346 30% 96%);
|
|
403
|
+
--color-secondary-foreground: hsl(346 47% 12%);
|
|
404
|
+
--color-muted: hsl(346 30% 96%);
|
|
405
|
+
--color-muted-foreground: hsl(346 14% 47%);
|
|
406
|
+
--color-accent: hsl(346 30% 96%);
|
|
407
|
+
--color-accent-foreground: hsl(346 47% 12%);
|
|
408
|
+
--color-destructive: hsl(0 72% 51%);
|
|
409
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
410
|
+
--color-border: hsl(346 25% 90%);
|
|
411
|
+
--color-input: hsl(346 25% 90%);
|
|
412
|
+
--color-ring: hsl(346 77% 49%);
|
|
413
|
+
--color-sidebar: hsl(346 30% 98%);
|
|
414
|
+
--color-sidebar-foreground: hsl(346 20% 26%);
|
|
415
|
+
--color-sidebar-primary: hsl(346 77% 49%);
|
|
416
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
417
|
+
--color-sidebar-accent: hsl(346 30% 96%);
|
|
418
|
+
--color-sidebar-accent-foreground: hsl(346 47% 12%);
|
|
419
|
+
--color-sidebar-border: hsl(346 25% 90%);
|
|
420
|
+
--color-sidebar-ring: hsl(346 77% 49%);`;
|
|
421
|
+
var ROSE_DARK = ` --color-background: hsl(346 20% 5%);
|
|
422
|
+
--color-foreground: hsl(0 0% 98%);
|
|
423
|
+
--color-card: hsl(346 20% 5%);
|
|
424
|
+
--color-card-foreground: hsl(0 0% 98%);
|
|
425
|
+
--color-popover: hsl(346 20% 7%);
|
|
426
|
+
--color-popover-foreground: hsl(0 0% 98%);
|
|
427
|
+
--color-primary: hsl(346 75% 60%);
|
|
428
|
+
--color-primary-foreground: hsl(0 0% 100%);
|
|
429
|
+
--color-secondary: hsl(346 18% 15%);
|
|
430
|
+
--color-secondary-foreground: hsl(0 0% 98%);
|
|
431
|
+
--color-muted: hsl(346 18% 15%);
|
|
432
|
+
--color-muted-foreground: hsl(346 10% 65%);
|
|
433
|
+
--color-accent: hsl(346 18% 15%);
|
|
434
|
+
--color-accent-foreground: hsl(0 0% 98%);
|
|
435
|
+
--color-destructive: hsl(0 63% 31%);
|
|
436
|
+
--color-destructive-foreground: hsl(0 0% 98%);
|
|
437
|
+
--color-border: hsl(346 18% 15%);
|
|
438
|
+
--color-input: hsl(346 18% 15%);
|
|
439
|
+
--color-ring: hsl(346 75% 60%);
|
|
440
|
+
--color-sidebar: hsl(346 22% 8%);
|
|
441
|
+
--color-sidebar-foreground: hsl(346 8% 80%);
|
|
442
|
+
--color-sidebar-primary: hsl(346 75% 60%);
|
|
443
|
+
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
444
|
+
--color-sidebar-accent: hsl(346 18% 15%);
|
|
445
|
+
--color-sidebar-accent-foreground: hsl(0 0% 98%);
|
|
446
|
+
--color-sidebar-border: hsl(346 18% 15%);
|
|
447
|
+
--color-sidebar-ring: hsl(346 75% 60%);`;
|
|
448
|
+
function getThemeCss(theme, framework) {
|
|
449
|
+
const hasTailwindLayer = framework === "vite";
|
|
450
|
+
switch (theme) {
|
|
451
|
+
case "violet":
|
|
452
|
+
return buildGlobalsCss(VIOLET_LIGHT, VIOLET_DARK, hasTailwindLayer);
|
|
453
|
+
case "blue":
|
|
454
|
+
return buildGlobalsCss(BLUE_LIGHT, BLUE_DARK, hasTailwindLayer);
|
|
455
|
+
case "emerald":
|
|
456
|
+
return buildGlobalsCss(EMERALD_LIGHT, EMERALD_DARK, hasTailwindLayer);
|
|
457
|
+
case "rose":
|
|
458
|
+
return buildGlobalsCss(ROSE_LIGHT, ROSE_DARK, hasTailwindLayer);
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
|
|
143
462
|
// src/utils/package-json.ts
|
|
144
463
|
import fse from "fs-extra";
|
|
145
464
|
import path from "path";
|
|
@@ -230,6 +549,8 @@ async function scaffold(options, destDir) {
|
|
|
230
549
|
for (const feature of options.features) {
|
|
231
550
|
await applyFeature(feature, templateDir, destDir);
|
|
232
551
|
}
|
|
552
|
+
const globalsCssPath = path3.join(destDir, "src", "styles", "globals.css");
|
|
553
|
+
await fse3.writeFile(globalsCssPath, getThemeCss(options.theme, options.framework), "utf-8");
|
|
233
554
|
await replaceInFiles(destDir, {
|
|
234
555
|
"{{PROJECT_NAME}}": options.projectName,
|
|
235
556
|
"{{YEAR}}": (/* @__PURE__ */ new Date()).getFullYear().toString()
|
|
@@ -288,7 +609,7 @@ function log(msg) {
|
|
|
288
609
|
console.log(msg);
|
|
289
610
|
}
|
|
290
611
|
async function run() {
|
|
291
|
-
const program = new Command().name("create-pila-app").description("Scaffold a Pila portal frontend project").version("0.1.0").argument("[project-name]", "Name of the project").option("--framework <framework>", "nextjs or vite").option("--pm <pm>", "Package manager: pnpm, bun, or yarn").option("--features <features>", "Comma-separated: editor,charts,dnd,sentry").option("--auth <auth>", "jwt, oauth, or none").option("--no-git", "Skip git initialization").parse(process.argv);
|
|
612
|
+
const program = new Command().name("create-pila-app").description("Scaffold a Pila portal frontend project").version("0.1.0").argument("[project-name]", "Name of the project").option("--framework <framework>", "nextjs or vite").option("--pm <pm>", "Package manager: pnpm, bun, or yarn").option("--features <features>", "Comma-separated: editor,charts,dnd,sentry").option("--auth <auth>", "jwt, oauth, or none").option("--theme <theme>", "Color theme: violet, blue, emerald, or rose").option("--no-git", "Skip git initialization").parse(process.argv);
|
|
292
613
|
log("");
|
|
293
614
|
if (isTTY) {
|
|
294
615
|
p3.intro(pc3.bgCyan(pc3.black(" create-pila-app ")));
|
|
@@ -302,7 +623,8 @@ async function run() {
|
|
|
302
623
|
framework: opts.framework,
|
|
303
624
|
pm: opts.pm,
|
|
304
625
|
features: opts.features?.split(","),
|
|
305
|
-
auth: opts.auth
|
|
626
|
+
auth: opts.auth,
|
|
627
|
+
theme: opts.theme
|
|
306
628
|
}, isTTY);
|
|
307
629
|
const destDir = path5.resolve(process.cwd(), options.projectName);
|
|
308
630
|
if (await fse4.pathExists(destDir)) {
|
package/package.json
CHANGED
|
@@ -11,56 +11,56 @@
|
|
|
11
11
|
--radius-lg: 0.5rem;
|
|
12
12
|
--radius-xl: 0.75rem;
|
|
13
13
|
|
|
14
|
-
/* Light mode —
|
|
14
|
+
/* Light mode — violet-tinted neutrals for a cohesive palette */
|
|
15
15
|
--color-background: hsl(0 0% 100%);
|
|
16
|
-
--color-foreground: hsl(
|
|
16
|
+
--color-foreground: hsl(262 30% 10%);
|
|
17
17
|
--color-card: hsl(0 0% 100%);
|
|
18
|
-
--color-card-foreground: hsl(
|
|
18
|
+
--color-card-foreground: hsl(262 30% 10%);
|
|
19
19
|
--color-popover: hsl(0 0% 100%);
|
|
20
|
-
--color-popover-foreground: hsl(
|
|
20
|
+
--color-popover-foreground: hsl(262 30% 10%);
|
|
21
21
|
--color-primary: hsl(262 83% 58%);
|
|
22
22
|
--color-primary-foreground: hsl(0 0% 100%);
|
|
23
|
-
--color-secondary: hsl(
|
|
24
|
-
--color-secondary-foreground: hsl(
|
|
25
|
-
--color-muted: hsl(
|
|
26
|
-
--color-muted-foreground: hsl(
|
|
27
|
-
--color-accent: hsl(
|
|
28
|
-
--color-accent-foreground: hsl(
|
|
29
|
-
--color-destructive: hsl(0 72
|
|
23
|
+
--color-secondary: hsl(262 30% 96%);
|
|
24
|
+
--color-secondary-foreground: hsl(262 47% 12%);
|
|
25
|
+
--color-muted: hsl(262 30% 96%);
|
|
26
|
+
--color-muted-foreground: hsl(262 15% 47%);
|
|
27
|
+
--color-accent: hsl(262 30% 96%);
|
|
28
|
+
--color-accent-foreground: hsl(262 47% 12%);
|
|
29
|
+
--color-destructive: hsl(0 72% 51%);
|
|
30
30
|
--color-destructive-foreground: hsl(0 0% 98%);
|
|
31
|
-
--color-border: hsl(
|
|
32
|
-
--color-input: hsl(
|
|
31
|
+
--color-border: hsl(262 25% 90%);
|
|
32
|
+
--color-input: hsl(262 25% 90%);
|
|
33
33
|
--color-ring: hsl(262 83% 58%);
|
|
34
|
-
--color-sidebar: hsl(
|
|
35
|
-
--color-sidebar-foreground: hsl(
|
|
34
|
+
--color-sidebar: hsl(262 30% 98%);
|
|
35
|
+
--color-sidebar-foreground: hsl(262 20% 26%);
|
|
36
36
|
--color-sidebar-primary: hsl(262 83% 58%);
|
|
37
|
-
--color-sidebar-border: hsl(
|
|
37
|
+
--color-sidebar-border: hsl(262 25% 90%);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
.dark {
|
|
41
|
-
--color-background: hsl(
|
|
41
|
+
--color-background: hsl(262 20% 5%);
|
|
42
42
|
--color-foreground: hsl(0 0% 98%);
|
|
43
|
-
--color-card: hsl(
|
|
43
|
+
--color-card: hsl(262 20% 5%);
|
|
44
44
|
--color-card-foreground: hsl(0 0% 98%);
|
|
45
|
-
--color-popover: hsl(
|
|
45
|
+
--color-popover: hsl(262 20% 7%);
|
|
46
46
|
--color-popover-foreground: hsl(0 0% 98%);
|
|
47
|
-
--color-primary: hsl(
|
|
47
|
+
--color-primary: hsl(262 70% 67%);
|
|
48
48
|
--color-primary-foreground: hsl(0 0% 100%);
|
|
49
|
-
--color-secondary: hsl(
|
|
49
|
+
--color-secondary: hsl(262 20% 15%);
|
|
50
50
|
--color-secondary-foreground: hsl(0 0% 98%);
|
|
51
|
-
--color-muted: hsl(
|
|
52
|
-
--color-muted-foreground: hsl(
|
|
53
|
-
--color-accent: hsl(
|
|
51
|
+
--color-muted: hsl(262 20% 15%);
|
|
52
|
+
--color-muted-foreground: hsl(262 12% 65%);
|
|
53
|
+
--color-accent: hsl(262 20% 15%);
|
|
54
54
|
--color-accent-foreground: hsl(0 0% 98%);
|
|
55
|
-
--color-destructive: hsl(0
|
|
55
|
+
--color-destructive: hsl(0 63% 31%);
|
|
56
56
|
--color-destructive-foreground: hsl(0 0% 98%);
|
|
57
|
-
--color-border: hsl(
|
|
58
|
-
--color-input: hsl(
|
|
59
|
-
--color-ring: hsl(
|
|
60
|
-
--color-sidebar: hsl(
|
|
61
|
-
--color-sidebar-foreground: hsl(
|
|
62
|
-
--color-sidebar-primary: hsl(
|
|
63
|
-
--color-sidebar-border: hsl(
|
|
57
|
+
--color-border: hsl(262 20% 15%);
|
|
58
|
+
--color-input: hsl(262 20% 15%);
|
|
59
|
+
--color-ring: hsl(262 70% 67%);
|
|
60
|
+
--color-sidebar: hsl(262 25% 8%);
|
|
61
|
+
--color-sidebar-foreground: hsl(262 10% 80%);
|
|
62
|
+
--color-sidebar-primary: hsl(262 70% 67%);
|
|
63
|
+
--color-sidebar-border: hsl(262 20% 15%);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
* {
|
|
@@ -11,64 +11,64 @@
|
|
|
11
11
|
--radius-lg: 0.5rem;
|
|
12
12
|
--radius-xl: 0.75rem;
|
|
13
13
|
|
|
14
|
-
/* Light mode —
|
|
14
|
+
/* Light mode — violet-tinted neutrals for a cohesive palette */
|
|
15
15
|
--color-background: hsl(0 0% 100%);
|
|
16
|
-
--color-foreground: hsl(
|
|
16
|
+
--color-foreground: hsl(262 30% 10%);
|
|
17
17
|
--color-card: hsl(0 0% 100%);
|
|
18
|
-
--color-card-foreground: hsl(
|
|
18
|
+
--color-card-foreground: hsl(262 30% 10%);
|
|
19
19
|
--color-popover: hsl(0 0% 100%);
|
|
20
|
-
--color-popover-foreground: hsl(
|
|
20
|
+
--color-popover-foreground: hsl(262 30% 10%);
|
|
21
21
|
--color-primary: hsl(262 83% 58%);
|
|
22
22
|
--color-primary-foreground: hsl(0 0% 100%);
|
|
23
|
-
--color-secondary: hsl(
|
|
24
|
-
--color-secondary-foreground: hsl(
|
|
25
|
-
--color-muted: hsl(
|
|
26
|
-
--color-muted-foreground: hsl(
|
|
27
|
-
--color-accent: hsl(
|
|
28
|
-
--color-accent-foreground: hsl(
|
|
29
|
-
--color-destructive: hsl(0 72
|
|
23
|
+
--color-secondary: hsl(262 30% 96%);
|
|
24
|
+
--color-secondary-foreground: hsl(262 47% 12%);
|
|
25
|
+
--color-muted: hsl(262 30% 96%);
|
|
26
|
+
--color-muted-foreground: hsl(262 15% 47%);
|
|
27
|
+
--color-accent: hsl(262 30% 96%);
|
|
28
|
+
--color-accent-foreground: hsl(262 47% 12%);
|
|
29
|
+
--color-destructive: hsl(0 72% 51%);
|
|
30
30
|
--color-destructive-foreground: hsl(0 0% 98%);
|
|
31
|
-
--color-border: hsl(
|
|
32
|
-
--color-input: hsl(
|
|
31
|
+
--color-border: hsl(262 25% 90%);
|
|
32
|
+
--color-input: hsl(262 25% 90%);
|
|
33
33
|
--color-ring: hsl(262 83% 58%);
|
|
34
|
-
--color-sidebar: hsl(
|
|
35
|
-
--color-sidebar-foreground: hsl(
|
|
34
|
+
--color-sidebar: hsl(262 30% 98%);
|
|
35
|
+
--color-sidebar-foreground: hsl(262 20% 26%);
|
|
36
36
|
--color-sidebar-primary: hsl(262 83% 58%);
|
|
37
37
|
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
38
|
-
--color-sidebar-accent: hsl(
|
|
39
|
-
--color-sidebar-accent-foreground: hsl(
|
|
40
|
-
--color-sidebar-border: hsl(
|
|
38
|
+
--color-sidebar-accent: hsl(262 30% 96%);
|
|
39
|
+
--color-sidebar-accent-foreground: hsl(262 47% 12%);
|
|
40
|
+
--color-sidebar-border: hsl(262 25% 90%);
|
|
41
41
|
--color-sidebar-ring: hsl(262 83% 58%);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
.dark {
|
|
45
|
-
--color-background: hsl(
|
|
45
|
+
--color-background: hsl(262 20% 5%);
|
|
46
46
|
--color-foreground: hsl(0 0% 98%);
|
|
47
|
-
--color-card: hsl(
|
|
47
|
+
--color-card: hsl(262 20% 5%);
|
|
48
48
|
--color-card-foreground: hsl(0 0% 98%);
|
|
49
|
-
--color-popover: hsl(
|
|
49
|
+
--color-popover: hsl(262 20% 7%);
|
|
50
50
|
--color-popover-foreground: hsl(0 0% 98%);
|
|
51
|
-
--color-primary: hsl(
|
|
51
|
+
--color-primary: hsl(262 70% 67%);
|
|
52
52
|
--color-primary-foreground: hsl(0 0% 100%);
|
|
53
|
-
--color-secondary: hsl(
|
|
53
|
+
--color-secondary: hsl(262 20% 15%);
|
|
54
54
|
--color-secondary-foreground: hsl(0 0% 98%);
|
|
55
|
-
--color-muted: hsl(
|
|
56
|
-
--color-muted-foreground: hsl(
|
|
57
|
-
--color-accent: hsl(
|
|
55
|
+
--color-muted: hsl(262 20% 15%);
|
|
56
|
+
--color-muted-foreground: hsl(262 12% 65%);
|
|
57
|
+
--color-accent: hsl(262 20% 15%);
|
|
58
58
|
--color-accent-foreground: hsl(0 0% 98%);
|
|
59
|
-
--color-destructive: hsl(0
|
|
59
|
+
--color-destructive: hsl(0 63% 31%);
|
|
60
60
|
--color-destructive-foreground: hsl(0 0% 98%);
|
|
61
|
-
--color-border: hsl(
|
|
62
|
-
--color-input: hsl(
|
|
63
|
-
--color-ring: hsl(
|
|
64
|
-
--color-sidebar: hsl(
|
|
65
|
-
--color-sidebar-foreground: hsl(
|
|
66
|
-
--color-sidebar-primary: hsl(
|
|
61
|
+
--color-border: hsl(262 20% 15%);
|
|
62
|
+
--color-input: hsl(262 20% 15%);
|
|
63
|
+
--color-ring: hsl(262 70% 67%);
|
|
64
|
+
--color-sidebar: hsl(262 25% 8%);
|
|
65
|
+
--color-sidebar-foreground: hsl(262 10% 80%);
|
|
66
|
+
--color-sidebar-primary: hsl(262 70% 67%);
|
|
67
67
|
--color-sidebar-primary-foreground: hsl(0 0% 100%);
|
|
68
|
-
--color-sidebar-accent: hsl(
|
|
69
|
-
--color-sidebar-accent-foreground: hsl(
|
|
70
|
-
--color-sidebar-border: hsl(
|
|
71
|
-
--color-sidebar-ring: hsl(
|
|
68
|
+
--color-sidebar-accent: hsl(262 20% 15%);
|
|
69
|
+
--color-sidebar-accent-foreground: hsl(0 0% 98%);
|
|
70
|
+
--color-sidebar-border: hsl(262 20% 15%);
|
|
71
|
+
--color-sidebar-ring: hsl(262 70% 67%);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
@layer base {
|