[UX Plugin] Audit new EUI Borealis theme (elastic#205195)

## Summary

It fixes elastic#205051

---------

.github/CODEOWNERS

@@ -3313,7 +3313,6 @@ x-pack/solutions/observability/plugins/streams @elastic/streams-program-team
 x-pack/solutions/observability/plugins/streams_app @elastic/streams-program-team
 x-pack/solutions/observability/plugins/synthetics @elastic/obs-ux-management-team
 x-pack/solutions/observability/plugins/uptime @elastic/obs-ux-management-team
-x-pack/solutions/observability/plugins/ux @elastic/obs-ux-infra_services-team
 x-pack/solutions/security/packages/data_table @elastic/security-threat-hunting-investigations
 x-pack/solutions/security/packages/ecs_data_quality_dashboard @elastic/security-threat-hunting-explore
 x-pack/solutions/security/packages/features @elastic/security-threat-hunting-explore

x-pack/solutions/observability/plugins/observability/public/pages/overview/components/sections/ux/core_web_vitals/core_vital_item.tsx

@@ -12,11 +12,13 @@ import {
   euiPaletteForStatus,
   EuiSpacer,
   EuiStat,
+  useEuiTheme,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { PaletteLegends } from './palette_legends';
 import { ColorPaletteFlexItem } from './color_palette_flex_item';
+
 import {
   CV_AVERAGE_LABEL,
   CV_GOOD_LABEL,
@@ -86,11 +88,13 @@ export function CoreVitalItem({
   dataTestSubj,
 }: Props) {
   const palette = euiPaletteForStatus(3);
-
   const [inFocusInd, setInFocusInd] = useState<number | null>(null);
-
   const biggestValIndex = ranks.indexOf(Math.max(...ranks));
+  const {
+    euiTheme: { colors },
+  } = useEuiTheme();
 
+  const colorsStatus = [colors.textSuccess, colors.textWarning, colors.textDanger];
   if (!value && !loading) {
     return <EuiCard title={title} isDisabled={true} description={NO_DATA} />;
   }
@@ -108,8 +112,8 @@ export function CoreVitalItem({
             <EuiIconTip content={helpLabel} type="questionInCircle" />
           </>
         }
-        titleColor={palette[biggestValIndex]}
         isLoading={loading}
+        titleColor={colorsStatus[biggestValIndex]}
       />
       <EuiSpacer size="s" />
       <EuiFlexGroup

x-pack/solutions/observability/plugins/ux/public/application/ux_app.tsx

@@ -5,20 +5,18 @@
  * 2.0.
  */
 
-import { euiLightVars, euiDarkVars } from '@kbn/ui-theme';
 import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Redirect } from 'react-router-dom';
-import { DefaultTheme, ThemeProvider } from 'styled-components';
 import { RouterProvider, createRouter } from '@kbn/typed-react-router-config';
 import { i18n } from '@kbn/i18n';
 import { RouteComponentProps, RouteProps } from 'react-router-dom';
 import { AppMountParameters, CoreStart, APP_WRAPPER_CLASS } from '@kbn/core/public';
 
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
-import { KibanaContextProvider, useDarkMode } from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 
 import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
 
@@ -57,7 +55,6 @@ export const uxRoutes: RouteDefinition[] = [
 function UxApp() {
   const { http } = useKibanaServices();
   const basePath = http.basePath.get();
-  const darkMode = useDarkMode(false);
 
   useBreadcrumbs([
     {
@@ -74,17 +71,9 @@ function UxApp() {
   ]);
 
   return (
-    <ThemeProvider
-      theme={(outerTheme?: DefaultTheme) => ({
-        ...outerTheme,
-        eui: darkMode ? euiDarkVars : euiLightVars,
-        darkMode,
-      })}
-    >
-      <div className={APP_WRAPPER_CLASS} data-test-subj="csmMainContainer">
-        <RumHome />
-      </div>
-    </ThemeProvider>
+    <div className={APP_WRAPPER_CLASS} data-test-subj="csmMainContainer">
+      <RumHome />
+    </div>
   );
 }
 

x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/charts/page_views_chart.tsx

@@ -8,7 +8,7 @@
 import moment from 'moment';
 import React, { useCallback } from 'react';
 import { fromQuery, toQuery } from '@kbn/observability-plugin/public';
-import { useTheme } from '@kbn/observability-shared-plugin/public';
+import { useEuiTheme } from '@elastic/eui';
 import { AllSeries, RECORDS_FIELD } from '@kbn/exploratory-view-plugin/public';
 import { useHistory } from 'react-router-dom';
 
@@ -31,7 +31,7 @@ export function PageViewsChart({ breakdown }: Props) {
 
   const { uxUiFilters, urlParams } = useLegacyUrlParams();
 
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
 
   const { reportDefinitions, time } = useExpViewAttributes();
 
@@ -43,7 +43,7 @@ export function PageViewsChart({ breakdown }: Props) {
       name: 'ux-series-1',
       selectedMetricField: RECORDS_FIELD,
       breakdown: breakdown?.fieldName,
-      color: theme.eui.euiColorVis1,
+      color: euiTheme.colors.vis.euiColorVis1,
       filters: getExploratoryViewFilter(uxUiFilters, urlParams),
     },
   ];

x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/client_metrics/metrics.tsx

@@ -7,7 +7,7 @@
 
 import * as React from 'react';
 import numeral from '@elastic/numeral';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useContext, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiToolTip, EuiIconTip } from '@elastic/eui';
 import { useClientMetricsQuery } from '../../../../hooks/use_client_metrics_query';

x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/local_uifilters/selected_filters.tsx

@@ -8,7 +8,7 @@
 import React, { Fragment } from 'react';
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { FilterValueLabel } from '@kbn/exploratory-view-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';

x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/url_filter/url_search/render_option.tsx

@@ -7,11 +7,10 @@
 
 import React, { ReactNode } from 'react';
 import { EuiHighlight, EuiSelectableOption } from '@elastic/eui';
-import styled from 'styled-components';
-import { euiLightVars } from '@kbn/ui-theme';
+import styled from '@emotion/styled';
 
 const StyledSpan = styled.span`
-  color: ${euiLightVars.euiColorSuccessText};
+  color: ${({ theme }) => theme.euiTheme.colors.success};
   font-weight: 500;
   :not(:last-of-type)::after {
     content: '•';

x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown/index.tsx

@@ -8,7 +8,7 @@
 import React, { useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { EuiLoadingChart } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { UxLocalUIFilterName, uxLocalUIFilterNames } from '../../../../../common/ux_ui_filter';
 import { VisitorBreakdownChart, VisitorBreakdownMetric } from '../charts/visitor_breakdown_chart';
 import { I18LABELS, VisitorBreakdownLabel } from '../translations';

x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/embedded_map.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import type { RenderTooltipContentParams } from '@kbn/maps-plugin/public';
 import { useLayerList } from './use_layer_list';

x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/map_tooltip.tsx

@@ -13,7 +13,7 @@ import {
   EuiOutsideClickDetector,
   EuiPopoverTitle,
 } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import type { RenderTooltipContentParams } from '@kbn/maps-plugin/public';
 import {
   COUNTRY_NAME,