Cleaning up our font system

Si les variations relatives de taille de police vous conviennent, vous pouvez simplement définir une taille de police différente sur l’élément :root, et les em s’adapteront automatiquement.

3 « J'aime »

Est-ce que je passe à côté de quelque chose, ou s’agit-il simplement d’une réticence à offrir une arme à feu aux thèmes et plugins ? Déclarer toutes ces variables avec !default semble être un moyen simple de permettre leur surcharge.

2 « J'aime »

Je ne pense pas que cela ait fonctionné auparavant, car les styles de base étaient compilés avant qu’un thème ne puisse les remplacer ? C’était le cas pour les couleurs en tout cas… Je sais que certaines choses concernant la compilation de SCSS ont changé, alors peut-être que ce n’est plus un problème ?

Nous pouvons également passer à des propriétés CSS personnalisées pour ces éléments, comme nous l’avons fait pour les couleurs, si !default ne suffit pas.

3 « J'aime »

Ah, c’est vrai ! On dirait que les propriétés personnalisées sont bel et bien la bonne solution à la fin ! :muscle:

4 « J'aime »

Voici une refactorisation pour votre revue ; celle-ci pourrait mieux fonctionner pour permettre à n’importe quelle feuille de style d’utiliser ou de mettre à jour les variables :

OK, j’ai un peu mieux saisi le sujet : actuellement, toutes les variables définies ici peuvent être lues par les thèmes et les plugins, mais pas avoir de nouvelles valeurs écrites, car chaque feuille de style est compilée séparément. L’ajout de propriétés CSS personnalisées permet aux thèmes et plugins de remplacer dynamiquement les variables, et toutes les feuilles de style dépendantes récupèrent les nouvelles valeurs. :slight_smile:

3 « J'aime »

Salut @bekircem, avec la fusion ci-dessus, tu peux maintenant ajouter un thème qui remplace les variables de police de base en redéfinissant les propriétés CSS (côté client) comme ceci :

// Utilise probablement pas ces valeurs, mais tu peux comprendre l'idée :
:root {
    --font-down-1: 0.8em;
    --font-0: 2em;
    --font-up-1: 3em;
    --font-up-2: 4em;
}
3 « J'aime »