Strongly typed EUI theme for styled-components

x-pack/plugins/apm/public/application/csmApp.tsx

@@ -11,7 +11,8 @@ import { AppMountParameters, CoreStart } from 'kibana/public';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router } from 'react-router-dom';
-import styled, { DefaultTheme, ThemeProvider } from 'styled-components';
+import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
 import {
   KibanaContextProvider,
   RedirectAppLinks,
@@ -30,7 +31,7 @@ import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { px, units } from '../style/variables';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
 
-const CsmMainContainer = styled.div`
+const CsmMainContainer = euiStyled.div`
   padding: ${px(units.plus)};
   height: 100%;
 `;

x-pack/plugins/apm/public/application/index.tsx

@@ -12,7 +12,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router, Switch } from 'react-router-dom';
 import 'react-vis/dist/style.css';
-import styled, { DefaultTheme, ThemeProvider } from 'styled-components';
+import { DefaultTheme, ThemeProvider } from 'styled-components';
+import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
 import { ConfigSchema } from '../';
 import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
 import {
@@ -35,7 +36,7 @@ import { createStaticIndexPattern } from '../services/rest/index_pattern';
 import { setHelpExtension } from '../setHelpExtension';
 import { setReadonlyBadge } from '../updateBadge';
 
-const MainContainer = styled.div`
+const MainContainer = euiStyled.div`
   height: 100%;
 `;
 

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx

@@ -20,7 +20,7 @@ import { Location } from 'history';
 import { first } from 'lodash';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
 import type { IUrlParams } from '../../../../context/url_params_context/types';
@@ -42,14 +42,14 @@ import {
 } from './ErrorTabs';
 import { ExceptionStacktrace } from './ExceptionStacktrace';
 
-const HeaderContainer = styled.div`
+const HeaderContainer = euiStyled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: ${px(unit)};
 `;
 
-const TransactionLinkName = styled.div`
+const TransactionLinkName = euiStyled.div`
   margin-left: ${px(units.half)};
   display: inline-block;
   vertical-align: middle;

x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx

@@ -19,7 +19,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { useTrackPageview } from '../../../../../observability/public';
 import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
 import { useFetcher } from '../../../hooks/use_fetcher';
@@ -31,24 +31,24 @@ import { DetailView } from './DetailView';
 import { ErrorDistribution } from './Distribution';
 import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 
-const Titles = styled.div`
+const Titles = euiStyled.div`
   margin-bottom: ${px(units.plus)};
 `;
 
-const Label = styled.div`
+const Label = euiStyled.div`
   margin-bottom: ${px(units.quarter)};
   font-size: ${fontSizes.small};
   color: ${({ theme }) => theme.eui.euiColorMediumShade};
 `;
 
-const Message = styled.div`
+const Message = euiStyled.div`
   font-family: ${fontFamilyCode};
   font-weight: bold;
   font-size: ${fontSizes.large};
   margin-bottom: ${px(units.half)};
 `;
 
-const Culprit = styled.div`
+const Culprit = euiStyled.div`
   font-family: ${fontFamilyCode};
 `;
 

x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx

@@ -7,11 +7,11 @@
 
 import React from 'react';
 import { EuiFlexGrid, EuiFlexItem, EuiBadge } from '@elastic/eui';
-import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
+import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
 import { unit, px, truncate } from '../../../../../style/variables';
 
-const BadgeText = styled.div`
+const BadgeText = euiStyled.div`
   display: inline-block;
   ${truncate(px(unit * 8))};
   vertical-align: middle;

x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterTitleButton.tsx

@@ -7,9 +7,9 @@
 
 import React from 'react';
 import { EuiButtonEmpty, EuiTitle } from '@elastic/eui';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
 
-const Button = styled(EuiButtonEmpty).attrs(() => ({
+const Button = euiStyled(EuiButtonEmpty).attrs(() => ({
   contentProps: {
     className: 'alignLeft',
   },

x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx

@@ -19,12 +19,12 @@ import {
   EuiFlexGroup,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
 import { FilterBadgeList } from './FilterBadgeList';
 import { unit, px } from '../../../../../style/variables';
 import { FilterTitleButton } from './FilterTitleButton';
 
-const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs(
+const Popover = euiStyled((EuiPopover as unknown) as FunctionComponent).attrs(
   () => ({
     anchorClassName: 'anchor',
   })
@@ -34,22 +34,22 @@ const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs(
   }
 `;
 
-const SelectContainer = styled.div`
+const SelectContainer = euiStyled.div`
   width: ${px(unit * 16)};
 `;
 
-const Counter = styled.div`
+const Counter = euiStyled.div`
   border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
   background: ${({ theme }) => theme.eui.euiColorLightShade};
   padding: 0 ${({ theme }) => theme.eui.paddingSizes.xs};
 `;
 
-const ApplyButton = styled(EuiButton)`
+const ApplyButton = euiStyled(EuiButton)`
   align-self: flex-end;
 `;
 
 // needed for IE11
-const FlexItem = styled(EuiFlexItem)`
+const FlexItem = euiStyled(EuiFlexItem)`
   flex-basis: auto !important;
 `;
 

x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx

@@ -13,7 +13,7 @@ import {
   EuiButtonEmpty,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
 import { Filter } from './Filter';
 import { useLocalUIFilters } from '../hooks/useLocalUIFilters';
 import { LocalUIFilterName } from '../../../../../common/ui_filter';
@@ -26,7 +26,7 @@ interface Props {
   shouldFetch?: boolean;
 }
 
-const ButtonWrapper = styled.div`
+const ButtonWrapper = euiStyled.div`
   display: inline-block;
 `;
 

x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx

@@ -8,7 +8,7 @@
 import { EuiButtonIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext, useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { useTheme } from '../../../hooks/use_theme';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
@@ -17,23 +17,23 @@ import { APMQueryParams } from '../../shared/Links/url_helpers';
 import { CytoscapeContext } from './Cytoscape';
 import { getAnimationOptions, getNodeHeight } from './cytoscape_options';
 
-const ControlsContainer = styled('div')`
+const ControlsContainer = euiStyled('div')`
   left: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
   position: absolute;
   top: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
   z-index: 1; /* The element containing the cytoscape canvas has z-index = 0. */
 `;
 
-const Button = styled(EuiButtonIcon)`
+const Button = euiStyled(EuiButtonIcon)`
   display: block;
   margin: ${({ theme }) => theme.eui.paddingSizes.xs};
 `;
 
-const ZoomInButton = styled(Button)`
+const ZoomInButton = euiStyled(Button)`
   margin-bottom: ${({ theme }) => theme.eui.paddingSizes.s};
 `;
 
-const Panel = styled(EuiPanel)`
+const Panel = euiStyled(EuiPanel)`
   margin-bottom: ${({ theme }) => theme.eui.paddingSizes.s};
 `;
 

x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx

@@ -8,12 +8,12 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { CytoscapeContext } from './Cytoscape';
 import { useTheme } from '../../../hooks/use_theme';
 
-const EmptyBannerContainer = styled.div`
+const EmptyBannerContainer = euiStyled.div`
   margin: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
   /* Add some extra margin so it displays to the right of the controls. */
   left: calc(

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/AnomalyDetection.tsx

@@ -7,14 +7,14 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import styled from 'styled-components';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiTitle,
   EuiIconTip,
   EuiHealth,
 } from '@elastic/eui';
+import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
 import {
   getServiceHealthStatus,
   getServiceHealthStatusColor,
@@ -30,28 +30,28 @@ import {
   ServiceAnomalyStats,
 } from '../../../../../common/anomaly_detection';
 
-const HealthStatusTitle = styled(EuiTitle)`
+const HealthStatusTitle = euiStyled(EuiTitle)`
   display: inline;
   text-transform: uppercase;
 `;
 
-const VerticallyCentered = styled.div`
+const VerticallyCentered = euiStyled.div`
   display: flex;
   align-items: center;
 `;
 
-const SubduedText = styled.span`
+const SubduedText = euiStyled.span`
   color: ${({ theme }) => theme.eui.euiTextSubduedColor};
 `;
 
-const EnableText = styled.section`
+const EnableText = euiStyled.section`
   color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   line-height: 1.4;
   font-size: ${fontSize};
   width: ${px(popoverWidth)};
 `;
 
-export const ContentLine = styled.section`
+export const ContentLine = euiStyled.section`
   line-height: 2;
 `;
 

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx

@@ -13,24 +13,24 @@ import {
 import { i18n } from '@kbn/i18n';
 import cytoscape from 'cytoscape';
 import React, { Fragment } from 'react';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
 import {
   SPAN_SUBTYPE,
   SPAN_TYPE,
 } from '../../../../../common/elasticsearch_fieldnames';
 import { ExternalConnectionNode } from '../../../../../common/service_map';
 
-const ItemRow = styled.div`
+const ItemRow = euiStyled.div`
   line-height: 2;
 `;
 
-const SubduedDescriptionListTitle = styled(EuiDescriptionListTitle)`
+const SubduedDescriptionListTitle = euiStyled(EuiDescriptionListTitle)`
   &&& {
     color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   }
 `;
 
-const ExternalResourcesList = styled.section`
+const ExternalResourcesList = euiStyled.section`
   max-height: 360px;
   overflow: auto;
 `;

x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx

@@ -8,24 +8,24 @@
 import { i18n } from '@kbn/i18n';
 import { isNumber } from 'lodash';
 import React from 'react';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
 import {
   asDuration,
   asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
 import { ServiceNodeStats } from '../../../../../common/service_map';
 
-export const ItemRow = styled('tr')`
+export const ItemRow = euiStyled('tr')`
   line-height: 2;
 `;
 
-export const ItemTitle = styled('td')`
+export const ItemTitle = euiStyled('td')`
   color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   padding-right: 1rem;
 `;
 
-export const ItemDescription = styled('td')`
+export const ItemDescription = euiStyled('td')`
   text-align: right;
 `;
 

x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx

@@ -7,7 +7,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import React, { PropsWithChildren, ReactNode } from 'react';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { isActivePlatinumLicense } from '../../../../common/license_check';
 import { useTrackPageview } from '../../../../../observability/public';
 import {
@@ -33,7 +33,7 @@ interface ServiceMapProps {
   serviceName?: string;
 }
 
-const ServiceMapDatePickerFlexGroup = styled(EuiFlexGroup)`
+const ServiceMapDatePickerFlexGroup = euiStyled(EuiFlexGroup)`
   padding: ${({ theme }) => theme.eui.euiSizeM};
   border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
   margin: 0;

x-pack/plugins/apm/public/components/app/TraceLink/index.tsx

@@ -8,13 +8,13 @@
 import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
 import { Redirect, RouteComponentProps } from 'react-router-dom';
-import styled from 'styled-components';
+import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { getRedirectToTransactionDetailPageUrl } from './get_redirect_to_transaction_detail_page_url';
 import { getRedirectToTracePageUrl } from './get_redirect_to_trace_page_url';
 
-const CentralizedContainer = styled.div`
+const CentralizedContainer = euiStyled.div`
   height: 100%;
   display: flex;
 `;