[Infra UI] Add and use typed styled-components theme provider (#33607)

This adds a specialization of the styled-components api, which is correctly typed according to the new theme variable type definitions included in EUI (elastic/eui#1750) and made available in Kibana via #33873.

x-pack/common/eui_styled_components/eui_styled_components.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import * as styledComponents from 'styled-components';
+import { ThemedStyledComponentsModule, ThemeProvider, ThemeProviderProps } from 'styled-components';
+
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+export interface EuiTheme {
+  eui: typeof euiLightVars | typeof euiDarkVars;
+  darkMode: boolean;
+}
+
+const EuiThemeProvider = <T extends any>({
+  darkMode = false,
+  ...otherProps
+}: ThemeProviderProps<T & EuiTheme> & {
+  darkMode?: boolean;
+  children?: React.ReactNode;
+}) => (
+  <ThemeProvider
+    {...otherProps}
+    theme={() => ({
+      eui: darkMode ? euiDarkVars : euiLightVars,
+      darkMode,
+    })}
+  />
+);
+
+const {
+  default: euiStyled,
+  css,
+  injectGlobal,
+  keyframes,
+  withTheme,
+} = styledComponents as ThemedStyledComponentsModule<EuiTheme>;
+
+export { css, euiStyled, EuiThemeProvider, injectGlobal, keyframes, withTheme };

x-pack/common/eui_styled_components/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  css,
+  euiStyled,
+  EuiTheme,
+  EuiThemeProvider,
+  injectGlobal,
+  keyframes,
+  withTheme,
+} from './eui_styled_components';
+
+export { css, euiStyled, EuiTheme, EuiThemeProvider, injectGlobal, keyframes, withTheme };
+// tslint:disable-next-line:no-default-export to mimick the styled-components module
+export default euiStyled;

x-pack/plugins/infra/public/apps/start_app.tsx

@@ -11,13 +11,11 @@ import { ApolloProvider } from 'react-apollo';
 import { Provider as ReduxStoreProvider } from 'react-redux';
 import { BehaviorSubject } from 'rxjs';
 import { pluck } from 'rxjs/operators';
-import { ThemeProvider } from 'styled-components';
 
 // TODO use theme provided from parentApp when kibana supports it
 import { EuiErrorBoundary } from '@elastic/eui';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { I18nContext } from 'ui/i18n';
+import { EuiThemeProvider } from '../../../../common/eui_styled_components';
 import { InfraFrontendLibs } from '../lib/lib';
 import { PageRouter } from '../routes';
 import { createStore } from '../store';
@@ -39,14 +37,9 @@ export async function startApp(libs: InfraFrontendLibs) {
           <ReduxStoreProvider store={store}>
             <ApolloProvider client={libs.apolloClient}>
               <ApolloClientContext.Provider value={libs.apolloClient}>
-                <ThemeProvider
-                  theme={() => ({
-                    eui: libs.framework.darkMode ? euiDarkVars : euiLightVars,
-                    darkMode: libs.framework.darkMode,
-                  })}
-                >
+                <EuiThemeProvider darkMode={libs.framework.darkMode}>
                   <PageRouter history={history} />
-                </ThemeProvider>
+                </EuiThemeProvider>
               </ApolloClientContext.Provider>
             </ApolloProvider>
           </ReduxStoreProvider>

x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx

@@ -11,10 +11,10 @@ import {
   EuiPanel,
 } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
 
 import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
 
+import euiStyled from '../../../../../common/eui_styled_components';
 import { composeStateUpdaters } from '../../utils/typed_react';
 import { SuggestionItem } from './suggestion_item';
 
@@ -296,11 +296,11 @@ const FixedEuiFieldSearch: React.SFC<
     }
 > = EuiFieldSearch as any;
 
-const AutocompleteContainer = styled.div`
+const AutocompleteContainer = euiStyled.div`
   position: relative;
 `;
 
-const SuggestionsPanel = styled(EuiPanel).attrs({
+const SuggestionsPanel = euiStyled(EuiPanel).attrs({
   paddingSize: 'none',
   hasShadow: true,
 })`

x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx

@@ -7,9 +7,9 @@
 import { EuiIcon } from '@elastic/eui';
 import { transparentize } from 'polished';
 import React from 'react';
-import styled from 'styled-components';
 
 import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface SuggestionItemProps {
   isSelected?: boolean;
@@ -42,25 +42,25 @@ export class SuggestionItem extends React.Component<SuggestionItemProps> {
   }
 }
 
-const SuggestionItemContainer = styled.div<{
+const SuggestionItemContainer = euiStyled.div<{
   isSelected?: boolean;
 }>`
   display: flex;
   flex-direction: row;
   font-size: ${props => props.theme.eui.euiFontSizeS};
-  height: ${props => props.theme.eui.euiSizeXl};
+  height: ${props => props.theme.eui.euiSizeXL};
   white-space: nowrap;
   background-color: ${props =>
     props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
 `;
 
-const SuggestionItemField = styled.div`
+const SuggestionItemField = euiStyled.div`
   align-items: center;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  height: ${props => props.theme.eui.euiSizeXl};
-  padding: ${props => props.theme.eui.euiSizeXs};
+  height: ${props => props.theme.eui.euiSizeXL};
+  padding: ${props => props.theme.eui.euiSizeXS};
 `;
 
 const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
@@ -69,7 +69,7 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
   color: ${props => getEuiIconColor(props.theme, props.suggestionType)};
   flex: 0 0 auto;
   justify-content: center;
-  width: ${props => props.theme.eui.euiSizeXl};
+  width: ${props => props.theme.eui.euiSizeXL};
 `;
 
 const SuggestionItemTextField = SuggestionItemField.extend`

x-pack/plugins/infra/public/components/empty_states/no_data.tsx

@@ -6,7 +6,8 @@
 
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface NoDataProps {
   titleText: string;
@@ -36,6 +37,6 @@ export const NoData: React.SFC<NoDataProps> = ({
   />
 );
 
-const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/infra/public/components/empty_states/no_indices.tsx

@@ -6,7 +6,8 @@
 
 import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface NoIndicesProps {
   message: string;
@@ -24,6 +25,6 @@ export const NoIndices: React.SFC<NoIndicesProps> = ({ actions, message, title,
   />
 );
 
-const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/infra/public/components/error_page.tsx

@@ -14,8 +14,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../common/eui_styled_components';
 import { FlexPage } from './page';
 
 interface Props {
@@ -64,6 +64,6 @@ export const ErrorPage: React.SFC<Props> = ({ detailedMessage, retry, shortMessa
   </FlexPage>
 );
 
-const MinimumPageContent = styled(EuiPageContent)`
+const MinimumPageContent = euiStyled(EuiPageContent)`
   min-width: 50vh;
 `;

x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx

@@ -6,9 +6,9 @@
 
 import { EuiPanel } from '@elastic/eui';
 
-import styled from 'styled-components';
+import euiStyled from '../../../../../../common/eui_styled_components';
 
-export const Toolbar = styled(EuiPanel).attrs({
+export const Toolbar = euiStyled(EuiPanel).attrs({
   grow: false,
   paddingSize: 'none',
 })`

x-pack/plugins/infra/public/components/loading/index.tsx

@@ -6,7 +6,8 @@
 
 import { EuiLoadingChart, EuiPanel, EuiText } from '@elastic/eui';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface InfraLoadingProps {
   text: string | JSX.Element;
@@ -32,7 +33,7 @@ export class InfraLoadingPanel extends React.PureComponent<InfraLoadingProps, {}
   }
 }
 
-export const InfraLoadingStaticPanel = styled.div`
+export const InfraLoadingStaticPanel = euiStyled.div`
   position: relative;
   overflow: hidden;
   display: flex;
@@ -40,7 +41,7 @@ export const InfraLoadingStaticPanel = styled.div`
   justify-content: center;
 `;
 
-export const InfraLoadingStaticContentPanel = styled.div`
+export const InfraLoadingStaticContentPanel = euiStyled.div`
   flex: 0 0 auto;
   align-self: center;
   text-align: center;

x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx

@@ -7,7 +7,8 @@
 import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 interface LogCustomizationMenuState {
   isShown: boolean;
@@ -64,6 +65,6 @@ export class LogCustomizationMenu extends React.Component<{}, LogCustomizationMe
   }
 }
 
-const CustomizationMenuContent = styled.div`
+const CustomizationMenuContent = euiStyled.div`
   min-width: 200px;
 `;

x-pack/plugins/infra/public/components/logging/log_flyout.tsx

@@ -15,7 +15,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraLogItem, InfraLogItemField } from '../../graphql/types';
 import { InfraLoadingPanel } from '../loading';
 interface Props {
@@ -105,7 +106,7 @@ export const LogFlyout = injectI18n(
   }
 );
 
-export const InfraFlyoutLoadingPanel = styled.div`
+export const InfraFlyoutLoadingPanel = euiStyled.div`
   position: absolute;
   top: 0;
   right: 0;

x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx

@@ -8,8 +8,8 @@ import { scaleLinear, scaleTime } from 'd3-scale';
 import { area, curveMonotoneY } from 'd3-shape';
 import max from 'lodash/fp/max';
 import * as React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { SummaryBucket } from './types';
 
 interface DensityChartProps {
@@ -55,14 +55,14 @@ export const DensityChart: React.SFC<DensityChartProps> = ({
   );
 };
 
-const PositiveAreaPath = styled.path`
+const PositiveAreaPath = euiStyled.path`
   fill: ${props =>
     props.theme.darkMode
       ? props.theme.eui.euiColorMediumShade
       : props.theme.eui.euiColorLightShade};
 `;
 
-const NegativeAreaPath = styled.path`
+const NegativeAreaPath = euiStyled.path`
   fill: ${props =>
     props.theme.darkMode
       ? props.theme.eui.euiColorLightShade

x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx

@@ -5,7 +5,8 @@
  */
 
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 
 interface HighlightedIntervalProps {
   className?: string;
@@ -35,7 +36,7 @@ export const HighlightedInterval: React.SFC<HighlightedIntervalProps> = ({
 
 HighlightedInterval.displayName = 'HighlightedInterval';
 
-const HighlightPolygon = styled.polygon`
+const HighlightPolygon = euiStyled.polygon`
   fill: ${props => props.theme.eui.euiColorPrimary};
   fill-opacity: 0.3;
   stroke: ${props => props.theme.eui.euiColorPrimary};

x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx

@@ -6,8 +6,8 @@
 
 import { scaleLinear } from 'd3-scale';
 import * as React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { LogEntryTime } from '../../../../common/log_entry';
 // import { SearchSummaryBucket } from '../../../../common/log_search_summary';
 import { DensityChart } from './density_chart';
@@ -116,11 +116,11 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
   }
 }
 
-const MinimapBackground = styled.rect`
+const MinimapBackground = euiStyled.rect`
   fill: ${props => props.theme.eui.euiColorLightestShade};
 `;
 
-const MinimapBorder = styled.line`
+const MinimapBorder = euiStyled.line`
   stroke: ${props => props.theme.eui.euiColorMediumShade};
   stroke-width: 1px;
 `;

x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx

@@ -6,8 +6,8 @@
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
 
+import euiStyled, { keyframes } from '../../../../../../common/eui_styled_components';
 import { LogEntryTime } from '../../../../common/log_entry';
 import { SearchSummaryBucket } from '../../../../common/log_search_summary';
 import { SearchMarkerTooltip } from './search_marker_tooltip';
@@ -102,11 +102,11 @@ const fadeInAnimation = keyframes`
   }
 `;
 
-const SearchMarkerGroup = styled.g`
+const SearchMarkerGroup = euiStyled.g`
   animation: ${fadeInAnimation} ${props => props.theme.eui.euiAnimSpeedExtraSlow} ease-in both;
 `;
 
-const SearchMarkerBackgroundRect = styled.rect`
+const SearchMarkerBackgroundRect = euiStyled.rect`
   fill: ${props => props.theme.eui.euiColorSecondary};
   opacity: 0;
   transition: opacity ${props => props.theme.eui.euiAnimSpeedNormal} ease-in;
@@ -116,6 +116,6 @@ const SearchMarkerBackgroundRect = styled.rect`
   }
 `;
 
-const SearchMarkerForegroundRect = styled.rect`
+const SearchMarkerForegroundRect = euiStyled.rect`
   fill: ${props => props.theme.eui.euiColorSecondary};
 `;

x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx

@@ -6,7 +6,8 @@
 
 import { scaleTime } from 'd3-scale';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 
 interface TimeRulerProps {
   end: number;
@@ -43,13 +44,13 @@ export const TimeRuler: React.SFC<TimeRulerProps> = ({ end, height, start, tickC
 
 TimeRuler.displayName = 'TimeRuler';
 
-const TimeRulerTickLabel = styled.text`
+const TimeRulerTickLabel = euiStyled.text`
   font-size: ${props => props.theme.eui.euiFontSizeXS};
   line-height: ${props => props.theme.eui.euiLineHeight};
   fill: ${props => props.theme.eui.textColors.subdued};
 `;
 
-const TimeRulerGridLine = styled.line`
+const TimeRulerGridLine = euiStyled.line`
   stroke: ${props =>
     props.theme.darkMode ? props.theme.eui.euiColorDarkShade : props.theme.eui.euiColorMediumShade};
   stroke-dasharray: 2, 2;

x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx

@@ -8,7 +8,8 @@ import { EuiFieldSearch } from '@elastic/eui';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import classNames from 'classnames';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 
 interface LogSearchInputProps {
   className?: string;
@@ -76,7 +77,7 @@ export const LogSearchInput = injectI18n(
   }
 );
 
-const PlainSearchField = styled(EuiFieldSearch)`
+const PlainSearchField = euiStyled(EuiFieldSearch)`
   background: transparent;
   box-shadow: none;
 

x-pack/plugins/infra/public/components/logging/log_statusbar.tsx

@@ -5,9 +5,10 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import styled from 'styled-components';
 
-export const LogStatusbar = styled(EuiFlexGroup).attrs({
+import euiStyled from '../../../../../common/eui_styled_components';
+
+export const LogStatusbar = euiStyled(EuiFlexGroup).attrs({
   alignItems: 'center',
   gutterSize: 'none',
   justifyContent: 'flexEnd',

x-pack/plugins/infra/public/components/logging/log_text_stream/item_field.tsx

@@ -4,11 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import styled from 'styled-components';
-
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { switchProp } from '../../../utils/styles';
 
-export const LogTextStreamItemField = styled.div.attrs<{
+export const LogTextStreamItemField = euiStyled.div.attrs<{
   scale?: 'small' | 'medium' | 'large';
 }>({})`
   font-size: ${props =>

x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx

@@ -6,8 +6,8 @@
 
 import { darken, transparentize } from 'polished';
 import * as React from 'react';
-import styled, { css } from 'styled-components';
 
+import euiStyled, { css } from '../../../../../../common/eui_styled_components';
 import { TextScale } from '../../../../common/log_text_scale';
 import { tintOrShade } from '../../../utils/styles';
 import { LogTextStreamItemField } from './item_field';
@@ -69,7 +69,11 @@ const renderHighlightFragments = (text: string, highlights: string[]): React.Rea
 
 const highlightedFieldStyle = css`
   background-color: ${props =>
-    tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorSecondary, 0.15)};
+    tintOrShade(
+      props.theme.eui.euiTextColor as any, // workaround for incorrect upstream `tintOrShade` types
+      props.theme.eui.euiColorSecondary as any,
+      0.15
+    )};
 `;
 
 const hoveredFieldStyle = css`
@@ -104,7 +108,7 @@ const LogTextStreamItemMessageFieldWrapper = LogTextStreamItemField.extend.attrs
   ${props => (props.isWrapped ? wrappedFieldStyle : unwrappedFieldStyle)};
 `;
 
-const HighlightSpan = styled.span`
+const HighlightSpan = euiStyled.span`
   display: inline-block;
   background-color: ${props => props.theme.eui.euiColorSecondary};
   color: ${props => props.theme.eui.euiColorGhost};

x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx

@@ -7,7 +7,8 @@
 import { EuiButtonEmpty, EuiIcon, EuiProgress, EuiText } from '@elastic/eui';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
 import * as React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 
 interface LogTextStreamLoadingItemViewProps {
   alignment: 'top' | 'bottom';
@@ -136,13 +137,13 @@ class ProgressEntry extends React.PureComponent<ProgressEntryProps, {}> {
   }
 }
 
-const ProgressEntryWrapper = styled.div`
+const ProgressEntryWrapper = euiStyled.div`
   align-items: center;
   display: flex;
-  min-height: ${props => props.theme.eui.euiSizeXxl};
+  min-height: ${props => props.theme.eui.euiSizeXXL};
   position: relative;
 `;
 
-const ProgressMessage = styled.div`
+const ProgressMessage = euiStyled.div`
   padding: 8px 16px;
 `;

x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_item_view.tsx

@@ -6,10 +6,10 @@
 
 import { darken, transparentize } from 'polished';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { LogEntry } from '../../../../common/log_entry';
 import { SearchResult } from '../../../../common/log_search_result';
 import { TextScale } from '../../../../common/log_text_scale';
@@ -111,11 +111,11 @@ interface IconProps {
   isHovered: boolean;
 }
 
-const EmptyIcon = styled.div`
+const EmptyIcon = euiStyled.div`
   width: 24px;
 `;
 
-const LogTextStreamIconDiv = styled<IconProps, 'div'>('div')`
+const LogTextStreamIconDiv = euiStyled<IconProps, 'div'>('div')`
   flex-grow: 0;
   background-color: ${props =>
     props.isHovered
@@ -128,7 +128,7 @@ const LogTextStreamIconDiv = styled<IconProps, 'div'>('div')`
   font-size: 0.9em;
 `;
 
-const LogTextStreamLogEntryItemDiv = styled.div`
+const LogTextStreamLogEntryItemDiv = euiStyled.div`
   font-family: ${props => props.theme.eui.euiCodeFontFamily};
   font-size: ${props => props.theme.eui.euiFontSize};
   line-height: ${props => props.theme.eui.euiLineHeight};

x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_stream_item_view_.tsx

@@ -5,8 +5,8 @@
  */
 
 import * as React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { LogEntry } from '../../../../common/log_entry';
 
 interface LogEntryStreamItemViewProps {
@@ -25,7 +25,7 @@ export class LogEntryStreamItemView extends React.PureComponent<LogEntryStreamIt
   }
 }
 
-const LogEntryDiv = styled.div`
+const LogEntryDiv = euiStyled.div`
   border-top: 1px solid red;
   border-bottom: 1px solid green;
 `;

x-pack/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx

@@ -8,8 +8,8 @@ import { bisector } from 'd3-array';
 import sortBy from 'lodash/fp/sortBy';
 import throttle from 'lodash/fp/throttle';
 import * as React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { Rect } from './measurable_item_view';
 
 interface VerticalScrollPanelProps<Child> {
@@ -227,7 +227,7 @@ export class VerticalScrollPanel<Child> extends React.PureComponent<
   }
 }
 
-const ScrollPanelWrapper = styled.div.attrs<{ scrollbarOffset?: number }>({})`
+const ScrollPanelWrapper = euiStyled.div.attrs<{ scrollbarOffset?: number }>({})`
   overflow-x: hidden;
   overflow-y: scroll;
   position: relative;

x-pack/plugins/infra/public/components/logging/log_time_controls.tsx

@@ -8,7 +8,8 @@ import { EuiDatePicker, EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import moment, { Moment } from 'moment';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 
 const noop = () => undefined;
 
@@ -96,6 +97,6 @@ class LogTimeControlsUI extends React.PureComponent<LogTimeControlsProps> {
 
 export const LogTimeControls = injectI18n(LogTimeControlsUI);
 
-const InlineWrapper = styled.div`
+const InlineWrapper = euiStyled.div`
   display: inline-block;
 `;

x-pack/plugins/infra/public/components/metrics/invalid_node.tsx

@@ -7,7 +7,8 @@
 import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { WithSourceConfigurationFlyoutState } from '../../components/source_configuration/source_configuration_flyout_state';
 import { WithKibanaChrome } from '../../containers/with_kibana_chrome';
 
@@ -71,6 +72,6 @@ export const InvalidNodeError: React.SFC<InvalidNodeErrorProps> = ({ nodeName })
   </WithKibanaChrome>
 );
 
-const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
+const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
   align-self: center;
 `;

x-pack/plugins/infra/public/components/metrics/sections/gauges_section.tsx

@@ -15,7 +15,8 @@ import {
 } from '@elastic/eui';
 import { get, last, max } from 'lodash';
 import React, { ReactText } from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../../common/eui_styled_components';
 import { InfraMetricData } from '../../../graphql/types';
 import { InfraFormatterType } from '../../../lib/lib';
 import { InfraMetricLayoutSection } from '../../../pages/metrics/layouts/types';
@@ -96,7 +97,7 @@ export class GaugesSection extends React.PureComponent<Props> {
   }
 }
 
-const GroupBox = styled.div`
+const GroupBox = euiStyled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;

x-pack/plugins/infra/public/components/metrics/side_nav.tsx

@@ -4,14 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiHideFor, EuiPageSideBar, EuiShowFor, EuiSideNav } from '@elastic/eui';
+import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React from 'react';
 
-import styled from 'styled-components';
-
-import { EuiHideFor, EuiPageSideBar, EuiShowFor, EuiSideNav } from '@elastic/eui';
-
-import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
-
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraMetricLayout, InfraMetricLayoutSection } from '../../pages/metrics/layouts/types';
 
 interface Props {
@@ -73,7 +70,7 @@ export const MetricsSideNav = injectI18n(
   }
 );
 
-const SideNavContainer = styled.div`
+const SideNavContainer = euiStyled.div`
   position: fixed;
   z-index: 1;
   height: 88vh;

x-pack/plugins/infra/public/components/metrics/time_controls.tsx

@@ -8,11 +8,10 @@ import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/e
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment, { Moment } from 'moment';
 import React from 'react';
-import styled from 'styled-components';
-
-import { RangeDatePicker, RecentlyUsed } from '../range_date_picker';
 
+import euiStyled from '../../../../../common/eui_styled_components';
 import { metricTimeActions } from '../../store';
+import { RangeDatePicker, RecentlyUsed } from '../range_date_picker';
 
 interface MetricsTimeControlsProps {
   currentTimeRange: metricTimeActions.MetricRangeTimeState;
@@ -219,7 +218,8 @@ export class MetricsTimeControls extends React.Component<
     }
   };
 }
-const MetricsTimeControlsContainer = styled.div`
+
+const MetricsTimeControlsContainer = euiStyled.div`
   display: flex;
   justify-content: right;
   flex-flow: row wrap;

x-pack/plugins/infra/public/components/nodes_overview/index.tsx

@@ -8,8 +8,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { get, max, min } from 'lodash';
 import React from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../common/eui_styled_components';
 import {
   InfraMetricType,
   InfraNode,
@@ -206,20 +206,20 @@ export const NodesOverview = injectI18n(
   }
 );
 
-const MainContainer = styled.div`
+const MainContainer = euiStyled.div`
   position: relative;
   flex: 1 1 auto;
 `;
 
-const TableContainer = styled.div`
+const TableContainer = euiStyled.div`
   padding: ${props => props.theme.eui.paddingSizes.l};
 `;
 
-const ViewSwitcherContainer = styled.div`
+const ViewSwitcherContainer = euiStyled.div`
   padding: ${props => props.theme.eui.paddingSizes.l};
 `;
 
-const MapContainer = styled.div`
+const MapContainer = euiStyled.div`
   position: absolute;
   display: flex;
   top: 0;

x-pack/plugins/infra/public/components/page.tsx

@@ -5,22 +5,23 @@
  */
 
 import { EuiPage } from '@elastic/eui';
-import styled from 'styled-components';
 
-export const ColumnarPage = styled.div`
+import euiStyled from '../../../../common/eui_styled_components';
+
+export const ColumnarPage = euiStyled.div`
   display: flex;
   flex-direction: column;
   align-items: stretch;
   flex: 1 0 0%;
 `;
 
-export const PageContent = styled.div`
+export const PageContent = euiStyled.div`
   flex: 1 0 0%;
   display: flex;
   flex-direction: row;
   background-color: ${props => props.theme.eui.euiColorEmptyShade};
 `;
 
-export const FlexPage = styled(EuiPage)`
+export const FlexPage = euiStyled(EuiPage)`
   flex: 1 0 0%;
 `;

x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx

@@ -5,7 +5,8 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import {
   InfraFormatter,
   InfraWaffleMapBounds,
@@ -52,7 +53,7 @@ export const GradientLegend: React.SFC<Props> = ({ legend, bounds, formatter })
   );
 };
 
