[Security Solution][EUI visual refresh] make sure color palettes are theme aware

[PhilippeOberti]

Context

Changes are made to EUI that will be visible to end-users in Kibana:

• Updated all colors in EUI
• Reduce the topmost font weights and sizes (think titles and headings)
  These changes are available in a new theme called Borealis.

See parent ticket for how to use the new theme and labels to add to the PR for tracking

Important

Make sure that you use the backport:skip label on the PR!!

Description

All usage of color palette tokens and functions now pull from the theme, and correctly update to use new colors when the theme changes from Borealis to Amsterdam and vice versa.

Important

Key point: Make sure that if you are using colors from our color palette options, that your UI correctly updates to use the correct colors whenever you change themes.

https://eui.elastic.co/#/utilities/color-palettes

euiColorVis0
euiColorVis1
euiColorVis2
euiColorVis3
euiColorVis4
euiColorVis5
euiColorVis6
euiColorVis7
euiColorVis8
euiColorVis9

Vis color tokens are now available through the EUI theme: euiTheme.colors.vis:

These were not previously part of the theme. This means that they would not change when the theme was changed. They are now part of the theme and should change when the theme is changed.

If you were using any of the above tokens directly, please change your code to pull them directly from euiTheme.colors.vis.

If you were using any of our color palette functions:

• either ensure the color palette function is called inside a React component under the EuiProvider context and is hence connected to rerender (called on rerender or connected to a state)
• otherwise if it’s used outside of the EuiProvider context you can use the new EUI_VIS_COLOR_STORE.subscribe() function to listen to changes and update usages manually

const storeId = EUI_VIS_COLOR_STORE.subscribe(
  VIS_COLOR_STORE_EVENTS.UPDATE,
  () => {
    setPalette(euiPaletteColorBlind());
  }
);

[elasticmachine]

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[elasticmachine]

Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations)