High contrast conditional classes

[chris-doucette-stack]

Summary

This PR adds the ability to apply conditional font color and background color classes to high contrast themes.

How to test

I added a section for it to our conditional classes docs, you can see it in action there by:

• running npm start
• navigating to the high conditional class section
• add theme-highcontrast to the documents body (you may want to edit the DOM and change the class from hc:fc-black-600 to something like hc:fc-red-600 it pops out more visually)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 05dad8a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	05dad8a
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/69691b0b723edb000891f71d
😎 Deploy Preview	https://deploy-preview-2127--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 project configuration.

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	05dad8a
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/69691b0b723edb000891f719
😎 Deploy Preview	https://deploy-preview-2127--stacks-svelte.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 project configuration.

[dancormier]

Thanks for the PR @chris-doucette-stack 🫶 The code changes all look pretty solid.

I'd like to understand the use case that motivated this change before merging it in. I haven't checked but this has the potential to increase the Stacks Classic bundle size a good amount and I've avoided adding this personally in the hopes that Stacks components and careful design should negate the need for any high contrast mode color overrides.

If the use case justifies this change, I'm happy to merge it in but I'm also glad to brainstorm with you a bit to figure out if there's another way that avoids increasing the bundle size. Let me know what you think!

[chris-doucette-stack]

Hi @dancormier, thanks for the review!
This PR was made in attempts to fix an accessibility issue that occurs for the redesigned notification inbox in high contrast mode. In the new design we have header text with fc-black-400, read notifications get a background color of bg-black-100. In high contrast mode the color contrast between the two do not meet the 7:1 WCAG AAA standard. We would ideally like to bump the header text to fc-black-500 in high contrast mode. I have a PR where I manually do this through MutationObservers but its honestly quite ugly and I would prefer not to have to track this manually. Another option, is to simply bump the header text to fc-black-500 for both high contrast and standard themes. It's probably the easiest and cleanest solution, but I wanted to see if we can make the original designs work first.

[dancormier]

In the new design we have header text with fc-black-400, read notifications get a background color of bg-black-100. In high contrast mode the color contrast between the two do not meet the 7:1 WCAG AAA standard.

@chris-doucette-stack oh! Yeah, I see it only hits 6.74:1. I believe all stops with a difference of 300 or more should meet or exceed 7:1 in HC mode, so this I'd consider this to be a bug. Can you confirm @CGuindon?

If so, I can go ahead update values as necessary once they're available.

[CGuindon]

Yes, we can nudge the black-400 color in HC mode so that it passes 7:1 on a background of black-100 (we'll have other cases of that across the product). Leave the text as black-400 in the inbox.

[dancormier]

Here are some updated colors #2140

[chris-doucette-stack]

@dancormier Did you mean to merge this? It looked like we addressed this through a different approach, I also never added a changeset.

[giamir]

Yes we reverted the PR, thanks for the warning