fix(titlesColor): Fixed utilities' primary color

[louismaximepiton]

Fix #815: Color of text utilities from #ff7900 to #f16e00 on white backgrounds

Netlify : https://deploy-preview-872--boosted.netlify.app/docs/5.2/utilities/colors/

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	2eb3794
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/637dfab647bb1a00081cd8f8
😎 Deploy Preview	https://deploy-preview-872--boosted.netlify.app/docs/5.2/utilities/colors
📱 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.

[julien-deramond]

In Helpers > Colored links we have orange on black bg. So the orange should be "Brand orange" instead of "Accessible orange" IMO.

[julien-deramond]

At some point (maybe not in this PR) we could maybe say in Utilities > Color that .text-primary should only be used in combination with large texts (source: https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/86fdf5)

[julien-deramond]

While I'm checking for .text-primary, maybe we can drop .bg-transparent from:

Orange-Boosted-Bootstrap/site/layouts/partials/home/masthead.html

Line 9 in 64f0eb4

<span class="d-inline-flex mb-3 display-0">B<span class="text-primary bg-transparent">oo</span>sted</span>

[louismaximepiton]

In Helpers > Colored links we have orange on black bg. So the orange should be "Brand orange" instead of "Accessible orange" IMO.

I'd think so too, but I feel actually really weird using them with an incoming background. If the background is set by the user (using bg-* utilities) it would turn into brand Orange. IMO, the colored links are the thing to change in here but I might be wrong. Furthermore, Bootstrap isn't defining background for those. I'll try to dig a bit more to know where it comes from.

At some point (maybe not in this PR) we could maybe say in Utilities > Color that .text-primary should only be used in combination with large texts (source: https://system.design.orange.com/0c1af118d/p/7059a5-colour/b/86fdf5)

Would be great for accessibility !

[julien-deramond]

I've spotted an issue with our spinners that use text-primary to define the color so our orange spinners now use #f16e00 instead of #ff7900 (DSM guidelines reference)

[julien-deramond]

• 🟢 Text switch between oranges looks good
• 🟢 Icon switch between oranges looks good based on https://system.design.orange.com/0c1af118d/p/361038-iconography/t/56c4f9
• 🔴 Spinner orange color on white background is not the same as the one for icons (see https://system.design.orange.com/0c1af118d/p/45093c-progress-indicators/b/2875f1/i/66611042) so let's wait for an explanation from the designers.

[louismaximepiton]

Returns from the spec review: the spinners should be $accessible-orange on white and $brand-orange on black.

[julien-deramond]

Just before merging, discovered that https://deploy-preview-872--boosted.netlify.app/docs/5.2/utilities/colors/#opacity doesn't work anymore

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication