/* Bandiere dei paesi (emoji U+1F1E6–1F1FF). Windows non ha i glifi delle bandiere: il browser ripiega sulle due lettere del codice paese ("GB", "IT"). Questo font ne contiene SOLO le bandiere ed è limitato con `unicode-range` a quei code point, quindi non tocca nessun altro carattere e viene scaricato soltanto dalle pagine che mostrano una bandiera. Per usarlo va messo davanti allo stack: font-family: var(--ds-font-flags), … */ @font-face{ font-family: 'Twemoji Country Flags'; src: url('/assets/fonts/TwemojiCountryFlags.woff2') format('woff2'); unicode-range: U+1F1E6-1F1FF; font-display: swap; } /* ============================================================================ TH3 Group · Design System Tokens — SINGLE SOURCE OF TRUTH ---------------------------------------------------------------------------- Linkato in testa a OGNI modulo (dashboard, login, biztravel, cashflow, chat, reporting, redditività) PRIMA del CSS del modulo. Namespace `--ds-*` per non collidere con nessuna variabile esistente. Ogni modulo ri-punta le proprie variabili :root a questi token (es. `--muted: var(--ds-text-muted)`) così l'intera suite condivide UNO scheletro — font, neutri, spaziatura, raggi, ombre, stati semantici — mantenendo ciascuno il proprio colore d'accento (brand per-modulo, scelta voluta). I valori grigi di testo sono calibrati per garantire ≥4.5:1 su TUTTI gli sfondi chiari dei moduli (verificato: muted 5.35:1, faint 4.59:1 nel caso peggiore). Non alleggerirli senza ricalcolare il contrasto. ── TEMA CHIARO / SCURO ────────────────────────────────────────────────── Il tema si pilota con l'attributo `data-theme` su , scritto lato server da Theme::attr() (vedi includes/Theme.php) leggendo il cookie `th3g_theme`. Essendo stampato nell'HTML iniziale, la prima pittura è già corretta: nessun flash bianco (FOUC). data-theme="light" → sempre chiaro data-theme="dark" → sempre scuro data-theme="system" → segue il tema dell'OS (prefers-color-scheme) Il modo "system" è gestito in CSS puro, non in JS: funziona al primo paint e cambia da solo se l'utente passa a scuro a livello di sistema operativo. PER I MODULI: non serve fare nulla se le variabili del modulo puntano ai token `--ds-*` — il tema scuro arriva da solo. Gli accenti per-modulo (teal biztravel, navy cashflow…) restano di competenza del modulo, che può ritoccarli se in scuro risultano troppo carichi (vedi styles.css per il pattern), MA il blocco va scritto così: @media screen { :root[data-theme="dark"] { --mio-accento: …; } } @media screen and (prefers-color-scheme: dark) { :root[data-theme="system"] { --mio-accento: …; } } Il wrapper `@media screen` non è decorativo: è ciò che fa stampare in chiaro. Senza, il blocco scuro resta attivo anche in stampa e la pagina esce su fondo scuro. Due regole che si pagano care se ignorate: 1. Un accento che va bene come RIEMPIMENTO (con testo bianco sopra) di solito NON va bene come TESTO su fondo scuro, e viceversa. Se lo stesso token fa entrambi i mestieri, in scuro se ne rompe uno: servono due token (vedi --accent / --accent-ink in styles.css). 2. I badge "soft" (inchiostro scuro su tinta translucida) si rompono in silenzio: la tinta si ribalta da sola, l'inchiostro no. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300..800;1,6..12,300..800&display=swap'); :root { /* ── Typography ────────────────────────────────────────────────────────── */ /* Font principale del dashboard: Nunito Sans (Inter come fallback). Il webfont è caricato dall'@import qui sopra, quindi vale in OGNI modulo che linka tokens.css. */ --ds-font-sans: 'Nunito Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --ds-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Da anteporre allo stack dove si stampano bandiere (vedi @font-face sopra). */ --ds-font-flags: 'Twemoji Country Flags'; /* ── Neutrals ──────────────────────────────────────────────────────────── */ --ds-app-bg: #f5f7fa; /* sfondo pagina (grigio-blu chiaro) */ --ds-surface: #ffffff; /* card / pannelli */ --ds-surface-2: #fafbfc; /* rialzo sottile / righe alternate */ --ds-surface-hover: #eef2f7; /* hover su superfici */ --ds-border: #e5e9f0; /* divisori hairline */ --ds-border-strong: #cbd2dc; /* divisori marcati */ --ds-field-border: #8892a3; /* bordo controlli form — 3:1 UI (a11y 1.4.11) */ /* ── Text (tutti ≥4.5:1 sul bg più chiaro dei moduli) ──────────────────── */ --ds-text: #0f172a; /* primario (16.4:1) */ --ds-text-soft: #334155; /* secondario(10.4:1) */ --ds-text-muted: #5b6674; /* terziario ( 5.4:1) */ --ds-text-faint: #667080; /* debole ( 4.6:1) */ --ds-text-onbrand: #ffffff; /* testo su fondo colorato pieno */ /* ── Semantic state ────────────────────────────────────────────────────── */ --ds-success: #16a34a; --ds-success-soft: #dcfce7; --ds-danger: #dc2626; --ds-danger-soft: #fee2e2; --ds-warning: #d97706; --ds-warning-soft: #fef3c7; --ds-info: #2563eb; --ds-info-soft: #dbeafe; /* ── Radius ────────────────────────────────────────────────────────────── */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-pill: 999px; /* ── Shadow (elevazione neutra, tinta slate) ───────────────────────────── */ --ds-shadow-sm: 0 1px 2px rgba(15,23,42,.04); --ds-shadow-md: 0 1px 3px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.04); --ds-shadow-lg: 0 4px 16px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); /* ── Spacing scale (base 4px) ──────────────────────────────────────────── */ --ds-1: 4px; --ds-2: 8px; --ds-3: 12px; --ds-4: 16px; --ds-5: 24px; --ds-6: 32px; --ds-7: 48px; --ds-8: 64px; /* ── Z-index scale semantica ───────────────────────────────────────────── */ --ds-z-dropdown: 1000; --ds-z-sticky: 1100; --ds-z-backdrop: 1200; --ds-z-modal: 1300; --ds-z-toast: 1400; --ds-z-tooltip: 1500; /* ── Transizione di cambio tema ────────────────────────────────────────── */ --ds-theme-tr: 180ms cubic-bezier(.22,1,.36,1); } /* ============================================================================ PRIMITIVE DEL TEMA SCURO ---------------------------------------------------------------------------- Definite UNA volta sola qui, in `:root`, dove sono inerti (nessun elemento le consuma in tema chiaro). I due blocchi di mapping più sotto — scuro esplicito e scuro di sistema — le referenziano entrambi: così i valori non possono divergere fra i due casi. Toccare i valori QUI, mai nei mapping. Lo scuro NON è il chiaro invertito: · la profondità viene dalla LUMINOSITÀ delle superfici, non dalle ombre — più un piano è "alto", più è chiaro (app-bg → surface → surface-2); · la famiglia cromatica resta lo slate/navy del brand (stessa tinta del #0f172a di sidebar e testo): niente grigio neutro, niente nero puro, che su schermo OLED aumenta lo smearing e alza troppo il contrasto; · gli accenti semantici sono schiariti e leggermente desaturati, perché su fondo scuro i colori pieni "vibrano". Contrasti verificati (WCAG 2.1) sul CASO PEGGIORE, cioè la superficie più chiara (--ds-d-surface-hover #1e2b47): text 11.98:1 · text-soft 7.84:1 · text-muted 5.46:1 · text-faint 4.85:1 success 7.32:1 · danger 5.09:1 · warning 8.43:1 · info 5.54:1 field-border 3.22:1 (≥3:1 richiesto da a11y 1.4.11 sui controlli) Non scurirli senza ricalcolare il contrasto. ============================================================================ */ :root { /* Neutri — profondità per luminosità crescente */ --ds-d-app-bg: #0b1120; /* sfondo pagina — il piano più profondo */ --ds-d-surface: #111a2e; /* card / pannelli */ --ds-d-surface-2: #16213a; /* rialzo sottile / righe alternate */ --ds-d-surface-hover: #1e2b47; /* hover su superfici */ --ds-d-border: #232f49; /* divisori hairline */ --ds-d-border-strong: #33405e; /* divisori marcati */ --ds-d-field-border: #6b7997; /* bordo controlli form — 3.22:1 */ /* Testo */ --ds-d-text: #e8edf6; --ds-d-text-soft: #b7c2d6; --ds-d-text-muted: #94a2bb; --ds-d-text-faint: #8a98b4; --ds-d-text-onbrand: #ffffff; /* Stati semantici — fondo "soft" scuro, non chiaro */ --ds-d-success: #34d399; --ds-d-success-soft: #0e2f22; --ds-d-danger: #f87171; --ds-d-danger-soft: #3a1518; --ds-d-warning: #fbbf24; --ds-d-warning-soft: #38260a; --ds-d-info: #60a5fa; --ds-d-info-soft: #12243f; /* Ombre — su fondo scuro un'ombra grigia sbiadisce: si va di nero pieno, ed è il bordo/la superficie più chiara a fare il lavoro di elevazione. */ --ds-d-shadow-sm: 0 1px 2px rgba(0,0,0,.30); --ds-d-shadow-md: 0 1px 3px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.28); --ds-d-shadow-lg: 0 4px 16px rgba(0,0,0,.48), 0 2px 4px rgba(0,0,0,.32); } /* ── Mapping: scuro esplicito ────────────────────────────────────────────── */ @media screen { :root[data-theme="dark"] { color-scheme: dark; /* scrollbar, caret, controlli nativi, UA stylesheet */ --ds-app-bg: var(--ds-d-app-bg); --ds-surface: var(--ds-d-surface); --ds-surface-2: var(--ds-d-surface-2); --ds-surface-hover: var(--ds-d-surface-hover); --ds-border: var(--ds-d-border); --ds-border-strong: var(--ds-d-border-strong); --ds-field-border: var(--ds-d-field-border); --ds-text: var(--ds-d-text); --ds-text-soft: var(--ds-d-text-soft); --ds-text-muted: var(--ds-d-text-muted); --ds-text-faint: var(--ds-d-text-faint); --ds-text-onbrand: var(--ds-d-text-onbrand); --ds-success: var(--ds-d-success); --ds-success-soft: var(--ds-d-success-soft); --ds-danger: var(--ds-d-danger); --ds-danger-soft: var(--ds-d-danger-soft); --ds-warning: var(--ds-d-warning); --ds-warning-soft: var(--ds-d-warning-soft); --ds-info: var(--ds-d-info); --ds-info-soft: var(--ds-d-info-soft); --ds-shadow-sm: var(--ds-d-shadow-sm); --ds-shadow-md: var(--ds-d-shadow-md); --ds-shadow-lg: var(--ds-d-shadow-lg); } } /* ── Mapping: scuro di sistema (data-theme="system") ───────────────────────── Stessi identici valori del blocco sopra, via primitive. In CSS non si può riusare un blocco dentro una media query: la duplicazione è del MAPPING, non dei valori — quelli restano definiti una volta sola nelle primitive. */ @media screen and (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --ds-app-bg: var(--ds-d-app-bg); --ds-surface: var(--ds-d-surface); --ds-surface-2: var(--ds-d-surface-2); --ds-surface-hover: var(--ds-d-surface-hover); --ds-border: var(--ds-d-border); --ds-border-strong: var(--ds-d-border-strong); --ds-field-border: var(--ds-d-field-border); --ds-text: var(--ds-d-text); --ds-text-soft: var(--ds-d-text-soft); --ds-text-muted: var(--ds-d-text-muted); --ds-text-faint: var(--ds-d-text-faint); --ds-text-onbrand: var(--ds-d-text-onbrand); --ds-success: var(--ds-d-success); --ds-success-soft: var(--ds-d-success-soft); --ds-danger: var(--ds-d-danger); --ds-danger-soft: var(--ds-d-danger-soft); --ds-warning: var(--ds-d-warning); --ds-warning-soft: var(--ds-d-warning-soft); --ds-info: var(--ds-d-info); --ds-info-soft: var(--ds-d-info-soft); --ds-shadow-sm: var(--ds-d-shadow-sm); --ds-shadow-md: var(--ds-d-shadow-md); --ds-shadow-lg: var(--ds-d-shadow-lg); } } /* ── Chiaro esplicito ───────────────────────────────────────────────────────── `color-scheme: light` impedisce all'OS di scurire i controlli nativi quando l'utente ha scelto "Chiaro" ma il sistema è in scuro. */ :root[data-theme="light"] { color-scheme: light; } /* ── Stampa / PDF ──────────────────────────────────────────────────────────── Su carta il tema scuro non ha senso (e brucia toner): si torna ai valori chiari a prescindere dalla preferenza. Vale per ogni modulo, perché tutti linkano questo file. */ /* ── Stampa / PDF ──────────────────────────────────────────────────────────── Non serve ri-elencare i valori chiari: TUTTI i blocchi scuri (qui e nei moduli) stanno sotto `@media screen`, quindi in stampa non si applicano e restano naturalmente i valori di `:root`, che sono già quelli chiari. Elencarli di nuovo qui sarebbe una seconda copia da tenere allineata a mano — cioè la prossima cosa che va fuori sync. ATTENZIONE: un modulo che aggiunge un proprio blocco scuro DEVE metterlo sotto `@media screen`, altrimenti stamperà su fondo scuro. */ @media print { :root { color-scheme: light; } /* Su carta l'ombra è solo grigio sporco. */ :root { --ds-shadow-sm: none; --ds-shadow-md: none; --ds-shadow-lg: none; } }