fix(a11y): update code highlight colors to meet contrast requirement

[dancormier]

Addresses:

• https://stackoverflow.atlassian.net/browse/A11Y-10
• https://stackoverflow.atlassian.net/browse/A11Y-11
• https://stackoverflow.atlassian.net/browse/A11Y-12

---

This PR resolves outstanding contrast issues with code highlight colors. The changes should be subtle enough as to barely be noticeable.

Note

We could attempt to change many of these colors to use core Stacks colors, but I figure it's best to keep it simple for now in order to resolve A11Y issues and decide later if we want to make more sweeping changes here.

Color variable changes

variable name	mode	old color	old contrast	new color	new contrast
--highlight-literal	dark	hsl(27, 85%, 61.5%)	Lc 55	hsl(27, 95%, 65%)	Lc 60
--highlight-namespace	dark	hsl(27, 85%, 61.5%)	Lc 55	hsl(27, 95%, 65%)	Lc 60
--highlight-symbol	dark	hsl(306, 43%, 69%)	Lc 51	hsl(306, 50%, 75%)	Lc 60
--highlight-variable	light HC	hsl(88, 100%, 19%)	6.8:1	hsl(88, 100%, 18%)	7.3:1

Screenshot comparison (dark mode)

Note: The difference is in the orange (e.g.: 0.6em 0.7em) and purple (e.g.: border-radius) text.

Before

After

Screenshot comparison (light HC mode)

Note: The difference is in the green (e.g.: apples) text.

Before

After

To test

• Go to https://deploy-preview-1724--stacks.netlify.app/product/components/code-blocks/
• Switch to dark mode
  • Look at the code blocks. They should look nearly identical to how they look in prod.
• Repeat, but for light HC mode

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	90e2854
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/66326cac46317e00084fcec7
😎 Deploy Preview	https://deploy-preview-1724--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.

[CGuindon]

Nicely done! I think this is subtle enough that even meta won't notice (the best kind of change) 🥇

For what it's worth, I vaguely remember discussing using Stacks colors for code way back when and the reason we didn't go that route was because it was:
A. really hard because we have less colors to work with
B. felt/looked odd to most developers because the colors were different than the tones they are used to seeing in code

I support the decision to NOT go down that rabbit hole — I think that would need CM support and lots of feedback rounds.

[giamir]

This is a fantastic subtle change that will make us compliant with our own contrast targets. Awesome work @dancormier ...and I love we have tests helping us to catch future regressions.