[Visual Refresh][Theme] Update dataVis text color tokens

[mgadewoll]

Summary

Closes #8589

Note

It's suggested to review this PR by following along by commit.

This PR updates the theme tokens for data visualization text to ensure there are tokens available to create labels for visualizations that are readable in both color modes.

This PR aligns the previously available text tokens that were named per color mode into a single set of tokens that are connected to the theme color mode. This ensures that the tokens update based on the selected theme color mode.

Changes

• separates data vis color files into separate color modes (light, dark)
• combines and renames euiColorVisAsTextDark{NUMBER} and euiColorVisAsTextLight{NUMBER} tokens to euiColorVisText{NUMBER}
• adds additional text tokens to match the amount of data vis colors (previously only there were only 6 text color tokens, now it's 9)
  • ℹ️ Adds approximations for colors for Amsterdam (there are no specs for those)
• updates token values for euiColorVisText tokens
  • ℹ️ Updates Amsterdam token color order to align with the new purpose of matching related text token with data vis color tokens
• updates EUI palette functions euiPaletteForLightBackground and euiPaletteForDarkBackground to use the new tokens
  • deprecates these palette functions as the tokens can be used from the theme directly instead
    • ℹ️ there is currently only a single usage in elastic-charts storybook (code)
• outputs the new data vis text tokens in the EUI docs

Why are we making this change?

This change ensures that visualizations have tokens available to apply to text which relate directly to the used colors for data visualizations. This solves an accessibility issue when using the available data vis colors would otherwise result in text that is too light on light backgrounds.

Screenshots

theme	light	dark
Borealis
Amsterdam

Impact to users

⚠️ This is a breaking change because we're removing these previously available tokens:

euiColorVisAsTextLight1
euiColorVisAsTextLight0
euiColorVisAsTextLight2
euiColorVisAsTextLight3
euiColorVisAsTextLight4
euiColorVisAsTextLight5
euiColorVisAsTextLight6

euiColorVisAsTextDark1
euiColorVisAsTextDark0
euiColorVisAsTextDark2
euiColorVisAsTextDark3
euiColorVisAsTextDark4
euiColorVisAsTextDark5
euiColorVisAsTextDark6

🟢 Those tokens are not in use in Kibana or Cloud-UI. This is mainly due to the tokens having been introduced only recently with the introduction of the Borealis theme. Originally they were solely in use in the euiPaletteForLightBackground and euiPaletteForDarkBackground palettes

Additional notes

🟢 The changes were tested against Kibana and eui-theme/amsterdam.

⚠️ We'll need to update eui-theme/amsterdam on the next release to match the changed colorVis imports.
Changes required here and here:

// current
import { colorVis } from '../../themes/amsterdam/global_styling/variables/_colors_vis';

// update
import { colorVisLight as colorVis } from '../../themes/amsterdam/global_styling/variables/_colors_vis_light';

QA

• verify the added token values for Borealis match the design specs (issue)

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • 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
  • Updated visual regression 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
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[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

[acstll]

Found one small thing in a .scss file, and I have a doubt regarding some Amsterdam values in SCSS/JSON.

Also (not so important), the approximations in Amsterdam in some cases do not match the hue, e.g. text2 and text3 in Borealis are "blue", but in Amsterdam are magenta/purple-ish, is that intentional?

In summary, I checked the token assignments follow the spec ✅, and checked values in SCSS and JSON.

(I felt like I was reviewing again my own PR from yesterday haha 😅)

[acstll]

Thanks for the quick update! 🟢

[gvnmagni]

Thank you Lene, the only thing that I would change is that I would put a dedicated table for these tokens at the end of the documentation page, these tokens are almost never used and they are here as a fallback in case of need for text visualisation, I would love to give them less importance and to separate them from default datavis colors

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 3a298fd
• Documentation website

History

• 💚 Build #523 succeeded 7773a39
• 💚 Build #509 succeeded ba3c24b

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 3a298fd

History

• 💚 Build #4188 succeeded 7773a39
• 💚 Build #4175 succeeded ba3c24b

cc @mgadewoll