Skip to content

Commit 11e3141

Browse files
maiieulmaiieul
committed
docs/cli: fix copy-css-config to match with setup-tailwind-generator
1 parent 26ec83a commit 11e3141

File tree

3 files changed

+61
-58
lines changed

3 files changed

+61
-58
lines changed

‎apps/website/src/components/copy-css-config/copy-css-config.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@ export default component$(() => {
1414
const { theme } = useTheme();
1515

1616
const generateCSSThemeOutput = $(async () => {
17+
console.log('theme', theme);
1718
const cssRules = extractThemeCSS(
18-
'border-radius-0 simple primary-green-600 light base-slate',
19+
theme === 'dark' || theme === 'light'
20+
? 'border-radius-0 simple primary-cyan-600 light base-slate'
21+
: theme,
1922
globalCSS,
2023
);
2124
cssThemeOutput.value = cssRules;

‎packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,7 @@ html {
416416

417417
test(`
418418
GIVEN no options are passed
419-
THEN it should generate "simple" style with primary color "cyan-600", base color "neutral" and border-radios 0.25`, async () => {
419+
THEN it should generate "simple" style with primary color "cyan-600", base color "slate" and border-radios 0`, async () => {
420420
const { tree, options } = setupWithProperFiles();
421421

422422
options.rootCssPath = 'src/global.css';
@@ -432,26 +432,26 @@ html {
432432
@layer base {
433433
:root {
434434
--background: 0 0% 100%;
435-
--foreground: 0 0% 9%;
436-
--muted: 0 0% 96.1%;
437-
--muted-foreground: 0 0% 45.1%;
435+
--foreground: 222.2 47.4% 11.2%;
436+
--muted: 210 40% 96.1%;
437+
--muted-foreground: 215.4 16.3% 46.9%;
438438
--popover: 0 0% 100%;
439-
--popover-foreground: 0 0% 9%;
439+
--popover-foreground: 222.2 47.4% 11.2%;
440440
--card: 0 0% 100%;
441-
--card-foreground: 0 0% 9%;
442-
--border: 0 0% 89.8%;
443-
--input: 0 0% 89.8%;
441+
--card-foreground: 222.2 47.4% 11.2%;
442+
--border: 214.3 31.8% 91.4%;
443+
--input: 214.3 31.8% 91.4%;
444444
--primary: 191.6 91.4% 36.5%;
445445
--primary-foreground: 0 0% 100%;
446-
--secondary: 0 0% 83.1%;
447-
--secondary-foreground: 0 0% 9%;
448-
--accent: 0 0% 96.1%;
449-
--accent-foreground: 0 0% 9%;
446+
--secondary: 222.2 47.4% 11.2%;
447+
--secondary-foreground: 0 0% 100%;
448+
--accent: 210 40% 96.1%;
449+
--accent-foreground: 222.2 47.4% 11.2%;
450450
--alert: 0 84.2% 60.2%;
451-
--alert-foreground: 0 0% 98%;
452-
--ring: 0 0% 9%;
451+
--alert-foreground: 210 40% 98%;
452+
--ring: 222.2 47.4% 11.2%;
453453
--border-width: 0px;
454-
--border-radius: 0.25rem;
454+
--border-radius: 0;
455455
--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
456456
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
457457
--shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -466,27 +466,27 @@ html {
466466
--transform-press: scale(0.95);
467467
}
468468
.dark {
469-
--background: 0 0% 9%;
470-
--foreground: 0 0% 98%;
471-
--muted: 0 0% 14.9%;
472-
--muted-foreground: 0 0% 63.9%;
473-
--popover: 0 0% 9%;
474-
--popover-foreground: 0 0% 98%;
475-
--card: 0 0% 9%;
476-
--card-foreground: 0 0% 98%;
477-
--border: 0 0% 14.9%;
478-
--input: 0 0% 14.9%;
469+
--background: 222.2 84% 4.9%;
470+
--foreground: 210 40% 98%;
471+
--muted: 217.2 32.6% 17.5%;
472+
--muted-foreground: 215 20.2% 65.1%;
473+
--popover: 222.2 84% 4.9%;
474+
--popover-foreground: 210 40% 98%;
475+
--card: 222.2 84% 4.9%;
476+
--card-foreground: 210 40% 98%;
477+
--border: 217.2 32.6% 17.5%;
478+
--input: 217.2 32.6% 17.5%;
479479
--primary: 191.6 91.4% 36.5%;
480480
--primary-foreground: 0 0% 100%;
481-
--secondary: 0 0% 25.1%;
482-
--secondary-foreground: 0 0% 98%;
483-
--accent: 0 0% 14.9%;
484-
--accent-foreground: 0 0% 98%;
481+
--secondary: 210 40% 96.1%;
482+
--secondary-foreground: 0 0% 0%;
483+
--accent: 217.2 32.6% 17.5%;
484+
--accent-foreground: 210 40% 98%;
485485
--alert: 0 84.2% 60.2%;
486-
--alert-foreground: 0 0% 98%;
487-
--ring: 0 0% 83.1%;
486+
--alert-foreground: 210 40% 98%;
487+
--ring: 212.7 26.8% 83.9;
488488
--border-width: 0px;
489-
--border-radius: 0.25rem;
489+
--border-radius: 0;
490490
--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
491491
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
492492
--shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
@@ -533,23 +533,23 @@ html {
533533
@layer base {
534534
:root {
535535
--background: 0 0% 100%;
536-
--foreground: 0 0% 9%;
537-
--muted: 0 0% 96.1%;
538-
--muted-foreground: 0 0% 45.1%;
536+
--foreground: 222.2 47.4% 11.2%;
537+
--muted: 210 40% 96.1%;
538+
--muted-foreground: 215.4 16.3% 46.9%;
539539
--popover: 0 0% 100%;
540-
--popover-foreground: 0 0% 9%;
540+
--popover-foreground: 222.2 47.4% 11.2%;
541541
--card: 0 0% 100%;
542-
--card-foreground: 0 0% 9%;
542+
--card-foreground: 222.2 47.4% 11.2%;
543543
--border: 0 0% 0%;
544544
--input: 0 0% 0%;
545545
--primary: 0 72.2% 50.6%;
546546
--primary-foreground: 0 0% 100%;
547-
--secondary: 0 0% 83.1%;
548-
--secondary-foreground: 0 0% 9%;
549-
--accent: 0 0% 96.1%;
550-
--accent-foreground: 0 0% 9%;
547+
--secondary: 222.2 47.4% 11.2%;
548+
--secondary-foreground: 0 0% 100%;
549+
--accent: 210 40% 96.1%;
550+
--accent-foreground: 222.2 47.4% 11.2%;
551551
--alert: 0 84.2% 60.2%;
552-
--alert-foreground: 0 0% 98%;
552+
--alert-foreground: 210 40% 98%;
553553
--ring: 0 0% 0%;
554554
--border-width: 2px;
555555
--border-radius: 1rem;
@@ -564,24 +564,24 @@ html {
564564
--transform-press: translate(4px, 4px);
565565
}
566566
.dark {
567-
--background: 0 0% 9%;
568-
--foreground: 0 0% 98%;
569-
--muted: 0 0% 14.9%;
570-
--muted-foreground: 0 0% 63.9%;
571-
--popover: 0 0% 9%;
572-
--popover-foreground: 0 0% 98%;
573-
--card: 0 0% 9%;
574-
--card-foreground: 0 0% 98%;
567+
--background: 222.2 84% 4.9%;
568+
--foreground: 210 40% 98%;
569+
--muted: 217.2 32.6% 17.5%;
570+
--muted-foreground: 215 20.2% 65.1%;
571+
--popover: 222.2 84% 4.9%;
572+
--popover-foreground: 210 40% 98%;
573+
--card: 222.2 84% 4.9%;
574+
--card-foreground: 210 40% 98%;
575575
--border: 0 0% 0%;
576576
--input: 0 0% 0%;
577577
--primary: 0 72.2% 50.6%;
578578
--primary-foreground: 0 0% 100%;
579-
--secondary: 0 0% 25.1%;
580-
--secondary-foreground: 0 0% 98%;
581-
--accent: 0 0% 14.9%;
582-
--accent-foreground: 0 0% 98%;
579+
--secondary: 210 40% 96.1%;
580+
--secondary-foreground: 0 0% 0%;
581+
--accent: 217.2 32.6% 17.5%;
582+
--accent-foreground: 210 40% 98%;
583583
--alert: 0 84.2% 60.2%;
584-
--alert-foreground: 0 0% 98%;
584+
--alert-foreground: 210 40% 98%;
585585
--ring: 0 0% 0%;
586586
--border-width: 3px;
587587
--border-radius: 1rem;

‎packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export async function setupTailwindGenerator(
2525
options.primaryColor = options.primaryColor ?? Color.CYAN + '-600';
2626
options.primaryColor = 'primary-' + options.primaryColor;
2727

28-
options.borderRadius = options.borderRadius ?? 'border-radius-dot-25';
28+
options.borderRadius = options.borderRadius ?? 'border-radius-0';
2929

3030
updateTailwindConfig(tree, options.projectRoot, kitRoot);
3131

@@ -180,7 +180,7 @@ function updateRootCss(
180180
kitRoot: string,
181181
themeConfig: ThemeConfig,
182182
) {
183-
themeConfig.baseColor = 'base-' + Color.NEUTRAL;
183+
themeConfig.baseColor = 'base-' + Color.SLATE;
184184

185185
const rootCssContent = tree.read(globalCssPath, 'utf-8');
186186

0 commit comments

Comments
 (0)