@1024pix/pix-ui 39.0.3 → 40.1.0

package/docs/design-tokens.mdx

@@ -1,72 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Utiliser Pix UI/Design Tokens/ Utilisation" />
-
-# Design Tokens
-
-> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icônes, etc.)
-
-## Utiliser les classes, placeholders, mixins et variables dans vos fichiers scss
-
-En ajoutant la dépendance dans votre application avec `npm install`, vous avez déjà accès aux classes, mais pour avoir accès aux placeholders, mixins et variables,
-il faut ajouter le code ci-dessous dans le `new EmberApp()` de votre `ember-cli.build.js` qui se trouve à la racine du projet :
-
-```js
-sassOptions: {
-  includePaths: ['node_modules/@1024pix/pix-ui/addon/styles'],
-},
-```
-
-Par la suite vous aurez accès à toutes les variables des design tokens avec le `$`, par exemple `border: 1px solid $pix-primary;`.
-
-Pour pouvoir utiliser les placeholders et mixins, il faudra importer les design tokens dans le fichier source :
-
-```css
-/* Fichier pix/orga/app/styles/app.scss */
-@import 'pix-design-tokens';
-```
-
-Puis les utiliser de cette manière :
-
-```css
-/* Fichier pix/orga/app/styles/authenticated/organization.scss */
-.organization-title {
-  @extend %pix-title-m;
-
-  @include device-is('desktop') {
-    ...
-  }
-}
-```
-
-## Définir les alertes
-
-Les couleurs pour définir un état d'une alerte ont été attribuées pour uniformiser le visuel sur toutes les applications.
-
-### Success
-
-```
-Texte ou bordure : $pix-success-70
-Background : $pix-success-5
-```
-
-### Warning
-
-```
-Texte ou bordure : $pix-warning-70
-Background : $pix-warning-5
-```
-
-### Error
-
-```
-Texte ou bordure : $pix-error-70
-Background : $pix-error-5
-```
-
-### Information
-
-```
-Texte ou bordure : $pix-primary-70
-Background : $pix-primary-5
-```

package/docs/good-practices-a11y.mdx

