refactor(theme): refactor enums to use them similarly in root.tsx, make-it-yours and setup-tailwind-generator

Author: maiieul

apps/website/src/_state/make-it-yours.ts

@@ -11,20 +11,20 @@ import { RouterHead } from './components/router-head/router-head';
 import globalStyles from './global.css?inline';
 
 import { ThemeProvider } from 'qwik-themes';
-import {
-  baseOptions,
-  borderRadiusOptions,
-  modeOptions,
-  primaryOptions,
-  styleOptions,
-  fontOptions,
-} from './_state/make-it-yours';
 
 import '@fontsource-variable/inter';
 import '@fontsource/ibm-plex-mono';
 import '@fontsource/source-serif-pro';
 import '@fontsource/londrina-shadow';
 import '@fontsource/rubik-doodle-shadow';
+import {
+  ThemeBaseColor,
+  ThemeBorderRadius,
+  ThemeFont,
+  ThemeMode,
+  ThemePrimaryColor,
+  ThemeStyle,
+} from '@qwik-ui/utils';
 
 export default component$(() => {
   /**
@@ -57,12 +57,12 @@ export default component$(() => {
           attribute="class"
           enableSystem={false}
           themes={[
-            ...modeOptions,
-            ...fontOptions,
-            ...styleOptions,
-            ...baseOptions,
-            ...primaryOptions,
-            ...borderRadiusOptions,
+            ...Object.values(ThemeFont),
+            ...Object.values(ThemeMode),
+            ...Object.values(ThemeStyle),
+            ...Object.values(ThemeBaseColor),
+            ...Object.values(ThemePrimaryColor),
+            ...Object.values(ThemeBorderRadius),
           ]}
         >
           <RouterOutlet />

apps/website/src/components/make-it-yours/make-it-yours.tsx

@@ -1,5 +1,5 @@
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { ThemeStyle } from '@qwik-ui/utils';
+import { ThemeBorderRadius, ThemePrimaryColor, ThemeStyle } from '@qwik-ui/utils';
 import { SetupTailwindGeneratorSchema } from './schema';
 import { setupTailwindGenerator } from './setup-tailwind-generator';
 
@@ -416,7 +416,7 @@ html {
 
   test(`
     GIVEN no options are passed
-    THEN it should generate "simple" style with primary color "cyan-600", base color "slate" and border-radios 0`, async () => {
+    THEN it should generate "simple" style with primary color "cyan-600", base color "slate" and border-radius 0`, async () => {
     const { tree, options } = setupWithProperFiles();
 
     options.rootCssPath = 'src/global.css';
@@ -443,8 +443,8 @@ html {
           --input: 214.3 31.8% 91.4%;
           --primary: 191.6 91.4% 36.5%;
           --primary-foreground: 0 0% 100%;
-          --secondary: 222.2 47.4% 11.2%;
-          --secondary-foreground: 0 0% 100%;
+          --secondary: 214.3 31.8% 91.4%;
+          --secondary-foreground: 0 0% 0%;
           --accent: 210 40% 96.1%;
           --accent-foreground: 222.2 47.4% 11.2%;
           --alert: 0 84.2% 60.2%;
@@ -478,7 +478,7 @@ html {
           --input: 217.2 32.6% 17.5%;
           --primary: 191.6 91.4% 36.5%;
           --primary-foreground: 0 0% 100%;
-          --secondary: 210 40% 96.1%;
+          --secondary: 214.3 31.8% 91.4%;
           --secondary-foreground: 0 0% 0%;
           --accent: 217.2 32.6% 17.5%;
           --accent-foreground: 210 40% 98%;
@@ -513,13 +513,13 @@ html {
     `);
   });
   test(`
-    GIVEN style is "brutalist" and primary color is "red-600" and border-radios is 1
+    GIVEN style is "brutalist" and primary color is "red-600" and border-radius is 1
     THEN it should generate the correct theme`, async () => {
     const { tree, options } = setupWithProperFiles();
 
     options.rootCssPath = 'src/global.css';
-    options.borderRadius = 'border-radius-1';
-    options.primaryColor = 'red-600';
+    options.borderRadius = ThemeBorderRadius['BORDER-RADIUS-1'];
+    options.primaryColor = ThemePrimaryColor.RED600;
     options.style = ThemeStyle.BRUTALIST;
 
     await setupTailwindGenerator(tree, options);
@@ -544,8 +544,8 @@ html {
           --input: 0 0% 0%;
           --primary: 0 72.2% 50.6%;
           --primary-foreground: 0 0% 100%;
-          --secondary: 222.2 47.4% 11.2%;
-          --secondary-foreground: 0 0% 100%;
+          --secondary: 214.3 31.8% 91.4%;
+          --secondary-foreground: 0 0% 0%;
           --accent: 210 40% 96.1%;
           --accent-foreground: 222.2 47.4% 11.2%;
           --alert: 0 84.2% 60.2%;
@@ -576,7 +576,7 @@ html {
           --input: 0 0% 0%;
           --primary: 0 72.2% 50.6%;
           --primary-foreground: 0 0% 100%;
-          --secondary: 210 40% 96.1%;
+          --secondary: 214.3 31.8% 91.4%;
           --secondary-foreground: 0 0% 0%;
           --accent: 217.2 32.6% 17.5%;
           --accent-foreground: 210 40% 98%;

apps/website/src/root.tsx

@@ -1,10 +1,12 @@
 import { Tree, formatFiles, joinPathFragments, workspaceRoot } from '@nx/devkit';
 import {
-  Color,
   ThemeStyle,
   extractBetweenComments,
   extractThemeCSS,
   type ThemeConfig,
+  ThemePrimaryColor,
+  ThemeBorderRadius,
+  ThemeBaseColor,
 } from '@qwik-ui/utils';
 import { readFileSync } from 'fs';
 import { join } from 'path';
@@ -22,10 +24,9 @@ export async function setupTailwindGenerator(
   options.projectRoot = options.projectRoot ?? '';
 
   options.style = options.style ?? ThemeStyle.SIMPLE;
-  options.primaryColor = options.primaryColor ?? Color.CYAN + '-600';
-  options.primaryColor = 'primary-' + options.primaryColor;
+  options.primaryColor = options.primaryColor ?? ThemePrimaryColor.CYAN600;
 
-  options.borderRadius = options.borderRadius ?? 'border-radius-0';
+  options.borderRadius = options.borderRadius ?? ThemeBorderRadius['BORDER-RADIUS-0'];
 
   updateTailwindConfig(tree, options.projectRoot, kitRoot);
 
@@ -180,7 +181,7 @@ function updateRootCss(
   kitRoot: string,
   themeConfig: ThemeConfig,
 ) {
-  themeConfig.baseColor = 'base-' + Color.SLATE;
+  themeConfig.baseColor = ThemeBaseColor.SLATE;
 
   const rootCssContent = tree.read(globalCssPath, 'utf-8');
 

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

@@ -1,10 +1,10 @@
 export * from './cn';
-export * from './theme/base-color.enum';
-export * from './theme/border-radius.type';
-export * from './theme/color.enum';
 export * from './theme/extract-between-comments';
 export * from './theme/extract-theme-css';
-export * from './theme/font.enum';
-export * from './theme/mode.enum';
 export * from './theme/theme-config.type';
+export * from './theme/theme-base-color.enum';
+export * from './theme/theme-border-radius.enum';
+export * from './theme/theme-primary-color.enum';
+export * from './theme/theme-font.enum';
+export * from './theme/theme-mode-enum';
 export * from './theme/theme-style.enum';

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

@@ -1,4 +1,4 @@
-export enum BaseColor {
+export enum ThemeBaseColor {
   SLATE = 'base-slate',
   GRAY = 'base-gray',
   ZINC = 'base-zinc',

packages/utils/src/index.ts

@@ -0,0 +1,7 @@
+export enum ThemeBorderRadius {
+  'BORDER-RADIUS-0' = 'border-radius-0',
+  'BORDER-RADIUS-DOT-25' = 'border-radius-dot-25',
+  'BORDER-RADIUS-DOT-50' = 'border-radius-dot-50',
+  'BORDER-RADIUS-DOT-75' = 'border-radius-dot-75',
+  'BORDER-RADIUS-1' = 'border-radius-1',
+}