Migrate styles from `styled-components` to `emotion`

Summary

There is a plan to migrate from styled-components to emotion, and this ticket focuses on styled-components usages for obs-ux-management related plugins and related information for this migration. This migration helps to avoid issues related to sharing components with platform plugins, as they have already started this migration. (Avoiding issues such as https://github.com/elastic/kibana/issues/186969)

Here is a comment from EUI team about this migration.

Here are hooks that can be used instead of styled-components ThemeContext: (comment)

useEuiTheme() (https://eui.elastic.co/#/theming/theme-provider#consuming-with-the-react-hook)

const { euiTheme } = useEuiTheme();
<div
  css={css`
    background: ${euiTheme.colors.lightShade};
    padding: calc(${euiTheme.size.base} * 2);
  `}
/>

Or, you can use Emotion's built-in theming: https://eui.elastic.co/#/theming/theme-provider#consuming-with-emotions-theming

<div
  css={({ euiTheme }) => css`
    background-color: ${euiTheme.colors.lightestShade};
    padding: ${euiTheme.size.l};
  `}
/>

Plugin	Number of imports from styled-components
Observability	7
SLO	8
Investigate	0
Investigate-app	0
Synthetics	16
Uptime	29

Here are some PRs that tried to migrate some components :

elastic / kibana

Migrate styles from `styled-components` to `emotion` #190245

Summary