[HCM] Add high contrast mode overrides for data visualization and severity color tokens

[mgadewoll]

Summary

Closes https://github.com/elastic/eui/issues/8632

This PR adds high contrast mode color values for data visualization and severity color tokens.

Changes

• separates colors.vis and colors.severity by color mode (enables overriding token values based on color mode)
• adds high contrast mode token values for colors.vis (excludes AsText tokens) and colors.severity

Why are we making this change?

The data visualization colors currently only meet expected color contrast levels for DARK color mode. Implementing high contrast mode specific color overrides for colors.vis and colors.severity colors provides higher contrast levels for LIGHT color mode.

[!NOTE] The contrast levels are only ensured for direct usages of those tokens. The usages within color palettes may still result in lower color contrast levels as it's expected to have lighter shades when generating multi-step palettes.

Screenshots

high contrast mode	LIGHT	DARK
false
true / 'preferred'
'forced'

Impact to users

🟢 There are no changes that require user updates.

QA

• checkout this PR and open the story: EuiColorPaletteDisplay > Kitchen Sink (remove the tags: ['vrt-only'] in the story to view it)
  • [ ] verify expected colors in Light/Dark modes and non-HCM/HCM (colors should only update for LIGHT-HCM)
• [ ] ensure there are no regressions for the legacy Amsterdam theme

General checklist

• Browser QA
  • [x] Checked in both light and dark modes
  • [x] 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~
  • [x] Checked in Chrome, Safari, Edge, and Firefox
  • [ ] ~Checked for accessibility including keyboard-only and screenreader modes~
• Docs site QA
  • [x] 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
  • [x] Added or updated jest and cypress tests
  • [ ] Updated visual regression tests
• Release checklist
  • [x] 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)

[mgadewoll]

We are changing light mode in HCM but for some reason there's a difference for dark mode in HCM as well. Is this because for a dark background in light mode, we're using dark mode tokens, and for a light background in dark mode, we're using light mode tokens? Is this difference expected?

@weronikaolejniczak I'm not entirely sure I understand the question 😅 Let me know if I answered your question. The story was updated to include a nested EuiProvider with inverted colorMode (code) which:

• a) allows us to test light and dark mode together instead of separately (we could duplicate the story and run it in dark mode only as well; I tried to keep it condensed in a single story for convenience)
• b) in dark mode this one inverted section is rendered in light mode which will trigger HCM mode updates for the color tokens because those color tokens have the HCM overrides applied

[mgadewoll]

@mgadewoll I typed that question absentmindedly, sorry for confusion 😅 I think the inverted colorMode is a bit weird in that story but I'm fine with leaving it if it makes testing easier. What I'd prefer is separate dark mode VRT images but I understand the overhead that it'd cause so even if we wanted to introduce it, it's not something for this PR.

@weronikaolejniczak But it's good feedback - if it's not clear enough what the test does we can/should update. 👍
Updated here.

[mgadewoll]

@weronikaolejniczak Thanks for the review and taking the time to run additional tests 🚀

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 8f5615acbc1e0994f1be01e4dbb97c11a35d9ca7
• Documentation website

History

• :broken_heart: Build #688 failed 7eaca557e9b5f551acc303eaf36c1716f948bafc
• :green_heart: Build #686 succeeded 442f49dd2f1f2be93288bac00ceddbecab4eda71
• :green_heart: Build #632 succeeded 5182cae97595dd76198f5f6d7cb314709c7f4898
• :green_heart: Build #539 succeeded bfb783580866f79e0717a562c1baf73bd67b0044
• :green_heart: Build #538 succeeded 7cb78e92222b5690a6db031739729dd6dae6ea35
• :green_heart: Build #536 succeeded 422d21b026d10d79c1d81b2fc3b54a161ad82dc7

cc @mgadewoll

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 8f5615acbc1e0994f1be01e4dbb97c11a35d9ca7

History

• :green_heart: Build #4314 succeeded 442f49dd2f1f2be93288bac00ceddbecab4eda71
• :green_heart: Build #4274 succeeded 5182cae97595dd76198f5f6d7cb314709c7f4898
• :green_heart: Build #4201 succeeded bfb783580866f79e0717a562c1baf73bd67b0044

cc @mgadewoll

[JasonStoltz]

[Adding for extra context in EUI release update]

To view view these changes:

1. Go to EUI docs: https://eui.elastic.co/docs/getting-started/theming/tokens/colors/index.html#data-visualization-colors
2. Enable "Light Mode" and "High Contrast Mode" - You'll see the datavis colors changing.