From 3b037310c51ad1cc452693a5d035d2d330f32f08 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 13 Mar 2019 22:32:29 -0700
Subject: [PATCH 1/3] ml fixes for dark mode

---
 packages/kbn-ui-framework/dist/kui_dark.css   |  38 +++---
 packages/kbn-ui-framework/dist/kui_light.css  |  18 +--
 .../src/components/button/_button.scss        |  12 +-
 x-pack/plugins/ml/public/_variables.scss      |  10 +-
 .../field_data_card/_field_data_card.scss     |  28 ++---
 .../field_title_bar/_field_title_bar.scss     |   2 +-
 .../job_select_list/_job_select_list.scss     | 116 +++++++-----------
 .../job_select_list/job_select_list.html      |   2 +-
 x-pack/plugins/ml/public/index.scss           |   3 +
 .../components/job_details/_job_details.scss  |   4 +-
 .../group_list/_group_list.scss               |   2 +-
 .../event_rate_chart_directive.js             |   9 +-
 .../fields_selection/_fields_selection.scss   |   3 +-
 .../_index_selection_population.scss          |   3 +-
 .../create_job/create_job_chart_directive.js  |   7 +-
 .../create_job/create_job_chart_directive.js  |   7 +-
 .../_timeseriesexplorer.scss                  |  48 ++++----
 .../timeseries_chart/timeseries_chart.js      |  14 +--
 x-pack/plugins/ml/public/util/theme_colors.js |  26 ++++
 19 files changed, 167 insertions(+), 185 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/util/theme_colors.js

diff --git a/packages/kbn-ui-framework/dist/kui_dark.css b/packages/kbn-ui-framework/dist/kui_dark.css
index 0565eeebba03c..3c06ce5b19e81 100644
--- a/packages/kbn-ui-framework/dist/kui_dark.css
+++ b/packages/kbn-ui-framework/dist/kui_dark.css
@@ -56,10 +56,6 @@
  * 4. Fix an IE bug which causes the last child to overflow the container.
  * 5. Fixing this bug means we now need to align the children to the right.
  */
-:focus:not([class^="eui"]) {
-  -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate;
-          animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate; }
-
 /**
  * 1. Required for IE11.
  */
