[UX Plugin] Audit new EUI Borealis theme

packages/kbn-babel-preset/styled_components_files.js

@@ -24,7 +24,6 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]observability[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]synthetics[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]uptime[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]packages[\/\\]ecs_data_quality_dashboard[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]lists[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]/,

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

@@ -5,20 +5,19 @@
  * 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 { EuiThemeProvider } from '@elastic/eui';
 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 +56,6 @@ export const uxRoutes: RouteDefinition[] = [
 function UxApp() {
   const { http } = useKibanaServices();
   const basePath = http.basePath.get();
-  const darkMode = useDarkMode(false);
 
   useBreadcrumbs([
     {
@@ -74,17 +72,11 @@ function UxApp() {
   ]);
 
   return (
-    <ThemeProvider
-      theme={(outerTheme?: DefaultTheme) => ({
-        ...outerTheme,
-        eui: darkMode ? euiDarkVars : euiLightVars,
-        darkMode,
-      })}
-    >
+    <EuiThemeProvider>
       <div className={APP_WRAPPER_CLASS} data-test-subj="csmMainContainer">
         <RumHome />
       </div>
-    </ThemeProvider>
+    </EuiThemeProvider>
   );
 }
 

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,