CLSizes class

Design tokens del DS Skillera.

Scala derivata per un admin tool professionale (HR / giuridico / presenze): griglia 4, spaziature on-grid, radii leggermente più morbidi di shadcn per bilanciare la densità dei dati con un tono umanista (Inter).

I nomi canonici (gap*, page*, radius*) sono intent-revealing: scegli il token in base all'uso, non al valore numerico. I nomi storici (sm, small, borderRadius, padding, ...) sono mantenuti come alias puri — stesso valore, nessun warning — per non rompere codice esistente o consumer del package.

Constructors

CLSizes()

Properties

hashCode → int

The hash code for this object.

no setter, inherited

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

Methods

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toString() → String

A string representation of this object.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited

Constants

avatarSizeLarge → const double

40px — avatar large. Usato per: avatar in profilo utente, header di pagina, dialog di dettaglio persona.

avatarSizeMedium → const double

36px — avatar medium. Usato per: avatar in header di card, voci di menu utente, row di liste standard.

avatarSizeSmall → const double

32px — avatar small. Usato per: avatar in liste dense, leading di chip utente, indicatori di presenza in tabelle.

borderRadius → const double

buttonHeightCompact → const double

32px — bottone compatto (Foundation). Usato per: CLButton size compact, azioni secondarie in toolbar dense, bottoni inline in tabelle.

buttonHeightDefault → const double

40px — bottone default (Foundation). Usato per: CLButton size default, azioni primarie standard di pagina, bottoni in form.

buttonHeightLarge → const double

48px — bottone large (Foundation). Usato per: CLButton size large, CTA hero, azioni primarie in modali di onboarding.

gap2Xl → const double

24px — separatore tra blocchi. Usato per: gap tra sezioni adiacenti di pagina, margine tra gruppi semanticamente distinti (es. "dati anagrafici" ↔ "dati contrattuali").

gap3Xl → const double

32px — ritmo di pagina. Usato per: spazio verticale tra blocchi maggiori di pagina (es. header

gap4Xl → const double

48px — respiro di pagina. Usato per: margine superiore/inferiore di hero, spazio d'inizio e fine delle pagine di landing / dashboard principali.

gapLg → const double

16px — gap standard. Usato per: padding interno di card piccole, gap tra widget sulla stessa sezione, distanza icona↔label nei bottoni, size icone compatte.

gapMd → const double

12px — gap medio. Usato per: gap verticale tra campi form vicini, padding interno di card dense, spaziatura tra sub-voci in un menu.

gapSm → const double

8px — gap denso. Usato per: padding interno chip/badge, gap tra colonne di tabella dense, spaziatura voci in liste compatte, distanza tra avatar e label in row.

gapXl → const double

20px — gap generoso. Usato per: padding interno di card/pannelli, spazio tra header di sezione e contenuto, size icone desktop.

gapXs → const double

4px — gap atomico. Usato per: separazione icona↔pallino stato, stack molto serrati dentro chip, distanza verticale tra label micro e valore in badge.

headerOffset → const double

iconSizeCompact → const double

16px — icona compatta (Foundation). Usato per: icone dentro chip/badge, icone in tabelle dense, leading di liste compatte.

iconSizeDefault → const double

20px — icona standard (Foundation). Usato per: icone di bottoni default, icone in header di card, leading nelle voci di menu.

iconSizeLarge → const double

24px — icona large (Foundation). Usato per: icone hero, azioni primarie evidenziate, icone in toolbar principali.

inputHeight → const double

40px — altezza standard input. Usato per: CLTextField, CLDropdown, CLDatePicker — allineata a buttonHeightDefault per row form coerenti.

inputHeightCompact → const double

32px — altezza input compatto (Foundation). Usato per: CLTextField/CLDropdown con isCompact: true — allineata a buttonHeightCompact per toolbar e row dense coerenti.

large → const double

lg → const double

md → const double

medium → const double

opacity → const double

Valore di opacity generico (retaggio: non è una dimensione).

padding → const double

pagePadX → const double

20px — padding orizzontale delle pagine. Usato per: SliverPadding delle pagine shell, contenuto principale sotto il layout desktop/mobile. Valore on-grid (prima 18: fuori-griglia).

pageTop → const double

80px — offset top per contenuto scrollabile. Usato per: distanza dal bordo superiore quando la pagina ha un header fisso (+ page-name container = ~135px totali).

radiusBubble → const double

36px — bolle shell (header/menu/contenuto/AI). Pari a metà altezza della bolla header → estremità tonde (capsula); raggio unico per coerenza.

radiusCard → const double

18px — card e pannelli. Usato per: CLSectionCard, card del dashboard, pannelli di sezione, CLPageHeader. Abbastanza morbido da dare sensazione di "contenitore" e non di "finestra tecnica". surface + 4 (concentrico).

radiusChip → const double

6px — chip, badge, tag densi. Usato per: status badge, tag di filtri, pill di conteggio, celle di tabella con sfondo tinto. Scala ~proporzionale al control (resta tight per non confondersi con un bottone).

radiusControl → const double

12px — controlli interattivi. Usato per: CLButton e varianti (filled/outline/ghost/soft), CLTextField, CLDropdown, CLDatePicker. Tono morbido/amichevole per uso quotidiano. NB: i bottoni isolati di chrome (back, switch tenant, footer menu) restano radiusPill — NON usano questo token.

radiusLg → const double

radiusModal → const double

28px — superfici modali (Foundation). Usato per: dialog, bottom sheet, drawer su mobile, overlay con azioni complete. Il raggio più grande sottolinea la natura "flottante". card + 10 (preserva gerarchia card < modal < bubble).

radiusPill → const double

9999px — pill. Usato per: badge con testo (conteggio, status testuale), bottoni pill dell'header, switch di filtri.

radiusSm → const double

radiusSurface → const double

14px — surface secondarie. Usato per: popover, tooltip, menu contestuali, dropdown flottanti, container secondari dentro card. control + 2 (recessed, concentrico).

sm → const double

small → const double

verticalPadding → const double

xl → const double

xxl → const double

xxxl → const double