/* tokens.css — la fonte unica del sistema visivo: colore, tipografia, angoli. Prima ogni foglio ridichiarava gli stessi valori con nomi diversi (--paper / --carta / --g-carta erano lo stesso #FFFBF0): stesso colore, tre nomi. Qui il valore vive UNA volta sotto un nome canonico; i vecchi nomi restano come alias che puntano al canonico, cosi' i fogli esistenti non vanno riscritti. Va caricato PRIMA degli altri fogli, su ogni pagina. Qui sta il sistema visivo condiviso: colore, tipografia, i raggi degli angoli (e, piu' avanti, la scala degli spazi). Le DIMENSIONI di layout dei singoli componenti (--col-totale 364px, --guscio-alto, --margine, --gutter, --bordo, --bs-table-*) restano nei fogli dove vivono: sono misure di quel pezzo, non primitive del sistema. */ :root { /* --- Colori canonici ------------------------------------------------------------ */ --paper: #FFFBF0; /* la crema di fondo */ --ink: #1A1209; /* l'inchiostro */ --accento: #D4784F; /* la terracotta: barrette, bordi, filetti */ /* Due terracotte, e la differenza non e' un vezzo. `--accento` chiaro va bene per la GRAFICA — barrette, bordi, filetti — dove il minimo di contrasto e' 3:1 e lui sta a 3,08. Per il TESTO serve 4,5:1, e il chiaro su fondo evidenziato dava 2,67: illeggibile proprio sulla cella piu' importante. `--accento-testo` e' lo stesso colore con dentro un terzo di inchiostro: 4,95 sul nome evidenziato, 5,70 in negativo sul badge. Stessa famiglia, leggibile. */ --accento-testo: rgb(147, 84, 54); --verde: #5C8A5E; /* il fatto, il concluso (dal tema: le mosse compiute della lavorazione) */ --muted: color-mix(in srgb, var(--ink) 55%, transparent); /* testo tenue */ --line: color-mix(in srgb, var(--ink) 17%, transparent); /* filetto */ --filo-lieve: rgba(26, 18, 9, .08); /* filetto ancora piu' lieve */ --evidenza: #FAEEE0; /* riga/cella evidenziata */ /* Il grigio caldo tenue, uno solo. Prima erano tre sfumature quasi identiche (#EFEBE0 / #F2EEE3 / #F4F0E4, scarto <=5 su 255): convergono qui, agganciate ai token base come gia' fanno --muted e --line. Il valore risolto e' #EFEBE0. */ --nebbia: color-mix(in srgb, var(--ink) 7%, var(--paper)); /* --- Rilievo: l'alzato e l'incasso ---------------------------------------------- Portati dal Tema Leadora il 19/08 per unificare i due lavori. Non sono decorazione: sono la META' che mancava all'app. Un mondo dove tutto e' piatto non ha gerarchia tattile — e uno dove tutto si alza non e' credibile, perche' se ogni cosa sta sopra niente sta sopra. Servono tutti e due: la scanalatura in cui il comando corre, e il comando che ci corre dentro. (Raffaele, 18/08 sul tema.) ⚠️ L'ombra dell'incasso sta in ALTO e schiarisce in basso: e' cosi' che si legge un incavo sotto una luce che viene dall'alto — la stessa luce che getta le ombre di sotto. Se le due luci non concordano, il rilievo si sfalda. */ --bianco: #FFFFFF; --alzato: color-mix(in srgb, var(--bianco) 55%, var(--paper)); --alzata: 0 1px 2px color-mix(in srgb, var(--ink) 9%, transparent), 0 8px 20px color-mix(in srgb, var(--ink) 10%, transparent); --incasso: inset 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--paper) 70%, transparent); --grigio: color-mix(in srgb, var(--ink) 4.5%, var(--paper)); /* ⚠️ SERVONO DUE ALTEZZE, NON UNA — e questa e' la ragione per cui arrivano dal tema il 20/08. Con una sola alzata ogni cosa sollevata sta alla stessa quota: nel cassetto di un'azienda erano sei riquadri tutti a filo, e il piu' importante — i numeri dell'energia — non si distingueva dalla nota a pie' di pagina. Due quote e un incasso fanno una GERARCHIA leggibile senza leggere: quanto piu' una cosa e' staccata dal foglio, tanto prima la si guarda. `--sospesa` non e' una terza quota della stessa scala: e' cio' che si stacca del tutto e COPRE la pagina — un pannello che si affaccia, non un oggetto posato. */ /* ⚠️ LA SECONDA QUOTA DI RIPOSO NON E' L'OMBRA DEL PASSAGGIO, e tenerle separate conta. `--alzata-su` e' cio' che succede sotto il dito: e' un'ombra da MOMENTO, e va bene che sia decisa perche' dura mezzo secondo. Una cosa che sta sempre a quella quota, invece, si legge come se fosse perennemente sollevata da qualcuno — pesante, appiccicata. La quota alta di riposo e' piu' bassa e piu' morbida: si vede che sta sopra, non che galleggia. (Raffaele, 20/08: «voglio che l'effetto sia delicato».) */ --alzata-alta: 0 2px 3px color-mix(in srgb, var(--ink) 7%, transparent), 0 12px 26px color-mix(in srgb, var(--ink) 10%, transparent); --alzata-su: 0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent), 0 14px 30px color-mix(in srgb, var(--ink) 14%, transparent); /* PREMUTO non vuol dire sparito: l'oggetto scende e TOCCA la carta, quindi resta l'ombra di contatto e se ne va quella d'altezza. Con `box-shadow: none` sembrava svanito. */ --alzata-giu: 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); --sospesa: 0 10px 30px color-mix(in srgb, var(--ink) 18%, transparent); /* ⚠️ LA SCANALATURA: il separatore inciso che sostituisce la riga grigia piatta (Raffaele, 21/08: «un effetto ombra al posto delle linee, piu' material»). Due fili sotto il bordo dell'elemento: uno scuro e, un pixel piu' giu', uno di luce — e' come si legge un solco sotto la stessa luce dall'alto di tutto il resto del rilievo. Si usa come box-shadow al posto di border-bottom; l'elemento non cambia misura, quindi niente layout che balla. */ --solco: 0 1px 0 color-mix(in srgb, var(--ink) 11%, transparent), 0 2px 0 color-mix(in srgb, var(--bianco) 75%, transparent); /* La curva del tema: parte decisa e si posa. Una sola, per tutto cio' che si muove. */ --dolce: cubic-bezier(.16, .84, .44, 1); /* I comandi di sistema (caselle, spunte, calendari) arrivano col blu di serie: questa e' l'unica leva che quel disegno ascolta. */ accent-color: var(--accento); /* --- L'insegna: nome e payoff ----------------------------------------------------- Il rapporto 22/12 non e' arbitrario: a 15/12 il payoff sembrava largo quanto il nome. A 1,8 la gerarchia si legge da sola. */ --insegna: 19px; --insegna-payoff: calc(var(--insegna) * 12 / 22); --insegna-tracciato: .18em; /* --- La scala tipografica, quattro misure e basta -------------------------------- Misurato il 19/08: il tema usa SEI misure e due sole (12 e 15) fanno il 95% del lavoro. Quest'app ne usava VENTI — comprese 9.5, 10.5, 11.5, 12.5, 13.5 — e viveva tutta fra 9 e 14px, cioe' una taglia sotto il tema. E' il motivo per cui le stesse pagine qui sembravano compresse e li' respiravano. Da qui in avanti si prende da questa scala. Una misura fuori scala e' una decisione, e va motivata sul posto. */ --testo-nota: 12px; /* etichette, colonne, tutto cio' che accompagna */ --testo: 15px; /* il corpo: righe di tabella, voci, campi */ --testo-forte: 22px; /* nomi grandi, sottotitoli */ --testo-titolo: 30px; /* il titolo della schermata */ /* --- Tipografia canonica -------------------------------------------------------- */ --display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* --- Angoli: due raggi soli. Uno per controlli, card e contenitori; uno per le pill. Prima erano sette misure diverse (2/3/4/5/6/7/11px + 999): ora sono due. Restano fuori solo `0` (squadrato voluto) e `50%` (cerchio): sono forme, non raggi. Da 3px a 10px il 12 agosto, scelta di Raffaele: angoli piu' morbidi. Essendo un token solo, il cambio vale per tutta l'interfaccia in un colpo — ed e' per lo stesso motivo che si torna indietro cambiando questa riga e basta. */ --raggio: 10px; --raggio-pill: 999px; /* L'ALTEZZA DEL FOGLIO DEGLI STRUMENTI da telefono (Raffaele, 21/08): attivita', note, task, appuntamenti e il compositore email aprono TUTTI alla stessa altezza — quella che aveva la scheda Task, presa a riferimento. Un foglio che cambia statura a ogni scheda fa ballare il pollice; uno costante diventa un posto. */ --foglio-alto: min(540px, 70dvh); /* --- Spazi: una scala sola, multipli di 4. E' il riferimento per il codice nuovo. I valori esistenti NON sono stati riscritti in blocco: in questa tappa abbiamo solo riportato alla griglia i vicini a <=1px (5->4, 7/9->8, 11/13->12, 15->16, 19/21->20, 43->44), un aggiustamento invisibile. Il "ritmo di casa" (10/14/18/22/26) resta. */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; /* --- La gabbia: larghezza della colonna centrale, uguale su tutte le pagine (il "punto fisso" del layout). Non e' una misura di componente (quelle stanno nei fogli): e' la colonna condivisa da Contatti, Scheda e Sequenze. Il Kanban e' l'eccezione voluta (board a scorrimento orizzontale). Prima ogni pagina aveva la sua (1310/94vw, 1310/91vw, 1180px): divergevano. */ --contenuto: min(1310px, 92vw); /* --- Alias: i vecchi nomi, perche' i fogli esistenti non vanno riscritti -------- Stessi valori di prima; l'unica differenza visibile in questa tappa e' --nebbia. */ --carta: var(--paper); --g-carta: var(--paper); --inchiostro: var(--ink); --g-inchiostro: var(--ink); --sage: var(--accento); --terra: var(--accento); --terracotta: var(--accento); --g-terracotta: var(--accento); --terra-testo: var(--accento-testo); --tenue: var(--muted); --g-tenue: var(--muted); --filo: var(--line); --g-filo: var(--line); --mist: var(--nebbia); --corpo: var(--body); --g-corpo: var(--body); } /* --- I CAMPI SONO BIANCHI. DAPPERTUTTO. ------------------------------------------- * * Regola di Raffaele (19/08): «quando c'è un input deve essere sempre su fondo bianco». * Prima erano `--alzato`, cioè bianco al 55% sulla carta avorio: su un fondo già caldo la * differenza era così piccola che il campo non si leggeva come un contenitore: sembrava * una zona un po' più chiara del foglio. Il bianco pieno lo stacca e dice «qui si scrive», * che è l'unica cosa che un campo deve dire prima di essere toccato. * * ⚠️ QUESTA REGOLA STA IN UN FILE DI TOKEN, e non è una svista. Serve che valga su OGNI * pagina — compreso l'accesso, che non carica né style.css né guscio.css perché non ha la * barra. `tokens.css` è l'unico foglio che arriva davvero dappertutto: metterla altrove * avrebbe voluto dire scriverla due volte e vederle divergere, che è esattamente il difetto * che oggi abbiamo passato la giornata a togliere dal guscio. * * Il rilievo resta quello del tema: il campo si alza dalla carta E si scava dentro. Sono le * due ombre insieme a farlo sembrare un oggetto invece che un rettangolo più chiaro. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .form-control, .form-select { background-color: var(--bianco); } .form-control, .form-select { border-color: transparent; box-shadow: var(--alzata), var(--incasso); transition: box-shadow .2s var(--dolce); } .form-control:focus, .form-select:focus { background-color: var(--bianco); border-color: var(--accento); box-shadow: var(--alzata), var(--incasso), 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent); } /* --- SU TOUCH I CAMPI STANNO A 16px, ED E' IL BUG DELLO SCORRIMENTO LATERALE ------- * * ⚠️ LA SOGLIA SI TRASCINAVA DI LATO SUL TELEFONO DI RAFFAELE mentre ogni misura qui * diceva zero sbordo — cacciato per ore il 19/08, accantonato, capito il 21/08. La misura * diceva il vero: non c'e' MAI stato niente fuori dal bordo. Ma su iOS (Safari e Chrome, * stesso motore) un campo con corpo SOTTO i 16px fa ZOOMARE la pagina al momento del * focus: da li' la finestra visiva e' piu' stretta di quella di impaginazione, e la pagina * si trascina di lato pur essendo perfettamente contenuta — e spesso resta cosi' anche * dopo aver chiuso la tastiera. Sulla soglia il campo lo tocchi PER FORZA (devi scrivere * la password), quindi il difetto c'era sempre; e nessuna misura di overflow puo' vederlo, * perche' l'overflow non esiste — esiste lo zoom. * * Il rimedio e' togliere il grilletto: A 16px iOS NON ZOOMA. `pointer: coarse` e non una * larghezza, perche' e' il dito il discriminante, non lo schermo. E `max(16px, 1em)` e non * `16px` secco: un campo che gia' scrive piu' grande non deve scendere. * * ⚠️ IL 16 E' FUORI SCALA (12/15/22/30) ED E' UNA DECISIONE, motivata qui come la scala * impone: non e' tipografia, e' meccanica del motore — la soglia sotto cui iOS interviene * e' 16, e la scala non puo' negoziarla. Vale per TUTTI i campi di TUTTE le pagine (la * ricerca di Contatti, i moduli admin, la soglia): il grilletto e' lo stesso ovunque. */ @media (pointer: coarse) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .form-control, .form-select { font-size: max(16px, 1em); } } /* --- I PULSANTI DI BOOTSTRAP NON DIVENTANO BLU SOTTO IL DITO ----------------------- * * ⚠️ IL BLU COMPARIVA SOLO PREMENDO, ed e' per questo che e' sopravvissuto a due giorni di * restyling: a riposo i nostri fogli ridipingono i bottoni con le loro classi, ma lo stato * `:active` di Bootstrap (`.btn:first-child:active, :not(.btn-check)+.btn:active`) pesa * 0-2-1 e vince su qualunque nostra classe singola — e dentro ci mette * `--bs-btn-active-bg`, che di serie e' il suo blu. Su telefono si vede sempre, perche' * il tocco E' un active. (Raffaele, 21/08: «quando clicco sul bottone diventa blu».) * * Non si combatte la specificita': SI COMPILANO LE SUE VARIABILI, che e' la stessa cura * gia' usata nel tema («i pulsanti hanno i loro --bs-btn-*, compilati alla sorgente») e * qui sotto per le spunte. Premuto = l'accento scurito verso l'inchiostro, come nel tema. * Sta in tokens.css perche' deve valere anche sulla soglia, che style.css non lo carica. */ .btn { --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 25%, transparent); } .btn-primary { --bs-btn-color: var(--paper); --bs-btn-bg: var(--accento-testo); --bs-btn-border-color: var(--accento-testo); --bs-btn-hover-color: var(--paper); --bs-btn-hover-bg: var(--accento); --bs-btn-hover-border-color: var(--accento); --bs-btn-active-color: var(--paper); --bs-btn-active-bg: color-mix(in srgb, var(--accento-testo) 86%, var(--ink)); --bs-btn-active-border-color: color-mix(in srgb, var(--accento-testo) 86%, var(--ink)); --bs-btn-disabled-bg: var(--line); --bs-btn-disabled-border-color: var(--line); --bs-btn-disabled-color: var(--paper); } .btn-outline-primary, .btn-light { --bs-btn-color: var(--accento-testo); --bs-btn-bg: var(--alzato); --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--paper); --bs-btn-hover-bg: var(--accento); --bs-btn-hover-border-color: var(--accento); --bs-btn-active-color: var(--paper); --bs-btn-active-bg: var(--accento); --bs-btn-active-border-color: var(--accento); } /* La crocetta delle finestre: il suo anello di fuoco era blu anche lui. */ .btn-close { --bs-btn-close-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 25%, transparent); } /* --- LE SPUNTE PARLANO LA NOSTRA LINGUA -------------------------------------------- * `accent-color` in :root basta per i comandi che il browser disegna da se', ma NON per * quelli di Bootstrap: la sua casella si dipinge il fondo blu da sola quando e' spuntata, * e vince perche' e' una regola, non un colore di sistema. Va vestita a parte — e' la * stessa trappola gia' incontrata nel tema. (Raffaele, 19/08: «la spunta non blu ma sempre * con colore tema terra».) */ .form-check-input:checked { background-color: var(--accento); border-color: var(--accento); } .form-check-input:focus { border-color: var(--accento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent); } /* I CAMPI DI INPUT SONO BIANCHI, DAPPERTUTTO (Raffaele, 21/08): il grigio e' dei vassoi che si leggono, il bianco e' di cio' che si tocca — e un campo si tocca. Le classi con un fondo loro (piu' specifiche di questa regola) sono state portate al bianco una per una: questa copre i campi di domani, perche' la regola non si debba ricordare. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { background-color: var(--bianco); }