[8.x] [ML] Migrate ColorRangeLegend from SCSS to emotion. (#199156) (#…

…199274)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Migrate ColorRangeLegend from SCSS to emotion.
(#199156)](#199156)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Walter
Rafelsberger","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-07T09:37:20Z","message":"[ML]
Migrate ColorRangeLegend from SCSS to emotion. (#199156)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/140695\r\n\r\nMigrates SCSS to
emotion for
ColorRangeLegend.\r\n\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/3444fa49-2ef2-4706-b15e-c3e8415c6293\"\r\n/>\r\n\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/a79648a5-1230-41b6-b8f5-c1ff2dc9f996\"\r\nwidth=\"75%\"
/>\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] This was checked for breaking
API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)","sha":"12dc8c1bb84091d7c404b0e29654d56113fc5acb","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","Feature:Data
Frame Analytics","v9.0.0","backport:version","v8.17.0"],"title":"[ML]
Migrate ColorRangeLegend from SCSS to
emotion.","number":199156,"url":"https://github.com/elastic/kibana/pull/199156","mergeCommit":{"message":"[ML]
Migrate ColorRangeLegend from SCSS to emotion. (#199156)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/140695\r\n\r\nMigrates SCSS to
emotion for
ColorRangeLegend.\r\n\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/3444fa49-2ef2-4706-b15e-c3e8415c6293\"\r\n/>\r\n\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/a79648a5-1230-41b6-b8f5-c1ff2dc9f996\"\r\nwidth=\"75%\"
/>\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] This was checked for breaking
API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)","sha":"12dc8c1bb84091d7c404b0e29654d56113fc5acb"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199156","number":199156,"mergeCommit":{"message":"[ML]
Migrate ColorRangeLegend from SCSS to emotion. (#199156)\n\n##
Summary\r\n\r\nPart of
https://github.com/elastic/kibana/issues/140695\r\n\r\nMigrates SCSS to
emotion for
ColorRangeLegend.\r\n\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/3444fa49-2ef2-4706-b15e-c3e8415c6293\"\r\n/>\r\n\r\n<img\r\nsrc=\"https://github.com/user-attachments/assets/a79648a5-1230-41b6-b8f5-c1ff2dc9f996\"\r\nwidth=\"75%\"
/>\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [x] This was checked for breaking
API changes and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)","sha":"12dc8c1bb84091d7c404b0e29654d56113fc5acb"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Walter Rafelsberger <[email protected]>

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';

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>
   );