tailjng 0.1.1 → 0.1.3

package/README.md

@@ -43,7 +43,8 @@ El CLI instala **dependencias transitivas** automáticamente (ej. `button` → `
 
 - 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` (el CLI los instala con `init:app` si faltan)
+-{
+- 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
 
 ---
@@ -133,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

@@ -23,6 +23,10 @@ const {
   resolveRuntimePackages,
   resolveDevPackages,
   hasTailwindSetup,
+  getTailjngSafelistCssImport,
+  ensureTailjngSafelistImport,
+  alignAngularAnimationsInPackageJson,
+  resolveStyleFilePath,
   fileExists,
 } = require('../settings/project-utils');
 
@@ -32,6 +36,7 @@ const RUNTIME_PACKAGES = {
   'date-fns': '^4.1.0',
   'exceljs': '^4.4.0',
   'xlsx': '^0.18.5',
+  'file-saver': '^2.0.5',
 };
 
 const DEV_PACKAGES = {
@@ -92,12 +97,7 @@ function installPackages(workspaceRoot, packages, isDev = false) {
     });
   };
 
-  try {
-    run();
-  } catch {
-    console.log(`${COLORS.yellow}[tailjng CLI] Retrying with --legacy-peer-deps...${COLORS.reset}`);
-    run('--legacy-peer-deps');
-  }
+  run('--legacy-peer-deps');
 }
 
 function resolveTargetPath(workspaceRoot, appProject, relativePath, appRootRelative = false) {
@@ -176,15 +176,22 @@ async function runInitApp() {
     console.log(`${COLORS.yellow}Install it first: npm install tailjng${COLORS.reset}`);
   }
 
+  // Siempre alinear @angular/animations con la versión real de @angular/core del proyecto
+  const animationsAligned = alignAngularAnimationsInPackageJson(workspaceRoot);
+  if (animationsAligned.changed) {
+    console.log(`${COLORS.cyan}[tailjng CLI] Aligned @angular/animations → ${animationsAligned.version} (same as @angular/core)${COLORS.reset}`);
+    Object.assign(packageJson, readJson(packageJsonPath));
+  }
+
   if (installDeps) {
     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 runtimePackages = resolveRuntimePackages(packageJson, RUNTIME_PACKAGES, workspaceRoot);
     const devPackages = resolveDevPackages(packageJson, DEV_PACKAGES, tailwindReady);
-    const missingRuntime = Object.fromEntries(getMissingPackages(packageJson, runtimePackages));
-    const missingDev = Object.fromEntries(getMissingPackages(packageJson, devPackages));
+    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}`);
@@ -195,6 +202,8 @@ async function runInitApp() {
   }
 
   const hasAppConfig = fileExists(appConfigPath);
+  const safelistImport = getTailjngSafelistCssImport(workspaceRoot, primaryStylePath, selectedApp);
+  const primaryStyleFullPath = resolveStyleFilePath(workspaceRoot, primaryStylePath, selectedApp);
   const files = buildInitFiles({
     styleLanguage,
     primaryStylePath,
@@ -203,6 +212,7 @@ async function runInitApp() {
     componentsPath,
     overwrite,
     hasAppConfig,
+    safelistImport,
   });
 
   let created = 0;
@@ -251,6 +261,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);
@@ -272,8 +287,8 @@ async function runInitApp() {
   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,24 +228,72 @@ 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) {
+function getInstalledPackageVersion(workspaceRoot, name) {
+  const pkgPath = path.join(workspaceRoot, 'node_modules', ...name.split('/'), 'package.json');
+  if (!fs.existsSync(pkgPath)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(pkgPath, 'utf8')).version;
+  } catch {
+    return null;
+  }
+}
+
+function resolveAngularAnimationsSpec(packageJson, workspaceRoot) {
+  const deps = getMergedDependencies(packageJson);
+  const coreInstalled = workspaceRoot ? getInstalledPackageVersion(workspaceRoot, '@angular/core') : null;
+  if (coreInstalled) return `^${coreInstalled}`;
+  if (deps['@angular/core']) return deps['@angular/core'];
+  return '^19.2.0';
+}
+
+/** Corrige @angular/animations para usar la misma versión que @angular/core del proyecto. */
+function alignAngularAnimationsInPackageJson(workspaceRoot) {
+  const pkgPath = path.join(workspaceRoot, 'package.json');
+  if (!fs.existsSync(pkgPath)) return { changed: false };
+
+  const pkg = readJson(pkgPath);
+  const deps = pkg.dependencies || {};
+  const coreInstalled = getInstalledPackageVersion(workspaceRoot, '@angular/core');
+  const coreSpec = deps['@angular/core'];
+
+  // Preferir versión instalada (ej. 19.2.25); si no, la misma entrada que core en package.json
+  const aligned = coreInstalled ? `^${coreInstalled}` : coreSpec;
+  if (!aligned) return { changed: false };
+
+  if (!deps['@angular/animations']) return { changed: false };
+  if (deps['@angular/animations'] === aligned) return { changed: false };
+
+  deps['@angular/animations'] = aligned;
+  pkg.dependencies = deps;
+  writeJson(pkgPath, pkg);
+  return { changed: true, version: aligned };
+}
+
+/** Alinea @angular/animations con la versión instalada de @angular/core (evita ERESOLVE 19.2.0 vs 19.2.25). */
+function resolveRuntimePackages(packageJson, basePackages, workspaceRoot = null) {
   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'];
+  } else if (deps['@angular/core'] || (workspaceRoot && getInstalledPackageVersion(workspaceRoot, '@angular/core'))) {
+    packages['@angular/animations'] = resolveAngularAnimationsSpec(packageJson, workspaceRoot);
   }
 
   return packages;
@@ -278,6 +358,9 @@ module.exports = {
   getPrimaryStyleEntry,
   writeFileSafe,
   ensureTailjngStylesInAngularJson,
+  resolveStyleFilePath,
+  getTailjngSafelistCssImport,
+  ensureTailjngSafelistImport,
   patchIndexHtml,
   patchAppConfig,
   patchAppComponentForAlerts,
@@ -285,6 +368,7 @@ module.exports = {
   getMergedDependencies,
   resolveRuntimePackages,
   resolveDevPackages,
+  alignAngularAnimationsInPackageJson,
   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