What to do about accent color

[ryankeairns]

Problem

Feedback form internal teams indicates that using pink as the accent color is too close to the red, danger color. As a result, accent has been rarely used either in other EUI components or Elastic products.

Additional context

• We suspect this also led to the use of a teal color (euiColorVis0 in Amsterdam) for accents in places other than visualizations such as drag-and-drop, custom buttons, custom callouts, etc.
• In the new Borealis theme, we introduced accentSecondary, in part, as a backward-compatible solution for such use cases. We later backtracked on this decision leaving it as an available-though-undocumented option.

Example of similarity with callouts

Proposed solutions

1. Find a new color for accent - visually differentiated from other semantic colors (i.e. success, danger, or warning) and deprecate accentSecondary
2. Consider having no accent color and get by with primary + semantic colors. (i.e. if you need a green, then ask if the meaning is semantic. If so, use success)
3. Keep accentSecondary as a second accent color and provide stronger guidelines on its use cases

Note

One notable drawback of (3) is that it replicates the original problem, above, only now the teal color competes withsuccess as opposed to danger.

Suggested next step

1. Document actual use cases for accent color (and where people use accentSecondary)
2. With that information, make a design attempt at both (1) and (2)
3. Share the results here and agree upon an answer/path forward. (its feasible we find that (3) should be reconsidered at this stage)