[FEATURE] Remise à jour des typographies des titres (PIX-9969)

 #497

addon/styles/pix-design-tokens/_fonts.scss

@@ -1,3 +1,11 @@
+@font-face {
+  font-weight: 700;
+  font-family: 'Nunito';
+  font-style: normal;
+  src: url('../@1024pix/pix-ui/fonts/Nunito/Nunito-Bold.ttf');
+}
+
+/* @deprecated - use Nunito */
 @font-face {
   font-weight: 500;
   font-family: 'Open Sans';
@@ -26,8 +34,15 @@
   src: url('../@1024pix/pix-ui/fonts/Roboto/Roboto-Bold.ttf');
 }
 
+/* @deprecated - use Design Tokens */
 $font-open-sans: 'Open Sans', Arial, sans-serif;
 $font-roboto: 'Roboto', Arial, sans-serif;
 $font-normal: 400;
 $font-medium: 500;
 $font-bold: 700;
+
+:root {
+  --pix-font-normal: 400;
+  --pix-font-medium: 500;
+  --pix-font-bold: 700;
+}

addon/styles/pix-design-tokens/_typography.scss

@@ -2,75 +2,83 @@
 
 // Placeholder pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
 %-pix-title {
-  font-weight: 500;
-  font-family: $font-open-sans;
+  font-weight: 700;
+  font-family: 'Nunito', 'Arial', sans-serif;
 }
 
 %pix-title-l,
 .pix-title-l {
   @extend %-pix-title;
 
-  font-size: 2rem;
-  line-height: 1.25;
-  letter-spacing: -0.04em;
+  --font-size-title: 2rem;
+
+  font-size: var(--font-size-title);
+  line-height: 1.3;
+  letter-spacing: calc(-0.02 * var(--font-size-title));
 
   @include device-is('tablet') {
-    font-size: 2.5rem;
+    --font-size-title: 2.5rem;
   }
 
   @include device-is('desktop') {
-    font-size: 3rem;
+    --font-size-title: 3rem;
   }
 }
 
 %pix-title-m,
 .pix-title-m {
   @extend %-pix-title;
 
-  font-size: 1.625rem;
+  --font-size-title: 1.625rem;
+  --letter-spacing-title: -0.02;
+
+  font-size: var(--font-size-title);
   line-height: 1.3;
-  letter-spacing: -0.02em;
+  letter-spacing: calc(var(--letter-spacing-title) * var(--font-size-title));
 
   @include device-is('tablet') {
-    font-size: 2rem;
-    line-height: 1.25;
-    letter-spacing: -0.04em;
+    --font-size-title: 2rem;
   }
 
   @include device-is('desktop') {
-    font-size: 2.25rem;
+    --font-size-title: 2.25rem;
+    --letter-spacing-title: -0.01;
   }
 }
 
 %pix-title-s,
 .pix-title-s {
   @extend %-pix-title;
 
-  font-size: 1.375rem;
+  --font-size-title: 1.375rem;
+
+  font-size: var(--font-size-title);
   line-height: 1.3;
-  letter-spacing: -0.02em;
+  letter-spacing: calc(-0.01 * var(--font-size-title));
 
   @include device-is('tablet') {
-    font-size: 1.5rem;
+    --font-size-title: 1.5rem;
   }
 
   @include device-is('desktop') {
-    font-size: 1.75rem;
+    --font-size-title: 1.75rem;
   }
 }
 
 %pix-title-xs,
 .pix-title-xs {
   @extend %-pix-title;
 
-  font-size: 1.25rem;
+  --font-size-title: 1.25rem;
+
+  font-size: var(--font-size-title);
   line-height: 1.4;
-  letter-spacing: -0.02em;
+  letter-spacing: calc(-0.01 * var(--font-size-title));
 }
 
 %-pix-body {
   font-weight: 400;
-  font-family: $font-roboto;
+  font-family: 'Roboto', 'Arial', sans-serif;
 }
 
 %pix-body-l,
@@ -115,9 +123,9 @@
 }
 
 .pix-body-weight-medium {
-  font-weight: 500;
+  font-weight: var(--pix-font-medium);
 }
 
 .pix-body-weight-bold {
-  font-weight: 700;
+  font-weight: var(--pix-font-bold);
 }

docs/pix-design-tokens-dev.mdx

