Deprecate and replace $gl-gray- variables

Deprecate $gl-gray- variables and replace with $gray- variables
to syncronize the use of gray variables.

app/assets/stylesheets/components/rich_content_editor.scss

@@ -6,7 +6,7 @@
   // Toolbar buttons
   .tui-editor-defaultUI-toolbar .toolbar-button {
-    color: $gl-gray-600;
+    color: $gray-500;
     border: 0;
     &:hover,

app/assets/stylesheets/framework/buttons.scss

@@ -229,7 +229,7 @@
   }
   &.btn-icon {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
   .fa-caret-down,
@@ -394,7 +394,7 @@
 }
 .clone-dropdown-btn a {
-  color: $gl-gray-700;
+  color: $gray-700;
   &:hover {
     text-decoration: none;

app/assets/stylesheets/framework/common.scss

@@ -74,7 +74,7 @@
 .hint {
   font-style: italic;
-  color: $gl-gray-200;
+  color: $gray-200;
 }
 .light { color: $gl-text-color; }
@@ -162,13 +162,13 @@ table {
 .loading {
   margin: 20px auto;
   height: 40px;
-  color: $gl-gray-700;
+  color: $gray-700;
   font-size: 32px;
   text-align: center;
 }
 p.time {
-  color: $gl-gray-200;
+  color: $gray-200;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }
@@ -246,7 +246,7 @@ li.note {
 .gitlab-promo {
   a {
-    color: $gl-gray-350;
+    color: $gray-300;
     margin-right: 30px;
   }
 }

app/assets/stylesheets/framework/dropdowns.scss

@@ -410,7 +410,7 @@
       flex-direction: column;
       .reference {
-        color: $gl-gray-400;
+        color: $gray-300;
         margin-top: $gl-padding-4;
       }
     }
@@ -666,25 +666,25 @@
   width: 100%;
   min-height: 30px;
   padding: 0 7px;
-  color: $gl-gray-700;
+  color: $gray-700;
   line-height: 30px;
   border: 1px solid $dropdown-divider-bg;
   border-radius: 2px;
   outline: 0;
   &:focus {
-    color: $gl-gray-700;
+    color: $gray-700;
     border-color: $blue-300;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
     ~ .fa {
-      color: $gl-gray-700;
+      color: $gray-700;
     }
   }
   &:hover {
     ~ .fa {
-      color: $gl-gray-700;
+      color: $gray-700;
     }
   }
 }
@@ -1070,7 +1070,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
       color: $dropdown-title-btn-color;
       &:hover {
-        color: $gl-gray-400;
+        color: $gray-300;
       }
     }
   }

app/assets/stylesheets/framework/files.scss