@@ -226,7 +222,7 @@ main {
  * 1. Override Bootstrap.
  */
 .kuiButton--primary {
-  color: #FFF;
+  color: #000;
   background-color: #1BA9F5; }
   .kuiButton--primary:not(a):enabled:focus {
     color: #FFF; }
@@ -234,29 +230,25 @@ main {
     /* 1 */
     color: #FFF; }
   .kuiButton--primary:enabled:hover {
-    color: #FFF !important;
-    /* 1 */
+    color: #000 !important;
     background-color: #098dd4; }
   a.kuiButton--primary:not(.kuiButton-isDisabled):hover {
     /* 1 */
-    color: #FFF !important;
-    /* 1 */
+    color: #000 !important;
     background-color: #098dd4; }
   .kuiButton--primary:enabled:active {
-    color: #FFF !important;
-    /* 1 */
+    color: #000 !important;
     background-color: #098dd4; }
   a.kuiButton--primary:not(.kuiButton-isDisabled):active {
     /* 1 */
-    color: #FFF !important;
-    /* 1 */
+    color: #000 !important;
     background-color: #098dd4; }
 
 /**
  * 1. Override Bootstrap.
  */
 .kuiButton--success {
-  color: #FFF;
+  color: #000;
   background-color: #7DE2D1; }
   .kuiButton--success:not(a):enabled:focus {
     color: #FFF; }
@@ -264,21 +256,21 @@ main {
     /* 1 */
     color: #FFF; }
   .kuiButton--success:enabled:hover {
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #53d9c2; }
   a.kuiButton--success:not(.kuiButton-isDisabled):hover {
     /* 1 */
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #53d9c2; }
   .kuiButton--success:enabled:active {
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #53d9c2; }
   a.kuiButton--success:not(.kuiButton-isDisabled):active {
     /* 1 */
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #53d9c2; }
 
@@ -330,7 +322,7 @@ main {
  * 1. Override Bootstrap.
  */
 .kuiButton--warning {
-  color: #FFF;
+  color: #000;
   background-color: #FFCE7A; }
   .kuiButton--warning:not(a):enabled:focus {
     z-index: 1;
@@ -352,21 +344,21 @@ main {
     /* 3 */
     color: #FFF; }
   .kuiButton--warning:enabled:hover {
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #ffbb47; }
   a.kuiButton--warning:not(.kuiButton-isDisabled):hover {
     /* 1 */
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #ffbb47; }
   .kuiButton--warning:enabled:active {
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #ffbb47; }
   a.kuiButton--warning:not(.kuiButton-isDisabled):active {
     /* 1 */
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #ffbb47; }
   .kuiButton--warning:disabled {
diff --git a/packages/kbn-ui-framework/dist/kui_light.css b/packages/kbn-ui-framework/dist/kui_light.css
index f7451a9836ed8..f935e4559fe26 100644
--- a/packages/kbn-ui-framework/dist/kui_light.css
+++ b/packages/kbn-ui-framework/dist/kui_light.css
@@ -56,10 +56,6 @@
  * 4. Fix an IE bug which causes the last child to overflow the container.
  * 5. Fixing this bug means we now need to align the children to the right.
  */
-:focus:not([class^="eui"]) {
-  -webkit-animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate;
-          animation: 350ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards focusRingAnimate; }
-
 /**
  * 1. Required for IE11.
  */
@@ -235,21 +231,17 @@ main {
     color: #FFF; }
   .kuiButton--primary:enabled:hover {
     color: #FFF !important;
-    /* 1 */
     background-color: #004d81; }
   a.kuiButton--primary:not(.kuiButton-isDisabled):hover {
     /* 1 */
     color: #FFF !important;
-    /* 1 */
     background-color: #004d81; }
   .kuiButton--primary:enabled:active {
     color: #FFF !important;
-    /* 1 */
     background-color: #004d81; }
   a.kuiButton--primary:not(.kuiButton-isDisabled):active {
     /* 1 */
     color: #FFF !important;
-    /* 1 */
     background-color: #004d81; }
 
 /**
@@ -330,7 +322,7 @@ main {
  * 1. Override Bootstrap.
  */
 .kuiButton--warning {
-  color: #FFF;
+  color: #000;
   background-color: #F5A700; }
   .kuiButton--warning:not(a):enabled:focus {
     z-index: 1;
@@ -352,21 +344,21 @@ main {
     /* 3 */
     color: #FFF; }
   .kuiButton--warning:enabled:hover {
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #c28400; }
   a.kuiButton--warning:not(.kuiButton-isDisabled):hover {
     /* 1 */
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #c28400; }
   .kuiButton--warning:enabled:active {
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #c28400; }
   a.kuiButton--warning:not(.kuiButton-isDisabled):active {
     /* 1 */
-    color: #FFF !important;
+    color: #000 !important;
     /* 1 */
     background-color: #c28400; }
   .kuiButton--warning:disabled {
diff --git a/packages/kbn-ui-framework/src/components/button/_button.scss b/packages/kbn-ui-framework/src/components/button/_button.scss
index 4a15a71328fab..dca1de3cf7ded 100644
--- a/packages/kbn-ui-framework/src/components/button/_button.scss
+++ b/packages/kbn-ui-framework/src/components/button/_button.scss
@@ -91,7 +91,7 @@
  * 1. Override Bootstrap.
  */
 .kuiButton--primary {
-  color: $buttonDefaultTextColor;
+  color: chooseLightOrDarkText($buttonPrimaryBackgroundColor, #FFF, #000);
   background-color: $buttonPrimaryBackgroundColor;
 
   @include kuiButtonFocus {
@@ -99,7 +99,7 @@
   }
 
   @include kuiButtonHoverAndActive {
-    color: $buttonDefaultTextColor !important; /* 1 */
+    color: chooseLightOrDarkText($buttonPrimaryHoverBackgroundColor, #FFF, #000) !important /* 1 */;
     background-color: $buttonPrimaryHoverBackgroundColor;
   }
 }
@@ -108,7 +108,7 @@
  * 1. Override Bootstrap.
  */
 .kuiButton--success {
-  color: $buttonDefaultTextColor;
+  color: chooseLightOrDarkText($buttonSuccessBackgroundColor, #FFF, #000);
   background-color: $buttonSuccessBackgroundColor;
 
   @include kuiButtonFocus {
@@ -116,7 +116,7 @@
   }
 
   @include kuiButtonHoverAndActive {
-    color: $buttonDefaultTextColor !important; /* 1 */
+    color: chooseLightOrDarkText($buttonSuccessHoverBackgroundColor, #FFF, #000) !important; /* 1 */
     background-color: $buttonSuccessHoverBackgroundColor;
   }
 }
@@ -144,7 +144,7 @@
  * 1. Override Bootstrap.
  */
 .kuiButton--warning {
-  color: $buttonDefaultTextColor;
+  color: chooseLightOrDarkText($buttonWarningBackgroundColor, #FFF, #000);
   background-color: $buttonWarningBackgroundColor;
 
   @include kuiButtonFocus {
@@ -153,7 +153,7 @@
   }
 
   @include kuiButtonHoverAndActive {
-    color: $buttonDefaultTextColor !important; /* 1 */
+    color: chooseLightOrDarkText($buttonWarningHoverBackgroundColor, #FFF, #000) !important; /* 1 */
     background-color: $buttonWarningHoverBackgroundColor;
   }
 
diff --git a/x-pack/plugins/ml/public/_variables.scss b/x-pack/plugins/ml/public/_variables.scss
index 159a1ffd45dd5..94d79ee2c1540 100644
--- a/x-pack/plugins/ml/public/_variables.scss
+++ b/x-pack/plugins/ml/public/_variables.scss
@@ -1,8 +1,8 @@
-$mlColorCritical: #fe5050;
-$mlColorMajor: #fba740;
-$mlColorMinor: #fdec25;
-$mlColorWarning: #8bc8fb;
-$mlColorUnknown: #c0c0c0;
+$mlColorCritical: #DD0A73;
+$mlColorMajor: #E2543D;
+$mlColorMinor: #FEC514;
+$mlColorWarning: #0077CC;
+$mlColorUnknown: #535966;
 
 $mlColorCriticalText: makeHighContrastColor($mlColorCritical, $euiColorEmptyShade);
 $mlColorMajorText: makeHighContrastColor($mlColorMajor, $euiColorEmptyShade);
diff --git a/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss b/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
index ee125cd392d18..19063d92639d2 100644
--- a/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
+++ b/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
@@ -1,44 +1,44 @@
 // SASSTODO: This entire sass file needs to be rewritten, using a color blind viz palette and proper vars.
-// This will need to be done in a more thorough cleanup. 
+// This will need to be done in a more thorough cleanup.
 
 .ml-field-data-card {
   width: 360px;
   height: 435px;
 
   .boolean {
-    background-color: #e6c220;
+    background-color: $euiColorVis5;
   }
 
   .date {
-    background-color: #f98510;
+    background-color: $euiColorVis7;
   }
 
   .document_count {
-    background-color: #db1374;
+    background-color: $euiColorVis2;
   }
 
   .geo_point {
-    background-color: #461a0a;
+    background-color: $euiColorVis8;
   }
 
   .ip {
-    background-color: #490092;
+    background-color: $euiColorVis3;
   }
 
   .keyword {
-    background-color: #00b3a4;
+    background-color: $euiColorVis0;
   }
 
   .number {
-    background-color: #3185fc;
+    background-color: $euiColorVis1;
   }
 
   .text {
-    background-color: #920000;
+    background-color: $euiColorVis9;
   }
 
   .type-other, .unknown {
-    background-color: #bfa180;
+    background-color: $euiColorVis6;
   }
 
   // Use euiPanel styling
@@ -110,12 +110,12 @@
 
       .x.axis path, .x.axis line {
         fill: none;
-        stroke: #cccccc;
+        stroke: $euiBorderColor;
         shape-rendering: crispEdges;
       }
 
       .area {
-        fill: #3185fc;
+        fill: $euiColorVis1;
       }
     }
 
@@ -134,12 +134,12 @@
     }
 
     .bar {
-      stroke: #ffffff;
+      stroke: $euiColorEmptyShade;
     }
 
     .axis path, .axis line {
       fill: none;
-      stroke: #cccccc;
+      stroke: $euiBorderColors;
       shape-rendering: crispEdges;
     }
   }
diff --git a/x-pack/plugins/ml/public/components/field_title_bar/_field_title_bar.scss b/x-pack/plugins/ml/public/components/field_title_bar/_field_title_bar.scss
index 0fa087deacf91..ce39ada02d141 100644
--- a/x-pack/plugins/ml/public/components/field_title_bar/_field_title_bar.scss
+++ b/x-pack/plugins/ml/public/components/field_title_bar/_field_title_bar.scss
@@ -1,5 +1,5 @@
 .ml-field-title-bar {
-  color: $euiColorEmptyShade;
+  color: $euiColorGhost;
   @include euiFontSizeL;
   text-align: center;
   border-radius: $euiBorderRadius $euiBorderRadius 0px 0px;
diff --git a/x-pack/plugins/ml/public/components/job_select_list/_job_select_list.scss b/x-pack/plugins/ml/public/components/job_select_list/_job_select_list.scss
index 5dc70430d4dbf..660a3b18071dd 100644
--- a/x-pack/plugins/ml/public/components/job_select_list/_job_select_list.scss
+++ b/x-pack/plugins/ml/public/components/job_select_list/_job_select_list.scss
@@ -4,8 +4,8 @@
 // SASSTODO: EXTREMELY DANGEROUS OVERWRITE
 // Little worried about touching it now
 navbar {
-  padding: 10px;
-  background-color: #EFF0F1;
+  padding: $euiSizeS;
+  background: $euiColorLightestShade;
 }
 
 // SASSTODO: EXTREMELY DANGEROUS OVERWRITE
@@ -19,13 +19,13 @@ navbar button[disabled] {
   margin: -9px -14px;
 
   .header {
-    padding: 9px 14px;
-    border-bottom: 1px solid #eeeeee;
+    padding: $euiSizeS $euiSize;
+    border-bottom: $euiBorderThin;
   }
+
   .footer {
-    text-align: center;
-    padding: 9px;
-    border-top: 1px solid #eee;
+    padding: $euiSizeS;
+    border-top: $euiBorderThin;
 
     .kuiButton--primary:focus {
       background-color: #0079a5;
@@ -73,11 +73,11 @@ navbar button[disabled] {
   }
 
   .select-list {
+    @include euiScrollBar;
     max-height: 400px;
     overflow-y: auto;
     overflow-x: hidden;
-
-    background-color: #F5F7FA;
+    background-color: $euiColorEmptyShade;
 
     .list-section-title {
       margin: 14px;
@@ -85,15 +85,15 @@ navbar button[disabled] {
     }
 
     .list-section {
-      border: 1px solid #e0e0e0;
-      background-color: #ffffff;
-      margin: 14px;
-      margin-top: 5px;
-      padding: 10px;
-      border-radius: 3px;
+      border: $euiBorderThin;
+      margin: $euiSize;
+      margin-top: $euiSizeXS;
+      padding: $euiSizeS;
+      border-radius: $euiBorderRadius;
     }
+
     .list-section-single {
-      margin: -1px;
+      margin: 0;
       border-radius: 0px;
       border: 0px;
     }
@@ -116,40 +116,34 @@ navbar button[disabled] {
       }
 
       .job-row-inner {
-        display: inline-block;
-        font-size: 13px;
-        font-weight: normal;
-        color: #444444;
-        white-space: nowrap;
+        @include euiFontSizeXS;
 
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        white-space: nowrap;
         margin: 0px;
         padding: 0px;
-        line-height: 20px;
 
         // SASSTODO: Replace with proper selector
         & > label > div {
           width: 280px;
           display: inline-block;
           vertical-align: top;
-          height: 30px;
+          height: $euiSizeXL;
           padding-top: 6px;
           overflow: hidden;
           text-overflow: ellipsis;
           padding-right: 4px;
 
           .disabled-job {
-            color: #cccccc;
+            color: $euiColorMediumShade;
           }
         }
 
         // SASSTODO: Replace with proper selector
         & > label > div:nth-child(2) {
           width: 310px;
-          border-left: 1px solid #eee;
-          border-right: 1px solid #eee;
-          padding-left: 4px;
-          padding-top: 6px;
-          margin-left: -3px;
 
           .disabled-job {
             background-color: #cccccc;
@@ -168,8 +162,9 @@ navbar button[disabled] {
       }
 
       .gant-bar {
-        background-color: #79adda;
-        height: 14px;
+        margin-top: $euiSizeXS;
+        background-color: $euiColorSecondary;
+        height: $euiSizeS;
         border-radius: 2px;
       }
 
@@ -229,15 +224,15 @@ navbar button[disabled] {
 
       .gant-back-edge {
         height: 18px;
-        border-left: 1px solid #d6d6d6;
-        border-right: 1px solid #d6d6d6;
+        border-left: $euiBorderThin;
+        border-right: $euiBorderThin;
         margin-bottom: -16px;
         padding-top: 9px;
 
         // SASSTODO: Needs a poper selector
         div {
           height: 1px;
-          border-top: 1px dashed #d6d6d6;
+          border-top: $euiBorderEditable;
         }
       }
     }
@@ -246,7 +241,7 @@ navbar button[disabled] {
 
         // SASSTODO: Needs a poper selector
         & > label > div {
-          background-color: #f2f2f2;
+          background-color: $euiColorLightestShade;
         }
       }
     }
@@ -274,41 +269,28 @@ navbar button[disabled] {
   }
 
   .ml-job-select-btn-label {
-    background-color:#9c9c9c;
-    color: #ffffff;
+    background: $euiColorMediumShade;
+    color: chooseLightOrDarkText($euiColorMediumShade, $euiColorGhost, #000);
     display:inline-block;
-    padding:0px 10px;
-    border: 0px solid #ecf0f1;
-    border-top-style: solid;
-    border-right-style: none;
-    border-bottom-style: solid;
-    border-left-style: solid;
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
-    height: 34px;
-    line-height:33px;
-    font-size: 12px;
+    padding:0px $euiSizeS;
+    border-top-left-radius: $euiBorderRadius;
+    border-bottom-left-radius: $euiBorderRadius;
+    height: $euiSizeXXL;
+    line-height: $euiSizeXXL;
+    font-size: $euiFontSizeXS;
   }
 
   .ml-job-select-btn {
-    width: 300px;
-    height: 34px;
-    text-align: left;
-    color: #444444;
-    background-color: white;
-    border: 1px solid #ffffff;
-    border-left-width: 0px;
-    border-radius: 0px 4px 4px 0px;
-    padding: 6px 16px;
-    padding-left: 10px;
-    transition: border-color ease-in-out .15s;
-    font-size: 14px;
-    line-height: 20px;
-    cursor: pointer;
+    @include euiFormControlStyle;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
     .ml-job-select-btn-text {
-      float: left;
       width: 260px;
+      height: $euiSizeXXL;
+      line-height: $euiSizeXXL;
+      font-size: $euiFontSizeXS;
       overflow-x: hidden;
       display: inline-flex;
       white-space: nowrap;
@@ -321,19 +303,13 @@ navbar button[disabled] {
     }
 
     .caret {
-      float: right;
       margin-top: 6px;
       display:inline-block;
     }
   }
 
   .ml-job-select-btn:hover, .ml-job-select-btn:focus, .ml-job-select-btn:active {
-    color: #444444;
-    background-color: #ffffff;
-    border-color: #0079a5;
-    border-left-width: 1px;
-    padding-left: 9px;
-    transform: none;
+    animation: none;
   }
 
   .ml-job-select-btn:focus {
diff --git a/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html b/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
index 29b16648c01aa..c328531718b42 100644
--- a/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
+++ b/x-pack/plugins/ml/public/components/job_select_list/job_select_list.html
@@ -129,7 +129,7 @@
     ></button>
     <button
       ng-click="closePopover()"
-      class="kuiButton kuiButton--primary"
+      class="kuiButton kuiButton--hollow"
       aria-label="{{ ::'xpack.ml.jobSelectList.cancelButtonAriaLabel' | i18n: { defaultMessage: 'Cancel'} }}"
       i18n-id="xpack.ml.jobSelectList.cancelButtonLabel"
       i18n-default-message="Cancel"
diff --git a/x-pack/plugins/ml/public/index.scss b/x-pack/plugins/ml/public/index.scss
index c31c1c2804c96..9147b3db230f9 100644
--- a/x-pack/plugins/ml/public/index.scss
+++ b/x-pack/plugins/ml/public/index.scss
@@ -4,6 +4,9 @@
 // ML needs EUI card styling till it fully adopts React components
 @import '@elastic/eui/src/components/panel/variables';
 @import '@elastic/eui/src/components/panel/mixins';
+@import '@elastic/eui/src/components/form/form_control_layout/mixins';
+@import '@elastic/eui/src/components/form/variables';
+@import '@elastic/eui/src/components/form/mixins';
 
 // ML has it's own variables for coloring
 @import 'variables';
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
index f5cb7aef87d9c..2264dcf96f10c 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/job_details/_job_details.scss
@@ -20,8 +20,7 @@
   .job-section {
     overflow: auto;
     padding: 5px 15px;
-    background-color: #FBFBFB;
-    border: 1px solid #ecf0f1;
+    background-color: $euiColorLightestShade;
     border-radius: $euiBorderRadius;
     margin: $euiSizeXS 0px;
 
@@ -43,7 +42,6 @@
       .euiTableRow {
         .euiTableRowCell {
           vertical-align: top;
-          border-bottom: 1px solid #EEEEEE;
 
           .euiTableCellContent__text {
             word-wrap: break-word;
diff --git a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_group_list.scss b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_group_list.scss
index a0d4ed68fa323..c908b41a9d179 100644
--- a/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_group_list.scss
+++ b/x-pack/plugins/ml/public/jobs/jobs_list/components/multi_job_actions/group_selector/group_list/_group_list.scss
@@ -10,7 +10,7 @@
     cursor: pointer;
 
     &:focus {
-      background-color: #eef6f9;
+      background-color: $euiFocusBackgroundColor;
       box-shadow: none;
     }
 
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/event_rate_chart_directive.js b/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/event_rate_chart_directive.js
index 0921924e3ccd5..8e90165153c0f 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/event_rate_chart_directive.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/event_rate_chart/event_rate_chart_directive.js
@@ -19,6 +19,7 @@ import moment from 'moment';
 import { TimeBuckets } from 'ui/time_buckets';
 import { numTicksForDateFormat } from 'plugins/ml/util/chart_utils';
 
+import { euiColorForTheme, mlThemeColors } from 'plugins/ml/util/theme_colors';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
@@ -170,7 +171,7 @@ module.directive('mlEventRateChart', function () {
         .attr('y', 0)
         .attr('height', barChartHeight)
         .attr('width', vizWidth)
-        .style('fill', '#FFFFFF');
+        .style('fill', euiColorForTheme('euiColorEmptyShade'));
 
       // Add border round plot area.
       barChartGroup.append('rect')
@@ -178,7 +179,7 @@ module.directive('mlEventRateChart', function () {
         .attr('y', 0)
         .attr('height', barChartHeight)
         .attr('width', vizWidth)
-        .style('stroke', '#cccccc')
+        .style('stroke', euiColorForTheme('euiBorderColor'))
         .style('fill', 'none')
         .style('stroke-width', 1);
 
@@ -210,7 +211,7 @@ module.directive('mlEventRateChart', function () {
       barChartGroup.selectAll('bar')
         .data(data)
         .enter().append('rect')
-        .style('fill', '#32a7c2')
+        .style('fill', euiColorForTheme('euiColorSecondary'))
         .attr('class', 'bar')
         .attr('x', (d) => { return barChartXScale(d.time); })
         .attr('width', cellWidth)
@@ -242,7 +243,7 @@ module.directive('mlEventRateChart', function () {
       // Set up the color scale to use for indicating score.
       const color = d3.scale.threshold()
         .domain([3, 25, 50, 75, 100])
-        .range(['#d2e9f7', '#8bc8fb', '#ffdd00', '#ff7e00', '#fe5050']);
+        .range(Object.values(mlThemeColors));
 
       swimlaneGroup.select('.swimlane-cells').remove();
 
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_fields_selection.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_fields_selection.scss
index 2ff22b7e99abd..986113611d521 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_fields_selection.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/_fields_selection.scss
@@ -2,10 +2,11 @@
 
 .fields-selection {
   .selection-list-container {
+    @include euiFontSizeXS;
+    @include euiScrollBar;
     max-height: 250px;
     overflow: auto;
     padding: $euiSizeXS $euiSizeS;
-    @include euiFontSizeXS;
     color: $euiColorDarkShade;
     background-color: $euiColorEmptyShade;
     background-image: none;
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index_selection_population.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index_selection_population.scss
index 8179dc2c06b86..80ef9a64a4d9a 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index_selection_population.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/_index_selection_population.scss
@@ -2,10 +2,11 @@
 
 .fields-selection-population {
   .selection-list-container {
+    @include euiFontSizeXS;
+    @include euiScrollBar;
     max-height: 250px;
     overflow: auto;
     padding: $euiSizeXS $euiSizeS;
-    @include euiFontSizeXS;
     color: $euiColorDarkShade;
     background-color: $euiColorEmptyShade;
     background-image: none;
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_chart_directive.js b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_chart_directive.js
index 0f9ec3900fc86..61297b88683b9 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_chart_directive.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/create_job_chart_directive.js
@@ -17,6 +17,7 @@ import moment from 'moment';
 
 import { TimeBuckets } from 'ui/time_buckets';
 import { drawLineChartDots, numTicksForDateFormat } from 'plugins/ml/util/chart_utils';
+import { euiColorForTheme, mlThemeColors } from 'plugins/ml/util/theme_colors';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
@@ -172,7 +173,7 @@ module.directive('mlMultiMetricJobChart', function () {
         .attr('y', 0)
         .attr('height', lineChartHeight)
         .attr('width', vizWidth)
-        .style('fill', '#FFFFFF');
+        .style('fill', euiColorForTheme('euiColorEmptyShade'));
 
       // Add border round plot area.
       lineChartGroup.append('rect')
@@ -180,7 +181,7 @@ module.directive('mlMultiMetricJobChart', function () {
         .attr('y', 0)
         .attr('height', lineChartHeight)
         .attr('width', vizWidth)
-        .style('stroke', '#cccccc')
+        .style('fill', euiColorForTheme('euiBorderColor'))
         .style('fill', 'none')
         .style('stroke-width', 1);
 
@@ -232,7 +233,7 @@ module.directive('mlMultiMetricJobChart', function () {
       // Set up the color scale to use for indicating score.
       const color = d3.scale.threshold()
         .domain([3, 25, 50, 75, 100])
-        .range(['#d2e9f7', '#8bc8fb', '#ffdd00', '#ff7e00', '#fe5050']);
+        .range(Object.values(mlThemeColors));
 
       swimlaneGroup.select('.swimlane-cells').remove();
 
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job_chart_directive.js b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job_chart_directive.js
index 13cd21daa6bba..b08d9556585b3 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job_chart_directive.js
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/create_job_chart_directive.js
@@ -20,6 +20,7 @@ import { TimeBuckets } from 'ui/time_buckets';
 import { numTicksForDateFormat } from '../../../../../util/chart_utils';
 import { mlEscape } from '../../../../../util/string_utils';
 import { mlChartTooltipService } from '../../../../../components/chart_tooltip/chart_tooltip_service';
+import { euiColorForTheme, mlThemeColors } from 'plugins/ml/util/theme_colors';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
@@ -181,7 +182,7 @@ module.directive('mlPopulationJobChart', function (i18n) {
         .attr('y', 0)
         .attr('height', chartHeight)
         .attr('width', vizWidth)
-        .style('fill', '#FFFFFF');
+        .style('fill', euiColorForTheme('euiColorEmptyShade'));
 
       // Add border round plot area.
       chartGroup.append('rect')
@@ -189,7 +190,7 @@ module.directive('mlPopulationJobChart', function (i18n) {
         .attr('y', 0)
         .attr('height', chartHeight)
         .attr('width', vizWidth)
-        .style('stroke', '#cccccc')
+        .style('fill', euiColorForTheme('euiColorBorderColor'))
         .style('fill', 'none')
         .style('stroke-width', 1);
 
@@ -269,7 +270,7 @@ module.directive('mlPopulationJobChart', function (i18n) {
       // Set up the color scale to use for indicating score.
       const color = d3.scale.threshold()
         .domain([3, 25, 50, 75, 100])
-        .range(['#d2e9f7', '#8bc8fb', '#ffdd00', '#ff7e00', '#fe5050']);
+        .range(Object.values(mlThemeColors));
 
       swimlaneGroup.select('.swimlane-cells').remove();
 
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss b/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
index eec3db7fac889..b5d62cd377312 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss
@@ -113,8 +113,8 @@
     }
 
     .chart-border-highlight {
-      stroke: $euiColorDarkShade;
-      stroke-width: 2;
+      stroke: $euiBorderColor;
+      stroke-width: 1;
     }
     .chart-border-highlight:hover {
       opacity: 1;
@@ -125,13 +125,13 @@
     }
 
     .area.bounds {
-      fill: rgba(50, 167, 194, 0.25); // Needs variable
+      fill: transparentize($euiColorSecondary, .8); // Needs variable
       pointer-events: none;
     }
 
     .values-line {
       fill: none;
-      stroke: #32a7c2; // Needs variable
+      stroke: $euiColorSecondary; // Needs variable
       stroke-width: 2;
       pointer-events: none;
     }
@@ -142,7 +142,7 @@
     }
 
     .values-dots circle {
-      fill: #32a7c2; // Needs variable
+      fill: $euiColorSecondary; // Needs variable
       stroke-width: 0;
     }
 
@@ -158,13 +158,13 @@
     .metric-value {
       opacity: 1;
       fill: transparent;
-      stroke: #32a7c2;
+      stroke: $euiColorSecondary;
       stroke-width: 0px;
     }
 
     .anomaly-marker {
       stroke-width: 1px;
-      stroke: #aaaaaa; // Needs variable
+      stroke: $euiColorEmptyShade; // Needs variable
     }
 
     .anomaly-marker.critical {
@@ -184,7 +184,7 @@
     }
 
     .anomaly-marker.low {
-      fill: #d2e9f7; // Needs variable
+      fill: $mlColorUnknown; // Needs variable
     }
 
     .metric-value:hover,
@@ -192,7 +192,7 @@
     .anomaly-marker.highlighted {
       stroke-width: 6px;
       stroke-opacity: 0.65;
-      stroke: #32a7c2;
+      stroke: $euiColorSecondary;
     }
 
     rect.scheduled-event-marker {
@@ -218,7 +218,7 @@
         }
 
         rect {
-          fill: $euiColorLightestShade;
+          fill: $euiColorEmptyShade;
         }
       }
 
@@ -250,7 +250,7 @@
       }
 
       .area.context {
-        fill: rgba(50, 167, 194, 0.25); // Needs variable
+        fill: transparentize($euiColorSecondary, .8); // Needs variable
       }
 
       .values-line {
@@ -263,20 +263,23 @@
 
       .mask {
         polygon {
-          fill-opacity: 0.1;
+          fill: $euiColorEmptyShade;
+          fill-opacity: .2;
         }
 
+        // Color of the graphing bound when not selected
         .area.bounds {
-          fill: #d6d6d6;
+          fill: $euiColorLightestShade;
         }
 
+        // Color of the line drawn within the bounds when not selected
         .values-line {
           stroke-width: 1;
-          stroke: #b8b8b8;
+          stroke: $euiColorLightShade;
         }
 
         .values-dots circle {
-          fill: #b8b8b8;
+          fill: $euiColorDarkShade;
           stroke-width: 0;
         }
       }
@@ -292,14 +295,13 @@
     }
 
     .brush .extent {
-      stroke: #aaaaaa;
       fill-opacity: 0;
       shape-rendering: crispEdges;
     }
 
     .brush .extent {
-      stroke: $euiColorDarkShade;
-      stroke-width: 2;
+      stroke: $euiColorSecondary;
+      stroke-width: 1;
       cursor: move;
     }
 
@@ -307,9 +309,6 @@
       opacity: 1;
     }
 
-    .top-border {
-      fill: $euiColorEmptyShade;
-    }
 
     foreignObject.brush-handle {
       pointer-events: none;
@@ -317,8 +316,9 @@
     }
 
     div.brush-handle-inner {
-      border: 1px solid $euiColorDarkShade;
-      background-color: $euiColorLightShade;
+      border: 1px solid $euiColorSecondary;
+      background-color: $euiColorSecondary;
+      color: chooseLightOrDarkText($euiColorSecondary, $euiColorGhost, #000);
       height: 70px;
       width: 10px;
       text-align: center;
@@ -340,7 +340,7 @@
     rect.brush-handle {
       stroke-width: 1;
       stroke: $euiColorDarkShade;
-      fill: $euiColorLightShade;
+      fill: $euiColorDarkShade;
       pointer-events: none;
     }
 
diff --git a/x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js b/x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
index 16e409c462561..18f355ff3470a 100644
--- a/x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
+++ b/x-pack/plugins/ml/public/timeseriesexplorer/components/timeseries_chart/timeseries_chart.js
@@ -76,12 +76,13 @@ const ZOOM_INTERVAL_OPTIONS = [
 // Set up the color scale to use for indicating score.
 const anomalyColorScale = d3.scale.threshold()
   .domain([3, 25, 50, 75, 100])
+  // These are lightened versions of variables.scss file in ml/public
   .range(['#d2e9f7', '#8bc8fb', '#ffdd00', '#ff7e00', '#fe5050']);
 
 // Create a gray-toned version of the color scale to use under the context chart mask.
 const anomalyGrayScale = d3.scale.threshold()
   .domain([3, 25, 50, 75, 100])
-  .range(['#dce7ed', '#b0c5d6', '#b1a34e', '#b17f4e', '#c88686']);
+  .range(['#535966', '#0077CC', '#FEC514', '#E2543D', '#DD0A73']);
 
 function getSvgHeight() {
   return focusHeight + contextChartHeight + swimlaneHeight + chartSpacing + margin.top + margin.bottom;
@@ -1013,11 +1014,6 @@ const TimeseriesChartIntl = injectI18n(class TimeseriesChart extends React.Compo
       .attr('x', 0)
       .attr('width', 10);
 
-    const topBorder = contextGroup.append('rect')
-      .attr('class', 'top-border')
-      .attr('y', -2)
-      .attr('height', contextChartLineTopMargin);
-
     // Draw the brush handles using SVG foreignObject elements.
     // Note these are not supported on IE11 and below, so will not appear in IE.
     const leftHandle = contextGroup.append('foreignObject')
@@ -1039,9 +1035,6 @@ const TimeseriesChartIntl = injectI18n(class TimeseriesChart extends React.Compo
         mask.reveal(brushExtent);
         leftHandle.attr('x', contextXScale(brushExtent[0]) - 10);
         rightHandle.attr('x', contextXScale(brushExtent[1]) + 0);
-
-        topBorder.attr('x', contextXScale(brushExtent[0]) + 1);
-        topBorder.attr('width', contextXScale(brushExtent[1]) - contextXScale(brushExtent[0]) - 2);
       }
 
       setBrushVisibility(show);
@@ -1089,9 +1082,6 @@ const TimeseriesChartIntl = injectI18n(class TimeseriesChart extends React.Compo
       const brushHandles = d3.selectAll('.brush-handle-inner');
       brushHandles.style('visibility', visibility);
 
-      const topBorder = d3.selectAll('.top-border');
-      topBorder.style('visibility', visibility);
-
       const border = d3.selectAll('.chart-border-highlight');
       border.style('visibility', visibility);
     }
diff --git a/x-pack/plugins/ml/public/util/theme_colors.js b/x-pack/plugins/ml/public/util/theme_colors.js
new file mode 100644
index 0000000000000..443247d42de5a
--- /dev/null
+++ b/x-pack/plugins/ml/public/util/theme_colors.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import chrome from '../../../../../src/legacy/ui/public/chrome';
+const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+export const euiColorForTheme = (euiColor) => {
+  if (IS_DARK_THEME) {
+    return euiDarkVars[euiColor];
+  } else {
+    return euiLightVars[euiColor];
+  }
+};
+
+// These should match the sass values defined in ml/variables.scss
+export const mlThemeColors = {
+  mlColorUnknown: '535966',
+  mlColorWarning: '#0077CC',
+  mlColorMinor: '#FEC514',
+  mlColorMajor: '#E2543D',
+  mlColorCritical: '#DD0A73',
+};

From d6013372eb0028f86cd799b05955339c0b9c5270 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Wed, 13 Mar 2019 22:54:05 -0700
Subject: [PATCH 2/3] more dark mode fixes

---
 .../multi_metric/create_job/_create_job.scss   | 18 +++++++++---------
 .../population/create_job/_create_job.scss     | 17 ++++++++---------
 .../single_metric/create_job/_create_job.scss  | 16 ++++++++--------
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
index 864a8b6c44d4d..1450c36a7f55a 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/multi_metric/create_job/_create_job.scss
@@ -112,7 +112,7 @@
     display: flex;
     margin-bottom: 25px;
     position: relative;
-    background-color: rgba(255, 255, 255, 0.75);
+    background-color: $euiColorLightestShade;
     transition: opacity 0.5s ;
 
     .status-label {
@@ -178,32 +178,32 @@ ml-multi-metric-job-chart {
   }
 
   .area.bounds {
-    fill: rgba(50, 167, 194, 0.25);
+    fill: transparentize($euiColorSecondary, .8);
   }
 
   .values-line {
     fill: none;
-    stroke: #32a7c2;
+    stroke: $euiColorSecondary;
     stroke-width: 2;
   }
 
   .values-dots circle {
-    fill: #32a7c2;
+    fill: $euiColorSecondary;
     stroke-width: 0;
   }
 
   .metric-value {
     opacity: 1;
-    fill: #32a7c2;
+    fill: $euiColorSecondary;
   }
 
   .context-chart .axis text {
     font-size: 10px;
-    fill: #333333;
+    fill: $euiTextColor;
   }
 
   .area.context {
-    fill: #e4e4e4;
+    fill: $euiColorLightestShade;
   }
 
   .swimlane .axis text {
@@ -237,7 +237,7 @@ ml-multi-metric-job-chart {
     min-width: 70px;
     margin-bottom: -5px;
     margin-left: 49px;
-    background-color: #FFFFFF;
+    background-color: $euiColorEmptyShade;
     height: 2px;
     border-radius: 0px;
   }
@@ -246,7 +246,7 @@ ml-multi-metric-job-chart {
     text-align: right;
     line-height: 18px;
     transition: none;
-    background-color: #32a7c2;
+    background-color: $euiColorSecondary;
   }
 }
 
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
index 1c67c51a6a37b..7cca3b5eab371 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/population/create_job/_create_job.scss
@@ -148,7 +148,7 @@
     display: flex;
     margin-bottom: 25px;
     position: relative;
-    background-color: rgba(255, 255, 255, 0.75);
+    fill: transparentize($euiColorSecondary, .8);
     transition: opacity 0.5s ;
 
     .status-label {
@@ -213,33 +213,32 @@ ml-population-job-chart {
   }
 
   .area.bounds {
-    fill: rgba(50, 167, 194, 0.25);
+    fill: transparentize($euiColorSecondary, .8);
   }
 
   .values-line {
     fill: none;
-    stroke: #32a7c2;
+    stroke: $euiColorSecondary;
     stroke-width: 2;
   }
 
   .values-dots circle {
-    fill: #32a7c2;
+    fill: $euiColorSecondary;
     stroke-width: 0;
-    fill-opacity: 0.5;
   }
 
   .metric-value {
     opacity: 1;
-    fill: #32a7c2;
+    fill: $euiColorSecondary;
   }
 
   .context-chart .axis text {
     font-size: 10px;
-    fill: #333333;
+    fill: $euiTextColor;
   }
 
   .area.context {
-    fill: #e4e4e4;
+    fill: $euiColorLightestShade;
   }
 
   .swimlane .axis text {
@@ -282,7 +281,7 @@ ml-population-job-chart {
     text-align: right;
     line-height: 18px;
     transition: none;
-    background-color: #32a7c2;
+    background-color: $euiColorSecondary;
   }
 }
 
diff --git a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
index c5a3916d5c2d2..085e2dfac7bb2 100644
--- a/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
+++ b/x-pack/plugins/ml/public/jobs/new_job/simple/single_metric/create_job/_create_job.scss
@@ -74,7 +74,7 @@
       display: flex;
       margin-bottom: 52px;
       position: relative;
-      background-color: rgba(255, 255, 255, 0.75);
+      fill: transparentize($euiColorSecondary, .8);
 
       .status-label {
         width: 50%;
@@ -129,32 +129,32 @@
       }
 
       .area.bounds {
-        fill: rgba(50, 167, 194, 0.25);
+        fill: transparentize($euiColorSecondary, .8);
       }
 
       .values-line {
         fill: none;
-        stroke: #32a7c2;
+        stroke: $euiColorSecondary;
         stroke-width: 2;
       }
 
       .values-dots circle {
-        fill: #32a7c2;
+        fill: $euiColorSecondary;
         stroke-width: 0;
       }
 
       .metric-value {
         opacity: 1;
-        fill: #32a7c2;
+        fill: $euiColorSecondary;
       }
 
       .context-chart .axis text {
         font-size: 10px;
-        fill: #333333;
+        fill: $euiTextColor;
       }
 
       .area.context {
-        fill: #e4e4e4;
+        fill: $euiColorLightestShade;
       }
 
       .swimlane .axis text {
@@ -197,7 +197,7 @@
         text-align: right;
         line-height: 18px;
         transition: none;
-        background-color: #32a7c2;
+        background-color: $euiColorSecondary;
       }
     }
   }

From 8db72ae927dd1bcd95edf6b0b178c3f6e97af1b4 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Thu, 14 Mar 2019 09:06:56 -0700
Subject: [PATCH 3/3] bad var

---
 .../ml/public/components/field_data_card/_field_data_card.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss b/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
index 19063d92639d2..64d9403d69caa 100644
--- a/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
+++ b/x-pack/plugins/ml/public/components/field_data_card/_field_data_card.scss
@@ -139,7 +139,7 @@
 
     .axis path, .axis line {
       fill: none;
-      stroke: $euiBorderColors;
+      stroke: $euiBorderColor;
       shape-rendering: crispEdges;
     }
   }