/* ============================================================================ * tokens.css — il vocabolario visivo di Traffic Law * ============================================================================ * * Questo file non disegna niente. Dichiara soltanto dei nomi. * * È l'unico posto in cui esistono i valori: colori, spaziature, dimensioni del * testo, raggi, ombre, durate. Chiunque scriva interfaccia da qui in avanti usa * un nome, mai un valore. Cambiare il blu dell'applicazione deve essere una * riga in questo file, non 239 sostituzioni sparse in 550 pagine. * * ── Perché è organizzato su due livelli ───────────────────────────────────── * * PRIMITIVI --tl-blue-600, --tl-gray-100 … * La tavolozza. Dicono *che colore è*. Non si usano quasi mai * direttamente nei componenti. * * SEMANTICI --tl-accent, --tl-surface, --tl-text … * Dicono *a cosa serve*. Sono questi che i componenti usano. * Puntano ai primitivi. * * Il doppio livello serve a una cosa sola, ma importante: il giorno in cui * servirà un tema scuro, o il tema di un altro ente, si riscrive il blocco dei * semantici e basta. I componenti non si toccano. È anche il motivo per cui * questo file sopravvive a una migrazione verso Laravel o Filament: sono * variabili CSS native, e Tailwind — su cui Filament è costruito — si configura * esattamente a partire da queste. * * ── Regole ────────────────────────────────────────────────────────────────── * * 1. Nessun esadecimale fuori da questo file. * 2. Un token nuovo si aggiunge solo se il valore serve in più di un posto. * 3. I primitivi non si usano nei componenti: si usano i semantici. Se manca * il semantico giusto, si aggiunge qui — non si scavalca il livello. * * ── Da dove vengono i valori ──────────────────────────────────────────────── * * Fino al 7 settembre 2026 venivano dal censimento dei 61 colori realmente * presenti nel PHP: il blu #294a9c (239 occorrenze) era --tl-blue-600, il grigio * di sfondo #e7e7e7 era --tl-gray-150, e l'azzurro #2684b1 della barra era una * famiglia a sé. * * Dall'8 settembre 2026 vengono invece dal **programma della contabilità** * (`commercial-main`), come chiede la task A8 del ToDo. Quel programma non ha * un CSS proprio: dieci righe di `app.css` che importano Tailwind, e una riga di * configurazione — `'primary' => Color::Zinc`. Tutto il suo aspetto è Filament * di serie sulla scala **zinc** di Tailwind, ed è quella scala che sta qui sotto. * * Questo chiude anche il punto C1 per la parte cromatica: i valori che * `0_Caratteristiche_Generali` lascia scritti «RGB xxxxxxxxxx» non servono più * come decisione da prendere, perché A8 dice da dove copiarli. Restano decisi * qui sotto i tre che la contabilità non ha (obbligatori, F9, campo col * cursore) e resta aperto il solo **carattere**, che il documento lascia a * «XXXXXXXXX» e che la contabilità prende da Filament (Inter, da rete). * * ⚠ Le tinte sono quelle di **Tailwind 3**, non di Tailwind 4: la contabilità * è su Filament 3.3, noi su Filament 5.7. Filament 5 dichiara la stessa * famiglia in `oklch()` con valori di un capello diversi. Si copia la * contabilità, quindi qui stanno i suoi. * * I colori di stato invece non vengono da lì e non sono cambiati: quelli storici * (#a94442, #3c763d, #928703, ereditati da Bootstrap 3) non superano la soglia * di contrasto WCAG AA su fondo bianco, e questi sono gli equivalenti conformi. * * Requisiti: browser con supporto a color-mix() — Chrome 111+, Safari 16.2+, * Firefox 113+ (2023). È il vincolo concordato. * ========================================================================= */ :root { /* ══════════════════════════════════════════════════════════ PRIMITIVI ══ */ /* ── Neutri: la scala «zinc», ed è la tavolozza principale ──────────────── * * È la scala della contabilità (Filament `Color::Zinc`), e da qui vengono * **sia** gli sfondi e i bordi **sia** il colore delle azioni: nella * contabilità il primario È un grigio, e i pulsanti sono grigio scuro. * * Rispetto ai neutri di prima questi sono più freddi e più contrastati agli * estremi (lo zinc-950 è quasi nero). --tl-gray-150 non esiste più: era lo * sfondo storico #e7e7e7, che la contabilità non ha. */ --tl-white: #ffffff; --tl-gray-50: #fafafa; --tl-gray-100: #f4f4f5; --tl-gray-200: #e4e4e7; --tl-gray-300: #d4d4d8; --tl-gray-400: #a1a1aa; --tl-gray-500: #71717a; --tl-gray-600: #52525b; /* ← il primario della contabilità: i pulsanti */ --tl-gray-700: #3f3f46; --tl-gray-800: #27272a; --tl-gray-900: #18181b; --tl-gray-950: #09090b; --tl-black: #09090b; /* ── Blu, e a cosa è ridotto ────────────────────────────────────────────── * * Non è più il colore delle azioni: quello adesso è il grigio qui sopra. * Resta per le tre cose su cui la contabilità non ha un'opinione perché non * le ha in pagina, e su cui il grigio farebbe danno: * * · i **link testuali** dentro gli elenchi — in grigio non si * distinguerebbero dal testo che hanno accanto; * · l'**anello di messa a fuoco** (WCAG 2.4.7): dev'essere riconoscibile * a colpo d'occhio, e un anello grigio su fondo grigio non lo è; * · il **campo su cui sta il cursore**, che è proprio il colore che * `0_Caratteristiche_Generali` lascia da definire. * * Non è più il #294a9c storico ma il blu di Tailwind, per stare nella stessa * famiglia di tinte del resto. */ --tl-blue-50: #eff6ff; --tl-blue-100: #dbeafe; --tl-blue-500: #3b82f6; --tl-blue-600: #2563eb; --tl-blue-700: #1d4ed8; --tl-blue-800: #1e40af; /* ── Ambra e giallo dei campi ───────────────────────────────────────────── * I due colori che `0_Caratteristiche_Generali` chiede e che la contabilità * non ha: sfondo dei campi obbligatori («arancione attenuato») e dei campi * con ricerca su tabella collegata, tasto F9 («giallo attenuato»). * * Sono presi al livello 100 e non 50: il 50 di arancio e quello di giallo * differiscono di pochissimo, e i due significati vanno distinti a occhio * senza doverli mettere uno accanto all'altro. Al 100 restano comunque * attenuati, e il testo nero sopra resta ampiamente sopra soglia. */ --tl-orange-100: #ffedd5; --tl-orange-300: #fdba74; --tl-yellow-100: #fef9c3; --tl-yellow-300: #fde047; /* ── Colori di segnalazione ─────────────────────────────────────────────── * Tutti verificati ≥ 4.5:1 su bianco (WCAG AA per testo normale). * Fra parentesi il valore storico che sostituiscono e il suo contrasto. */ --tl-green-600: #15803d; /* successo (era #3c763d, 4.4:1 — sotto soglia) */ --tl-amber-700: #b45309; /* attesa (era #928703, 4.3:1 — sotto soglia) */ --tl-red-700: #b91c1c; /* errore (era #a94442, 4.7:1 — al limite) */ --tl-cyan-700: #0e7490; /* informazione */ --tl-purple-700: #6d28d9; /* stato speciale (era #800080) */ /* ══════════════════════════════════════════════════════════ SEMANTICI ══ */ /* ── Superfici ──────────────────────────────────────────────────────────── * Come la contabilità: l'area di lavoro sul grigio più chiaro della scala, * i pannelli bianchi sopra. È il «grigio chiaro» che chiede A11 per lo * sfondo delle pagine. */ --tl-surface: var(--tl-white); /* pannelli, schede, righe */ --tl-surface-sunken: var(--tl-gray-50); /* lo sfondo sotto ai pannelli */ --tl-surface-raised: var(--tl-white); /* menu a tendina, popover */ --tl-surface-muted: var(--tl-gray-50); /* righe alterne, celle spente */ --tl-surface-inverse: var(--tl-gray-900); /* tooltip, barre scure */ /* ── Testo ────────────────────────────────────────────────────────────── */ --tl-text: var(--tl-gray-900); /* il testo normale */ --tl-text-muted: var(--tl-gray-600); /* etichette, testo di aiuto */ --tl-text-subtle: var(--tl-gray-500); /* metadati, segnaposto */ --tl-text-inverse: var(--tl-white); /* su fondo scuro o colorato */ --tl-text-link: var(--tl-blue-600); --tl-text-link-hover: var(--tl-blue-800); /* ── Bordi ────────────────────────────────────────────────────────────── */ --tl-border: var(--tl-gray-200); /* il bordo normale */ --tl-border-strong: var(--tl-gray-300); /* separatori che devono farsi vedere */ --tl-border-subtle: var(--tl-gray-100); /* righe interne alle tabelle */ /* ── Accento: il colore delle azioni ────────────────────────────────────── * Grigio, non più blu: è `Color::Zinc` della contabilità, dove il pulsante * pieno è il livello 600 e il testo sopra è bianco (7,4:1). * * ⚠ Conseguenza voluta ma da conoscere: in pagina non resta un colore * d'accento. «Cerca» e «Salva» non risaltano più per tinta, ma solo per * peso e posizione, e gli unici colori rimasti sono quelli di stato. Per * tornare al blu del gestionale basta ripuntare queste sei righe su * --tl-blue-*: non c'è nient'altro da toccare in tutto il progetto. */ --tl-accent: var(--tl-gray-600); --tl-accent-hover: var(--tl-gray-700); --tl-accent-active: var(--tl-gray-800); --tl-accent-subtle: var(--tl-gray-100); /* fondo di una pastiglia */ --tl-accent-text: var(--tl-gray-700); /* testo su fondo subtle */ --tl-on-accent: var(--tl-white); /* testo sopra l'accento pieno */ /* ── Navigazione ────────────────────────────────────────────────────────── * Barra laterale **chiara**, come quella della contabilità: fondo bianco, * testo grigio, voce corrente su fondo grigio tenue. Prima era una colonna * azzurro scuro con testo bianco, ed era la differenza che si vedeva per * prima mettendo i due programmi accanto. */ --tl-nav-bg: var(--tl-white); --tl-nav-bg-hover: var(--tl-gray-100); --tl-nav-bg-active: var(--tl-gray-100); --tl-nav-text: var(--tl-gray-600); --tl-nav-text-strong: var(--tl-gray-900); --tl-nav-border: var(--tl-gray-200); --tl-nav-scrollbar: var(--tl-gray-300); /* ── Stati semantici ────────────────────────────────────────────────────── * Ognuno ha tre facce: il colore pieno (--x), il fondo tenue (--x-subtle) * e il testo da usarci sopra (--x-text). Serve per avere pastiglie * leggibili senza calcolare il contrasto ogni volta. */ --tl-success: var(--tl-green-600); --tl-success-subtle: color-mix(in srgb, var(--tl-green-600) 10%, white); --tl-success-text: #14532d; --tl-warning: var(--tl-amber-700); --tl-warning-subtle: color-mix(in srgb, var(--tl-amber-700) 12%, white); --tl-warning-text: #78350f; --tl-danger: var(--tl-red-700); --tl-danger-subtle: color-mix(in srgb, var(--tl-red-700) 10%, white); --tl-danger-text: #7f1d1d; --tl-info: var(--tl-cyan-700); --tl-info-subtle: color-mix(in srgb, var(--tl-cyan-700) 10%, white); --tl-info-text: #164e63; --tl-neutral: var(--tl-gray-500); --tl-neutral-subtle: var(--tl-gray-100); --tl-neutral-text: var(--tl-gray-700); --tl-special: var(--tl-purple-700); --tl-special-subtle: color-mix(in srgb, var(--tl-purple-700) 10%, white); --tl-special-text: #4c1d95; /* ── Sfondo dei campi ───────────────────────────────────────────────────── * Il capitolo 3.4 di `0_Caratteristiche_Generali` (task A11) prescrive uno * sfondo diverso per quattro condizioni del campo. Sono qui tutte e quattro, * anche quella che oggi non si può ancora accendere, così il giorno in cui * si accende non si va a cercare dove sta il valore. * * ⚠ `--tl-field-bg-readonly` NON è in uso. Vale per la modalità * consultazione/modifica (C2), che oggi non esiste: le pagine si aprono * direttamente in modifica, come il documento stesso ammette di poter fare * «in fase di sviluppo». Quando C2 verrà costruita, basterà che il campo in * sola lettura usi questo token invece di --tl-field-bg. */ --tl-field-bg: var(--tl-white); /* in modifica: «bianco» */ --tl-field-bg-readonly: var(--tl-gray-50); /* in consultazione (C2) */ /* Obbligatorio: «arancione attenuato». Il bordo serve perché il solo fondo * non basta a chi non distingue i colori — l'informazione «questo campo è * obbligatorio» non può stare in una tinta e basta. */ --tl-field-required-bg: var(--tl-orange-100); --tl-field-required-border: var(--tl-orange-300); /* Collegato a una tabella generale, richiamabile con F9: «giallo attenuato». * Il documento lo chiama anche «campo celeste» nel capitolo sui tasti * funzione: le due parti si contraddicono, e qui vale il capitolo 3.4, che * è quello che assegna i colori. */ --tl-field-lookup-bg: var(--tl-yellow-100); --tl-field-lookup-border: var(--tl-yellow-300); /* Il campo su cui sta il cursore: il documento lascia «(definire colore)». * Blu attenuato, perché è l'unica famiglia rimasta libera — l'arancio e il * giallo sono già presi qui sopra, e il grigio è il fondo della pagina. */ --tl-field-focus-bg: var(--tl-blue-50); /* ── Spaziature ─────────────────────────────────────────────────────────── * Scala a passo 4px. Non esistono valori intermedi: se serve 10px, o è 8 o * è 12. È il vincolo che tiene allineate le pagine scritte da persone diverse. * * ⚠ IN PIXEL, NON IN REM, E LA RAGIONE VA CONOSCIUTA. * * bootstrap.css riga 1080 dichiara `html { font-size: 10px }`. In questo * progetto 1rem vale 10px, non 16px — per questo il CSS storico è pieno di * valori come 1.1rem e 3rem, che sono 11px e 30px. * * Una scala in rem qui verrebbe fuori al 62,5% della misura prevista, e — cosa * peggiore — il giorno in cui qualcuno togliesse quella riga di Bootstrap * tutte le misure salterebbero del 60% in una volta sola, su tutte le pagine. * In pixel il valore significa la stessa cosa prima e dopo quella pulizia. * * Quando il progetto avrà una sola versione di Bootstrap e una radice a 16px, * riportare la scala in rem è la modifica di questo blocco e di nient'altro. */ --tl-space-0: 0; --tl-space-1: 4px; --tl-space-2: 8px; --tl-space-3: 12px; --tl-space-4: 16px; --tl-space-5: 24px; --tl-space-6: 32px; --tl-space-7: 48px; --tl-space-8: 64px; /* ── Testo ──────────────────────────────────────────────────────────────── * 14px come misura di base: è la dimensione giusta per il lavoro d'ufficio * su elenchi lunghi. Oggi molte pagine scendono a 11-12px, che è il motivo * per cui si legge male anche quando il contrasto è a norma. */ /* system-ui non è in testa di proposito: su alcune configurazioni Linux si * risolve in un carattere inatteso, e l'interfaccia cambia aspetto a seconda * della macchina. Elencare i nomi veri dà lo stesso risultato su Windows * (Segoe UI) e macOS (San Francisco) senza sorprese altrove. */ --tl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --tl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* In pixel per la stessa ragione delle spaziature: vedi la nota lì sopra. */ --tl-text-xs: 12px; /* solo metadati e note */ --tl-text-sm: 13px; /* celle dense, etichette */ --tl-text-base: 14px; /* la misura normale */ --tl-text-lg: 16px; /* sottotitoli */ --tl-text-xl: 20px; /* titolo di sezione */ --tl-text-2xl: 24px; /* titolo di pagina */ --tl-leading-tight: 1.25; --tl-leading-normal: 1.5; --tl-leading-loose: 1.7; --tl-weight-normal: 400; --tl-weight-medium: 500; --tl-weight-semibold: 600; --tl-weight-bold: 700; /* ── Raggi ──────────────────────────────────────────────────────────────── * Quelli di Filament, cioè della contabilità: i controlli (campi, pulsanti) * a 8px — `rounded-lg` — e i pannelli a 12px — `rounded-xl`. Prima erano 5px * e 8px, scelti per somigliare al gestionale storico: era esattamente la * differenza che `filament-tema.css` esisteva per imporre a Filament, e che * adesso non ha più motivo di esistere. * * --tl-radius è il valore di default ed è usato 24 volte, quasi tutte su * campi e pulsanti: portandolo a 8px l'allineamento arriva dove serve senza * toccare `components.css`. */ --tl-radius-sm: 4px; --tl-radius: 8px; /* campi, pulsanti, pastiglie */ --tl-radius-lg: 12px; /* pannelli, schede, tabelle */ --tl-radius-xl: 16px; /* finestre */ --tl-radius-full: 999px; /* ── Ombre ──────────────────────────────────────────────────────────────── * Tre livelli e basta: appoggiato, sollevato, in primo piano. */ --tl-shadow-sm: 0 1px 2px rgb(13 16 19 / 0.06); --tl-shadow: 0 1px 3px rgb(13 16 19 / 0.10), 0 1px 2px rgb(13 16 19 / 0.06); --tl-shadow-lg: 0 10px 20px rgb(13 16 19 / 0.12), 0 3px 6px rgb(13 16 19 / 0.08); /* L'unica ombra rivolta all'insù: la barra dei comandi sta in fondo e il * contenuto le passa sotto, quindi il distacco va disegnato sopra di lei. Con * le tre di sopra — tutte con l'offset positivo, cioè verso il basso — la * barra resterebbe incollata al testo che scorre. */ --tl-shadow-barra-comandi: 0 -2px 6px rgb(13 16 19 / 0.07); /* ── Il rilievo dei comandi ─────────────────────────────────────────────── * * Tre stati, e servono tutti e tre: un pulsante che si solleva sotto il * puntatore e **si abbassa quando lo si preme** dice che è stato premuto * prima ancora che la pagina risponda. Su un gestionale dove un clic può * avviare una stampa da trenta secondi, quel riscontro immediato è la * differenza fra aspettare e premere una seconda volta. * * `--tl-highlight-top` è il filo di luce in cima ai pulsanti pieni: è la * cosa che li fa leggere come oggetti invece che come rettangoli colorati. * Vale solo sui fondi scuri, dove si vede; su quelli chiari si omette. */ --tl-shadow-btn: 0 1px 2px rgb(13 16 19 / 0.08); --tl-shadow-btn-hover: 0 2px 5px rgb(13 16 19 / 0.13), 0 1px 2px rgb(13 16 19 / 0.07); --tl-shadow-btn-active: inset 0 2px 4px rgb(13 16 19 / 0.18); --tl-highlight-top: inset 0 1px 0 rgb(255 255 255 / 0.14); /* ── Anello di messa a fuoco ────────────────────────────────────────────── * Un solo anello per tutta l'applicazione. È il requisito WCAG 2.4.7, ed è * anche la ragione per cui oggi con la tastiera non si capisce dove si è. */ --tl-focus-width: 2px; --tl-focus-offset: 2px; --tl-focus-color: var(--tl-blue-500); --tl-focus-ring: var(--tl-focus-width) solid var(--tl-focus-color); /* ── Bersagli ───────────────────────────────────────────────────────────── * 24px è il minimo di WCAG 2.2 (criterio 2.5.8, livello AA). 44px è la * misura comoda per il dito. Oggi diverse icone d'azione stanno sotto i 16. */ --tl-target-min: 24px; --tl-target-comfort: 32px; --tl-target-touch: 44px; /* ── Controlli di modulo ──────────────────────────────────────────────── */ --tl-control-height: 32px; --tl-control-height-sm: 26px; --tl-control-height-lg: 40px; --tl-control-padding-x: var(--tl-space-3); /* ── Piani di sovrapposizione ───────────────────────────────────────────── * Dichiarati qui perché lo z-index inventato caso per caso è il modo classico * in cui un menu finisce sotto a una tabella e nessuno capisce perché. */ --tl-z-base: 0; --tl-z-sticky: 100; /* intestazioni di tabella che restano ferme */ --tl-z-sidebar: 200; --tl-z-dropdown: 300; --tl-z-overlay: 400; /* la velatura sotto a una finestra */ --tl-z-modal: 500; --tl-z-toast: 600; /* i messaggi stanno sopra a tutto */ /* ── Movimento ────────────────────────────────────────────────────────── */ --tl-duration-fast: 120ms; --tl-duration: 200ms; --tl-duration-slow: 320ms; --tl-ease: cubic-bezier(0.4, 0, 0.2, 1); --tl-ease-out: cubic-bezier(0, 0, 0.2, 1); /* ── Misure della struttura di pagina ─────────────────────────────────── */ --tl-sidebar-width: 248px; --tl-sidebar-width-collapsed: 56px; --tl-topbar-height: 48px; --tl-content-max: 1600px; } /* ── Chi ha chiesto di ridurre le animazioni ───────────────────────────────── * Preferenza di sistema, non un'opzione dell'applicazione. Va rispettata a * livello di token, così vale per ogni componente senza doverlo ricordare. */ @media (prefers-reduced-motion: reduce) { :root { --tl-duration-fast: 0ms; --tl-duration: 0ms; --tl-duration-slow: 0ms; } }