Consolidate CSS border color varsscss-variables-clean

The previous values were all basically the same.
Some example values from before:
$border-white-normal: #e3e3e3;
$border-gray-light: #ededed;
$border-gray-normal: #e8e8e8;
$border-gray-dark: #e3e3e3;

Exception was
$border-gray-normal-dashed: #b5b5b5;
which only occurred in one place, so I inlined it with
the actual color we want there

16 files changed, 30 insertions, 42 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 648e1944388..40465adcbfc 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -18,7 +18,7 @@
   width: $award-emoji-width;
   font-size: 14px;
   background-color: $white-light;
-  border: 1px solid $border-white-light;
+  border: 1px solid $border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 6px 12px $award-emoji-menu-shadow;
   pointer-events: none;
@@ -224,7 +224,7 @@
   }
 
   .award-control-icon {
-    color: $border-gray-normal;
+    color: $border-color;
     margin-top: 1px;
     padding: 0 2px;
 
@@ -236,7 +236,7 @@
     }
 
     path {
-      fill: $border-gray-normal;
+      fill: $border-color;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 695ce014659..2137fa83b23 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -111,7 +111,8 @@
 }
 
 @mixin btn-white {
-  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
+  // TODO: confirm border colors. I don't think big deal
+  @include btn-color($white-light, $border-color, $white-normal, $border-color, $white-dark, $border-color, $gl-text-color);
 }
 
 @mixin btn-with-margin {
@@ -354,7 +355,7 @@
   .active {
     box-shadow: $gl-btn-active-background;
 
-    border: 1px solid $border-gray-dark !important;
+    border: 1px solid $border-color !important;
     background-color: $btn-active-gray-light !important;
   }
 }
