L’équipe de conception est en train d’apporter de petits mais puissants changements/ajustements au thème foundation pour s’aligner un peu plus étroitement sur les normes web modernes. Pour voir ces changements en direct sur meta, rejoignez ce groupe :
https://meta.discourse.org/g/modernized-foundation
Nous allons rendre ce changement effectif via la nouvelle fonctionnalité Upcoming Changes disponible dans Discourse. Cela permettra aux propriétaires de site d’activer les changements pour tout groupe qu’ils spécifient, afin de tester le déploiement des changements sans craindre de potentiellement casser les thèmes ou les personnalisations actuelles.
Qu’est-ce qui va changer ?
La hauteur de l’en-tête diminue
Nous avons diminué la taille de l’en-tête ainsi que celle de certaines icônes et de l’avatar pour mieux utiliser l’espace à l’écran.
Boutons par défaut
Nous passons d’un arrière-plan de bouton gris par défaut à un arrière-plan transparent / « secondaire » avec une bordure.
- suppression de l’arrière-plan gris
- ajout de bordures
- la couleur de l’icône correspond à la couleur du texte
- les boutons ont maintenant une hauteur définie
Bouton Créer un nouveau sujet sur la page de liste des sujets
Correspondance avec Horizon et attribution d’une couleur d’arrière-plan « CTA » de tertiary
Suppression de nombreux arrière-plans gris
Liste des sujets
- suppression de la bordure supérieure épaisse de 3 px
- diminution de la taille de la police des données d’en-tête de tableau
- couleur cohérente pour les éléments de données de tableau
- changement de valeur de couleur pour lire/non lu
- légère augmentation de l’épaisseur de la police pour les éléments non lus
Catégories
- alignement du texte à gauche
- suppression de la bordure colorée épaisse à gauche
- badges légèrement arrondis
- bordure plus fine sur la boîte
Barre de navigation
- Les pilules de navigation sur les pages de liste de sujets auront la même hauteur que les boutons dans cette zone
- texte et icône de couleur plus foncée sur le kit sélectionné
Barre latérale
- la couleur de l’icône et du texte correspondent
- texte et icônes plus foncés
- arrière-plan « actif » plus clair
- graisse de police active plus prononcée
Bannière de bienvenue
- espacement équilibré
- variables ajoutées pour un alignement gauche/droite/centre plus facile via la personnalisation
- graisse de police de l’en-tête diminuée
- diminution de la taille de la police du sous-titre
Calendrier
- arrière-plan gris supprimé des « boutons »
- utilisation du gris uniquement pour signifier « actif »
- passage au style de bouton « transparent avec bordure »
Menus déroulants
- ajout de rembourrage au conteneur du menu déroulant
- la hauteur, le rembourrage, l’espacement correspondent maintenant aux éléments de la barre latérale
- unification des « listes cliquables »
- la bordure hérite de la variable
--d-border-radius
Nouvelles variables
Certains des changements ici seront introduits via des variables supplémentaires ajoutées au cœur.
Alignement de la bannière de bienvenue
L’alignement de la bannière de bienvenue pourra désormais être modifié via :
// par défaut
--welcome-banner-text-align: center;
--welcome-banner-search-menu-margin-inline: auto;
// personnalisé
--welcome-banner-text-align: left;
--welcome-banner-search-menu-margin-inline: 0 auto;
Hauteur du bouton
Nous aurons désormais une hauteur de bouton définie via :
// par défaut
--button-height: var(--space-8);
Lissage des polices
Nous faisons déjà cela dans Horizon, il est logique de l’intégrer à foundation.
// nouveau par défaut
--webkit-font-smoothing: antialiased;
