/* ============================================================ SmartImmigrate — strato componenti Da aggiungere DOPO variables.css e PRIMA di components.css. Metodo preso da adotta.me (assets/styles/app.css), che risolve lo stesso problema: un CSS che stila pagine invece di componenti. Tre regole che valgono più del contenuto di questo file: 1. ALIAS, NON SOSTITUZIONI. I nomi dei token esistenti restano e puntano ai nuovi valori. Così la palette cambia ovunque senza toccare una riga delle 798 di components.css, e senza rompere nulla se un template usa ancora il vecchio nome. 2. CLASSI, NON ELEMENTI. Ogni componente ha la sua classe con prefisso `sim-`. Mai regole su `button`, `select`, `a`: una sola regola larga su un elemento vince per specificità su tutto il resto e costringe a rincorrerla con !important. (Verificato sul campo: una regola `button:not(...):not(...):not(...)` ha continuato a vincere anche contro !important, e ho dovuto cancellarla invece di batterla.) 3. "MUTED" È INCHIOSTRO PIÙ SCURO, MAI GRIGIO PALLIDO. Regola presa di peso da adotta.me. Un grigio chiaro su fondo chiaro non passa il contrasto AA: misurato su questa pagina, #8B959E su bianco dà 3.05 e #DDE2E8 dà 3.92, entrambi sotto il minimo di 4.5. ============================================================ */ /* ---------- il carattere, servito da noi ---------- */ /* Substory #706. Public Sans resta il carattere — quello che i clienti vedono da #768 — ma smette di arrivare dal CDN di Google. Sono gli STESSI tre file che `fonts.googleapis.com/css2?family=Public+Sans` serviva finora (Public Sans v21, gli stessi tre sottoinsiemi con gli stessi `unicode-range`), scaricati una volta e messi in `static/fonts/`. Quindi il byte che arriva al browser è lo stesso di ieri: cambia solo da dove. Perché `font-weight: 100 900` e non quattro regole: il file è VARIABILE (asse `wght`, tabella `fvar` verificata sui tre file). La richiesta al CDN chiedeva `wght@400;500;600;800` e Google rispondeva comunque con il variabile e questo stesso intervallo — quattro pesi statici sarebbero quattro file al posto di uno, e i pesi intermedi smetterebbero di esistere. Tre sottoinsiemi e non uno solo, per la stessa ragione: sono quelli che il CDN separava. `latin` copre en/it/fr, `latin-ext` i diacritici, `vietnamese` il suo. Con `unicode-range` il browser scarica solo quello che la pagina usa — sulla landing è il solo `latin`, 26 KB. Hindi, coreano e cinese non sono coperti da Public Sans e non lo erano nemmeno prima: cadono sullo stack di sistema come sempre. Il link Noto Nastaliq Urdu in base.html resta al CDN: serve un altro alfabeto e toglierlo è un cambio a sé (decisione del product owner su #706). `font-display: swap` come prima: il testo si legge subito col carattere di sistema e viene sostituito all'arrivo, invece di restare invisibile. */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/PublicSans-vietnamese.f6cafde7602f.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/PublicSans-latin-ext.d0a5d26ee7e7.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/PublicSans-latin.e4c9b081863a.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- Palette --- */ --sim-ink: #0E1418; /* testo e azioni primarie */ --sim-ink-2: #3C464E; /* testo secondario */ --sim-muted: #5E6872; /* terziario: 5.68 su bianco, passa AA */ --sim-line: #E3E7EC; --sim-line-strong:#D5DAE0; --sim-surface: #FFFFFF; --sim-soft: #F4F5F8; /* fondo di sezione */ --sim-page: #F2F3F5; /* fondo pagina: DEVE differire da surface */ --sim-red: #D22B3E; /* identità e stati d'errore. Non è il colore delle azioni */ --sim-red-soft: #FDECEE; --sim-red-ink: #B02334; /* rosso leggibile su fondo rosa: 5.87 su --sim-red-soft */ /* Bug #839. L'ACCENTO: l'unico fondo rosso di una schermata, e ce n'è UNO. La riga sopra il rosso dice "identità e stati d'errore. Non è il colore delle azioni", e da #768 era vero: l'azione era l'inchiostro. Misurato in produzione, il risultato erano QUATTRO controlli neri per schermata — Accesso, la graffetta, Invia, Analizza — cioè quattro azioni primarie e quindi nessuna. L'inchiostro come base è un idioma legittimo, ma regge solo finché l'accento è RARO; qui non c'era nessun accento. Rimettere il rosso su OGNI bottone — la lettera di ADR-0004 — è l'errore opposto e fa più danno: le pagine di servizio di IRCC sono rosse su bianco, e un servizio privato che dipinge di rosso ogni azione comincia a somigliare al sito governativo che non è. È il vincolo che `templates/includes/_brandmark.html` scrive già per la foglia d'acero. Quindi: inchiostro come base, UN accento per schermata, e l'accento è un rosso che il sistema ha già — nessun quarto rosso. La coppia è la stessa forma di --sim-red / --sim-red-ink: il fondo, e la sua versione più profonda per lo stato sopra. Misurato: bianco su --sim-accent 5.05:1, bianco su --sim-accent-hover 6.70:1, e --sim-accent come TESTO dà 5.05 su --sim-surface e 4.64 sul fondo pagina --neutral-100 (#F4F5F8) — il caso peggiore è il link di base.css:34, e passa. A CHI VA l'accento lo decide `[data-primary-action]` più sotto, non una classe di variante. La ragione sta in quella regola. */ --sim-accent: var(--sim-red); --sim-accent-hover: var(--sim-red-ink); /* Substory #706. La sfumatura d'IDENTITÀ, e il rosso è l'unica cosa che può esserci dentro. Da #768 l'azione primaria è l'inchiostro --sim-ink e il rosso è "identità e stati d'errore" (riga sopra): una sfumatura mescolata dall'inchiostro sarebbe una macchia grigia su una pagina già quasi nera, cioè il nome "gradient-primary" preso alla lettera e mancato nel senso. I due estremi sono i due rossi che esistono già — nessun colore nuovo: --sim-red e il suo inchiostro --sim-red-ink, che è lo stesso rosso più profondo, quindi la sfumatura scurisce invece di cambiare tinta. 135deg: diagonale dall'alto a sinistra, la direzione di lettura. Nessuno la consuma ancora — la consuma #707 in poi (#706 di suo non cambia un pixel, ed è voluto). */ --sim-gradient: linear-gradient(135deg, var(--sim-red) 0%, var(--sim-red-ink) 100%); --sim-ok: #1F7A55; --sim-ok-soft: #E4F3EC; /* --sim-ok su questo fondo: 4.61, passa */ --sim-warn: #9A6A0F; --sim-warn-soft: #FBF1DC; /* Bug #765. Stessa storia di --sim-red-ink, che esisteva già: il colore di stato NON è leggibile sul proprio fondo tenue. Misurato, non stimato: --sim-warn su --sim-warn-soft dà 4.21, sotto il minimo di 4.5. Serve un inchiostro dedicato, come per il rosso. 5.13 su --sim-warn-soft, 5.75 su bianco. Il verde non ne ha bisogno (4.61), quindi non gliene diamo uno: un token in più che nessuno deve usare è un token che qualcuno userà. */ --sim-warn-ink: #8A5D0A; --sim-radius-sm: 9px; --sim-radius: 12px; --sim-radius-lg: 18px; --sim-shadow: 0 1px 2px rgba(14,20,24,.04), 0 8px 24px rgba(14,20,24,.06); /* Substory #706. I due gradini che mancavano alla scala, ed è una scala solo se sono qui: #768 ha portato --shadow-md/--shadow-lg su --sim-shadow e ha lasciato --shadow-sm/--shadow-xl sul nero piatto pre-#768, così la pagina dipinge DUE famiglie d'ombra affiancate — --shadow-sm su due superfici di pages/chat.css e una di components.css, --shadow-xl sulla modale di layout.css. La tinta è --sim-ink (14,20,24), la stessa di --sim-shadow e non un grigio nuovo: un'ombra nera su una pagina d'inchiostro è l'unica cosa che si vede "sporca". Scritta in rgba() e non in esadecimale-con-alfa perché è la forma che la riga sopra usa già. --sim-shadow-sm tiene la geometria di prima (0 1px 2px): cambia solo la tinta, e sono superfici piccole già in produzione. --sim-shadow-xl invece cresce davvero, da 24px a 32px di sfocatura, e non è un ritocco: --sim-shadow misura 24px, quindi un xl da 24px non è un gradino sopra lg, è lg con un altro nome. L'unica cosa che porta xl è la MODALE, che galleggia sopra tutta la pagina e deve staccarsi dal velo che le sta sotto. Due strati come --sim-shadow, con l'alfa più alta per lo stesso motivo (.05/.10 contro .04/.06): più in alto sta una cosa, più l'ombra la deve sollevare. */ --sim-shadow-sm: 0 1px 2px rgba(14,20,24,.06); --sim-shadow-xl: 0 2px 4px rgba(14,20,24,.05), 0 12px 32px rgba(14,20,24,.10); --sim-tap: 44px; /* bersaglio touch minimo */ /* Substory #778. Lo stato PREMUTO, in una dichiarazione sola, perché deve essere lo stesso su ogni controllo: un'ombra interna, cioè il controllo che rientra. È un'OMBRA e non un fondo di proposito — il fondo è già occupato da `:hover` e dalle varianti (`--primary`, `--danger`, `[aria-pressed="true"]`), e uno stato premuto che si contende la stessa proprietà dello stato sopra il quale arriva o perde per specificità o costringe a rincorrerla, che è la regola 2 in testa a questo file una scala più in basso. Su una proprietà che nessun altro dichiara per questi componenti non c'è gara di specificità da vincere. Non è animata: la pressione deve essere immediata — "un tocco su un telefono è riconosciuto PRIMA che la pagina cambi" (#778, passo 3) — e 150ms di ritardo su un tap sono esattamente il ritardo che il tocco vuole smentire. DUE TOKEN E NON UNO, ed è la correzione della prima stesura di #778. L'ombra è `--sim-ink` al 20%: su un fondo chiaro scurisce, ma su un fondo che è GIÀ `--sim-ink` non dipinge NIENTE — 0.8x(14,20,24) + 0.2x(14,20,24) fa (14,20,24), esattamente il colore di partenza. Non "poco visibile": zero pixel. E i fondi `--sim-ink` sono `.sim-btn--primary` (Scarica ZIP, Assegna, il primo Carica) e `.sim-btn[aria-pressed="true"]` (il filtro selezionato), cioè le azioni PRIMARIE della pagina — proprio quelle per cui il passo 3 esiste, visto che su un telefono non c'è nessun hover a coprire il buco. Quindi la stessa ombra, invertita, per i fondi scuri: è l'idioma che `.sim-btn--danger:hover` usa già più sotto — non un colore nuovo, la coppia scambiata. Stessa geometria e STESSA alfa, perché il passo che se ne ricava è già identico: in aritmetica il 20% di nero porta `--sim-soft` (244,245,248) a (198,200,203) e il 20% di bianco porta `--sim-ink` (14,20,24) a (62,67,70), cioè 46 e 48 punti per canale. Sullo schermo la sfumatura non arriva mai all'alfa pieno e il picco misurato è 34 sul primario contro 35 sul `--ghost` (Chromium headless, `:active` forzato senza hover, confronto a pixel): la pagina risponde al dito con la stessa forza ovunque, che è tutto quello che una dichiarazione sola doveva comprare. Prima di questa riga lo stesso confronto dava 1 e 2 punti sul primario e sul filtro selezionato — rumore di arrotondamento, non uno stato. Il nome dice a chi va: `--sim-press` a tutti i fondi chiari, `--sim-press-on-dark` ai due che portano `background: var(--sim-ink)`. */ --sim-press: inset 0 2px 5px rgba(14,20,24,.20); --sim-press-on-dark: inset 0 2px 5px rgba(255,255,255,.20); /* Public Sans: disegnato per moduli e testi normativi, quindi porta il registro giusto senza sembrare un marchio. Un carattere solo, con una scala di pesi usata sul serio — è la scala, non la famiglia, a fare la differenza. Nessun serif: qui non c'è testo lungo da leggere. */ --sim-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* --- ALIAS: i nomi già usati da components.css puntano qui --- */ --font-family: var(--sim-font); /* Bug #839. `--primary` faceva DUE mestieri sotto un nome solo: era il colore del MARCHIO (i link di base.css:34, gli anelli di fuoco, i bordi della drop zone) ed era il FONDO di ogni bottone pieno. Finché i due mestieri stanno sullo stesso token, una riga li cambia entrambi — ed è successo: #768 ha scritto `--primary: var(--sim-ink)` e ha spento insieme il rosso del marchio e la gerarchia dei bottoni, ribaltando ADR-0004 (Accettata) senza toccarla e lasciando i link di corpo dipinti dell'inchiostro del testo che li circonda. Ora sono due token con due mestieri, ed è la separazione che impedisce alla prossima riga sola di rifare lo stesso danno: --primary il MARCHIO. Torna al rosso, come ADR-0004 chiedeva. --action-fill il FONDO di un bottone pieno. Resta l'inchiostro. `--primary-bg` non si muove: era ed è il grigio tenue di sezione, e una pagina che si accende di rosa a ogni campo a fuoco è la cosa che questo bug viene a togliere, non a spostare. */ --primary: var(--sim-accent); --primary-hover: var(--sim-accent-hover); --action-fill: var(--sim-ink); --action-fill-hover: var(--sim-ink-2); --primary-bg: var(--sim-soft); --neutral-900: var(--sim-ink); --neutral-800: #242C33; --neutral-700: var(--sim-ink-2); --neutral-600: var(--sim-muted); /* Bug #765. Era #7A8794, ed è la causa singola di quattro delle tredici righe rosse: `.no-docs` (3.67 su bianco), `.drop-zone-hint` (3.37 su --sim-soft), la `x` di chiusura delle modali e il toggle mostra-password (3.67 entrambi). È la regola 3 in testa a questo file, scritta e poi non applicata a questo gradino. Perché diventa un alias invece di un grigio un po' più scuro: il 500 deve passare 4.5:1 sul fondo di sezione --sim-soft (#F4F5F8), non solo sul bianco. Il grigio più chiaro che ci riesce è circa #667080, che dà 4.59 — nove millesimi di margine sul fondo pagina #F2F3F5 — ed è comunque indistinguibile a occhio da --sim-muted. Un gradino che nessuno vede e che passa per un pelo non è un gradino: è un 600 con un altro nome. Meglio dirlo. La gerarchia fra testo secondario e terziario resta affidata a --neutral-700 / --neutral-600, che sono davvero diversi. */ --neutral-500: var(--sim-muted); --neutral-400: #B4BCC4; --neutral-300: var(--sim-line); --neutral-200: #EDEFF3; --neutral-100: var(--sim-soft); --neutral-50: #F9FAFB; --error: var(--sim-red); --error-light: var(--sim-red-soft); --success: var(--sim-ok); --success-light: var(--sim-ok-soft); --warning: var(--sim-warn); --warning-light: var(--sim-warn-soft); /* Bug #765. --text-muted era CITATO da templates/documents/checklist.html in sei regole e DEFINITO da nessuna parte, quindi in produzione vinceva sempre il fallback scritto a mano dentro ogni `var()`. Tre di quei fallback non passavano il contrasto — #adb5bd (1.90, il segnaposto "--" ripetuto 342 volte) e #6c757d (3.95 sul pill grigio, 4.45 sull'intestazione). Il token ora esiste; i fallback in checklist.html sono stati allineati a questo valore, così i due non possono più divergere in silenzio. NB: --bg-secondary resta deliberatamente NON definito. I suoi fallback erano diversi rule per rule (#f8f9fa per l'intestazione, #e9ecef per il pill che ci sta sopra) e un token unico li appiattirebbe, facendo sparire il pill dentro la sua intestazione. Substory #777 ha tolto l'ultima citazione: checklist.html non lo nomina più da nessuna parte, perché quelle regole ora sono `.sim-section-head` e `.sim-chip`. Il token resta non definito per la stessa ragione di prima, non perché nessuno lo usi. */ --text-muted: var(--sim-muted); --radius-sm: var(--sim-radius-sm); --radius-md: var(--sim-radius); --radius-lg: var(--sim-radius-lg); --shadow-sm: var(--sim-shadow-sm); --shadow-md: var(--sim-shadow); --shadow-lg: var(--sim-shadow); --shadow-xl: var(--sim-shadow-xl); /* Substory #706. Questo NON è un alias nel senso della regola 1 in testa al file: --gradient-primary non esisteva in variables.css, non c'è niente da ri-puntare. Sta qui lo stesso, e col nome nel vecchio spazio, per la ragione opposta: chi lo consumerà (#707 in poi) scrive i nomi senza prefisso, e un token che si chiama --sim-qualcosa nei template è un secondo spazio di nomi da ricordare. La definizione resta --sim-gradient, una sola. */ --gradient-primary: var(--sim-gradient); } /* ---------- l'azione primaria ---------- */ /* Bug #839. UNA regola, e non dipinge niente: sposta il token. `data-primary-action` è il marcatore di substory #794 e dice QUALE controllo della pagina è l'azione primaria — uno per pagina, scritto nel template, contato da apps/chat/tests/test_beta_substory794_single_send_action_e2e.py. Il fondo dei bottoni pieni lo decide `--action-fill`, e qui viene ridefinito sull'elemento marcato: ogni regola che dipinge un bottone pieno (`.sim-btn--primary` qui sotto, `.btn-primary` e `.modal .modal-submit` in components.css, `.input-area button` in pages/chat.css) risolve `var(--action-fill)` SULL'ELEMENTO su cui si trova, quindi legge l'accento lì e l'inchiostro dappertutto altrove. Nessuno di quei SELETTORI cambia: cambia il nome del token che leggono, e c'è questa riga in più. PERCHÉ UN TOKEN E NON UNA REGOLA DI SFONDO. Una `background` qui dovrebbe battere `.input-area button` (0,1,1) da un foglio che si carica DOPO questo (`{% block extra_css %}`, base.html:38), e l'unico modo sarebbe duplicare l'attributo per gonfiare la specificità o inseguire ogni consumatore con un selettore più lungo: la rincorsa che la regola 2 in testa a questo file descrive e vieta. Le proprietà personalizzate non hanno quella gara — la `var()` si risolve sull'elemento, non su chi ha scritto la dichiarazione — quindi la cascata resta dov'era e cambia un valore solo. È la regola 1 in testa al file (alias, non sostituzioni) un piano più sotto. PERCHÉ IL MARCATORE E NON `.sim-btn--primary`. La checklist mostra due `.sim-btn--primary` insieme — il primo "Carica" del blocco dei mancanti e "Scarica tutti i documenti (ZIP)" — e la landing ne ha uno nel foglio dei documenti. Puntare la VARIANTE sull'accento dipingerebbe più accenti per schermata: il difetto di partenza con un altro colore. Una pagina ha legittimamente più bottoni pieni e UNA sola azione primaria; il marcatore è l'unica cosa nel repository che sappia distinguerle. */ [data-primary-action] { --action-fill: var(--sim-accent); --action-fill-hover: var(--sim-accent-hover); } /* ---------- superfici ---------- */ .sim-card { background: var(--sim-surface); border: 1px solid var(--sim-line); border-radius: var(--sim-radius-lg); box-shadow: var(--sim-shadow); padding: 22px; } /* `clip` e non `hidden`: entrambi tagliano i figli sugli angoli arrotondati, ma solo `hidden` rende questa scatola un contenitore di scorrimento, e un discendente `position: sticky` si aggancia al contenitore di scorrimento più vicino invece che alla pagina. Le intestazioni di gruppo di #776 sono sticky dentro questa card: con `hidden` si calcolavano `sticky` e scorrevano via lo stesso (misurato: top -400px dopo 400px di scorrimento). `overflow: clip` non crea un contenitore di scorrimento (CSS Overflow 3). */ .sim-card--flush { padding: 0; overflow: clip; } /* Bug #1131. Una scheda che è un ELENCO di righe: a filo come `--flush`, ma senza `overflow: clip`. Le righe documento portano un menu ⋮ che si apre sotto il bottone e deve poter uscire dalla scheda (quello dell'ultima riga lo fa sempre); con `clip` sarebbe tagliato a metà. Gli angoli arrotondati restano giusti perché la prima e l'ultima riga ereditano il raggio della scheda per i propri fondi (components.css, `.sim-card--list > .doc-row`). */ .sim-card--list { padding: 0; } /* `min-height` — substory #777. Senza, l'intestazione misura ~42.4px (14+14 di padding più una riga da 12px) e resta sotto il bersaglio touch: su questa pagina sono 30 `` cliccabili. Il numero sta QUI e non su `.app-fields-group-header`, perché una misura scritta sulla pagina è esattamente il difetto che #767 esiste per chiudere. */ .sim-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--sim-tap); padding: 14px 20px; background: var(--sim-soft); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sim-muted); cursor: pointer; } /* Substory #778. Gli stati dell'intestazione, e il `summary` davanti alla classe è la parte che decide. `.sim-section-head` ha DUE usi che si somigliano solo a vedersi: il `` di un gruppo, che è un controllo e apre qualcosa, e l'intestazione di una sezione che non fa niente. Le seconde sono QUATTRO, e tre stanno su questa stessa pagina: `.unassociated-header` (checklist.html:334), `.app-fields-header` (:350), `.person-header` (:582) e `.sim-sheet__head` (il foglio di #804, `chat/landing.html:161`, che infatti si riprende `cursor: default` più sotto — ed è lo stesso elemento della testata di chat, non un quinto caso). Una regola sulla classe nuda darebbe a tutte e quattro una risposta al passaggio del mouse: un fondo che cambia su una cosa che non si può premere è una promessa falsa, ed è più dannoso del nessun segnale che #778 viene a chiudere. Il selettore resta una regola sulla CLASSE (è lei il soggetto, il tipo è solo il filtro), quindi la regola 2 in testa a questo file regge: non è `summary { ... }`, che vincerebbe su tutto per larghezza. E il passo 7 — "una pagina successiva le eredita" — è servito meglio così che da un modificatore: un `` scritto domani su un'altra pagina ha già i suoi stati, senza che nessuno si ricordi di aggiungere una seconda classe. #778 passo 1 nomina "fondo e colore del bordo" e la banda è 100-200ms; 150ms è lo stesso valore che `.sim-btn` usa dal primo giorno, quindi la pagina si muove a una velocità sola. */ summary.sim-section-head { transition: background .15s ease, border-color .15s ease; } /* Il fondo dell'hover è `--sim-line`, cioè il valore che questa intestazione aveva già: la regola arriva da `checklist.html:74`, dove #777 l'aveva lasciata indietro, e sale qui senza cambiare di un grigio. Il criterio 3 ("passare sopra un'intestazione di gruppo ne cambia il fondo") continua a valere esattamente come prima; quello che cambia è chi lo dichiara. */ summary.sim-section-head:hover { background: var(--sim-line); } /* Il premuto dell'intestazione è l'OMBRA CONDIVISA e non un terzo grigio. La prima stesura di #778 scendeva a `--sim-line-strong` (#D5DAE0) lasciandoci sopra `--sim-muted`: 4.04:1 per un'etichetta di 12px/700, che non è "testo grande" e quindi vuole 4.5:1. È lo stesso difetto, alla seconda cifra, per cui #777 fu rimandata indietro sul drag-over della drop zone (4.03 -> 4.97), e nessuna prova lo vede: il giro di #765 legge la pagina a riposo e il cancello di #778 non preme mai un'intestazione. Con l'ombra il fondo non si muove più: l'etichetta resta sui suoi 5.21:1 (`--sim-soft`, a riposo) o 4.57:1 (`--sim-line`, sotto il mouse), la domanda sul contrasto sparisce invece di essere ricalcolata, e l'intestazione smette di essere l'unico controllo della pagina con un premuto tutto suo. E l'ombra non riapre la questione da un'altra parte, perché non arriva all'etichetta: `inset 0 2px 5px` senza spread sfuma verso l'interno da tutti e quattro i bordi e si esaurisce entro ~5px, mentre il padding dell'intestazione è 14px sopra e 20px ai lati. Misurato e non dedotto — il pixel più scuro ATTORNO ai glifi (riquadro del testo x 20-66, y 32-41 su un elemento 420x72) resta (244,245,248) sotto il dito e (227,231,236) sotto il dito col mouse sopra, cioè gli stessi 5.21:1 e 4.57:1 di prima. */ summary.sim-section-head:active { box-shadow: var(--sim-press); } /* `outline-offset` NEGATIVO, e non i +2px degli altri componenti. Questa intestazione è a filo della sua scheda e la scheda è `.sim-card--flush`, che porta `overflow: clip`: un anello disegnato 2px FUORI dall'elemento viene tagliato dalla scheda su tre lati e resta visibile solo dove non serve. Disegnato dentro si vede tutto, e sono gli stessi 2px del sistema. */ summary.sim-section-head:focus-visible { outline: 2px solid var(--sim-ink); outline-offset: -2px; } /* ---------- etichetta di un gruppo di schede (bug #1131) ---------- Non è `.sim-section-head`. Quella è la TESTATA di una scheda: una fascia grigia a filo della scheda, 44px, con un controllo in fondo. Questa è l'ETICHETTA sopra un gruppo di schede, sullo sfondo della pagina, come l'artboard `MobileDocs.dc.html` la disegna: 11px/700 spaziata in `--sim-muted`, il conteggio accanto, una linea sottile fino al bordo. Su beta la schermata Documenti usava la fascia grigia per ogni categoria e #1131 la misura come uno dei motivi per cui la schermata non è la sua tavola. `__count` e `__rule` sono le due parti che la tavola disegna. La linea è un elemento e non un `::after` perché così resta un figlio flex che prende lo spazio che avanza, in qualunque lingua sia l'etichetta. Quando l'etichetta è il `` di un gruppo che si apre (i documenti facoltativi) è un controllo: prende il bersaglio da 44px e gli stati di #778 — gli stessi valori di `summary.sim-section-head` più sopra. */ .sim-group-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 4px 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sim-muted); } .sim-group-head__count { font-variant-numeric: tabular-nums; } .sim-group-head__rule { flex: 1 1 auto; min-width: 16px; height: 1px; background: var(--sim-line); } summary.sim-group-head { min-height: var(--sim-tap); padding-top: 0; padding-bottom: 0; border-radius: var(--sim-radius-sm); cursor: pointer; list-style: none; transition: background .15s ease; } summary.sim-group-head::-webkit-details-marker { display: none; } summary.sim-group-head::marker { content: ''; } summary.sim-group-head:hover { background: var(--sim-line); } summary.sim-group-head:active { box-shadow: var(--sim-press); } summary.sim-group-head:focus-visible { outline: 2px solid var(--sim-ink); outline-offset: 2px; } /* ---------- gruppo che si apre ---------- */ /* Substory #778, passo 5: "Animare l'apertura di un gruppo invece di farla scattare, così l'utente vede da dove arriva il contenuto." Misurato su beta prima di questa riga: da 52.3px a 343.3px fra un fotogramma e il successivo — il primo campione dopo `open = true` è già l'altezza finale. Si anima `::details-content`, cioè la scatola che il browser genera già per il contenuto di un `
`, invece di avvolgere il corpo in un `
` con un `max-height` scritto a mano: un `max-height` è un numero da indovinare (troppo basso taglia, troppo alto fa partire l'animazione in ritardo e con una velocità che dipende da quante righe ha il gruppo — qui vanno da 3 a 43). `interpolate-size: allow-keywords` è ciò che rende interpolabile `auto`, ed è ereditato, quindi sta sul componente e non su `:root`: un permesso globale per interpolare le parole chiave cambierebbe il comportamento di transizioni che nessuno ha scritto pensandoci. La transizione è dichiarata SOLO nella regola `[open]`, e non è un caso: una transizione si legge dallo stile DOPO il cambio, quindi in apertura c'è e in chiusura no. Il gruppo si apre mostrando da dove arriva il contenuto e si richiude subito — chi chiude un gruppo ha già visto cosa c'era dentro e sta cercando qualcos'altro. `content-visibility` viaggia con l'altezza: senza, il browser la commuta a metà transizione e il contenuto comparirebbe di colpo dentro una scatola che si sta ancora aprendo. `overflow: clip` e non `hidden`, per la stessa ragione scritta su `.sim-card--flush`: solo `hidden` fa di questa scatola un contenitore di scorrimento, e le intestazioni `position: sticky` di #776 si aggancerebbero a lei invece che alla pagina. */ .sim-disclosure { interpolate-size: allow-keywords; } .sim-disclosure::details-content { block-size: 0; overflow: clip; } .sim-disclosure[open]::details-content { block-size: auto; transition: block-size .15s ease, content-visibility .15s allow-discrete; } /* ---------- azioni ---------- */ .sim-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--sim-tap); padding: 11px 18px; border: 1px solid transparent; border-radius: var(--sim-radius); font: inherit; font-weight: 600; line-height: 1; cursor: pointer; /* `color` è entrato nella lista con #778: `--danger:hover` sotto inverte la coppia fondo/inchiostro, e senza questo pezzo il fondo sfumerebbe mentre il testo scatta. Stessa durata, quindi la banda 100-200ms non si muove. */ transition: background .15s ease, border-color .15s ease, color .15s ease; } /* Bug #839. `--action-fill` e non `--sim-ink` DIRETTO: il valore è lo stesso inchiostro su ogni bottone pieno di questa famiglia, tranne su quello che porta `data-primary-action`, dove la regola in cima al file lo porta all'accento. La variante continua a dire "pieno"; quale dei pieni sia l'azione primaria lo dice il marcatore. */ .sim-btn--primary { background: var(--action-fill); color: #fff; } /* Bug #1131. Each hover restates its INK as well as its fill. `base.css` says `a:hover { color: var(--primary-hover); text-decoration: underline }`, which is (0,1,1) and beats a variant's own `color` (0,1,0) — so an `` painted as a button (`a.sim-btn`) lost its label under the pointer: on the primary one, red-ink text on the red-ink hover fill, i.e. a blank red bar. Measured on the checklist's "Carica i N che mancano", which is a link so it works without script. `:hover` on the variant is (0,2,0) and wins on specificity, whatever the load order. */ .sim-btn--primary:hover { background: var(--action-fill-hover); color: #fff; } .sim-btn--ghost { background: var(--sim-surface); color: var(--sim-ink); border-color: var(--sim-line-strong); } .sim-btn--ghost:hover { background: var(--sim-soft); color: var(--sim-ink); } /* ...and a control is not underlined when pointed at: the underline is the affordance of a link in prose, and a `.sim-btn` is recognised by its shape (#839). */ .sim-btn:hover { text-decoration: none; } .sim-btn--danger { background: var(--sim-red-soft); color: var(--sim-red-ink); } /* Substory #778. `--danger` era l'unica variante senza `:hover` (`--primary` e `--ghost` ce l'hanno da PR #768), e sono i due controlli distruttivi della pagina: lo scollegamento di un documento e il cestino della coda di assegnazione. L'hover INVERTE la coppia che la variante già dichiara invece di introdurre un quarto rosso: `--sim-red-ink` su `--sim-red-soft` è misurato 5.87:1 (vedi il commento del token), e scambiare i due termini lascia il rapporto identico — un hover che non può far scendere il contrasto perché non introduce nessun colore nuovo. */ .sim-btn--danger:hover { background: var(--sim-red-ink); color: var(--sim-red-soft); } /* `flex: none` e non solo `width` — substory #777, secondo giro. Il contratto di `--icon` è "un quadrato di `--sim-tap`, punto". Ma `width` è una *dichiarazione*, non un *pavimento*: dentro una riga flex il valore diventa la base da cui si restringe, e con `flex-shrink: 1` (il default) un fratello che trabocca se lo mangia. È esattamente quello che è successo su `.linked-doc` (components.css) — bottone misurato 41.4 x 44.0 in beta: in altezza c'era `min-height` a fare da pavimento, in larghezza c'era solo `width`. Il pavimento va QUI e non sulla pagina, perché la pagina è il terzo consumatore e non il proprietario: `chat/landing.html:163` mette una `--icon` in una `.sim-section-head` accanto a un titolo tradotto e senza tetto, quindi la stessa stretta è già disponibile lì oggi. `flex: none` è l'idioma che lo strato usa già (:228, :377, :388, :391) e può solo impedire che un controllo scenda sotto quello che lo strato dichiara. */ .sim-btn--icon { width: var(--sim-tap); height: var(--sim-tap); padding: 0; flex: none; } /* Bug #1131. `--icon` DA SOLO è il bottone-icona silenzioso che l'artboard disegna per il ⋮ della riga documento: trasparente, senza bordo, glifo SVG nell'inchiostro secondario, 44x44 di bersaglio. Prima non dichiarava né fondo né bordo, quindi il ⋮ si faceva disegnare da `--ghost` (fondo bianco, 1px `--sim-line-strong`, raggio 12px) e su beta si leggeva come "un secondo bottone grande accanto al primo" — il contrario di SI-083. `:not(.sim-btn--ghost)` e non una regola sulla classe nuda: i tre consumatori che c'erano già (la matita dei campi, `checklist.html:703` e `:1961`, e la chiusura del foglio, `chat/landing.html:452`) scrivono `--ghost --icon` INSIEME e vogliono la cornice; quella combinazione resta esattamente com'era. `border-width: 0` e non `border-color: transparent`: `.sim-btn` porta `1px solid transparent`, che non si vede ma si misura, e il bordo di un bottone-icona è zero. Hover e premuto stanno qui accanto per la regola di #778 (gli stati nel livello dei componenti, non sulla pagina); il premuto è quello condiviso di `.sim-btn:active` più sotto. */ .sim-btn--icon:not(.sim-btn--ghost) { background: transparent; border-width: 0; color: var(--sim-muted); } .sim-btn--icon:not(.sim-btn--ghost):hover { background: var(--sim-soft); color: var(--sim-ink); } /* Bug #1131. La riga intera come bersaglio: "aprire il documento è toccare la riga, non un bottone separato col nome del file". È un link che fa da controllo, quindi è un `.sim-btn` per la regola di #777 (ogni link che fa da bottone porta la classe del componente) e di #839 (un `` con una forma da controllo non si riconosce dalla sottolineatura). La forma è la riga che lo contiene; questa variante toglie tutto ciò che `.sim-btn` aggiunge per disegnarne una propria — fondo, bordo, raggio, riempimento, centratura, `line-height: 1` — e lascia il bersaglio da 44px, la transizione, l'anello di fuoco e il premuto del componente. `min-width: 0` perché dentro una riga flex il testo troncato con i puntini può restringersi solo così. */ .sim-btn--row { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; min-width: 0; padding: 0; border-width: 0; border-radius: var(--sim-radius-sm); background: transparent; color: inherit; text-align: start; text-decoration: none; font-weight: inherit; line-height: inherit; } .sim-btn--row:hover { background: var(--sim-soft); color: inherit; } .sim-btn--block { width: 100%; } /* Substory #796. Un controllo la cui etichetta è una FRASE, non una parola. `.sim-btn` dichiara `line-height: 1` e `justify-content: center`: sono i valori giusti per "Salva" o "Carica", e sono un'assunzione di UNA riga. I quattro chip di avvio della pagina iniziale portano frasi tradotte in sette lingue — l'urdu e l'hindi corrono molto più dell'inglese, e a 390px vanno a capo per forza — e con `line-height: 1` le righe successive si toccano e il nastaliq perde i discendenti. Sta QUI e non su `.welcome-chip` in pages/chat.css di proposito: una regola di pagina che riscrive `line-height` dello strato è esattamente il difetto che #767 esiste per chiudere, e la misura appartiene al componente. Non tocca nessuna delle varianti esistenti: è una classe in più che va aggiunta esplicitamente, e senza di essa `.sim-btn` si comporta come prima. */ .sim-btn--wrap { white-space: normal; text-align: start; justify-content: flex-start; line-height: 1.35; padding-top: 10px; padding-bottom: 10px; } .sim-btn:focus-visible { outline: 2px solid var(--sim-ink); outline-offset: 2px; } /* Stato premuto di un controllo a segmenti (il filtro di #776). Sta QUI e non sulla pagina di proposito: una regola `.app-fields-filter-option.is-active` ha specificità (0,2,0) e batterebbe `.sim-btn--ghost`, cioè reintrodurrebbe il difetto di #767 una scala più in basso. Il gancio è `aria-pressed`, che il filtro già scrive e che è anche quello che uno screen reader annuncia. */ .sim-btn[aria-pressed="true"] { background: var(--sim-ink); color: #fff; border-color: var(--sim-ink); } /* Substory #778. Il segmento SELEZIONATO si mangiava il proprio hover: la regola qui sopra ha specificità (0,2,0) esattamente come `.sim-btn--ghost:hover` e arriva dopo, quindi il fondo restava nero sotto il mouse e il controllo attivo era l'unico della pagina che non rispondeva. Il rimedio è dirlo per la variante, non alzare la voce altrove: stesso passo che `--primary:hover` fa (verso `--sim-ink-2`), così i due neri del sistema si muovono allo stesso modo. */ .sim-btn[aria-pressed="true"]:hover { background: var(--sim-ink-2); border-color: var(--sim-ink-2); } /* Lo stato premuto di OGNI bottone, e sta dopo tutte le varianti di proposito: dichiara solo `box-shadow`, che nessuna di loro tocca, quindi si somma a qualunque fondo il controllo abbia in quel momento invece di contenderglielo — un `--danger` premuto mentre lo si passa col mouse mostra l'inversione dell'hover E il rientro, che è quello che un dito si aspetta. */ .sim-btn:active { box-shadow: var(--sim-press); } /* ...tranne le due varianti che portano `background: var(--sim-ink)`, che prendono l'ombra invertita (il perché sta sul token, in testa al file): sono l'unico caso in cui `--sim-press` compone esattamente il colore che ha sotto, cioè dichiara uno stato premuto e non disegna niente. Sono anche le azioni primarie della pagina, quindi il passo 3 vive o muore qui. L'ORDINE È LA REGOLA, non l'abitudine: `.sim-btn[aria-pressed="true"]:active` è (0,3,0) e vince da solo, ma `.sim-btn--primary:active` è (0,2,0) come `.sim-btn:active` qui sopra e vince soltanto perché arriva dopo. Copre anche i fondi che l'hover porta a `--sim-ink-2`: il 20% di bianco su (60,70,78) compone (99,107,113), quindi un primario premuto mentre lo si passa col mouse risponde come risponde premuto e basta. Le altre varianti restano su `--sim-press` e non serve un terzo token: `--danger:hover` porta il fondo a `--sim-red-ink` (176,35,52), dove il nero al 20% compone (144,32,46) — scuro su scuro, ma non lo STESSO scuro, e il rientro si vede. */ .sim-btn--primary:active, .sim-btn[aria-pressed="true"]:active { box-shadow: var(--sim-press-on-dark); } /* ---------- select ---------- */ /* Substory #777 aprì questa sezione con una `.sim-select` sola, per il select di riassegnazione della lista documenti, e #778 le aggiunse hover e stato premuto. Substory #805 ha scoperto che il problema era più grande di un controllo: mancava lo STRATO: 3 `` e 2 `