CSS Custom Properties
Tutte le custom properties sono definite nel blocco @theme di src/assets/main.css. Quelle con prefisso --color- diventano automaticamente classi Tailwind utility.
Severity Colors
Scala completa a 11 shade (50–950) per ogni severità. Usate dai componenti come classi Tailwind (bg-primary-500, text-danger-600, ecc.).
Primary (Blu)
| Property | Valore HEX | Shade |
|---|---|---|
--color-primary-50 | #eff6ff | Blu molto chiaro |
--color-primary-100 | #dbeafe | |
--color-primary-200 | #bfdbfe | |
--color-primary-300 | #93c5fd | |
--color-primary-400 | #60a5fa | |
--color-primary-500 | #3b82f6 | Blu standard |
--color-primary-600 | #2563eb | Usato per pulsanti e focus |
--color-primary-700 | #1d4ed8 | Hover state |
--color-primary-800 | #1e40af | |
--color-primary-900 | #1e3a8a | |
--color-primary-950 | #172554 | Blu molto scuro |
Secondary (Slate)
| Property | Valore HEX |
|---|---|
--color-secondary-50 | #f8fafc |
--color-secondary-100 | #f1f5f9 |
--color-secondary-200 | #e2e8f0 |
--color-secondary-300 | #cbd5e1 |
--color-secondary-400 | #94a3b8 |
--color-secondary-500 | #64748b |
--color-secondary-600 | #475569 |
--color-secondary-700 | #334155 |
--color-secondary-800 | #1e293b |
--color-secondary-900 | #0f172a |
--color-secondary-950 | #020617 |
Success (Verde)
| Property | Valore HEX |
|---|---|
--color-success-50 | #f0fdf4 |
--color-success-100 | #dcfce7 |
--color-success-200 | #bbf7d0 |
--color-success-300 | #86efac |
--color-success-400 | #4ade80 |
--color-success-500 | #22c55e |
--color-success-600 | #16a34a |
--color-success-700 | #15803d |
--color-success-800 | #166534 |
--color-success-900 | #14532d |
--color-success-950 | #052e16 |
Info (Cyan)
| Property | Valore HEX |
|---|---|
--color-info-50 | #ecfeff |
--color-info-100 | #cffafe |
--color-info-200 | #a5f3fc |
--color-info-300 | #67e8f9 |
--color-info-400 | #22d3ee |
--color-info-500 | #06b6d4 |
--color-info-600 | #0891b2 |
--color-info-700 | #0e7490 |
--color-info-800 | #155e75 |
--color-info-900 | #164e63 |
--color-info-950 | #083344 |
Warn (Amber)
| Property | Valore HEX |
|---|---|
--color-warn-50 | #fffbeb |
--color-warn-100 | #fef3c7 |
--color-warn-200 | #fde68a |
--color-warn-300 | #fcd34d |
--color-warn-400 | #fbbf24 |
--color-warn-500 | #f59e0b |
--color-warn-600 | #d97706 |
--color-warn-700 | #b45309 |
--color-warn-800 | #92400e |
--color-warn-900 | #78350f |
--color-warn-950 | #451a03 |
Danger (Rosso)
| Property | Valore HEX |
|---|---|
--color-danger-50 | #fef2f2 |
--color-danger-100 | #fee2e2 |
--color-danger-200 | #fecaca |
--color-danger-300 | #fca5a5 |
--color-danger-400 | #f87171 |
--color-danger-500 | #ef4444 |
--color-danger-600 | #dc2626 |
--color-danger-700 | #b91c1c |
--color-danger-800 | #991b1b |
--color-danger-900 | #7f1d1d |
--color-danger-950 | #450a0a |
Help (Viola)
| Property | Valore HEX |
|---|---|
--color-help-50 | #faf5ff |
--color-help-100 | #f3e8ff |
--color-help-200 | #e9d5ff |
--color-help-300 | #d8b4fe |
--color-help-400 | #c084fc |
--color-help-500 | #a855f7 |
--color-help-600 | #9333ea |
--color-help-700 | #7e22ce |
--color-help-800 | #6b21a8 |
--color-help-900 | #581c87 |
--color-help-950 | #3b0764 |
Contrast (Zinc)
| Property | Valore HEX |
|---|---|
--color-contrast-50 | #fafafa |
--color-contrast-100 | #f4f4f5 |
--color-contrast-200 | #e4e4e7 |
--color-contrast-300 | #d4d4d8 |
--color-contrast-400 | #a1a1aa |
--color-contrast-500 | #71717a |
--color-contrast-600 | #52525b |
--color-contrast-700 | #3f3f46 |
--color-contrast-800 | #27272a |
--color-contrast-900 | #18181b |
--color-contrast-950 | #09090b |
Surface Colors (Light Mode)
Token semantici per sfondi e superfici. Non hanno una scala numerica: rappresentano ruoli specifici dell'interfaccia.
| Property | Valore | Descrizione |
|---|---|---|
--color-background | #f8fafc (slate-50) | Sfondo principale dell'applicazione |
--color-surface | #ffffff (white) | Superficie primaria (card, panel, input) |
--color-surface-secondary | #f8fafc (slate-50) | Superficie secondaria (sub-panel, filled input, intestazioni di tabella) |
--color-surface-hover | #f1f5f9 (slate-100) | Sfondo hover state |
--color-surface-selected | var(--color-primary-50) | Riga selezionata di DataTable (dalla 1.24.0) |
--color-surface-selected-hover | var(--color-primary-100) | Riga selezionata in hover (dalla 1.24.0) |
--color-field-border | #7a899f | Bordo dei campi (dalla 1.24.0) |
--color-overlay | 15 23 42 (slate-900 RGB) | Colore mask overlay (in formato RGB per opacity) |
Bordo dei campi
--color-field-border è il bordo dei campi outlined (InputText, InputNumber, InputMask,
Textarea, i trigger di Select, MultiSelect e TreeSelect, i filtri e le caselle delle tendine,
l'addon di InputGroup) e dei radio e delle caselle non selezionati nel tema scuro. È il bordo a
rendere riconoscibile un campo, quindi per WCAG 1.4.11 deve reggere 3:1 su ogni superficie su cui il
campo si trova: #7a899f dà 3,56:1 sul bianco, 3,40 su surface-secondary e 3,25 su
surface-hover; nel tema scuro #6b7b92 dà 3,39 su slate-800 e 4,14 su slate-900. Prima i campi
usavano neutral-300 (1,48:1 sul bianco) e neutral-600 nello scuro (1,93:1). È un token proprio e
non la scala neutral, che la shell ridefinisce coi grigi di Tailwind. Le varianti filled non lo
usano.
Righe selezionate
--color-surface-selected e --color-surface-selected-hover sono opachi in entrambi i temi: le celle
delle colonne fisse (frozen) ereditano lo sfondo della riga, e con una tinta trasparente (fino alla
1.23 primary-900 al 20% nel tema scuro) ci passava sotto il testo delle colonne che scorrono. Nel
tema scuro la tinta è mescolata alla superficie col suo valore letterale (#1e293b): così anche il
fallback statico che il build genera per i browser senza color-mix resta scuro.
Text Colors (Light Mode)
| Property | Valore | Descrizione |
|---|---|---|
--color-text | #0f172a (slate-900) | Testo primario |
--color-text-secondary | #64748b (slate-500) | Testo secondario |
--color-text-muted | #94a3b8 (slate-400) | Testo attenuato, placeholder |
--color-label | #334155 (slate-700) | Label dei form control |
ScrollPanel Colors
| Property | Valore | Descrizione |
|---|---|---|
--scrollpanel-track-color | #f1f5f9 (slate-100) | Sfondo della traccia scrollbar |
--scrollpanel-thumb-color | #cbd5e1 (slate-300) | Colore del thumb scrollbar |
--scrollpanel-thumb-hover-color | #94a3b8 (slate-400) | Colore hover del thumb scrollbar |
Utilizzo nei Componenti
Le surface e text colors non generano classi Tailwind automatiche (non usano la scala numerica standard). Per usarle nelle classi Tailwind:
<!-- Via var() in classi arbitrarie -->
<div class="bg-[var(--color-surface)] text-[var(--color-label)]">
Contenuto
</div>
I componenti della libreria le usano direttamente nel CSS:
.hs-inputtext {
background-color: var(--color-surface);
}
.hs-inputtext-label-default {
color: var(--color-label);
}