[ML] Remove legacy scss overwrites Single Metric Viewer

x-pack/plugins/ml/public/application/_index.scss

@@ -7,7 +7,6 @@
   // Sub applications
   @import 'data_frame_analytics/index';
   @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
-  @import 'timeseriesexplorer/index';
 
   // Components
   @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly

x-pack/plugins/ml/public/application/explorer/annotation_timeline.tsx

@@ -139,7 +139,7 @@ export const AnnotationTimeline = <T extends { timestamp: number; end_timestamp?
             : startingXPos;
         svg
           .append('rect')
-          .classed('mlAnnotationRect', true)
+          .classed('ml-annotation__rect', true)
           // If annotation is at the end, prevent overflow by shifting it back
           .attr('x', xPos + annotationWidth >= endingXPos ? endingXPos - annotationWidth : xPos)
           .attr('y', 0)

x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx

@@ -15,6 +15,7 @@ import { useCurrentThemeVars } from '../contexts/kibana';
 import type { Annotation, AnnotationsTable } from '../../../common/types/annotations';
 import type { ChartTooltipService } from '../components/chart_tooltip';
 import { Y_AXIS_LABEL_PADDING, Y_AXIS_LABEL_WIDTH } from './constants';
+import { getAnnotationStyles } from '../timeseriesexplorer/styles';
 
 const ANNOTATION_CONTAINER_HEIGHT = 12;
 const ANNOTATION_MIN_WIDTH = 8;
@@ -29,6 +30,8 @@ interface SwimlaneAnnotationContainerProps {
   tooltipService: ChartTooltipService;
 }
 
+const annotationStyles = getAnnotationStyles();
+
 export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> = ({
   chartWidth,
   domain,
@@ -135,7 +138,7 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
         const xPos = d.start >= domain.min ? (xScale(d.start) as number) : startingXPos;
         svg
           .append('rect')
-          .classed('mlAnnotationRect', true)
+          .classed('ml-annotation__rect', true)
           // If annotation is at the end, prevent overflow by shifting it back
           .attr('x', xPos + annotationWidth >= endingXPos ? endingXPos - annotationWidth : xPos)
           .attr('y', 0)
@@ -221,5 +224,5 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chartWidth, domain, annotationsData, tooltipService]);
 
-  return <div ref={canvasRef} />;
+  return <div css={annotationStyles} ref={canvasRef} />;
 };

x-pack/plugins/ml/public/application/styles.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+// Replacement for ./_variables.scss as we aim to remove the scss files
+
+export const mlColors = {
+  critical: '#FE5050',
+  major: '#FBA740',
+  minor: '#FDEC25',
+  warning: '#8BC8FB',
+  lowWarning: '#D2E9F7',
+  unknown: '#C0C0C0',
+};