Fix *-dark rule

[louismaximepiton]

Fixes #1174

Search

I've searched for every -dark class in Boosted and even for "dark" word. It appears that every time it is called, this is for a background-color or at least a component that benefits from the rule. The only class that diverged was .border-dark that changes the border-color. So I decided to keep the rule and precised that .border-dark shouldn't interfere with it anymore.

My concerns are for Boosted users since this is a general rule that could break existing sites. If you agree, we should at least warn somewhere about this rule and add it to the migration guide. If you think that this rule should be more specific, please let me know.

Miscellaneous (out of PR)

I also discovered that Bootstrap has a bg-black that could maybe be removed (which will simplify our utility) since it's not mentioned anywhere nor used. I couldn't spot any breaking change using this, but I added a selector to that rule to handle this specific case.
Edit: Looks like this bg-black is wanted so let's keep it : twbs/bootstrap#34100

The second one is that we have plenty of classes .a11y-swatch-* that aren't used yet in site/assets/scss/colors.scss. Was wondering if we could use them to have maybe a better accessibility or visibility about this topic. Otherwise, they could be removed easily IMO.
Edit: Issue created #1297.

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	f422c86
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6346768ccda4aa00087c67b0
😎 Deploy Preview	https://deploy-preview-1293--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 settings.

[julien-deramond]

Note: we need to check if it works with the new .text-bg-dark

[julien-deramond]

This change looks good to me.

As said in the description, I also think we should mention somewhere in the documentation that those rules exist in order to be able to handle dark variants. Not a big fan of the place, but I'd said the most appropriate place is /docs/5.2/customize/color/. I let you propose something so that we can iterate on.

FYI, code used to test different use cases (doesn't include cascade of divs with different bg colors):

<div class="container-fluid p-4">
  <div class="row">
    <div class="col-12">
      1. Text
      <br>
      2. <a href="/">Link</a>
      <br>
      3. <code>test</code>
      <br>
      4. <kbd>Ctrl</kbd>
      <br>
      5. <mark>highlight</mark>
      <br>
      6. <pre>pre content</pre>
    </div>
  </div>
</div>

<div class="container-fluid p-4 border-dark border">
  <div class="row">
    <div class="col-12">
      1. Text
      <br>
      2. <a href="/">Link</a>
      <br>
      3. <code>test</code>
      <br>
      4. <kbd>Ctrl</kbd>
      <br>
      5. <mark>highlight</mark>
      <br>
      6. <pre>pre content</pre>
    </div>
  </div>
</div>

<div class="container-fluid p-4 text-dark">
  <div class="row">
    <div class="col-12">
      1. Text
      <br>
      2. <a href="/">Link</a>
      <br>
      3. <code>test</code>
      <br>
      4. <kbd>Ctrl</kbd>
      <br>
      5. <mark>highlight</mark>
      <br>
      6. <pre>pre content</pre>
    </div>
  </div>
</div>

<div class="container-fluid p-4 bg-black">
  <div class="row">
    <div class="col-12">
      1. Text
      <br>
      2. <a href="/">Link</a>
      <br>
      3. <code>test</code>
      <br>
      4. <kbd>Ctrl</kbd>
      <br>
      5. <mark>highlight</mark>
      <br>
      6. <pre>pre content</pre>
    </div>
  </div>
</div>

<div class="container-fluid p-4 bg-dark">
  <div class="row">
    <div class="col-12">
      1. Text
      <br>
      2. <a href="/">Link</a>
      <br>
      3. <code>test</code>
      <br>
      4. <kbd>Ctrl</kbd>
      <br>
      5. <mark>highlight</mark>
      <br>
      6. <pre>pre content</pre>
    </div>
  </div>
</div>

<div class="container-fluid p-4 bg-secondary">
  <div class="row">
    <div class="col-12">
      1. Text
      <br>
      2. <a href="/">Link</a>
      <br>
      3. <code>test</code>
      <br>
      4. <kbd>Ctrl</kbd>
      <br>
      5. <mark>highlight</mark>
      <br>
      6. <pre>pre content</pre>
    </div>
  </div>
</div>

<div class="container-fluid p-4 text-bg-dark">
  <div class="row">
    <div class="col-12">
      1. Text
      <br>
      2. <a href="/">Link</a>
      <br>
      3. <code>test</code>
      <br>
      4. <kbd>Ctrl</kbd>
      <br>
      5. <mark>highlight</mark>
      <br>
      6. <pre>pre content</pre>
    </div>
  </div>
</div>

<div class="container-fluid p-4 text-bg-secondary">
  <div class="row">
    <div class="col-12">
      1. Text
      <br>
      2. <a href="/">Link</a>
      <br>
      3. <code>test</code>
      <br>
      4. <kbd>Ctrl</kbd>
      <br>
      5. <mark>highlight</mark>
      <br>
      6. <pre>pre content</pre>
    </div>
  </div>
</div>

[louismaximepiton]

This change looks good to me.

As said in the description, I also think we should mention somewhere in the documentation that those rules exist in order to be able to handle dark variants. Not a big fan of the place, but I'd said the most appropriate place is /docs/5.2/customize/color/. I let you propose something so that we can iterate on.

Tried to place it with Root variables and component explanation.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication