@zonikgraf/tpp-theme-ui

Paquete centralizado de tokens de diseño, estilos y configuración de Tailwind CSS y PrimeNG para optimizar el mantenimiento y consistencia visual en todos los microfrontends del ecosistema TPP.

Instalación

npm install @zonikgraf/tpp-theme-ui

Guía de Migración

1. Actualizar styles.css

Elimina todos los estilos personalizados del archivo src/styles.css y reemplázalos con:

@import '@tabler/icons-webfont/dist/tabler-icons.min.css';

@import '@zonikgraf/tpp-theme-ui/tpp.css';

@layer tailwind-base, primeng, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

2. Actualizar tailwind.config.js

Elimina toda la sección theme.extend.colors y las configuraciones personalizadas de keyframes/animaciones.

Agrega el preset del paquete. Tu archivo debe quedar así:

/** @type {import('tailwindcss').Config} */

import PrimeUI from 'tailwindcss-primeui';

module.exports = {
  presets: [
    require('@zonikgraf/tpp-theme-ui/tailwind')
  ],
  content: [
    "./src/**/*.{html,ts,tsx,js,jsx}",
    "./src/**/*.component.html",
    "./src/**/*.component.ts",
  ],
  plugins: [PrimeUI],
}

3. Eliminar archivo de tema personalizado

Elimina el archivo src/app/theme.ts (ya no es necesario).

4. Actualizar app.config.ts

Importa la configuración del tema:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeng/themes/aura';
import { definePreset } from '@primeng/themes';

// Importa la configuración del tema TPP
import { themeTppConfig } from '@zonikgraf/tpp-theme-ui/primeng';

import { routes } from './app.routes';

// Define el tema con la configuración TPP
const themeTpp = definePreset(Aura, themeTppConfig);

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
    providePrimeNG({
      theme: {
        preset: themeTpp,
        options: {
          darkModeSelector: false || 'none',
        }
      }
    })
  ]
};

Contenido del Paquete

Estilos TPP

import '@zonikgraf/tpp-theme-ui/tpp.css';

Incluye todos los estilos personalizados de TPP: tokens, componentes, y utilidades globales.

Preset de Tailwind

presets: [require('@zonikgraf/tpp-theme-ui/tailwind')]

Configuración completa de Tailwind con:

• Paleta de colores TPP (primary, surface, red, green, yellow)
• Animaciones personalizadas (fadeInUp)
• Extensiones de tema

Tema de PrimeNG

import { themeTppConfig } from '@zonikgraf/tpp-theme-ui/primeng';

Configuración del tema PrimeNG con tokens de diseño TPP para componentes como buttons, inputs, dialogs, tabs, etc.

Paleta de Colores Disponibles

• tpp-primary: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
• tpp-surface: 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
• red: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
• green: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
• yellow: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900

Uso en Tailwind

<div class="bg-tpp-primary-500 text-white">
  Botón primario
</div>

<div class="bg-tpp-surface-50 text-tpp-surface-900">
  Superficie clara
</div>

Actualización del Paquete

Para actualizar a la última versión:

npm update @zonikgraf/tpp-theme-ui

Notas Importantes

• Asegúrate de eliminar cualquier configuración de tema duplicada en tu proyecto
• Los estilos globales ahora se gestionan centralmente
• Cualquier personalización adicional debe hacerse después de importar los estilos del paquete
• Si necesitas sobrescribir estilos, usa capas de Tailwind o especificidad CSS

Soporte

Para reportar problemas o solicitar nuevas características, contacta al equipo de desarrollo de TPP.

Licencia

MIT