Customize/colors : Move Orange's colors paragraph and add warning

[hannahiss]

Related issues

Closes #1356

Description

• Put the paragraph "Orange's colors" at the very beginning of the page, as the 1st paragraph of the page
• In the paragraph "All colors", put the text "All Boosted colors are available as Sass variables and a Sass map..." in an ODS warning message.

Motivation & Context

This issue comes from the work done in Issue #1201

Types of change

Update doc only

Live previews

• https://deploy-preview-1610--boosted.netlify.app/docs/5.2/customize/color/

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• My change introduces changes to the migration guide
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	56da219
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6371f9fe4b113a0008d525c8
😎 Deploy Preview	https://deploy-preview-1610--boosted.netlify.app/docs/5.2/customize/color
📱 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 settings.

[hannahiss]

It is to be noted that the sub-section"Notes on Sass" that is in Bootstrap under "All colors" paragraph, is under "Orange's colors" in this version (I didn't change it but I mention it to be sure it is wanted).

[louismaximepiton]

We should the a11y team to have their point of view.

[julien-deramond]

Made some changes to reflect the comments in 784bcca and 56da219

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information