[Experimental][Theme tokens] Extend vis colors and default palette

[biamalveiro]

Summary

WIP / Experimental. (Parallel to elastic/kibana#289631)

This is a first analysis, related to elastic/kibana#271428.
Lens chart behavior will be validated in parallel.

Adds two assistance/purple stops to the Borealis vis palette (euiColorVis10 / euiColorVis11) and includes them in euiPaletteColorBlind() so the default categorical palette is 12 colors.

To follow the process used during the development of the original palette, we should also check contrast between colors (and light/dark backgrounds), to ensure new colors do not pose risks. To support this analysis, added a storybook story to help in this process. This recreates the elements made by @gvnmagni when developing the original palette, so we can properly test this: a color grid that makes it easier to visualise the selected hues+shades in a palette + a contrast matrix, that calculates APCA contrast checks. This dynamic version allows setting an adaptive threshold depending on size of non-semantic elements, as per these guidelines.

This story and respective components are dev helpers for this issue and can be removed before merging, so that change is limited to vis colors, if we decide to proceed.

Analysis

• Analyse contrast of the new colors
• Extend vis colors and add them to the default color palette
• Validate in Lens

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 9e88b7b

[elastic-vault-github-plugin-prod]

📷 28 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiavatar (2 differences)

Story	Diff %	Before	After	Diff
playground desktop	59.57%
playground mobile	59.57%

euicolorpalettepicker (14 differences)

Story	Diff %	Before	After	Diff
dark mode desktop	4.67%
high contrast dark mode desktop	4.15%
high contrast desktop	4.12%
kitchen sink desktop	4.66%
playground desktop	74.54%
appended titles desktop	0.31%
playground desktop	12.90%
dark mode mobile	4.59%
high contrast dark mode mobile	4.18%
high contrast mobile	4.15%
kitchen sink mobile	4.59%
playground mobile	73.34%
appended titles mobile	1.09%
playground mobile	12.71%

euicolorpicker (6 differences)

Story	Diff %	Before	After	Diff
high contrast dark mode desktop	n/a
high contrast desktop	n/a
inline with all elements desktop	n/a
high contrast dark mode mobile	n/a
high contrast mobile	n/a
inline with all elements mobile	n/a

euiheader (6 differences)

Story	Diff %	Before	After	Diff
dark theme with sitewide search desktop	0.04%
elastic navigation pattern desktop	0.06%
sections desktop	1.19%
dark theme with sitewide search mobile	0.14%
elastic navigation pattern mobile	0.24%
sections mobile	4.41%

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: 9d5beaa
• Documentation website
• Storybook
• ❌ Visual regression tests failed (view diff table)

Failed CI Steps

• 📷 Test visual regression #1
• 📷 Test visual regression #2
• 📷 Report visual regression

History

• 💔 Build #5297 failed 9e88b7b

[elastic-vault-github-plugin-prod]

📷 28 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiavatar (2 differences)

Story	Diff %	Before	After	Diff
playground desktop	59.57%
playground mobile	59.57%

euicolorpalettepicker (14 differences)

Story	Diff %	Before	After	Diff
dark mode desktop	4.67%
high contrast dark mode desktop	4.15%
high contrast desktop	4.12%
kitchen sink desktop	4.66%
playground desktop	74.54%
appended titles desktop	0.31%
playground desktop	12.90%
dark mode mobile	4.59%
high contrast dark mode mobile	4.18%
high contrast mobile	4.15%
kitchen sink mobile	4.59%
playground mobile	73.34%
appended titles mobile	1.09%
playground mobile	12.71%

euicolorpicker (6 differences)

Story	Diff %	Before	After	Diff
high contrast dark mode desktop	n/a
high contrast desktop	n/a
inline with all elements desktop	n/a
high contrast dark mode mobile	n/a
high contrast mobile	n/a
inline with all elements mobile	n/a

euiheader (6 differences)

Story	Diff %	Before	After	Diff
dark theme with sitewide search desktop	0.04%
elastic navigation pattern desktop	0.06%
sections desktop	1.19%
dark theme with sitewide search mobile	0.14%
elastic navigation pattern mobile	0.24%
sections mobile	4.41%