[ML] Use ml as a prefix for the ML SCSS variables

x-pack/plugins/ml/public/_app.scss

@@ -1,4 +1,4 @@
-// ML has app specific coloring for it's various warning levels. 
+// ML has app specific coloring for it's various warning levels.
 // These are used almost everywhere.
 
 .ml-icon-severity-critical,
@@ -10,21 +10,21 @@
 }
 
 .ml-icon-severity-critical {
-  color: $mchColorCriticalText;
+  color: $mlColorCriticalText;
 }
 
 .ml-icon-severity-major {
-  color: $mchColorMajorText;
+  color: $mlColorMajorText;
 }
 
 .ml-icon-severity-minor {
-  color: $mchColorMinorText;
+  color: $mlColorMinorText;
 }
 
 .ml-icon-severity-warning {
-  color: $mchColorWarningText;
+  color: $mlColorWarningText;
 }
 
 .ml-icon-severity-unknown {
-  color: $mchColorUnknownText;
-}
+  color: $mlColorUnknownText;
+}

x-pack/plugins/ml/public/_variables.scss

@@ -1,11 +1,11 @@
-$mchColorCritical: #fe5050;
-$mchColorMajor: #fba740;
-$mchColorMinor: #fdec25;
-$mchColorWarning: #8bc8fb;
-$mchColorUnknown: #c0c0c0;
+$mlColorCritical: #fe5050;
+$mlColorMajor: #fba740;
+$mlColorMinor: #fdec25;
+$mlColorWarning: #8bc8fb;
+$mlColorUnknown: #c0c0c0;
 
-$mchColorCriticalText: makeHighContrastColor($mchColorCritical, $euiColorEmptyShade);
-$mchColorMajorText: makeHighContrastColor($mchColorMajor, $euiColorEmptyShade);
-$mchColorMinorText: makeHighContrastColor($mchColorMinor, $euiColorEmptyShade);
-$mchColorWarningText: makeHighContrastColor($mchColorWarning, $euiColorEmptyShade);
-$mchColorUnknownText: $euiColorDarkShade;
+$mlColorCriticalText: makeHighContrastColor($mlColorCritical, $euiColorEmptyShade);
+$mlColorMajorText: makeHighContrastColor($mlColorMajor, $euiColorEmptyShade);
+$mlColorMinorText: makeHighContrastColor($mlColorMinor, $euiColorEmptyShade);
+$mlColorWarningText: makeHighContrastColor($mlColorWarning, $euiColorEmptyShade);
+$mlColorUnknownText: $euiColorDarkShade;

x-pack/plugins/ml/public/components/anomalies_table/_anomalies_table.scss

@@ -12,31 +12,31 @@
   // SASSTODO: Should only be three options, logic moved to the JS, where EuiIcon accepts a color
   .ml-icon-severity-critical {
     .euiIcon {
-      fill: $mchColorCriticalText;
+      fill: $mlColorCriticalText;
     }
   }
 
   .ml-icon-severity-major {
     .euiIcon {
-      fill: $mchColorMajorText;
+      fill: $mlColorMajorText;
     }
   }
 
   .ml-icon-severity-minor {
     .euiIcon {
-      fill: $mchColorMinorText;
+      fill: $mlColorMinorText;
     }
   }
 
   .ml-icon-severity-warning {
     .euiIcon {
-      fill: $mchColorWarningText;
+      fill: $mlColorWarningText;
     }
   }
 
   .ml-icon-severity-unknown {
     .euiIcon {
-      fill: $mchColorUnknownText;
+      fill: $mlColorUnknownText;
     }
   }
 

x-pack/plugins/ml/public/components/influencers_list/_influencers_list.scss

@@ -40,37 +40,37 @@
   // SASSTODO: This range of color is too large, needs to be rewritten and variablized
   .progress.critical {
     .progress-bar {
-      background-color: $mchColorCritical;
+      background-color: $mlColorCritical;
     }
     .score-label {
-      border-color: $mchColorCritical;
+      border-color: $mlColorCritical;
     }
   }
 
   .progress.major {
     .progress-bar {
-      background-color: $mchColorMajor;
+      background-color: $mlColorMajor;
     }
     .score-label {
-      border-color: $mchColorMajor;
+      border-color: $mlColorMajor;
     }
   }
 
   .progress.minor {
     .progress-bar {
-      background-color: $mchColorMinor;
+      background-color: $mlColorMinor;
     }
     .score-label {
-      border-color: $mchColorMinor;
+      border-color: $mlColorMinor;
     }
   }
 
   .progress.warning {
     .progress-bar {
-      background-color: $mchColorWarning;
+      background-color: $mlColorWarning;
     }
     .score-label {
-      border-color: $mchColorWarning;
+      border-color: $mlColorWarning;
     }
   }
 

x-pack/plugins/ml/public/explorer/explorer_charts/_explorer_chart.scss

@@ -85,19 +85,19 @@
   }
 
   .anomaly-marker.critical {
-    fill: $mchColorCritical;
+    fill: $mlColorCritical;
   }
 
   .anomaly-marker.major {
-    fill: $mchColorMajor;
+    fill: $mlColorMajor;
   }
 
   .anomaly-marker.minor {
-    fill: $mchColorMinor;
+    fill: $mlColorMinor;
   }
 
   .anomaly-marker.warning {
-    fill: $mchColorWarning;
+    fill: $mlColorWarning;
   }
 
   .anomaly-marker.low {

x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/_job_filter_bar.scss

@@ -1,4 +1,4 @@
-.mchJobFilterBar {
+.mlJobFilterBar {
   // SASSTODO: Dangerou EUI overwrites
   .euiFilterGroup {
     .euiPopover .euiPanel {
@@ -20,4 +20,4 @@
       }
     }
   }
-}
+}

x-pack/plugins/ml/public/jobs/jobs_list/components/job_filter_bar/job_filter_bar.js

@@ -130,7 +130,7 @@ export class JobFilterBar extends Component {
             }}
             filters={filters}
             onChange={this.onChange}
-            className="mchJobFilterBar"
+            className="mlJobFilterBar"
           />
         </EuiFlexItem>
         { this.renderError() || ''}

x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss

@@ -163,19 +163,19 @@
     }
 
     .anomaly-marker.critical {
-      fill: $mchColorCritical;
+      fill: $mlColorCritical;
     }
 
     .anomaly-marker.major {
-      fill: $mchColorMajor;
+      fill: $mlColorMajor;
     }
 
     .anomaly-marker.minor {
-      fill: $mchColorMinor;
+      fill: $mlColorMinor;
     }
 
     .anomaly-marker.warning {
-      fill: $mchColorWarning;
+      fill: $mlColorWarning;
     }
 
     .anomaly-marker.low {