[8.0] Remove direct usage of EUI theme vars (#116232) (#118228)

* Remove direct usage of EUI theme vars (#116232) Co-authored-by: spalger <spalger@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # src/plugins/discover/public/application/components/discover_grid/discover_grid_document_selection.tsx # x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts # x-pack/plugins/apm/public/application/uxApp.tsx * commit using @elastic.co
2025-04-23 09:19:04 -04:00 · 2021-11-10 14:26:34 -07:00 · 2021-11-10 14:26:34 -07:00 · 7595121751
commit 7595121751
parent 2ed71ef050
75 changed files with 148 additions and 129 deletions
--- a/packages/elastic-eslint-config-kibana/.eslintrc.js
+++ b/packages/elastic-eslint-config-kibana/.eslintrc.js
@ -88,6 +88,16 @@ module.exports = {
          exclude: USES_STYLED_COMPONENTS,
          disallowedMessage: `Prefer using @emotion/react instead. To use styled-components, ensure you plugin is enabled in @kbn/dev-utils/src/babel.ts.`
        },
+        ...[
+          '@elastic/eui/dist/eui_theme_light.json',
+          '@elastic/eui/dist/eui_theme_dark.json',
+          '@elastic/eui/dist/eui_theme_amsterdam_light.json',
+          '@elastic/eui/dist/eui_theme_amsterdam_dark.json',
+        ].map(from => ({
+          from,
+          to: false,
+          disallowedMessage: `Use "@kbn/ui-shared-deps-src/theme" to access theme vars.`
+        })),
      ],
    ],

--- a/packages/kbn-ui-shared-deps-npm/BUILD.bazel
+++ b/packages/kbn-ui-shared-deps-npm/BUILD.bazel
@ -23,7 +23,6 @@ filegroup(
 )

 NPM_MODULE_EXTRA_FILES = [
-  "eui_theme_vars/package.json",
  "package.json",
  "README.md"
 ]
