[OUDS] feat: Add 'Borders' token, utilities and documentation

[vprothais]

Related issues

#2582 and #2589

Description

Add Border utilities based on design tokens with corresponding documentation.

Todo

• [x] Finalize documentation concerning border opacity (see description in #2582)
• [x] Finalize documentation concerning variables, sass variables and maps
• [x] Compare documentation with Bootstrap version (current version is based on Boosted one)
• [x] Add content to both migration documentation
• [ ] Add unit test
• [ ] Test $enable-rounded + Ajout dans customize > options

[!NOTE]
All border utilities related to Colors can't be activated and documented until color design tokens are available

LM:

• No opacity for borders since we rather want people to use .border-transparent once it will be available.
• Kept the change of .border-pill and .border-circle in the doc but shouls surely be backported in Bootstrap as well.
• Changed the subtractive border utility to be closer from the other ones. Should we refactor the Bootstrap ones to avoid duplicates ?
• Added an empty map $ouds-border-opacities as a placeholder for future lib enhancements.
• Some weird wordings due to the CSS cascade (.border-default vs .border). Should we stop stacking the ouds utilities together after the Bootstrap ones and start mixing the Bootstrap utilities with the ouds utilities ?
• Should we introduce a new map to avoid null, "none" for operative border utilities ?
• Do we keep all the associated CSS variables in _root.scss? IMO we can drop them using $enable-bootstrap-compatibility.
• Hard to understand what is usable and what is not while keeping the tokens commented.
• Everything as pixels since there is no need to zoom on any of the border width or radius element.
• Refactoring of the tokens wording, let me know what you think about it. Should we introduce parts of the doc with a tutorial to see the semantic variables in action ?
• Not sure we need to add unit test on this.

Types of change

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

Live previews

• https://deploy-preview-2687--boosted.netlify.app/docs/0.0/utilities/borders/

Checklist

Contribution

• [ ] I have read the contributing guidelines

Accessibility

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

Design

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

Development

• [ ] My change follows the developer guide
• [ ] I have added JavaScript unit tests to cover my changes
• [ ] 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	a80afa1d1b231124fe8ccb751d5157326a8013d2
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/66eabb78d02aeb00080a374f
😎 Deploy Preview	https://deploy-preview-2687--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.