@@ -17,23 +17,25 @@ Le standard d'équipe est de créer un placeholder SCSS et une classe CSS préfi
 Par exemple :
 
 ```
-%pix-title-large {
-  font-family: $font-open-sans;
+%pix-title-l {
+  font-family: Nunito, Arial, sans-serif;
   font-size: 2rem;
-  line-height: 1.25;
-  letter-spacing: -0.04em;
-  font-weight: 500;
+  line-height: 1.3;
+  letter-spacing: -0.04rem;
+  font-weight: 700;
 
   @include device-is('tablet') {
     font-size: 2.5rem;
+    letter-spacing: -0.05rem;
   }
 
   @include device-is('desktop') {
     font-size: 3rem;
+    letter-spacing: -0.06rem;
   }
 }
 
-.pix-text {
-  @extend %pix-title-large;
+.my-text {
+  @extend %pix-title-l;
 }
 ```

docs/typography.mdx

@@ -23,31 +23,31 @@ Des **placeholder SCSS** équivalents aux tokens de Figma sont disponibles. C'es
 ### Titres
 
 <Typeset
-  fontSizes={[48]}
-  fontWeight={500}
+  fontSizes={['3rem']}
+  fontWeight={700}
   sampleText={'@extend %pix-title-l;'}
-  fontFamily={'"Open Sans", Arial, sans-serif'}
+  fontFamily={'Nunito, Arial, sans-serif'}
 />
 
 <Typeset
-  fontSizes={[36]}
-  fontWeight={500}
+  fontSizes={['2.25rem']}
+  fontWeight={700}
   sampleText={'@extend %pix-title-m;'}
-  fontFamily={'"Open Sans", Arial, sans-serif'}
+  fontFamily={'Nunito, Arial, sans-serif'}
 />
 
 <Typeset
-  fontSizes={[28]}
-  fontWeight={500}
+  fontSizes={['1.75rem']}
+  fontWeight={700}
   sampleText={'@extend %pix-title-s;'}
-  fontFamily={'"Open Sans", Arial, sans-serif'}
+  fontFamily={'Nunito, Arial, sans-serif'}
 />
 
 <Typeset
-  fontSizes={[20]}
-  fontWeight={500}
+  fontSizes={['1.25rem']}
+  fontWeight={700}
   sampleText={'@extend %pix-title-xs;'}
-  fontFamily={'"Open Sans", Arial, sans-serif'}
+  fontFamily={'Nunito, Arial, sans-serif'}
 />
 
 ### Corps de texte
@@ -95,11 +95,11 @@ Contrairement à l'utilisation de mixins, le CSS compilé ne sera que très peu
 ```css
 .pix-title-m,
 .card__title {
-  font-family: 'Open Sans', Arial, sans-serif;
-  font-size: 2rem;
-  line-height: 1.25;
-  letter-spacing: -0.04em;
-  font-weight: 500;
+  font-family: Nunito, Arial, sans-serif;
+  font-size: 1.625rem;
+  line-height: 1.3;
+  letter-spacing: -0.01625rem;
+  font-weight: 700;
 }
 
 .card__title {
@@ -128,26 +128,26 @@ Des variables SCSS existent pour certaines propriétés de typographie.
 
 ℹ️ Ces variables ne devraient pas être utilisées pour modifier la graisse d'un titre car les classes utilitaires et les placeholders ci-dessus s'en occupent déjà.
 
-`$font-normal: 400;`
+`--pix-font-normal: 400;`
 
-`$font-medium: 500;`
+`--pix-font-medium: 500;`
 
-`$font-bold: 700;`
+`--pix-font-bold: 700;`
 
 ### Font-family
 
-ℹ️ Vous ne devriez pas avoir à les utiliser car elles vont de pair avec d'autres propriétés de typo (font-size, line-height, ...).<br/>
+ℹ️ Ces variables sont dépréciées. Vous ne devez pas avoir à les utiliser car elles vont de pair avec d'autres propriétés de typo (font-size, line-height, ...).<br/>
 Pour en savoir plus, voir les classes utilitaires et les placeholders ci-dessus.
 
-`$font-open-sans: 'Open Sans', Arial, sans-serif;`
+`$font-nunito: Nunito, Arial, sans-serif;`
 
 `$font-roboto: 'Roboto', Arial, sans-serif;`
 
 ## Détails techniques
 
 On utilise sur les applications Pix deux polices d'écriture :
 
-- Open Sans pour les titres
+- Nunito pour les titres
 - Roboto pour les corps
 
 Selon qu'on utilise un smartphone, une tablette ou un ordinateur de bureau on peut se placer plus ou moins proche de l'écran.