UI Kit v6: Update font-sizes

[louismaximepiton]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

Closes #2504.

Description

Changes and aligns all the .display-*, h*, .lead, small and introduces .body-* and .label-*. Removes .display-4 since it was never used here. Kept h4/5/6 for consistency.

⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ Issues or questions ⚠️ ⚠️ ⚠️ ⚠️ ⚠️ ⚠️

• Should we keep all the classes coming from Bootstrap and provide a table resuming the compatibility between design and Boosted ?
• Should we provide more styles than the design for h4/5/6 or set them as Title small?
• Should we try to use .lead, .small, etc ... to provide the styles ? It seems quite hard since we have many body and label styles.

Remaining things to do:

• [ ] There are still some Sass variables to create/reuse/deprecate
• [ ] There is the migration guide to do
• [ ] Should we introduce CSS variables in order to have some references that people could reuse ?
• [ ] Many dependencies between font sizes: for example h1 on mobile depends on h2 desktop or .body-lg depends on the h5 desktop font-size. Could be great to undupe all this, use clear variables and multiples but it could be quite heavy
• [ ] Refactor the typography page to make sure it follows the design guidelines
• [ ] Check all components regarding the new font-sizes, there might be many tweaks compared to v5 of the kit

Motivation & Context

UI Kit v6 changes many things regarding font sizes.

Types of change

• Breaking change (fix or feature that would change existing functionality)

Live previews

• https://deploy-preview-2505--boosted.netlify.app/docs/content/typography

Checklist

Contribution

• [x] I have read the contributing guidelines

Accessibility

• [x] My change follows accessibility good practices; I have at least run axe

Design

• [x] My change respects the design guidelines defined in Orange Design System
• [x] My change is compatible with a responsive display

Development

• [x] My change follows the developer guide
• (NA) I have added JavaScript unit tests to cover my changes
• (NA) I have added SCSS unit tests to cover my changes

Documentation

• [ ] My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

• [ ] My change introduces changes to the migration guide
• [ ] My new component is well displayed in Storybook
• [ ] My new component is compatible with RTL
• [ ] Manually run BrowserStack tests
• [ ] Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
• [ ] Code review
• [ ] Design review
• [ ] A11y review

After the merge

• [ ] Manually launch Percy tests

[netlify[bot]]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	6d39f968a08e26000974037fb4b565e0012d6800
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/65ef294472114a000820104b
😎 Deploy Preview	https://deploy-preview-2505--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.