+
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_index.scss b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_index.scss
deleted file mode 100644
index f4e7075ff7b4f..0000000000000
--- a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './tooltip';
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss
deleted file mode 100644
index 6448ceca38c23..0000000000000
--- a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/_tooltip.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.visTooltip,
-.visTooltip__sizingClone {
- @include euiToolTipStyle('s');
- visibility: hidden;
- pointer-events: none;
- position: fixed;
- max-width: $euiSizeXL * 10;
- overflow: hidden;
- padding: 0;
-
- > :last-child {
- margin-bottom: $euiSizeS;
- }
-
- > * {
- margin: $euiSizeS $euiSizeS 0;
- }
-
- table {
- td,
- th {
- text-align: left;
- padding: $euiSizeXS;
- overflow-wrap: break-word;
- word-wrap: break-word;
- }
- }
-}
-
-.visTooltip__header {
- margin: 0 0 $euiSizeS;
- padding: $euiSizeXS $euiSizeS;
- display: flex;
- align-items: center;
-
- &:last-child {
- margin-bottom: 0;
- }
-
- + * {
- margin-top: $euiSizeS;
- }
-}
-
-.visTooltip__labelContainer,
-.visTooltip__valueContainer {
- overflow-wrap: break-word;
- word-wrap: break-word;
-}
-
-.visTooltip__headerIcon {
- margin-right: $euiSizeXS;
-}
-
-.visTooltip__headerText {
- flex: 1 1 100%;
-}
-
-.visTooltip__label {
- // max-width: $euiSizeXL * 3;
- font-weight: $euiFontWeightMedium;
- color: shade($euiColorGhost, 20%);
-}
-
-.visTooltip__sizingClone {
- top: -500px;
- left: -500px;
-}
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/tooltip.styles.ts b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/tooltip.styles.ts
new file mode 100644
index 0000000000000..ad7c48dadaeb7
--- /dev/null
+++ b/src/platform/plugins/private/vis_types/vislib/public/vislib/components/tooltip/tooltip.styles.ts
@@ -0,0 +1,87 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+import { css } from '@emotion/react';
+import { type UseEuiTheme, euiShadow } from '@elastic/eui';
+
+export const vislibTooltipStyles = (euiThemeContext: UseEuiTheme) => {
+ const { euiTheme } = euiThemeContext;
+ return css`
+ .visTooltip,
+ .visTooltip__sizingClone {
+ ${euiShadow(euiThemeContext, 'l')};
+ border-radius: ${euiTheme.border.radius.medium};
+ background-color: ${euiTheme.colors.backgroundBasePlain};
+ border: ${euiThemeContext.euiTheme.border.width.thin} solid
+ ${euiThemeContext.euiTheme.components.tooltipBorderFloating};
+ color: ${euiTheme.colors.textParagraph};
+ z-index: ${euiTheme.levels.toast};
+ overflow-wrap: break-word;
+ visibility: hidden;
+ pointer-events: none;
+ position: fixed;
+ max-width: calc(${euiTheme.size.xl} * 10);
+ overflow: hidden;
+ padding: 0;
+
+ > :last-child {
+ margin-bottom: ${euiTheme.size.s};
+ }
+
+ > * {
+ margin: ${euiTheme.size.s} ${euiTheme.size.s} 0;
+ }
+
+ table {
+ td,
+ th {
+ text-align: left;
+ padding: ${euiTheme.size.xs};
+ overflow-wrap: break-word;
+ }
+ }
+ }
+
+ .visTooltip__header {
+ margin: 0 0 ${euiTheme.size.s};
+ padding: ${euiTheme.size.xs} ${euiTheme.size.s};
+ display: flex;
+ align-items: center;
+ color: ${euiTheme.colors.textParagraph};
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ + * {
+ margin-top: ${euiTheme.size.s};
+ }
+ }
+
+ .visTooltip__labelContainer,
+ .visTooltip__valueContainer {
+ overflow-wrap: break-word;
+ }
+
+ .visTooltip__headerIcon {
+ margin-right: ${euiTheme.size.xs};
+ }
+
+ .visTooltip__headerText {
+ flex: 1 1 100%;
+ }
+
+ .visTooltip__label {
+ font-weight: ${euiTheme.font.weight.medium};
+ }
+
+ .visTooltip__sizingClone {
+ top: -500px;
+ left: -500px;
+ }
+ `;
+};
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/_index.scss b/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/_index.scss
deleted file mode 100644
index 5217bc7300bf5..0000000000000
--- a/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './layout/index';
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_index.scss b/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_index.scss
deleted file mode 100644
index 0820684ccbcf9..0000000000000
--- a/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './layout';
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_layout.scss b/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_layout.scss
deleted file mode 100644
index b470b528d5b22..0000000000000
--- a/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/_layout.scss
+++ /dev/null
@@ -1,331 +0,0 @@
-// Typical layout
-// .visWrapper
-// .visAxis--y
-// .visAxis__spacer--y.visAxis__spacer--y-[position]
-// .visAxis__column--y.visAxis__column--[position]
-// .visAxis__splitTitles--y
-// .visAxis__splitAxes--y
-// .visAxis__spacer--y.visAxis__spacer--y-[position]
-// .visWrapper__column
-// .visAxis--x.visAxis__column--[position]
-// .visAxis__splitAxes--x
-// .visWrapper__chart
-// .visWrapper__alerts
-// .visAxis--x.visAxis__column--[position]
-// .visAxis__splitAxes--x
-// .visAxis__splitTitles--x
-// .visAxis--y
-// .visAxis__spacer--y.visAxis__spacer--y-[position]
-// .visAxis__column--y.visAxis__column--[position]
-// .visAxis__splitAxes--y
-// .visAxis__spacer--y.visAxis__spacer--y-[position]
-
-//
-// LAYOUT ONLY
-// Numbers in here are brittle
-//
-
-//
-// STYLE
-//
-
-// BEM NOTE: These selectors could not be renamed.
-// Most come from an external libray, others are too general for
-// search and replace. The SVG itself doesn't have a class, nor
-// could it be easily found to apply to all chart types.
-// At least wrapping selectors inside .visWrapper will narrow scope.
-
-// sass-lint:disable-block no-mergeable-selectors
-// Keep SVG and non-renamable selectors separately
-.visWrapper {
- display: flex;
- flex: 1 1 100%;
- flex-direction: row;
- min-height: 0;
- min-width: 0;
- overflow: hidden;
- padding: $euiSizeS 0;
-
- svg {
- overflow: visible;
- }
-
- // SVG Element Default Styling
- rect {
- opacity: 1;
-
- &:hover {
- opacity: .8;
- }
- }
-
- circle {
- opacity: 0;
-
- &:hover {
- opacity: 1;
- stroke-width: $euiSizeS;
- stroke-opacity: .8;
- }
- }
-
- .grid > path {
- stroke: $visLineColor;
- }
-
- .label-line {
- fill: none;
- stroke-width: 2px;
- stroke: $visLineColor;
- }
-
- .label-text {
- @include fontSize($euiFontSizeXS);
- font-weight: $euiFontWeightRegular;
- }
-
- .y-axis-div {
- flex: 1 1 $euiSizeL;
- min-width: 1px;
- min-height: $euiSizeM;
- margin: ($euiSizeXS + 1px) 0;
- }
-
- .x-axis-div {
- min-height: 0;
- min-width: 1px;
- margin: 0 ($euiSizeXS + 1px);
- width: 100%;
-
- svg {
- float: left; /* for some reason svg wont get positioned in top left corner of container div without this */
- }
- }
-
- .tick text {
- @include fontSize($euiFontSizeXS - 1px);
- fill: $visTextColor;
- }
-
- .axis-title text {
- @include fontSize($euiFontSizeXS);
- font-weight: $euiFontWeightBold;
- fill: $euiTextColor;
- }
-
- .y-axis-title {
- min-height: ($euiSizeM + 2px);
- min-width: 1px;
- }
-
- .x-axis-title {
- min-width: $euiSize;
- }
-
- .chart-title {
- flex: 1 1 100%;
- min-height: ($euiSizeM + 2px);
- min-width: ($euiSizeM + 2px);
-
- text {
- @include fontSize($euiFontSizeXS - 1px);
- fill: $visTextColor;
- }
- }
-
- .chart {
- flex: 1 1 100%;
- min-height: 0;
- min-width: 0;
- overflow: visible;
- @include euiScrollBar;
- > svg {
- display: block;
- }
- }
-
- .chart-row,
- .chart-column {
- flex: 1 1 auto;
- min-height: 0;
- min-width: 0;
- }
-
- // Needs to come after .y-axis-div
- .visWrapper__chart--first {
- margin-top: 0;
- margin-left: 0;
- }
-
- .visWrapper__chart--last {
- margin-bottom: 0;
- margin-right: 0;
- }
-
- .axis {
- shape-rendering: crispEdges;
- stroke-width: 1px;
-
- line,
- path {
- stroke: $euiBorderColor;
- fill: none;
- shape-rendering: crispEdges;
- }
- }
-
- .chart-label,
- .label-text,
- .chart-text {
- fill: $visTextColor;
- }
-
- /* Brush Styling */
- .brush .extent {
- shape-rendering: crispEdges;
- fill: $visHoverBackgroundColor;
- }
-
- .series > path,
- .series > rect {
- stroke-opacity: 1;
- stroke-width: 0;
- }
-
- .series > path {
- fill-opacity: .8;
- }
-
- .blur_shape {
- // sass-lint:disable-block no-important
- opacity: .3 !important;
- }
-
- .slice {
- stroke-width: calc($euiSizeXS / 2);
- stroke: $euiColorEmptyShade;
-
- &:hover {
- opacity: .8;
- }
- }
-
- .line {
- circle {
- opacity: 1;
-
- &:hover {
- stroke-width: $euiSizeS;
- stroke-opacity: .8;
- }
- }
- }
-
- .endzone {
- pointer-events: none;
- fill: $visHoverBackgroundColor;
- }
-}
-
-.visWrapper__column {
- display: flex;
- flex: 1 0 0;
- flex-direction: column;
- min-height: 0;
- min-width: 0;
-}
-
-.visWrapper__splitCharts--column {
- display: flex;
- flex: 1 0 20px;
- flex-direction: row;
- min-height: 0;
- min-width: 0;
-
- .visWrapper__chart {
- margin-top: 0;
- margin-bottom: 0;
- }
-}
-
-.visWrapper__splitCharts--row {
- display: flex;
- flex-direction: column;
- flex: 1 1 100%;
- min-height: 0;
- min-width: 0;
-
- .visWrapper__chart {
- margin-left: 0;
- margin-right: 0;
- }
-}
-
-.visWrapper__chart {
- display: flex;
- flex: 1 0 0;
- overflow: visible;
- margin: 5px;
- min-height: 0;
- min-width: 0;
-}
-
-// General Axes
-
-.visAxis__column--top .axis-div svg {
- margin-bottom: -5px;
-}
-
-// Y Axes
-
-.visAxis--x,
-.visAxis--y {
- display: flex;
- flex-direction: column;
- min-height: 0;
- min-width: 0;
-}
-
-.visAxis--x {
- overflow: visible;
-}
-
-.visAxis__spacer--y {
- min-height: 0;
-}
-
-.visAxis__column--y {
- display: flex;
- flex-direction: row;
- flex: 1 0 ($euiSizeXL + $euiSizeXS);
- min-height: 0;
- min-width: 0;
-}
-
-.visAxis__splitTitles--y {
- display: flex;
- flex-direction: column;
- min-height: $euiSizeM;
- min-width: 0;
-}
-
-.visAxis__splitTitles--x {
- display: flex;
- flex-direction: row;
- min-height: 1px;
- max-height: $euiSize;
- min-width: $euiSize;
-}
-
-.visAxis__splitAxes--x,
-.visAxis__splitAxes--y {
- display: flex;
- flex-direction: column;
- min-height: ($euiSize + $euiSizeXS);
- min-width: 0;
-}
-
-.visAxis__splitAxes--x {
- flex-direction: row;
- min-height: 0;
-}
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/layout.styles.ts b/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/layout.styles.ts
new file mode 100644
index 0000000000000..c6f3a50aeb57e
--- /dev/null
+++ b/src/platform/plugins/private/vis_types/vislib/public/vislib/lib/layout/layout.styles.ts
@@ -0,0 +1,320 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { css } from '@emotion/react';
+import { type UseEuiTheme, euiFontSize, euiScrollBarStyles } from '@elastic/eui';
+import chroma from 'chroma-js';
+export const vislibLayoutStyles = (euiThemeContext: UseEuiTheme) => {
+ const { euiTheme } = euiThemeContext;
+ const visLineColor = chroma(euiTheme.colors.darkShade).alpha(0.2).css();
+ const visHoverBackgroundColor = chroma(euiTheme.colors.fullShade).alpha(0.1).css();
+
+ return css`
+ // BEM NOTE: These selectors could not be renamed.
+ // Most come from an external libray, others are too general for
+ // search and replace. The SVG itself doesn't have a class, nor
+ // could it be easily found to apply to all chart types.
+ // At least wrapping selectors inside .visWrapper will narrow scope.
+
+ // sass-lint:disable-block no-mergeable-selectors
+ // Keep SVG and non-renamable selectors separately
+ .visWrapper {
+ display: flex;
+ flex: 1 1 100%;
+ flex-direction: row;
+ min-height: 0;
+ min-width: 0;
+ overflow: hidden;
+ padding: ${euiTheme.size.s} 0;
+
+ svg {
+ overflow: visible;
+ }
+
+ // SVG Element Default Styling
+ rect {
+ opacity: 1;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+
+ circle {
+ opacity: 0;
+
+ &:hover {
+ opacity: 1;
+ stroke-width: ${euiTheme.size.s};
+ stroke-opacity: 0.8;
+ }
+ }
+
+ .grid > path {
+ stroke: ${visLineColor};
+ }
+
+ .label-line {
+ fill: none;
+ stroke-width: 2px;
+ stroke: ${visLineColor};
+ }
+
+ .label-text {
+ font-size: ${euiFontSize(euiThemeContext, 'xs').fontSize};
+ font-weight: ${euiTheme.font.weight.regular};
+ }
+
+ .y-axis-div {
+ flex: 1 1 ${euiTheme.size.l};
+ min-width: 1px;
+ min-height: ${euiTheme.size.m};
+ margin: calc(${euiTheme.size.xs} + 1px) 0;
+ }
+
+ .x-axis-div {
+ min-height: 0;
+ min-width: 1px;
+ margin: 0 calc(${euiTheme.size.xs} + 1px);
+ width: 100%;
+
+ svg {
+ float: left; /* for some reason svg wont get positioned in top left corner of container div without this */
+ }
+ }
+
+ .tick text {
+ font-size: calc(${euiFontSize(euiThemeContext, 'xs').fontSize} - 1px);
+ fill: ${euiTheme.colors.darkShade};
+ }
+
+ .axis-title text {
+ font-size: ${euiFontSize(euiThemeContext, 'xs').fontSize};
+ font-weight: ${euiTheme.font.weight.bold};
+ fill: ${euiTheme.colors.textParagraph};
+ }
+
+ .y-axis-title {
+ min-height: calc(${euiTheme.size.m} + 2px);
+ min-width: 1px;
+ }
+
+ .x-axis-title {
+ min-width: ${euiTheme.size.base};
+ }
+
+ .chart-title {
+ flex: 1 1 100%;
+ min-height: calc(${euiTheme.size.m} + 2px);
+ min-width: calc(${euiTheme.size.m} + 2px);
+
+ text {
+ font-size: calc(${euiFontSize(euiThemeContext, 'xs').fontSize} - 1px);
+ fill: ${euiTheme.colors.darkShade};
+ }
+ }
+
+ .chart {
+ flex: 1 1 100%;
+ min-height: 0;
+ min-width: 0;
+ overflow: visible;
+ ${euiScrollBarStyles(euiThemeContext)};
+ > svg {
+ display: block;
+ }
+ }
+
+ .chart-row,
+ .chart-column {
+ flex: 1 1 auto;
+ min-height: 0;
+ min-width: 0;
+ }
+
+ // Needs to come after .y-axis-div
+ .visWrapper__chart--first {
+ margin-top: 0;
+ margin-left: 0;
+ }
+
+ .visWrapper__chart--last {
+ margin-bottom: 0;
+ margin-right: 0;
+ }
+
+ .axis {
+ shape-rendering: crispEdges;
+ stroke-width: 1px;
+
+ line,
+ path {
+ stroke: ${euiTheme.border.color};
+ fill: none;
+ shape-rendering: crispEdges;
+ }
+ }
+
+ .chart-label,
+ .label-text,
+ .chart-text {
+ fill: ${euiTheme.colors.darkShade};
+ }
+
+ /* Brush Styling */
+ .brush .extent {
+ shape-rendering: crispEdges;
+ fill: ${visHoverBackgroundColor};
+ }
+
+ .series > path,
+ .series > rect {
+ stroke-opacity: 1;
+ stroke-width: 0;
+ }
+
+ .series > path {
+ fill-opacity: 0.8;
+ }
+
+ .blur_shape {
+ // sass-lint:disable-block no-important
+ opacity: 0.3 !important;
+ }
+
+ .slice {
+ stroke-width: calc(${euiTheme.size.xs} / 2);
+ stroke: ${euiTheme.colors.emptyShade};
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+
+ .line {
+ circle {
+ opacity: 1;
+
+ &:hover {
+ stroke-width: ${euiTheme.size.s};
+ stroke-opacity: 0.8;
+ }
+ }
+ }
+
+ .endzone {
+ pointer-events: none;
+ fill: ${visHoverBackgroundColor};
+ }
+ }
+
+ .visWrapper__column {
+ display: flex;
+ flex: 1 0 0;
+ flex-direction: column;
+ min-height: 0;
+ min-width: 0;
+ }
+
+ .visWrapper__splitCharts--column {
+ display: flex;
+ flex: 1 0 20px;
+ flex-direction: row;
+ min-height: 0;
+ min-width: 0;
+
+ .visWrapper__chart {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ }
+
+ .visWrapper__splitCharts--row {
+ display: flex;
+ flex-direction: column;
+ flex: 1 1 100%;
+ min-height: 0;
+ min-width: 0;
+
+ .visWrapper__chart {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+
+ .visWrapper__chart {
+ display: flex;
+ flex: 1 0 0;
+ overflow: visible;
+ margin: 5px;
+ min-height: 0;
+ min-width: 0;
+ }
+
+ // General Axes
+
+ .visAxis__column--top .axis-div svg {
+ margin-bottom: -5px;
+ }
+
+ // Y Axes
+
+ .visAxis--x,
+ .visAxis--y {
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+ min-width: 0;
+ }
+
+ .visAxis--x {
+ overflow: visible;
+ }
+
+ .visAxis__spacer--y {
+ min-height: 0;
+ }
+
+ .visAxis__column--y {
+ display: flex;
+ flex-direction: row;
+ flex: 1 0 calc(${euiTheme.size.xl} + ${euiTheme.size.xs});
+ min-height: 0;
+ min-width: 0;
+ }
+
+ .visAxis__splitTitles--y {
+ display: flex;
+ flex-direction: column;
+ min-height: ${euiTheme.size.m};
+ min-width: 0;
+ }
+
+ .visAxis__splitTitles--x {
+ display: flex;
+ flex-direction: row;
+ min-height: 1px;
+ max-height: ${euiTheme.size.base};
+ min-width: ${euiTheme.size.base};
+ }
+
+ .visAxis__splitAxes--x,
+ .visAxis__splitAxes--y {
+ display: flex;
+ flex-direction: column;
+ min-height: calc(${euiTheme.size.base} + ${euiTheme.size.xs});
+ min-width: 0;
+ }
+
+ .visAxis__splitAxes--x {
+ flex-direction: row;
+ min-height: 0;
+ }
+ `;
+};
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/vislib_vis_type.styles.ts b/src/platform/plugins/private/vis_types/vislib/public/vislib/vislib_vis_type.styles.ts
new file mode 100644
index 0000000000000..be320a22dc2d8
--- /dev/null
+++ b/src/platform/plugins/private/vis_types/vislib/public/vislib/vislib_vis_type.styles.ts
@@ -0,0 +1,41 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+import { css } from '@emotion/react';
+
+export const vislibVisTypeStyles = css`
+ .vislib {
+ flex: 1 1 0;
+ display: flex;
+ flex-direction: row;
+ overflow: auto;
+
+ &.vislib--legend-left {
+ flex-direction: row-reverse;
+ }
+
+ &.vislib--legend-right {
+ flex-direction: row;
+ }
+
+ &.vislib--legend-top {
+ flex-direction: column-reverse;
+ }
+
+ &.vislib--legend-bottom {
+ flex-direction: column;
+ }
+ }
+
+ .vislib__chart {
+ display: flex;
+ flex: 1 1 auto;
+ min-height: 0;
+ min-width: 0;
+ }
+`;
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_index.scss b/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_index.scss
deleted file mode 100644
index 1c6b5e669a94b..0000000000000
--- a/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './meter';
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_meter.scss b/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_meter.scss
deleted file mode 100644
index 971eaa0eab2f6..0000000000000
--- a/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/_meter.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.visGauge__meter--outline {
- stroke: $euiBorderColor;
-}
diff --git a/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/meter.styles.ts b/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/meter.styles.ts
new file mode 100644
index 0000000000000..f2c065c723940
--- /dev/null
+++ b/src/platform/plugins/private/vis_types/vislib/public/vislib/visualizations/gauges/meter.styles.ts
@@ -0,0 +1,16 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+import { css } from '@emotion/react';
+import { type UseEuiTheme } from '@elastic/eui';
+
+export const vislibMeterStyles = ({ euiTheme }: UseEuiTheme) => css`
+ .visGauge__meter--outline {
+ stroke: ${euiTheme.border.color};
+ }
+`;
diff --git a/src/platform/plugins/private/vis_types/vislib/tsconfig.json b/src/platform/plugins/private/vis_types/vislib/tsconfig.json
index bd3bce6fd676a..6a14daae53f3c 100644
--- a/src/platform/plugins/private/vis_types/vislib/tsconfig.json
+++ b/src/platform/plugins/private/vis_types/vislib/tsconfig.json
@@ -11,6 +11,7 @@
"public/fixtures/dispatch_heatmap_d3.json",
"public/fixtures/dispatch_heatmap_config.json",
"public/fixtures/dispatch_heatmap_data_point.json",
+ "../../../../../../typings/**/*",
],
"kbn_references": [
"@kbn/core",