feat(font): change titles by Nunito

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,6 +34,9 @@
   src: url('../@1024pix/pix-ui/fonts/Roboto/Roboto-Bold.ttf');
 }
 
+$font-nunito: 'Nunito', 'Arial Rounded MT Bold', sans-serif;
+
+/* @deprecated - use Nunito */
 $font-open-sans: 'Open Sans', Arial, sans-serif;
 $font-roboto: 'Roboto', Arial, sans-serif;
 $font-normal: 400;

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

@@ -2,24 +2,26 @@
 
 // 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: $font-nunito;
 }
 
 %pix-title-l,
 .pix-title-l {
   @extend %-pix-title;
 
   font-size: 2rem;
-  line-height: 1.25;
-  letter-spacing: -0.04em;
+  line-height: 1.3;
+  letter-spacing: calc(-0.02 * 2rem);
 
   @include device-is('tablet') {
     font-size: 2.5rem;
+    letter-spacing: calc(-0.02 * 2.5rem);
   }
 
   @include device-is('desktop') {
     font-size: 3rem;
+    letter-spacing: calc(-0.02 * 3rem);
   }
 }
 
@@ -29,16 +31,16 @@
 
   font-size: 1.625rem;
   line-height: 1.3;
-  letter-spacing: -0.02em;
+  letter-spacing: calc(-0.02 * 1.625rem);
 
   @include device-is('tablet') {
     font-size: 2rem;
-    line-height: 1.25;
-    letter-spacing: -0.04em;
+    letter-spacing: calc(-0.02 * 2rem);
   }
 
   @include device-is('desktop') {
     font-size: 2.25rem;
+    letter-spacing: calc(-0.01 * 2.25rem);
   }
 }
 
@@ -48,14 +50,16 @@
 
   font-size: 1.375rem;
   line-height: 1.3;
-  letter-spacing: -0.02em;
+  letter-spacing: calc(-0.01 * 1.375rem);
 
   @include device-is('tablet') {
     font-size: 1.5rem;
+    letter-spacing: calc(-0.01 * 1.5rem);
   }
 
   @include device-is('desktop') {
     font-size: 1.75rem;
+    letter-spacing: calc(-0.01 * 1.75rem);
   }
 }
 
@@ -65,7 +69,7 @@
 
   font-size: 1.25rem;
   line-height: 1.4;
-  letter-spacing: -0.02em;
+  letter-spacing: calc(-0.01 * 1.25rem);
 }
 
 %-pix-body {

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: $font-nunito;
   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 Rounded MT Bold", 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 Rounded MT Bold", 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 Rounded MT Bold", 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 Rounded MT Bold", 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 Rounded MT Bold', sans-serif;
+  font-size: 1.625rem;
+  line-height: 1.3;
+  letter-spacing: -0.01625rem;
+  font-weight: 700;
 }
 
 .card__title {
@@ -139,15 +139,15 @@ Des variables SCSS existent pour certaines propriétés de typographie.
 ℹ️ 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/>
 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 Rounded MT Bold', 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.