Overview Temi
@pzeta/vue-components usa Tailwind CSS v4 con un sistema di temi basato su CSS custom properties (@theme). Non richiede un file di configurazione tailwind.config.js separato: tutto è definito nel CSS tramite la direttiva @theme.
Architettura
Il file principale src/assets/main.css importa Tailwind e definisce il tema:
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@layer tailwind-base, tailwind-utilities;
CSS Layers
| Layer | Descrizione |
|---|---|
tailwind-base | Reset e stili base di Tailwind (normalizzazione, box-sizing, ecc.) |
tailwind-utilities | Le classi utility di Tailwind (bg-, text-, p-*, ecc.) |
base (inline) | Stili base per le famiglie di icone (Lucide, FontAwesome, PrimeIcons) |
I component styles sono importati inline senza layer esplicito, permettendo l'override con le utility Tailwind dove necessario.
Sistema di Token
Le custom properties sono definite nel blocco @theme e diventano automaticamente disponibili come classi Tailwind. Ad esempio --color-primary-500 genera le utility bg-primary-500, text-primary-500, border-primary-500, ecc.
Gruppi di token
| Gruppo | Prefisso CSS | Classi Tailwind |
|---|---|---|
| Severity colors | --color-{severity}-{shade} | bg-primary-500, text-danger-600, ecc. |
| Surface colors | --color-surface, --color-background, ecc. | bg-[var(--color-surface)] |
| Text colors | --color-text, --color-label, ecc. | text-[var(--color-label)] |
| ScrollPanel | --scrollpanel-* | Usate solo internamente |
Dark Mode
Il dark mode è attivato tramite la classe CSS .dark su un elemento antenato (tipicamente <html> o <body>):
<html class="dark">
La variante dark è configurata con:
@custom-variant dark (&:where(.dark, .dark *));
Questo significa che qualsiasi elemento discendente di un elemento con classe .dark riceve gli stili dark mode. Le classi Tailwind con prefisso dark: funzionano di conseguenza.
Nel CSS dei componenti le override dark vengono gestite con:
- Classi Tailwind
dark:bg-*,dark:text-*, ecc. - Override dirette delle CSS variables nel selettore
.dark { ... }per i token globali
Component Styles
Ogni componente ha il proprio file CSS in src/assets/components/ importato da main.css. I componenti usano classi con prefisso hs- (Headless Styled):
hs-button, hs-button-sm, hs-button-primary, hs-button-outlined-primary, ...
hs-badge, hs-badge.severity-primary.variant-solid, ...
hs-inputtext, hs-inputtext-variant-outlined, ...
Tutte le classi sono composte tramite @apply di Tailwind con le utility del tema, garantendo la coerenza con le CSS variables definite.
Personalizzazione
Per personalizzare il tema in un progetto consumer, sovrascrivere le CSS custom properties dopo l'import del CSS della libreria:
@import '@pzeta/vue-components/style.css';
/* Override del colore primario */
@theme {
--color-primary-500: #6366f1; /* Indigo invece di Blue */
--color-primary-600: #4f46e5;
--color-primary-700: #4338ca;
}
/* Override surface per dark mode */
.dark {
--color-surface: #0d1117;
--color-background: #010409;
}