[Visual Refresh] Update vis colors and palettes #8112

mgadewoll · 2024-11-01T10:52:58Z

Summary

closes https://github.com/elastic/eui-private/issues/127

Important

This PR merges into a feature branch.

Note

The first commit of this PR is duplicated from this other PR to ensure shared setup. This commit should not be review on this PR but the previous one.

This PR adds theme specific visualization colors and updates eui color palettes to use theme-specific colors.

Changes

adds global EuiVisColorStore - stores current theme vis colors on EuiProvider theme change
- EUI color palettes previously were using static values and are just - non-react - Javascript; they might be used outside of a react context
- to support current and new theme this global store provides means to add reactivity to the previously static usage
- provides pub/sub pattern to ensure consumers can update values on theme update, even outside of the react provider context

adds new theme vis color tokens

updates EUI color palettes to use vis color tokens stored in the EuiVisColorStore instead of static values
updates usages of EUI color palettes
migrated "Color palettes" docs to EUI+

#unrelated

changes EUI docs theme switcher, updates are taken from this previous PR

QA

verify color palette usages update colors on theme change:
EUI docs: https://eui.elastic.co/pr_8112/#/forms/color-selection
EUI+ docs: https://eui.elastic.co/pr_8112/new-docs/docs/color_palettes/
Storybook:

mgadewoll · 2024-11-06T06:58:21Z

