/* ============================================================================ * design-tokens.css * Gestionale CONI Emilia Romagna — Fase 3, Task 3.1 * Master Plan v3.4, Sezione 6.1 * * UNICO FILE da modificare per cambiare il tema visivo dell'intero sistema. * Nessun componente scrive mai un valore di colore hardcodato. * Ogni valore usa var(--token-name). * * STRUTTURA: * 1. Variabili colore (palette primaria, secondaria, neutri, stati) * 2. Variabili sfondo e testo (semantiche, derivate dalla palette) * 3. Variabili tipografia (font-family, font-size, font-weight, line-height) * 4. Variabili spazio (scala 4px) * 5. Variabili componenti (border-radius, box-shadow, transition) * 6. Variabili layout (sidebar, header, z-index) * 7. Dark mode ([data-theme="dark"]) * * CONVENZIONI: * - Nomi in kebab-case con prefisso semantico: --color-*, --space-*, --font-* * - Colori palette: valori esadecimali diretti * - Colori semantici: riferimenti a palette via var() * - Scala spazi: multipli di 4px (4, 8, 12, 16, 20, 24, 32, 40, 48, 64) * - Scala tipografia: rem per scalabilità (base = 1rem = 16px) * * DARK MODE: * Attivato da [data-theme="dark"] su . * Alpine.js gestisce il toggle e localStorage ricorda la preferenza. * Solo le variabili semantiche vengono sovrascritte — la palette resta fissa. * ============================================================================ */ /* ============================================================================ * 1. VARIABILI COLORE — PALETTE * * Palette fissa: non cambia tra light e dark mode. * I colori semantici (sezione 2) mappano queste palette al contesto d'uso. * * Primario: Blu CONI — identità istituzionale * Secondario: Oro/ambra — accento complementare * Neutri: Scala grigia per testo, bordi, sfondi * Stati: Semantica universale (successo, warning, errore, info) * ============================================================================ */ :root { /* --- Primario: Blu CONI --- * Il blu istituzionale del CONI. Usato per header, bottoni primari, * link, focus ring, elementi di navigazione attivi. * La scala va dal più chiaro (50) al più scuro (900). */ --color-primary-50: #E8F0FE; --color-primary-100: #C5DAFC; --color-primary-200: #8BB5F8; --color-primary-300: #5190F0; --color-primary-400: #2A6FE0; --color-primary: #003893; /* Valore base — blu CONI ufficiale */ --color-primary-600: #003080; --color-primary-dark: #00286B; /* Hover su primario, header, sidebar */ --color-primary-800: #001F56; --color-primary-900: #001640; /* --- Secondario: Oro/Ambra --- * Accento complementare al blu. Usato per badge, highlight, * CTA secondarie, indicatori di attenzione non critici. */ --color-secondary-50: #FFF8E1; --color-secondary-100: #FFECB3; --color-secondary-200: #FFD54F; --color-secondary: #F5A623; /* Valore base — oro CONI */ --color-secondary-dark: #E08E00; --color-secondary-800: #BF6C00; /* --- Neutri: Scala grigia --- * Colori neutri per testo, bordi, sfondi, separatori. * La scala va dal bianco (0) al nero (950). */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F9FAFB; --color-neutral-100: #F3F4F6; --color-neutral-200: #E5E7EB; --color-neutral-300: #D1D5DB; --color-neutral-400: #9CA3AF; --color-neutral-500: #6B7280; --color-neutral-600: #4B5563; --color-neutral-700: #374151; --color-neutral-800: #1F2937; --color-neutral-900: #111827; --color-neutral-950: #030712; /* --- Stati: Semantica universale --- * Success: operazione completata, stato attivo, conferma * Warning: attenzione richiesta, stato in_attesa, bozza_rinnovo * Error: errore, stato eliminato/sospeso, azione distruttiva * Info: informazione neutra, tooltip, hint */ --color-success-50: #ECFDF5; --color-success-100: #D1FAE5; --color-success-200: #A7F3D0; --color-success: #059669; /* Verde — badge attivo, toast success */ --color-success-dark: #047857; --color-warning-50: #FFFBEB; --color-warning-100: #FEF3C7; --color-warning-200: #FDE68A; --color-warning: #D97706; /* Arancio — badge in_attesa, toast warning */ --color-warning-dark: #B45309; --color-error-50: #FEF2F2; --color-error-100: #FEE2E2; --color-error-200: #FECACA; --color-error: #DC2626; /* Rosso — badge sospeso/eliminato, toast error */ --color-error-dark: #B91C1C; --color-info-50: #EFF6FF; --color-info-100: #DBEAFE; --color-info-200: #BFDBFE; --color-info: #2563EB; /* Blu info — diverso dal primario CONI */ --color-info-dark: #1D4ED8; /* ============================================================================ * 2. VARIABILI SEMANTICHE — SFONDO E TESTO * * Questi token mappano la palette ai contesti d'uso specifici. * SOLO QUESTI vengono sovrascritti in dark mode (sezione 7). * I componenti usano sempre questi token, mai la palette direttamente. * ============================================================================ */ /* --- Sfondi pagina e contenitori --- */ --color-bg-page: var(--color-neutral-50); /* Sfondo pagina principale */ --color-bg-surface: var(--color-neutral-0); /* Card, modal, dropdown */ --color-bg-surface-raised: var(--color-neutral-0); /* Superficie elevata (popover) */ --color-bg-muted: var(--color-neutral-100); /* Sfondo secondario, righe alternate tabella */ --color-bg-hover: var(--color-neutral-100); /* Hover su righe tabella, menu items */ --color-bg-selected: var(--color-primary-50); /* Riga selezionata, tab attivo */ --color-bg-overlay: rgba(0, 0, 0, 0.5); /* Overlay modal/dialog */ /* --- Sfondi header e sidebar --- */ --color-bg-header: var(--color-primary); /* Header fisso */ --color-bg-sidebar: var(--color-primary-dark); /* Sidebar navigazione */ /* --- Testo --- */ --color-text-primary: var(--color-neutral-900); /* Testo principale, titoli */ --color-text-secondary: var(--color-neutral-600); /* Testo secondario, descrizioni */ --color-text-muted: var(--color-neutral-400); /* Placeholder, hint, disabled */ --color-text-inverse: var(--color-neutral-0); /* Testo su sfondo scuro (header, sidebar) */ --color-text-link: var(--color-primary); /* Link e testo cliccabile */ --color-text-link-hover: var(--color-primary-dark); /* Link hover */ /* --- Bordi --- */ --color-border: var(--color-neutral-200); /* Bordo standard (card, input, tabella) */ --color-border-hover: var(--color-neutral-300); /* Bordo hover */ --color-border-focus: var(--color-primary-400); /* Bordo focus (input, select) */ /* --- Focus ring (accessibilità) --- */ --color-focus-ring: var(--color-primary-400); --focus-ring: 0 0 0 3px var(--color-primary-100); /* --- Input --- */ --color-bg-input: var(--color-neutral-0); /* Sfondo input/select */ --color-bg-input-disabled: var(--color-neutral-100); /* Input disabilitato */ /* ============================================================================ * 3. VARIABILI TIPOGRAFIA * * Font-family: Inter come font primario (caricato via CDN con SRI). * Fallback: system-ui per prestazioni native se Inter non disponibile. * Dimensioni in rem per scalabilità con preferenze utente. * ============================================================================ */ --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* --- Font size --- * Scala modulare con rapporto ~1.25 (Major Third). * xs: etichette piccole, badge conteggio * sm: testo secondario, caption, helper text * base: testo corpo, input, bottoni * lg: sottotitoli, nomi impianto in lista * xl: titoli sezione, heading h3 * 2xl: titoli pagina, heading h2 * 3xl: titolo dashboard, heading h1 */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ /* --- Font weight --- */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* --- Line height --- */ --line-height-tight: 1.25; /* Titoli, heading */ --line-height-base: 1.5; /* Testo corpo */ --line-height-relaxed: 1.75; /* Testo con spaziatura generosa */ /* --- Letter spacing --- */ --letter-spacing-tight: -0.025em; /* Titoli grandi */ --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; /* Label uppercase, badge */ /* ============================================================================ * 4. VARIABILI SPAZIO * * Scala 4px come da Sezione 6.1 Master Plan. * Usata per padding, margin, gap in tutto il sistema. * Nomi numerici: --space-N dove N indica il multiplo di 4px * (--space-1 = 4px, --space-2 = 8px, ecc.) * ============================================================================ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ============================================================================ * 5. VARIABILI COMPONENTI * * Border-radius, box-shadow, transition per coerenza visiva. * Usati dai componenti in components.css e dalle pagine specifiche. * ============================================================================ */ /* --- Border radius --- */ --border-radius-sm: 0.25rem; /* 4px — badge, tag, chip */ --border-radius-md: 0.5rem; /* 8px — card, input, bottoni */ --border-radius-lg: 0.75rem; /* 12px — modal, dropdown, toast */ --border-radius-xl: 1rem; /* 16px — card grande, overlay */ --border-radius-full: 9999px; /* Cerchio — avatar, pill badge */ /* --- Box shadow --- * Tre livelli di elevazione coerenti. * sm: card a riposo, input focus * md: dropdown, popover, toast * lg: modal, dialog, sidebar mobile */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* --- Transizioni --- * Due velocità: fast per hover/focus, base per apertura/chiusura pannelli. */ --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 350ms ease-in-out; /* ============================================================================ * 6. VARIABILI LAYOUT * * Dimensioni fisse per header, sidebar, z-index. * Permettono ai componenti di calcolare posizioni e offset senza magic number. * ============================================================================ */ /* --- Dimensioni strutturali --- */ --header-height: 3.5rem; /* 56px — header fisso */ --sidebar-width: 16rem; /* 256px — sidebar aperta */ --sidebar-width-collapsed: 4rem; /* 64px — sidebar collassata */ /* --- Z-index scale --- * Scala ordinata per prevenire conflitti. * Ogni livello ha uno scopo preciso documentato. */ --z-sidebar: 100; /* Sidebar collassabile */ --z-header: 200; /* Header fisso (sopra sidebar) */ --z-dropdown: 300; /* Dropdown, datalist, autocomplete */ --z-overlay: 400; /* Overlay scuro dietro modal */ --z-modal: 500; /* Modal, dialog di conferma */ --z-toast: 600; /* Toast notifications (sempre in cima) */ --z-tooltip: 700; /* Tooltip (sopra tutto) */ /* --- Larghezze massime contenuto --- */ --max-width-content: 80rem; /* 1280px — area contenuto principale */ --max-width-form: 40rem; /* 640px — form singolo */ --max-width-modal: 32rem; /* 512px — modal standard */ --max-width-modal-lg: 48rem; /* 768px — modal ampio (diff, anteprima) */ /* --- Breakpoint (documentazione, usati in @media queries) --- * Non sono custom property perché CSS non supporta var() in @media. * Documentati qui come riferimento per tutti i file CSS. * * --breakpoint-sm: 640px (mobile landscape) * --breakpoint-md: 768px (tablet portrait) * --breakpoint-lg: 1024px (tablet landscape / desktop piccolo) * --breakpoint-xl: 1280px (desktop) * --breakpoint-2xl: 1536px (desktop grande) */ } /* ============================================================================ * 7. DARK MODE * * Attivato da [data-theme="dark"] su . * Alpine.js gestisce il toggle: Alpine.store('app').tema * localStorage.setItem('tema', 'dark') per persistenza. * * REGOLE: * - Solo i token semantici (sezione 2) vengono sovrascritti. * - La palette (sezione 1) resta immutata. * - I componenti non necessitano di classi aggiuntive. * - Le shadow vengono intensificate perché su sfondo scuro servono * maggiore opacità per essere percepite. * ============================================================================ */ [data-theme="dark"] { /* --- Sfondi --- */ --color-bg-page: var(--color-neutral-950); --color-bg-surface: var(--color-neutral-900); --color-bg-surface-raised: var(--color-neutral-800); --color-bg-muted: var(--color-neutral-800); --color-bg-hover: var(--color-neutral-700); --color-bg-selected: rgba(0, 56, 147, 0.25); /* Primario con alpha per dark */ --color-bg-overlay: rgba(0, 0, 0, 0.7); /* --- Sfondi header e sidebar (più scuri in dark mode) --- */ --color-bg-header: var(--color-neutral-900); --color-bg-sidebar: var(--color-neutral-950); /* --- Testo --- */ --color-text-primary: var(--color-neutral-100); --color-text-secondary: var(--color-neutral-400); --color-text-muted: var(--color-neutral-500); --color-text-inverse: var(--color-neutral-900); --color-text-link: var(--color-primary-300); --color-text-link-hover: var(--color-primary-200); /* --- Bordi --- */ --color-border: var(--color-neutral-700); --color-border-hover: var(--color-neutral-600); --color-border-focus: var(--color-primary-400); /* --- Focus ring (più visibile su scuro) --- */ --focus-ring: 0 0 0 3px rgba(42, 111, 224, 0.4); /* --- Input --- */ --color-bg-input: var(--color-neutral-800); --color-bg-input-disabled: var(--color-neutral-700); /* --- Shadow (più opache per sfondo scuro) --- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5); } /* ============================================================================ * 8. RESET E BASE GLOBALE * * Reset minimale e stili di base che dipendono dai design token. * Applicato una volta sola — tutti i file successivi ereditano. * ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-family: var(--font-family-base); font-size: 100%; /* Rispetta le preferenze utente del browser (16px default) */ line-height: var(--line-height-base); color: var(--color-text-primary); background-color: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100vh; font-size: var(--font-size-base); font-weight: var(--font-weight-normal); color: var(--color-text-primary); background-color: var(--color-bg-page); transition: background-color var(--transition-base), color var(--transition-base); } /* --- Tipografia base --- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); color: var(--color-text-primary); letter-spacing: var(--letter-spacing-tight); } h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } p { margin-bottom: var(--space-4); color: var(--color-text-secondary); } /* --- Link --- */ a { color: var(--color-text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-text-link-hover); text-decoration: underline; } /* --- Focus accessibile --- * Ogni elemento focusabile mostra un ring visibile. * Usa :focus-visible per evitare il ring su click (solo keyboard). */ :focus-visible { outline: none; box-shadow: var(--focus-ring); } /* --- Immagini e media --- */ img, svg, video { display: block; max-width: 100%; height: auto; } /* --- Tabelle base --- */ table { border-collapse: collapse; width: 100%; } /* --- Input e form --- */ input, select, textarea, button { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; } /* --- Utility: screen reader only (accessibilità) --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* --- Transizione fluida per il cambio tema --- */ html[data-theme] body, html[data-theme] header, html[data-theme] nav, html[data-theme] main, html[data-theme] aside { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base); } /* ============================================================================ * FINE design-tokens.css * ============================================================================ */