[Color Palettes] Updated the status color palette sequence

[formgeist]

Summary

Currently, the steps in the euiPaletteForStatus are using the regular euiColorBlindSafe steps to indicate green or red status. Updating the status color palette sequence to use the more appropriate positive and negative colors for success and failure indication.

Observability will be aligning the HTTP status color codes to use the euiPaletteForStatus colors to indicate the various steps, and typically those colors have higher contrast than the existing euiColorBlindSafe palette. Essentially, we'll define the HTTP status color based on the palette and the positiveColor and negativeColor variables.

After

APM examples

Metrics examples

Checklist

• Check against all themes for compatibility in both light and dark modes
• [ ] Checked in mobile
• [ ] Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**
• [ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs 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

[formgeist]

I would definitely need to update https://elastic.github.io/eui/#/display/badge#badge-for-health-status to use the new palette as well for consistency, but maybe in another PR?

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4508/

[cchaos]

Yeah my original intent with it being slightly different at the few number of steps was to make it not be so harsh/dark. But I didn't take into account the possible inconsistencies.

I double checked that this 3 color combo still passes the a11y checks, and it does. 👍

So all that's needed is a Changelog entry.

---

I would definitely need to update https://elastic.github.io/eui/#/display/badge#badge-for-health-status to use the new palette as well for consistency, but maybe in another PR?

You could open a separate PR, but since this one is actually so small of a change, you could also add it to this one then take it out of draft mode to signal ready for review.

[formgeist]

Yeah my original intent with it being slightly different at the few number of steps was to make it not be so harsh/dark. But I didn't take into account the possible inconsistencies.
I double checked that this 3 color combo still passes the a11y checks, and it does. 👍

Sweet 👍

So all that's needed is a Changelog entry.

Done ✅

I would definitely need to update https://elastic.github.io/eui/#/display/badge#badge-for-health-status to use the new palette as well for consistency, but maybe in another PR?

You could open a separate PR, but since this one is actually so small of a change, you could also add it to this one then take it out of draft mode to signal ready for review.

I think I'd want to clarify the other use case of displaying HTTP status codes using the euiPaletteForStatus which is not currently being used. I'd like to handle that separately (due to time constraints) and avoid this PR going stale over time. I also need to brush up my React skills a bit to handle the colors appropriately 😊 I've opened an issue to track this #4512

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4508/

[cchaos]

👍 LGTM. Though we also did just have a release, so you'll need to update from master and move you CL entry to the top.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4508/