packages/eui/src/services/color/eui_palettes.ts

 export const euiPaletteForTemperature = function (steps: number): EuiPalette {
-  const cools = colorPalette([...coolArray.slice().reverse(), '#EBEFF5'], 3);
-  const warms = colorPalette(['#F4F3DB', ...warmArray], 3);


ℹ️ I made an opinionated change here, that affects Amsterdam:
Here for warm colors it's using #F4F3DB while further down here it's using #FBFBDC.

Those two colors are very similar and to make everything more logical when using tokens, I changed those to use the same color.

Screen.Recording.2024-11-06.at.07.57.25.mov

This will affect Kibana where tests check for color values.

I'm cool with this change as long as designers don't mind. We can merge it to the feature branch and confirm with them

mgadewoll · 2024-11-06T08:21:32Z

packages/eui/src/services/color/eui_palettes.ts

-const greenColor: HEX = '#209280';
-const redColor: HEX = '#CC5642';
-const lightRedColor: HEX = euiPaletteColorBlind()[9];
-const coolArray: HEX[] = [euiPaletteColorBlind()[1], '#6092C0'];


ℹ️ This seemed like a mistake, as the coolArray holds the same colors this way because euiPaletteColorBlind()[1] is #6092C0

(2) ['#6092C0', '#6092C0']

packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js

packages/eui/src-docs/src/views/color_picker/color_palette_display.js

tkajtoch · 2024-11-07T12:06:55Z

packages/eui-theme-common/src/services/vis_color_store.ts

+  };
+}
+
+export class EuiVisColorStore {


This doesn't need to be a class really. In JS it's usually preferred to have it as a function instead.

ℹ️ We agreed to keep the class here for now as refactoring would cost more time and can still be done separately after.
Additionally, our longer term idea is to change how palettes work in general, moving towards context instead.

tkajtoch

The changes look solid. I don't have any major objections, just the comments I added above.

-updates store on provider theme change - moves vis colors to amsterdam theme from common

… usages are reactive to store updates

kibanamachine · 2024-11-07T14:50:11Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8112/
Storybook: https://eui.elastic.co/pr_8112/storybook
New docs: https://eui.elastic.co/pr_8112/new-docs

elasticmachine · 2024-11-07T14:50:35Z

💚 Build Succeeded

Buildkite Build
Commit: 5ccc662

History

💔 Build #3020 failed f7db3c3
💚 Build #3002 succeeded e328dd9
💚 Build #2999 succeeded 039d924
💔 Build #2997 failed 039d924

mgadewoll added the skip-changelog label Nov 1, 2024

mgadewoll requested a review from tkajtoch November 4, 2024 08:13

mgadewoll marked this pull request as ready for review November 4, 2024 08:13

mgadewoll requested a review from a team as a code owner November 4, 2024 08:13

mgadewoll commented Nov 6, 2024

View reviewed changes

tkajtoch reviewed Nov 7, 2024

View reviewed changes

packages/eui/src-docs/src/views/color_palette/color_palette_quantitative.js Show resolved Hide resolved

tkajtoch reviewed Nov 7, 2024

View reviewed changes

packages/eui/src-docs/src/views/color_picker/color_palette_display.js Outdated Show resolved Hide resolved

tkajtoch reviewed Nov 7, 2024

View reviewed changes

mgadewoll added 11 commits November 7, 2024 14:44

docs: update theme switcher based on elastic#8036

6be4b6d

feat: add global vis color store

3d32632

-updates store on provider theme change - moves vis colors to amsterdam theme from common

refactor: update eui palettes to use vis_color_store

77791c6

refactor: update component and doc usages to ensure eui color palette…

77727e2

… usages are reactive to store updates

docs: add color palette EUI+ docs

b6895b5

fix: rebase fixes

fc8a19f

fix: update code token

d8762f8

fix: uddate color palette docs location

c26a297

refactor: update vis token value to hex

9ed1c48

refactor: update imports

c4b2b7d

refactor: subscribe to vis color store on unmount

9aeec86

mgadewoll force-pushed the eui-theme/127-vis-color-palette branch from f7db3c3 to 9aeec86 Compare November 7, 2024 14:01

mgadewoll requested a review from tkajtoch November 7, 2024 14:03

refactor: force initial vis color update to execute last

5ccc662

tkajtoch approved these changes Nov 7, 2024

View reviewed changes

mgadewoll merged commit f561b46 into elastic:eui-theme/borealis Nov 7, 2024
4 checks passed

mgadewoll added a commit that referenced this pull request Nov 8, 2024

[Visual Refresh] Update vis colors and palettes (#8112)

588ebdc

mgadewoll deleted the eui-theme/127-vis-color-palette branch November 8, 2024 17:48

mgadewoll added a commit that referenced this pull request Nov 13, 2024

[Visual Refresh] Update vis colors and palettes (#8112)

afe259c

tkajtoch pushed a commit that referenced this pull request Nov 20, 2024

[Visual Refresh] Update vis colors and palettes (#8112)

065495a

tkajtoch pushed a commit that referenced this pull request Nov 27, 2024

[Visual Refresh] Update vis colors and palettes (#8112)

f622a78

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Update vis colors and palettes #8112

[Visual Refresh] Update vis colors and palettes #8112

mgadewoll commented Nov 1, 2024 •

edited

Loading

mgadewoll Nov 6, 2024

tkajtoch Nov 7, 2024

mgadewoll Nov 6, 2024 •

edited

Loading

tkajtoch Nov 7, 2024

mgadewoll Nov 7, 2024 •

edited

Loading

tkajtoch left a comment

kibanamachine commented Nov 7, 2024

elasticmachine commented Nov 7, 2024

[Visual Refresh] Update vis colors and palettes #8112

[Visual Refresh] Update vis colors and palettes #8112

Conversation

mgadewoll commented Nov 1, 2024 • edited Loading

Summary

Changes

QA

mgadewoll Nov 6, 2024

Choose a reason for hiding this comment

tkajtoch Nov 7, 2024

Choose a reason for hiding this comment

mgadewoll Nov 6, 2024 • edited Loading

Choose a reason for hiding this comment

tkajtoch Nov 7, 2024

Choose a reason for hiding this comment

mgadewoll Nov 7, 2024 • edited Loading

Choose a reason for hiding this comment

tkajtoch left a comment

Choose a reason for hiding this comment

kibanamachine commented Nov 7, 2024

elasticmachine commented Nov 7, 2024

💚 Build Succeeded

History

mgadewoll commented Nov 1, 2024 •

edited

Loading

mgadewoll Nov 6, 2024 •

edited

Loading

mgadewoll Nov 7, 2024 •

edited

Loading