-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FEATURE] Remise à jour des typographies des titres (PIX-9969) #497
Conversation
Une fois l'application déployée, elle sera accessible à cette adresse https://ui-pr497.review.pix.fr |
2be3459
to
e048547
Compare
649f7e4
to
f9e5ae9
Compare
f9e5ae9
to
422927f
Compare
Côté Storybook je propose de ne rien faire.
Qu'est-ce qui est KO ? |
Nope, c'était une erreur, pas de KO |
422927f
to
1771bfb
Compare
5d3ee58
to
4d4f6d3
Compare
4d4f6d3
to
02e85a0
Compare
🎄 Problème
On souhaite mettre à jour les typographies utilisées pour nos titres de la police Open Sans vers la police Nunito. Les détails des variantes de typos sont sur Figma : https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?type=design&node-id=2598-16269&mode=design&t=WFMIRmEDI58shetS-0.
🎁 Proposition
Pour avoir le maximum d'impact, remplacer directement les valeurs données aux Design Tokens de nos titres, via les placeholders SCSS et classes CSS.
Par soucis de rétrocompatibilité, on conserve la possibilité de récupérer Open Sans via Pix UI mais on note que ça sera déprécié. Je pense donc que ça peut être une montée de version mineure ou patch. La suppression d'Open Sans sera une montée de version majeure. On pourra peut être en profiter pour supprimer les
line-height
qui posent problème quand les fonts sont utilisées dans d'autres contextes des paragraphes de texte.On n'expose pas plus de variables "privées" de Pix UI. L'objectif des Design Tokens est de pouvoir correspondre aux cas d'usages le plus fidèlement possible.
On met à disposition 3 variables CSS pour ajuster le
font-weight
quand c'est nécessaire, en complément des 2 classes utilitaires déjà existantes (rien ne change sur leurs valeurs). On a utilisé en interne des variables CSS pour simplifier le code :)🌟 Remarques
Je ne sais pas comment tester la fallback font, j'ai l'impression qu'elles ne sont pas utilisées car le loader Ember attend le chargement de notre font.
🎅 Pour tester
Dans Pix UI :
PixIndicatorCard
,PixModal
etPixSidebar
.Dans les différentes applications qui l'utilisent :