eui
eui copied to clipboard
[Visual Refresh][Theme] Update dataVis text color tokens
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}andeuiColorVisAsTextLight{NUMBER}tokens toeuiColorVisText{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
euiColorVisTexttokens- ℹ️ 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
euiPaletteForLightBackgroundandeuiPaletteForDarkBackgroundto 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)
- deprecates these palette functions as the tokens can be used from the theme directly instead
- 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
- [x] 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~
- [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
@defaultif 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~
- [x] 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)~