Fix light mode carousel in dark mode

[julien-deramond]

Caution

Before merging, carousel.md modifications must be reverted

Description

This work has been done in collaboration with @louismaximepiton, please don't remove the "Co-authored-by" from the commit message if merged

This PR tackles specifically #40493. This work is based on #39295 spirit.
The idea is to rely on custom properties so that there's never a specificity issue when nesting color modes (light mode in dark mode, and dark mode in light mode).

In order for it to be non-breaking, _variables-dark.scss uses the newly deprecated $carousel-dark-* Sass variables.

Please note that in the future, we'll be able to replace :root, [data-bs-theme="light"] { with @include color-mode(light, true) as suggested in #39295.

This part generates the following CSS:

.carousel-dark {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}

:root,
[data-bs-theme=light] {
  --bs-carousel-indicator-active-bg: #fff;
  --bs-carousel-caption-color: #fff;
  --bs-carousel-control-icon-filter: ;
}

[data-bs-theme=dark] {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}

After this PR

After this PR, we might do exactly the same thing for the problematic rendering of the accordions, close buttons, etc. and use the same technique.

@mdo and @twbs/css-review what do you think about this PR? Do you agree that it can be used, it doesn't bring regressions, and can be replicated for other issues (accordions, etc.)?

Type of changes

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

Checklist

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

Live previews

• https://deploy-preview-40695--twbs-bootstrap.netlify.app/docs/5.3/components/carousel/

Related issues

Closes #40493

[louismaximepiton]

I'm fine with that, to be honest I still don't know if I'd prefer to have it in the _root.scss or in each component but the mechanism is great to me regarding the color mode approach.

[julien-deramond]

I'm fine with that, to be honest I still don't know if I'd prefer to have it in the _root.scss or in each component but the mechanism is great to me regarding the color mode approach.

For now, I prefer to have it in each component, as if one doesn't want to embed the accordion in your custom build, we wouldn't have extra useless rules.