@@ -183,7 +183,7 @@
         &.line-numbers {
           float: none;
-          border-left: 1px solid $gl-gray-100;
+          border-left: 1px solid $gray-100;
           i {
             float: none;

app/assets/stylesheets/framework/job_log.scss

@@ -17,7 +17,7 @@
 }
 .line-number {
-  color: $gl-gray-500;
+  color: $gray-500;
   padding: 0 $gl-padding-8;
   min-width: $job-line-number-width;
   margin-left: -$job-line-number-margin;
@@ -28,7 +28,7 @@
   &:active,
   &:visited {
     text-decoration: underline;
-    color: $gl-gray-500;
+    color: $gray-500;
   }
 }
@@ -43,7 +43,7 @@
 }
 .log-duration-badge {
-  background: $gl-gray-400;
+  background: $gray-300;
 }
 .loader-animation {

app/assets/stylesheets/framework/selects.scss

@@ -300,7 +300,7 @@
   }
   .group-path {
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 }
@@ -310,7 +310,7 @@
   }
   .project-path {
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 }
@@ -332,7 +332,7 @@
 .namespace-result {
   .namespace-kind {
-    color: $gl-gray-350;
+    color: $gray-300;
     font-weight: $gl-font-weight-normal;
   }

app/assets/stylesheets/framework/stacked_progress_bar.scss

@@ -37,7 +37,7 @@
   .status-neutral {
     background-color: $gray-100;
-    color: $gl-gray-dark;
+    color: $gray-900;
     &:hover {
       background-color: $gray-200;

app/assets/stylesheets/framework/typography.scss

@@ -84,7 +84,7 @@
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
-    color: $gl-gray-700;
+    color: $gray-700;
     vertical-align: middle;
     background-color: $gray-10;
     border-width: 1px;

app/assets/stylesheets/framework/variables.scss

@@ -104,15 +104,6 @@ $t-gray-a-04: rgba($black, 0.04) !default;
 $t-gray-a-06: rgba($black, 0.06) !default;
 $t-gray-a-08: rgba($black, 0.08) !default;
-$gl-gray-100: #ddd !default;
-$gl-gray-200: #ccc !default;
-$gl-gray-350: #aaa !default;
-$gl-gray-400: #999 !default;
-$gl-gray-500: #777 !default;
-$gl-gray-600: #666 !default;
-$gl-gray-700: #555 !default;
-$gl-gray-800: #333 !default;
-
 $green-50: #ecf4ee !default;
 $green-100: #c3e6cd !default;
 $green-200: #91d4a8 !default;
@@ -357,8 +348,6 @@ $gl-text-color-inverted: $white;
 $gl-text-color-secondary-inverted: rgba($white, 0.85);
 $gl-text-color-disabled: $gray-400;
 $gl-grayish-blue: #7f8fa4;
-$gl-gray-dark: #313236;
-$gl-gray-light: #5c5c5c;
 $gl-header-color: #4c4e54;
 $gl-font-size-12: 12px;
 $gl-font-size-14: 14px;

app/assets/stylesheets/framework/zen.scss

@@ -35,7 +35,7 @@
 .zen-control {
   padding: 0;
-  color: $gl-gray-700;
+  color: $gray-700;
   background: none;
   border: 0;
 }

app/assets/stylesheets/notify.scss

@@ -7,12 +7,12 @@ img {
 p.details {
   font-style: italic;
-  color: $gl-gray-500;
+  color: $gray-500;
 }
 .footer > p {
   font-size: small;
-  color: $gl-gray-500;
+  color: $gray-500;
 }
 pre.commit-message {

app/assets/stylesheets/page_bundles/ide.scss

@@ -1080,7 +1080,7 @@ $ide-commit-header-height: 48px;
   max-width: 24px;
   padding: 0;
   margin: 0 ($grid-size / 2);
-  color: var(--ide-text-color-secondary, $gl-gray-light);
+  color: var(--ide-text-color-secondary, $gray-600);
   &:first-child {
     margin-left: 0;

app/assets/stylesheets/pages/branches.scss

@@ -23,7 +23,7 @@
     .bar {
       height: 4px;
-      background-color: $gl-gray-100;
+      background-color: $gray-100;
     }
     .count {
@@ -34,7 +34,7 @@
   .graph-separator {
     width: $graph-separator-width;
     height: 18px;
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
   }
 }

app/assets/stylesheets/pages/clusters.scss

@@ -124,7 +124,7 @@
       background-color: none;
       border: 0;
       font-weight: bold;
-      color: $gl-gray-500;
+      color: $gray-500;
     }
   }
 }

app/assets/stylesheets/pages/diff.scss

@@ -102,7 +102,7 @@
     .file-mode-changed {
       padding: 10px;
-      color: $gl-gray-500;
+      color: $gray-500;
     }
     .suppressed-container {
@@ -181,7 +181,7 @@
       .swipe-wrap {
         overflow: hidden;
-        border-right: 1px solid $gl-gray-400;
+        border-right: 1px solid $gray-300;
         position: absolute;
         display: block;
         top: 13px;
@@ -190,7 +190,7 @@
         &.left-oriented {
           /* only for commit view (different swipe viewer) */
           border-right: 0;
-          border-left: 1px solid $gl-gray-400;
+          border-left: 1px solid $gray-300;
         }
       }

app/assets/stylesheets/pages/environments.scss

@@ -83,7 +83,7 @@
 .x-axis path,
 .y-axis path {
-  stroke: $gl-gray-350;
+  stroke: $gray-300;
 }
 .label-x-axis-line,
@@ -93,7 +93,7 @@
 .y-axis {
   line {
-    stroke: $gl-gray-350;
+    stroke: $gray-300;
     stroke-width: 1;
   }
 }
@@ -117,7 +117,7 @@
 }
 .selected-metric-line {
-  stroke: $gl-gray-dark;
+  stroke: $gray-900;
   stroke-width: 1;
 }

app/assets/stylesheets/pages/events.scss

@@ -94,7 +94,7 @@
         border: 0;
         background: $gray-light;
         border-radius: 0;
-        color: $gl-gray-500;
+        color: $gray-500;
         overflow: hidden;
       }
@@ -111,7 +111,7 @@
     }
     .event-note-icon {
-      color: $gl-gray-500;
+      color: $gray-500;
       float: left;
       font-size: $gl-font-size;
       margin-right: 5px;

app/assets/stylesheets/pages/graph.scss

@@ -43,7 +43,7 @@
   .y-axis-label {
     line {
-      stroke: $gl-gray-350;
+      stroke: $gray-300;
     }
     text {

app/assets/stylesheets/pages/groups.scss

@@ -52,7 +52,7 @@
 .save-group-loader {
   margin-top: $gl-padding-50;
   margin-bottom: $gl-padding-50;
-  color: $gl-gray-700;
+  color: $gray-700;
 }
 .group-nav-container .nav-controls {