/* ============================================================================= MARCA GROUP — DESIGN SYSTEM · CLASSI DI SISTEMA Griglia, tipografia e componenti. Dipende da tokens.css: caricalo PRIMA. Questo file è pensato per essere copiato così com'è in un progetto nuovo. Non contiene nulla della pagina di documentazione (quello sta in specimen.css). PREFISSO: tutte le classi iniziano con mg- (Marca Group). REGOLE STRUTTURALI APPLICATE QUI · gutter = 0: i campi si toccano, si separano con un filo da 1px · nessuna ombra, nessuna elevazione · raggio solo su controlli (4px) e pill di stato (20px) · allineamento a bandiera sinistra · ogni spazio è un multiplo di U = 8px ============================================================================= */ /* ----------------------------------------------------------------------------- RESET MINIMO -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* `clip` e non `hidden`: hidden rende un contenitore di scorrimento e disattiva ogni `position: sticky` al suo interno — corsie, testate e barre di strumenti comprese. Il taglio serve perché .mg-bleed esce dal margine. */ html, body { margin: 0; padding: 0; overflow-x: clip; } body { background: var(--marca-surface); color: var(--marca-text); font-family: var(--marca-font-primary); font-size: var(--marca-type-text-size); line-height: var(--marca-type-text-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Il reset sta in `:where()` — specificità ZERO — perché non deve battere le regole di flusso. Con i selettori di tipo nudi (0,0,1) vinceva su `:where(.mg-field) > * + *` (0,0,0), e centouno figli su centoventiquattro restavano attaccati: il ritmo verticale era dichiarato e inerte. */ /* `legend` sta in questo elenco per una ragione misurabile: il browser gli dà `padding-inline: 2px` di suo, e 2 non è nulla e non è U. Un `.mg-field-label` scritto su un elemento `legend` — è la forma che §17 prescrive per l'etichetta di un gruppo — rientrava di 2px rispetto ai campi che intesta: l'unica etichetta della pagina che non partiva dal filo di sinistra. */ :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol, legend) { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } a { color: inherit; } /* Indicatore di focus — [PROPOSTA]: il brand system non lo definisce, ma senza non c'è accessibilità da tastiera. Due fili contigui: verde all'interno perché il focus è «segnale di attivazione», grafite all'esterno perché il verde da solo dà 2,43:1 su carta e WCAG 1.4.11 ne chiede 3. Nessuna ombra: due linee, come ovunque nel sistema. Il filo esterno usa `outline` sul livello sottostante tramite un pseudo- elemento che non partecipa al layout e non sposta nulla. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--marca-focus-width) solid var(--marca-focus-ring); outline-offset: var(--marca-focus-offset); position: relative; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible::after { content: ''; position: absolute; inset: calc(-1 * (var(--marca-focus-width) + var(--marca-focus-offset) + var(--marca-border-width))); border: var(--marca-border-width) solid var(--marca-focus-ring-contrast); border-radius: inherit; pointer-events: none; } /* Chi ha già un ::after proprio dichiara di gestirlo da sé: il secondo filo passa allora al contenitore, che lo disegna con la stessa geometria. */ :where([data-focus-frame]):focus-visible::after { content: none; } /* ELEMENTI RIMPIAZZATI — input, select, textarea. Non generano pseudo-elementi: su di loro la regola qui sopra non disegnava nulla, e restava il solo filo verde, che da solo vale 2,43:1 su carta — sotto i 3:1 di WCAG 1.4.11, cioè esattamente la ragione per cui l'anello è a due fili. La coppia si sposta allora a cavallo del bordo del campo, nello stesso ordine dichiarato: il verde è il filo del campo portato allo spessore del focus, il filo di contenimento è l'outline che gli sta a contatto, fuori. Due fili contigui, nessuna ombra, stessa grammatica. Il filo più spesso non sposta niente: `box-sizing: border-box` tiene ferma la scatola e il padding riassorbe il millimetro in più (R2), campo per campo. E non tocca chi non ha un filo — senza `border-style` dichiarato, `border-width` e `border-color` non disegnano: casella, scelta esclusiva e cursore restano ai propri anelli, dichiarati in controls.css. */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--marca-border-width) solid var(--marca-focus-ring-contrast); outline-offset: 0; border-color: var(--marca-focus-ring); border-width: var(--marca-focus-width); } /* DENTRO UN CONTENITORE CHE RITAGLIA l'anello si rivolta all'interno. Un `overflow` diverso da `visible` su un antenato taglia l'`outline` e i pseudo-elementi dei discendenti: una striscia di segmenti, uno stepper, una tendina, un menu e una sezione che si apre ritagliano tutte per ragioni proprie — e i controlli che ci vivono dentro restavano **senza alcun indicatore di focus**, che è il difetto più grave che questo sistema possa avere. La coppia non cambia né ordine né spessore: si sposta dentro la scatola. Verde nei 2px più esterni dell'interno, contenimento subito dentro di lui. CHI PORTA LA CONFORMITÀ CAMBIA CON LA CONDIZIONE, e va detto per intero. In CHIARA è il filo di contenimento: l'anello da solo — Green/500 su carta — vale 2,43:1, sotto i 3:1 di WCAG 1.4.11, e la grafite lo riscatta da entrambi i lati, 7,06:1 sul verde e 18,73:1 sul campo bianco. In SCURA la conformità è già dell'anello: Green/400 vale 7,61:1 sul campo e 8,43:1 sul fondo pagina, e non serve nessun riscatto. Il filo bianco resta perché stacca l'anello dalla superficie — 16,91:1 sul campo — non perché lo stacchi dal verde: là fa 2,22:1, e nessun colore soddisfa 3:1 verso Green/400 e verso il campo insieme. Non è un difetto: al buio quel compito non c'è. La cornice della pagina ha i propri contenitori che ritagliano e se li dichiara da sé, in specimen.css: qui dentro sta solo il sistema. */ :where( .mg-segmented, .mg-stepper, .mg-inputgroup, .mg-tablist, .mg-iconbar, .mg-listbox > *, .mg-menu > *, .mg-accordion-panel > *, .mg-row-detail-inner > *, .mg-progress ) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-offset: calc(-1 * var(--marca-focus-width)); } :where( .mg-segmented, .mg-stepper, .mg-inputgroup, .mg-tablist, .mg-iconbar, .mg-listbox > *, .mg-menu > *, .mg-accordion-panel > *, .mg-row-detail-inner > *, .mg-progress ) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible::after { inset: var(--marca-focus-width); } .mg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- TIPOGRAFIA Cinque livelli dichiarati più i corpi di lavoro dell'interfaccia. La gerarchia nasce da griglia, scala, posizione e spazio: non dal font. -------------------------------------------------------------------------- */ .mg-display { font-family: var(--marca-font-primary); font-weight: var(--marca-weight-bold); font-size: var(--marca-type-display-size); line-height: var(--marca-type-display-lh); letter-spacing: var(--marca-type-display-tracking); text-transform: uppercase; text-align: start; } .mg-title { font-family: var(--marca-font-primary); font-weight: var(--marca-weight-bold); font-size: var(--marca-type-title-size); line-height: var(--marca-type-title-lh); letter-spacing: var(--marca-type-title-tracking); text-align: start; } /* Titoletto: stesso corpo del testo corrente, Medium — MAI Bold. */ .mg-subhead { font-family: var(--marca-font-primary); font-weight: var(--marca-weight-medium); font-size: var(--marca-type-subhead-size); line-height: var(--marca-type-subhead-lh); letter-spacing: var(--marca-type-subhead-tracking); text-transform: uppercase; } .mg-body { font-size: var(--marca-type-body-size); line-height: var(--marca-type-body-lh); letter-spacing: var(--marca-type-body-tracking); } .mg-body-l { font-size: var(--marca-type-body-l-size); line-height: var(--marca-type-body-l-lh); letter-spacing: var(--marca-type-body-l-tracking); } .mg-body-m { font-size: var(--marca-type-body-m-size); line-height: var(--marca-type-body-m-lh); letter-spacing: var(--marca-type-body-m-tracking); } .mg-text { font-size: var(--marca-type-text-size); line-height: var(--marca-type-text-lh); } .mg-text-s { font-size: var(--marca-type-text-s-size); line-height: var(--marca-type-text-s-lh); } .mg-caption { font-size: var(--marca-type-caption-size); line-height: var(--marca-type-caption-lh); color: var(--marca-text-subtle); } /* Registro tecnico — Config Mono. Solo con funzione informativa reale. */ .mg-label { font-family: var(--marca-font-mono); font-weight: var(--marca-weight-regular); font-size: var(--marca-type-label-size); line-height: var(--marca-type-label-lh); } .mg-mono-l { font-family: var(--marca-font-mono); font-size: var(--marca-type-mono-l-size); line-height: var(--marca-type-mono-l-lh); } .mg-mono { font-family: var(--marca-font-mono); font-size: var(--marca-type-mono-size); line-height: var(--marca-type-mono-lh); } .mg-mono-s { font-family: var(--marca-font-mono); font-size: var(--marca-type-mono-s-size); line-height: var(--marca-type-mono-s-lh); } .mg-mono-xs { font-family: var(--marca-font-mono); font-size: var(--marca-type-mono-xs-size); line-height: var(--marca-type-mono-xs-lh); } /* Eyebrow: il codice di sezione in alto a sinistra. Vive nella corsia. */ .mg-eyebrow { font-family: var(--marca-font-mono); font-size: var(--marca-type-mono-s-size); line-height: var(--marca-type-mono-s-lh); letter-spacing: 0.04em; text-transform: uppercase; color: var(--marca-text-subtle); } .mg-muted { color: var(--marca-text-muted); } .mg-subtle { color: var(--marca-text-subtle); } .mg-identity { color: var(--marca-identity); } .mg-deep { color: var(--marca-depth); } /* ----------------------------------------------------------------------------- GRIGLIA P·12 Dodici micro-colonne, gutter zero. La corsia orienta, la campata racconta. Il margine di mezza colonna non cambia mai. -------------------------------------------------------------------------- */ /* Il margine NON è padding del contenitore: se lo fosse, le dodici colonne si dividerebbero 1920 − 160 = 1760px e una colonna varrebbe 146,66px, non i 160 dichiarati. Le colonne dividono l'intero formato; il margine di mezza colonna è ricavato DENTRO le due colonne di bordo, dai campi che le occupano. Così «colonna 160 · margine mezza colonna · formato 1920» sono veri insieme. */ .mg-page { width: 100%; max-width: var(--marca-grid-max); margin-inline: auto; } /* Il margine, a carico dei campi di bordo. */ .mg-page > .mg-grid > :first-child { padding-inline-start: var(--marca-grid-margin); } .mg-page > .mg-grid > :last-child { padding-inline-end: var(--marca-grid-margin); } /* Un contenuto che non è dentro una griglia porta il margine su di sé. */ .mg-page > :not(.mg-grid) { padding-inline: var(--marca-grid-margin); } .mg-grid { display: grid; grid-template-columns: repeat(var(--marca-grid-columns), minmax(0, 1fr)); gap: var(--marca-grid-gutter); /* zero, regola 01 */ } .mg-grid > * { min-width: 0; } /* Partizioni */ .mg-rail { grid-column: span 3; } .mg-bay { grid-column: span 9; } .mg-third { grid-column: span 4; } .mg-half { grid-column: span 6; } .mg-full { grid-column: 1 / -1; } .mg-span-1 { grid-column: span 1; } .mg-span-2 { grid-column: span 2; } .mg-span-3 { grid-column: span 3; } .mg-span-4 { grid-column: span 4; } .mg-span-5 { grid-column: span 5; } .mg-span-6 { grid-column: span 6; } .mg-span-7 { grid-column: span 7; } .mg-span-8 { grid-column: span 8; } .mg-span-9 { grid-column: span 9; } .mg-span-10 { grid-column: span 10; } .mg-span-11 { grid-column: span 11; } .mg-span-12 { grid-column: 1 / -1; } /* Campo: la superficie che contiene. Non fluttua, non ha raggio, non ha ombra. Il testo dentro mantiene un padding interno costante (regola 05). Il padding passa da una variabile locale così le varianti lo cambiano in un punto solo, e R2 può assorbire il filo senza sapere quale variante è. */ .mg-field { position: relative; --mg-field-pad: var(--marca-field-padding); border-radius: var(--marca-radius-field); box-shadow: var(--marca-shadow); text-align: start; padding: var(--mg-field-pad); background: transparent; } .mg-field--surface { background: var(--marca-field); } .mg-field--alt { background: var(--marca-field-alt); } /* CHI PORTA LA SUPERFICIE SECONDARIA PORTA ANCHE I PROPRI INCHIOSTRI. È la stessa regola delle superfici sovrapposte (surfaces.css), applicata un gradino invece che due: un ruolo si calibra sulla superficie che ha sotto, e se la superficie cambia il ruolo deve seguirla. In condizione CHIARA il terziario è calibrato sul campo — Neutral/500 sul bianco, 5,00:1 — e sul campo secondario scendeva a 4,30:1, sotto la soglia di lettura. Neutral/600 lo riporta a 6,87:1 senza collassare sul ruolo «etichetta», che vive su una superficie diversa. In condizione SCURA la correzione non serve e sarebbe dannosa: là il terziario è già Neutral/400 e sul campo secondario (Neutral/800) vale 4,91:1, mentre Neutral/600 darebbe 1,80:1. Per questo la regola è scritta sulla condizione, non su tutte e due. */ :root:not([data-theme='dark']) :where( .mg-field--alt, .mg-note, .mg-banner, .mg-statusbar, .mg-tag, .mg-affix, .mg-input:disabled, .mg-table tbody tr:hover ) { --marca-text-subtle: var(--marca-neutral-600); } .mg-field--invert { background: var(--marca-surface-invert); color: var(--marca-text-invert); } .mg-field--bare { --mg-field-pad: 0px; } .mg-field--l { --mg-field-pad: var(--marca-field-padding-l); } /* Fili: la separazione strutturale. Mai spazio vuoto tra campi. */ /* R2 sul perimetro pieno: i fili sono quattro e il padding li assorbe tutti e quattro, come .mg-empty e .mg-dropzone. Senza, il campo bordato chiudeva su 24 + 24 + 1 + 1 = 50 su entrambi gli assi — l'unico campo del sistema fuori ritmo, mentre .mg-rule-t e .mg-rule-b accanto a lui chiudono su 48. `max()` tiene il conto valido anche per il campo senza padding. */ .mg-field--bordered { border: var(--marca-border-width) solid var(--marca-border); padding: max(0px, calc(var(--mg-field-pad) - var(--marca-border-width))); } .mg-rule-t { border-top: var(--marca-border-width) solid var(--marca-border); } .mg-rule-b { border-bottom: var(--marca-border-width) solid var(--marca-border); } .mg-rule-s { border-inline-start: var(--marca-border-width) solid var(--marca-border); } .mg-rule-e { border-inline-end: var(--marca-border-width) solid var(--marca-border); } /* R2 sul filo singolo, su tutti e quattro i lati: il filo è assorbito dal padding, così una fascia di campi impilati o affiancati chiude su U invece che su U + 1 a ogni giunto — 23 dichiarati più 1 di filo fanno i 24 del campo, 15 più 1 fanno i 16 sotto i 640. `max()` tiene il conto valido anche per il campo senza padding. I fili in linea valgono quanto quelli in blocco: senza le ultime due regole un campo con .mg-rule-s chiudeva su 25 da quel lato e su 24 dagli altri tre. */ .mg-field.mg-rule-t { padding-block-start: max(0px, calc(var(--mg-field-pad) - var(--marca-border-width))); } .mg-field.mg-rule-b { padding-block-end: max(0px, calc(var(--mg-field-pad) - var(--marca-border-width))); } .mg-field.mg-rule-s { padding-inline-start: max(0px, calc(var(--mg-field-pad) - var(--marca-border-width))); } .mg-field.mg-rule-e { padding-inline-end: max(0px, calc(var(--mg-field-pad) - var(--marca-border-width))); } /* Campi adiacenti dentro una griglia: il filo nasce dal secondo in poi, così i campi si toccano senza raddoppiare la linea. Il margine negativo non è un vezzo: la regola conta i campi in ordine di MARKUP, non di riga, e quando la fascia avvolge il primo campo di ogni riga successiva si ritrova un filo verticale che va ad affiancare il perimetro — due linee da 1px contigue, cioè un bordo spesso il doppio. Tirando il campo di un pixel il suo filo si SOVRAPPONE a quello che trova, invece di sommarsi: dentro la riga cade sul giunto, in testa alla riga cade sul perimetro. Una linea sola in entrambi i casi. */ .mg-fields > .mg-field + .mg-field { border-inline-start: var(--marca-border-width) solid var(--marca-border); margin-inline-start: calc(-1 * var(--marca-border-width)); } /* Filo orizzontale isolato. Separa contenuti reali: non è decorazione. */ .mg-divider { height: var(--marca-border-width); background: var(--marca-border); border: 0; } /* Ritmo verticale: le sezioni chiudono sulla baseline. */ .mg-section { padding-block: var(--marca-space-12); } .mg-section--s { padding-block: var(--marca-space-8); } /* ----------------------------------------------------------------------------- RITMO DI FLUSSO — la scala delle relazioni Lo spazio verticale fra due elementi impilati è una RELAZIONE, e una relazione vale UNA distanza sola in tutto il sistema. Si dichiara qui. Non si scrive nel markup: mai. 8 ciò che intesta → ciò che è intestato (etichetta, marcatore, didascalia) 16 elemento → elemento dentro lo stesso blocco ← flusso predefinito 24 sotto-blocco → sotto-blocco 48 blocco → blocco 96 sezione → sezione, e lì è padding, non margine: `.mg-section` porta `--marca-space-12` sopra e sotto, 96 + 96. La variante compatta `.mg-section--s` chiude su 64 + 64 (`--marca-space-8`), e sotto i 640 entrambe scendono a 48 + 48. I selettori generali stanno dentro :where(): specificità zero. Così una relazione più stretta — un'etichetta, una didascalia — vince senza !important e senza gare di specificità, e un componente che porta la propria geometria (una griglia, una pila con gap) la sovrascrive con una riga sola. Documentazione: File_MD/04. -------------------------------------------------------------------------- */ :where(.mg-stack-xs) > * + * { margin-top: var(--marca-space-1); } :where(.mg-stack-s) > * + * { margin-top: var(--marca-space-2); } :where(.mg-stack) > * + * { margin-top: var(--marca-space-3); } :where(.mg-stack-l) > * + * { margin-top: var(--marca-space-6); } /* Dentro un campo il flusso predefinito è 16: due contenuti impilati non si toccano mai, e nessuno deve ricordarsi di dichiararlo. È la correzione del difetto che rendeva le pagine «attaccate e schiacciate»: il ritmo stava nel markup, riscritto a mano su cinque valori diversi, invece che qui. */ :where(.mg-field) > * + * { margin-top: var(--marca-space-2); } /* La relazione più stretta della scala: un'etichetta, un marcatore o un valore stanno a 8 da ciò che intestano. È la stessa distanza che .mg-field-label porta già su di sé. */ .mg-eyebrow + *, .mg-progress-label + *, .mg-slider-head + * { margin-top: var(--marca-space-1); } /* Due coppie chiave-valore si susseguono senza margine: il ritmo lo dà il loro padding (8 + 8 = 16), come dichiarato in .mg-kv. E una chiave e il suo valore sono un oggetto solo: fra loro non c'è relazione da spaziare. */ .mg-kv + .mg-kv { margin-top: 0; } .mg-kv-key + .mg-kv-value { margin-top: 0; } /* Griglia di CONTROLLI. Il divieto di gutter riguarda i campi: fra controlli lo spazio esiste, e vale solo 16 (controlli indipendenti) o 24 (blocchi di modulo). Vedi la tabella di File_MD/17. */ .mg-grid--controlli { gap: var(--marca-space-2); } .mg-grid--blocchi { gap: var(--marca-space-3); } /* Pila di controlli: verticale, a bandiera sinistra. Fra controlli indipendenti lo spazio esiste e vale 16 — vedi File_MD/17. */ .mg-stack-controls { display: flex; flex-direction: column; align-items: flex-start; gap: var(--marca-space-2); } /* Perimetro: chiude una fascia di campi che si toccano. Il filo esterno sta sul contenitore, quelli interni nascono dal secondo campo in poi. */ .mg-bordered { border: var(--marca-border-width) solid var(--marca-border); } /* Un codice non si spezza mai su due righe: è la stringa che l'utente copia. Regola dichiarata in File_MD/10. */ .mg-nowrap { white-space: nowrap; } /* Impianto applicativo 3|6|3 — corsia · campata · terzo destro */ .mg-app-shell { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 0; min-height: 0; } .mg-app-shell > * + * { border-inline-start: var(--marca-border-width) solid var(--marca-border); } /* Toolbar: riga da 64px, chiusa da un filo. L'altezza è un MINIMO, non una gabbia: con `height` fissa un percorso di navigazione che va a tre righe misura 112 dentro 64 e stampa il proprio testo sopra i due fili strutturali. Il padding da 8 sopra e 8 meno il filo sotto (R2) tiene la riga esattamente a 64 finché il contenuto sta su una riga (48 + 8 + 7 + filo), e la fa crescere di multipli interi di U quando avvolge. */ .mg-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--marca-space-2); min-block-size: var(--marca-row); /* R2: il filo inferiore è assorbito dal padding, così la riga chiude su 64 esatti invece che su 65. */ padding-block: var(--marca-space-1) calc(var(--marca-space-1) - var(--marca-border-width)); padding-inline: var(--marca-space-3); border-bottom: var(--marca-border-width) solid var(--marca-border); background: var(--marca-field); } /* L'ultimo elemento della riga strumenti si appoggia al bordo opposto. Quando la riga avvolge la spinta sparisce: su una riga propria diventerebbe una centratura di fatto, e il sistema non centra. */ .mg-toolbar-end { margin-inline-start: auto; } /* ----------------------------------------------------------------------------- CONTROLLI La CTA primaria è verde. Non esiste una seconda CTA equivalente in arancio: l'arancio è accento tecnico, non azione. -------------------------------------------------------------------------- */ .mg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--marca-space-1); min-height: var(--marca-control-height); padding-inline: var(--marca-space-3); border-radius: var(--marca-radius-control); font-family: var(--marca-font-primary); font-size: var(--marca-type-text-size); line-height: var(--marca-type-text-lh); font-weight: var(--marca-weight-medium); border: var(--marca-border-width) solid transparent; transition: background-color var(--marca-motion-base) var(--marca-motion-ease), border-color var(--marca-motion-base) var(--marca-motion-ease), color var(--marca-motion-base) var(--marca-motion-ease); } /* IL PULSANTE NON SCEGLIE I PROPRI COLORI: LI CHIEDE AI RUOLI. `--marca-mark`, `--marca-mark-hover` e `--marca-mark-text` sono già dichiarati in tokens.css come «il riempimento che porta un segno», e si rimappano da sé con la condizione: fondo Green/700 → Green/500, passaggio Green/800 → Green/400, inchiostro bianco → grafite. Riscrivere qui gli stessi tre valori a mano violava la regola di tokens.css — «nei componenti si usano SOLO questi» — teneva `--marca-mark-hover` a zero usi in tutta la repo e obbligava a ripetere l'inversione in un blocco scuro che ora non serve più. In chiaro: bianco su Green/700 dà 6,95:1 ed è una combinazione approvata; su Green/500 darebbe 2,65:1, sotto ogni soglia. Al buio, per la stessa via: grafite su Green/500 7,06:1, al passaggio 8,43:1, e lo stacco dal campo sale da 2,43:1 a 6,37:1. */ .mg-btn--primary { background: var(--marca-mark); color: var(--marca-mark-text); } .mg-btn--primary:hover { background: var(--marca-mark-hover); } .mg-btn--primary:active { background: var(--marca-green-900); } /* Premuto è l'unico gradino che i ruoli non portano: non esiste un --marca-mark-active. In chiaro scende a Green/900 e il verde profondo resta leggibile; al buio deve SALIRE a Green/300, perché scendere significa sparire — sul campo scuro Green/800 stacca 1,56:1 e Green/900 1,09:1, e il pulsante scompare nell'istante in cui viene premuto. Con Green/300: 9,93:1. La guardia `:not([disabled])` non è cosmetica: senza, questa regola (0,6,0) coprirebbe `.mg-btn[disabled]` (0,2,0) e al buio il pulsante primario spento continuerebbe a rispondere alla pressione — uno stato disabilitato che si comporta da abilitato. Sugli altri due gradini la guardia non serve più: `.mg-btn--primary` (0,1,0) e `.mg-btn--primary:hover` (0,2,0) perdono entrambi contro `.mg-btn[disabled]`, che è scritto più sotto. */ :root[data-theme='dark'] .mg-btn--primary:not([disabled]):not([aria-disabled='true']):active { background: var(--marca-green-300); } .mg-btn--secondary { background: var(--marca-field); border-color: var(--marca-border-control); color: var(--marca-text-muted); } .mg-btn--secondary:hover { border-color: var(--marca-text-muted); color: var(--marca-text); background: var(--marca-field-alt); } .mg-btn--ghost { background: transparent; color: var(--marca-text-muted); } .mg-btn--ghost:hover { color: var(--marca-text); } /* CHI APRE QUALCOSA LO DICHIARA. Un pulsante che apre un menu portava solo la propria etichetta: si leggeva come un pulsante che ESEGUE, non come uno che ESPANDE, e l'unica differenza era nel markup. Il segno è disegnato — due fili ad angolo, la stessa grammatica del glifo della tendina nativa e della combobox — e non ruota mai: aperto e chiuso si distinguono per il colore del segno, non per il moto. Sta su ::before perché ::after è il secondo filo dell'anello di focus; `order: 1` lo porta dopo l'etichetta senza toccare il markup. */ :where(.mg-btn, .mg-iconbtn)[aria-haspopup='true']::before { content: ''; order: 1; flex-shrink: 0; inline-size: var(--marca-mark-square); block-size: var(--marca-mark-square); border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; rotate: 45deg; margin-block-start: -3px; } :where(.mg-btn, .mg-iconbtn)[aria-haspopup='true'][aria-expanded='true']::before { border-color: var(--marca-mark); } .mg-btn--s { min-height: var(--marca-control-height-s); padding-inline: var(--marca-space-2); font-size: var(--marca-type-text-s-size); } .mg-btn[disabled], .mg-btn[aria-disabled='true'] { background: var(--marca-field-alt); border-color: var(--marca-border); color: var(--marca-text-disabled); cursor: not-allowed; } /* Campi di input */ .mg-input { width: 100%; min-height: var(--marca-control-height); padding: var(--marca-space-1) var(--marca-space-2); border: var(--marca-border-width) solid var(--marca-border-control); border-radius: var(--marca-radius-control); background: var(--marca-field); color: var(--marca-text); font-family: var(--marca-font-primary); font-size: var(--marca-type-text-size); transition: border-color var(--marca-motion-control) var(--marca-ease-state), background-color var(--marca-motion-control) var(--marca-ease-state); } /* Il passaggio è lo stato più debole del contratto: cede al focus e non copre mai l'errore. Senza le due guardie `.mg-input:hover` (0,4,0) batteva sia l'anello di focus sia `[aria-invalid]` (0,2,0), e il filo rosso di un campo non valido si spegneva proprio mentre l'utente ci portava sopra il puntatore — l'unico segnale cromatico dell'errore, perso nel momento in cui lo si sta guardando. */ .mg-input:hover:not(:disabled):not([readonly]):not(:focus-visible):not([aria-invalid='true']) { border-color: var(--marca-text-muted); } /* Il segnaposto non usa il ruolo «disabilitato»: quello è riservato a ciò che non si può usare, e a 2,94:1 non sarebbe leggibile. */ .mg-input::placeholder { color: var(--marca-text-subtle); } .mg-input:disabled { background: var(--marca-field-alt); border-color: var(--marca-border); color: var(--marca-text-disabled); cursor: not-allowed; } /* Sola lettura ≠ disabilitato: il dato c'è, va letto e copiato, resta nella tabulazione e mantiene il pieno contrasto. */ .mg-input[readonly] { background: var(--marca-surface); border-color: var(--marca-border); color: var(--marca-text); } .mg-input[aria-invalid='true'] { border-color: var(--marca-error); border-width: var(--marca-focus-width); } /* Sola lettura non è disabilitato: resta nella tabulazione, quindi deve mostrare il focus. Senza questa riga il filo grigio di `[readonly]` (0,2,0) copriva il verde della regola generica (0,1,1). */ .mg-input[readonly]:focus-visible { border-color: var(--marca-focus-ring); } /* A fuoco vince il FOCUS, non l'errore. Tenendo il rosso, l'unica differenza fra «non a fuoco» e «a fuoco» sarebbe stata un capello grafite da 1px: il contratto dichiara un anello a due fili col verde dentro, e qui non c'era. L'errore non si perde — resta nel messaggio obbligatorio e in `aria-invalid`, che è dove WCAG 3.3.1 chiede che stia — e torna visibile appena il fuoco se ne va. Il colore non è mai l'unico segnale dell'errore: è la regola 1 del contratto di accessibilità. */ /* Le due condizioni in cui il filo del campo passa da 1 a 2px — errore e focus — chiudono sul ritmo invece di spostare il testo di un pixel: il padding riassorbe il filo, come ogni scatola del sistema (R2). Vale per i soli elementi rimpiazzati, che sono quelli a cui il filo cresce davvero: un `