--- a/packages/kbn-ui-shared-deps-npm/eui_theme_vars/package.json
+++ b/packages/kbn-ui-shared-deps-npm/eui_theme_vars/package.json
@ -1,4 +0,0 @@
-{
-  "main": "../target_node/eui_theme_vars.js",
-  "types": "../target_types/eui_theme_vars.d.ts"
-}
--- a/packages/kbn-ui-shared-deps-src/src/index.js
+++ b/packages/kbn-ui-shared-deps-src/src/index.js
@ -59,8 +59,7 @@ exports.externals = {
  '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
  '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
  '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',
-  '@elastic/eui/dist/eui_theme_light.json': '__kbnSharedDeps__.Theme.euiLightVars',
-  '@elastic/eui/dist/eui_theme_dark.json': '__kbnSharedDeps__.Theme.euiDarkVars',
+
  // transient dep of eui
  'react-beautiful-dnd': '__kbnSharedDeps__.ReactBeautifulDnD',
  lodash: '__kbnSharedDeps__.Lodash',
--- a/packages/kbn-ui-shared-deps-src/src/theme.ts
+++ b/packages/kbn-ui-shared-deps-src/src/theme.ts
@ -6,7 +6,9 @@
 * Side Public License, v 1.
 */

+/* eslint-disable-next-line @kbn/eslint/module_migration */
 import { default as v8Light } from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
+/* eslint-disable-next-line @kbn/eslint/module_migration */
 import { default as v8Dark } from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';

 const globals: any = typeof window === 'undefined' ? {} : window;
--- a/src/plugins/charts/public/static/components/current_time.tsx
+++ b/src/plugins/charts/public/static/components/current_time.tsx
@ -10,8 +10,10 @@ import moment, { Moment } from 'moment';
 import React, { FC } from 'react';

 import { LineAnnotation, AnnotationDomainType, LineAnnotationStyle } from '@elastic/charts';
-import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
-import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
+import {
+  euiLightVars as lightEuiTheme,
+  euiDarkVars as darkEuiTheme,
+} from '@kbn/ui-shared-deps-src/theme';

 interface CurrentTimeProps {
  isDarkMode: boolean;
--- a/src/plugins/charts/public/static/components/endzones.tsx
+++ b/src/plugins/charts/public/static/components/endzones.tsx
@ -17,8 +17,10 @@ import {
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
-import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
-import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';
+import {
+  euiLightVars as lightEuiTheme,
+  euiDarkVars as darkEuiTheme,
+} from '@kbn/ui-shared-deps-src/theme';

 interface EndzonesProps {
  isDarkMode: boolean;
--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_document_selection.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_document_selection.tsx
@ -17,8 +17,10 @@ import {
  EuiDataGridCellValueElementProps,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import themeDark from '@elastic/eui/dist/eui_theme_dark.json';
-import themeLight from '@elastic/eui/dist/eui_theme_light.json';
+import {
+  euiLightVars as themeLight,
+  euiDarkVars as themeDark,
+} from '@kbn/ui-shared-deps-src/theme';
 import { ElasticSearchHit } from '../../doc_views/doc_views_types';
 import { DiscoverGridContext } from './discover_grid_context';

--- a/src/plugins/discover/public/application/components/discover_grid/discover_grid_expand_button.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/discover_grid_expand_button.tsx
@ -8,8 +8,10 @@

 import React, { useContext, useEffect } from 'react';
 import { EuiButtonIcon, EuiDataGridCellValueElementProps, EuiToolTip } from '@elastic/eui';
-import themeDark from '@elastic/eui/dist/eui_theme_dark.json';
-import themeLight from '@elastic/eui/dist/eui_theme_light.json';
+import {
+  euiLightVars as themeLight,
+  euiDarkVars as themeDark,
+} from '@kbn/ui-shared-deps-src/theme';
 import { i18n } from '@kbn/i18n';
 import { DiscoverGridContext } from './discover_grid_context';
 import { EsHitRecord } from '../../types';
--- a/src/plugins/discover/public/application/components/discover_grid/get_render_cell_value.tsx
+++ b/src/plugins/discover/public/application/components/discover_grid/get_render_cell_value.tsx
@ -7,8 +7,10 @@
 */

 import React, { Fragment, useContext, useEffect } from 'react';
-import themeLight from '@elastic/eui/dist/eui_theme_light.json';
-import themeDark from '@elastic/eui/dist/eui_theme_dark.json';
+import {
+  euiLightVars as themeLight,
+  euiDarkVars as themeDark,
+} from '@kbn/ui-shared-deps-src/theme';
 import type { IndexPattern } from 'src/plugins/data/common';

 import {
--- a/src/plugins/expressions/public/react_expression_renderer.tsx
+++ b/src/plugins/expressions/public/react_expression_renderer.tsx
@ -12,7 +12,7 @@ import { Observable, Subscription } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import useShallowCompareEffect from 'react-use/lib/useShallowCompareEffect';
 import { EuiLoadingChart, EuiProgress } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { IExpressionLoaderParams, ExpressionRenderError, ExpressionRendererEvent } from './types';
 import { ExpressionAstExpression, IInterpreterRenderHandlers } from '../common';
 import { ExpressionLoader } from './loader';
--- a/src/plugins/index_pattern_editor/public/components/form_fields/type_field.tsx
+++ b/src/plugins/index_pattern_editor/public/components/form_fields/type_field.tsx
@ -8,8 +8,7 @@

 import React from 'react';
 import { i18n } from '@kbn/i18n';
-// @ts-ignore
-import { euiColorAccent } from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
 import { FormattedMessage } from '@kbn/i18n/react';

 import {
@ -54,7 +53,7 @@ const rollupSelectItem = (
        defaultMessage="Rollup data view"
      />
      &nbsp;
-      <EuiBadge color={euiColorAccent}>
+      <EuiBadge color={euiLightVars.euiColorAccent}>
        <FormattedMessage id="indexPatternEditor.typeSelect.betaLabel" defaultMessage="Beta" />
      </EuiBadge>
    </EuiDescriptionListTitle>
--- a/src/plugins/kibana_react/public/code_editor/code_editor_field.tsx
+++ b/src/plugins/kibana_react/public/code_editor/code_editor_field.tsx
@ -7,8 +7,10 @@
 */

 import React from 'react';
-import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import {
+  euiLightVars as lightTheme,
+  euiDarkVars as darkTheme,
+} from '@kbn/ui-shared-deps-src/theme';
 import { EuiFormControlLayout } from '@elastic/eui';
 import { CodeEditor, Props } from './code_editor';

--- a/src/plugins/kibana_react/public/code_editor/editor_theme.ts
+++ b/src/plugins/kibana_react/public/code_editor/editor_theme.ts
@ -8,8 +8,10 @@

 import { monaco } from '@kbn/monaco';

-import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import {
+  euiLightVars as lightTheme,
+  euiDarkVars as darkTheme,
+} from '@kbn/ui-shared-deps-src/theme';

 // NOTE: For talk around where this theme information will ultimately live,
 // please see this discuss issue: https://github.com/elastic/kibana/issues/43814
--- a/src/plugins/vis_types/vislib/public/vislib/components/tooltip/tooltip.js
+++ b/src/plugins/vis_types/vislib/public/vislib/components/tooltip/tooltip.js
@ -12,7 +12,7 @@ import $ from 'jquery';

 import { Binder } from '../../lib/binder';
 import { positionTooltip } from './position_tooltip';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';

 let allContents = [];

--- a/x-pack/plugins/apm/common/viz_colors.ts
+++ b/x-pack/plugins/apm/common/viz_colors.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as lightTheme } from '@kbn/ui-shared-deps-src/theme';

 function getVizColorsForTheme(theme = lightTheme) {
  return [
--- a/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts
+++ b/x-pack/plugins/apm/ftr_e2e/cypress/integration/read_only_user/service_inventory/service_inventory.spec.ts
@ -93,6 +93,7 @@ describe('When navigating to the service inventory', () => {
      cy.wait(aliasNames);
    });

+    // FAILING, @caue.marcondes will be fixing soon
    it.skip('when selecting a different time range and clicking the refresh button', () => {
      cy.wait(aliasNames);

--- a/x-pack/plugins/apm/public/application/uxApp.tsx
+++ b/x-pack/plugins/apm/public/application/uxApp.tsx
@ -5,8 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { AppMountParameters, CoreStart } from 'kibana/public';
 import React from 'react';
 import ReactDOM from 'react-dom';
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/PercentileAnnotations.tsx
@ -13,7 +13,7 @@ import {
  LineAnnotationStyle,
  Position,
 } from '@elastic/charts';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
 import { EuiToolTip } from '@elastic/eui';

 interface Props {
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/render_option.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/render_option.tsx
@ -8,7 +8,7 @@
 import React, { ReactNode } from 'react';
 import { EuiHighlight, EuiSelectableOption } from '@elastic/eui';
 import styled from 'styled-components';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 const StyledSpan = styled.span`
  color: ${euiLightVars.euiColorSecondaryText};
--- a/x-pack/plugins/apm/public/components/app/service_map/Controls.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_map/Controls.test.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as lightTheme } from '@kbn/ui-shared-deps-src/theme';
 import { render } from '@testing-library/react';
 import cytoscape from 'cytoscape';
 import React, { ReactNode } from 'react';
--- a/x-pack/plugins/apm/public/components/routing/app_root.tsx
+++ b/x-pack/plugins/apm/public/components/routing/app_root.tsx
@ -5,8 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config';
 import React from 'react';
 import { Route } from 'react-router-dom';
--- a/x-pack/plugins/apm/public/utils/httpStatusCodeToColor.ts
+++ b/x-pack/plugins/apm/public/utils/httpStatusCodeToColor.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 const { euiColorDarkShade, euiColorWarning } = theme;

 export const errorColor = '#c23c2b';
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/fetch_and_transform_gc_metrics.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/fetch_and_transform_gc_metrics.ts
@ -6,7 +6,7 @@
 */

 import { sum, round } from 'lodash';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { isFiniteNumber } from '../../../../../../common/utils/is_finite_number';
 import { Setup } from '../../../../helpers/setup_request';
 import { getMetricsDateHistogramParams } from '../../../../helpers/metrics';
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_rate_chart.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_rate_chart.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { i18n } from '@kbn/i18n';
 import { METRIC_JAVA_GC_COUNT } from '../../../../../../common/elasticsearch_fieldnames';
 import { Setup } from '../../../../helpers/setup_request';
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_time_chart.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/gc/get_gc_time_chart.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { i18n } from '@kbn/i18n';
 import { METRIC_JAVA_GC_TIME } from '../../../../../../common/elasticsearch_fieldnames';
 import { Setup } from '../../../../helpers/setup_request';
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/heap_memory/index.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { i18n } from '@kbn/i18n';
 import {
  METRIC_JAVA_HEAP_MEMORY_MAX,
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/non_heap_memory/index.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { i18n } from '@kbn/i18n';
 import {
  METRIC_JAVA_NON_HEAP_MEMORY_MAX,
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/java/thread_count/index.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { i18n } from '@kbn/i18n';
 import {
  METRIC_JAVA_THREAD_COUNT,
--- a/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/by_agent/shared/cpu/index.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { i18n } from '@kbn/i18n';
 import {
  METRIC_SYSTEM_CPU_PERCENT,
--- a/x-pack/plugins/apm/server/lib/metrics/transform_metrics_chart.ts
+++ b/x-pack/plugins/apm/server/lib/metrics/transform_metrics_chart.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import { ESSearchResponse } from '../../../../../../src/core/types/elasticsearch';
 import { getVizColorForIndex } from '../../../common/viz_colors';
 import { GenericMetricsRequest } from './fetch_and_transform_metrics';
--- a/x-pack/plugins/cases/public/common/mock/test_providers.tsx
+++ b/x-pack/plugins/cases/public/common/mock/test_providers.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { I18nProvider } from '@kbn/i18n/react';
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
--- a/x-pack/plugins/cases/public/components/header_page/index.test.tsx
+++ b/x-pack/plugins/cases/public/components/header_page/index.test.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { shallow } from 'enzyme';
 import React from 'react';

--- a/x-pack/plugins/cases/public/components/utility_bar/utility_bar.test.tsx
+++ b/x-pack/plugins/cases/public/components/utility_bar/utility_bar.test.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { TestProviders } from '../../common/mock';
--- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_color_range.ts
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_color_range.ts
@ -7,8 +7,10 @@

 import d3 from 'd3';
 import { useMemo } from 'react';
-import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
-import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
+import {
+  euiLightVars as euiThemeLight,
+  euiDarkVars as euiThemeDark,
+} from '@kbn/ui-shared-deps-src/theme';

 import { i18n } from '@kbn/i18n';

--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_health.tsx
@ -9,7 +9,7 @@ import React from 'react';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
 import { EuiBadge, EuiToolTip } from '@elastic/eui';

-import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as euiVars } from '@kbn/ui-shared-deps-src/theme';

 import type { Agent } from '../../../types';

@ -29,7 +29,7 @@ const Status = {
    </EuiBadge>
  ),
  Inactive: (
-    <EuiBadge color={euiVars.default.euiColorDarkShade}>
+    <EuiBadge color={euiVars.euiColorDarkShade}>
      <FormattedMessage id="xpack.fleet.agentHealth.inactiveStatusText" defaultMessage="Inactive" />
    </EuiBadge>
  ),
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
@ -7,20 +7,20 @@

 import { euiPaletteColorBlindBehindText } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import * as euiVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 import type { SimplifiedAgentStatus } from '../../../types';

 const visColors = euiPaletteColorBlindBehindText();
 const colorToHexMap = {
  // using variables as mentioned here https://elastic.github.io/eui/#/guidelines/getting-started
-  default: euiVars.default.euiColorLightShade,
+  default: euiLightVars.euiColorLightShade,
  primary: visColors[1],
  secondary: visColors[0],
  accent: visColors[2],
  warning: visColors[5],
  danger: visColors[9],
-  inactive: euiVars.default.euiColorDarkShade,
+  inactive: euiLightVars.euiColorDarkShade,
 };

 export const AGENT_STATUSES: SimplifiedAgentStatus[] = [
--- a/x-pack/plugins/ml/common/util/group_color_utils.ts
+++ b/x-pack/plugins/ml/common/util/group_color_utils.ts
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars as euiVars } from '@kbn/ui-shared-deps-src/theme';

 import { stringHash } from './string_utils';

--- a/x-pack/plugins/ml/public/application/components/color_range_legend/use_color_range.ts
+++ b/x-pack/plugins/ml/public/application/components/color_range_legend/use_color_range.ts
@ -7,8 +7,10 @@

 import d3 from 'd3';
 import { useMemo } from 'react';
-import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
-import euiThemeDark from '@elastic/eui/dist/eui_theme_dark.json';
+import {
+  euiLightVars as euiThemeLight,
+  euiDarkVars as euiThemeDark,
+} from '@kbn/ui-shared-deps-src/theme';

 import { i18n } from '@kbn/i18n';

--- a/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
+++ b/x-pack/plugins/ml/public/application/components/job_messages/job_messages.tsx
@ -17,7 +17,7 @@ import {

 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';

 import { JobMessage } from '../../../../common/types/audit_message';
 import { JobIcon } from '../job_message_icon';
--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.test.tsx
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix.test.tsx
@ -10,7 +10,7 @@ import { render, waitFor, screen } from '@testing-library/react';

 import { __IntlProvider as IntlProvider } from '@kbn/i18n/react';

-import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as euiThemeLight } from '@kbn/ui-shared-deps-src/theme';

 import { ScatterplotMatrix } from './scatterplot_matrix';

--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.test.ts
@ -10,7 +10,7 @@ import 'jest-canvas-mock';
 // @ts-ignore
 import { compile } from 'vega-lite/build/vega-lite';

-import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as euiThemeLight } from '@kbn/ui-shared-deps-src/theme';

 import { LEGEND_TYPES } from '../vega_chart/common';

--- a/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
+++ b/x-pack/plugins/ml/public/application/components/scatterplot_matrix/scatterplot_matrix_vega_lite_spec.ts
@ -9,7 +9,7 @@
 // @ts-ignore
 import type { TopLevelSpec } from 'vega-lite/build/vega-lite';

-import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as euiThemeLight } from '@kbn/ui-shared-deps-src/theme';

 import { euiPaletteColorBlind, euiPaletteNegative, euiPalettePositive } from '@elastic/eui';

--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/get_roc_curve_chart_vega_lite_spec.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/classification_exploration/get_roc_curve_chart_vega_lite_spec.tsx
@ -10,7 +10,7 @@
 import type { TopLevelSpec } from 'vega-lite/build/vega-lite';

 import { euiPaletteColorBlind, euiPaletteGray } from '@elastic/eui';
-import euiThemeLight from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as euiThemeLight } from '@kbn/ui-shared-deps-src/theme';

 import { i18n } from '@kbn/i18n';

--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
@ -24,7 +24,7 @@ import { EuiIcon } from '@elastic/eui';

 import React, { useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import euiVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as euiVars } from '@kbn/ui-shared-deps-src/theme';
 import type { DecisionPathPlotData } from './use_classification_path_data';
 import { formatSingleValue } from '../../../../../formatters/format_value';
 import {
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx
@ -21,7 +21,7 @@ import {
  BarSeriesSpec,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
-import euiVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as euiVars } from '@kbn/ui-shared-deps-src/theme';
 import {
  TotalFeatureImportance,
  isClassificationTotalFeatureImportance,
--- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/settings.ts
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/settings.ts
@ -5,8 +5,10 @@
 * 2.0.
 */

-import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import {
+  euiLightVars as lightTheme,
+  euiDarkVars as darkTheme,
+} from '@kbn/ui-shared-deps-src/theme';
 import {
  JobCreatorType,
  isMultiMetricJobCreator,
--- a/x-pack/plugins/observability/public/components/shared/core_web_vitals/palette_legends.tsx
+++ b/x-pack/plugins/observability/public/components/shared/core_web_vitals/palette_legends.tsx
@ -16,8 +16,7 @@ import {
 } from '@elastic/eui';
 import styled from 'styled-components';
 import { FormattedMessage } from '@kbn/i18n/react';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { getCoreVitalTooltipMessage, Thresholds } from './core_vital_item';
 import { useUiSetting$ } from '../../../../../../../src/plugins/kibana_react/public';
 import {
--- a/x-pack/plugins/osquery/public/application.tsx
+++ b/x-pack/plugins/osquery/public/application.tsx
@ -6,8 +6,7 @@
 */

 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 { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import React, { useMemo } from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from 'react-router-dom';
--- a/x-pack/plugins/security_solution/public/common/components/and_or_badge/examples/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/and_or_badge/examples/index.stories.tsx
@ -8,7 +8,7 @@
 import { storiesOf } from '@storybook/react';
 import React, { ReactNode } from 'react';
 import { ThemeProvider } from 'styled-components';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
 import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';

 import { AndOrBadge } from '..';
--- a/x-pack/plugins/security_solution/public/common/components/conditions_table/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/conditions_table/index.stories.tsx
@ -8,7 +8,7 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { storiesOf, addDecorator } from '@storybook/react';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 import { createItems, TEST_COLUMNS } from './test_utils';
 import { ConditionsTable } from '.';
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/index.stories.tsx
@ -9,7 +9,7 @@ import { storiesOf, addDecorator } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 import { ExceptionItem } from './';
 import { getExceptionListItemSchemaMock } from '../../../../../../../lists/common/schemas/response/exception_list_item_schema.mock';
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exceptions_viewer_header.stories.tsx
@ -9,7 +9,7 @@ import { storiesOf, addDecorator } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
 import { ExceptionsViewerHeader } from './exceptions_viewer_header';
--- a/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_page/index.test.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { shallow } from 'enzyme';
 import React from 'react';

--- a/x-pack/plugins/security_solution/public/common/components/header_section/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/header_section/index.test.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { mount, shallow } from 'enzyme';
 import React from 'react';

--- a/x-pack/plugins/security_solution/public/common/components/item_details_card/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/item_details_card/index.stories.tsx
@ -8,7 +8,7 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { storiesOf, addDecorator } from '@storybook/react';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 import { ItemDetailsAction, ItemDetailsCard, ItemDetailsPropertySummary } from '.';

--- a/x-pack/plugins/security_solution/public/common/components/text_field_value/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/text_field_value/index.stories.tsx
@ -8,7 +8,7 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { storiesOf, addDecorator } from '@storybook/react';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 import { TextFieldValue } from '.';

--- a/x-pack/plugins/security_solution/public/common/components/threat_match/logic_buttons.stories.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/threat_match/logic_buttons.stories.tsx
@ -9,7 +9,7 @@ import { storiesOf, addDecorator } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 import { LogicButtons } from './logic_buttons';

--- a/x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/utility_bar/utility_bar.test.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { mount, shallow } from 'enzyme';
 import React from 'react';

--- a/x-pack/plugins/security_solution/public/common/lib/theme/use_eui_theme.tsx
+++ b/x-pack/plugins/security_solution/public/common/lib/theme/use_eui_theme.tsx
@ -5,8 +5,10 @@
 * 2.0.
 */

-import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import {
+  euiLightVars as lightTheme,
+  euiDarkVars as darkTheme,
+} from '@kbn/ui-shared-deps-src/theme';

 import { DEFAULT_DARK_MODE } from '../../../../common/constants';
 import { useUiSetting$ } from '../kibana';
--- a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
+++ b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { I18nProvider } from '@kbn/i18n/react';

 import React from 'react';
--- a/x-pack/plugins/security_solution/public/detections/components/rules/severity_badge/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/severity_badge/index.tsx
@ -8,7 +8,7 @@
 import { upperFirst } from 'lodash/fp';
 import React from 'react';
 import { EuiHealth } from '@elastic/eui';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 interface Props {
  value: string;
--- a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/data.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/data.tsx
@ -7,7 +7,7 @@

 import styled from 'styled-components';
 import { EuiHealth } from '@elastic/eui';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
 import React from 'react';

 import { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/components/config_form/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/components/config_form/index.stories.tsx
@ -8,7 +8,7 @@
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { addDecorator, storiesOf } from '@storybook/react';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
 import { EuiCheckbox, EuiSpacer, EuiSwitch, EuiText } from '@elastic/eui';

 import { OperatingSystem } from '../../../../../../../common/endpoint/types';
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/index.stories.tsx
@ -9,7 +9,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
 import { storiesOf } from '@storybook/react';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';
 import { EuiHorizontalRule } from '@elastic/eui';

 import { KibanaContextProvider } from '../../../../../../../../../../src/plugins/kibana_react/public';
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/view_type_toggle/index.stories.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/view_type_toggle/index.stories.tsx
@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { storiesOf, addDecorator } from '@storybook/react';
-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars } from '@kbn/ui-shared-deps-src/theme';

 import { ViewType } from '../../../state';
 import { ViewTypeToggle } from '.';
--- a/x-pack/plugins/security_solution/public/network/components/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/details/index.tsx
@ -5,8 +5,10 @@
 * 2.0.
 */

-import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import {
+  euiLightVars as lightTheme,
+  euiDarkVars as darkTheme,
+} from '@kbn/ui-shared-deps-src/theme';
 import React from 'react';

 import { DEFAULT_DARK_MODE } from '../../../../common/constants';
--- a/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/tooltip_footer.tsx
+++ b/x-pack/plugins/security_solution/public/network/components/embeddables/map_tool_tip/tooltip_footer.tsx
@ -14,7 +14,7 @@ import {
  EuiIcon,
  EuiText,
 } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';
 import styled from 'styled-components';
 import * as i18n from '../translations';

--- a/x-pack/plugins/security_solution/public/overview/components/host_overview/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/host_overview/index.tsx
@ -6,8 +6,10 @@
 */

 import { EuiHorizontalRule } from '@elastic/eui';
-import darkTheme from '@elastic/eui/dist/eui_theme_dark.json';
-import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
+import {
+  euiLightVars as lightTheme,
+  euiDarkVars as darkTheme,
+} from '@kbn/ui-shared-deps-src/theme';
 import { getOr } from 'lodash/fp';
 import React, { useCallback, useMemo } from 'react';

--- a/x-pack/plugins/security_solution/public/resolver/view/use_colors.ts
+++ b/x-pack/plugins/security_solution/public/resolver/view/use_colors.ts
@ -5,10 +5,8 @@
 * 2.0.
 */

-import euiThemeAmsterdamDark from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
-import euiThemeAmsterdamLight from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
+import { darkMode, euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 import { useMemo } from 'react';
-import { useUiSetting } from '../../../../../../src/plugins/kibana_react/public';

 type ResolverColorNames =
  | 'copyableFieldBackground'
@ -31,24 +29,22 @@ type ColorMap = Record<ResolverColorNames, string>;
 * Get access to Kibana-theme based colors.
 */
 export function useColors(): ColorMap {
-  const isDarkMode = useUiSetting('theme:darkMode');
-  const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight;
  return useMemo(() => {
    return {
-      copyableFieldBackground: theme.euiColorLightShade,
-      descriptionText: theme.euiTextColor,
-      full: theme.euiColorFullShade,
-      graphControls: theme.euiColorDarkestShade,
-      graphControlsBackground: theme.euiColorEmptyShade,
-      graphControlsBorderColor: theme.euiColorLightShade,
-      processBackingFill: `${theme.euiColorPrimary}${isDarkMode ? '1F' : '0F'}`, // Add opacity 0F = 6% , 1F = 12%
-      resolverBackground: theme.euiColorEmptyShade,
-      resolverEdge: isDarkMode ? theme.euiColorLightShade : theme.euiColorLightestShade,
-      resolverBreadcrumbBackground: theme.euiColorLightestShade,
-      resolverEdgeText: isDarkMode ? theme.euiColorFullShade : theme.euiColorDarkShade,
-      triggerBackingFill: `${theme.euiColorDanger}${isDarkMode ? '1F' : '0F'}`,
-      pillStroke: theme.euiColorLightShade,
-      linkColor: theme.euiLinkColor,
+      copyableFieldBackground: euiThemeVars.euiColorLightShade,
+      descriptionText: euiThemeVars.euiTextColor,
+      full: euiThemeVars.euiColorFullShade,
+      graphControls: euiThemeVars.euiColorDarkestShade,
+      graphControlsBackground: euiThemeVars.euiColorEmptyShade,
+      graphControlsBorderColor: euiThemeVars.euiColorLightShade,
+      processBackingFill: `${euiThemeVars.euiColorPrimary}${darkMode ? '1F' : '0F'}`, // Add opacity 0F = 6% , 1F = 12%
+      resolverBackground: euiThemeVars.euiColorEmptyShade,
+      resolverEdge: darkMode ? euiThemeVars.euiColorLightShade : euiThemeVars.euiColorLightestShade,
+      resolverBreadcrumbBackground: euiThemeVars.euiColorLightestShade,
+      resolverEdgeText: darkMode ? euiThemeVars.euiColorFullShade : euiThemeVars.euiColorDarkShade,
+      triggerBackingFill: `${euiThemeVars.euiColorDanger}${darkMode ? '1F' : '0F'}`,
+      pillStroke: euiThemeVars.euiColorLightShade,
+      linkColor: euiThemeVars.euiLinkColor,
    };
-  }, [isDarkMode, theme]);
+  }, []);
 }
--- a/x-pack/plugins/security_solution/public/resolver/view/use_cube_assets.ts
+++ b/x-pack/plugins/security_solution/public/resolver/view/use_cube_assets.ts
@ -7,12 +7,10 @@

 import { i18n } from '@kbn/i18n';

+import { euiThemeVars } from '@kbn/ui-shared-deps-src/theme';
 import { ButtonColor } from '@elastic/eui';
-import euiThemeAmsterdamDark from '@elastic/eui/dist/eui_theme_amsterdam_dark.json';
-import euiThemeAmsterdamLight from '@elastic/eui/dist/eui_theme_amsterdam_light.json';
 import { useMemo } from 'react';
 import { ResolverProcessType, NodeDataStatus } from '../types';
-import { useUiSetting } from '../../../../../../src/plugins/kibana_react/public';
 import { useSymbolIDs } from './use_symbol_ids';
 import { useColors } from './use_colors';

@ -24,8 +22,6 @@ export function useCubeAssets(
  isProcessTrigger: boolean
 ): NodeStyleConfig {
  const SymbolIds = useSymbolIDs();
-  const isDarkMode = useUiSetting('theme:darkMode');
-  const theme = isDarkMode ? euiThemeAmsterdamDark : euiThemeAmsterdamLight;
  const colorMap = useColors();

  const nodeAssets: NodeStyleMap = useMemo(
@ -39,7 +35,7 @@ export function useCubeAssets(
        }),
        isLabelFilled: true,
        labelButtonFill: 'primary',
-        strokeColor: theme.euiColorPrimary,
+        strokeColor: euiThemeVars.euiColorPrimary,
      },
      loadingCube: {
        backingFill: colorMap.processBackingFill,
@ -50,7 +46,7 @@ export function useCubeAssets(
        }),
        isLabelFilled: false,
        labelButtonFill: 'primary',
-        strokeColor: theme.euiColorPrimary,
+        strokeColor: euiThemeVars.euiColorPrimary,
      },
      errorCube: {
        backingFill: colorMap.processBackingFill,
@ -61,7 +57,7 @@ export function useCubeAssets(
        }),
        isLabelFilled: false,
        labelButtonFill: 'primary',
-        strokeColor: theme.euiColorPrimary,
+        strokeColor: euiThemeVars.euiColorPrimary,
      },
      runningTriggerCube: {
        backingFill: colorMap.triggerBackingFill,
@ -72,7 +68,7 @@ export function useCubeAssets(
        }),
        isLabelFilled: true,
        labelButtonFill: 'danger',
-        strokeColor: theme.euiColorDanger,
+        strokeColor: euiThemeVars.euiColorDanger,
      },
      terminatedProcessCube: {
        backingFill: colorMap.processBackingFill,
@ -86,7 +82,7 @@ export function useCubeAssets(
        ),
        isLabelFilled: false,
        labelButtonFill: 'primary',
-        strokeColor: theme.euiColorPrimary,
+        strokeColor: euiThemeVars.euiColorPrimary,
      },
      terminatedTriggerCube: {
        backingFill: colorMap.triggerBackingFill,
@ -100,10 +96,10 @@ export function useCubeAssets(
        ),
        isLabelFilled: false,
        labelButtonFill: 'danger',
-        strokeColor: theme.euiColorDanger,
+        strokeColor: euiThemeVars.euiColorDanger,
      },
    }),
-    [SymbolIds, colorMap, theme]
+    [SymbolIds, colorMap]
  );

  if (cubeType === 'terminated') {
--- a/x-pack/plugins/timelines/public/mock/test_providers.tsx
+++ b/x-pack/plugins/timelines/public/mock/test_providers.tsx
@ -5,7 +5,7 @@
 * 2.0.
 */

-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import { euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import { I18nProvider } from '@kbn/i18n/react';

 import React from 'react';
--- a/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/components/transform_list/expanded_row_messages_pane.tsx
@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import { EuiSpacer, EuiBasicTable } from '@elastic/eui';
 // @ts-ignore
 import { formatDate } from '@elastic/eui/lib/services/format';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as theme } from '@kbn/ui-shared-deps-src/theme';

 import { i18n } from '@kbn/i18n';

--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
@ -16,7 +16,7 @@ import {
  EuiIconTip,
  EuiTitle,
 } from '@elastic/eui';
-import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars as lightEuiTheme } from '@kbn/ui-shared-deps-src/theme';
 import { Axis, BarSeries, Chart, CurveType, LineSeries, Settings } from '@elastic/charts';
 import { assign, fill } from 'lodash';
 import { formatMillisForDisplay } from '../../../lib/execution_duration_utils';
--- a/x-pack/plugins/uptime/public/contexts/uptime_theme_context.tsx
+++ b/x-pack/plugins/uptime/public/contexts/uptime_theme_context.tsx
@ -5,9 +5,8 @@
 * 2.0.
 */

-import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+import { euiLightVars, euiDarkVars } from '@kbn/ui-shared-deps-src/theme';
 import React, { createContext, useMemo } from 'react';
-import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts';
 import { UptimeAppColors } from '../apps/uptime_app';