Il team di progettazione sta apportando piccole ma significative modifiche/aggiustamenti al tema foundation per allinearsi un po’ di più agli standard web moderni. Per visualizzare queste modifiche in tempo reale su meta, unisciti a questo gruppo:
https://meta.discourse.org/g/modernized-foundation
Introdurremo questa modifica tramite la nuova funzionalità Upcoming Changes disponibile in Discourse. Ciò consentirà ai proprietari dei siti di abilitare le modifiche per qualsiasi gruppo specificato, al fine di testare il rilascio delle modifiche senza il timore di potenziali rotture di temi o personalizzazioni esistenti.
Cosa cambierà?
L’intestazione si restringe in altezza
Abbiamo ridotto le dimensioni dell’intestazione insieme ad alcune icone e avatar leggermente per ottimizzare lo spazio sullo schermo.
Pulsanti predefiniti
Stiamo passando da uno sfondo grigio predefinito del pulsante a uno sfondo trasparente / “secondario” con un bordo.
- rimozione dello sfondo grigio
- aggiunta di bordi
- il colore dell’icona corrisponde al colore del testo
- i pulsanti ora hanno un’altezza fissa
Pulsante Crea nuovo argomento nella pagina dell’elenco degli argomenti
Corrispondenza con Horizon e assegnazione di un colore di sfondo “CTA” di tertiary
Rimozione di molti sfondi grigi
Elenco argomenti
- rimozione del bordo superiore spesso 3 px
- diminuzione della dimensione del carattere dei dati dell’intestazione della tabella
- colore coerente per gli elementi dei dati della tabella
- modifica del valore del colore per leggere/non letto
- leggero aumento del peso del carattere per i non letti
Categorie
- allineamento a sinistra del testo
- rimozione del bordo colorato spesso a sinistra
- badge leggermente arrotondati
- bordo più sottile sulla scatola
Barra di navigazione
- Le pillole di navigazione nelle pagine dell’elenco degli argomenti avranno la stessa altezza dei pulsanti in questa zona
- testo e colore dell’icona più scuri sul kit selezionato
Barra laterale
- il colore dell’icona e del testo corrisponde
- testo e icone più scuri
- sfondo “attivo” più chiaro
- peso del carattere attivo più marcato
Banner di benvenuto
- spaziatura bilanciata
- aggiunte variabili per un più facile allineamento a sinistra/destra/centro tramite personalizzazione
- peso del carattere dell’intestazione diminuito
- diminuzione della dimensione del carattere del sottotitolo
Calendario
- sfondo grigio rimosso dai “pulsanti”
- usa il grigio solo per indicare “attivo”
- passaggio allo stile del pulsante “trasparente con bordo”
Menu a discesa
- aggiunta di spaziatura al contenitore del menu a discesa
- altezza, spaziatura, spazio ora corrispondono agli elementi della barra laterale
- unificazione delle “liste cliccabili”
- il bordo eredita la variabile
--d-border-radius
Nuove Variabili
Alcune delle modifiche qui saranno introdotte tramite variabili aggiuntive aggiunte al core.
Allineamento del banner di benvenuto
L’allineamento del banner di benvenuto potrà ora essere modificato tramite:
// predefinito
--welcome-banner-text-align: center;
--welcome-banner-search-menu-margin-inline: auto;
// personalizzato
--welcome-banner-text-align: left;
--welcome-banner-search-menu-margin-inline: 0 auto;
Altezza del pulsante
Ora avremo un’altezza fissa del pulsante tramite:
// predefinito
--button-height: var(--space-8);
Smussatura dei caratteri (Font smoothing)
Lo stiamo già facendo in Horizon, ha senso portarlo a foundation.
// nuovo predefinito
--webkit-font-smoothing: antialiased;