@@ -1,43 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import accessibilityImage from './assets/accessibility-storybook.png';
-
-<Meta title="Développement/Bonnes pratiques/Accessibilité" />
-
-# Bonnes pratiques d'accessibilité
-
-L'accessiblité est un enjeu important sur nos composants UI.
-
-## S'assurer d'avoir un composant accessible
-
-- Penser au contraste entre le fond et le texte de votre composant.
-- La taille de la police ne peut pas être inférieure à `10px`.
-- La navigation au clavier permet d'accéder à toutes les parties de votre composant `Tab pour aller à l'élément suivant, Entrée ou Espace pour valider, Maj+Tab pour revenir à l'élément précédent`.
-- S'assurer que les éléments en focus suivent un ordre logique.
-- Lancer un logiciel de lecture d'écran (VoiceOver pour Mac) et s'assurer que ce soit compréhensible pour l'utilisateur.
-
-Exemples pour l'utilisation du lecteur d'écran :
-
-- Est-ce que l’information est lu et est compréhensible ?
-
-- Si l'information est obligatoire, est-ce signalé ?
-
-- Est-ce que les champs à remplir sont bien accompagnés d’un label ?
-
-- En cas d’erreur, est-ce que l’on prévient bien l'utilisateur pour corriger son erreur ?
-
-Pour vous aider à créer un composant accessible :
-
-- les channels Slack `#tech-a11y` (interne) et `#ext-hotline-accessibilité-pix-tanaguru` (externe avec Tanaguru) sont disponibles pour répondre à vos questions sur le sujet.
-- Nos pratiques sur l'accessibilité [ici](https://github.com/1024pix/pix/blob/dev/docs/Accessibilite.md)
-- Compte-rendu détaillé de notre atelier avec Tanaguru [ici](https://1024pix.atlassian.net/wiki/spaces/DEV/pages/2856288297/2021-05-27+-+Compte-rendu+Atelier+accessibilit+Tanaguru+les+devs)
-- Checklist des recommandations WebAIM [ici](https://webaim.org/standards/wcag/checklist#sc2.4.4)
-
-## Vérifier l'accessibilité d'un composant sur Storybook
-
-Pour chaque composant, dans la partie 'Canvas', vous pouvez accéder à l'onglet 'Accessibility' qui donne un aperçu des règles d'accessibilité validées (Passes) ou non (Violations).
-
-Il est possible de cliquer sur "More info..." pour connaître en détail ces règles.
-
-<img src={accessibilityImage} alt="Accessibility in Storybook" />
-
-Mais cela ne couvre pas à 100% les règles d'accessibilité.

package/docs/good-practices-design.mdx

@@ -1,62 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Développement/Bonnes pratiques/Design" />
-
-# Bonnes pratiques design
-
-## Nommage
-
-- les **noms de branches** commencent par `pix-ui`.
-
-- Les **noms des fichiers** suivent l'exemple de la pix-tooltip.
-  _Par exemple, pour les styles, on recomandera de rajouter `_` devant le nom du fichier pour indiquer que c'est un ["fichier partiel Sass"](https://sass-lang.com/guide#topic-4)._
-
-- Les **noms des composants** commencent par `Pix` et sont écrit en _PascalCase_.
-  _Par exemple, un composant bouton devient : `PixButton`._
-
-- Les **noms des propriétés des composants** sont écrit en _camelCase_.
-
-```hbs
-<PixSelect @options={{options}} @onChange={{onChange}} @selectedOption='1' />
-```
-
-- Les **noms des classes CSS** suivent la convention [BEM](https://github.com/1024pix/pix/blob/dev/docs/CSS.md).
-
-```html
-class='pix-tooltip__content'
-```
-
-## Intentions & Responsabilités
-
-Il faut garder une **responsabilité unique** par composant.
-
-- Un composant doit interagir uniquement dans son scope afin de ne pas devenir trop complexe et provoquer des effets de bord.
-- Un composant trop complexe induit plusieurs paramètres ce qui rend donc son utilisation délicate.
-
-Par exemple, si l'intention d'un composant est d'être un bouton (dans notre existant, _`PixButton`_) et qu'on le fait évoluer pour qu'il puisse devenir aussi un lien, il perd alors son intention d'origine (le nommage du composant _`PixButton`_ ne fait alors plus sens) et prend trop de responsabilités.
-
-Il conviendra alors d'avoir un composant pour un bouton et un autre pour un lien.
-
-## Breaking changes
-
-Un breaking change implique un changement d'intention ou/et de responsabilités du composant. Il est nécessaire de l'indiquer dans la PR correspondante.
-
-Exemple de PR : [Enrichir la Pix Tooltip - BREAKING CHANGES (Pix-2000).](https://github.com/1024pix/pix-ui/pull/68)
-
-Lorsqu'une autre personne va mettre à jour Pix UI dans une application, il est important qu'elle **vérifie le bon fonctionnement et le bon affichage des composants impactés par ces changements**. Il faut lui faciliter au maximum cette tâche en indiquant clairement dans la description de la PR le ou les composants impactés et les vérifications à effectuer.
-
-## Rétrocompatibilité / Deprecated
-
-Il est aussi possible de signaler ces changements comme dépréciés :
-
-- Ne pas supprimer le composant actuel mais l'indiquer comme déprécié afin qu'il soit toujours utilisable le temps de faire les modifications. À terme, l'élément déprécié sera supprimé dans une nouvelle version majeure de Pix UI.
-
-Exemple d'un composant déprécié :
-
-```hbs
-<PixSelect>
-  <NewPixSelect @options={{options}} @onChange={{onChange}} @selectedOption='1' />
-</PixSelect>
-```
-
-Autres détails d'un breaking change sur la page [Installation](/?path=/docs/utiliser-pix-ui-installation--page).

package/docs/good-practices-responsive.mdx

@@ -1,51 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Développement/Bonnes pratiques/Responsive" />
-
-# Bonnes pratiques responsive
-
-La mise en place de composants responsive doit respecter les règles définies dans le Design System.
-
-## Breakpoints
-
-L'ensemble des breakpoints pour les différentes résolutions sont définis dans [le chapitre **Layout/Breakpoints** du Design System](https://zeroheight.com/8dd127da7/p/6877af-layout/t/47086b).
-
-Ils sont décris dans le fichier `addon/styles/_breakpoints.scss` et utilisables via la mixin `device-is`
-
-Par exemple, ici le style s'applique si on a moins la largeure d'une tablette.
-
-```scss
-@include device-is('tablet') {
-  padding: 32px 58px;
-  font-size: 0.875rem;
-}
-```
-
-Le différents devices disponibles sont :
-
-- `mobile`
-- `tablet`
-- `desktop`
-- `large-screen`
-
-## Mobile first
-
-Le développement des composants doit être pensé et développé pour mobile puis adapté à des résolutions et devices supérieurs par la suite.
-
-```scss
-.my-class {
-  width: 100px; // Sur mobile par défaut
-
-  @include device-is('tablet') {
-    width: 200px; // Sur tablette
-  }
-
-  @include device-is('desktop') {
-    width: 300px; // Sur desktop
-  }
-
-  @include device-is('large-screen') {
-    width: 400px; // Sur écran large
-  }
-}
-```

package/docs/good-practices-style-css.mdx

@@ -1,40 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Développement/Bonnes pratiques/Style CSS" />
-
-# Style CSS / SCSS
-
-## Arborescence
-
-- Les variables se trouvent dans leur fichier scss respectif: `_breakpoints.scss`, `_colors.scss`, `_fonts.scss`.
-- Chaque composant a son fichier scss qui sont importés dans `addon/styles/addon.scss`.
-
-```javascript
-@import 'pix-tooltip';
-```
-
-## Rendre surchargeable le SCSS
-
-Passer `...attributes` au composant.
-
-```html
-<div class="pix-background-header" ...attributes></div>
-```
-
-## Convention BEM
-
-Nos classes suivent la convention [BEM](https://github.com/1024pix/pix/blob/dev/docs/CSS.md).
-
-```javascript
-class='pix-tooltip__content'
-```
-
-## rem, spacing...
-
-Il est recommandé d'utiliser le `rem` plutot que `px`.
-1rem = 16px
-
-Concernant les niveaux de textes, se référer a ZeroHeight [ici](https://zeroheight.com/8dd127da7/p/20e4df-typographie/b/974231).
-
-Utiliser les **variables Sass** déjà existantes.
-_Par exemple, vérifier dans les fichiers `_fonts.scss` et `_colors.scss`. Si elles n'existent pas, les rajouter au bon endroit._

package/docs/good-practices-tests.mdx

@@ -1,9 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Développement/Bonnes pratiques/Tests" />
-
-# Bonnes pratiques de test
-
-- Tests unitaires
-- Tests intégrations
-- Tests UI (en cours d'étude)

package/docs/make-a-release.mdx

@@ -1,45 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Développement/Faire une release" />
-
-# Faire une release
-
-## C'est quoi une release ?
-
-Une release est la publication d'un nouvelle version du projet.
-
-Autrement dit, on crée un tag git pour nommer cette version. Les nouveautés embarquées par cette version sont donc
-uniquement celles déjà présentes sur `dev` au moment de la release.
-
-Les applications se servant de Pix UI pourront alors se mettre à jour et utiliser les nouveaux composants et des
-dernières features en précisant le numéro de la version.
-
-Par ailleurs, sur Pix UI une release signifie aussi la mise à jour automatique de [notre storybook en ligne](https://storybook.pix.fr/).
-
-## Effectuer la release via slack
-
-Aller dans le canal slack dédié aux releases : [#tech-releases](https://1024pix.slack.com/archives/CVAMDQYHY), puis taper la commande suivante :
-
-- `/publish-pix-ui <version_souhaitée>`
-  `<version_souhaitée>` peut prendre 3 valeurs :
-  - `patch` : correctif de bug
-  - `minor` : modifications n'apportant pas de changement dans l'utilisation de Pix UI
-  - `major` : modifications apportant des breaking changes
-
-Vous devriez voir apparaître dans le canal un premier message (visible uniquement par vous) de Pix-bot vous indiquant
-que la demande de déploiement pour Pix UI a bien été prise en compte.
-
-Ensuite, Pix-Bot vous confirmera à nouveau via deux messages (un privé et un public) du bon déploiement de Pix UI en
-indiquant le numéro de sa nouvelle version.
-
-Et voilà 🎉
-
-Si vous souhaitez suivre le déroulement de la release, consulter les [logs](https://github.com/1024pix/pix-ui/actions/workflows/deploy-storybook.yml)
-de la GitHub action `Deploy Pix UI Storybook`.
-
-## Constater le bon fonctionnement de la release
-
-Pour vérifier si la release s'est bien déroulée :
-
-- vérifier le contenu du [CHANGELOG.md](../CHANGELOG.md) : contient-il toutes les PR qui ont été mergées récemment sur la branche `dev` ?
-- vérifier si notre [Storybook en ligne](https://1024pix.github.io/pix-ui/) montre bien les nouveaux composants.

package/docs/pix-design-tokens-dev.mdx

@@ -1,39 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Développement/Pix Design Tokens" />
-
-# Design Tokens
-
-> Les design tokens contiennent plusieurs éléments de base de la charte graphique (les couleurs, la typographie, les icones, etc.)
-
-## Rajouter des design tokens dans Pix UI
-
-Quand vous êtes amenés à ajouter ou à modifier des éléments des design tokens, faites le dans le scss associé,
-par example `addon/styles/_typography.scss` ou `addon/styles/_colors.scss` et s'il n'est pas déjà importé, rajoutez l'import dans `addon/styles/design-tokens.scss`.
-Ceci nous permettra d'utiliser les placeholders dans nos applications par la suite.
-
-Le standard d'équipe est de créer un placeholder SCSS et une classe CSS préfixés par `pix-`.
-
-Par exemple :
-
-```
-%pix-title-large {
-  font-family: $font-open-sans;
-  font-size: 2rem;
-  line-height: 1.25;
-  letter-spacing: -0.04em;
-  font-weight: 500;
-
-  @include device-is('tablet') {
-    font-size: 2.5rem;
-  }
-
-  @include device-is('desktop') {
-    font-size: 3rem;
-  }
-}
-
-.pix-text {
-  @extend %pix-title-large;
-}
-```

package/docs/pull_request_template.md

@@ -1,14 +0,0 @@
-## :boom: BREAKING_CHANGES
-> _Décrivez ici les changements cassant (voir la doc associée)[https://github.com/1024pix/pix-ui/blob/dev/docs/breaking-changes.stories.mdx], s'il n'y en a pas indiquez le aussi.
-
-## :christmas_tree: Problème
-> _Décrivez ici le besoin ou l'intention couvert par cette Pull Request._
-
-## :gift: Solution
-> _Ajoutez à cet endroit, si nécessaire, des détails concernant la solution technique retenue et mise en oeuvre, des difficultés ou problèmes rencontrés._
-
-## :star2: Remarques
-> _Des infos supplémentaires, trucs et astuces ?_
-
-## :santa: Pour tester
-> _Les instructions pour reproduire le problème, les profils de test, le parcours spécifique à utiliser, etc._

package/docs/shadow.mdx

@@ -1,25 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Utiliser Pix UI/Design Tokens/Ombres" />
-
-# Ombres
-
-Pour uniformiser les ombres dans nos applications, on dispose de plusieurs classes CSS :
-
-- `pix-shadow-xs`
-- `pix-shadow-sm`
-- `pix-shadow-md`
-- `pix-shadow-lg`
-- `pix-shadow-xl`
-
-Et leur équivalent en placeholder SCSS :
-
-- `@extend %pix-shadow-xs;`
-- `@extend %pix-shadow-sm;`
-- `@extend %pix-shadow-md;`
-- `@extend %pix-shadow-lg;`
-- `@extend %pix-shadow-xl;`
-
-Code associé : https://github.com/1024pix/pix-ui/blob/dev/addon/styles/pix-design-tokens/_shadows.scss
-
-Lien Figma : https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=54%3A5141

package/docs/spacing.mdx

@@ -1,19 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Utiliser Pix UI/Design Tokens/Espacements" />
-
-# Espacements
-
-Pour uniformiser les espacements dans nos applications, on dispose de plusieurs variables SCSS :
-
-- `$pix-spacing-xxs`
-- `$pix-spacing-xs`
-- `$pix-spacing-s`
-- `$pix-spacing-m`
-- `$pix-spacing-l`
-- `$pix-spacing-xl`
-- `$pix-spacing-xxl`
-
-Code associé : https://github.com/1024pix/pix-ui/blob/dev/addon/styles/pix-design-tokens/_spacing.scss
-
-Lien Figma : https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=54%3A4595&t=8piOzYzdI0ala3i6-0

package/docs/storybook.mdx

@@ -1,45 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Développement/Storybook" />
-
-# Déploiement de Storybook
-
-Notre Storybook est déployé à l'adresse suivante : https://storybook.pix.fr
-
-## C'est quoi Storybook ?
-
-[Storybook](https://storybook.js.org/) est un outil pour faire des interfaces présentant les composants UI d'un projet.
-Par abus de langage, lorsque nous parlons de Storybook, nous parlons du site web crée grâce à cet outil.
-
-## Qui héberge notre Storybook ?
-
-Notre Storybook est hébergé de manière statique sur les [Github Pages](https://pages.github.com/).
-
-## Quand est mis à jour notre Storybook ?
-
-La mise à jour de ce site Storybook est faite automatiquement lors d'une release de Pix UI.
-A noter qu'il faudra attendre quelques minutes après la fin de la release pour voir le changement.
-
-## Quelle version de Storybook est mise en ligne ?
-
-La version des composants présentée sur notre Storybook correspond (en temps normal) à la version des composants présents sur la branche `master`.
-
-## Concrètement comment ça marche ?
-
-Lors de la release de Pix UI, Pix Bot effectue la commande suivante depuis la branche `master`:
-
-```shell
-npm run deploy-storybook
-```
-
-Cette commande fait appel à l'outil [storybook-deployer](https://github.com/storybookjs/storybook-deployer). Ce dernier effectue les actions suivantes :
-
-- compiler Storybook comme une application statique
-- commit et push le résultat précédent sur la branche `gh-pages`
-
-_(Il est possible de customiser l'auteur ou le nom des commits, voir sur la [doc de storybook-deployer](https://github.com/storybookjs/storybook-deployer).)_
-
-Le changement de la branche `gh-pages` est détecté par les Github Pages et la nouvelle version du site est re-déployée.
-
-Pour changer la branche de déploiement ou l'url du site,
-voir dans les [settings du repository de Pix UI](https://github.com/1024pix/pix-ui/settings), section Github Pages.

package/docs/test-component-without-release.mdx

@@ -1,19 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Développement/Tester un composant en developpement dans une app" />
-
-# Tester un composant en developpement dans une app
-
-Il est possible de tester l'intégration d'un composant dans une application
-Ember sans nécessairement créer une nouvelle release.
-
-Pour cela, dans le repertoire de l'application Ember, installer Pix UI
-en utilisant l'adresse du dépôt Github et le nom de la branche.
-Par exemple :
-
-```shell
-npm install "git://github.com/1024pix/pix-ui#add-modal-component" --save-dev
-```
-
-Une fois l'application Ember redémarrée, il sera possible d'accéder aux
-composants Pix UI tels qu'ils sont dans la branche en cours de développement.

package/docs/typography.mdx

@@ -1,163 +0,0 @@
-import { Meta, Typeset, Markdown } from '@storybook/blocks';
-
-<Meta title="Utiliser Pix UI/Design Tokens/Typographie" />
-
-# Typographie
-
-Cette page permet de connaître les typographies qui sont disponibles dans `Pix-UI`. [Figma](https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=24-8&t=Nuq9GxVknLW0Qsbc-0) reste la source de vérité du design system de Pix.
-
-Ce que l'on nomme typographie dans ce contexte est un ensemble de 5 éléments :
-
-- Police d'écriture `font-family`
-- Taille de la police `font-size`
-- Hauteur de ligne `line-height`
-- Graisse `font-weight`
-- Espacement des caractères `letter-spacing`
-
-On met à disposition dans Pix UI des utilitaires pour simplifier l'usage.
-
-## Utilisation via placeholder SCSS
-
-Des **placeholder SCSS** équivalents aux tokens de Figma sont disponibles. C'est l'usage recommandé en priorité.
-
-### Titres
-
-<Typeset
-  fontSizes={[48]}
-  fontWeight={500}
-  sampleText={'@extend %pix-title-l;'}
-  fontFamily={'"Open Sans", Arial, sans-serif'}
-/>
-
-<Typeset
-  fontSizes={[36]}
-  fontWeight={500}
-  sampleText={'@extend %pix-title-m;'}
-  fontFamily={'"Open Sans", Arial, sans-serif'}
-/>
-
-<Typeset
-  fontSizes={[28]}
-  fontWeight={500}
-  sampleText={'@extend %pix-title-s;'}
-  fontFamily={'"Open Sans", Arial, sans-serif'}
-/>
-
-<Typeset
-  fontSizes={[20]}
-  fontWeight={500}
-  sampleText={'@extend %pix-title-xs;'}
-  fontFamily={'"Open Sans", Arial, sans-serif'}
-/>
-
-### Corps de texte
-
-<Typeset
-  fontSizes={[18]}
-  fontWeight={400}
-  sampleText={'@extend %pix-body-l;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
-/>
-
-<Typeset
-  fontSizes={[16]}
-  fontWeight={400}
-  sampleText={'@extend %pix-body-m;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
-/>
-
-<Typeset
-  fontSizes={[14]}
-  fontWeight={400}
-  sampleText={'@extend %pix-body-s;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
-/>
-
-<Typeset
-  fontSizes={[12]}
-  fontWeight={400}
-  sampleText={'@extend %pix-body-xs;'}
-  fontFamily={'Roboto, Arial, sans-serif'}
-/>
-
-### Comment utiliser un placeholder SCSS ?
-
-```css
-.card__title {
-  @extend %pix-title-m;
-
-  color: $pix-neutral-70;
-}
-```
-
-Contrairement à l'utilisation de mixins, le CSS compilé ne sera que très peu surchargé. Il ressemblera à ceci :
-
-```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;
-}
-
-.card__title {
-  color: #344563;
-}
-```
-
-## Utilisation via classe CSS
-
-Pour chaque placeholder SCSS, une **classe CSS** utilitaire de même nom existe :
-
-- `pix-title-l`
-- `pix-title-m`
-- `pix-title-s`
-- `pix-title-xs`
-- `pix-body-l`
-- `pix-body-m`
-- `pix-body-s`
-- `pix-body-xs`
-
-## Design tokens
-
-Des variables SCSS existent pour certaines propriétés de typographie.
-
-### Font-weight
-
-ℹ️ 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;`
-
-`$font-medium: 500;`
-
-`$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/>
-Pour en savoir plus, voir les classes utilitaires et les placeholders ci-dessus.
-
-`$font-open-sans: 'Open Sans', 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
-- 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.
-Aussi, le choix de design a été fait de faire varier les typographies en fonction de largeur du viewport de l'utilisateur.
-
-Ce choix est abstrait par l'utilisation des classes CSS ou mixins citées plus haut.
-
-Code associé :
-
-- https://github.com/1024pix/pix-ui/blob/dev/addon/styles/pix-design-tokens/_fonts.scss
-- https://github.com/1024pix/pix-ui/blob/dev/addon/styles/pix-design-tokens/_typography.scss
-
-Lien Figma : https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=24%3A8