Theming

Sistema Size

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

Il sistema di dimensioni controlla padding, font size e dimensioni delle icone in tutti i componenti interattivi.

type Size = 'small' | 'medium' | 'large';
type SizeExtended = Size | 'xlarge';
type SizeTouch = Size | 'touch';

Size

Tre livelli standard disponibili nella maggior parte dei componenti.

small

Dimensione ridotta per UI compatte: toolbar, tabelle dense, sidebar con poco spazio.

Valori CSS applicati (Button):

.hs-button-sm {
  @apply py-2 px-2;
}

.hs-button-loading-spinner-sm {
  width: 0.75rem;   /* 12px */
  height: 0.75rem;
  border: 3px solid currentColor;
}

Valori CSS applicati (Badge):

.hs-badge.size-small {
  font-size: 0.75rem;   /* 12px */
  padding: 0.25rem 0.5rem;
}

Valori CSS applicati (InputText):

.hs-inputtext-size-small {
  @apply px-3 py-2 text-sm;
}

medium

Dimensione standard, usata come default in quasi tutti i componenti.

Valori CSS applicati (Button):

.hs-button-md {
  @apply py-3 px-3;
}

.hs-button-loading-spinner-md {
  width: 1rem;    /* 16px */
  height: 1rem;
}

Valori CSS applicati (Badge):

.hs-badge.size-medium {
  font-size: 0.875rem;   /* 14px */
  padding: 0.375rem 0.625rem;
}

Valori CSS applicati (InputText):

.hs-inputtext-size-medium {
  @apply px-4 py-2.5 sm:py-3 text-sm sm:text-sm;
}

large

Dimensione maggiore per enfasi visiva: CTA prominenti, form a singolo campo, hero sections.

Valori CSS applicati (Button):

.hs-button-lg {
  @apply py-4 px-4;
}

.hs-button-loading-spinner-lg {
  width: 1.25rem;   /* 20px */
  height: 1.25rem;
}

Valori CSS applicati (Badge):

.hs-badge.size-large {
  font-size: 1rem;   /* 16px */
  padding: 0.5rem 0.75rem;
}

Valori CSS applicati (InputText):

.hs-inputtext-size-large {
  @apply px-4 py-3.5 text-base;
}

SizeExtended

Aggiunge xlarge a Size. Usata da componenti visuali che necessitano di un quarto livello di dimensione.

type SizeExtended = 'small' | 'medium' | 'large' | 'xlarge';

xlarge

Dimensione extra-grande. Tipicamente usata per:

Avatar di profilo prominenti
Icone decorative
Elementi display/presentazionali (non form control)

SizeTouch

Aggiunge touch a Size. Non è una quarta taglia tipografica: porta l'area interattiva ad almeno 56×56 dp lasciando il testo alla scala medium.

type SizeTouch = 'small' | 'medium' | 'large' | 'touch';

touch

Disponibile su Button, InputText, Select, Checkbox e RadioButton.

Valori CSS applicati:

.hs-button-touch {
  @apply px-6;
  min-block-size: var(--pz-touch-target);   /* 3.5rem = 56 dp */
  min-inline-size: var(--pz-touch-target);
}

.hs-inputtext-size-touch {
  @apply px-4 text-sm;
  min-block-size: var(--pz-touch-target);
}

Per applicare il target a tutti i controlli di un sottoalbero senza toccare i singoli componenti, usare il preset di tema mobile: vedi Target Touch (56 dp).

Riepilogo dimensioni per componente

Componente	Prop	Tipo	Default
`Button`	`size`	`SizeTouch`	`medium`
`Badge`	`size`	`Size`	`medium`
`Tag`	`size`	`Size`	`medium`
`InputText`	`size`	`SizeTouch`	`medium`
`Select`	`size`	`SizeTouch`	`medium`
`Checkbox`	`size`	`SizeTouch`	`medium`
`RadioButton`	`size`	`SizeTouch`	`medium`
`MultiSelect`	`size`	`Size`	`medium`
`Tabs`	`size`	`Size`	`medium`
`Stepper`	`size`	`Size`	`medium`
`Avatar`	`size`	`SizeExtended`	`medium`

Icone per size

Le dimensioni delle icone variano con il size del componente. Pattern generale:

/* small: icona 12px */
.hs-badge.size-small .hs-badge-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* medium e large: icona 16px */
.hs-badge.size-medium .hs-badge-icon,
.hs-badge.size-large .hs-badge-icon {
  width: 1rem;
  height: 1rem;
}

Utilizzo

<template>
  <!-- Pulsante piccolo in toolbar -->
  <Button label="Salva" size="small" severity="primary" />

  <!-- Input standard -->
  <InputText label="Nome" size="medium" />

  <!-- CTA prominente -->
  <Button label="Inizia ora" size="large" severity="primary" fluid />

  <!-- Avatar grande in profilo -->
  <Avatar :image="userAvatar" size="xlarge" />

  <!-- Azione primaria su app mobile: area di tap da 56 dp -->
  <Button label="Avvia lavorazione" size="touch" severity="primary" />
</template>

Sistema Severity

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

Varianti Visive

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