Use EUI variables in favor of APM style variables (#104016) (#104204)

Remove many of the variables in style/variables and replace them with EUI theme equivalents.

* Remove all the `units.x` (double, triple, etc.) variables. They were used in few places.
* Remove `px(x)` and just use `${x}px`. Many of its uses were not necessary.
* Remove `pct(x)`; it was only used in one place.
* Allow `truncate` to take a string or number and use `px` when given a number.
* Move the remaining helpers (`unit` and `truncate`) to `utils/style`.
* Some very contrived unit-based constants (`${px(units.unit + units.half + units.quarter)}`) replaced with hard-coded pixel values (`28px`).
* Move shared/charts/Legend to shared/charts/Timeline/legend since that's the only place it's used.
* Import organization and file renaming according to conventions.
* Rename `WaterfallWithSummmary` to `WaterfallWithSummary`.
* Remove unused `HttpContext` component from span flyout directory.
* Clean up some Storybook path names

There should be no visible style changes anywhere in the app; it's all refactoring.

Fixes #90930.

Co-authored-by: Nathan L Smith <nathan.smith@elastic.co>

x-pack/plugins/apm/kibana.json

@@ -28,13 +28,7 @@
   ],
   "server": true,
   "ui": true,
-  "configPath": [
-    "xpack",
-    "apm"
-  ],
-  "extraPublicDirs": [
-    "public/style/variables"
-  ],
+  "configPath": ["xpack", "apm"],
   "requiredBundles": [
     "home",
     "kibanaReact",
@@ -43,4 +37,4 @@
     "ml",
     "observability"
   ]
-}
+}

x-pack/plugins/apm/public/components/alerting/transaction_duration_alert_trigger/index.stories.tsx

