/* * Design token di Tasso Tecnico — fonte unica per web component e per lo * SCSS dell'app Angular (che vi si riferisce con var(--tt-x), non con * variabili Sass separate). Sono CSS custom properties: attraversano il * confine dello Shadow DOM per ereditarietà, quindi basta caricare questo * foglio UNA VOLTA nel documento host (light DOM, vedi src/index.html) * perché tutti — componenti e resto dell'app — lo vedano. Ogni componente * porta comunque un fallback via var(--tt-x, ), quindi funziona * anche senza questo file, con l'estetica di default (scuro). * * Tutte le coppie testo/sfondo qui sotto sono state verificate per un * rapporto di contrasto >= 4.5:1 (WCAG 2.2 AA, testo normale) e >= 3:1 * per i confini di componenti UI non testuali (WCAG 1.4.11) — in ENTRAMBI * i temi, non solo in quello scuro originale. * * Tre stati, non due: assenza dell'attributo `data-theme` su segue * le impostazioni di sistema (prefers-color-scheme); `data-theme="scuro"` o * `data-theme="chiaro"` è la scelta esplicita dell'utente (vedi * ThemeService) e vince sempre sul sistema. Per questo ogni token * theme-dependent è dichiarato tre volte: bare :root (chiaro, default per i * browser senza supporto a prefers-color-scheme), dentro la media query * scuro (guardata con :not([data-theme="chiaro"]) così una scelta esplicita * chiara batte comunque un sistema scuro), e sotto :root[data-theme="scuro"] * (perché la scelta esplicita vinca anche quando il sistema è chiaro). */ :root { /* Superfici — tema chiaro (default) */ --tt-color-page-background: #ffffff; --tt-color-background: #ffffff; --tt-color-surface: rgba(20, 24, 31, 0.05); --tt-color-surface-raised: rgba(20, 24, 31, 0.08); --tt-color-border: rgba(20, 24, 31, 0.2); /* Testo — tema chiaro */ --tt-color-text: #14181f; --tt-color-text-muted: rgba(20, 24, 31, 0.65); /* Stato secondario/neutro — tema chiaro */ --tt-color-secondary: rgba(20, 24, 31, 0.06); --tt-color-secondary-hover: rgba(20, 24, 31, 0.1); --tt-color-secondary-contrast: #14181f; /* Focus — tema chiaro: il ciano usato in scuro (#66d9ff) ha solo 1.6:1 su bianco, troppo poco; il verde del brand è già verificato a 5.1:1. */ --tt-color-focus-ring: #1f551f; /* Testo di errore/pericolo (non una pillola piena come --tt-color-danger: qui il colore sta direttamente sullo sfondo pagina, quindi il contrasto DIPENDE dal tema — un solo rosso non può reggere 4.5:1 sia su bianco che su quasi-nero, i due sfondi sono troppo agli estremi). #b00020 dà 7.3:1 su bianco. */ --tt-color-danger-text: #b00020; /* Colore primario del brand — invariato in entrambi i temi */ --tt-color-primary: #2e7d32; --tt-color-primary-hover: #256628; --tt-color-primary-active: #1f551f; --tt-color-primary-contrast: #ffffff; /* Base sempre bianca dietro al marchio (header): è una scelta di presentazione del logo stesso, non uno sfondo di pagina — resta invariata in entrambi i temi. */ --tt-color-logo-plate: #ffffff; /* Filo decorativo verde-oliva sotto i pulsanti di navigazione dell'header — invariato in entrambi i temi. */ --tt-color-nav-underline: #97a37e; /* Stato di pericolo/distruttivo — invariato in entrambi i temi (pillola piena + testo bianco, il contrasto non dipende dallo sfondo pagina) */ --tt-color-danger: #b00020; --tt-color-danger-hover: #8f001a; --tt-color-danger-contrast: #ffffff; /* * Palette badge (stato ruolo/recensione) — invariata in entrambi i temi: * sono pillole piene con testo bianco sopra, il contrasto non dipende * dallo sfondo della pagina. Le tonalità "oro" e "arancione" originali * (#b8860b, #e65100) non raggiungevano 4.5:1 con testo bianco (3.25:1 e * 3.79:1): sono state scurite a parità di tinta. */ --tt-color-badge-verde: #2e7d32; --tt-color-badge-oro: #996f09; --tt-color-badge-blu: #1565c0; --tt-color-badge-arancione: #d04900; --tt-color-badge-rosso: #b00020; --tt-color-badge-grigio: #757575; --tt-color-badge-contrast: #ffffff; /* Tipografia */ --tt-font-family: SFUIDisplay, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --tt-font-size-small: 12px; --tt-font-size-normal: 16px; --tt-font-size-big: 20px; /* Spaziatura */ --tt-space-1: 4px; --tt-space-2: 8px; --tt-space-3: 12px; --tt-space-4: 16px; --tt-space-6: 24px; --tt-space-8: 32px; /* Forma */ --tt-radius: 4px; --tt-radius-pill: 999px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="chiaro"]) { --tt-color-page-background: linear-gradient(153deg, #030303 13%, #141414 62%, #151b0a 97%); --tt-color-background: #0d0d0d; --tt-color-surface: rgba(255, 255, 255, 0.06); --tt-color-surface-raised: rgba(255, 255, 255, 0.1); --tt-color-border: rgba(255, 255, 255, 0.35); --tt-color-text: #ffffff; --tt-color-text-muted: rgba(255, 255, 255, 0.72); --tt-color-secondary: rgba(255, 255, 255, 0.14); --tt-color-secondary-hover: rgba(255, 255, 255, 0.22); --tt-color-secondary-contrast: #ffffff; --tt-color-focus-ring: #66d9ff; /* #b00020 dà solo 2.65:1 su quasi-nero, sotto 4.5:1: qui serve un rosso più chiaro. #ff6b6b dà 7:1 su #0d0d0d. */ --tt-color-danger-text: #ff6b6b; } } :root[data-theme="scuro"] { --tt-color-page-background: linear-gradient(153deg, #030303 13%, #141414 62%, #151b0a 97%); --tt-color-background: #0d0d0d; --tt-color-surface: rgba(255, 255, 255, 0.06); --tt-color-surface-raised: rgba(255, 255, 255, 0.1); --tt-color-border: rgba(255, 255, 255, 0.35); --tt-color-text: #ffffff; --tt-color-text-muted: rgba(255, 255, 255, 0.72); --tt-color-secondary: rgba(255, 255, 255, 0.14); --tt-color-secondary-hover: rgba(255, 255, 255, 0.22); --tt-color-secondary-contrast: #ffffff; --tt-color-focus-ring: #66d9ff; --tt-color-danger-text: #ff6b6b; } :root[data-theme="chiaro"] { --tt-color-page-background: #ffffff; --tt-color-background: #ffffff; --tt-color-surface: rgba(20, 24, 31, 0.05); --tt-color-surface-raised: rgba(20, 24, 31, 0.08); --tt-color-border: rgba(20, 24, 31, 0.2); --tt-color-text: #14181f; --tt-color-text-muted: rgba(20, 24, 31, 0.65); --tt-color-secondary: rgba(20, 24, 31, 0.06); --tt-color-secondary-hover: rgba(20, 24, 31, 0.1); --tt-color-secondary-contrast: #14181f; --tt-color-focus-ring: #1f551f; --tt-color-danger-text: #b00020; }