/* ============================================================ Maqer — i ruoli del colore Questo file sostituisce le tre "skin" che c'erano prima, una per divisione. Non ce n'e' piu' bisogno, ed e' il punto di tutto il lavoro: se il colore della divisione si chiama sempre allo stesso modo, le regole che lo usano sono le stesse per tutti i siti. COME FUNZIONA, IN TRE RIGHE In WordPress apri Aspetto -> Editor -> Stili e vedi una tavolozza di colori con l'etichetta in italiano: "Colore della divisione", "Evidenza", "Bianco delle fasce". Ne cambi uno e cambia tutto il sito, perche' ogni regola qui sotto parte da li'. Le due varianti in styles/ non sono altro che due tavolozze, una per sito: Job per maqerjob.it, corporate per maqer.it. Si passa dall'una all'altra con un clic, sempre da Stili. Advisory NON e' una variante, perche' non e' un sito: e' un'area dentro maqer.it, e sta in fondo a questo file insieme alle altre. PERCHE' DUE NOMI PER LA STESSA COSA WordPress genera nomi lunghi: --wp--preset--color--divisione. I fogli di layout usano nomi corti: --brand, --evidenza, --paper. La prima parte di questo file fa da ponte fra i due. Cosi' i fogli restano leggibili e chi cambia un colore da WordPress lo vede cambiare ovunque, senza che nessuno debba ricordarsi niente. LA REGOLA CHE NON VA ROTTA Qui dentro non si scrive un colore per esteso. Se in questo file compare un #, e' un errore: vuol dire che quel colore non e' piu' modificabile da WordPress, ed e' esattamente la cosa che stiamo togliendo di mezzo. Le uniche eccezioni sono le ombre, che sono nere con trasparenza e non appartengono a nessuna divisione. ============================================================ */ :root { /* ---------- Il ponte: nomi corti dalla tavolozza ---------- */ --ink: var(--wp--preset--color--ink); --ink-3: var(--wp--preset--color--ink-3); --paper: var(--wp--preset--color--paper); --paper-2: var(--wp--preset--color--paper-2); --paper-3: var(--wp--preset--color--paper-3); --line: var(--wp--preset--color--line); --divisione: var(--wp--preset--color--divisione); --su-divisione: var(--wp--preset--color--su-divisione); /* La scala di grigi e le gradazioni non stanno nella tavolozza: sono varianti dei colori che ci sono gia', e metterle fra le pastiglie da cliccare renderebbe la tavolozza illeggibile. */ --ink-2: var(--wp--custom--scala--ink-2); --ink-4: var(--wp--custom--scala--ink-4); --ink-5: var(--wp--custom--scala--ink-5); --line-strong: var(--wp--custom--scala--line-strong); /* ---------- I due marchi ---------------------------------- ATTENZIONE: questi due NON seguono la variante, e non e' una dimenticanza. Il verde di Job e il blu di Advisory sono l'identita' delle due divisioni, non "il colore di questo sito". Nella sezione che le presenta entrambe devono restare quelli anche su maqer.it, che di suo e' viola. */ --job: var(--wp--custom--marchio--job); --adv: var(--wp--custom--marchio--adv); /* ---------- I ruoli --------------------------------------- Da qui in giu' non compare piu' nessun colore: solo i nomi definiti sopra. E' questo che permette a un tema solo di vestire due siti e le aree che ci stanno dentro. */ /* Il colore di divisione, dove fa da marca: bottoni, accenti. */ --brand: var(--divisione); --brand-600: var(--divisione); --on-brand: var(--su-divisione); /* Copia fissa, per i punti in cui --brand viene riassegnato dal contesto. E' successo: dentro una superficie piena --brand diventa il colore del testo, e un bottone che lo usava spariva nel fondo. Vedi la decisione D-08 nel runbook. */ --brand-fisso: var(--divisione); --on-brand-fisso: var(--su-divisione); --accento-vivo: var(--divisione); /* La superficie a tinta piena, e il testo che ci sta sopra. */ --surface-brand: var(--divisione); --on-surface-brand: var(--su-divisione); /* La testata. */ --hero-superficie: var(--divisione); --hero-testo: var(--su-divisione); --hero-superficie-scura: var(--ink); --hero-testo-scuro: var(--paper); --hero-btn2-sfondo: var(--ink); --hero-btn2-testo: var(--paper); /* L'ombra e' nera con trasparenza, mai colorata: serve a staccare il testo dalla foto sotto, non a decorare. E' l'unico punto del file in cui compare un valore letterale, e non appartiene a nessuna divisione. */ --ombra-testo: 0 1px 2px rgb(0 0 0 / 0.14), 0 10px 30px rgb(0 0 0 / 0.16); /* La sezione profonda di meta' pagina. */ --surface-deep: var(--divisione); --on-surface-deep: var(--su-divisione); /* ---------- Evidenza ------------------------------------- Il colore di ogni interazione: selezione del testo, anello di focus, sottolineature al passaggio del mouse. NON e' il colore della divisione, ed e' una scelta. Se ogni cosa che tocchi diventa verde, il verde smette di significare qualcosa: diventa il colore di "hai il mouse sopra" invece che il colore di Maqer Job. */ --evidenza: var(--wp--preset--color--evidenza); --on-evidenza: var(--paper); /* L'evidenza da usare SOPRA UNA SCHEDA BIANCA. Sembra una ripetizione e non lo e'. Le fasce a tinta piena riscrivono --evidenza in bianco, perche' sopra il colore pieno l'unica evidenza leggibile e' il bianco. Ma dentro quelle fasce ci sono le schede, e una scheda e' bianca: eredita il bianco e scrive bianco su bianco. E' successo davvero. Nel catalogo di Advisory la parola «Corso» spariva: c'era, si selezionava col mouse, non si vedeva. Questa variabile non viene mai riscritta dalle fasce. Chi sta sopra la carta usa questa, e resta leggibile ovunque si trovi. */ --evidenza-carta: var(--wp--preset--color--evidenza); /* ---------- I due mondi ---------------------------------- Dentro un sito, le pagine per le persone e quelle per le aziende si distinguono. E' un livello sotto la divisione: il verde Job abbraccia tutto, rosa e viola dicono a chi si parla. */ --ambito-persone: var(--wp--preset--color--ambito-persone); --on-ambito-persone: var(--ink); --ambito-aziende: var(--wp--preset--color--ambito-aziende); --on-ambito-aziende: var(--paper); --ambito-aziende-vivo: var(--wp--custom--scala--violetto); /* ---------- Gli accenti ---------------------------------- */ --accent-1: var(--wp--preset--color--accento-1); --accent-2: var(--wp--preset--color--accento-2); --accent-3: var(--wp--preset--color--accento-3); --accent-4: var(--wp--preset--color--accento-4); --on-accent-1: var(--ink); --on-accent-2: var(--ink); --on-accent-3: var(--paper); --on-accent-4: var(--ink); --accent-editorial: var(--line-strong); --accent-flag: var(--accent-4); --accent-seal: var(--ink); } /* ============================================================ LE AREE Un sito ha un colore, ma dentro un sito ci sono aree con un'identita' propria. Non e' un'eccezione: e' come sono fatti i due siti. maqer.it porta il corporate (viola) E Maqer Advisory (blu) maqerjob.it porta Job (verde), e dentro distingue le pagine per le persone da quelle per le aziende Un'area non e' una variante di stile: una variante si sceglie una volta per tutto il sito, mentre due aree devono poter convivere nella stessa pagina. Quindi sono classi, e si applicano al singolo blocco dall'editor. Le classi `is-style-` le scrive WordPress quando scegli lo stile dal pannello del blocco. Registrate in functions.php. ============================================================ */ /* Area Advisory dentro maqer.it. Riassegna il colore di divisione: tutto quello che dentro quest'area dice "divisione" diventa blu, comprese le sezioni che non sanno di essere dentro un'area. */ .is-style-area-advisory, .area-advisory { --divisione: var(--adv); --su-divisione: var(--paper); --evidenza: var(--adv); --on-evidenza: var(--paper); --evidenza-carta: var(--adv); /* ---------- E ADESSO LA PARTE NOIOSA, CHE PERO' SERVE ---------- Le righe qui sotto sembrano una ripetizione di quelle scritte nel :root. NON LO SONO, e toglierle rompe l'area Advisory. Il perche' e' una regola del CSS che si impara una volta sola, di solito nel modo peggiore. Quando nel :root si scrive --surface-deep: var(--divisione); il browser NON tiene in memoria "surface-deep segue divisione". Risolve subito, li', col valore che --divisione ha nel :root, e da quel momento --surface-deep e' un colore fisso. Piu' sotto, dentro .area-advisory, cambiare --divisione non lo tocca: la copia e' gia' stata fatta. Il risultato si vedeva: dentro l'area Advisory diventava blu solo quel poco che usava --divisione per nome. Tutto il resto — la testata, le fasce a tinta piena, i bottoni — restava viola. La pagina di Advisory usciva coi colori del gruppo, e a colpo d'occhio sembrava giusta. Quindi ogni nome derivato da --divisione va riscritto qui, dove --divisione vale blu. Se domani se ne aggiunge uno nel :root, va aggiunto anche qui: `python verifica/controlla-ruoli.py` non passa finche' non lo si fa. */ --brand: var(--divisione); --brand-600: var(--divisione); --on-brand: var(--su-divisione); --brand-fisso: var(--divisione); --on-brand-fisso: var(--su-divisione); --accento-vivo: var(--divisione); --surface-brand: var(--divisione); --on-surface-brand: var(--su-divisione); --hero-superficie: var(--divisione); --hero-testo: var(--su-divisione); --surface-deep: var(--divisione); --on-surface-deep: var(--su-divisione); } /* Le due aree di Job. Qui il colore di divisione NON cambia -- il verde abbraccia tutto -- cambia solo l'evidenza, cioe' il colore di quello che tocchi. E' la differenza fra "di chi e' questo sito" e "a chi sto parlando in questa pagina". */ .is-style-area-persone, .ambito-persone { --evidenza: var(--ambito-persone); --on-evidenza: var(--on-ambito-persone); } .is-style-area-aziende, .ambito-aziende { --evidenza: var(--ambito-aziende); --on-evidenza: var(--on-ambito-aziende); } /* Quando il colore della divisione e' chiaro, due sezioni vicine di bianchi diversi si distinguono a fatica. La linea le separa. Serviva al brand madre, che vive di bianchi; non fa danno altrove. */ .plate + .plate, .plate + .plate-quiet, .plate-quiet + .plate { border-top: 1px solid var(--line); } /* ============================================================ LE SUPERFICI CHIARE DENTRO LE FASCE SCURE Una fascia a tinta piena riscrive i ruoli: sopra il colore pieno il testo e' bianco, e l'evidenza pure. Giusto per la fascia. Ma dentro la fascia ci sono le schede, e una scheda e' bianca. Senza queste righe la scheda si porta dietro i ruoli della fascia: sfondo bianco e ruoli che dicono "scrivi in bianco". Il testo c'e', si seleziona col mouse, e non si vede. Non e' un'ipotesi. Nel catalogo di Advisory la parola «Corso» spariva esattamente cosi'. La regola che ne esce e' semplice e vale sempre: chi si dipinge addosso una superficie chiara deve anche dire che e' chiara. ============================================================ */ .corso, .notizia, .card-alta__segnaposto, .plate-quiet, .campo input, .campo textarea { --surface: var(--paper); --on-surface: var(--ink); --evidenza: var(--evidenza-carta); } /* ============================================================ IL COLORE SI SCEGLIE SEZIONE PER SEZIONE Fin qui il colore lo decideva il posto: il sito, oppure l'area in cui la sezione si trovava. Va bene per una pagina che si costruisce una volta. Non va bene per un tema con cui si assemblano pagine. Chi monta una pagina prende i moduli che gli servono e decide, per ognuno, di che colore e'. Il modulo dei corsi e' UNO: quello verde e quello blu non sono due moduli diversi, sono lo stesso modulo messo su due colori. Lo stesso vale per la testata, per le fasce, per la chiusura. Le classi qui sotto si scelgono dall'editor, nel pannello degli stili del blocco. Ognuna riscrive il colore di divisione e TUTTI i nomi che ne discendono — se ne dimentica uno, la sezione esce mezza di un colore e mezza dell'altro, ed e' il tipo di errore che non si vede leggendo il CSS. `verifica/controlla-ruoli.py` lo impedisce. Restano validi anche i modi di prima: la variante di stile decide il colore di tutto il sito, l'area lo decide per un ramo di pagina. Questa e' la terza possibilita', quella per il singolo pezzo, e vince sulle altre due perche' e' la piu' precisa. ============================================================ */ .is-style-colore-job, .colore-job { --divisione: var(--job); --su-divisione: var(--ink); --evidenza: var(--ink); --on-evidenza: var(--paper); --evidenza-carta: var(--ink); --brand: var(--divisione); --brand-600: var(--divisione); --on-brand: var(--su-divisione); --brand-fisso: var(--divisione); --on-brand-fisso: var(--su-divisione); --accento-vivo: var(--divisione); --surface-brand: var(--divisione); --on-surface-brand: var(--su-divisione); --hero-superficie: var(--divisione); --hero-testo: var(--su-divisione); --surface-deep: var(--divisione); --on-surface-deep: var(--su-divisione); } /* Il verde Job e' chiaro: ci va sopra il nero, e infatti --su-divisione qui e' --ink. Il blu Advisory e' scuro: ci va sopra il bianco. Non e' una preferenza, e' l'unico modo di leggere quello che c'e' scritto. */ .is-style-colore-advisory, .colore-advisory { --divisione: var(--adv); --su-divisione: var(--paper); --evidenza: var(--adv); --on-evidenza: var(--paper); --evidenza-carta: var(--adv); --brand: var(--divisione); --brand-600: var(--divisione); --on-brand: var(--su-divisione); --brand-fisso: var(--divisione); --on-brand-fisso: var(--su-divisione); --accento-vivo: var(--divisione); --surface-brand: var(--divisione); --on-surface-brand: var(--su-divisione); --hero-superficie: var(--divisione); --hero-testo: var(--su-divisione); --surface-deep: var(--divisione); --on-surface-deep: var(--su-divisione); } /* Il viola del gruppo, per le sezioni che parlano di Maqer e non di una divisione. */ .is-style-colore-corporate, .colore-corporate { --divisione: var(--ambito-aziende); --su-divisione: var(--paper); --evidenza: var(--ambito-aziende); --on-evidenza: var(--paper); --evidenza-carta: var(--ambito-aziende); --brand: var(--divisione); --brand-600: var(--divisione); --on-brand: var(--su-divisione); --brand-fisso: var(--divisione); --on-brand-fisso: var(--su-divisione); --accento-vivo: var(--divisione); --surface-brand: var(--divisione); --on-surface-brand: var(--su-divisione); --hero-superficie: var(--divisione); --hero-testo: var(--su-divisione); --surface-deep: var(--divisione); --on-surface-deep: var(--su-divisione); }