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,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: $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, Helvetica, 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, Helvetica, 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, Helvetica, 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, Helvetica, 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, Helvetica, 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, Helvetica, 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.