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

[angorayc]

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

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-threat-hunting-explore (Team:Threat Hunting:Explore)

[elasticmachine]

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

[angorayc]

Todos:

1. Found the some hard coded color hash in Lens Embeddable components. We need to modify the implementation of Lens Embeddable in order to retrieve the color token from useEuiTheme
   Our current use case, for example:

   kibana/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/unique_ips/index.tsx

   Line 38 in b845917

   color: HostsKpiChartColors.uniqueDestinationIps,

kibana/x-pack/plugins/security_solution/public/explore/hosts/components/kpi_hosts/types.ts

Lines 14 to 16 in b845917

	uniqueSourceIps = '#D36086',
	uniqueDestinationIps = '#9170B8',
	hosts = '#6092C0',

kibana/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/network_events/index.tsx

Line 28 in b845917

color: euiColorVis1,

kibana/x-pack/plugins/security_solution/public/explore/network/components/kpi_network/unique_private_ips/index.tsx

Line 41 in b845917

color: euiColorVis3,

kibana/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx

Lines 22 to 23 in b845917

	authenticationsSuccess = '#54B399',
	authenticationsFailure = '#E7664C',

2. Hard coded color schema:
   x-pack/plugins/security_solution/public/common/components/charts/donutchart_empty.tsx

kibana/x-pack/plugins/security_solution/public/common/components/matrix_histogram/utils.ts

Line 11 in b845917

export const defaultLegendColors = [

https://github.com/elastic/kibana/blob/385d0dc84a5d9e77d9348aebfe59b0b2562464fc/x-pack/plugins/security_solution/public/common/components/ml/score/score_health.tsx

kibana/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/authentication.ts

Line 40 in 4a2f63c

color: '#54b399',

kibana/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_area.ts

Line 88 in 8c4976f

yConfig: [{ color: '#d36186', forAccessor: 'd9a6eb6b-8b78-439e-98e7-a718f8ffbebe' }],

kibana/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/hosts/kpi_unique_ips_bar.ts

Line 96 in 0d8a1ec

yConfig: [{ color: '#d36186', forAccessor: '32f66676-f4e1-48fd-b7f8-d4de38318601' }],

kibana/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/users/kpi_user_authentications_area.ts

Line 42 in 250790e

color: '#54b399',

kibana/x-pack/plugins/security_solution/public/explore/users/components/kpi_users/authentications/index.tsx

Line 21 in b845917

enum ChartColors {

Map:

https://github.com/elastic/kibana/blob/1c15e9a6774a1453b1341d406bc4b62bd8a47c4b/x-pack/plugins/security_solution/public/explore/network/components/embeddables/map_config.ts

Others:

1. Vis colors are for visualizations only, please consider replacing them with different color tokens.
2. Ideally color tokens should be retrieved from useEuiTheme

Rules migration:

kibana/x-pack/plugins/security_solution/public/siem_migrations/rules/components/status_badge/index.tsx

Lines 28 to 30 in 668f776

	full: euiColorVis0,
	partial: euiColorVis7,
	untranslatable: euiColorVis9,

alerts:

kibana/x-pack/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/group_panel_renderers.tsx

Line 102 in df15fe1

backgroundColor: euiThemeVars.euiColorVis1_behindText,

kibana/x-pack/plugins/security_solution/public/common/components/severity_badge/index.tsx

Lines 17 to 20 in c3801ce

	low: euiColorVis0,
	medium: euiColorVis5,
	high: euiColorVis7,
	critical: euiColorVis9,

kibana/x-pack/plugins/security_solution/public/common/constants.ts

Lines 10 to 13 in d39c75a

	export const RISK_COLOR_LOW = euiLightVars.euiColorVis0;
	export const RISK_COLOR_MEDIUM = euiLightVars.euiColorVis5;
	export const RISK_COLOR_HIGH = euiLightVars.euiColorVis7;
	export const RISK_COLOR_CRITICAL = euiLightVars.euiColorVis9;