Update color page documentation based on Borealis color palette changes

[JasonStoltz]

Borealis introduced substantial changes to our color system in EUI.

As part of the initiative, we updated the lists of colors in our docs to reflect the new system.

However, I don't believe we updated the overall guidance and description of our new color system.

The goal of this task is to:

1. Review the current copy on our color pages to ensure it reflects the reality of our new color system
2. Ensure we are providing helpful guidance around how and when to apply colors.

Additional Context:

These are the two pages that we should focus on: https://eui.elastic.co/#/theming/colors/values https://eui.elastic.co/#/utilities/color-palettes

Specifically, these are some thoughts that jump out to me:

I'm unsure whether or not the text is accurate / helpful.

The math doesn't add up on this one -- this is describing a palette of 6 colors. And do we still call them "Brand colors"?

Many colors included could use a description. How and when should colors be applied. I suspect we could use this for all color tokens we have included.

We include deprecated colors in our documentation. I suspect we should just remove these.

We don't say it explicitly, but I'm fairly certain we do not want people to use these colors for anything other than data visualization.

Maybe this is a topic for another issue, but for the color palettes page, it's never been quite clear to me when and how we expect folks to use these colors.

[JasonStoltz]

Hey @ryankeairns, not sure who's project to put this in at this point, so I put it in both the EUI project and Design System project for input.

[ryankeairns]

re: projects, that works I'll chat with @ek-so , and we can prioritize in our design backlog.

[JasonStoltz]

@ryankeairns @ek-so Do you think we could bump this up in priority? Even if it's just an hour or two time boxed effort to try to review and update our color docs to align better with "[WIP][EUI Guidelines] Working with colors" would be a big win, I think.

[ryankeairns]

This would be a good first issue for our new designer. Labeled as such.

[JasonStoltz]

@JoseLuisGJ @ryankeairns

Here's another example, I recently saw that we issued the following deprecation:

Deprecated euiPaletteForLightBackground and euiPaletteForDarkBackground palettes. Use the newly added data vis color tokens instead.

The funny thing is, when I looked back at our documentation, I couldn't find it actually documented anywhere. So my hunch is that it wasn't documented? I wonder how much of that exists.

Honestly, I still don't quite understand the relation between our color palettes and color tokens, when to use which, and what tokens map to which palettes.

[ryankeairns]

TL;DR - I agree, we need to have a stronger, clearer stance on this topic.

Roughly speaking, what we see today is essentially the results of progressing from not having proper tokens to having them.

• In the 'olden days', euiPalette* was a convenient way to obtain (or create on the fly!) an array of colors.
• Now, we have tokens - colors specified with intent - and a naming convention that gets to the same result... a set(s) of colors for data viz

Where things got muddied is that these palettes were used sorta like faux tokens. Out of convenience, people began plucking out values and using them in non-dataviz use cases.

This topic will inevitably lead toward "Do we still need the palettes then?"

• I would hash that out with the data viz experts.
• Note that these palettes are also exposed to users when building visualizations so, in that regard, we may need to keep the component but be more restrictive on its use and guidelines.

[JasonStoltz]

Perhaps to summarize the overall problem I see:

We have:

1. Color docs on the EUI site - Never really updated to reflect Borealis - has tokens, but little or outdated guidance or token descriptions.
2. "[WIP][EUI Guidelines] Working with colors" doc - Includes guidance as well as a list of tokens with description, but not updated since January, so likely doesn't include the new color tokens we've added.
3. I saw a designer point an engineer to this PR for a list of color tokens the other day, which is old and really shouldn't be used as a reference.

What I'm envisioning is simplifying and extracting the content of "[WIP][EUI Guidelines] Working with colors" and updating Color docs on the EUI site with that content, so that the EUI docs are the simple source of truth going forward.

[ek-so]

[WIP][EUI Guidelines] Working with colors