-const GradientLegendContainer = styled.div`
+const GradientLegendContainer = euiStyled.div`
   position: absolute;
   height: 10px;
   bottom: 0;
@@ -60,13 +61,13 @@ const GradientLegendContainer = styled.div`
   right: 40px;
 `;
 
-const GradientLegendTick = styled.div`
+const GradientLegendTick = euiStyled.div`
   position: absolute;
   bottom: 0;
   top: -18px;
 `;
 
-const GradientLegendTickLine = styled.div`
+const GradientLegendTickLine = euiStyled.div`
   position: absolute;
   background-color: ${props => props.theme.eui.euiBorderColor};
   width: 1px;
@@ -81,7 +82,7 @@ const GradientLegendTickLine = styled.div`
   }
 `;
 
-const GradientLegendTickLabel = styled.div`
+const GradientLegendTickLabel = euiStyled.div`
   position: absolute;
   font-size: 11px;
   text-align: center;

x-pack/plugins/infra/public/components/waffle/group_name.tsx

@@ -5,7 +5,8 @@
  */
 import { EuiLink, EuiToolTip } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraPathType } from '../../graphql/types';
 import { InfraWaffleMapGroup, InfraWaffleMapOptions } from '../../lib/lib';
 
@@ -58,7 +59,7 @@ export class GroupName extends React.PureComponent<Props, {}> {
   };
 }
 
-const GroupNameContainer = styled.div`
+const GroupNameContainer = euiStyled.div`
   position: relative;
   text-align: center
   font-size: 16px;
@@ -73,7 +74,7 @@ interface InnerProps {
   isChild?: boolean;
 }
 
-const Inner = styled<InnerProps, 'div'>('div')`
+const Inner = euiStyled<InnerProps, 'div'>('div')`
   border: 1px solid ${props => props.theme.eui.euiBorderColor};
   background-color: ${props =>
     props.isChild ? props.theme.eui.euiColorLightestShade : props.theme.eui.euiColorEmptyShade};
@@ -85,7 +86,7 @@ const Inner = styled<InnerProps, 'div'>('div')`
   overflow: hidden;
 `;
 
-const Name = styled.div`
+const Name = euiStyled.div`
   flex: 1 1 auto;
   padding: 6px 10px;
   overflow: hidden;
@@ -93,7 +94,7 @@ const Name = styled.div`
   white-space: nowrap;
 `;
 
-const Count = styled.div`
+const Count = euiStyled.div`
   flex: 0 0 auto;
   border-left: 1px solid ${props => props.theme.eui.euiBorderColor};
   padding: 6px 10px;

x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx

@@ -5,7 +5,8 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraNodeType, InfraTimerangeInput } from '../../graphql/types';
 import {
   InfraWaffleMapBounds,
@@ -48,11 +49,11 @@ export const GroupOfGroups: React.SFC<Props> = props => {
   );
 };
 
-const GroupOfGroupsContainer = styled.div`
+const GroupOfGroupsContainer = euiStyled.div`
   margin: 0 10px;
 `;
 
