/* I valori del disegno, e nient'altro. Le regole che li usano stanno in site.css. La separazione non è cosmetica: questi numeri vengono dal mock-up v17, che è il riferimento fermo del disegno, e sono gli unici che si confrontano con esso. Chi verifica una tinta guarda qui e non deve leggere un foglio di regole; chi cambia una regola non rischia di spostare una tinta. Il mock-up li tiene in un oggetto JavaScript e li interpola in ogni attributo `style`: qui diventano proprietà personalizzate, che è la stessa cosa detta in un posto solo. */ /* ─── I due temi ────────────────────────────────────────────────────────────────────────────── Chiaro è il predefinito e vive su :root, così una pagina senza attributo è già vestita. Scuro ridefinisce i soli valori che cambiano — struttura, spaziature e regole restano quelle di sopra. **I temi erano tre fino al 09/10**: l'industriale, con angoli vivi e bordi incisi, è uscito perché al committente non serve (07 §91). */ :root { color-scheme: light; /* **La tavolozza del chiaro viene dal redesign di Andrea** (07 §91), e ne prende i grigi freddi e il verde scuro di Imeta. Fino al 09/10 i grigi tendevano al verde e la barra laterale era verde chiara: ora il verde sta solo nell'azione principale, nel marchio e nella testata delle procedure. */ /* Superfici */ --page-bg: #F3F4F6; --card-bg: #FFFFFF; --input-bg: #FFFFFF; --disabled-bg: #F9FAFB; --chip-bg: #F1F3F5; --nav-active-bg: #EDF0F3; /* Inchiostri */ --text-primary: #1E2328; /* **Sopra la soglia di leggibilità, e misurato**: il #767C74 di prima dava 4,28 su bianco e 3,98 sul fondo dell'area di lavoro, contro i 4,5 che servono a un testo di questo corpo. Il secondario porta la data, il ruolo, le didascalie: sono le righe che si leggono di sfuggita. Questo dà 6,1 su bianco e 5,6 sul fondo. */ --text-secondary: #5A6273; --text-muted: #4B5361; --text-faint: #5A6273; --chip-ink: #3F4652; /* Filetti */ --border: #E7EBEF; --border-soft: #EEF1F4; --border-softer: #F3F4F6; --input-border: #DDE2E7; /* Il marchio. Non entra mai nell'area di lavoro — tabelle, immagini, grafici — dove verde e rosso significano già dentro e fuori tolleranza. È il verde scuro di Imeta (S.75); la testata delle procedure ne prende uno più cupo, perché sotto di lei c'è il pulsante dell'azione principale nello stesso verde, e una fascia identica si leggerebbe come un comando. */ --brand-surface: #154734; --brand-surface-raised: #0F3326; --brand-ink: #FFFFFF; --brand-ink-muted: #B9CDBF; /* La barra laterale. **La voce attiva è bianca e in rilievo**, con il filetto giallo: è lo stesso mezzo della selezione su celle e schede (07 §91.1). Su una barra quasi bianca un fondo verde pallido spegneva il giallo, e uno verde pieno faceva due verdi pieni per schermata. */ /* Il fondo da cui è stato ricavato il logo di Imeta, misurato: su un altro il suo bordo fa l'alone. */ --sidebar-bg: #F6F7F9; --sidebar-ink: #1E2328; --sidebar-ink-muted: #5A6273; --sidebar-active-bg: #FFFFFF; --sidebar-active-ink: #1E2328; --sidebar-filet: #FFE280; /* ── Le cinque tinte delle grandezze ── **Il colore di una grandezza dice dove cade la misura, non quale grandezza sia.** Verde, giallo e rosso qui dentro significano già la qualità del dato — dentro e fuori tolleranza — e usarli anche per identificare produceva quote rosse accanto a valori buoni. Restano liberi il **blu**, che è anche il colore del comando di cattura, e il **viola**. Tre regole assegnano tutte e diciassette (07 §38.1). La **tinta** dice la profondità nella piega: `cyan` al bordo esterno, `blue` nel corpo, `indigo` all'interno. Il **muted** dice che la grandezza sta di traverso all'asse. Il **neutral** dice che non è la piega — il contenitore. *Chi le usa:* i disegni delle grandezze, generati da `strumenti/icone-grandezze/`, e le quote sulla fotografia, che stanno in `params.css` e prendono la serie **scura** in tutti e tre i temi, perché il fondo lì è nero sempre. Queste tre serie sono per l'applicazione intorno. */ --seam-cyan: #0E7490; --seam-blue: #2270AE; --seam-indigo: #6152CC; --seam-muted: #4E7186; --seam-neutral: #6B7280; /* **La seconda serie di un confronto** nelle Statistiche (07 §66.15): una testa contro un'altra, o contro tutte le altre. Un prugna, perché tutto il resto è preso — verde, ambra e rosso dicono il giudizio, il blu è della cattura, blu e indaco sono le grandezze, il verde del marchio non entra nell'area di lavoro. La prima serie resta in inchiostro neutro. */ --series-compare: #9D3C8C; /* I due assi della calibrazione. Sono gli stessi colori con cui l'operatore trascina le maniglie sul fotogramma, e tornano nell'esito: chi ha tirato la maniglia indaco sull'asse verticale la ritrova indaco nel disegno. Qui c'è la resa **su scheda**; quella sulla fotografia sta in `params.css`, perché lì il fondo è nero in tutti e tre i temi. **Erano rosso e giallo fino all'11/09**, ed erano l'ultimo posto dell'applicazione in cui quei colori identificavano invece di dire la qualità del dato: sulla stessa schermata il rosso di una quota e il rosso di una misura fuori tolleranza volevano dire cose diverse. Adesso prendono `blu` e `indaco` della palette, come ogni altra grandezza. */ --quote-x-ink: #2270AE; --quote-y-ink: #6152CC; /* Gli stati di una misura. Sei, non tre: «da misurare», «senza limiti» e «implausibile» non sono gradi di tolleranza — il primo dice che il valore non c'è, il secondo che c'è ma nessuno ha deciso come giudicarlo (07 §69.2), il terzo che c'è ma non discende da nessun limite. Vanno letti come cose diverse, quindi si vedono diversi. «Senza limiti» è un grigio pieno: il numero è vero e si legge, ma non dice né dentro né fuori. */ --status-ok-ink: #15803D; --status-ok-bg: #E8F7EF; /* **L'attenzione ha due inchiostri, e non è un vezzo.** Uno veste i *numeri*, che vanno letti e devono reggere il contrasto su fondo chiaro; l'altro veste le *forme* — tacche, colonne, bordi, i segni disegnati — che sono spesse e possono permettersi l'ambra vera. Tenerne uno solo obbligava a scegliere fra un testo leggibile e una grafica gialla, e chi lo scelse prese il primo: da lì il ruggine che il committente legge come rosso, e sei voci nel suo foglio (*07* §51). */ --status-warning-ink: #92400E; --status-warning-mark: #D97706; --status-warning-bg: #FFF4DC; /* L'avviso che resta finché la condizione dura (`.notice`) ha i suoi due colori, presi dal redesign: un fondo pesca con un filetto appena più carico. Il fondo dell'attenzione non si tocca, perché nell'area di lavoro è un giudizio. */ --notice-bg: #FCF0E1; --notice-border: #FDDEBF; --notice-icon-bg: #FDE7CF; --notice-icon-ink: #C2570C; /* Le tessere dei riquadri della Home: il verde pallido del redesign, con l'icona nel verde scuro di Imeta. Sono della Home e non dell'area di lavoro, dove il verde dice «dentro tolleranza». */ --tile-bg: #ECF4EF; --tile-ink: #154734; --status-error-ink: #C62828; --status-error-bg: #FDEAEA; /* I due grigi degli stati senza giudizio sono freddi dal 09/10, come il resto della tavolozza (07 §91): erano verdolini, e accanto ai grigi nuovi si leggevano come un'altra cosa. Reggono il contrasto meglio di prima — 4,35 e 5,31 contro 3,81 e 4,29. */ --status-pending-ink: #6B7280; --status-pending-bg: #F1F3F5; --status-unjudged-ink: #5A6273; --status-unjudged-bg: #ECEFF3; --status-implausible-ink: #5A5D68; --status-implausible-bg: #ECEAF2; /* Raggi */ /* Più piccoli dal 09/10, con il redesign: 24 px di raggio su riquadri annidati facevano «app», 14 fanno «strumento». */ --radius-card: 14px; --radius-panel: 12px; --radius-btn: 10px; --radius-pill: 999px; /* Spaziature */ --pad-l: 26px; --pad-m: 20px; --gap: 16px; /* La linguetta delle luci, da chiusa. Sta fra i numeri decisi e non nel foglio delle regole perché la leggono in due: la linguetta stessa e la larghezza dell'area di lavoro di una procedura, che deve contenerla per restare uguale nei passi dove le luci non ci sono. */ --lights-tab: 30px; /* Quanto è larga al massimo una colonna di lettura. Le schermate che non hanno una tabella da stendere — Home, Impostazioni, Accesso — si fermano qui e restano centrate: una riga lunga quanto uno schermo da 27 pollici non si legge, e un riquadro largo il doppio del suo contenuto sembra vuoto. Ricette e Archivio non la usano: lì la larghezza serve. */ --content-max: 1080px; --shadow: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-raised: 0 8px 24px -8px rgba(0, 0, 0, 0.25); /* La cella o la scheda su cui si lavora si stacca dal fondo, come il tondo blu della cattura (S.50): il giallo dice «sei qui», il rilievo lo dice anche a chi guarda di sfuggita. Non è un colore, quindi non compete con quelli del giudizio. **Va verso il basso e quasi per niente ai lati**: griglia e «Catture» scorrono, e un contenitore che scorre taglia ai lati tutto ciò che esce oltre i suoi 5 px di margine. Un'ombra tonda era tagliata a destra e a sinistra; questa esce di 4 px ai lati e di 20 sotto. Scelta da Gianluca il 07/10 su scatti affiancati. */ --selection-relief: 0 16px 16px -12px rgba(15, 23, 31, 0.9), 0 6px 8px -6px rgba(15, 23, 31, 0.6); } :root[data-theme="dark"] { color-scheme: dark; --page-bg: #14171A; --card-bg: #1D2124; --input-bg: #22262A; --disabled-bg: #1A1D20; --chip-bg: #262B2E; --nav-active-bg: #262B2E; --text-primary: #F0F2F1; --text-secondary: #9AA1A6; --text-muted: #B7BDC2; --text-faint: #9AA1A6; --chip-ink: #C7CDD1; --border: #2A2F33; --border-soft: #262A2D; --border-softer: #22262A; --input-border: #33383C; /* Il marchio e la testata delle procedure: gli stessi verdi Imeta del chiaro (07 §91.10). Portano testo chiaro e nessun pulsante verde, quindi al buio non c'è contrasto da ritrovare. */ --brand-surface: #154734; --brand-surface-raised: #0F3326; --brand-ink: #F0F2F1; --brand-ink-muted: #B9CDBF; /* **La barra laterale è un grigio scuro freddo**, fra il fondo e la scheda, e la voce attiva fa come nel chiaro: più chiara, in rilievo, con il filetto **giallo** (07 §91.10). Fino al 09/10 il filetto qui diventava verde, e lo scuro aveva un secondo colore di selezione. */ --sidebar-bg: #191C1F; --sidebar-ink: #F0F2F1; --sidebar-ink-muted: #9AA1A6; --sidebar-active-bg: #262B2E; --sidebar-active-ink: #F0F2F1; --sidebar-filet: #FFE280; /* **L'azione principale al buio è un verde Imeta più luminoso**: quello del chiaro, `#154734`, su una scheda scura aveva un contrasto di 1,5 e il pulsante spariva — restava la scritta. Questo si stacca dalla scheda (3,2) e regge il testo bianco (5,0); quello ancora più chiaro scendeva sotto 4,5 con il testo. Resta lontano dal verde del «dentro tolleranza» dello scuro. Scelto da Gianluca su scatti affiancati. */ --action: #2E7D57; /* Le cinque tinte, sul fondo scuro: più chiare e più sature, o si spengono. */ --seam-cyan: #34C5E0; --seam-blue: #6BA6F5; --seam-indigo: #9E8FFB; --seam-muted: #8FAEC0; --seam-neutral: #9BA3AD; /* La seconda serie di un confronto, sul fondo scuro: più chiara, o si spegne. */ --series-compare: #E08AD0; /* Sul tema scuro le card sono scure: i due assi prendono le tinte chiare della palette, le stesse che portano sulla fotografia. */ --quote-x-ink: #6BA6F5; --quote-y-ink: #9E8FFB; --status-ok-ink: #4ADE80; --status-ok-bg: rgba(30, 142, 79, 0.22); --status-warning-ink: #F59E0B; --status-warning-mark: #FBBF24; --status-warning-bg: rgba(183, 121, 31, 0.22); --notice-bg: rgba(183, 121, 31, 0.22); --notice-border: #F59E0B; --notice-icon-bg: rgba(245, 158, 11, 0.20); --notice-icon-ink: #F59E0B; --tile-bg: #1F2A24; --tile-ink: #8FD0A6; --status-error-ink: #FF6B6B; --status-error-bg: rgba(209, 67, 67, 0.22); --status-pending-ink: #9AA1A6; --status-pending-bg: rgba(120, 130, 140, 0.22); --status-unjudged-ink: #B8BEC3; --status-unjudged-bg: rgba(150, 158, 165, 0.20); --status-implausible-ink: #B3B3C0; --status-implausible-bg: rgba(120, 120, 130, 0.28); --shadow: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-raised: 0 8px 24px -8px rgba(0, 0, 0, 0.5); --selection-relief: 0 16px 16px -12px rgba(0, 0, 0, 1), 0 6px 8px -6px rgba(0, 0, 0, 0.9); } /* ─── La scheda del marchio ─────────────────────────────────────────────────────────────────── L'accesso, lo splash e le Informazioni (07 §91.5). **È chiara in tutti e due i temi**, e non per gusto: i suoi tre disegni sono ricavati dal redesign per differenza dal loro fondo, e il loro bordo è giusto solo lì. I due fondi sono misurati sui file — componendo ciascuno sul fondo candidato e confrontandolo con l'immagine da cui viene — e non si toccano: cambiarli fa comparire un alone. Dentro la scheda gli inchiostri sono quelli del chiaro anche quando il tema è scuro, o il testo dei campi diventerebbe chiaro su chiaro. */ :root { --brand-card-main: #F1F3F4; --brand-card-owner: #F6F7F9; } .brand-card { color-scheme: light; --card-bg: #FFFFFF; --input-bg: #FFFFFF; --chip-bg: #F1F3F5; --text-primary: #1E2328; --text-secondary: #5A6273; --text-muted: #4B5361; --text-faint: #5A6273; --border: #E7EBEF; --input-border: #DDE2E7; --status-warning-ink: #92400E; --notice-bg: #FCF0E1; --notice-border: #FDDEBF; } /* ─── I valori che non dipendono dal tema ───────────────────────────────────────────────────── *L'azione principale sta qui con il valore del chiaro, e lo scuro la ridefinisce (07 §91.10): è il solo significato che cambia tinta con il tema, perché al buio il verde scuro di Imeta non si vedeva.* Il verde pieno è l'azione principale di una schermata, **una sola per schermata**; il giallo dice soltanto «sei qui»; il blu resta al solo anello del comando di cattura, perché richiama il pulsante fisico del banco. Sono le tre regole che si violano per distrazione, e restano fuori dai temi apposta: non sono scelte di taratura, sono significati. */ :root { --action: #154734; --action-ink: #FFFFFF; --step-accent: #FFE280; --step-accent-ink: #252C1C; --capture-ring: #3B6EA5; --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ─── I due registri visivi (03 §A.13) ──────────────────────────────────────────────────────── Non sono due temi: sono due tarature della stessa tavolozza, e convivono nella stessa pagina perché una procedura si apre in overlay sopra una schermata di navigazione. `desk` — l'utente è seduto, con mouse e tastiera, e consulta tabelle: la densità è un pregio. `bench` — l'utente è in piedi al banco, con le mani sporche o guantate, spesso con poca luce e sempre di fretta: tutto cresce, e i bersagli si distanziano. Sono qui, e non fra le regole, perché anche questi sono numeri decisi altrove che si confrontano con un documento. */ /* **Il registro della scrivania è cresciuto di due gradini il 09/10** (07 §91.9), sulla spinta del redesign: 14, 13 e 12 px erano valori da gestionale denso, giudicati da chi guarda dal proprio monitor. Crescono insieme testo, righe e bersagli. **Le tabelle hanno un corpo loro, e più grande**: sono ciò che si consulta, ed erano già a 16 per eredità — ora lo dicono, a 18, un gradino sopra il testo che le circonda. Misurato alla risoluzione del committente: nessuna tabella esce dal suo riquadro, nemmeno quella delle misure di Visualizza con sedici colonne. */ .register-desk { --text-body: 16px; --text-secondary-size: 15px; --text-label: 14px; --text-label-spacing: 0.06em; --text-label-transform: uppercase; --text-reading: 24px; --text-step: 16px; --text-title: 17px; --text-table: 18px; --row-height: 44px; --tap-target: 36px; --tap-gap: 8px; --icon-size: 16px; /* Il disegno di una grandezza non è un'icona: è la sezione vista di taglio con la parte misurata evidenziata, quindi ha dettaglio da leggere e una proporzione sua — 65 per 40. A 16 px, che è la misura delle icone di comando, resta una macchia colorata: guardato a schermo, sotto i 32 non si distingue un gancio da uno spessore. */ --param-icon-w: 40px; --param-icon-h: 25px; } .register-bench { --text-body: 17px; --text-secondary-size: 15px; --text-label: 14px; --text-label-spacing: 0.02em; --text-label-transform: none; --text-reading: 24px; --text-step: 20px; /* **Il titolo di un riquadro cresce come il resto.** Restava a 15 px anche qui, cioè più piccolo del testo corrente che gli sta sotto: al banco il nome della grandezza è la prima cosa che si legge — è ciò che dice *che cosa* si sta misurando — e si trovava sotto la soglia di tutto il resto. Nel disegno di riferimento sta a 19. */ --text-title: 20px; /* Le tabelle delle procedure restano al corpo di sempre: il banco ha già il suo, e il riepilogo della Misura è la tabella più larga dell'applicazione. */ --text-table: 16px; --row-height: 48px; --tap-target: 48px; --tap-gap: 12px; --icon-size: 20px; /* Al banco si guarda in piedi, e cresce come tutto il resto. */ --param-icon-w: 48px; --param-icon-h: 30px; }