[OUDS] Add "Font" tokens, utilities and documentation

[louismaximepiton]

Related issues

Closes #2645.

Description

Remaining tasks and questions

Questions:

• .

Tasks:

• .

Done list

The following was done in the PR:

• Introduced new Sass maps, mixin and variables.
• Introduced new CSS vars.
• Easier heading and overall font declaration (Looks almost like the Bootstrap one now).
• Tweaked the .display-* class name.
• Removed .initialism.
• Small changes for blockquotes. Should be invisible from user point of view.
• Added a .mw-none.
• Adapted utilities to OUDS ones.
• Changed the rem spacings for font by some px ones.
• Adapted the font family stack.
• Adapted all the Bootstrap variables to use OUDS tokens.
• Added a new icon helper.
• Tweaked a bit the generate-utility mixin.
• Add tests for font utilities.
• Separate grid and font tests.
• Added according documentation.
• Added an example to see the fonts live.

To be done after the PR is merged

• Maybe generate-utility should take several mixins into account.
• Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that reboot.md should be updated once the Link component is developed.
• Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that reboot.md should be updated once the colors have been developed.
• Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that reboot.md should be updated once the List component is developed.
• Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that typography.md should be updated once the List component is developed.
• Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that typography.md should be updated once the Link component is developed.
• Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that typography.md should be updated once the colors have been developed.
• Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that icon.md should be updated once the icons page have been developed.
• Add in [OUDS] [TRACKING] Backlog to be functionally equivalent to Boosted #2589 that text.md should be updated once the colors have been developed.

Motivation & Context

Types of change

• New feature (non-breaking change which adds functionality)

Live previews

• https://deploy-preview-2774--boosted.netlify.app/docs/content/reboot
• https://deploy-preview-2774--boosted.netlify.app/docs/content/typography
• https://deploy-preview-2774--boosted.netlify.app/docs/helpers/icon
• https://deploy-preview-2774--boosted.netlify.app/docs/utilities/sizing
• https://deploy-preview-2774--boosted.netlify.app/docs/utilities/text
• https://deploy-preview-2774--boosted.netlify.app/docs/examples/font
• https://deploy-preview-2774--boosted.netlify.app/docs/migration
• https://deploy-preview-2774--boosted.netlify.app/docs/migration-from-boosted

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	17917f9
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/674749dd9dbdf60008a1379f
😎 Deploy Preview	https://deploy-preview-2774--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.

[louismaximepiton]

I feel the following is missing in our migration guides:

• The import stack for our helper changed a bit to include helpers/icon (maybe only the from Boosted one)
• I think we can maybe introduce the new mixin ouds-font-size($name) to people and maybe a link to redirect to {{< docsref "/content/typography#sass-mixins" >}} if people want to dig into it a bit more.

[hannahiss]

After all discussions, LGTM 😄