-const Groups = styled.div`
+const Groups = euiStyled.div`
   display: flex;
   background-color: rgba(0, 0, 0, 0.05);
   flex-wrap: wrap;

x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx

@@ -5,7 +5,8 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraNodeType, InfraTimerangeInput } from '../../graphql/types';
 import {
   InfraWaffleMapBounds,
@@ -58,11 +59,11 @@ export const GroupOfNodes: React.SFC<Props> = ({
   );
 };
 
-const GroupOfNodesContainer = styled.div`
+const GroupOfNodesContainer = euiStyled.div`
   margin: 0 10px;
 `;
 
-const Nodes = styled.div`
+const Nodes = euiStyled.div`
   display: flex;
   background-color: rgba(0, 0, 0, 0.05);
   flex-wrap: wrap;

x-pack/plugins/infra/public/components/waffle/legend.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options';
 import { InfraFormatter, InfraWaffleMapBounds, InfraWaffleMapLegend } from '../../lib/lib';
 import { GradientLegend } from './gradient_legend';
@@ -48,7 +49,7 @@ export const Legend: React.SFC<Props> = ({ dataBounds, legend, bounds, formatter
   );
 };
 
-const LegendContainer = styled.div`
+const LegendContainer = euiStyled.div`
   position: absolute;
   bottom: 10px;
   left: 10px;

x-pack/plugins/infra/public/components/waffle/legend_controls.tsx

@@ -19,7 +19,8 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React, { SyntheticEvent, useState } from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraWaffleMapBounds } from '../../lib/lib';
 
 interface Props {
@@ -162,7 +163,7 @@ export const LegendControls = injectI18n(
   }
 );
 
-const ControlContainer = styled.div`
+const ControlContainer = euiStyled.div`
   position: absolute;
   top: -20px;
   right: 6px;

x-pack/plugins/infra/public/components/waffle/map.tsx

@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import { nodesToWaffleMap } from '../../containers/waffle/nodes_to_wafflemap';
 import {
   isWaffleMapGroupWithGroups,
@@ -95,7 +96,7 @@ export const Map: React.SFC<Props> = ({
   );
 };
 
-const WaffleMapOuterContainer = styled.div`
+const WaffleMapOuterContainer = euiStyled.div`
   flex: 1 0 0%;
   display: flex;
   justify-content: center;
@@ -104,7 +105,7 @@ const WaffleMapOuterContainer = styled.div`
   overflow-y: auto;
 `;
 
-const WaffleMapInnerContainer = styled.div`
+const WaffleMapInnerContainer = euiStyled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

x-pack/plugins/infra/public/components/waffle/node.tsx

@@ -8,9 +8,9 @@ import { EuiToolTip } from '@elastic/eui';
 import moment from 'moment';
 import { darken, readableColor } from 'polished';
 import React from 'react';
-import styled from 'styled-components';
 
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import euiStyled from '../../../../../common/eui_styled_components';
 import { InfraNodeType } from '../../../server/lib/adapters/nodes';
 import { InfraTimerangeInput } from '../../graphql/types';
 import { InfraWaffleMapBounds, InfraWaffleMapNode, InfraWaffleMapOptions } from '../../lib/lib';
@@ -116,7 +116,7 @@ export const Node = injectI18n(
   }
 );
 
