Colori

Il sistema cromatico semantico di Qoovex in OKLCH. Progettato per uniformità percettiva, contrasto accessibile e coerenza tra tema chiaro e scuro.

import '@qoovex/ui/styles/tokens.css'

Principi del sistema cromatico

Spazio Colore OKLCH
Tutti i token sono definiti in OKLCH per garantire una transizione percettivamente uniforme della luminosità tra tema chiaro e tema scuro.
Coppie Semantiche Obbligatorie
Ogni superficie possiede il rispettivo token foreground (es. --primary + --primary-foreground) garantendo contrasto accessibile WCAG AA in entrambi i temi.
Superfici di Feedback Derivate
I token -surface generano tinte traslucide con color-mix per badge, alert e stati asincroni senza alterare la leggibilità del testo.

Superfici principali & Layout

I token fondamentali per lo sfondo dell'applicazione, le card e i contenitori popover/dialog.

Aa TextCopia
Background
--background

Sfondo globale dell'applicazione

Copia
Foreground
--foreground

Testo principale e icone base

Aa TextCopia
Card
--card

Superficie di schede e pannelli

Copia
Card Foreground
--card-foreground

Testo e contenuti all'interno delle card

Aa TextCopia
Popover
--popover

Menu a discesa, dialog e tooltip

Copia
Popover Foreground
--popover-foreground

Testo nei popover e dialog

Brand & Semantica UI

Colori per le azioni principali, elementi secondari, stati disattivati e accenti di selezione.

Aa TextCopia
Primary
--primary

Azioni primarie e pulsanti principali

Copia
Primary Foreground
--primary-foreground

Testo su sfondo primario

Aa TextCopia
Secondary
--secondary

Azioni secondarie e pillole

Copia
Secondary Foreground
--secondary-foreground

Testo su sfondo secondario

Aa TextCopia
Muted
--muted

Sfondi neutri, disabled e sezioni secondarie

Copia
Muted Foreground
--muted-foreground

Didascalie, metadati e placeholder

Aa TextCopia
Accent
--accent

Elementi attivi in navigazione e hover

Copia
Accent Foreground
--accent-foreground

Testo su elementi accent

Feedback & Superfici Derivate

Segnali di stato funzionali (successo, avviso, distruzione, informazione) affiancati dalle rispettive superfici traslucide -surface.

Aa TextCopia
SuccessSolido
--success

Stati completati, approvati e online

Aa TextCopia
Success SurfaceTint
--success-surface

Sfondo per badge e alert di successo

Copia
Success Foreground
--success-foreground

Testo su sfondo success pieno

Aa TextCopia
WarningSolido
--warning

Avvisi, attenzione e modifiche pendenti

Aa TextCopia
Warning SurfaceTint
--warning-surface

Sfondo per badge e alert di avviso

Copia
Warning Emphasis
--warning-emphasis

Testo ad alto contrasto su warning-surface

Aa TextCopia
DestructiveSolido
--destructive

Errori critici, eliminazioni e blocchi

Aa TextCopia
Destructive SurfaceTint
--destructive-surface

Sfondo per messaggi di errore e badge invalid

Copia
Destructive Foreground
--destructive-foreground

Testo su sfondo distruttivo pieno

Aa TextCopia
InfoSolido
--info

Notifiche informative e aggiornamenti di cantiere

Aa TextCopia
Info SurfaceTint
--info-surface

Sfondo per alert e badge informativi

Copia
Info Foreground
--info-foreground

Testo su sfondo info pieno

Form, Bordi & Focus

Token per la definizione dei confini visuali, dei controlli di input e degli anelli di focus accessibile.

Copia
Border
--border

Bordi di card, separatori e tabelle

Copia
Input
--input

Bordi e sfondi dei campi di input

Copia
Ring
--ring

Anello di focus-visible da tastiera

Sidebar & Navigazione

Token isolati dedicati alla barra laterale di navigazione per consentire temi scuri/chiari indipendenti.

Aa TextCopia
Sidebar
--sidebar

Sfondo della sidebar

Copia
Sidebar Foreground
--sidebar-foreground

Testo e icone della sidebar

Aa TextCopia
Sidebar Primary
--sidebar-primary

Elemento attivo in sidebar

Aa TextCopia
Sidebar Accent
--sidebar-accent

Hover su voci di menu

Copia
Sidebar Border
--sidebar-border

Bordo divisore della sidebar

Copia
Sidebar Ring
--sidebar-ring

Anello di focus nella sidebar

Visualizzazione dati & Grafici

Palette di 5 tonalità graduate per serie temporali, stati di avanzamento e grafici di cantiere.

Copia
Chart 1
--chart-1

Serie primaria / Avanzamento principale

Copia
Chart 2
--chart-2

Serie secondaria / Lavorazioni strutturali

Copia
Chart 3
--chart-3

Serie terziaria / Impianti e finiture

Copia
Chart 4
--chart-4

Serie quaternaria / Documentazione

Copia
Chart 5
--chart-5

Serie quinta / Oneri e sicurezza

Guida d'uso in Tailwind CSS

Come utilizzare i token cromatici nei componenti tramite le utility semantiche di Tailwind CSS v4.

Superfici e Testo
Combina sempre lo sfondo con il suo testo associato per contrasto garantito.
/* Superficie primaria */
<button className="bg-primary text-primary-foreground">
  Azione principale
</button>

/* Card con testo contrastato */
<div className="bg-card text-card-foreground border-border">
  Contenuto scheda
</div>
Badge & Alert di Feedback
Usa le superfici tinte per avvisi e pillole di stato eleganti e leggibili.
/* Badge di errore/distruttivo */
<span className="bg-destructive-surface text-destructive">
  Errore rilevato
</span>

/* Alert di avviso con contrasto */
<div className="bg-warning-surface text-warning-emphasis">
  Verifica in corso
</div>