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

## Summary

It fixes #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

packages/kbn-babel-preset/styled_components_files.js

@@ -168,13 +168,6 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]uptime[\/\\]public[\/\\]legacy_uptime[\/\\]components[\/\\]settings[\/\\]alert_defaults_form.tsx/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]uptime[\/\\]public[\/\\]legacy_uptime[\/\\]components[\/\\]synthetics[\/\\]step_screenshot_display.tsx/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]uptime[\/\\]public[\/\\]legacy_uptime[\/\\]pages[\/\\]overview.tsx/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]public[\/\\]application[\/\\]ux_app.tsx/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]public[\/\\]components[\/\\]app[\/\\]rum_dashboard[\/\\]client_metrics[\/\\]metrics.tsx/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]public[\/\\]components[\/\\]app[\/\\]rum_dashboard[\/\\]local_uifilters[\/\\]selected_filters.tsx/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]public[\/\\]components[\/\\]app[\/\\]rum_dashboard[\/\\]url_filter[\/\\]url_search[\/\\]render_option.tsx/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]public[\/\\]components[\/\\]app[\/\\]rum_dashboard[\/\\]visitor_breakdown[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]public[\/\\]components[\/\\]app[\/\\]rum_dashboard[\/\\]visitor_breakdown_map[\/\\]embedded_map.tsx/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]public[\/\\]components[\/\\]app[\/\\]rum_dashboard[\/\\]visitor_breakdown_map[\/\\]map_tooltip.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]packages[\/\\]data_table[\/\\]components[\/\\]data_table[\/\\]data_table.stories.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]packages[\/\\]data_table[\/\\]components[\/\\]data_table[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]packages[\/\\]data_table[\/\\]components[\/\\]toolbar[\/\\]unit[\/\\]styles.tsx/,

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,12 +5,10 @@
  * 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';
@@ -18,7 +16,7 @@ import { AppMountParameters, CoreStart, APP_WRAPPER_CLASS } from '@kbn/core/publ
 
 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/__snapshots__/embedded_map.test.tsx.snap

@@ -1,41 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Embedded Map it renders 1`] = `
-.c0 {
-  z-index: auto;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 100%;
-  position: relative;
-}
-
-.c0 .embPanel__content {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1 1 100%;
-  -ms-flex: 1 1 100%;
-  flex: 1 1 100%;
-  z-index: 1;
-  min-height: 0;
-}
-
-.c0.c0.c0 .maplibregl-canvas {
-  -webkit-animation: none !important;
-  animation: none !important;
-}
-
 <div
-  class="c0"
+  class="css-1b7f711"
 >
   <div
     class="embPanel__content"

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

@@ -5,26 +5,18 @@ Array [
   <div
     class="euiPopoverTitle emotion-euiPopoverTitle-l-l"
   />,
-  .c1.c1.c1 {
-  width: 25%;
-}
-
-.c0.c0.c0 {
-  width: 75%;
-}
-
-<dl
+  <dl
     class="euiDescriptionList emotion-euiDescriptionList-column-left-s-s"
     data-type="column"
     style="width:300px"
   >
     <dt
-      class="euiDescriptionList__title c0 eui-textNoWrap emotion-euiDescriptionList__title-column-reverse"
+      class="euiDescriptionList__title eui-textNoWrap emotion-euiDescriptionList__title-column-reverse"
     >
       Average page load duration
     </dt>
     <dd
-      class="euiDescriptionList__description c1 emotion-euiDescriptionList__description-column-compressed"
+      class="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
     />
   </dl>,
 ]

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,