-const NodeContainer = styled.div`
+const NodeContainer = euiStyled.div`
   position: relative;
 `;
 
@@ -124,7 +124,7 @@ interface ColorProps {
   color: string;
 }
 
-const SquareOuter = styled<ColorProps, 'div'>('div')`
+const SquareOuter = euiStyled<ColorProps, 'div'>('div')`
   position: absolute;
   top: 4px;
   left: 4px;
@@ -135,7 +135,7 @@ const SquareOuter = styled<ColorProps, 'div'>('div')`
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 `;
 
-const SquareInner = styled<ColorProps, 'div'>('div')`
+const SquareInner = euiStyled<ColorProps, 'div'>('div')`
   cursor: pointer;
   position: absolute;
   top: 0;
@@ -146,7 +146,7 @@ const SquareInner = styled<ColorProps, 'div'>('div')`
   background-color: ${props => props.color};
 `;
 
-const ValueInner = styled.button`
+const ValueInner = euiStyled.button`
   position: absolute;
   top: 0;
   left: 0;
@@ -169,7 +169,7 @@ const ValueInner = styled.button`
   }
 `;
 
-const Value = styled<ColorProps, 'div'>('div')`
+const Value = euiStyled<ColorProps, 'div'>('div')`
   font-weight: bold;
   font-size: 0.9em;
   text-align: center;
@@ -179,7 +179,7 @@ const Value = styled<ColorProps, 'div'>('div')`
   color: ${props => readableColor(props.color)};
 `;
 
-const Label = styled<ColorProps, 'div'>('div')`
+const Label = euiStyled<ColorProps, 'div'>('div')`
   text-overflow: ellipsis;
   font-size: 0.7em;
   margin-bottom: 0.7em;

x-pack/plugins/infra/public/components/waffle/steps_legend.tsx

@@ -6,7 +6,8 @@
 
 import { darken } from 'polished';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../../common/eui_styled_components';
 import {
   InfraFormatter,
   InfraWaffleMapRuleOperator,
@@ -46,18 +47,18 @@ export const StepLegend: React.SFC<Props> = ({ legend, formatter }) => {
   return <StepLegendContainer>{legend.rules.map(createStep(formatter))}</StepLegendContainer>;
 };
 
-const StepLegendContainer = styled.div`
+const StepLegendContainer = euiStyled.div`
   display: flex;
   padding: 10px 40px 10px 10px;
 `;
 
