Use culturally inclusive palette names

[markov00]

Summary

This PR rename the positive and negative palettes to be more culturally inclusive. Instead of using green for positive and red for negative I've just used the color name to describe the palette, that is enough and pretty clear to everyone.

fix #4766

In Kibana there are 10 references to euiPaletteNegative and euiPalettePositive, the change is pretty straight forward.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • [ ] Checked in both light and dark modes
  • [ ] Checked in mobile
  • [ ] Checked in Chrome, Safari, Edge, and Firefox
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • [ ] Added documentation
  • [ ] Props have proper autodocs (using @default if default values are missing) and playground toggles
  • [ ] Checked Code Sandbox works for any docs examples
• Code quality checklist
  • [ ] Added or updated jest and cypress tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • [ ] Updated the Figma library counterpart - These palettes are not in Figma

[github-actions]

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

• If this PR contains prop/API changes:
  • Search through Kibana for <EuiComponent usages (example search)
  • In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
• If this PR contains CSS changes:
  • Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)
  • In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
• 🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
• ⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
  • Using a pre-release release candidate to test Kibana CI ahead of time
  • Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

[cee-chen]

Rather than making this a breaking change, I'd prefer to add in a 3 month deprecation period where we export the old palette names (e.g. export const euiPaletteNegative = euiPaletteRed) as an alias with a /** @deprecated - use `euiPaletteRed` instead */ jsdoc note. We'll still update Kibana accordingly, but this makes upgrading EUI smoother for other consumers.

@markov00 do you mind adding that to this PR? Or if you want I can do so, let me know :)

[cee-chen]

Thanks so much for this PR @markov00, you rock ❤️‍🔥 Going to commit a few small copy nit changes and merge this in!

[cee-chen]

Deprecation has been scheduled for June 2024 (#1469)

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7570/
• Storybook: https://eui.elastic.co/pr_7570/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: fb66c62

History

• 💚 Build #1492 succeeded 0025808
• 💚 Build #1480 succeeded b29db2b
• 💔 Build #1479 failed 1bc9eeb

[drewdaemon]

@markov00 I don't necessarily object to this change, but I'm not sure I understand how this moves us toward cultural inclusivity.

As I understand it, you're saying that not all cultures associate red with negative and green with positive. I think that's a fair point, but it's not like changing the names of these palettes will change anything about what users from various cultures experience in our products.

I could imagine us adjusting the presentation of color based on culture. But, if we did that, it seems like the universal semantic concepts of "positive" and "negative" would serve us better because they are what we're actually trying to communicate. The specific color that would be shown would be an implementation detail.

Practically speaking, I would expect the color to adjust automatically based on locale or something. I would expect to be able to say "I want this theme to convey a positive feeling" and let the robots do the translation.

Just my 2 🪙

[markov00]

but it's not like changing the names of these palettes will change anything about what users from various cultures experience in our products.

I'd just like to disagree with that. If you are required to select a negative color that is instead called "positive" I believe this can make users a bit uncomfortable.
I think that being explicit and clear in our context should be the priority, and specifying that this is a green/red/black or white palette is the way to be explicit. Using a culturally associated semantic name/label is not explicit and can be subject to errors (just imagine that associated with a blind person).
Also, consider that green and red are not associated only with positive and negative, you can use these palettes for many things, so why give them a name that doesn't represent their color and is just inclusive of a subset of meaning?
Looking quickly around color palettes haven't names or just their respective colors or a fantasy name if they come from a research study (viridis, magma, inferno)

I would expect the color to adjust automatically based on the locale or something. I would expect to be able to say "I want this theme to convey a positive feeling" and let the robots do the translation.

This is an interesting idea, definitely something to consider. Probably it will have its problems, but I believe this could be a great enhancement. It will probably need to be "linked" to the user profile because even within the same locale users could have different beliefs/ideas/visions (like the first day of the week: Monday/Sunday)

[drewdaemon]

I'd just like to disagree with that. If you are required to select a negative color that is instead called "positive" I believe this can make users a bit uncomfortable.

Does this mean that these names show up in our palette switcher UI? In that case, I misunderstood originally and I agree with you that this is a good short-term change.

I assumed this was merely an adjustment to what they are called in the code. From the developer's perspective, I was saying that positive and negative are more powerful terms because they let the developer send a message (e.g. "this is a bad thing", "this is an error") without needing to know or repeatedly code for differences in culture.

As I said above, giving the developer access to semantic terms (code level) and allowing the application to translate these to the appropriate colors (UI level) would be easier than what I originally thought you were trying to accomplish here :)

I would expect the color to adjust automatically based on the locale or something. I would expect to be able to say "I want this theme to convey a positive feeling" and let the robots do the translation.

This is an interesting idea, definitely something to consider. Probably it will have its problems, but I believe this could be a great enhancement. It will probably need to be "linked" to the user profile because even within the same locale users could have different beliefs/ideas/visions (like the first day of the week: Monday/Sunday)

Good points. I see it as being the same as any other translation operation. For text-based information I (the developer) write a string in English in the code. Then, the application translates that string to best communicate my meaning to the user in the UI.

[markov00]

Does this mean that these names show up in our palette switcher UI? In that case, I misunderstood originally and I agree with you that this is a good short-term change.

Currently yes, it could be easily mapped to different labels case by case, but this can be missed everytime you need to show a the list of color palettes. That's why it needs both changes, in code and on UI (todo).

that positive and negative are more powerful terms because they let the developer send a message (e.g. "this is a bad thing", "this is an error") without needing to know or repeatedly code for differences in culture.

I see, I believe we should provide a "cultural" adaptive palette :D similar to what we do with the theme-aware colors