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
- [x] use color palette tokens and functions within the scope of the `EuiProvider`
- [x] replace `tintOrShade()` color calculation function with a semantic token
- [x] replace `euiThemeVars` from `@kbn/ui-theme` with `useEuiTheme` from `@elastic/eui`
- [x] change all cases of `props.theme.eui.*` to `euiTheme.*`
- [x] extend `emotion.d.ts` file in the `tsconfig.json`
- [x] replace `euiStyled` with `css` from `@emotion/react`
- [x] migrate Sass to `@emotion/react`
- [x] (if applicable) replace all `success` tokens with `accentSecondary`
- [ ] (optional) replace `transparentize()` color calculation function with a semantic token
- [ ] (optional) replace all custom colors with semantic tokens (or at least appropriate color palette values)
- [ ] (optional) replace incorrectly used vis color palette with other color tokens
- [ ] (optional) replace all "health" SVGs with an appropriate component / update the colors of the SVG
Special test cases:
The purpose of this task is to implement the changes necessary for the Visual Refresh in Stack monitoring in Kibana.
Package:
/x-pack/plugins/monitoringMeta issue: elastic/kibana#199715
Details: stack-monitoring.pdf
Special test cases:
x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.tsxx-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.jsx-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.jsx-pack/plugins/monitoring/public/components/kuery_bar/autocomplete_field.tsxx-pack/plugins/monitoring/public/components/kuery_bar/suggestion_item.tsx