-const StepContainer = styled.div`
+const StepContainer = euiStyled.div`
   display: flex;
   margin-right: 20px
   align-items: center;
 `;
 
-const StepSquare = styled.div`
+const StepSquare = euiStyled.div`
   position: relative;
   width: 24px;
   height: 24px;
@@ -67,7 +68,7 @@ const StepSquare = styled.div`
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
 `;
 
-const StepSquareInner = styled.div`
+const StepSquareInner = euiStyled.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -76,6 +77,6 @@ const StepSquareInner = styled.div`
   border-radius: 3px;
 `;
 
-const StepLabel = styled.div`
+const StepLabel = euiStyled.div`
   font-size: 12px;
 `;

x-pack/plugins/infra/public/pages/error.tsx

@@ -14,11 +14,12 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
-import styled from 'styled-components';
+
+import euiStyled from '../../../../common/eui_styled_components';
 import { Header } from '../components/header';
 import { ColumnarPage, PageContent } from '../components/page';
 
-const DetailPageContent = styled(PageContent)`
+const DetailPageContent = euiStyled(PageContent)`
   overflow: auto;
   background-color: ${props => props.theme.eui.euiColorLightestShade};
 `;

x-pack/plugins/infra/public/pages/logs/page_content.tsx

@@ -5,8 +5,8 @@
  */
 
 import React, { useContext } from 'react';
