Update color scheme to meet WCAG

[hidde]

It appears the current color scheme in the highlighter doesn't meet WCAG color contrast requirements. I'd like to contribute updates to the colors.

In whatwg/whatwg.org#392, I worked on color contrast issues in WHATWG, and syntax highlights are one of the issues we haven't yet tackled there.

I don't have strong preferences around color schemes, my suggestion would be to use a11y-syntax-highlighting as that meets WCAG.

[tabatkins]

Oh yeah, those colors look good to me.

[hidde]

Cool! Have done a first stab in #26, but getting some unexpected results when testing it out.

What would a better way (than manually) to convert Prism-compatible syntax styles to Pygments?

[tabatkins]

Ah, I've got a code snippet squirreled away in Bikeshed for that:

    # To regen the styles, edit and run the below
    # from pygments import token
    # from pygments import style
    # class PrismStyle(style.Style):
    #    default_style = "#000000"
    #    styles = {
    #        token.Name: "#0077aa",
    #        token.Name.Tag: "#669900",
    #        token.Name.Builtin: "noinherit",
    #        token.Name.Variable: "#222222",
    #        token.Name.Other: "noinherit",
    #        token.Operator: "#999999",
    #        token.Punctuation: "#999999",
    #        token.Keyword: "#990055",
    #        token.Literal: "#000000",
    #        token.Literal.Number: "#000000",
    #        token.Literal.String: "#a67f59",
    #        token.Comment: "#708090"
    #    }
    # print formatters.HtmlFormatter(style=PrismStyle).get_style_defs('.highlight')

[hidde]

I saw this, but I wasn't sure where/how to run it? (I am not super familiar with Python)

How do I prepare this file to run it (eg where do I put the Prism styles and how can I map from Prism token names to Pygments token names) and where do I run it?

Thanks!

[tabatkins]

Ah, so if you have pygments installed you can just run this from an independent script. But I already know how to do that, so if you could swap in the colors I'll do the rest.

[hidde]

Ok this is ready to go in #26 !

I have updated the colors that are inside the comments, and the ones outside of it, but if you're generating them we can throw my changes outside of the comment?