Dark mode: accordions

[louismaximepiton]

Note: Please transform - [ ] into - (NA) in the description when things are not applicable

Related issues

#2223.

Description

Adding the accordion as dark variant

I didn't mention any migration note or w/ever, maybe we should think about a section or something to put everything related to dark mode ?

Motivation & Context

Moving forward on dark theme components.

Types of change

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

Live previews

• https://deploy-preview-2259--boosted.netlify.app/docs/5.3/components/accordion

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	ed5bf75
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/65127811d876840008fec964
😎 Deploy Preview	https://deploy-preview-2259--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.

[louismaximepiton]

Dark variant seems to be as before, however, the text color inside for the code sample isn't the right one. It's because we removed the *-dark rule. We can have a pretty similar look as bafore if we had data-bs-theme="dark" to the example but I tried to avoid it in this PR. Maybe it's not feasible anymore and we should keep to what Bootstrap done and try to enhance it.

Maybe we should drop the dark variants as Bs and maintain only the local dark mode.

[MewenLeHo]

This section of the page is a bit confusing to me 🤔

First, having both tags Added in x.x.x and Deprecated in x.x.x may puzzled some of our users. Should we keep only one tag, i.e. the most recent one?

Then it's written that .accordion-dark has been deprecated, will be removed in v6 and finally there is a paragraph asking you to add this class to your code. There is even a code example using this deprecated class.

It sounds understandable when you know the subject and the way we work on color modes but from a simple user perspective it may look a bit weird and confusing. Especially for people with attention disorder for instance.

[MewenLeHo]

#666 on #000 will cause a contrast issue.

[julien-deramond]

I tried something in ed5bf75.

Dark variant retro compatibility

I've reintroduced our root rules for dark variants in _root.scss:

:not([data-bs-theme="dark"]) {
  [class*="bg-black"],
  [class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark):not(.link-underline-dark):not(.link-dark),
  [class*="bg-secondary"] {
  }
}

but it's now scoped with a :not([data-bs-theme="dark"]) so that only dark variants execute them.

It should allow the following mapping:

• In light mode, accordions in general in https://deploy-preview-2259--boosted.netlify.app/docs/5.3/components/accordion/ should have the same rendering as https://boosted.netlify.app/docs/5.3/components/accordion/
• In light mode, dark accordions in https://deploy-preview-2259--boosted.netlify.app/docs/5.3/components/accordion/#dark-variant should have the same rendering as https://boosted.netlify.app/docs/5.3/components/accordion/#dark-variant
• In dark mode, accordions in general in https://deploy-preview-2259--boosted.netlify.app/docs/5.3/components/accordion should have the new dark mode rendering
• In dark mode, dark accordions in https://deploy-preview-2259--boosted.netlify.app/docs/5.3/components/accordion/#dark-variant should have the same rendering as in light mode (dark accordions) and should be on black background (not #141414).

IDK TBH if it's going to be feasible for all our components but maybe but can try it.

Dark variant deprecation

• As pointed out by @MewenLeHo, having "deprecated" and "added" is difficult to understand so I've dropped out the "added" mention
• I've changed a little bit the wording to be more generic. Note that this is not yet a reusable message but could be with the right class as a parameter if this generic message is enough for a good understanding.