Improve badge colors

[ryankeairns]

Fixes #1894

Summary

This PR previously relied on chroma-js to calculate more vibrantly colored badges while also achieving necessary color contrast. In the time since this was originally opened, the EUI color blind palette has been updated to a lighter set of colors with similar objectives... it also leverages chroma-js 🎉

Goal

The intent of this PR is to a) improve the color contrast for some badges while also b) presenting a less muddied visual look.

After comparing the current 'live' badge version versus the original state of this PR and the now updated EUI color blind palette, it became clear that the latter two versions were similar in several spots and shared similar objectives. Relatedly, the original version of this PR resulted in some 'hot' colors that the color blind palette sought to avoid. Here is a look at the three alongside one another:

Comparison

Final solution in this PR

Instead of introducing another shade or our base color set, it seems wise to leverage the new color blind palette by mapping color names (passed via the EuiBadge's color prop) to values in the palette. Before (or currently), we are doing some SCSS calculations to shade or tint the base EUI colors. With this PR, we instead use the aforementioned palette colors to achieve our desired outcomes with the bonus of some color consistency.

New badges

Additional notes and considerations

• Users can still provide custom hex colors for use in badges. That color will applied as-is and EuiBadge will determine which text color provides the best contrast.
• Users will see a console warning if the color they provide results in low contrast. I suspect this will be an infrequent occurrence, but it feels good to push that outcome.
• Similar to the new color blind palette, there is only one set of colors shared between light and dark mode. The new set seems to work well in both cases.
• Color is a complex topic. We're planning to beef up the existing Colors guidelines page in a separate PR. Additional topics could include pairing colors with certain icons, considering contrast between UI shapes and background colors even when text is not present, etc.
• This PR also tidies up the docs with new snippets and some smaller copy tweaks.
• Clickable tags (i.e. buttons) could afford some more visual differentiation. @cchaos and I discussed some options but it gets complicated so we've opted to save that for a later effort.
• We discussed possibly creating an additional, more vibrant, color palette since the color blind set is a bit muted, but having worked with it more the new set feels like a good balance for badges too. The Amsterdam project is employing more vibrant colors and my suggestion is to explore the need for this over there.

Checklist

• Checked in dark mode
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[cchaos]

@ryankeairns Is this ready to be looked at?

[ryankeairns]

@cchaos short answer, yes. That said, I wrote this more under the purview of it being conceptual so the code may need some optimization and organization. I'll move it out of draft.

[cchaos]

I am pushing two commits to this PR in regards to the euiPaletteColorBlind.

1. Decreased brightness.

Finding out that graphics colors should have at least a ratio of 3:1, I've decreased the brightness of some of the values within the color blind palette to near this ratio. Some values did not quite make it because of the balance of contrast to color blind accessibility.

_The "better" colors are what it should be to meet contrast levels but didn't meet color blind accessibility and so it wasn't pushed quite that far._

We can continue to tackle the contrast issue in follow ups, but this is not a regression since the old palette also did not meet the contrast standards.

2. Increase the brightness just for badges.

The decreased brightness made the contrast of the text to color contrast lower. However, the W3 spec says that once you involve text, only the text needs to have proper contrast and the color contrast between the background of the badge and the page background don't have to meet a certain standard (so long as the color alone doesn't indicate meaning).

---

At @ryankeairns , increasing the brightness by 0.5 was mostly arbitrary. Feel free to tweak this value.

[cchaos]

Found only two actual problems. The rest are mainly optional.

[cchaos]

Looks great to me! I think people will be a lot happier with these colors

[thompsongl]

Changes look good, aside from the one question. I'm trying to recall any other components were JS is the only method of providing style; typically there is some Sass fallback, but I could be mistaken.