Add CSS variables to support Dark Mode in Environments

app/assets/stylesheets/page_bundles/environments.scss

@@ -8,24 +8,24 @@
 
     .external-url,
     .dropdown-new {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
     }
 
     .build-link,
     .ref-name {
-      color: $gl-text-color;
+      color: var(--gray-900, $gray-900);
     }
 
     .folder-icon {
       margin-right: 3px;
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
       display: inline-block;
       vertical-align: text-top;
     }
 
     .folder-name {
       cursor: pointer;
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
       display: inline-block;
     }
 
@@ -74,17 +74,17 @@
 
 .x-axis path,
 .y-axis path {
-  stroke: $gray-300;
+  stroke: var(--gray-300, $gray-300);
 }
 
 .label-x-axis-line,
 .label-y-axis-line {
-  stroke: $border-color;
+  stroke: var(--gray-100, $gray-100);
 }
 
 .y-axis {
   line {
-    stroke: $gray-300;
+    stroke: var(--gray-300, $gray-300);
     stroke-width: 1;
   }
 }
@@ -94,13 +94,13 @@
 }
 
 .rect-text-metric {
-  fill: $white;
+  fill: var(--white, $white);
   stroke-width: 1;
-  stroke: $gray-darkest;
+  stroke: var(--gray-600, $gray-600);
 }
 
 .rect-axis-text {
-  fill: $white;
+  fill: var(--white, $white);
 }
 
 .text-metric {
@@ -108,18 +108,18 @@
 }
 
 .selected-metric-line {
-  stroke: $gray-900;
+  stroke: var(--gray-900, $gray-900);
   stroke-width: 1;
 }
 
 .deployment-line {
-  stroke: $black;
+  stroke: var(--white, $white);
   stroke-width: 1;
 }
 
 .divider-line {
   stroke-width: 1;
-  stroke: $gray-darkest;
+  stroke: var(--gray-600, $gray-600);
 }
 
 .environments-actions {

ee/app/assets/stylesheets/page_bundles/environments.scss

@@ -4,7 +4,7 @@
  * Deploy boards
 */
 .deploy-board {
-  background-color: $gray-light;
+  background-color: var(--gray-50, $gray-50);
   min-height: 20px;
 
   > .loading-icon,
@@ -64,7 +64,7 @@
   }
 
   .deploy-board-legend .legend-text {
-    color: $gl-text-color;
+    color: var(--gray-900, $gray-900);
     font-size: $gl-font-size-small;
     font-weight: $gl-font-weight-bold;
     line-height: $gl-line-height-14;
@@ -81,7 +81,7 @@
 
   i {
     cursor: pointer;
-    color: $layout-link-gray;
+    color: var(--gray-200, $gray-200);
     padding-right: 10px;
   }
 }
@@ -90,7 +90,7 @@
   margin-left: $btn-side-margin;
 
   .dropdown.open & {
-    background: $white-normal;
+    background: var(--gray-50, $gray-50);
     outline: 0;
   }
 
@@ -102,7 +102,7 @@
     }
 
     &.chevron {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
     }
   }
 }
@@ -114,7 +114,7 @@
 }
 
 .alert-error-message {
-  color: $red-500;
+  color: var(--red-500, $red-500);
   vertical-align: middle;
 }
 
@@ -131,7 +131,7 @@
 }
 
 .canary-deployment-callout {
-  border-bottom: 1px solid $border-white-normal;
+  border-bottom: 1px solid var(--gray-500, $gray-500);
   display: flex;
 
   @include media-breakpoint-down(sm) {
@@ -145,39 +145,39 @@
 
   &-message {
     max-width: 600px;
-    color: $gray-500;
+    color: var(--gray-500, $gray-500);
   }
 
   &-close {
-    color: $gray-500;
+    color: var(--gray-500, $gray-500);
     cursor: pointer;
   }
 
   &-button {
-    border-color: $blue-500;
-    color: $blue-500;
+    border-color: var(--blue-500, $blue-500);
+    color: var(--blue-500, $blue-500);
 
     &:not(:disabled):not(.disabled):active {
-      background-color: $blue-200;
-      border: 2px solid $blue-600;
-      color: $blue-700;
+      background-color: var(--blue-200, $blue-200);
+      border: 2px solid var(--blue-600, $blue-600);
+      color: var(--blue-700, $blue-700);
       height: 34px;
       padding: 5px 9px;
     }
 
     &:focus {
-      background-color: $blue-100;
-      border: 2px solid $blue-500;
-      box-shadow: 0 0 4px 1px $blue-200;
-      color: $blue-600;
+      background-color: var(--blue-500, $blue-500);
+      border: 2px solid var(--blue-500, $blue-500);
+      box-shadow: 0 0 4px 1px var(--blue-200, $blue-200);
+      color: var(--blue-600, $blue-600);
       height: 34px;
       padding: 5px 9px;
     }
 
     &:hover {
-      background-color: $blue-100;
-      border: 2px solid $blue-500;
-      color: $blue-600;
+      background-color: var(--blue-500, $blue-500);
+      border: 2px solid var(--blue-500, $blue-500);
+      color: var(--blue-600, $blue-600);
       height: 34px;
       padding: 5px 9px;
     }