Update docs syntax colors head of dark mode

This PR updates the docs syntax CSS to what I use on <markdotto.com> ahead of shipping dark mode, which requires wider usage of CSS variables. Not a huge departure, and still something I'd like to tweak over time mind you. Open to feedback here still.

/cc @XhmikosR

---

Cherry-picked from #35857 at abba53d4c7e44cbd749fadf201314d846f99a498 (which is why I named this branch dancing-queen lol).

added css docs v5 labels

requested review from @ghost

Are you sure you are not missing any classes compared to before? This is not the same as Jekyll which is one of the reasons I had kept the comments. I'm fine with dropping the comments assuming we still include all classes.

Also, note that the new colors are not WCAG2AA valid and I had spent some time to make them valid before :/

PS. we use the same file in blog and icons too so it probably makes sense to fix any issues before landing this and backporting it.

the problematic colour combinations seem to be centered around the code highlighting styles

Good callout, I didn't realize those were so bad. I've darkened a couple colors to fix the most obvious issues. Going to double check the rest shortly.

confirming that i don't note any immediately apparent contrast issues on https://deploy-preview-35984--twbs-bootstrap.netlify.app/

Going to merge as-is for now and we can iterate on colors if needed in future updates.

Merged by: mdo at 2022-04-12 01:43:18 UTC

closed