From 1640190c34aad0bc0dcb2cda2f4eab4bd729aec1 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter.rafelsberger@elastic.co>
Date: Wed, 6 Nov 2024 15:38:04 +0100
Subject: [PATCH] migrate ColorRangeLegend from SCSS to emotion

---
 .../plugins/ml/public/application/_index.scss |  1 -
 .../_color_range_legend.scss                  | 18 -------------
 .../components/color_range_legend/_index.scss |  1 -
 .../color_range_legend/color_range_legend.tsx | 27 +++++++++++++++++--
 4 files changed, 25 insertions(+), 22 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/application/components/color_range_legend/_color_range_legend.scss
 delete mode 100644 x-pack/plugins/ml/public/application/components/color_range_legend/_index.scss

diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss
index 3025b8f7d921b..95fbbf4cb112a 100644
--- a/x-pack/plugins/ml/public/application/_index.scss
+++ b/x-pack/plugins/ml/public/application/_index.scss
@@ -11,7 +11,6 @@
   // Components
   @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
-  @import 'components/color_range_legend/index';
   @import 'components/entity_cell/index';
   @import 'components/influencers_list/index';
   @import 'components/job_selector/index';
diff --git a/x-pack/plugins/ml/public/application/components/color_range_legend/_color_range_legend.scss b/x-pack/plugins/ml/public/application/components/color_range_legend/_color_range_legend.scss
deleted file mode 100644
index b164e605a2488..0000000000000
--- a/x-pack/plugins/ml/public/application/components/color_range_legend/_color_range_legend.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/* Overrides for d3/svg default styles */
-.mlColorRangeLegend {
-  text {
-    @include fontSize($euiFontSizeXS - 2px);
-    fill: $euiColorDarkShade;
-  }
-
-  .axis path {
-    fill: none;
-    stroke: none;
-  }
-
-  .axis line {
-    fill: none;
-    stroke: $euiColorMediumShade;
-    shape-rendering: crispEdges;
-  }
-}
diff --git a/x-pack/plugins/ml/public/application/components/color_range_legend/_index.scss b/x-pack/plugins/ml/public/application/components/color_range_legend/_index.scss
deleted file mode 100644
index c7cd3faac0dcf..0000000000000
--- a/x-pack/plugins/ml/public/application/components/color_range_legend/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'color_range_legend';
diff --git a/x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx b/x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx
index f6a301f5eacce..9c121853cf6b4 100644
--- a/x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx
+++ b/x-pack/plugins/ml/public/application/components/color_range_legend/color_range_legend.tsx
@@ -7,12 +7,36 @@
 
 import type { FC } from 'react';
 import React, { useEffect, useRef } from 'react';
+import { css } from '@emotion/react';
 import d3 from 'd3';
 
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 
+import { euiThemeVars } from '@kbn/ui-theme';
+
 const COLOR_RANGE_RESOLUTION = 10;
 
+// Overrides for d3/svg default styles
+const cssOverride = css({
+  // Override default font size and color for axis
+  text: {
+    fontSize: `calc(${euiThemeVars.euiFontSizeXS} - 2px)`,
+    fill: euiThemeVars.euiColorDarkShade,
+  },
+  // Override default styles for axis lines
+  '.axis': {
+    path: {
+      fill: 'none',
+      stroke: 'none',
+    },
+    line: {
+      fill: 'none',
+      stroke: euiThemeVars.euiColorMediumShade,
+      shapeRendering: 'crispEdges',
+    },
+  },
+});
+
 interface ColorRangeLegendProps {
   colorRange: (d: number) => string;
   justifyTicks?: boolean;
@@ -65,7 +89,6 @@ export const ColorRangeLegend: FC<ColorRangeLegendProps> = ({
 
     const wrapper = d3
       .select(d3Container.current)
-      .classed('mlColorRangeLegend', true)
       .attr('width', wrapperWidth)
       .attr('height', wrapperHeight)
       .append('g')
@@ -144,7 +167,7 @@ export const ColorRangeLegend: FC<ColorRangeLegendProps> = ({
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <svg ref={d3Container} />
+        <svg ref={d3Container} css={cssOverride} />
       </EuiFlexItem>
     </EuiFlexGroup>
   );