fix(checkbox): checked state forced color contrast

[dancormier]

STACKS-599

---

This PR fixes the lack of contrast in the checked checkbox component when the user has enabled forced color mode.

Before

After

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	ba315d9
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/660edc50045a6800084232ab
😎 Deploy Preview	https://deploy-preview-1699--stacks.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.

[giamir]

Based on my testing in WHCM (Desert mode) we can achieve what we want without having to redefine the bg-image
This is sufficient:

   @media (forced-colors: active) {
        &:checked {
            --_ch-bg: ButtonText !important;
        }
        &:indeterminate {
            --_ch-bg: ButtonText !important;
        }
    }

I am happy to merge the simplified version above in.

Sidenote
While I was in Windows I took some time to explore our DS in WHCM and I could see several components that are not rendering well (including toggles, tags, navigation not showing selected items, etc...). We should probably create a rough inventory of those issues as part of the upcoming spike story.

[dancormier]

Based on my testing in WHCM (Desert mode) we can achieve what we want without having to redefine the bg-image This is sufficient:

   @media (forced-colors: active) {
        &:checked {
            --_ch-bg: ButtonText !important;
        }
        &:indeterminate {
            --_ch-bg: ButtonText !important;
        }
    }

I am happy to merge the simplified version above in.

Without the background image redefinition, we'll have contrast issues if Stacks dark mode is enabled in addition to forced color mode.

I understand this would be an unusual circumstance but I figured it was a good idea to account for all possible cases. What do you think @giamir?

Sidenote While I was in Windows I took some time to explore our DS in WHCM and I could see several components that are not rendering well (including toggles, tags, navigation not showing selected items, etc...). We should probably create a rough inventory of those issues as part of the upcoming spike story.

Yep, there's definitely room for improvement across our components. The ticket has "A rough inventory of user forced color issues in our components (e.g. toggles, tags, etc…) is added to the document" in the success criteria so I'll make sure to include a list of components (assuming I perform the spike sprint).