Dark mode: Utilities (bg, border, color)

[louismaximepiton]

Description

Utilities in dark mode, by using existing Sass vars :

⚠️ $primary has been changed, might have some impacts on user side
⚠️ $accessible-orange should change its name
⚠️ Need to have data-bs-theme="inverted" for .*bg-secondary (toasts color schemes).
⚠️ We could use --bs-primary instead of --bs-link-hover-color
⚠️ We could use --bs-secondary instead of --bs-body-color or --bs-highlight-bg
⚠️ Last commit bring two more utilities .bg-supporting-orange as asked during the weekly synch meeting and .border-tertiary that might be useful. This commit could be split and done aferwards.
⚠️ .text-bg-* would need some new variables to work correctly something like --bs-on-*.
⚠️ .text-body-tertiary is somehow transparent in light mode.
⚠️ Rework docs/5.3/utilities/colors/#oranges-colors to explain it clearly
⚠️ Explain in the documentation the rules between .bg-primary|success|etc. and .bg-supporting-* (how to use them)
⚠️ Checkboxes and radios orange colors?? Shouldn't change.
⚠️ $bd-primary orange colors and all colors from site/assets/scss/_variables.scss must be modified/refactored

⚠️ Proposal not integrated in this PR

<div class="p-3 mb-2 fw-bold bg-primary"><span class="text-body" data-bs-theme="light">.bg-primary</span></div>
<div class="p-3 mb-2 fw-bold bg-secondary"><span class="text-body" data-bs-theme="inverted">.bg-secondary</span></div>
<div class="p-3 mb-2 fw-bold bg-success"><span class="text-body" data-bs-theme="inverted">.bg-success</span></div>
<div class="p-3 mb-2 fw-bold bg-danger"><span class="text-body" data-bs-theme="inverted">.bg-danger</span></div>
<div class="p-3 mb-2 fw-bold bg-warning"><span class="text-body" data-bs-theme="light">.bg-warning</span></div>
<div class="p-3 mb-2 fw-bold bg-info"><span class="text-body" data-bs-theme="inverted">.bg-info</span></div>
<div class="p-3 mb-2 fw-bold bg-supporting-green"><span class="text-body" data-bs-theme="light">.bg-supporting-green</span></div>
<div class="p-3 mb-2 fw-bold bg-supporting-purple"><span class="text-body" data-bs-theme="light">.bg-supporting-purple</span></div>
<div class="p-3 mb-2 fw-bold bg-supporting-yellow"><span class="text-body" data-bs-theme="light">.bg-supporting-yellow</span></div>
<div class="p-3 mb-2 fw-bold bg-supporting-blue"><span class="text-body" data-bs-theme="light">.bg-supporting-blue</span></div>
<div class="p-3 mb-2 fw-bold bg-supporting-pink"><span class="text-body" data-bs-theme="light">.bg-supporting-pink</span></div>
<div class="p-3 mb-2 fw-bold bg-supporting-orange"><span class="text-body" data-bs-theme="light">.bg-supporting-pink</span></div>
<div class="p-3 mb-2 fw-bold bg-light"><span class="text-body" data-bs-theme="light">.bg-light</span></div>
<div class="p-3 mb-2 fw-bold bg-dark"><span class="text-body" data-bs-theme="dark">.bg-dark</span></div>
<div class="p-3 mb-2 fw-bold bg-body-secondary"><span class="text-body" data-bs-theme="body">.bg-body-secondary</span></div>
<div class="p-3 mb-2 fw-bold bg-body-tertiary"><span class="text-body" data-bs-theme="body">.bg-body-tertiary</span></div>
<div class="p-3 mb-2 fw-bold bg-body"><span class="text-body" data-bs-theme="body">.bg-body</span></div>
<div class="p-3 mb-2 fw-bold bg-black"><span class="text-body" data-bs-theme="dark">.bg-black</span></div>
<div class="p-3 mb-2 fw-bold bg-white"><span class="text-body" data-bs-theme="light">.bg-white</span></div>
<div class="p-3 mb-2 fw-bold bg-transparent"><span class="text-body" data-bs-theme="body">.bg-transparent</span></div>

⚠️ Add <span class="border border-tertiary"></span>?

• values: map-merge($utilities-border-colors, ("tertiary": var(--#{$prefix}border-color-translucent))) in _utilities.scss?

⚠️ $brand-orange (remove) -> $supporting-orange (create) and $accessible-orange (remove) -> $primary

Links

• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/utilities/colors
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/utilities/background
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/utilities/borders
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/utilities/link
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/helpers/color-background
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/helpers/focus-ring
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/helpers/icon-link
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/dark-mode/#background
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/dark-mode/#borders
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/dark-mode/#colors
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/dark-mode/#link
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/dark-mode/#color--background-text-bg
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/dark-mode/#focus-ring
• https://deploy-preview-2362--boosted.netlify.app/docs/5.3/dark-mode/#icon-link

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	efe2708
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6552273a289b680008fd4d7d
😎 Deploy Preview	https://deploy-preview-2362--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.

[julien-deramond]

Some lil changes to check together and let's merge