Colorize plugin card compatibility icons

[afragen]

During the discussion of #43986 several of the screenshots demonstrated colorizing the check mark and the X in the plugin card. These CSS changes were not included in the changeset r43436.

It was suggested to create a new ticket for this enhancement so, here it is.

[afragen]

CSS to colorize the plugin card compatibility icons

[afragen]

Colorized icons on bottom of plugin card

[melchoyce]

Thanks @afragen! The red should be #C62D2D. I'm a little unsure about the green — we don't seem to have a green that passes AA on the card background color, #FAFAFA. Closest we have is #31843F, which is AA+. I'm not sure if color contrast is absolutely integral because there's also supportive text — I'll want a second a11y opinion.

[afragen]

Thanks @melchoyce! I’ve pinged the #a11y channel. I’ll update the patch once we get some more feedback.

[Daniel Koskinen]

@melchoyce @afragen the relevant guideline would be 1.4.11 ​https://www.w3.org/TR/WCAG21/#non-text-contrast, which says ”Parts of graphics required to understand the content” should have at least 3:1 contrast. Since the symbols have supportive text as you say, the icons are not required to understand the meaning. So the contrast requirement does not apply to meet AA. This is how I read it anyway.

[Daniel Koskinen]

Another point: I checked the green suggested by @melchoyce with WebAIM’s colour contrast checker and it’s 4,09:1, which is sufficient for non-text content (3:1) anyway. So either way it should be OK. The green and red probably don’t have enough contrast in relation to each other, but that shouldn’t matter since the symbols also differ by shape.

[afragen]

@melchoyce @Daniel-Koskinen thanks so much for the feedback.

[afragen]

updated patch with #design and #a11y feedback

[SergeyBiryukov]

In 44352:

Plugins: Colorize plugin card compatibility icons on Add Plugins screen.

Props afragen, melchoyce, daniel-koskinen.
Fixes #44619.

Try to fix #44619

Testing instructions:
​https://github.com/WordPress/gutenberg/issues/44619#issuecomment-1266866044

cc/ @oandregal, would this approach be correct?

Rebased.

I think this is working now 🎉

I was about to implement file caching for the parent theme (see ​https://github.com/WordPress/wordpress-develop/pull/3401#discussion_r986868064), but then it occurred to me that we might solve this slightly differently:

We can add a single $theme_json_file_cache static var, and use it from within static::read_json_file().

​https://github.com/WordPress/wordpress-develop/pull/3408 does the work, so we can close this one.