Remove duplicate shades of gray and black

18 files changed, 38 insertions, 44 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 1c7b2f4df7c..d87a2620376 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -331,7 +331,7 @@
   margin-left: 10px;
 
   i {
-    color: $gl-icon-color;
+    color: $gl-gray-light;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index d5914b900e2..628e426891e 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -35,7 +35,7 @@
 .dropdown-toggle {
   padding: 6px 8px 6px 10px;
   background-color: $dropdown-toggle-bg;
-  color: $dropdown-toggle-color;
+  color: $gl-text-color;
   font-size: 14px;
   text-align: left;
   border: 1px solid $border-color;
@@ -131,7 +131,7 @@
   font-size: 14px;
   font-weight: normal;
   padding: 8px 0;
-  background-color: $dropdown-bg;
+  background-color: $white-light;
   border: 1px solid $dropdown-border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
@@ -202,7 +202,7 @@
     }
 
     .icon-play {
-      fill: $table-text-gray;
+      fill: $gl-gray-light;
       margin-right: 6px;
       height: 12px;
       width: 11px;
@@ -621,11 +621,11 @@
 
 .dropdown-menu-inner-content {
   display: block;
-  color: $gl-placeholder-color;
+  color: $gl-gray-light;
 }
 
 .dropdown-toggle-text {
   &.is-default {
-    color: $gl-placeholder-color;
+    color: $gl-gray-light;
   }
 }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 25a2b38baaa..89a51959571 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -149,7 +149,7 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-  color: $gl-placeholder-color;
+  color: $gl-gray-light;
 }
 
 .input-group {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index cc2286038c0..74fd97f811e 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -45,7 +45,7 @@ header {
       padding: 0;
 
       .nav > li > a {
-        color: $gl-icon-color;
+        color: $gl-gray-light;
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
@@ -63,7 +63,7 @@ header {
         &:focus,
         &:active {
           background-color: $background-color;
-          color: darken($gl-icon-color, 30%);
+          color: darken($gl-gray-light, 30%);
 
           .todos-pending-count {
             background: darken($todo-alert-blue, 10%);
@@ -88,7 +88,7 @@ header {
         }
 
         &.active {
-          color: $gl-icon-color;
+          color: $gl-gray-light;
         }
       }
     }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index ea77348633d..ea86961eabc 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -317,7 +317,7 @@
 
     .fa-caret-down {
       margin-left: 5px;
-      color: $gl-icon-color;
+      color: $gl-gray-light;
     }
 
     .dropdown {
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
index 85c1385d5d9..fff7d7f7524 100644
--- a/app/assets/stylesheets/framework/page-header.scss
+++ b/app/assets/stylesheets/framework/page-header.scss
@@ -14,7 +14,7 @@
 
   .header-action-buttons {
     i {
-      color: $gl-icon-color;
+      color: $gl-gray-light;
       font-size: 13px;
       margin-right: 3px;
     }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index a1d5f6427f4..4b178a75f58 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -93,7 +93,6 @@ $focus-border-color: #3aabf0;
 $table-border-color: #f0f0f0;
 $background-color: $gray-light;
 $dark-background-color: #f5f5f5;
-$table-text-gray: #8f8f8f;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
 $well-light-border: #f1f1f1;
@@ -113,12 +112,11 @@ $gl-text-orange: #d90;
 $gl-link-color: #3777b0;
 $gl-diff-text-color: #555;
 $gl-dark-link-color: #333;
-$gl-placeholder-color: #8f8f8f;
-$gl-icon-color: $gl-placeholder-color;
+$gl-gray-light: #8f8f8f;
 $gl-grayish-blue: #7f8fa4;
 $gl-gray: $gl-text-color;
 $gl-gray-dark: #313236;
-$gl-gray-light: $gl-placeholder-color;
+$gl-gray-light: $gl-gray-light;
 $gl-header-color: #4c4e54;
 
 /*
@@ -272,7 +270,6 @@ $regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-San
 * Dropdowns
 */
 $dropdown-width: 300px;
-$dropdown-bg: #fff;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
 $dropdown-empty-row-bg: rgba(#000, .04);
@@ -289,7 +286,6 @@ $dropdown-loading-bg: rgba(#fff, .6);
 $dropdown-chevron-size: 10px;
 
 $dropdown-toggle-bg: #fff;
-$dropdown-toggle-color: #5c5c5c;
 $dropdown-toggle-border-color: #e5e5e5;
 $dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 13%);
 $dropdown-toggle-active-border-color: darken($dropdown-toggle-border-color, 14%);
@@ -344,7 +340,6 @@ $note-line2-border: #ddd;
 * Zen
 */
 $zen-control-color: #555;
-$zen-control-hover-color: #111;
 
 /*
 * Calendar
@@ -373,7 +368,6 @@ $personal-access-tokens-disabled-label-color: #bbb;
 /*
 * CI
 */
-$ci-output-bg: #1d1f21;
 $ci-text-color: #c5c8c6;
 $ci-skipped-color: #888;
 
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index e5c7d70d45a..a1e3038b8de 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -57,6 +57,6 @@
   font-size: 36px;
 
   &:hover {
-    color: $zen-control-hover-color;
+    color: $black;
   }
 }
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 0d9cf679e7c..59ba0939785 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -253,7 +253,7 @@
 
 .board-list-count {
   padding: 10px 0;
-  color: $gl-placeholder-color;
+  color: $gl-gray-light;
   font-size: 13px;
 
   > .fa {
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index dcc13f6d74a..bf00b23d787 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -96,7 +96,7 @@
 }
 
 .build-trace {
-  background: $ci-output-bg;
+  background: $black;
   color: $ci-text-color;
   white-space: pre;
   overflow-x: auto;
@@ -257,7 +257,7 @@
 }
 
 .build-light-text {
-  color: $gl-placeholder-color;
+  color: $gl-gray-light;
 }
 
 .build-gutter-toggle {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index c29b5fdea78..c4ee9a51ed5 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -38,7 +38,7 @@
 .text-expander {
   display: inline-block;
   background: $gray-light;
-  color: $gl-placeholder-color;
+  color: $gl-gray-light;
   padding: 0 5px;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
@@ -174,7 +174,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $table-text-gray;
+      fill: $gl-gray-light;
     }
   }
 
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index de3d2ba549f..96aee3a300a 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -64,14 +64,14 @@
 
   .external-url,
   .dropdown-new {
-    color: $table-text-gray;
+    color: $gl-gray-light;
   }
 
   .dropdown-menu {
 
     .fa {
       margin-right: 6px;
-      color: $table-text-gray;
+      color: $gl-gray-light;
     }
   }
 
@@ -82,7 +82,7 @@
 
   .stop-env-link,
   .external-url {
-    color: $table-text-gray;
+    color: $gl-gray-light;
 
     .stop-env-icon {
       font-size: 14px;
@@ -117,7 +117,7 @@
     .badge {
       font-weight: normal;
       background-color: $gray-darker;
-      color: $gl-placeholder-color;
+      color: $gl-gray-light;
       vertical-align: baseline;
     }
   }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 407c0afbac8..6ef7f9c2c1e 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -169,7 +169,7 @@
     }
 
     .no-value {
-      color: $gl-placeholder-color;
+      color: $gl-gray-light;
     }
 
     .sidebar-collapsed-icon {
@@ -333,7 +333,7 @@
   margin-left: 5px;
 
   a {
-    color: $gl-placeholder-color;
+    color: $gl-gray-light;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 6234779ac19..156724f44a8 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -359,7 +359,7 @@
 
     th {
       background-color: $white-light;
-      color: $gl-placeholder-color;
+      color: $gl-gray-light;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index dfc6079bd15..77c523d7310 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -108,7 +108,7 @@
     margin-top: 7px;
 
     .issuable-number {
-      color: $gl-placeholder-color;
+      color: $gl-gray-light;
       margin-right: 5px;
     }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 08062b85504..656dcd92a06 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -117,7 +117,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $table-text-gray;
+      fill: $gl-gray-light;
     }
 
     .fa {
@@ -200,7 +200,7 @@
 
   .duration,
   .finished-at {
-    color: $table-text-gray;
+    color: $gl-gray-light;
     margin: 4px 0;
 
     .fa {
@@ -221,7 +221,7 @@
 
     .btn {
       margin: 0;
-      color: $table-text-gray;
+      color: $gl-gray-light;
     }
 
     .cancel-retry-btns {
@@ -234,10 +234,10 @@
 
     .dropdown-toggle,
     .dropdown-menu {
-      color: $table-text-gray;
+      color: $gl-gray-light;
 
       .fa {
-        color: $table-text-gray;
+        color: $gl-gray-light;
         font-size: 14px;
       }
 
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 51c926608f9..ddee2c95247 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,5 +1,5 @@
 .settings-list-icon {
-  color: $gl-placeholder-color;
+  color: $gl-gray-light;
   font-size: $settings-icon-size;
   line-height: 42px;
 }
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 5084b466722..f3b0608e545 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -102,15 +102,15 @@
 
     &.ci-created,
     &.ci-skipped {
-      color: $table-text-gray;
-      border-color: $table-text-gray;
+      color: $gl-gray-light;
+      border-color: $gl-gray-light;
 
       &:not(span):hover {
-        background-color: rgba( $table-text-gray, .07);
+        background-color: rgba( $gl-gray-light, .07);
       }
 
       svg {
-        fill: $table-text-gray;
+        fill: $gl-gray-light;
       }
     }
   }