@@ -391,7 +392,7 @@
 
 .btn-static {
   background-color: $gray-light !important;
-  border: 1px solid $border-gray-normal;
+  border: 1px solid $border-color;
   cursor: default;
 
   &:active {
@@ -469,7 +470,7 @@
 
 .btn-missing {
   color: $gl-text-color-secondary;
-  border: 1px dashed $border-gray-normal-dashed;
+  border: 1px dashed $gray-400;
   border-radius: $border-radius-default;
 
   &:hover,
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 97a9a55c968..b2660710200 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -229,7 +229,7 @@ li.note {
   .progress {
     margin-top: 4px;
     box-shadow: none;
-    background-color: $border-gray-light;
+    background-color: $border-color; // TODO: check this
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index efebbd124d0..b0ab78fd7cf 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -15,11 +15,6 @@ $toggle-sidebar-height: 48px;
 /*
  * Color schema
  */
-$darken-normal-factor: 7%;
-$darken-dark-factor: 10%;
-$darken-border-factor: 5%;
-$darken-border-dashed-factor: 25%;
-
 $white-light: #fff;
 $white-normal: #f0f0f0;
 $white-dark: #eaeaea;
@@ -29,7 +24,7 @@ $gray-lightest: #fdfdfd;
 $gray-light: #fafafa;
 $gray-lighter: #f9f9f9;
 $gray-normal: #f5f5f5;
-$gray-dark: darken($gray-light, $darken-dark-factor);
+$gray-dark: #e1e1e1;
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
 
@@ -180,14 +175,6 @@ $theme-light-red-500: #c24b38;
 $theme-light-red-600: #b03927;
 $theme-light-red-700: #a62e21;
 
-$border-white-light: darken($white-light, $darken-border-factor);
-$border-white-normal: darken($white-normal, $darken-border-factor);
-
-$border-gray-light: darken($gray-light, $darken-border-factor);
-$border-gray-normal: darken($gray-normal, $darken-border-factor);
-$border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
-$border-gray-dark: darken($white-normal, $darken-border-factor);
-
 /*
  * UI elements
  */
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 81216b2b98e..be79f54ea2d 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -586,7 +586,7 @@
   }
 
   .board-card {
-    border: 1px solid $border-gray-dark;
+    border: 1px solid $border-color;
     box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3);
     cursor: pointer;
   }
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 916f6cd3137..8290ef63777 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -59,7 +59,7 @@
     border-radius: 2px 2px 0 0;
     color: $orange-600;
     background-color: $orange-100;
-    border: 1px solid $border-gray-normal;
+    border: 1px solid $border-color;
     padding: 3px 12px;
     margin: auto;
     align-items: center;
@@ -220,7 +220,7 @@
     word-break: break-word;
 
     &:last-child {
-      border-bottom: 1px solid $border-gray-normal;
+      border-bottom: 1px solid $border-color;
     }
 
     &.coverage {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 670e320dbc2..8ac7d606c0b 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -148,7 +148,7 @@
   color: $gl-text-color-secondary;
   padding: 1px $gl-padding-4;
   cursor: pointer;
-  border: 1px solid $border-gray-dark;
+  border: 1px solid $border-color;
   border-radius: $border-radius-default;
   margin-left: 5px;
   font-size: 12px;
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 8ade995525a..71e5fe83781 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -331,7 +331,7 @@
       top: 5px;
       bottom: 0;
       left: -16px;
-      border-left: 2px solid $border-white-normal;
+      border-left: 2px solid $border-color;
     }
 
     .group-row {
@@ -342,7 +342,7 @@
         display: block;
         width: 10px;
         height: 0;
-        border-top: 2px solid $border-white-normal;
+        border-top: 2px solid $border-color;
         position: absolute;
         top: 30px;
         left: -16px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 623fa485ba6..dac25da64a5 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -156,7 +156,7 @@
   .block {
     @include clearfix;
     padding: $gl-padding 0;
-    border-bottom: 1px solid $border-gray-normal;
+    border-bottom: 1px solid $border-color;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $gutter-inner-width;
@@ -331,7 +331,7 @@
 
     .gutter-toggle {
       margin-top: 7px;
-      border-left: 1px solid $border-gray-normal;
+      border-left: 1px solid $border-color;
       text-align: center;
     }
 
@@ -389,7 +389,7 @@
     }
 
     .participants {
-      border-bottom: 1px solid $border-gray-normal;
+      border-bottom: 1px solid $border-color;
     }
 
     .hide-collapsed {
@@ -401,7 +401,7 @@
       height: $sidebar-toggle-height;
       margin-left: 0;
       padding-left: 0;
-      border-bottom: 1px solid $border-gray-dark;
+      border-bottom: 1px solid $border-color;
     }
 
     a.gutter-toggle {
@@ -859,8 +859,8 @@
     background: $white-light;
     margin: 16px -20px 0;
     padding: 16px 20px;
-    border-top: 1px solid $border-gray-light;
-    border-bottom: 1px solid $border-gray-light;
+    border-top: 1px solid $border-color;
+    border-bottom: 1px solid $border-color;
 
     a:hover {
       color: $btn-white-active;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 9f30495a7ef..297d9799972 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -174,7 +174,7 @@ ul.related-merge-requests > li {
 
   .btn {
     background-color: $gray-light;
-    border: 1px solid $border-gray-normal;
+    border: 1px solid $border-color;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 3ca8e943a3a..1e4fb2069be 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -139,7 +139,7 @@ $status-box-line-height: 26px;
     }
 
     .reference {
-      border-top: 1px solid $border-gray-normal;
+      border-top: 1px solid $border-color;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 3343b55d24b..9e8cea49742 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -97,7 +97,7 @@
   color: $orange-600;
   background-color: $orange-100;
   border-radius: $border-radius-default $border-radius-default 0 0;
-  border: 1px solid $border-gray-normal;
+  border: 1px solid $border-color;
   border-bottom: 0;
   padding: 3px 12px;
   margin: auto;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 88984cae513..8f1b29fb63b 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -747,7 +747,7 @@ $note-form-margin-left: 72px;
 .disabled-comment {
   background-color: $gray-light;
   border-radius: $border-radius-base;
-  border: 1px solid $border-gray-normal;
+  border: 1px solid $border-color;
   color: $note-disabled-comment-color;
   padding: 90px 0;
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index bb08440fda8..dfd912f11a3 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -96,7 +96,7 @@
 
       .btn-group.open .btn-default {
         background-color: $white-normal;
-        border-color: $border-white-normal;
+        border-color: $border-color;
       }
 
       .btn .text-center {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 5664f46484e..af873592eb4 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -133,8 +133,8 @@
       &.selected {
         td {
           background: $white-normal;
-          border-top: 1px solid $border-gray-dark;
-          border-bottom: 1px solid $border-gray-dark;
+          border-top: 1px solid $border-color;
+          border-bottom: 1px solid $border-color;
         }
       }
     }
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index bd777c66b56..da887b29712 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -139,7 +139,7 @@
 
       &:hover {
         background-color: $white-normal;
-        border-color: $border-white-normal;
+        border-color: $border-color;
         text-decoration: none;
       }