Default switch checkbox input hasn't the same color when the 'is-invalid' class is used in it

[sebnic]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In our project we need to show in an invalid form which field is responsible for this state. For that, we use the 'is-invalid' class. But, The using of this class to a default switch checkbox change its colors.

Reduced test cases

https://codepen.io/sebnic-the-lessful/pen/eYwpJBY

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Boosted are you using?

5.3.2

[julien-deramond]

Thanks for reporting this issue @sebnic

It's probably due to the filter that we use to have a light CSS bundle for this component. Let's check if we could improve that and handles this use case too, that shouldn't probably happen in real-life as a switch should never be invalid.

Here's a reduced test case that shows a little bit of all the possible states in light and dark mode that can be used to validate a potential fix:

<main>
  <div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckWithoutIsInvalidClass">
      <label class="form-check-label" for="flexSwitchCheckWithoutIsInvalidClass">Unchecked</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input is-invalid" type="checkbox" role="switch" id="flexSwitchCheckWithIsInvalidClass">
      <label class="form-check-label" for="flexSwitchCheckWithIsInvalidClass">Unchecked / Invalid</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckWithoutIsInvalidClass" checked>
      <label class="form-check-label" for="flexSwitchCheckWithoutIsInvalidClass">Checked</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input is-invalid" type="checkbox" role="switch" id="flexSwitchCheckWithIsInvalidClass" checked>
      <label class="form-check-label" for="flexSwitchCheckWithIsInvalidClass">Checked / Invalid</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckWithoutIsInvalidClass" disabled>
      <label class="form-check-label" for="flexSwitchCheckWithoutIsInvalidClass">Disabled</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input is-invalid" type="checkbox" role="switch" id="flexSwitchCheckWithIsInvalidClass" disabled>
      <label class="form-check-label" for="flexSwitchCheckWithIsInvalidClass">Disabled / Invalid</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckWithoutIsInvalidClass" checked disabled>
      <label class="form-check-label" for="flexSwitchCheckWithoutIsInvalidClass">Disabled / Checked</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input is-invalid" type="checkbox" role="switch" id="flexSwitchCheckWithIsInvalidClass" checked disabled>
      <label class="form-check-label" for="flexSwitchCheckWithIsInvalidClass">Disabled / Checked / Invalid</label>
    </div>
  </div>
  <div data-bs-theme="dark">
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckWithoutIsInvalidClass">
      <label class="form-check-label" for="flexSwitchCheckWithoutIsInvalidClass">Unchecked</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input is-invalid" type="checkbox" role="switch" id="flexSwitchCheckWithIsInvalidClass">
      <label class="form-check-label" for="flexSwitchCheckWithIsInvalidClass">Unchecked / Invalid</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckWithoutIsInvalidClass" checked>
      <label class="form-check-label" for="flexSwitchCheckWithoutIsInvalidClass">Checked</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input is-invalid" type="checkbox" role="switch" id="flexSwitchCheckWithIsInvalidClass" checked>
      <label class="form-check-label" for="flexSwitchCheckWithIsInvalidClass">Checked / Invalid</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckWithoutIsInvalidClass" disabled>
      <label class="form-check-label" for="flexSwitchCheckWithoutIsInvalidClass">Disabled</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input is-invalid" type="checkbox" role="switch" id="flexSwitchCheckWithIsInvalidClass" disabled>
      <label class="form-check-label" for="flexSwitchCheckWithIsInvalidClass">Disabled / Invalid</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckWithoutIsInvalidClass" checked disabled>
      <label class="form-check-label" for="flexSwitchCheckWithoutIsInvalidClass">Disabled / Checked</label>
    </div>
    <div class="form-check form-switch">
      <input class="form-check-input is-invalid" type="checkbox" role="switch" id="flexSwitchCheckWithIsInvalidClass" checked disabled>
      <label class="form-check-label" for="flexSwitchCheckWithIsInvalidClass">Disabled / Checked / Invalid</label>
    </div>
  </div>
</main>