@pzeta/vue-components
Theming

Varianti Visive

Varianti visive — solid, outlined, subtle, dot, filled, borderless.

Le varianti visive determinano il trattamento di sfondo, bordo e colore testo di un componente. Diversi componenti supportano insiemi differenti di varianti.

Varianti Button (variant implicita nella prop text/outlined)

Il componente Button usa le seguenti varianti tramite props dedicate:

solid (default)

Sfondo pieno con colore della severity. Nessuna prop aggiuntiva necessaria.

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

Esempio:

<Button label="Salva" severity="primary" />

outlined

Bordo colorato, sfondo trasparente. Attivata con la prop outlined (o classe CSS hs-button-outlined-{severity}).

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

Esempio:

<Button label="Annulla" severity="secondary" outlined />

text

Solo testo colorato, nessun bordo né sfondo. Attivata con la prop text (o classe CSS hs-button-text-{severity}).

.hs-button-text-primary {
  @apply text-primary-600 hover:bg-primary-50 bg-transparent border-transparent shadow-none;
  @apply dark:text-primary-400 dark:hover:bg-primary-900/20;
}

Esempio:

<Button label="Dettagli" severity="primary" text />

link

Aspetto di link testuale con underline al hover.

.hs-button-link {
  @apply bg-transparent text-primary-600 hover:text-primary-800 shadow-none border-transparent underline-offset-4 hover:underline;
}

Varianti Badge/Tag (variant)

type BadgeVariant = 'solid' | 'outlined' | 'subtle' | 'dot';

solid

Sfondo pieno, testo bianco. Massima visibilità.

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

outlined

Bordo colorato, sfondo trasparente, testo colorato.

.hs-badge.severity-primary.variant-outlined {
  @apply border border-primary-600 text-primary-600 bg-transparent;
}

subtle

Sfondo tinto leggero (shade 100), testo scuro della stessa palette. Meno invasivo del solid, più leggibile dell'outlined.

.hs-badge.severity-primary.variant-subtle {
  @apply bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300;
}

dot

Pallino colorato senza testo. Dimensione fissa 8×8px (0.5rem). Utile per indicatori di stato in linea.

.hs-badge.variant-dot {
  border-radius: 9999px;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
}

.hs-badge.severity-primary.variant-dot {
  @apply bg-primary-600;
}

Varianti Form Control (variant)

I form control (InputText, Select, MultiSelect, ecc.) usano FormVariant:

type FormVariant = 'outlined' | 'filled';

outlined (default)

Bordo visibile, sfondo trasparente. Stile form classico.

.hs-inputtext-variant-outlined {
  @apply border-gray-300 bg-transparent text-gray-900;
  @apply dark:border-gray-600 dark:bg-transparent dark:text-gray-100;
}

.hs-inputtext-variant-outlined:focus {
  @apply border-primary-500 ring-1 ring-primary-500/20;
}

filled

Sfondo riempito con --color-surface-secondary, bordo sottile. Stile form moderno (Material Design-like).

.hs-inputtext-variant-filled {
  @apply border-gray-200 text-gray-900;
  @apply bg-[var(--color-surface-secondary)];
  @apply dark:border-gray-700 dark:text-gray-100;
}

.hs-inputtext-variant-filled:focus {
  @apply border-primary-500 ring-1 ring-primary-500/20;
}

Riepilogo varianti per componente

ComponenteVarianti supportateProp
Buttonsolid, outlined, text, linkoutlined, text, link (bool props)
Badgesolid, outlined, subtle, dotvariant
Tagsolid, outlined, subtlevariant
InputTextoutlined, filledvariant
InputNumberoutlined, filledvariant
Selectoutlined, filledvariant
MultiSelectoutlined, filledvariant
Textareaoutlined, filledvariant
InputMaskoutlined, filledvariant

Modificatori aggiuntivi

Oltre alle varianti principali, alcuni componenti supportano modificatori strutturali:

raised (Button)

Aggiunge un'ombra al pulsante, elevandolo visivamente. Compatibile con qualsiasi variante.

.hs-button-raised {
  @apply !shadow-md hover:!shadow-lg;
}

rounded

Bordi completamente arrotondati (pill shape). Disponibile su Button, Badge, InputText tramite la prop rounded.

.hs-button-rounded { @apply rounded-full; }
.hs-badge.rounded { border-radius: 9999px; }
.hs-inputtext-rounded { @apply rounded-full; }

fluid

Occupa tutta la larghezza del contenitore. Disponibile tramite la prop fluid su Button e form control.

Sistema Size

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

Dark Mode

Configurazione dark mode con Tailwind 4 e CSS tokens.