Theming

Sistema Severity

Sistema di severity — primary, secondary, success, info, warn, danger, contrast, help.

Il sistema di severity mappa ogni valore su una palette di colori completa (scala 50–950). La prop severity è disponibile su Button, Badge, Tag, Toast, Message, ProgressBar e molti altri componenti.

type Severity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'contrast' | 'help';

Primary

Colore base: Blu (blue-* Tailwind)

Azione principale dell'interfaccia. Usato per il pulsante di conferma, link principali, highlight di selezione attiva.

CSS Property	Valore	Uso tipico
`--color-primary-500`	`#3b82f6`	Colore base
`--color-primary-600`	`#2563eb`	Pulsanti, bordi focus
`--color-primary-700`	`#1d4ed8`	Hover pulsanti
`--color-primary-50`	`#eff6ff`	Sfondo subtle/tinted
`--color-primary-100`	`#dbeafe`	Badge subtle background

Classi CSS componenti:

/* Button solid */
.hs-button-primary { @apply bg-primary-600 text-white hover:bg-primary-700; }

/* Button outlined */
.hs-button-outlined-primary { @apply border border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white; }

/* Badge solid */
.hs-badge.severity-primary.variant-solid { @apply bg-primary-600 text-white; }

/* Badge subtle */
.hs-badge.severity-primary.variant-subtle { @apply bg-primary-100 text-primary-800; }

Secondary

Colore base: Slate (slate-* Tailwind)

Azione secondaria o alternativa. Colore neutro-grigio per elementi che non devono competere con il primario.

CSS Property	Valore
`--color-secondary-500`	`#64748b`
`--color-secondary-600`	`#475569`
`--color-secondary-700`	`#334155`

Classi CSS componenti:

.hs-button-secondary { @apply bg-secondary-600 text-white hover:bg-secondary-700; }
.hs-badge.severity-secondary.variant-solid { @apply bg-secondary-600 text-white; }
.hs-badge.severity-secondary.variant-subtle { @apply bg-secondary-100 text-secondary-800; }

Success

Colore base: Verde (green-* Tailwind)

Stato di successo, completamento positivo, validazione superata.

CSS Property	Valore
`--color-success-500`	`#22c55e`
`--color-success-600`	`#16a34a`
`--color-success-700`	`#15803d`

Classi CSS componenti:

.hs-button-success { @apply bg-success-600 text-white hover:bg-success-700; }
.hs-badge.severity-success.variant-solid { @apply bg-success-600 text-white; }
.hs-badge.severity-success.variant-subtle { @apply bg-success-100 text-success-700; }

Info

Colore base: Cyan (cyan-* Tailwind)

Informazione neutra, notifica informativa, stato di caricamento completato senza errori.

CSS Property	Valore
`--color-info-500`	`#06b6d4`
`--color-info-600`	`#0891b2`
`--color-info-700`	`#0e7490`

Classi CSS componenti:

.hs-button-info { @apply bg-info-600 text-white hover:bg-info-700; }
.hs-badge.severity-info.variant-solid { @apply bg-info-600 text-white; }
.hs-badge.severity-info.variant-subtle { @apply bg-info-100 text-info-700; }

Warn

Colore base: Amber (amber-* Tailwind)

Avvertimento, attenzione richiesta. Non è un errore, ma richiede l'attenzione dell'utente.

CSS Property	Valore
`--color-warn-500`	`#f59e0b`
`--color-warn-600`	`#d97706`
`--color-warn-700`	`#b45309`

Classi CSS componenti:

.hs-button-warn { @apply bg-warn-600 text-white hover:bg-warn-700; }
.hs-badge.severity-warn.variant-solid { @apply bg-warn-600 text-white; }
.hs-badge.severity-warn.variant-subtle { @apply bg-warn-100 text-warn-700; }

Danger

Colore base: Rosso (red-* Tailwind)

Errore, azione distruttiva irreversibile, validazione fallita. Usato per messaggi di errore, pulsanti di eliminazione, campi con input non valido.

CSS Property	Valore
`--color-danger-500`	`#ef4444`
`--color-danger-600`	`#dc2626`
`--color-danger-700`	`#b91c1c`

Classi CSS componenti:

.hs-button-danger { @apply bg-danger-600 text-white hover:bg-danger-700; }
.hs-badge.severity-danger.variant-solid { @apply bg-danger-600 text-white; }
.hs-badge.severity-danger.variant-subtle { @apply bg-danger-100 text-danger-700; }

/* InputText error state usa danger internamente */
.hs-inputtext-error { @apply !border-danger-300 focus:!border-danger-500; }

Contrast

Colore base: Zinc (zinc-* Tailwind)

Alto contrasto. In light mode appare scuro (zinc-800), in dark mode si inverte automaticamente su tono chiaro (zinc-200). Utile per elementi che devono risaltare in entrambi i temi.

CSS Property	Valore
`--color-contrast-200`	`#e4e4e7`
`--color-contrast-800`	`#27272a`
`--color-contrast-900`	`#18181b`

Classi CSS componenti:

/* Inversione automatica dark/light */
.hs-button-contrast {
  @apply bg-contrast-800 text-white hover:bg-contrast-900;
  @apply dark:bg-contrast-200 dark:text-contrast-900;
}

.hs-badge.severity-contrast.variant-solid {
  @apply bg-contrast-800 text-white dark:bg-contrast-200 dark:text-contrast-900;
}

Help

Colore base: Viola (purple-* Tailwind)

Aiuto, suggerimento, tooltip avanzato. Usato per distinguere elementi di supporto educativo dal flusso principale.

CSS Property	Valore
`--color-help-500`	`#a855f7`
`--color-help-600`	`#9333ea`
`--color-help-700`	`#7e22ce`

Classi CSS componenti:

.hs-button-help { @apply bg-help-600 text-white hover:bg-help-700; }
.hs-badge.severity-help.variant-solid { @apply bg-help-600 text-white; }
.hs-badge.severity-help.variant-subtle { @apply bg-help-100 text-help-700; }

Componenti che supportano severity

Componente	Prop	Note
`Button`	`severity`	Tutti i valori supportati
`Badge`	`severity`	Tutti i valori supportati
`Tag`	`severity`	Tutti i valori supportati
`Toast`	`severity`	Usato per tipo notifica
`Message`	`severity`	Usato per tipo messaggio
`ProgressBar`	`severity`	Colore della barra
`InputText`	`severity`	Solo per il colore del ring al focus
`ConfirmDialog`	`severity`	Colore dell'header
`Stepper`	`severity`	Colore degli step
`Tabs`	`severity`	Colore delle tab attive

CSS Custom Properties

Lista completa delle CSS custom properties di @pzeta/vue-components.

Sistema Size

Sistema di dimensioni — small, medium, large, xlarge.