-import styled from 'styled-components';
 
+import euiStyled from '../../../../../common/eui_styled_components';
 import { AutoSizer } from '../../components/auto_sizer';
 import { LogMinimap } from '../../components/logging/log_minimap';
 import { ScrollableLogTextStreamView } from '../../components/logging/log_text_stream';
@@ -101,14 +101,14 @@ export const LogsPageContent: React.FunctionComponent<Props> = ({ showFlyout, se
   );
 };
 
-const LogPageEventStreamColumn = styled.div`
+const LogPageEventStreamColumn = euiStyled.div`
   flex: 1 0 0%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 `;
 
-const LogPageMinimapColumn = styled.div`
+const LogPageMinimapColumn = euiStyled.div`
   flex: 1 0 0%;
   overflow: hidden;
   min-width: 100px;

x-pack/plugins/infra/public/pages/metrics/index.tsx

@@ -16,8 +16,8 @@ import {
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { GraphQLFormattedError } from 'graphql';
 import React from 'react';
-import styled, { withTheme } from 'styled-components';
 
+import euiStyled, { EuiTheme, withTheme } from '../../../../../common/eui_styled_components';
 import { InfraMetricsErrorCodes } from '../../../common/errors';
 import { AutoSizer } from '../../components/auto_sizer';
 import { DocumentTitle } from '../../components/document_title';
@@ -40,17 +40,17 @@ import { Error, ErrorPageBody } from '../error';
 import { layoutCreators } from './layouts';
 import { InfraMetricLayoutSection } from './layouts/types';
 
-const DetailPageContent = styled(PageContent)`
+const DetailPageContent = euiStyled(PageContent)`
   overflow: auto;
   background-color: ${props => props.theme.eui.euiColorLightestShade};
 `;
 
