eui icon indicating copy to clipboard operation
eui copied to clipboard

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

Open mgadewoll opened this issue 5 months ago • 4 comments

Summary

Closes https://github.com/elastic/eui/issues/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 Screenshot 2025-06-12 at 19 00 57 Screenshot 2025-06-12 at 18 58 19
Amsterdam Screenshot 2025-06-13 at 13 52 52 Screenshot 2025-06-13 at 13 42 20

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
    • [x] Checked in both light and dark modes
    • [ ] ~Checked in both MacOS and Windows high contrast modes~
    • [ ] ~Checked in mobile~
    • [x] Checked in Chrome, Safari, Edge, and Firefox
    • [ ] ~Checked for accessibility including keyboard-only and screenreader modes~
  • Docs site QA
  • Code quality checklist
  • 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 avatar Jun 12 '25 17:06 mgadewoll