feat(fonts): add private font family custom properties to improve deb…

…ugging experience
1024pix · Mar 14, 2024 · 5f814b2 · 5f814b2
1 parent ed01139
commit 5f814b2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/addon/styles/pix-design-tokens/_fonts.scss b/addon/styles/pix-design-tokens/_fonts.scss
@@ -45,4 +45,14 @@ $font-bold: 700;
   --pix-font-normal: 400;
   --pix-font-medium: 500;
   --pix-font-bold: 700;
+
+  // Private property, do not use directly
+  // See https://ui.pix.fr/?path=/docs/utiliser-pix-ui-design-tokens-typographie--docs
+  // stylelint-disable-next-line custom-property-pattern
+  --_pix-font-family-title: 'Nunito', Arial, sans-serif;
+
+  // Private property, do not use directly
+  // See https://ui.pix.fr/?path=/docs/utiliser-pix-ui-design-tokens-typographie--docs
+  // stylelint-disable-next-line custom-property-pattern
+  --_pix-font-family-body: 'Roboto', Arial, sans-serif;
 }
diff --git a/addon/styles/pix-design-tokens/_typography.scss b/addon/styles/pix-design-tokens/_typography.scss
@@ -3,7 +3,9 @@
 // Placeholder pour permettre l'utilisation dans une classe css si jamais le tag html a trop de classe
 %-pix-title {
   font-weight: 700;
-  font-family: 'Nunito', 'Arial', sans-serif;
+
+  // stylelint-disable-next-line custom-property-pattern
+  font-family: var(--_pix-font-family-title);
 }
 
 %pix-title-l,
@@ -78,7 +80,9 @@
 
 %-pix-body {
   font-weight: 400;
-  font-family: 'Roboto', 'Arial', sans-serif;
+
+  // stylelint-disable-next-line custom-property-pattern
+  font-family: var(--_pix-font-family-body);
 }
 
 %pix-body-xs,

diff --git a/docs/typography.mdx b/docs/typography.mdx
@@ -26,28 +26,28 @@ Des **placeholder SCSS** équivalents aux tokens de Figma sont disponibles. C'es
   fontSizes={['3rem']}
   fontWeight={700}
   sampleText={'@extend %pix-title-l;'}
-  fontFamily={'Nunito, Arial, sans-serif'}
+  fontFamily={'var(--_pix-font-family-title)'}
 />
 
 <Typeset
   fontSizes={['2.25rem']}
   fontWeight={700}
   sampleText={'@extend %pix-title-m;'}
-  fontFamily={'Nunito, Arial, sans-serif'}
+  fontFamily={'var(--_pix-font-family-title)'}
 />
 
 <Typeset
   fontSizes={['1.75rem']}
   fontWeight={700}
   sampleText={'@extend %pix-title-s;'}
-  fontFamily={'Nunito, Arial, sans-serif'}
+  fontFamily={'var(--_pix-font-family-title)'}
 />
 
 <Typeset
   fontSizes={['1.25rem']}
   fontWeight={700}
   sampleText={'@extend %pix-title-xs;'}
-  fontFamily={'Nunito, Arial, sans-serif'}
+  fontFamily={'var(--_pix-font-family-title)'}
 />
 
 ### Corps de texte
@@ -56,28 +56,28 @@ Des **placeholder SCSS** équivalents aux tokens de Figma sont disponibles. C'es
   fontSizes={[18]}
   fontWeight={400}
   sampleText={'@extend %pix-body-l;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
+  fontFamily={'var(--_pix-font-family-body)'}
 />
 
 <Typeset
   fontSizes={[16]}
   fontWeight={400}
   sampleText={'@extend %pix-body-m;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
+  fontFamily={'var(--_pix-font-family-body)'}
 />
 
 <Typeset
   fontSizes={[14]}
   fontWeight={400}
   sampleText={'@extend %pix-body-s;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
+  fontFamily={'var(--_pix-font-family-body)'}
 />
 
 <Typeset
   fontSizes={[12]}
   fontWeight={400}
   sampleText={'@extend %pix-body-xs;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
+  fontFamily={'var(--_pix-font-family-body)'}
 />
 
 ### Comment utiliser un placeholder SCSS ?