Implement Visual Refresh changes in Stack monitoring

[weronikaolejniczak]

The purpose of this task is to implement the changes necessary for the Visual Refresh in Stack monitoring in Kibana.

Package: /x-pack/plugins/monitoring
Meta issue: elastic/kibana#199715
Details: stack-monitoring.pdf

---

Tasks

Preview Give feedback

1. use color palette tokens and functions within the scope of the EuiProvider
2. replace tintOrShade() color calculation function with a semantic token
3. replace euiThemeVars from @kbn/ui-theme with useEuiTheme from @elastic/eui
4. change all cases of props.theme.eui.* to euiTheme.*
5. extend emotion.d.ts file in the tsconfig.json
6. replace euiStyled with css from @emotion/react
7. migrate Sass to @emotion/react
8. (if applicable) replace all success tokens with accentSecondary
9. (optional) replace transparentize() color calculation function with a semantic token
10. (optional) replace all custom colors with semantic tokens (or at least appropriate color palette values)
11. (optional) replace incorrectly used vis color palette with other color tokens
12. (optional) replace all "health" SVGs with an appropriate component / update the colors of the SVG

---

Special test cases:

• Monitoring time-series "Zoom out" button hover behavior - x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.tsx
• Shard allocation (especially color mapping with shard type and status):
  • x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js
  • x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js
• Kuery bar suggestions and autocomplete field:
  • x-pack/plugins/monitoring/public/components/kuery_bar/autocomplete_field.tsx
  • x-pack/plugins/monitoring/public/components/kuery_bar/suggestion_item.tsx