tailjng 0.1.0 → 0.1.2

package/README.md

@@ -41,9 +41,11 @@ El CLI instala **dependencias transitivas** automáticamente (ej. `button` → `
 
 ## Requisitos
 
-- Angular **19.2+**
-- Tailwind CSS **4.x**
-- Peers: `lucide-angular`, `date-fns`, `exceljs`, `xlsx` (el CLI los instala con `init:app` si faltan)
+- Angular **19.2+** (19.x dentro del mismo major; no Angular 20/21 aún)
+- Tailwind CSS **4.x** (incluido si eliges Tailwind al crear el proyecto con `ng new`)
+-{
+- Peers: `lucide-angular`, `date-fns`, `exceljs`, `xlsx`, `file-saver` (el CLI los instala con `init:app` si faltan)
+- Estilos globales en **CSS o SCSS** — `init:app` detecta cuál usa tu app
 
 ---
 
@@ -132,13 +134,39 @@ import { JAlertToastComponent } from './tailjng/alert/alert-toast/toast-alert.co
 <JButton [text]="'Guardar'" classes="primary" [icon]="icons.save" (clicked)="save()" />
 ```
 
-### Colores — `JColorsService` (solo npm)
+### Colores — `JColorsService` + safelist Tailwind
 
-No uses `npx tailjng add color`. Las variantes vienen del servicio:
+Las variantes (`primary`, `success_soft`, …) las resuelve **`JColorsService`** en runtime. Tailwind v4 **no ve** esas clases en el HTML estático, así que el paquete incluye `node_modules/tailjng/src/colors.safelist.css` con `@source inline(...)`.
+
+`init:app` importa ese archivo en tu `styles.css` / `styles.scss` automáticamente.
+
+**Variantes personalizadas del proyecto:**
+
+```powershell
+npx tailjng add colors-config
+```
+
+Copia `src/app/tailjng/colors/` con:
+
+- `colors.config.ts` — define variantes extra (`TAILJNG_COLORS_CONFIG`)
+- `colors.safelist.css` — añade tus clases Tailwind al `@source inline` para que el build las genere
+
+Registra el provider en `app.config.ts`:
+
+```typescript
+import { tailjngColorsProvider } from './tailjng/colors/colors.config';
+
+providers: [
+  tailjngColorsProvider,
+  // ...
+],
+```
+
+Uso en componentes (igual que siempre):
 
 ```html
-<JButton classes="success" … />
-<JBadge classes="warning_soft" … />
+<JButton classes="primary" … />
+<JButton classes="brand" … />
 ```
 
 ### Select con datos estáticos

package/cli/execute/init-app.js

@@ -20,16 +20,22 @@ const {
   patchAppConfig,
   patchAppComponentForAlerts,
   getMissingPackages,
+  resolveRuntimePackages,
+  resolveDevPackages,
+  hasTailwindSetup,
+  getTailjngSafelistCssImport,
+  ensureTailjngSafelistImport,
+  resolveStyleFilePath,
   fileExists,
 } = require('../settings/project-utils');
 
 const RUNTIME_PACKAGES = {
-  '@angular/animations': '^19.2.0',
   'lucide-angular': '^0.525.0',
   '@ng-icons/lucide': '>=32.0.0',
   'date-fns': '^4.1.0',
   'exceljs': '^4.4.0',
   'xlsx': '^0.18.5',
+  'file-saver': '^2.0.5',
 };
 
 const DEV_PACKAGES = {
@@ -82,10 +88,19 @@ function installPackages(workspaceRoot, packages, isDev = false) {
   const flag = isDev ? '--save-dev' : '--save';
   console.log(`${COLORS.blue}[tailjng CLI] Installing ${isDev ? 'dev ' : ''}dependencies...${COLORS.reset}`);
 
+  const run = (extra = '') => {
+    execSync(`npm install ${flag} ${extra} ${spec}`.replace(/\s+/g, ' ').trim(), {
+      cwd: workspaceRoot,
+      stdio: 'inherit',
+      shell: true,
+    });
+  };
+
   try {
-    execSync(`npm install ${flag} ${spec}`, { cwd: workspaceRoot, stdio: 'inherit' });
+    run();
   } catch {
-    execSync(`npm install ${flag} ${spec}`, { cwd: workspaceRoot, stdio: 'inherit', shell: true });
+    console.log(`${COLORS.yellow}[tailjng CLI] Retrying with --legacy-peer-deps...${COLORS.reset}`);
+    run('--legacy-peer-deps');
   }
 }
 
@@ -158,6 +173,7 @@ async function runInitApp() {
 
   const packageJsonPath = path.join(workspaceRoot, 'package.json');
   const packageJson = fileExists(packageJsonPath) ? readJson(packageJsonPath) : { dependencies: {}, devDependencies: {} };
+  const tailwindReady = hasTailwindSetup(workspaceRoot, packageJson, primaryStylePath);
 
   if (!packageJson.dependencies?.tailjng) {
     console.log(`${COLORS.yellow}[tailjng CLI] WARNING: tailjng is not in package.json dependencies.${COLORS.reset}`);
@@ -165,13 +181,26 @@ async function runInitApp() {
   }
 
   if (installDeps) {
-    const missingRuntime = Object.fromEntries(getMissingPackages(packageJson, RUNTIME_PACKAGES));
-    const missingDev = Object.fromEntries(getMissingPackages(packageJson, DEV_PACKAGES));
+    if (tailwindReady) {
+      console.log(`${COLORS.cyan}[tailjng CLI] Tailwind already configured — skipping Tailwind/PostCSS packages and .postcssrc.json${COLORS.reset}`);
+    }
+
+    const runtimePackages = resolveRuntimePackages(packageJson, RUNTIME_PACKAGES);
+    const devPackages = resolveDevPackages(packageJson, DEV_PACKAGES, tailwindReady);
+    const missingRuntime = Object.fromEntries(getMissingPackages(packageJson, runtimePackages, workspaceRoot));
+    const missingDev = Object.fromEntries(getMissingPackages(packageJson, devPackages, workspaceRoot));
+
+    if (missingRuntime['@angular/animations']) {
+      console.log(`${COLORS.dim}[tailjng CLI] Adding @angular/animations aligned with @angular/core${COLORS.reset}`);
+    }
+
     installPackages(workspaceRoot, missingRuntime, false);
     installPackages(workspaceRoot, missingDev, true);
   }
 
   const hasAppConfig = fileExists(appConfigPath);
+  const safelistImport = getTailjngSafelistCssImport(workspaceRoot, primaryStylePath, selectedApp);
+  const primaryStyleFullPath = resolveStyleFilePath(workspaceRoot, primaryStylePath, selectedApp);
   const files = buildInitFiles({
     styleLanguage,
     primaryStylePath,
@@ -180,6 +209,7 @@ async function runInitApp() {
     componentsPath,
     overwrite,
     hasAppConfig,
+    safelistImport,
   });
 
   let created = 0;
@@ -192,6 +222,12 @@ async function runInitApp() {
   }
 
   for (const file of files) {
+    if (tailwindReady && file.relativePath === '.postcssrc.json') {
+      skipped += 1;
+      console.log(`${COLORS.yellow}↷ Skipped (Tailwind already configured) ${file.relativePath}${COLORS.reset}`);
+      continue;
+    }
+
     const targetPath = resolveTargetPath(workspaceRoot, selectedApp, file.relativePath, file.appRootRelative);
     const isPrimaryStyles = file.relativePath === primaryStylePath;
     const forceWrite = isPrimaryStyles && shouldWriteStyles(targetPath);
@@ -222,6 +258,11 @@ async function runInitApp() {
     console.log(`${COLORS.green}✔ Added node_modules/tailjng/src/styles.css to angular.json${COLORS.reset}`);
   }
 
+  const safelistPatched = ensureTailjngSafelistImport(primaryStyleFullPath, safelistImport);
+  if (safelistPatched.changed) {
+    console.log(`${COLORS.green}✔ Added tailjng colors safelist to ${path.relative(workspaceRoot, primaryStyleFullPath)}${COLORS.reset}`);
+  }
+
   if (installComponents) {
     const previousCwd = process.cwd();
     process.chdir(appRoot);
@@ -236,11 +277,15 @@ async function runInitApp() {
     }
   }
 
+  if (tailwindReady && !shouldWriteStyles(path.join(workspaceRoot, primaryStylePath))) {
+    console.log(`${COLORS.yellow}[tailjng CLI] Tip: add tailjng @theme tokens to your existing styles if components look unstyled.${COLORS.reset}`);
+  }
+
   console.log(`\n${COLORS.greenBright}${COLORS.bright}[tailjng CLI] init:app completed.${COLORS.reset}`);
   console.log(`${COLORS.dim}Created: ${created} | Skipped: ${skipped}${COLORS.reset}`);
   console.log(`\n${COLORS.cyan}Project ready. Install components when you need them:${COLORS.reset}`);
-  console.log(`  ${COLORS.dim}One by one:${COLORS.reset}  cd ${path.relative(workspaceRoot, appRoot)} && npx tailjng add button`);
-  console.log(`  ${COLORS.dim}All at once:${COLORS.reset} cd ${path.relative(workspaceRoot, appRoot)} && npx tailjng install-all`);
+  console.log(`  ${COLORS.dim}One by one:${COLORS.reset}  npx tailjng add button`);
+  console.log(`  ${COLORS.dim}All at once:${COLORS.reset} npx tailjng install-all`);
   console.log(`  ${COLORS.dim}List:${COLORS.reset}         npx tailjng list`);
   console.log(`\n${COLORS.cyan}Then run:${COLORS.reset} ng serve ${selectedApp.name} -o\n`);
 }

package/cli/settings/project-utils.js

@@ -70,6 +70,38 @@ function writeFileSafe(filePath, content, overwrite = false) {
   return true;
 }
 
+function resolveStyleFilePath(workspaceRoot, styleEntry, appProject) {
+  if (path.isAbsolute(styleEntry)) return styleEntry;
+  if (styleEntry.startsWith('projects/')) return path.join(workspaceRoot, styleEntry);
+  return path.join(workspaceRoot, appProject.root || '', styleEntry);
+}
+
+function getTailjngSafelistCssImport(workspaceRoot, styleEntry, appProject) {
+  const stylePath = resolveStyleFilePath(workspaceRoot, styleEntry, appProject);
+  const safelistPath = path.join(workspaceRoot, 'node_modules', 'tailjng', 'src', 'colors.safelist.css');
+  let rel = path.relative(path.dirname(stylePath), safelistPath).split(path.sep).join('/');
+  if (!rel.startsWith('.')) rel = `./${rel}`;
+  return `@import "${rel}";`;
+}
+
+function ensureTailjngSafelistImport(styleFilePath, importLine) {
+  if (!fs.existsSync(styleFilePath)) return { changed: false };
+
+  let content = fs.readFileSync(styleFilePath, 'utf8');
+  if (content.includes('colors.safelist.css')) return { changed: false };
+
+  const tailwindMatch = content.match(/@(?:import|use)\s+"tailwindcss";?/);
+  if (tailwindMatch) {
+    const insertAt = tailwindMatch.index + tailwindMatch[0].length;
+    content = `${content.slice(0, insertAt)}\n${importLine}\n${content.slice(insertAt)}`;
+  } else {
+    content = `${importLine}\n${content}`;
+  }
+
+  fs.writeFileSync(styleFilePath, content, 'utf8');
+  return { changed: true };
+}
+
 function ensureTailjngStylesInAngularJson(angularJsonPath, projectName, styleLanguage) {
   const angularJson = readJson(angularJsonPath);
   const buildOptions = getBuildOptions(angularJson, projectName);
@@ -196,9 +228,82 @@ function patchAppComponentForAlerts(appComponentTsPath, appComponentHtmlPath) {
   return { changed };
 }
 
-function getMissingPackages(packageJson, packages) {
+function getMissingPackages(packageJson, packages, workspaceRoot = null) {
   const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
-  return Object.entries(packages).filter(([name]) => !deps[name]);
+  return Object.entries(packages).filter(([name]) => {
+    if (deps[name]) return false;
+    if (workspaceRoot && name.startsWith('@angular/')) {
+      const installed = path.join(workspaceRoot, 'node_modules', ...name.split('/'), 'package.json');
+      if (fs.existsSync(installed)) return false;
+    }
+    return true;
+  });
+}
+
+function getMergedDependencies(packageJson) {
+  return { ...packageJson.dependencies, ...packageJson.devDependencies };
+}
+
+/** Alinea @angular/animations con la línea de @angular/core del proyecto (evita ERESOLVE 19.2.0 vs 19.2.25). */
+function resolveRuntimePackages(packageJson, basePackages) {
+  const packages = { ...basePackages };
+  const deps = getMergedDependencies(packageJson);
+
+  if (deps['@angular/animations']) {
+    delete packages['@angular/animations'];
+  } else if (deps['@angular/core']) {
+    packages['@angular/animations'] = deps['@angular/core'];
+  }
+
+  return packages;
+}
+
+function resolveDevPackages(packageJson, basePackages, tailwindReady) {
+  const packages = { ...basePackages };
+  if (!tailwindReady) return packages;
+
+  for (const name of ['tailwindcss', '@tailwindcss/postcss', 'postcss', 'autoprefixer']) {
+    if (getMergedDependencies(packageJson)[name]) {
+      delete packages[name];
+    }
+  }
+  return packages;
+}
+
+function hasTailwindSetup(workspaceRoot, packageJson, primaryStylePath) {
+  const deps = getMergedDependencies(packageJson);
+  if (deps.tailwindcss || deps['@tailwindcss/postcss']) {
+    return true;
+  }
+
+  const postcssConfigs = [
+    '.postcssrc.json',
+    'postcss.config.js',
+    'postcss.config.mjs',
+    'postcss.config.cjs',
+  ];
+
+  for (const configName of postcssConfigs) {
+    const configPath = path.join(workspaceRoot, configName);
+    if (!fs.existsSync(configPath)) continue;
+    const content = fs.readFileSync(configPath, 'utf8');
+    if (/tailwindcss|@tailwindcss\/postcss/.test(content)) {
+      return true;
+    }
+  }
+
+  const stylePath = path.isAbsolute(primaryStylePath)
+    ? primaryStylePath
+    : path.join(workspaceRoot, primaryStylePath);
+
+  if (fs.existsSync(stylePath)) {
+    const content = fs.readFileSync(stylePath, 'utf8');
+    if (/tailwindcss/.test(content)) {
+      return true;
+    }
+  }
+
+  return false;
 }
 
 module.exports = {
@@ -212,9 +317,16 @@ module.exports = {
   getPrimaryStyleEntry,
   writeFileSafe,
   ensureTailjngStylesInAngularJson,
+  resolveStyleFilePath,
+  getTailjngSafelistCssImport,
+  ensureTailjngSafelistImport,
   patchIndexHtml,
   patchAppConfig,
   patchAppComponentForAlerts,
   getMissingPackages,
+  getMergedDependencies,
+  resolveRuntimePackages,
+  resolveDevPackages,
+  hasTailwindSetup,
   fileExists,
 };

package/cli/templates/app.generator.js

@@ -44,9 +44,9 @@ function buildDefaultThemeBlock() {
 }`;
 }
 
-function buildStylesCss() {
+function buildStylesCss(safelistImport = '') {
   return `@import "tailwindcss";
-
+${safelistImport ? `${safelistImport}\n` : ''}
 html,
 body {
   font-family: 'Arial', sans-serif;
@@ -75,9 +75,9 @@ ${buildDefaultThemeBlock()}
 `;
 }
 
-function buildStylesScss() {
+function buildStylesScss(safelistImport = '') {
   return `@use "tailwindcss";
-
+${safelistImport ? `${safelistImport}\n` : ''}
 @use "./scss/scroll";
 @use "./scss/input";
 
@@ -318,6 +318,7 @@ function buildInitFiles(options) {
     socketUrl,
     componentsPath,
     overwrite,
+    safelistImport = '',
   } = options;
 
   const files = [
@@ -349,7 +350,7 @@ function buildInitFiles(options) {
   if (styleLanguage === 'scss') {
     files.push({
       relativePath: primaryStylePath,
-      content: buildStylesScss(),
+      content: buildStylesScss(safelistImport),
     });
     files.push({
       relativePath: 'src/scss/_scroll.scss',
@@ -362,7 +363,7 @@ function buildInitFiles(options) {
   } else {
     files.push({
       relativePath: primaryStylePath,
-      content: buildStylesCss(),
+      content: buildStylesCss(safelistImport),
     });
   }
 

package/fesm2022/tailjng.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, Inject } from '@angular/core';
+import { InjectionToken, signal, computed, Injectable, Inject, inject } from '@angular/core';
 import { CurrencyPipe } from '@angular/common';
 import { formatDistanceToNowStrict } from 'date-fns';
 import { es } from 'date-fns/locale';
@@ -23,6 +23,8 @@ const TAILJNG_CONFIG = new InjectionToken('TAILJNG_CONFIG');
 //     }
 // ]
 
+const TAILJNG_COLORS_CONFIG = new InjectionToken('TAILJNG_COLORS_CONFIG');
+
 // ======================================================
 // Table Column Interface
 // This interface defines the structure of a table column in a CRUD application.
@@ -1353,86 +1355,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+const JCOLORS_DEFAULT_VARIANTS = {
+    primary: 'bg-primary dark:bg-input text-white dark:text-white hover:bg-primary/80 dark:hover:bg-input/60 dark:hover:text-white shadow-md border border-dark-border dark:border-border',
+    primary_soft: 'bg-primary/10 dark:bg-input/15 text-primary dark:text-input hover:bg-primary/20 dark:hover:bg-input/25 border border-primary/20 dark:border-input/30 shadow-sm',
+    primary_outline: 'bg-transparent text-primary dark:text-input border border-primary dark:border-input hover:bg-primary/10 dark:hover:bg-input/15 shadow-sm',
+    primary_ghost: 'bg-transparent text-primary dark:text-input hover:bg-primary/10 dark:hover:bg-input/15 border border-transparent dark:border-transparent',
+    primary_light: 'bg-primary/80 dark:bg-input/80 text-white hover:bg-primary dark:hover:bg-input border border-primary/30 dark:border-input/40 shadow-md',
+    primary_dark: 'bg-primary text-white dark:bg-input hover:bg-primary/80 dark:hover:bg-input/80 border border-dark-border dark:border-border shadow-md',
+    primary_secondary: 'bg-none text-dark-border dark:text-border border border-dark-border dark:border-border hover:bg-dark-border/10 dark:hover:bg-border/10 shadow-md',
+    secondary: 'bg-background dark:bg-dark-background text-black border border-dark-border dark:border-border dark:text-white hover:bg-accent dark:hover:bg-dark-accent/50',
+    secondary_soft: 'bg-accent/40 dark:bg-dark-accent/30 text-black dark:text-white border border-border dark:border-dark-border hover:bg-accent/70 dark:hover:bg-dark-accent/50 shadow-sm',
+    secondary_outline: 'bg-transparent text-black dark:text-white border border-border dark:border-dark-border hover:bg-accent dark:hover:bg-dark-accent/40 shadow-sm',
+    secondary_ghost: 'bg-transparent text-black dark:text-white hover:bg-accent/60 dark:hover:bg-dark-accent/40 border border-transparent dark:border-transparent',
+    secondary_light: 'bg-background/80 dark:bg-dark-background/80 text-black dark:text-white border border-border dark:border-dark-border hover:bg-background dark:hover:bg-dark-background shadow-sm',
+    secondary_dark: 'bg-dark-background text-white border border-dark-border hover:bg-dark-accent/50 shadow-md',
+    success: 'bg-green-500 hover:bg-green-600 text-white border border-green-300 dark:border-green-300 shadow-md',
+    success_secondary: 'bg-none text-green-500 border border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+    success_soft: 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/15 shadow-sm',
+    success_outline: 'bg-transparent text-green-500 border border-green-500 hover:bg-green-500/10 shadow-sm',
+    success_ghost: 'bg-transparent text-green-500 hover:bg-green-500/10 border border-transparent dark:border-transparent',
+    info: 'bg-blue-500 hover:bg-blue-600 text-white border border-blue-300 dark:border-blue-300 shadow-md',
+    info_secondary: 'bg-none text-blue-500 border border-blue-500 dark:border-blue-600 hover:bg-blue-500/10 dark:hover:bg-blue-600/10 shadow-md',
+    info_soft: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 hover:bg-blue-500/20 dark:hover:bg-blue-500/15 shadow-sm',
+    info_outline: 'bg-transparent text-blue-500 border border-blue-500 hover:bg-blue-500/10 shadow-sm',
+    info_ghost: 'bg-transparent text-blue-500 hover:bg-blue-500/10 border border-transparent dark:border-transparent',
+    warning: 'bg-yellow-600 hover:bg-yellow-700 text-white border border-yellow-500 dark:border-yellow-500 shadow-md',
+    warning_secondary: 'bg-none text-yellow-600 border border-yellow-600 dark:border-yellow-700 hover:bg-yellow-600/10 dark:hover:bg-yellow-700/10 shadow-md',
+    warning_soft: 'bg-yellow-600/10 text-yellow-700 dark:text-yellow-400 border border-yellow-600/20 hover:bg-yellow-600/20 dark:hover:bg-yellow-600/15 shadow-sm',
+    warning_outline: 'bg-transparent text-yellow-600 border border-yellow-600 hover:bg-yellow-600/10 shadow-sm',
+    warning_ghost: 'bg-transparent text-yellow-600 hover:bg-yellow-600/10 border border-transparent dark:border-transparent',
+    question: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-400 dark:border-purple-400 shadow-md',
+    question_secondary: 'bg-none text-purple-500 border border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+    question_soft: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 hover:bg-purple-500/20 dark:hover:bg-purple-500/15 shadow-sm',
+    question_outline: 'bg-transparent text-purple-500 border border-purple-500 hover:bg-purple-500/10 shadow-sm',
+    question_ghost: 'bg-transparent text-purple-500 hover:bg-purple-500/10 border border-transparent dark:border-transparent',
+    error: 'bg-red-500 hover:bg-red-600 text-white border border-red-400 dark:border-red-400 shadow-md',
+    error_secondary: 'bg-none text-red-500 border border-red-500 dark:border-red-600 hover:bg-red-500/10 dark:hover:bg-red-600/10 shadow-md',
+    error_soft: 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20 hover:bg-red-500/20 dark:hover:bg-red-500/15 shadow-sm',
+    error_outline: 'bg-transparent text-red-500 border border-red-500 hover:bg-red-500/10 shadow-sm',
+    error_ghost: 'bg-transparent text-red-500 hover:bg-red-500/10 border border-transparent dark:border-transparent',
+    loading: 'bg-gray-500 hover:bg-gray-600 text-white border border-gray-400 dark:border-gray-400 shadow-md',
+    loading_secondary: 'bg-none text-gray-500 border border-gray-500 dark:border-gray-600 hover:bg-gray-500/10 dark:hover:bg-gray-600/10 shadow-md',
+    loading_soft: 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/20 hover:bg-gray-500/20 dark:hover:bg-gray-500/15 shadow-sm',
+    loading_outline: 'bg-transparent text-gray-500 border border-gray-500 hover:bg-gray-500/10 shadow-sm',
+    loading_ghost: 'bg-transparent text-gray-500 hover:bg-gray-500/10 border border-transparent dark:border-transparent',
+    orange: 'bg-orange-500 hover:bg-orange-600 text-white border border-orange-300 dark:border-orange-300 shadow-md',
+    orange_secondary: 'bg-none text-orange-500 border border-orange-500 dark:border-orange-600 hover:bg-orange-500/10 dark:hover:bg-orange-600/10 shadow-md',
+    orange_soft: 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20 hover:bg-orange-500/20 dark:hover:bg-orange-500/15 shadow-sm',
+    orange_outline: 'bg-transparent text-orange-500 border border-orange-500 hover:bg-orange-500/10 shadow-sm',
+    orange_ghost: 'bg-transparent text-orange-500 hover:bg-orange-500/10 border border-transparent dark:border-transparent',
+    cyan: 'bg-cyan-500 hover:bg-cyan-600 text-white border border-cyan-300 dark:border-cyan-300 shadow-md',
+    cyan_secondary: 'bg-none text-cyan-500 border border-cyan-500 dark:border-cyan-600 hover:bg-cyan-500/10 dark:hover:bg-cyan-600/10 shadow-md',
+    cyan_soft: 'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/20 dark:hover:bg-cyan-500/15 shadow-sm',
+    cyan_outline: 'bg-transparent text-cyan-500 border border-cyan-500 hover:bg-cyan-500/10 shadow-sm',
+    cyan_ghost: 'bg-transparent text-cyan-500 hover:bg-cyan-500/10 border border-transparent dark:border-transparent',
+    purple: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-300 dark:border-purple-300 shadow-md',
+    purple_secondary: 'bg-none text-purple-500 border border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
+    purple_soft: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 hover:bg-purple-500/20 dark:hover:bg-purple-500/15 shadow-sm',
+    purple_outline: 'bg-transparent text-purple-500 border border-purple-500 hover:bg-purple-500/10 shadow-sm',
+    purple_ghost: 'bg-transparent text-purple-500 hover:bg-purple-500/10 border border-transparent dark:border-transparent',
+    teal: 'bg-teal-500 hover:bg-teal-600 text-white border border-teal-300 dark:border-teal-300 shadow-md',
+    teal_secondary: 'bg-none text-teal-500 border border-teal-500 dark:border-teal-600 hover:bg-teal-500/10 dark:hover:bg-teal-600/10 shadow-md',
+    teal_soft: 'bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20 hover:bg-teal-500/20 dark:hover:bg-teal-500/15 shadow-sm',
+    teal_outline: 'bg-transparent text-teal-500 border border-teal-500 hover:bg-teal-500/10 shadow-sm',
+    teal_ghost: 'bg-transparent text-teal-500 hover:bg-teal-500/10 border border-transparent dark:border-transparent',
+    pink: 'bg-pink-500 hover:bg-pink-600 text-white border border-pink-300 dark:border-pink-300 shadow-md',
+    pink_secondary: 'bg-none text-pink-500 border border-pink-500 dark:border-pink-600 hover:bg-pink-500/10 dark:hover:bg-pink-600/10 shadow-md',
+    pink_soft: 'bg-pink-500/10 text-pink-600 dark:text-pink-400 border border-pink-500/20 hover:bg-pink-500/20 dark:hover:bg-pink-500/15 shadow-sm',
+    pink_outline: 'bg-transparent text-pink-500 border border-pink-500 hover:bg-pink-500/10 shadow-sm',
+    pink_ghost: 'bg-transparent text-pink-500 hover:bg-pink-500/10 border border-transparent dark:border-transparent',
+    green: 'bg-green-500 hover:bg-green-600 text-white border border-green-300 dark:border-green-300 shadow-md',
+    green_secondary: 'bg-none text-green-500 border border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
+    green_soft: 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/15 shadow-sm',
+    green_outline: 'bg-transparent text-green-500 border border-green-500 hover:bg-green-500/10 shadow-sm',
+    green_ghost: 'bg-transparent text-green-500 hover:bg-green-500/10 border border-transparent dark:border-transparent',
+    default: 'text-black dark:text-white shadow-md border border-dark-border dark:border-border',
+    default_soft: 'bg-black/5 dark:bg-white/10 text-black dark:text-white border border-dark-border/20 dark:border-border/20 hover:bg-black/10 dark:hover:bg-white/15 shadow-sm',
+    default_outline: 'bg-transparent text-black dark:text-white border border-dark-border dark:border-border hover:bg-black/5 dark:hover:bg-white/10 shadow-sm',
+    default_ghost: 'bg-transparent text-black dark:text-white hover:bg-black/5 dark:hover:bg-white/10 border border-transparent dark:border-transparent',
+};
 class JColorsService {
-    // Variants
+    colorsConfig = inject(TAILJNG_COLORS_CONFIG, { optional: true });
     variants = {
-        primary: 'bg-primary dark:bg-input text-white dark:text-white hover:bg-primary/80 dark:hover:bg-input/60 dark:hover:text-white shadow-md border border-dark-border dark:border-border',
-        primary_soft: 'bg-primary/10 dark:bg-input/15 text-primary dark:text-input hover:bg-primary/20 dark:hover:bg-input/25 border border-primary/20 dark:border-input/30 shadow-sm',
-        primary_outline: 'bg-transparent text-primary dark:text-input border border-primary dark:border-input hover:bg-primary/10 dark:hover:bg-input/15 shadow-sm',
-        primary_ghost: 'bg-transparent text-primary dark:text-input hover:bg-primary/10 dark:hover:bg-input/15 border border-transparent dark:border-transparent',
-        primary_light: 'bg-primary/80 dark:bg-input/80 text-white hover:bg-primary dark:hover:bg-input border border-primary/30 dark:border-input/40 shadow-md',
-        primary_dark: 'bg-primary text-white dark:bg-input hover:bg-primary/80 dark:hover:bg-input/80 border border-dark-border dark:border-border shadow-md',
-        primary_secondary: 'bg-none text-dark-border dark:text-border border border-dark-border dark:border-border hover:bg-dark-border/10 dark:hover:bg-border/10 shadow-md',
-        secondary: 'bg-background dark:bg-dark-background text-black border border-dark-border dark:border-border dark:text-white hover:bg-accent dark:hover:bg-dark-accent/50',
-        secondary_soft: 'bg-accent/40 dark:bg-dark-accent/30 text-black dark:text-white border border-border dark:border-dark-border hover:bg-accent/70 dark:hover:bg-dark-accent/50 shadow-sm',
-        secondary_outline: 'bg-transparent text-black dark:text-white border border-border dark:border-dark-border hover:bg-accent dark:hover:bg-dark-accent/40 shadow-sm',
-        secondary_ghost: 'bg-transparent text-black dark:text-white hover:bg-accent/60 dark:hover:bg-dark-accent/40 border border-transparent dark:border-transparent',
-        secondary_light: 'bg-background/80 dark:bg-dark-background/80 text-black dark:text-white border border-border dark:border-dark-border hover:bg-background dark:hover:bg-dark-background shadow-sm',
-        secondary_dark: 'bg-dark-background text-white border border-dark-border hover:bg-dark-accent/50 shadow-md',
-        success: 'bg-green-500 hover:bg-green-600 text-white border border-green-300 dark:border-green-300 shadow-md',
-        success_secondary: 'bg-none text-green-500 border border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
-        success_soft: 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/15 shadow-sm',
-        success_outline: 'bg-transparent text-green-500 border border-green-500 hover:bg-green-500/10 shadow-sm',
-        success_ghost: 'bg-transparent text-green-500 hover:bg-green-500/10 border border-transparent dark:border-transparent',
-        info: 'bg-blue-500 hover:bg-blue-600 text-white border border-blue-300 dark:border-blue-300 shadow-md',
-        info_secondary: 'bg-none text-blue-500 border border-blue-500 dark:border-blue-600 hover:bg-blue-500/10 dark:hover:bg-blue-600/10 shadow-md',
-        info_soft: 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20 hover:bg-blue-500/20 dark:hover:bg-blue-500/15 shadow-sm',
-        info_outline: 'bg-transparent text-blue-500 border border-blue-500 hover:bg-blue-500/10 shadow-sm',
-        info_ghost: 'bg-transparent text-blue-500 hover:bg-blue-500/10 border border-transparent dark:border-transparent',
-        warning: 'bg-yellow-600 hover:bg-yellow-700 text-white border border-yellow-500 dark:border-yellow-500 shadow-md',
-        warning_secondary: 'bg-none text-yellow-600 border border-yellow-600 dark:border-yellow-700 hover:bg-yellow-600/10 dark:hover:bg-yellow-700/10 shadow-md',
-        warning_soft: 'bg-yellow-600/10 text-yellow-700 dark:text-yellow-400 border border-yellow-600/20 hover:bg-yellow-600/20 dark:hover:bg-yellow-600/15 shadow-sm',
-        warning_outline: 'bg-transparent text-yellow-600 border border-yellow-600 hover:bg-yellow-600/10 shadow-sm',
-        warning_ghost: 'bg-transparent text-yellow-600 hover:bg-yellow-600/10 border border-transparent dark:border-transparent',
-        question: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-400 dark:border-purple-400 shadow-md',
-        question_secondary: 'bg-none text-purple-500 border border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
-        question_soft: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 hover:bg-purple-500/20 dark:hover:bg-purple-500/15 shadow-sm',
-        question_outline: 'bg-transparent text-purple-500 border border-purple-500 hover:bg-purple-500/10 shadow-sm',
-        question_ghost: 'bg-transparent text-purple-500 hover:bg-purple-500/10 border border-transparent dark:border-transparent',
-        error: 'bg-red-500 hover:bg-red-600 text-white border border-red-400 dark:border-red-400 shadow-md',
-        error_secondary: 'bg-none text-red-500 border border-red-500 dark:border-red-600 hover:bg-red-500/10 dark:hover:bg-red-600/10 shadow-md',
-        error_soft: 'bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/20 hover:bg-red-500/20 dark:hover:bg-red-500/15 shadow-sm',
-        error_outline: 'bg-transparent text-red-500 border border-red-500 hover:bg-red-500/10 shadow-sm',
-        error_ghost: 'bg-transparent text-red-500 hover:bg-red-500/10 border border-transparent dark:border-transparent',
-        loading: 'bg-gray-500 hover:bg-gray-600 text-white border border-gray-400 dark:border-gray-400 shadow-md',
-        loading_secondary: 'bg-none text-gray-500 border border-gray-500 dark:border-gray-600 hover:bg-gray-500/10 dark:hover:bg-gray-600/10 shadow-md',
-        loading_soft: 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border border-gray-500/20 hover:bg-gray-500/20 dark:hover:bg-gray-500/15 shadow-sm',
-        loading_outline: 'bg-transparent text-gray-500 border border-gray-500 hover:bg-gray-500/10 shadow-sm',
-        loading_ghost: 'bg-transparent text-gray-500 hover:bg-gray-500/10 border border-transparent dark:border-transparent',
-        orange: 'bg-orange-500 hover:bg-orange-600 text-white border border-orange-300 dark:border-orange-300 shadow-md',
-        orange_secondary: 'bg-none text-orange-500 border border-orange-500 dark:border-orange-600 hover:bg-orange-500/10 dark:hover:bg-orange-600/10 shadow-md',
-        orange_soft: 'bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20 hover:bg-orange-500/20 dark:hover:bg-orange-500/15 shadow-sm',
-        orange_outline: 'bg-transparent text-orange-500 border border-orange-500 hover:bg-orange-500/10 shadow-sm',
-        orange_ghost: 'bg-transparent text-orange-500 hover:bg-orange-500/10 border border-transparent dark:border-transparent',
-        cyan: 'bg-cyan-500 hover:bg-cyan-600 text-white border border-cyan-300 dark:border-cyan-300 shadow-md',
-        cyan_secondary: 'bg-none text-cyan-500 border border-cyan-500 dark:border-cyan-600 hover:bg-cyan-500/10 dark:hover:bg-cyan-600/10 shadow-md',
-        cyan_soft: 'bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 border border-cyan-500/20 hover:bg-cyan-500/20 dark:hover:bg-cyan-500/15 shadow-sm',
-        cyan_outline: 'bg-transparent text-cyan-500 border border-cyan-500 hover:bg-cyan-500/10 shadow-sm',
-        cyan_ghost: 'bg-transparent text-cyan-500 hover:bg-cyan-500/10 border border-transparent dark:border-transparent',
-        purple: 'bg-purple-500 hover:bg-purple-600 text-white border border-purple-300 dark:border-purple-300 shadow-md',
-        purple_secondary: 'bg-none text-purple-500 border border-purple-500 dark:border-purple-600 hover:bg-purple-500/10 dark:hover:bg-purple-600/10 shadow-md',
-        purple_soft: 'bg-purple-500/10 text-purple-600 dark:text-purple-400 border border-purple-500/20 hover:bg-purple-500/20 dark:hover:bg-purple-500/15 shadow-sm',
-        purple_outline: 'bg-transparent text-purple-500 border border-purple-500 hover:bg-purple-500/10 shadow-sm',
-        purple_ghost: 'bg-transparent text-purple-500 hover:bg-purple-500/10 border border-transparent dark:border-transparent',
-        teal: 'bg-teal-500 hover:bg-teal-600 text-white border border-teal-300 dark:border-teal-300 shadow-md',
-        teal_secondary: 'bg-none text-teal-500 border border-teal-500 dark:border-teal-600 hover:bg-teal-500/10 dark:hover:bg-teal-600/10 shadow-md',
-        teal_soft: 'bg-teal-500/10 text-teal-600 dark:text-teal-400 border border-teal-500/20 hover:bg-teal-500/20 dark:hover:bg-teal-500/15 shadow-sm',
-        teal_outline: 'bg-transparent text-teal-500 border border-teal-500 hover:bg-teal-500/10 shadow-sm',
-        teal_ghost: 'bg-transparent text-teal-500 hover:bg-teal-500/10 border border-transparent dark:border-transparent',
-        pink: 'bg-pink-500 hover:bg-pink-600 text-white border border-pink-300 dark:border-pink-300 shadow-md',
-        pink_secondary: 'bg-none text-pink-500 border border-pink-500 dark:border-pink-600 hover:bg-pink-500/10 dark:hover:bg-pink-600/10 shadow-md',
-        pink_soft: 'bg-pink-500/10 text-pink-600 dark:text-pink-400 border border-pink-500/20 hover:bg-pink-500/20 dark:hover:bg-pink-500/15 shadow-sm',
-        pink_outline: 'bg-transparent text-pink-500 border border-pink-500 hover:bg-pink-500/10 shadow-sm',
-        pink_ghost: 'bg-transparent text-pink-500 hover:bg-pink-500/10 border border-transparent dark:border-transparent',
-        green: 'bg-green-500 hover:bg-green-600 text-white border border-green-300 dark:border-green-300 shadow-md',
-        green_secondary: 'bg-none text-green-500 border border-green-500 dark:border-green-600 hover:bg-green-500/10 dark:hover:bg-green-600/10 shadow-md',
-        green_soft: 'bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20 hover:bg-green-500/20 dark:hover:bg-green-500/15 shadow-sm',
-        green_outline: 'bg-transparent text-green-500 border border-green-500 hover:bg-green-500/10 shadow-sm',
-        green_ghost: 'bg-transparent text-green-500 hover:bg-green-500/10 border border-transparent dark:border-transparent',
-        default: 'text-black dark:text-white shadow-md border border-dark-border dark:border-border',
-        default_soft: 'bg-black/5 dark:bg-white/10 text-black dark:text-white border border-dark-border/20 dark:border-border/20 hover:bg-black/10 dark:hover:bg-white/15 shadow-sm',
-        default_outline: 'bg-transparent text-black dark:text-white border border-dark-border dark:border-border hover:bg-black/5 dark:hover:bg-white/10 shadow-sm',
-        default_ghost: 'bg-transparent text-black dark:text-white hover:bg-black/5 dark:hover:bg-white/10 border border-transparent dark:border-transparent',
+        ...JCOLORS_DEFAULT_VARIANTS,
+        ...(this.colorsConfig?.variants ?? {}),
     };
     // Function to get variant with optional border and shadow
     getVariantClass(type, hasShadow = true, hasBorder = true) {
@@ -2290,5 +2296,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { JAlertDialogService, JAlertToastService, JCalendarService, JColorsService, JConverterCrudService, JDialogShared, JErrorHandlerHttpService, JExcelFilterService, JExcelService, JFileHttpService, JFormShared, JGenericCrudService, JIconsService, JParamsHttpService, JThemeService, JTransformService, JUploadFilterService, TAILJNG_CONFIG };
+export { JAlertDialogService, JAlertToastService, JCOLORS_DEFAULT_VARIANTS, JCalendarService, JColorsService, JConverterCrudService, JDialogShared, JErrorHandlerHttpService, JExcelFilterService, JExcelService, JFileHttpService, JFormShared, JGenericCrudService, JIconsService, JParamsHttpService, JThemeService, JTransformService, JUploadFilterService, TAILJNG_COLORS_CONFIG, TAILJNG_CONFIG };
 //# sourceMappingURL=tailjng.mjs.map