fix(dark variant): some text colors were light gray instead of white

[julien-deramond]

Description

This PR fixes some rendering issues observed for our dark variants where the text color is rgb(238, 238, 238) and should be white.

It has been included with the dark mode coming from Bootstrap where there's a switch between $body-color and $body-color-dark to set --bs-body-color. The problem is that $body-color-dark was set to $gray-300 instead of $white.

We could have used --bs-emphasis-color to fix this issue in all impacted components, but I think this fix is easier to maintain has in the dark mode, we will use a light gray default text color instead of white.

Here's a list of identified components in dark variant having the wrong text color.

⚠️ Please double-check all usages in the framework of $body-color and --bs-body-color to be sure to not introduce another regression.

Alerts

Dark variant text color is rgb(238, 238, 238) instead of white (the icon has already the right color).

Footer

In our documentation, the text color of "This documentation is an adaptation made by Orange. Ori[...]" is rgb(238, 238, 238) instead of white.

Cards

For cards, it's not seeable in the documentation directly since we prefer to use .card-* classes, and that dark examples force a .text-white. I don't think a fix is needed right now since it is an edge case and that we will refactor this usage for the dark mode.

Tags

Dark variant text color is rgb(238, 238, 238) instead of white (the icon has already the right color).

Types of change

• Bug fix (non-breaking which fixes an issue)

Live previews

Here's a list of renderings that are fixed/modified. Please also review all dark variants for non-regression testing.

• https://deploy-preview-2263--boosted.netlify.app (for the footer)
• https://deploy-preview-2263--boosted.netlify.app/docs/5.3/components/alerts/#dark-variant
• https://deploy-preview-2263--boosted.netlify.app/docs/5.3/components/tags/#dark-variant

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	771d0a2
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/650c215ae5b9120008ffafb9
😎 Deploy Preview	https://deploy-preview-2263--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.

[MewenLeHo]

Remaining problem I have seen so far (some may not be directly related to the actual PR):

• icons in left menu in front of 'Getting started', 'Customize' etc stay dark on Dark mode
• placeholder are white on white in Dark mode, see for instance the textarea in https://deploy-preview-2263--boosted.netlify.app/docs/5.3/examples/form/
• '>' symbol in breadcrumb (https://deploy-preview-2263--boosted.netlify.app/docs/5.3/components/breadcrumb/#example)
• labels on progress bars: https://deploy-preview-2263--boosted.netlify.app/docs/5.3/components/breadcrumb/#example
• In card body, blockquote-footer content should probably becomes white too

[julien-deramond]

Thanks, I'll check the list in your comment. FYI dark mode is not taken into account in this PR. The idea is to have the same rendering as it was in v5.2x and without regression in light mode only.

[MewenLeHo]

Thanks, I'll check the list in your comment. FYI dark mode is not taken into account in this PR. The idea is to have the same rendering as it was in v5.2x and without regression in light mode only.

That's what I understood and it seems ok.
I just wanted to list all possible issues I encountered while checking the rendering because I wanted to keep a trace of it before leaving ;)

[MewenLeHo]

Looks ok to me 👍

[louismaximepiton]

It looks fine. It has many impacts on dark mode but we don't care in this PR so it's fine to me.
On dark variants I couldn't find any regression.

<div class="bg-dark">
  <p class="text-body">fdskfjdsi</p>
</div>

I couldn't find a way to repriduce white text on dark bg. I'd like to know where you saw this.
But anyway, I think the impacts are fine to me.