-const EuiPageContentWithRelative = styled(EuiPageContent)`
+const EuiPageContentWithRelative = euiStyled(EuiPageContent)`
   position: relative;
 `;
 
 interface Props {
-  theme: { eui: any };
+  theme: EuiTheme;
   match: {
     params: {
       type: string;
@@ -250,13 +250,13 @@ export const MetricDetail = withTheme(
   )
 );
 
-const MetricsDetailsPageColumn = styled.div`
+const MetricsDetailsPageColumn = euiStyled.div`
   flex: 1 0 0%;
   display: flex;
   flex-direction: column;
 `;
 
-const MetricsTitleTimeRangeContainer = styled.div`
+const MetricsTitleTimeRangeContainer = euiStyled.div`
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;

x-pack/plugins/infra/public/pages/metrics/layouts/types.ts

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { EuiTheme } from '../../../../../../common/eui_styled_components';
 import { InfraMetric } from '../../../graphql/types';
 import { InfraFormatterType } from '../../../lib/lib';
 
@@ -54,4 +55,4 @@ export interface InfraMetricLayout {
   sections: InfraMetricLayoutSection[];
 }
 
-export type InfraMetricLayoutCreator = (theme: { eui: any }) => InfraMetricLayout[];
+export type InfraMetricLayoutCreator = (theme: EuiTheme) => InfraMetricLayout[];