@@ -17,7 +17,7 @@ import {
 import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
 
 export default {
-  title: 'app/TransactionDurationAlertTrigger',
+  title: 'alerting/TransactionDurationAlertTrigger',
   component: TransactionDurationAlertTrigger,
   decorators: [
     (Story: ComponentType) => {
@@ -26,7 +26,7 @@ export default {
           http: {
             get: (endpoint: string) => {
               if (endpoint === '/api/apm/environments') {
-                return Promise.resolve(['production']);
+                return Promise.resolve({ environments: ['production'] });
               } else {
                 return Promise.resolve({
                   transactionTypes: ['request'],

x-pack/plugins/apm/public/components/app/Settings/agent_configurations/List/index.tsx

@@ -22,13 +22,12 @@ import { getOptionLabel } from '../../../../../../common/agent_configuration/all
 import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context';
 import { FETCH_STATUS } from '../../../../../hooks/use_fetcher';
 import { useTheme } from '../../../../../hooks/use_theme';
-import { px, units } from '../../../../../style/variables';
 import {
   createAgentConfigurationHref,
   editAgentConfigurationHref,
 } from '../../../../shared/Links/apm/agentConfigurationLinks';
 import { LoadingStatePrompt } from '../../../../shared/LoadingStatePrompt';
-import { ITableColumn, ManagedTable } from '../../../../shared/ManagedTable';
+import { ITableColumn, ManagedTable } from '../../../../shared/managed_table';
 import { TimestampTooltip } from '../../../../shared/TimestampTooltip';
 import { ConfirmDeleteModal } from './ConfirmDeleteModal';
 
@@ -125,7 +124,7 @@ export function AgentConfigurationList({
     {
       field: 'applied_by_agent',
       align: 'center',
-      width: px(units.double),
+      width: theme.eui.euiSizeXL,
       name: '',
       sortable: true,
       render: (isApplied: boolean) => (
@@ -190,7 +189,7 @@ export function AgentConfigurationList({
     ...(canSave
       ? [
           {
-            width: px(units.double),
+            width: theme.eui.euiSizeXL,
             name: '',
             render: (config: Config) => (
               <EuiButtonIcon
@@ -205,7 +204,7 @@ export function AgentConfigurationList({
             ),
           },
           {
-            width: px(units.double),
+            width: theme.eui.euiSizeXL,
             name: '',
             render: (config: Config) => (
               <EuiButtonIcon

x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/jobs_list.tsx

@@ -21,7 +21,7 @@ import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { MLExplorerLink } from '../../../shared/Links/MachineLearningLinks/MLExplorerLink';
 import { MLManageJobsLink } from '../../../shared/Links/MachineLearningLinks/MLManageJobsLink';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
-import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
+import { ITableColumn, ManagedTable } from '../../../shared/managed_table';
 import { AnomalyDetectionApiResponse } from './index';
 import { LegacyJobsCallout } from './legacy_jobs_callout';
 

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/DeleteButton.test.tsx

@@ -6,26 +6,37 @@
  */
 
 import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { act } from 'react-dom/test-utils';
+import { EuiThemeProvider } from '../../../../../../../../../../src/plugins/kibana_react/common';
 import { MockApmPluginContextWrapper } from '../../../../../../context/apm_plugin/mock_apm_plugin_context';
 import * as apmApi from '../../../../../../services/rest/createCallApmApi';
 import { DeleteButton } from './DeleteButton';
 
-describe('Delete custom link', () => {
+function Wrapper({ children }: { children?: ReactNode }) {
+  return (
+    <EuiThemeProvider>
+      <MockApmPluginContextWrapper>{children}</MockApmPluginContextWrapper>
+    </EuiThemeProvider>
+  );
+}
+
+describe('DeleteButton', () => {
   beforeAll(() => {
     jest.spyOn(apmApi, 'callApmApi').mockResolvedValue({});
   });
+
   it('deletes a custom link', async () => {
     const onDeleteMock = jest.fn();
     const { getByText } = render(
-      <MockApmPluginContextWrapper>
-        <DeleteButton onDelete={onDeleteMock} customLinkId="1" />
-      </MockApmPluginContextWrapper>
+      <DeleteButton onDelete={onDeleteMock} customLinkId="1" />,
+      { wrapper: Wrapper }
     );
+
     await act(async () => {
       fireEvent.click(getByText('Delete'));
     });
+
     expect(onDeleteMock).toHaveBeenCalledTimes(1);
   });
 });

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/DeleteButton.tsx

@@ -9,9 +9,9 @@ import { EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { NotificationsStart } from 'kibana/public';
 import React, { useState } from 'react';
-import { px, unit } from '../../../../../../style/variables';
 import { callApmApi } from '../../../../../../services/rest/createCallApmApi';
 import { useApmPluginContext } from '../../../../../../context/apm_plugin/use_apm_plugin_context';
+import { useTheme } from '../../../../../../hooks/use_theme';
 
 interface Props {
   onDelete: () => void;
@@ -21,6 +21,7 @@ interface Props {
 export function DeleteButton({ onDelete, customLinkId }: Props) {
   const [isDeleting, setIsDeleting] = useState(false);
   const { toasts } = useApmPluginContext().core.notifications;
+  const theme = useTheme();
 
   return (
     <EuiButtonEmpty
@@ -33,7 +34,7 @@ export function DeleteButton({ onDelete, customLinkId }: Props) {
         setIsDeleting(false);
         onDelete();
       }}
-      style={{ marginRight: px(unit) }}
+      style={{ marginRight: theme.eui.euiSize }}
     >
       {i18n.translate('xpack.apm.settings.customizeUI.customLink.delete', {
         defaultMessage: 'Delete',

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/create_edit_custom_link_flyout/helper.test.ts

@@ -8,7 +8,7 @@
 import {
   getSelectOptions,
   replaceTemplateVariables,
-} from '../CreateEditCustomLinkFlyout/helper';
+} from '../create_edit_custom_link_flyout/helper';
 import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction';
 
 describe('Custom link helper', () => {

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/custom_link_table.tsx

@@ -5,22 +5,21 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
-import { i18n } from '@kbn/i18n';
 import {
   EuiFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiText,
   EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
-import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context';
+import React, { useState } from 'react';
 import { CustomLink } from '../../../../../../common/custom_link/custom_link_types';
-import { units, px } from '../../../../../style/variables';
-import { ManagedTable } from '../../../../shared/ManagedTable';
-import { TimestampTooltip } from '../../../../shared/TimestampTooltip';
+import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context';
 import { LoadingStatePrompt } from '../../../../shared/LoadingStatePrompt';
+import { ManagedTable } from '../../../../shared/managed_table';
+import { TimestampTooltip } from '../../../../shared/TimestampTooltip';
 
 interface Props {
   items: CustomLink[];
@@ -50,7 +49,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
       truncateText: true,
     },
     {
-      width: px(160),
+      width: 160,
       align: 'right',
       field: '@timestamp',
       name: i18n.translate(
@@ -63,7 +62,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
       ),
     },
     {
-      width: px(units.triple),
+      width: '48px',
       name: '',
       actions: [
         ...(canSave

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/index.test.tsx

@@ -22,7 +22,7 @@ import {
   expectTextsInDocument,
   expectTextsNotInDocument,
 } from '../../../../../utils/testHelpers';
-import * as saveCustomLink from './CreateEditCustomLinkFlyout/saveCustomLink';
+import * as saveCustomLink from './create_edit_custom_link_flyout/saveCustomLink';
 
 const data = {
   customLinks: [

x-pack/plugins/apm/public/components/app/Settings/customize_ui/custom_link/index.tsx

@@ -8,21 +8,21 @@
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
-  EuiText,
   EuiSpacer,
+  EuiText,
+  EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { INVALID_LICENSE } from '../../../../../../common/custom_link';
 import { CustomLink } from '../../../../../../common/custom_link/custom_link_types';
-import { FETCH_STATUS, useFetcher } from '../../../../../hooks/use_fetcher';
 import { useLicenseContext } from '../../../../../context/license/use_license_context';
+import { FETCH_STATUS, useFetcher } from '../../../../../hooks/use_fetcher';
 import { LicensePrompt } from '../../../../shared/license_prompt';
 import { CreateCustomLinkButton } from './CreateCustomLinkButton';
-import { CreateEditCustomLinkFlyout } from './CreateEditCustomLinkFlyout';
-import { CustomLinkTable } from './CustomLinkTable';
+import { CreateEditCustomLinkFlyout } from './create_edit_custom_link_flyout';
+import { CustomLinkTable } from './custom_link_table';
 import { EmptyPrompt } from './EmptyPrompt';
 
 export function CustomLinkOverview() {

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { CustomLinkOverview } from './CustomLink';
+import { CustomLinkOverview } from './custom_link';
 
 export function CustomizeUI() {
   return <CustomLinkOverview />;

x-pack/plugins/apm/public/components/app/correlations/error_correlations.tsx

@@ -6,33 +6,32 @@
  */
 
 import {
-  ScaleType,
-  Chart,
-  LineSeries,
   Axis,
+  Chart,
   CurveType,
+  LineSeries,
   Position,
-  timeFormatter,
+  ScaleType,
   Settings,
+  timeFormatter,
 } from '@elastic/charts';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
+import { useUiTracker } from '../../../../../observability/public';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
+import { useTheme } from '../../../hooks/use_theme';
 import { APIReturnType } from '../../../services/rest/createCallApmApi';
-import { px } from '../../../style/variables';
+import { ChartContainer } from '../../shared/charts/chart_container';
 import {
   CorrelationsTable,
   SelectedSignificantTerm,
 } from './correlations_table';
-import { ChartContainer } from '../../shared/charts/chart_container';
-import { useTheme } from '../../../hooks/use_theme';
 import { CustomFields } from './custom_fields';
 import { useFieldNames } from './use_field_names';
-import { useLocalStorage } from '../../../hooks/useLocalStorage';
-import { useUiTracker } from '../../../../../observability/public';
 
 type OverallErrorsApiResponse = NonNullable<
   APIReturnType<'GET /api/apm/correlations/errors/overall_timeseries'>
@@ -221,7 +220,7 @@ function ErrorTimeseriesChart({
 
   return (
     <ChartContainer height={200} hasData={!!overallData} status={status}>
-      <Chart size={{ height: px(200), width: '100%' }}>
+      <Chart size={{ height: 200, width: '100%' }}>
         <Settings showLegend legendPosition={Position.Bottom} />
 
         <Axis

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

@@ -39,7 +39,7 @@ import { IUrlParams } from '../../../context/url_params_context/types';
 import {
   IStickyProperty,
   StickyProperties,
-} from '../../shared/StickyProperties';
+} from '../../shared/sticky_properties';
 import {
   getEnvironmentLabel,
   getNextEnvironmentUrlParam,

x-pack/plugins/apm/public/components/app/error_group_details/detail_view/exception_stacktrace.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import React from 'react';
 import { EuiTitle } from '@elastic/eui';
+import React from 'react';
 import { Exception } from '../../../../../typings/es_schemas/raw/error_raw';
 import { Stacktrace } from '../../../shared/Stacktrace';
-import { CauseStacktrace } from '../../../shared/Stacktrace/CauseStacktrace';
+import { CauseStacktrace } from '../../../shared/Stacktrace/cause_stacktrace';
 
 interface ExceptionStacktraceProps {
   codeLanguage?: string;

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

@@ -23,14 +23,13 @@ import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/comm
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
 import type { IUrlParams } from '../../../../context/url_params_context/types';
-import { px, unit, units } from '../../../../style/variables';
 import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
 import { DiscoverErrorLink } from '../../../shared/Links/DiscoverLinks/DiscoverErrorLink';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
 import { ErrorMetadata } from '../../../shared/MetadataTable/ErrorMetadata';
 import { Stacktrace } from '../../../shared/Stacktrace';
 import { Summary } from '../../../shared/Summary';
-import { HttpInfoSummaryItem } from '../../../shared/Summary/HttpInfoSummaryItem';
+import { HttpInfoSummaryItem } from '../../../shared/Summary/http_info_summary_item';
 import { UserAgentSummaryItem } from '../../../shared/Summary/UserAgentSummaryItem';
 import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 import {
@@ -45,11 +44,11 @@ const HeaderContainer = euiStyled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: ${px(unit)};
+  margin-bottom: ${({ theme }) => theme.eui.euiSize};
 `;
 
 const TransactionLinkName = euiStyled.div`
-  margin-left: ${px(units.half)};
+  margin-left: ${({ theme }) => theme.eui.euiSizeS};
   display: inline-block;
   vertical-align: middle;
 `;

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

@@ -19,32 +19,31 @@ import React from 'react';
 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';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
-import { DetailView } from './DetailView';
-import { ErrorDistribution } from './Distribution';
 import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
+import { useFetcher } from '../../../hooks/use_fetcher';
+import { DetailView } from './detail_view';
+import { ErrorDistribution } from './Distribution';
 
 const Titles = euiStyled.div`
-  margin-bottom: ${px(units.plus)};
+  margin-bottom: ${({ theme }) => theme.eui.euiSizeL};
 `;
 
 const Label = euiStyled.div`
-  margin-bottom: ${px(units.quarter)};
-  font-size: ${fontSizes.small};
+  margin-bottom: ${({ theme }) => theme.eui.euiSizeXS};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
   color: ${({ theme }) => theme.eui.euiColorDarkShade};
 `;
 
 const Message = euiStyled.div`
-  font-family: ${fontFamilyCode};
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
   font-weight: bold;
-  font-size: ${fontSizes.large};
-  margin-bottom: ${px(units.half)};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeM};
+  margin-bottom: ${({ theme }) => theme.eui.euiSizeS};
 `;
 
 const Culprit = euiStyled.div`
-  font-family: ${fontFamilyCode};
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
 `;
 
 function getShortGroupId(errorGroupId?: string) {

x-pack/plugins/apm/public/components/app/error_group_overview/List/List.test.tsx

@@ -13,6 +13,7 @@ import { mockMoment, toJson } from '../../../../utils/testHelpers';
 import { ErrorGroupList } from './index';
 import props from './__fixtures__/props.json';
 import { MemoryRouter } from 'react-router-dom';
+import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
 
 jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
   return {
@@ -41,13 +42,18 @@ describe('ErrorGroupOverview -> List', () => {
 
   it('should render with data', () => {
     const wrapper = mount(
-      <MemoryRouter>
-        <MockApmPluginContextWrapper>
-          <MockUrlParamsContextProvider>
-            <ErrorGroupList items={props.items} serviceName="opbeans-python" />
-          </MockUrlParamsContextProvider>
-        </MockApmPluginContextWrapper>
-      </MemoryRouter>
+      <EuiThemeProvider>
+        <MemoryRouter>
+          <MockApmPluginContextWrapper>
+            <MockUrlParamsContextProvider>
+              <ErrorGroupList
+                items={props.items}
+                serviceName="opbeans-python"
+              />
+            </MockUrlParamsContextProvider>
+          </MockApmPluginContextWrapper>
+        </MemoryRouter>
+      </EuiThemeProvider>
     );
 
     expect(toJson(wrapper)).toMatchSnapshot();

x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap

@@ -268,7 +268,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
 
 exports[`ErrorGroupOverview -> List should render with data 1`] = `
 .c0 {
-  font-family: "Roboto Mono",Consolas,Menlo,Courier,monospace;
+  font-family: 'Roboto Mono','Consolas','Menlo','Courier',monospace;
 }
 
 .c2 {
@@ -286,8 +286,8 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
 }
 
 .c3 {
-  font-family: "Roboto Mono",Consolas,Menlo,Courier,monospace;
-  font-size: 16px;
+  font-family: 'Roboto Mono','Consolas','Menlo','Courier',monospace;
+  font-size: 18px;
   max-width: 100%;
   white-space: nowrap;
   overflow: hidden;
@@ -295,7 +295,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
 }
 
 .c4 {
-  font-family: "Roboto Mono",Consolas,Menlo,Courier,monospace;
+  font-family: 'Roboto Mono','Consolas','Menlo','Courier',monospace;
 }
 
 <div

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

@@ -5,30 +5,23 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiToolTip } from '@elastic/eui';
+import { EuiBadge, EuiIconTip, EuiToolTip } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
-import { EuiIconTip } from '@elastic/eui';
 import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
-import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
-import {
-  fontFamilyCode,
-  fontSizes,
-  px,
-  truncate,
-  unit,
-} from '../../../../style/variables';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
-import { ManagedTable } from '../../../shared/ManagedTable';
+import { APIReturnType } from '../../../../services/rest/createCallApmApi';
+import { truncate, unit } from '../../../../utils/style';
 import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink';
-import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 import { ErrorOverviewLink } from '../../../shared/Links/apm/ErrorOverviewLink';
 import { APMQueryParams } from '../../../shared/Links/url_helpers';
+import { ManagedTable } from '../../../shared/managed_table';
+import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 
 const GroupIdLink = euiStyled(ErrorDetailLink)`
-  font-family: ${fontFamilyCode};
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
 `;
 
 const MessageAndCulpritCell = euiStyled.div`
@@ -40,13 +33,13 @@ const ErrorLink = euiStyled(ErrorOverviewLink)`
 `;
 
 const MessageLink = euiStyled(ErrorDetailLink)`
-  font-family: ${fontFamilyCode};
-  font-size: ${fontSizes.large};
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeM};
   ${truncate('100%')};
 `;
 
 const Culprit = euiStyled.div`
-  font-family: ${fontFamilyCode};
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
 `;
 
 type ErrorGroupItem = APIReturnType<'GET /api/apm/services/{serviceName}/errors'>['errorGroups'][0];
@@ -86,7 +79,7 @@ function ErrorGroupList({ items, serviceName }: Props) {
         ),
         field: 'groupId',
         sortable: false,
-        width: px(unit * 6),
+        width: unit * 6,
         render: (groupId: string) => {
           return (
             <GroupIdLink serviceName={serviceName} errorGroupId={groupId}>

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

@@ -18,7 +18,7 @@ import { useTrackPageview } from '../../../../../observability/public';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
+import { ErrorDistribution } from '../error_group_details/Distribution';
 import { ErrorGroupList } from './List';
 
 interface ErrorGroupOverviewProps {

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

@@ -18,8 +18,8 @@ import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { useUpgradeAssistantHref } from '../../shared/Links/kibana';
 import { SearchBar } from '../../shared/search_bar';
 import { NoServicesMessage } from './no_services_message';
-import { ServiceList } from './ServiceList';
-import { MLCallout } from './ServiceList/MLCallout';
+import { ServiceList } from './service_list';
+import { MLCallout } from './service_list/MLCallout';
 
 const initialData = {
   items: [],

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

@@ -5,31 +5,35 @@
  * 2.0.
  */
 
-import { EuiFlexItem, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiToolTip,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { orderBy } from 'lodash';
 import React, { useMemo } from 'react';
 import { ValuesType } from 'utility-types';
-import { orderBy } from 'lodash';
-import { EuiIcon } from '@elastic/eui';
-import { EuiText } from '@elastic/eui';
 import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
+import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
+import { ServiceHealthStatus } from '../../../../../common/service_health_status';
 import {
   TRANSACTION_PAGE_LOAD,
   TRANSACTION_REQUEST,
 } from '../../../../../common/transaction_types';
-import { APIReturnType } from '../../../../services/rest/createCallApmApi';
-import { ServiceHealthStatus } from '../../../../../common/service_health_status';
 import {
-  asPercent,
   asMillisecondDuration,
+  asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
-import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
-import { fontSizes, px, truncate, unit } from '../../../../style/variables';
-import { ManagedTable, ITableColumn } from '../../../shared/ManagedTable';
+import { APIReturnType } from '../../../../services/rest/createCallApmApi';
+import { truncate, unit } from '../../../../utils/style';
+import { AgentIcon } from '../../../shared/agent_icon';
 import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
 import { ServiceOrTransactionsOverviewLink } from '../../../shared/Links/apm/service_transactions_overview_link';
-import { AgentIcon } from '../../../shared/agent_icon';
+import { ITableColumn, ManagedTable } from '../../../shared/managed_table';
 import { HealthBadge } from './HealthBadge';
 import { ServiceListMetric } from './ServiceListMetric';
 
@@ -47,7 +51,7 @@ function formatString(value?: string | null) {
 }
 
 const AppLink = euiStyled(ServiceOrTransactionsOverviewLink)`
-  font-size: ${fontSizes.large};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeM}
   ${truncate('100%')};
 `;
 
@@ -80,7 +84,7 @@ export function getServiceColumns({
       name: i18n.translate('xpack.apm.servicesTable.healthColumnLabel', {
         defaultMessage: 'Health',
       }),
-      width: px(unit * 6),
+      width: unit * 6,
       sortable: true,
       render: (_, { healthStatus }) => {
         return (
@@ -130,7 +134,7 @@ export function getServiceColumns({
       name: i18n.translate('xpack.apm.servicesTable.environmentColumnLabel', {
         defaultMessage: 'Environment',
       }),
-      width: px(unit * 10),
+      width: unit * 10,
       sortable: true,
       render: (_, { environments }) => (
         <EnvironmentBadge environments={environments ?? []} />
@@ -144,7 +148,7 @@ export function getServiceColumns({
               'xpack.apm.servicesTable.transactionColumnLabel',
               { defaultMessage: 'Transaction type' }
             ),
-            width: px(unit * 10),
+            width: unit * 10,
             sortable: true,
           },
         ]
@@ -164,7 +168,7 @@ export function getServiceColumns({
         />
       ),
       align: 'left',
-      width: px(unit * 10),
+      width: unit * 10,
     },
     {
       field: 'transactionsPerMinute',
@@ -181,7 +185,7 @@ export function getServiceColumns({
         />
       ),
       align: 'left',
-      width: px(unit * 10),
+      width: unit * 10,
     },
     {
       field: 'transactionErrorRate',
@@ -204,7 +208,7 @@ export function getServiceColumns({
         );
       },
       align: 'left',
-      width: px(unit * 10),
+      width: unit * 10,
     },
   ];
 }

x-pack/plugins/apm/public/components/app/service_map/Popover/Popover.stories.tsx

@@ -17,7 +17,7 @@ import { Popover } from '.';
 import exampleGroupedConnectionsData from '../__stories__/example_grouped_connections.json';
 
 export default {
-  title: 'app/service_map/Popover',
+  title: 'app/ServiceMap/Popover',
   component: Popover,
   decorators: [
     (Story: ComponentType) => {

x-pack/plugins/apm/public/components/app/service_map/Popover/ServiceStatsFetcher.tsx

@@ -18,7 +18,7 @@ import { ServiceNodeStats } from '../../../../../common/service_map';
 import { ServiceStatsList } from './ServiceStatsList';
 import { useFetcher, FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
-import { AnomalyDetection } from './AnomalyDetection';
+import { AnomalyDetection } from './anomaly_detection';
 import { ServiceAnomalyStats } from '../../../../../common/anomaly_detection';
 
 interface ServiceStatsFetcherProps {

x-pack/plugins/apm/public/components/app/service_map/Popover/anomaly_detection.tsx

@@ -5,30 +5,29 @@
  * 2.0.
  */
 
-import { i18n } from '@kbn/i18n';
-import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
-  EuiIconTip,
   EuiHealth,
+  EuiIconTip,
+  EuiTitle,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
 import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
-import {
-  getServiceHealthStatus,
-  getServiceHealthStatusColor,
-} from '../../../../../common/service_health_status';
-import { useTheme } from '../../../../hooks/use_theme';
-import { fontSize, px } from '../../../../style/variables';
-import { asInteger, asDuration } from '../../../../../common/utils/formatters';
-import { MLSingleMetricLink } from '../../../shared/Links/MachineLearningLinks/MLSingleMetricLink';
-import { popoverWidth } from '../cytoscape_options';
-import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';
 import {
   getSeverity,
   ServiceAnomalyStats,
 } from '../../../../../common/anomaly_detection';
+import {
+  getServiceHealthStatus,
+  getServiceHealthStatusColor,
+} from '../../../../../common/service_health_status';
+import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types';
+import { asDuration, asInteger } from '../../../../../common/utils/formatters';
+import { useTheme } from '../../../../hooks/use_theme';
+import { MLSingleMetricLink } from '../../../shared/Links/MachineLearningLinks/MLSingleMetricLink';
+import { popoverWidth } from '../cytoscape_options';
 
 const HealthStatusTitle = euiStyled(EuiTitle)`
   display: inline;
@@ -47,8 +46,8 @@ const SubduedText = euiStyled.span`
 const EnableText = euiStyled.section`
   color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   line-height: 1.4;
-  font-size: ${fontSize};
-  width: ${px(popoverWidth)};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
+  width: ${popoverWidth}px;
 `;
 
 export const ContentLine = euiStyled.section`

x-pack/plugins/apm/public/components/app/service_map/Popover/service_stats_list.stories.tsx

@@ -10,7 +10,7 @@ import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_rea
 import { ServiceStatsList } from './ServiceStatsList';
 
 export default {
-  title: 'app/service_map/Popover/ServiceStatsList',
+  title: 'app/ServiceMap/Popover/ServiceStatsList',
   component: ServiceStatsList,
   decorators: [
     (Story: ComponentType) => (

x-pack/plugins/apm/public/components/app/service_map/__stories__/Cytoscape.stories.tsx

@@ -12,7 +12,7 @@ import { Cytoscape } from '../Cytoscape';
 import { Centerer } from './centerer';
 
 export default {
-  title: 'app/service_map/Cytoscape',
+  title: 'app/ServiceMap/Cytoscape',
   component: Cytoscape,
   decorators: [
     (Story: ComponentType) => (

x-pack/plugins/apm/public/components/app/service_map/__stories__/cytoscape_example_data.stories.tsx

@@ -25,7 +25,7 @@ import exampleResponseOpbeansBeats from './example_response_opbeans_beats.json';
 import exampleResponseTodo from './example_response_todo.json';
 import { generateServiceMapElements } from './generate_service_map_elements';
 
-const STORYBOOK_PATH = 'app/service_map/Cytoscape/Example data';
+const STORYBOOK_PATH = 'app/ServiceMap/Example data';
 
 const SESSION_STORAGE_KEY = `${STORYBOOK_PATH}/pre-loaded map`;
 function getSessionJson() {
@@ -40,7 +40,7 @@ function getHeight() {
 }
 
 export default {
-  title: 'app/service_map/Cytoscape/Example data',
+  title: 'app/ServiceMap/Example data',
   component: Cytoscape,
   decorators: [
     (Story: ComponentType) => (

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

@@ -20,12 +20,12 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
+import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
+import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { useServiceMetricChartsFetcher } from '../../../hooks/use_service_metric_charts_fetcher';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
-import { px, truncate, unit } from '../../../style/variables';
+import { truncate, unit } from '../../../utils/style';
 import { MetricsChart } from '../../shared/charts/metrics_chart';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 
@@ -36,7 +36,7 @@ const INITIAL_DATA = {
 
 const Truncate = euiStyled.span`
   display: block;
-  ${truncate(px(unit * 12))}
+  ${truncate(unit * 12)}
 `;
 
 interface ServiceNodeMetricsProps {

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

@@ -19,16 +19,16 @@ import {
 } from '../../../../common/utils/formatters';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { px, truncate, unit } from '../../../style/variables';
+import { truncate, unit } from '../../../utils/style';
 import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink';
-import { ITableColumn, ManagedTable } from '../../shared/ManagedTable';
+import { ITableColumn, ManagedTable } from '../../shared/managed_table';
 
 const INITIAL_PAGE_SIZE = 25;
 const INITIAL_SORT_FIELD = 'cpu';
 const INITIAL_SORT_DIRECTION = 'desc';
 
 const ServiceNodeName = euiStyled.div`
-  ${truncate(px(8 * unit))}
+  ${truncate(8 * unit)}
 `;
 
 interface ServiceNodeOverviewProps {

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

@@ -15,19 +15,19 @@ import {
 import { i18n } from '@kbn/i18n';
 import { keyBy } from 'lodash';
 import React from 'react';
-import { offsetPreviousPeriodCoordinates } from '../../../../../common/utils/offset_previous_period_coordinate';
-import { Coordinate } from '../../../../../typings/timeseries';
 import { getNextEnvironmentUrlParam } from '../../../../../common/environment_filter_values';
 import {
   asMillisecondDuration,
   asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
+import { offsetPreviousPeriodCoordinates } from '../../../../../common/utils/offset_previous_period_coordinate';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ServiceDependencyItem } from '../../../../../server/lib/services/get_service_dependencies';
+import { Coordinate } from '../../../../../typings/timeseries';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
-import { px, unit } from '../../../../style/variables';
+import { unit } from '../../../../utils/style';
 import { AgentIcon } from '../../../shared/agent_icon';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { ImpactBar } from '../../../shared/ImpactBar';
@@ -156,7 +156,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
           defaultMessage: 'Latency (avg.)',
         }
       ),
-      width: px(unit * 10),
+      width: `${unit * 10}px`,
       render: (_, { latency }) => {
         return (
           <SparkPlot
@@ -177,7 +177,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
         'xpack.apm.serviceOverview.dependenciesTableColumnThroughput',
         { defaultMessage: 'Throughput' }
       ),
-      width: px(unit * 10),
+      width: `${unit * 10}px`,
       render: (_, { throughput }) => {
         return (
           <SparkPlot
@@ -203,7 +203,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
           defaultMessage: 'Error rate',
         }
       ),
-      width: px(unit * 10),
+      width: `${unit * 10}px`,
       render: (_, { errorRate }) => {
         return (
           <SparkPlot
@@ -227,7 +227,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
           defaultMessage: 'Impact',
         }
       ),
-      width: px(unit * 5),
+      width: `${unit * 5}px`,
       render: (_, { impact, previousPeriodImpact }) => {
         return (
           <EuiFlexGroup gutterSize="xs" direction="column">

x-pack/plugins/apm/public/components/app/service_overview/service_overview_errors_table/get_column.tsx

@@ -9,12 +9,12 @@ import { EuiBasicTableColumn } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { asInteger } from '../../../../../common/utils/formatters';
-import { px, unit } from '../../../../style/variables';
+import { APIReturnType } from '../../../../services/rest/createCallApmApi';
+import { unit } from '../../../../utils/style';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { ErrorDetailLink } from '../../../shared/Links/apm/ErrorDetailLink';
 import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
-import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 
 type ErrorGroupMainStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/main_statistics'>;
 type ErrorGroupDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/detailed_statistics'>;
@@ -61,7 +61,7 @@ export function getColumns({
       render: (_, { last_seen: lastSeen }) => {
         return <TimestampTooltip time={lastSeen} timeUnit="minutes" />;
       },
-      width: px(unit * 9),
+      width: `${unit * 9}px`,
     },
     {
       field: 'occurrences',
@@ -71,7 +71,7 @@ export function getColumns({
           defaultMessage: 'Occurrences',
         }
       ),
-      width: px(unit * 12),
+      width: `${unit * 12}px`,
       render: (_, { occurrences, group_id: errorGroupId }) => {
         const currentPeriodTimeseries =
           errorGroupDetailedStatistics?.currentPeriod?.[errorGroupId]

x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/get_columns.tsx

@@ -25,14 +25,14 @@ import {
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
-import { px, unit } from '../../../../style/variables';
+import { unit } from '../../../../utils/style';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { MetricOverviewLink } from '../../../shared/Links/apm/MetricOverviewLink';
 import { ServiceNodeMetricOverviewLink } from '../../../shared/Links/apm/ServiceNodeMetricOverviewLink';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { getLatencyColumnLabel } from '../get_latency_column_label';
-import { InstanceActionsMenu } from './instance_actions_menu';
 import { MainStatsServiceInstanceItem } from '../service_overview_instances_chart_and_table';
+import { InstanceActionsMenu } from './instance_actions_menu';
 
 type ServiceInstanceDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/detailed_statistics'>;
 
@@ -98,7 +98,7 @@ export function getColumns({
     {
       field: 'latency',
       name: getLatencyColumnLabel(latencyAggregationType),
-      width: px(unit * 10),
+      width: `${unit * 10}px`,
       render: (_, { serviceNodeName, latency }) => {
         const currentPeriodTimestamp =
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.latency;
@@ -123,7 +123,7 @@ export function getColumns({
         'xpack.apm.serviceOverview.instancesTableColumnThroughput',
         { defaultMessage: 'Throughput' }
       ),
-      width: px(unit * 10),
+      width: `${unit * 10}px`,
       render: (_, { serviceNodeName, throughput }) => {
         const currentPeriodTimestamp =
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.throughput;
@@ -149,7 +149,7 @@ export function getColumns({
         'xpack.apm.serviceOverview.instancesTableColumnErrorRate',
         { defaultMessage: 'Error rate' }
       ),
-      width: px(unit * 8),
+      width: `${unit * 8}px`,
       render: (_, { serviceNodeName, errorRate }) => {
         const currentPeriodTimestamp =
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.errorRate;
@@ -175,7 +175,7 @@ export function getColumns({
         'xpack.apm.serviceOverview.instancesTableColumnCpuUsage',
         { defaultMessage: 'CPU usage (avg.)' }
       ),
-      width: px(unit * 8),
+      width: `${unit * 8}px`,
       render: (_, { serviceNodeName, cpuUsage }) => {
         const currentPeriodTimestamp =
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.cpuUsage;
@@ -201,7 +201,7 @@ export function getColumns({
         'xpack.apm.serviceOverview.instancesTableColumnMemoryUsage',
         { defaultMessage: 'Memory usage (avg.)' }
       ),
-      width: px(unit * 9),
+      width: `${unit * 9}px`,
       render: (_, { serviceNodeName, memoryUsage }) => {
         const currentPeriodTimestamp =
           detailedStatsData?.currentPeriod?.[serviceNodeName]?.memoryUsage;

x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/instance_actions_menu/index.tsx

@@ -20,8 +20,7 @@ import { SERVICE_NODE_NAME } from '../../../../../../common/elasticsearch_fieldn
 import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context';
 import { useUrlParams } from '../../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS } from '../../../../../hooks/use_fetcher';
-import { px } from '../../../../../style/variables';
-import { pushNewItemToKueryBar } from '../../../../shared/KueryBar/utils';
+import { pushNewItemToKueryBar } from '../../../../shared/kuery_bar/utils';
 import { useMetricOverviewHref } from '../../../../shared/Links/apm/MetricOverviewLink';
 import { useServiceNodeMetricOverviewHref } from '../../../../shared/Links/apm/ServiceNodeMetricOverviewLink';
 import { useInstanceDetailsFetcher } from '../use_instance_details_fetcher';
@@ -33,7 +32,7 @@ interface Props {
   onClose: () => void;
 }
 
-const POPOVER_WIDTH = px(305);
+const POPOVER_WIDTH = '305px';
 
 export function InstanceActionsMenu({
   serviceName,

x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx

@@ -28,10 +28,9 @@ import { useUrlParams } from '../../../../context/url_params_context/use_url_par
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { useTheme } from '../../../../hooks/use_theme';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
-import { pct } from '../../../../style/variables';
 import { getAgentIcon } from '../../../shared/agent_icon/get_agent_icon';
 import { KeyValueFilterList } from '../../../shared/key_value_filter_list';
-import { pushNewItemToKueryBar } from '../../../shared/KueryBar/utils';
+import { pushNewItemToKueryBar } from '../../../shared/kuery_bar/utils';
 import { getCloudIcon, getContainerIcon } from '../../../shared/service_icons';
 import { useInstanceDetailsFetcher } from './use_instance_details_fetcher';
 
@@ -78,7 +77,7 @@ export function InstanceDetails({ serviceName, serviceNodeName }: Props) {
     status === FETCH_STATUS.NOT_INITIATED
   ) {
     return (
-      <div style={{ width: pct(50) }}>
+      <div style={{ width: '50%' }}>
         <EuiLoadingContent data-test-subj="loadingSpinner" />
       </div>
     );

x-pack/plugins/apm/public/components/app/service_overview/service_overview_transactions_table/get_columns.tsx

@@ -16,7 +16,7 @@ import {
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
-import { px, unit } from '../../../../style/variables';
+import { unit } from '../../../../utils/style';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { ImpactBar } from '../../../shared/ImpactBar';
 import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
@@ -71,7 +71,7 @@ export function getColumns({
       field: 'latency',
       sortable: true,
       name: getLatencyColumnLabel(latencyAggregationType),
-      width: px(unit * 10),
+      width: `${unit * 10}px`,
       render: (_, { latency, name }) => {
         const currentTimeseries =
           transactionGroupDetailedStatistics?.currentPeriod?.[name]?.latency;
@@ -97,7 +97,7 @@ export function getColumns({
         'xpack.apm.serviceOverview.transactionsTableColumnThroughput',
         { defaultMessage: 'Throughput' }
       ),
-      width: px(unit * 10),
+      width: `${unit * 10}px`,
       render: (_, { throughput, name }) => {
         const currentTimeseries =
           transactionGroupDetailedStatistics?.currentPeriod?.[name]?.throughput;
@@ -124,7 +124,7 @@ export function getColumns({
         'xpack.apm.serviceOverview.transactionsTableColumnErrorRate',
         { defaultMessage: 'Error rate' }
       ),
-      width: px(unit * 8),
+      width: `${unit * 8}px`,
       render: (_, { errorRate, name }) => {
         const currentTimeseries =
           transactionGroupDetailedStatistics?.currentPeriod?.[name]?.errorRate;
@@ -150,7 +150,7 @@ export function getColumns({
         'xpack.apm.serviceOverview.transactionsTableColumnImpact',
         { defaultMessage: 'Impact' }
       ),
-      width: px(unit * 5),
+      width: `${unit * 5}px`,
       render: (_, { name }) => {
         const currentImpact =
           transactionGroupDetailedStatistics?.currentPeriod?.[name]?.impact ??

x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx

@@ -13,16 +13,16 @@ import {
   Settings,
   TooltipInfo,
 } from '@elastic/charts';
-import { EuiInMemoryTable } from '@elastic/eui';
-import { EuiFieldText } from '@elastic/eui';
-import { EuiToolTip } from '@elastic/eui';
 import {
   EuiCheckbox,
+  EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiInMemoryTable,
   euiPaletteForTemperature,
   EuiText,
+  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { find, sumBy } from 'lodash';
@@ -44,7 +44,7 @@ import {
 } from '../../../../common/utils/formatters';
 import { useFetcher } from '../../../hooks/use_fetcher';
 import { useTheme } from '../../../hooks/use_theme';
-import { px, unit } from '../../../style/variables';
+import { unit } from '../../../utils/style';
 
 const colors = euiPaletteForTemperature(100).slice(50, 85);
 
@@ -335,7 +335,7 @@ export function ServiceProfilingFlamegraph({
           />
         </Chart>
       </EuiFlexItem>
-      <EuiFlexItem grow={false} style={{ width: px(unit * 24) }}>
+      <EuiFlexItem grow={false} style={{ width: unit * 24 }}>
         <EuiFlexGroup direction="column" gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiCheckbox
@@ -405,7 +405,7 @@ export function ServiceProfilingFlamegraph({
                     defaultMessage: 'Self',
                   }),
                   render: (_, item) => formatValue(item.value, valueUnit),
-                  width: px(unit * 6),
+                  width: `${unit * 6}px`,
                 },
               ]}
             />

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

@@ -11,7 +11,7 @@ import { useUrlParams } from '../../../context/url_params_context/use_url_params
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { APIReturnType } from '../../../services/rest/createCallApmApi';
 import { SearchBar } from '../../shared/search_bar';
-import { TraceList } from './TraceList';
+import { TraceList } from './trace_list';
 
 type TracesAPIResponse = APIReturnType<'GET /api/apm/traces'>;
 const DEFAULT_RESPONSE: TracesAPIResponse = {

x-pack/plugins/apm/public/components/app/trace_overview/trace_list.tsx

@@ -13,18 +13,18 @@ import {
   asMillisecondDuration,
   asTransactionRate,
 } from '../../../../common/utils/formatters';
-import { fontSizes, truncate } from '../../../style/variables';
+import { APIReturnType } from '../../../services/rest/createCallApmApi';
+import { truncate } from '../../../utils/style';
 import { EmptyMessage } from '../../shared/EmptyMessage';
 import { ImpactBar } from '../../shared/ImpactBar';
-import { ITableColumn, ManagedTable } from '../../shared/ManagedTable';
-import { LoadingStatePrompt } from '../../shared/LoadingStatePrompt';
 import { TransactionDetailLink } from '../../shared/Links/apm/transaction_detail_link';
-import { APIReturnType } from '../../../services/rest/createCallApmApi';
+import { LoadingStatePrompt } from '../../shared/LoadingStatePrompt';
+import { ITableColumn, ManagedTable } from '../../shared/managed_table';
 
 type TraceGroup = APIReturnType<'GET /api/apm/traces'>['items'][0];
 
 const StyledTransactionLink = euiStyled(TransactionDetailLink)`
-  font-size: ${fontSizes.large};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeM};
   ${truncate('100%')};
 `;
 

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

@@ -29,7 +29,7 @@ import type { IUrlParams } from '../../../../context/url_params_context/types';
 import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
 import { useTheme } from '../../../../hooks/use_theme';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
-import { unit } from '../../../../style/variables';
+import { unit } from '../../../../utils/style';
 import { ChartContainer } from '../../../shared/charts/chart_container';
 import { EmptyMessage } from '../../../shared/EmptyMessage';
 import { CustomTooltip } from './custom_tooltip';

x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx

@@ -1,51 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { Fragment } from 'react';
-import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
-import {
-  borderRadius,
-  fontFamilyCode,
-  fontSize,
-  px,
-  unit,
-  units,
-} from '../../../../../../../style/variables';
-import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
-
-const ContextUrl = euiStyled.div`
-  padding: ${px(units.half)} ${px(unit)};
-  background: ${({ theme }) => theme.eui.euiColorLightestShade};
-  border-radius: ${borderRadius};
-  border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
-  font-family: ${fontFamilyCode};
-  font-size: ${fontSize};
-`;
-
-interface Props {
-  httpContext: NonNullable<Span['span']>['http'];
-}
-
-export function HttpContext({ httpContext }: Props) {
-  const url = httpContext?.url?.original;
-
-  if (!url) {
-    return null;
-  }
-
-  return (
-    <Fragment>
-      <EuiTitle size="xs">
-        <h3>HTTP URL</h3>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <ContextUrl>{url}</ContextUrl>
-      <EuiSpacer size="l" />
-    </Fragment>
-  );
-}

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

@@ -19,7 +19,7 @@ import { HeightRetainer } from '../../shared/HeightRetainer';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { TransactionDistribution } from './Distribution';
 import { useWaterfallFetcher } from './use_waterfall_fetcher';
-import { WaterfallWithSummmary } from './WaterfallWithSummmary';
+import { WaterfallWithSummary } from './waterfall_with_summary';
 
 interface Sample {
   traceId: string;
@@ -107,7 +107,7 @@ export function TransactionDetails() {
       <EuiSpacer size="s" />
 
       <HeightRetainer>
-        <WaterfallWithSummmary
+        <WaterfallWithSummary
           urlParams={urlParams}
           waterfall={waterfall}
           isLoading={waterfallStatus === FETCH_STATUS.LOADING}

x-pack/plugins/apm/public/components/app/transaction_details/use_waterfall_fetcher.ts

@@ -8,7 +8,7 @@
 import { useMemo } from 'react';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useFetcher } from '../../../hooks/use_fetcher';
-import { getWaterfall } from './WaterfallWithSummmary/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
+import { getWaterfall } from './waterfall_with_summary/waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers';
 
 const INITIAL_DATA = {
   root: undefined,

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/MaybeViewTraceLink.tsx

@@ -12,7 +12,7 @@ import { getNextEnvironmentUrlParam } from '../../../../../common/environment_fi
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { Transaction as ITransaction } from '../../../../../typings/es_schemas/ui/transaction';
 import { TransactionDetailLink } from '../../../shared/Links/apm/transaction_detail_link';
-import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
+import { IWaterfall } from './waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers';
 
 export const MaybeViewTraceLink = ({
   transaction,

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/TransactionTabs.tsx

@@ -14,8 +14,8 @@ import { Transaction } from '../../../../../typings/es_schemas/ui/transaction';
 import type { IUrlParams } from '../../../../context/url_params_context/types';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
 import { TransactionMetadata } from '../../../shared/MetadataTable/TransactionMetadata';
-import { WaterfallContainer } from './WaterfallContainer';
-import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
+import { WaterfallContainer } from './waterfall_container';
+import { IWaterfall } from './waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers';
 
 interface Props {
   transaction: Transaction;

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

@@ -22,10 +22,10 @@ import type { IUrlParams } from '../../../../context/url_params_context/types';
 import { fromQuery, toQuery } from '../../../shared/Links/url_helpers';
 import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
 import { TransactionSummary } from '../../../shared/Summary/TransactionSummary';
-import { TransactionActionMenu } from '../../../shared/TransactionActionMenu/TransactionActionMenu';
+import { TransactionActionMenu } from '../../../shared/transaction_action_menu/TransactionActionMenu';
 import { MaybeViewTraceLink } from './MaybeViewTraceLink';
 import { TransactionTabs } from './TransactionTabs';
-import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
+import { IWaterfall } from './waterfall_container/Waterfall/waterfall_helpers/waterfall_helpers';
 
 type DistributionApiResponse = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/charts/distribution'>;
 
@@ -39,7 +39,7 @@ interface Props {
   traceSamples: DistributionBucket['samples'];
 }
 
-export function WaterfallWithSummmary({
+export function WaterfallWithSummary({
   urlParams,
   waterfall,
   exceedsMax,

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/FlyoutTopLevelProperties.tsx

@@ -16,7 +16,7 @@ import {
 import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction';
 import { ServiceOrTransactionsOverviewLink } from '../../../../../shared/Links/apm/service_transactions_overview_link';
 import { TransactionDetailLink } from '../../../../../shared/Links/apm/transaction_detail_link';
-import { StickyProperties } from '../../../../../shared/StickyProperties';
+import { StickyProperties } from '../../../../../shared/sticky_properties';
 
 interface Props {
   transaction?: Transaction;

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/TransactionFlyout/index.tsx

@@ -18,7 +18,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
-import { TransactionActionMenu } from '../../../../../../shared/TransactionActionMenu/TransactionActionMenu';
+import { TransactionActionMenu } from '../../../../../../shared/transaction_action_menu/TransactionActionMenu';
 import { TransactionSummary } from '../../../../../../shared/Summary/TransactionSummary';
 import { FlyoutTopLevelProperties } from '../FlyoutTopLevelProperties';
 import { ResponsiveFlyout } from '../ResponsiveFlyout';

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/WaterfallFlyout.tsx

@@ -8,7 +8,7 @@
 import { History } from 'history';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { SpanFlyout } from './SpanFlyout';
+import { SpanFlyout } from './span_flyout';
 import { TransactionFlyout } from './TransactionFlyout';
 import { IWaterfall } from './waterfall_helpers/waterfall_helpers';
 

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/accordion_waterfall.tsx

@@ -10,7 +10,7 @@ import { isEmpty } from 'lodash';
 import React, { useState } from 'react';
 import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
 import { Margins } from '../../../../../shared/charts/Timeline';
-import { WaterfallItem } from './WaterfallItem';
+import { WaterfallItem } from './waterfall_item';
 import {
   IWaterfall,
   IWaterfallSpanOrTransaction,

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/StickySpanProperties.tsx

@@ -19,7 +19,7 @@ import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
 import { ServiceOrTransactionsOverviewLink } from '../../../../../../shared/Links/apm/service_transactions_overview_link';
 import { TransactionDetailLink } from '../../../../../../shared/Links/apm/transaction_detail_link';
-import { StickyProperties } from '../../../../../../shared/StickyProperties';
+import { StickyProperties } from '../../../../../../shared/sticky_properties';
 
 interface Props {
   span: Span;

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/database_context.tsx

@@ -9,39 +9,35 @@ import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { tint } from 'polished';
 import React, { Fragment } from 'react';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
 import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
-import {
-  borderRadius,
-  fontFamilyCode,
-  fontSize,
-  px,
-  unit,
-  units,
-} from '../../../../../../../style/variables';
-import { TruncateHeightSection } from './TruncateHeightSection';
+import { useTheme } from '../../../../../../../hooks/use_theme';
+import { TruncateHeightSection } from './truncate_height_section';
 
 SyntaxHighlighter.registerLanguage('sql', sql);
 
 const DatabaseStatement = euiStyled.div`
-  padding: ${px(units.half)} ${px(unit)};
+  padding: ${({ theme }) =>
+    `${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m}`};
   background: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)};
-  border-radius: ${borderRadius};
+  border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall};
   border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
-  font-family: ${fontFamilyCode};
-  font-size: ${fontSize};
+  font-family: ${({ theme }) => theme.eui.euiCodeFontFamily};
+  font-size: ${({ theme }) => theme.eui.euiFontSizeS};
 `;
 
-const dbSyntaxLineHeight = unit * 1.5;
-
 interface Props {
   dbContext?: NonNullable<Span['span']>['db'];
 }
 
 export function DatabaseContext({ dbContext }: Props) {
+  const theme = useTheme();
+  const dbSyntaxLineHeight = theme.eui.euiSizeL;
+  const previewHeight = 240; // 10 * dbSyntaxLineHeight
+
   if (!dbContext || !dbContext.statement) {
     return null;
   }
@@ -64,7 +60,7 @@ export function DatabaseContext({ dbContext }: Props) {
       </EuiTitle>
       <EuiSpacer size="m" />
       <DatabaseStatement>
-        <TruncateHeightSection previewHeight={10 * dbSyntaxLineHeight}>
+        <TruncateHeightSection previewHeight={previewHeight}>
           <SyntaxHighlighter
             language={'sql'}
             style={xcode}
@@ -72,7 +68,7 @@ export function DatabaseContext({ dbContext }: Props) {
               color: null,
               background: null,
               padding: null,
-              lineHeight: px(dbSyntaxLineHeight),
+              lineHeight: dbSyntaxLineHeight,
               whiteSpace: 'pre-wrap',
               overflowX: 'scroll',
             }}

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import {
+  EuiBadge,
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,26 +17,24 @@ import {
   EuiSpacer,
   EuiTabbedContent,
   EuiTitle,
-  EuiBadge,
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
 import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
-import { px, units } from '../../../../../../../style/variables';
-import { Summary } from '../../../../../../shared/Summary';
-import { TimestampTooltip } from '../../../../../../shared/TimestampTooltip';
-import { DurationSummaryItem } from '../../../../../../shared/Summary/DurationSummaryItem';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
 import { DiscoverSpanLink } from '../../../../../../shared/Links/DiscoverLinks/DiscoverSpanLink';
-import { Stacktrace } from '../../../../../../shared/Stacktrace';
-import { ResponsiveFlyout } from '../ResponsiveFlyout';
-import { DatabaseContext } from './DatabaseContext';
-import { StickySpanProperties } from './StickySpanProperties';
-import { HttpInfoSummaryItem } from '../../../../../../shared/Summary/HttpInfoSummaryItem';
 import { SpanMetadata } from '../../../../../../shared/MetadataTable/SpanMetadata';
-import { SyncBadge } from '../SyncBadge';
+import { Stacktrace } from '../../../../../../shared/Stacktrace';
+import { Summary } from '../../../../../../shared/Summary';
+import { DurationSummaryItem } from '../../../../../../shared/Summary/DurationSummaryItem';
+import { HttpInfoSummaryItem } from '../../../../../../shared/Summary/http_info_summary_item';
+import { TimestampTooltip } from '../../../../../../shared/TimestampTooltip';
+import { ResponsiveFlyout } from '../ResponsiveFlyout';
+import { SyncBadge } from '../sync_badge';
+import { DatabaseContext } from './database_context';
+import { StickySpanProperties } from './StickySpanProperties';
 
 function formatType(type: string) {
   switch (type) {
@@ -74,11 +73,11 @@ function getSpanTypes(span: Span) {
 
 const SpanBadge = euiStyled(EuiBadge)`
   display: inline-block;
-  margin-right: ${px(units.quarter)};
+  margin-right: ${({ theme }) => theme.eui.euiSizeXS};
 `;
 
 const HttpInfoContainer = euiStyled('div')`
-  margin-right: ${px(units.quarter)};
+  margin-right: ${({ theme }) => theme.eui.euiSizeXS};
 `;
 
 interface Props {

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/span_flyout/truncate_height_section.tsx

@@ -9,10 +9,9 @@ import { EuiIcon, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment, ReactNode, useEffect, useRef, useState } from 'react';
 import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
-import { px, units } from '../../../../../../../style/variables';
 
 const ToggleButtonContainer = euiStyled.div`
-  margin-top: ${px(units.half)};
+  margin-top: ${({ theme }) => theme.eui.euiSizeS}
   user-select: none;
 `;
 
@@ -41,7 +40,7 @@ export function TruncateHeightSection({ children, previewHeight }: Props) {
         ref={contentContainerEl}
         style={{
           overflow: 'hidden',
-          maxHeight: isOpen ? 'initial' : px(previewHeight),
+          maxHeight: isOpen ? 'initial' : previewHeight,
         }}
       >
         {children}

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/sync_badge.stories.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { SyncBadge, SyncBadgeProps } from './SyncBadge';
+import { SyncBadge, SyncBadgeProps } from './sync_badge';
 
 export default {
   title: 'app/TransactionDetails/SyncBadge',

x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/sync_badge.tsx

@@ -9,11 +9,10 @@ import { EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
-import { px, units } from '../../../../../../style/variables';
 
 const SpanBadge = euiStyled(EuiBadge)`
   display: inline-block;
-  margin-right: ${px(units.quarter)};
+  margin-right: ${({ theme }) => theme.eui.euiSizeXS};
 `;
 
 export interface SyncBadgeProps {