/* ========================================================================= A2 - Livello token ========================================================================= Il vocabolario dei valori del design system. Questo foglio non produce nessun effetto visibile da solo: dichiara soltanto le variabili che tutti gli altri fogli consumano. Regola che tiene in piedi il sistema: nessun altro foglio scrive un valore letterale di colore, di raggio, di ombra o di carattere. Se serve un valore che qui non esiste, si aggiunge qui, con un ruolo dichiarato. I token stanno su :root e non su .a2 perche' devono essere leggibili anche dai fogli che scopano dentro .a2, e perche' non producono effetti finche' qualcuno non li usa. ========================================================================= */ :root { /* --------------------------------------------------------------------- Superfici Tre livelli, non di piu'. Se serve un quarto livello di profondita', quasi sempre il problema e' la gerarchia, non la mancanza di un grigio. --------------------------------------------------------------------- */ --a2-bg: #F2F4F7; /* fondo di pagina, freddo */ --a2-surface: #FFFFFF; /* schede, sidebar, barre: cio' che sta sopra */ --a2-sunken: #F7F8FA; /* incassi: testate di tabella, campi in sola lettura */ --a2-field: #F2F4F7; /* riempimento dei campi a riposo: stacca dalla scheda bianca */ --a2-field-h: #F7F8FA; /* campo sotto il mouse: si schiarisce; sul fuoco diventa bianco */ /* --------------------------------------------------------------------- Linee Una sola linea normale, una piu' marcata per separare regioni. --------------------------------------------------------------------- */ --a2-line: #E3E7ED; --a2-line-str: #D3D9E2; /* --------------------------------------------------------------------- Testo Quattro livelli. t3 e' l'ultimo che rispetta 4.5:1 sul fondo di pagina: sotto quello si scende solo su testo disabilitato, mai su contenuto. --------------------------------------------------------------------- */ --a2-t1: #171B24; /* titoli e testo primario */ --a2-t2: #565F73; /* corpo secondario, metadati */ --a2-t3: #646D85; /* etichette, segnaposto */ --a2-t-off: #98A0B2; /* solo disabilitato: NON usare per contenuto */ /* --------------------------------------------------------------------- Accento: verde inchiostro Un solo accento in tutto il sistema. Significa azione, selezione, fuoco, esito verificato. Non decora mai. --------------------------------------------------------------------- */ --a2-acc: #0D6259; --a2-acc-h: #0A4E47; /* sopra */ --a2-acc-p: #073C36; /* premuto */ --a2-acc-50: #EEF7F5; /* fondo tenue: riga selezionata */ --a2-acc-100: #D6EBE7; /* bordo tenue */ --a2-acc-t2: #3F6B65; /* testo secondario SU fondo accento tenue, tinto dalla tinta e non grigio */ --a2-acc-rail: #12796E; /* variante schiarita, per l'accento su fondo scuro: sul rail il verde base sta a 2,4:1 */ /* --------------------------------------------------------------------- Ambito dei prompt: colori categorici Non sono stati: dicono SU COSA lavora un prompt. L'etichetta ha sempre lo stesso sfondo grigio leggero; a cambiare sono bordo e icona, con colori accesi e lontani fra loro (blu, viola, ciano, magenta) perche' si distinguano a colpo d'occhio in una lista lunga. Il verde accento e l'ambra degli avvisi restano fuori da questa famiglia. --------------------------------------------------------------------- */ --a2-amb-azienda: #2F6BD6; --a2-amb-prodotto: #7A4BE6; --a2-amb-servizio: #0AA3B8; --a2-amb-risorsa: #D6338F; --a2-amb-generico: #8A93A8; /* Prompt (il comando per l'IA) e asset (un dato dell'azienda): due colori riservati, che nessun altro elemento usa. Non sono stati (verde, ambra, rosso) ne' formati (--a2-fmt-*). */ --a2-prompt: #4338CA; /* cornice e glifo del segno, scritta «Prompt» */ --a2-prompt-scuro: #3730A3; /* testo su fondo tenue */ --a2-prompt-tenue: #EEF0FF; /* fondo del segno */ --a2-asset: #86613F; /* cornice del segno, scritta «Asset» */ --a2-asset-testo: #6E4E30; /* glifo e testo su fondo tenue */ --a2-asset-tenue: #F5EFE8; /* fondo del segno e del frammento {{Nome}} */ --a2-asset-bordo: #CDB59A; /* contorno del frammento {{Nome}} */ /* Tipo di elemento: prompt (indaco) e asset (bruno), gli stessi colori dei segni (_Segno). Volutamente fuori dalle famiglie degli ambiti (blu, viola, ciano, magenta) e degli stati (verde, ambra, rosso), cosi' il tipo si distingue a colpo d'occhio anche accanto a un'etichetta di ambito o di stato. */ --a2-tipo-prompt: var(--a2-prompt); --a2-tipo-asset: var(--a2-asset); /* Il formato del contenuto, quando e' detto: testo, immagine, PowerPoint. Tre colori distinti fra loro e dai colori di prompt/asset e degli ambiti. */ --a2-fmt-testo: #5B6B3A; --a2-fmt-immagine: #2F6F8F; --a2-fmt-powerpoint: #B7472A; --a2-fmt-word: #2B579A; --a2-fmt-excel: #217346; --a2-fmt-html: #7A3E9D; --a2-fmt-pdf: #A83232; --a2-fmt-grafica: #B0397E; /* e il loro fondo, un velo dello stesso colore: la differenza si vede a colpo d'occhio */ --a2-fmt-testo-bg: #EEF1E4; --a2-fmt-immagine-bg: #E3EEF4; --a2-fmt-powerpoint-bg: #F8E7E1; --a2-fmt-word-bg: #E4EAF5; --a2-fmt-excel-bg: #E1F0E7; --a2-fmt-html-bg: #EFE6F5; --a2-fmt-pdf-bg: #F7E4E4; --a2-fmt-grafica-bg: #F6E3EE; /* --------------------------------------------------------------------- Obsolescenza: ambra Il segnale piu' distintivo del prodotto. Significa una cosa sola: questo contenuto e' stato generato con una versione precedente delle sue fonti. Non usarla per avvisi generici. --------------------------------------------------------------------- */ --a2-obs-50: #FDF6E9; --a2-obs-100: #F7E7C6; --a2-obs-200: #EFD8A8; --a2-obs-500: #B57614; --a2-obs-600: #8E5F14; --a2-obs-700: #7C4E0B; /* --------------------------------------------------------------------- Da rivedere: giallo Un fatto scritto da una proposta, che c'e' e non va rigenerato, ma un asset da cui e' nata la proposta e' cambiato dopo: va riletto. Non e' obsolescenza (l'ambra resta riservata a quella) e non e' un avviso generico. Il giallo e' quello del mockup 52. --------------------------------------------------------------------- */ --a2-riv-50: #FFFBEA; --a2-riv-100: #FFF4D6; --a2-riv-200: #F0D995; --a2-riv-500: #E0B43A; /* il tratto nella barra dei conti */ --a2-riv-700: #7A5A00; /* --------------------------------------------------------------------- Errore e distruzione: rosso Validazione fallita e azioni che tolgono qualcosa. Mai per "attenzione". --------------------------------------------------------------------- */ --a2-err-50: #FEF3F2; --a2-err-100: #FBDDDA; --a2-err-600: #B42318; --a2-err-700: #912018; /* --------------------------------------------------------------------- Lavoro in corso: blu Operazioni lunghe in esecuzione. Serve un colore proprio: senza, una riga in rigenerazione si confonde con una selezionata o con una obsoleta. --------------------------------------------------------------------- */ --a2-run-50: #EFF4FF; --a2-run-100: #D6E2FE; --a2-run-600: #175CD3; --a2-run-700: #1543A0; /* --------------------------------------------------------------------- Raggi Tre misure piu' la pillola. r1 controlli piccoli, r2 campi e pulsanti, r3 schede. La pillola e' riservata a marche e chip, mai alle schede. --------------------------------------------------------------------- */ --a2-r1: 6px; --a2-r2: 10px; --a2-r3: 14px; --a2-rp: 999px; /* --------------------------------------------------------------------- Elevazione Si dichiara UNA volta sola: o filo o ombra, mai un filo da 1px sotto un'ombra larga. Le ombre hanno offset e sfocatura, e sono tinte del neutro della pagina, non nere. --------------------------------------------------------------------- */ --a2-lift-1: 0 4px 12px -2px rgba(16,22,34,.10), 0 1px 3px -1px rgba(16,22,34,.08); --a2-lift-2: 0 16px 32px -12px rgba(16,22,34,.22), 0 4px 10px -4px rgba(16,22,34,.10); /* --------------------------------------------------------------------- Caratteri Geist per l'interfaccia, Geist Mono per prompt, identificativi e numeri. Il monospaziato e' metricamente imparentato: prompt e output sembrano due materiali della stessa famiglia, non due caratteri presi a prestito. --------------------------------------------------------------------- */ --a2-f-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif; --a2-f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* --------------------------------------------------------------------- Scala tipografica Passi espliciti. La misura di lettura si esprime in em e non in ch: in Geist "ch" misura la cifra, che e' piu' larga del carattere medio, e una colonna dichiarata 68ch rende 96 caratteri per riga. --------------------------------------------------------------------- */ --a2-fs-titolo: 27px; --a2-fs-sezione: 19px; --a2-fs-scheda: 14px; --a2-fs-corpo: 13.5px; --a2-fs-lettura: 15.5px; --a2-fs-meta: 12.5px; --a2-fs-mono: 13px; --a2-misura: 33em; /* circa 72 caratteri per riga, misurati */ /* --------------------------------------------------------------------- Movimento Uscita esponenziale da uno stato gia' visibile. Due durate: una per il feedback immediato dei controlli, una per i cambi di stato percepibili. --------------------------------------------------------------------- */ --a2-ease: cubic-bezier(.16, 1, .3, 1); --a2-fast: 110ms; --a2-med: 180ms; /* --------------------------------------------------------------------- Icone Cinque passi, non uno continuo. Le icone sono disegnate su una griglia di 24 unita' con tratto 1.5: a misure intermedie il tratto cade fra due pixel e il disegno si sporca. Questi cinque valori sono quelli su cui la famiglia e' stata verificata. Il nome e' --a2-dim-ico e non --a2-ico: lo spazio --a2-ico-* e' occupato dai simboli, e --a2-ico-lg accanto a --a2-ico-aziende sarebbe una trappola. --------------------------------------------------------------------- */ --a2-dim-ico-xs: 13px; /* dentro un chip o una marca */ --a2-dim-ico-sm: 14px; /* accanto a testo di metadato */ --a2-dim-ico: 16px; /* misura normale: menu, pulsanti, tabelle */ --a2-dim-ico-lg: 18px; /* testate di sezione */ --a2-dim-ico-xl: 28px; /* stati vuoti e intestazioni di scheda */ /* --------------------------------------------------------------------- Telaio --------------------------------------------------------------------- */ --a2-side-w: 232px; --a2-top-h: 57px; /* --------------------------------------------------------------------- Densita' Variabili, non valori fissi: la stessa tabella deve reggere due densita' senza riscrivere le regole. --------------------------------------------------------------------- */ --a2-riga-h: 40px; --a2-cella-y: 10px; --a2-cella-x: 12px; /* ===================================================================== Aggiunte richieste da a2-base.css e a2-bootstrap.css. Ogni valore qui sotto era scritto letterale nel riferimento visivo _design/v3/1-sidebar-fissa.html: e' stato promosso a token perche' nei fogli non deve comparire nessun letterale. ===================================================================== */ /* --------------------------------------------------------------------- Linee e superfici sotto il puntatore Un controllo deve rispondere prima del clic. Non sono colori nuovi: sono la linea normale scurita di un passo. --------------------------------------------------------------------- */ --a2-line-hov: #C2CAD6; /* bordo di campo o pulsante sotto il puntatore */ --a2-line-hov-2: #B4BDCB; /* controlli piccoli e pollice della barra di scorrimento */ --a2-surface-hi: #FCFDFD; /* superficie schiarita di un soffio sotto il puntatore */ /* --------------------------------------------------------------------- Testo su fondo pieno Dichiarato come token perche' "bianco su accento" e' un ruolo, e le regole non devono scrivere #fff. --------------------------------------------------------------------- */ --a2-su-pieno: #FFFFFF; /* --------------------------------------------------------------------- Stati delle tinte tenui Servono a dare a un fondo tenue il suo sopra/premuto senza cambiare tinta: altrimenti una riga selezionata non risponde al puntatore. --------------------------------------------------------------------- */ --a2-acc-50-h: #E6F2EF; /* riga selezionata sotto il puntatore */ --a2-acc-100-h: #C4E2DD; /* fondo accento tenue premuto */ --a2-acc-100-str: #B7DCD6; /* bordo accento tenue sotto il puntatore */ --a2-obs-25: #FFFDF8; /* superficie dentro un blocco ambra */ --a2-obs-150: #EBD3A4; /* bordo ambra sotto il puntatore */ --a2-obs-300: #E7CB92; /* fondo ambra premuto */ --a2-err-100-h: #F4C7C2; /* bordo errore tenue sotto il puntatore */ --a2-err-t2: #8A3A31; /* corpo secondario su fondo errore tenue */ --a2-run-t2: #35558F; /* corpo secondario su fondo blu tenue */ /* --------------------------------------------------------------------- Velo e ombra breve --------------------------------------------------------------------- */ --a2-velo: rgba(16, 22, 34, .34); /* oscuramento dietro un pannello */ --a2-lift-knob: 0 1px 2px rgba(16, 22, 34, .28); /* pomello di interruttore */ /* --------------------------------------------------------------------- Scala tipografica: passi mancanti --------------------------------------------------------------------- */ --a2-fs-sotto: 15px; /* sotto-sezione dentro una scheda */ --a2-fs-micro: 11.5px; /* metadati minori, ruoli, sottotitoli di riga */ --a2-fs-occhiello: 11px; /* occhiello maiuscoletto sopra un gruppo */ /* --------------------------------------------------------------------- Crenatura Negativa sui titoli, positiva sul maiuscoletto: il maiuscoletto senza spaziatura si legge come una parola compressa. --------------------------------------------------------------------- */ --a2-ls-titolo: -.021em; --a2-ls-sezione: -.017em; --a2-ls-scheda: -.008em; --a2-ls-nome: -.005em; --a2-ls-occhiello: .07em; /* --------------------------------------------------------------------- Pesi Quattro, non di piu'. 550 esiste perche' Geist e' variabile e fra 500 e 600 c'e' lo scalino che serve a distinguere un nome da un titolo. --------------------------------------------------------------------- */ --a2-w-normale: 400; --a2-w-medio: 500; --a2-w-forte: 550; --a2-w-titolo: 600; /* --------------------------------------------------------------------- Interlinea e misura --------------------------------------------------------------------- */ --a2-lh-titolo: 1.22; --a2-lh-fitta: 1.35; /* etichette, celle, controlli */ --a2-lh-corpo: 1.55; --a2-lh-lettura: 1.68; /* solo blocchi di testo lungo */ --a2-lh-mono: 1.8; /* il monospaziato ha bisogno di piu' aria */ --a2-misura-nota: 30em; /* testo di supporto: piu' corto del corpo */ /* --------------------------------------------------------------------- Fuoco da tastiera Un solo linguaggio in tutto il sistema: anello da 2px con distacco da 2px. Mai aloni, mai bordi che si ingrossano. --------------------------------------------------------------------- */ --a2-fuoco-w: 2px; --a2-fuoco-off: 2px; /* --------------------------------------------------------------------- Altezze dei controlli Token e non letterali, cosi' la densita' compatta li muove tutti. --------------------------------------------------------------------- */ --a2-ctl-h: 36px; /* campo di testo, selettore */ --a2-btn-h: 34px; --a2-btn-h-lg: 40px; --a2-btn-h-sm: 28px; --a2-btn-h-xs: 24px; --a2-tocco: 17px; /* lato della casella di spunta */ /* ===================================================================== Aggiunte richieste da a2-componenti.css e a2-shell.css. Stessa ragione delle precedenti: erano letterali nel riferimento visivo _design/v3/1-sidebar-fissa.html. ===================================================================== */ /* --------------------------------------------------------------------- Movimento: le due durate che mancavano --a2-fast e --a2-med coprono il feedback di un controllo. Restano fuori due casi che non sono feedback: il cambio di stato orchestrato su piu' elementi insieme, e i cicli che durano quanto dura l'attesa. --------------------------------------------------------------------- */ --a2-slow: 260ms; /* accensione dei punti dipendenti, a cascata */ --a2-ciclo: 900ms; /* attesa attiva: barre di scrittura, rotazione */ --a2-battito: 1050ms; /* cursore di scrittura: periodo diverso dal ciclo, cosi' i due segnali non vanno a tempo e non sembrano un unico blocco che pulsa */ /* --------------------------------------------------------------------- Piani di sovrapposizione Dichiarati insieme perche' il loro ordine e' l'unica cosa che conta. Una barra appiccicata dentro il contenuto deve stare sotto la barra superiore; il velo sopra il contenuto ma sotto il pannello che vela. --------------------------------------------------------------------- */ --a2-z-appiccicato: 15; /* provenienza e barra di form, sticky nel contenuto */ --a2-z-barra: 20; /* barra superiore */ --a2-z-velo: 30; --a2-z-pannello: 40; /* sidebar quando diventa pannello a scomparsa */ --a2-z-menu: 70; /* tendine: sopra ogni cosa */ /* --------------------------------------------------------------------- Telaio: la sidebar quando smette di essere una colonna Piu' larga della colonna fissa, non piu' stretta: da pannello copre il contenuto e non ha piu' bisogno di risparmiare spazio, e le voci lunghe ("Amministrazione", "Prompt Library") smettono di andare a filo. --------------------------------------------------------------------- */ --a2-side-pannello-w: 264px; /* --------------------------------------------------------------------- Densita': il quarto passo I tre token di cella misurano DENTRO una riga. Manca la misura del margine laterale di una scheda: e' cio' che allinea verticalmente la testata, le righe a tutta larghezza, il piede e la paginazione. Senza, ogni componente sceglie il suo e le colonne non si incolonnano. --------------------------------------------------------------------- */ --a2-bordo-x: 18px; /* --------------------------------------------------------------------- Interlinea: il passo stretto --a2-lh-fitta e' l'interlinea di una riga singola dentro un controllo. Manca il caso della coppia impilata - etichetta sopra, valore sotto, dentro la stessa altezza: il selettore azienda, il nome e ruolo dell'utente, il marchio e il profilo nella sidebar. Li' l'interlinea normale separa troppo e le due righe smettono di leggersi come un blocco solo. --------------------------------------------------------------------- */ --a2-lh-stretta: 1.2; /* ===================================================================== Aggiunte richieste da a2-metronic.css. a2-shell.css descrive il telaio del markup NUOVO e scrive alcune di queste misure come letterali. a2-metronic.css deve produrre lo stesso telaio sul markup VECCHIO, e non puo' permettersi di ripetere quei numeri: se i due fogli divergessero di due pixel, le pagine migrate e quelle da migrare avrebbero due sidebar leggermente diverse e nessuno saprebbe quale delle due e' quella giusta. Promuoverli a token e' il modo di dire che il numero e' uno solo. ===================================================================== */ /* --------------------------------------------------------------------- Barra superiore --------------------------------------------------------------------- */ --a2-logo-h: 22px; /* altezza del logo dentro la barra superiore: dentro 57px lascia respiro sopra e sotto */ --a2-top-gap: 14px; /* distacco fra i blocchi della barra */ /* --------------------------------------------------------------------- Voci di menu Derivate da --a2-riga-h e non fisse, cosi' la densita' compatta stringe anche la sidebar. Il minimo con max() e' il bersaglio da toccare: sotto i 26px una voce non e' piu' un bersaglio, e sotto i 24px non lo e' nemmeno una sotto-voce. --------------------------------------------------------------------- */ --a2-nav-h: max(26px, calc(var(--a2-riga-h) - 10px)); --a2-nav-h-sub: max(24px, calc(var(--a2-riga-h) - 14px)); --a2-nav-x: 10px; /* rientro laterale di una voce */ --a2-nav-gap: 10px; /* distacco fra icona ed etichetta */ --a2-nav-y: 1px; /* aria fra una voce e la successiva */ --a2-nav-sub-x: 20px; /* rientro del blocco di sotto-voci */ --a2-side-pad: 10px; /* margine interno della colonna di navigazione */ } /* Densita' compatta: si attiva aggiungendo a2-compatta accanto ad a2. Ridefinisce solo le variabili, mai le regole. */ .a2-compatta { --a2-riga-h: 30px; --a2-cella-y: 6px; --a2-cella-x: 10px; --a2-ctl-h: 32px; --a2-btn-h: 30px; --a2-btn-h-lg: 36px; --a2-btn-h-sm: 26px; --a2-btn-h-xs: 22px; --a2-bordo-x: 14px; }