Remove jquery.scss; Combine multiple duplicate grays into global gray variables; Remove unused styles in common.scss

29 files changed, 59 insertions, 254 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 39ffabb3ea6..4ffb3e9ab42 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -27,7 +27,6 @@
 @import 'framework/header';
 @import 'framework/highlight';
 @import 'framework/issue_box';
-@import 'framework/jquery';
 @import 'framework/lists';
 @import 'framework/logo';
 @import 'framework/markdown_area';
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index a1349c61542..fcf282a7d7c 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -69,7 +69,7 @@
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: $identicon-fg-color;
+  color: $gl-gray-700;
   background-color: $gray-darker;
 
   // Sizes
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index f1314821c69..ab62ca07573 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -369,7 +369,7 @@
 }
 
 .clone-dropdown-btn a {
-  color: $dropdown-link-color;
+  color: $gl-gray-700;
 
   &:hover {
     text-decoration: none;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 72e27f9ad16..28dda65091d 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -43,7 +43,7 @@
   color: $brand-info;
 }
 
-.hint { font-style: italic; color: $hint-color; }
+.hint { font-style: italic; color: $gl-gray-400; }
 .light { color: $gl-text-color; }
 
 .slead {
@@ -70,13 +70,6 @@ pre {
     padding: 0;
   }
 
-  &.card.card-body-pre {
-    border: 1px solid $gray-darker;
-    background: $gray-light;
-    border-radius: 0;
-    color: $well-pre-color;
-  }
-
   &.wrap {
     word-break: break-word;
     white-space: pre-wrap;
@@ -121,49 +114,24 @@ hr {
   text-decoration: none;
 }
 
-.back-link {
-  font-size: 14px;
-}
-
 table {
   a code {
     position: relative;
     top: -2px;
     margin-right: 3px;
   }
-
-  td.permission-x {
-    background: $table-permission-x-bg !important;
-    text-align: center;
-  }
 }
 
 .loading {
   margin: 20px auto;
   height: 40px;
-  color: $loading-color;
+  color: $gl-gray-700;
   font-size: 32px;
   text-align: center;
 }
 
-span.update-author {
-  display: block;
-  color: $update-author-color;
-  font-weight: $gl-font-weight-normal;
-  font-style: italic;
-
-  strong {
-    font-weight: $gl-font-weight-bold;
-    font-style: normal;
-  }
-}
-
-.field_with_errors {
-  display: inline;
-}
-
 p.time {
-  color: $time-color;
+  color: $gl-gray-400;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }
@@ -197,40 +165,11 @@ li.note {
   background-color: inherit;
 }
 
-.project_member_show {
-  td:first-child {
-    color: $project-member-show-color;
-  }
-}
-
-.rss-icon {
-  img {
-    width: 24px;
-    vertical-align: top;
-  }
-
-  strong {
-    line-height: 24px;
-  }
-}
-
 .show-suppressed-diff,
 .show-all-commits {
   cursor: pointer;
 }
 
-.git_error_tips {
-  @extend .col-lg-6;
-  text-align: left;
-  margin-top: 40px;
-
-  pre {
-    background: $white-light;
-    border: 0;
-    font-size: 12px;
-  }
-}
-
 .error-message {
   padding: 10px;
   background: $red-400;
@@ -258,7 +197,7 @@ li.note {
 
 .gitlab-promo {
   a {
-    color: $gl-promo-color;
+    color: $gl-gray-350;
     margin-right: 30px;
   }
 }
@@ -271,19 +210,6 @@ li.note {
   }
 }
 
-.control-group {
-  .controls {
-    span {
-      &.descr {
-        position: relative;
-        top: 2px;
-        left: 5px;
-        color: $control-group-descr-color;
-      }
-    }
-  }
-}
-
 img.emoji {
   height: 20px;
   vertical-align: top;
@@ -302,12 +228,6 @@ img.emoji {
   margin-bottom: 10px;
 }
 
-.side-filters {
-  fieldset {
-    margin-bottom: 15px;
-  }
-}
-
 .footer-links {
   margin-bottom: 20px;
 
@@ -329,25 +249,6 @@ img.emoji {
   text-align: center;
 }
 
-.header-with-avatar {
-  h3 {
-    margin: 0;
-    font-weight: $gl-font-weight-bold;
-  }
-
-  .username {
-    font-size: 18px;
-    color: $username-color;
-    margin-top: 8px;
-  }
-
-  .description {
-    font-size: $gl-font-size;
-    color: $description-color;
-    margin-top: 8px;
-  }
-}
-
 .dropzone .dz-preview .dz-progress {
   border-color: $border-color !important;
 
@@ -386,16 +287,6 @@ img.emoji {
   }
 }
 
-.content-separator {
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
-  border-top: 1px solid $border-color;
-}
-
-.hide-bottom-border {
-  border-bottom: 0 !important;
-}
-
 .gl-accessibility {
   &:focus {
     display: flex;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 8a224dc517e..8603714f709 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -607,25 +607,25 @@
   width: 100%;
   min-height: 30px;
   padding: 0 7px;
-  color: $dropdown-input-color;
+  color: $gl-gray-700;
   line-height: 30px;
   border: 1px solid $dropdown-divider-color;
   border-radius: 2px;
   outline: 0;
 
   &:focus {
-    color: $dropdown-link-color;
+    color: $gl-gray-700;
     border-color: $blue-300;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
     ~ .fa {
-      color: $dropdown-link-color;
+      color: $gl-gray-700;
     }
   }
 
   &:hover {
     ~ .fa {
-      color: $dropdown-link-color;
+      color: $gl-gray-700;
     }
   }
 }
@@ -890,7 +890,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
       position: absolute;
       top: 13px;
       right: 25px;
-      color: $md-area-border;
+      color: $gray-100;
     }
   }
 
@@ -929,7 +929,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 
   &:hover {
     .frequent-items-item-avatar-container .avatar {
-      border-color: $md-area-border;
+      border-color: $gray-100;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 1d3512bbb4c..53f198b47c6 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -184,7 +184,7 @@
 
         &.line-numbers {
           float: none;
-          border-left: 1px solid $blame-line-numbers-border;
+          border-left: 1px solid $gl-gray-100;
 
           i {
             float: none;
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss
deleted file mode 100644
index d1360a0c0eb..00000000000
--- a/app/assets/stylesheets/framework/jquery.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.ui-widget {
-  font-family: $regular-font;
-  font-size: $font-size-base;
-
-  .ui-state-default {
-    border: 1px solid $white-light;
-    background: $white-light;
-    color: $jq-ui-default-color;
-  }
-
-  .ui-state-highlight {
-    border: 0;
-    background: transparent;
-  }
-}
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index d8391b59a8c..554e2b6720a 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -122,7 +122,7 @@
 .markdown-area {
   border-radius: 0;
   background: $white-light;
-  border: 1px solid $md-area-border;
+  border: 1px solid $gray-100;
   min-height: 140px;
   max-height: 500px;
   padding: 5px;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 7edb89ce6f3..7f37dd3de91 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -20,7 +20,7 @@
   display: inline-block;
   overflow-x: auto;
   border: 0;
-  border-color: $md-area-border;
+  border-color: $gray-100;
 
   @supports (width: fit-content) {
     display: block;
@@ -29,11 +29,11 @@
 
   tr {
     th {
-      border-bottom: solid 2px $md-area-border;
+      border-bottom: solid 2px $gray-100;
     }
 
     td {
-      border-color: $md-area-border;
+      border-color: $gray-100;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 3ae2c7078d6..381c0290d32 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -237,7 +237,7 @@
   }
 
   .group-path {
-    color: $group-path-color;
+    color: $gl-gray-400;
   }
 }
 
@@ -257,7 +257,7 @@
 
 .namespace-result {
   .namespace-kind {
-    color: $namespace-kind-color;
+    color: $gl-gray-350;
     font-weight: $gl-font-weight-normal;
   }
 
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
index 43aaf198609..8258da07e4d 100644
--- a/app/assets/stylesheets/framework/toggle.scss
+++ b/app/assets/stylesheets/framework/toggle.scss
@@ -31,7 +31,7 @@
   height: 24px;
   cursor: pointer;
   user-select: none;
-  background: $feature-toggle-color-disabled;
+  background: $gl-gray-400;
   border-radius: 12px;
   padding: 3px;
   transition: all .4s ease;
@@ -61,7 +61,7 @@
     }
 
     .toggle-icon-svg {
-      fill: $feature-toggle-color-disabled;
+      fill: $gl-gray-400;
     }
 
     .toggle-status-checked {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 9929f1bdebf..0c1b8b92de3 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -61,12 +61,12 @@
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
-    color: $kdb-color;
+    color: $gl-gray-700;
     vertical-align: middle;
     background-color: $kdb-bg;
     border-width: 1px;
     border-style: solid;
-    border-color: $kdb-border $kdb-border $kdb-border-bottom;
+    border-color: $gl-gray-200 $gl-gray-200 $kdb-border-bottom;
     border-image: none;
     border-radius: 3px;
     box-shadow: 0 -1px 0 $kdb-shadow inset;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f5e7a84d082..f66782ab882 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -31,6 +31,14 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
 
+$gl-gray-100: #dddddd;
+$gl-gray-200: #cccccc;
+$gl-gray-350: #aaaaaa;
+$gl-gray-400: #999999;
+$gl-gray-500: #777777;
+$gl-gray-600: #666666;
+$gl-gray-700: #555555;
+
 $green-50: #f1fdf6;
 $green-100: #dcf5e7;
 $green-200: #b3e6c8;
@@ -207,11 +215,6 @@ $list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
 
 /*
- * Markdown
- */
-$md-area-border: #ddd;
-
-/*
  * Code
  */
 $code-font-size: 90%;
@@ -241,7 +244,6 @@ $input-horizontal-padding: 12px;
 /*
  * Misc
  */
-$progress-color: #c0392b;
 $header-height: 40px;
 $ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
@@ -256,14 +258,7 @@ $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-margin-5: 5px;
 $sidebar-block-hover-color: #ebebeb;
-$group-path-color: #999;
-$namespace-kind-color: #aaa;
-$panel-heading-link-color: #777;
-$graph-author-email-color: #777;
 $count-arrow-border: #dce0e5;
-$save-project-loader-color: #555;
-$divergence-graph-bar-bg: #ccc;
-$divergence-graph-separator-bg: #ccc;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $highlight-changes-color: rgb(235, 255, 232);
@@ -276,20 +271,8 @@ $project-title-row-height: 24px;
 /*
 * Common component specific colors
 */
-$hint-color: #999;
-$well-pre-color: #555;
-$loading-color: #555;
-$update-author-color: #999;
 $user-mention-bg: rgba($blue-500, 0.044);
 $user-mention-bg-hover: rgba($blue-500, 0.15);
-$time-color: #999;
-$project-member-show-color: #aaa;
-$gl-promo-color: #aaa;
-$control-group-descr-color: #666;
-$table-permission-x-bg: #d9edf7;
-$username-color: #666;
-$description-color: #666;
-$profiler-border: #eee;
 
 /* tanuki logo colors */
 $tanuki-red: #e24329;
@@ -320,9 +303,7 @@ $line-select-yellow: #fcf8e7;
 $line-select-yellow-dark: #f0e2bd;
 $dark-diff-match-bg: rgba(255, 255, 255, 0.3);
 $dark-diff-match-color: rgba(255, 255, 255, 0.1);
-$file-mode-changed: #777;
 $diff-image-info-color: gray;
-$diff-swipe-border: #999;
 $diff-view-modes-color: gray;
 $diff-view-modes-border: #c1c1c1;
 $diff-jagged-border-gradient-color: darken($white-normal, 8%);
@@ -342,12 +323,10 @@ $dropdown-width: 300px;
 $dropdown-min-height: 40px;
 $dropdown-max-height: 312px;
 $dropdown-vertical-offset: 4px;
-$dropdown-link-color: #555;
 $dropdown-empty-row-bg: rgba(#000, 0.04);
 $dropdown-shadow-color: rgba(#000, 0.1);
 $dropdown-divider-color: rgba(#000, 0.1);
 $dropdown-title-btn-color: #bfbfbf;
-$dropdown-input-color: #555;
 $dropdown-input-fa-color: #c7c7c7;
 $dropdown-input-focus-shadow: rgba($blue-300, 0.4);
 $dropdown-loading-bg: rgba(#fff, 0.6);
@@ -420,15 +399,9 @@ $location-icon-color: #e7e9ed;
 $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
-$note-line2-border: #ddd;
 $note-icon-gutter-width: 55px;
 
 /*
-* Zen
-*/
-$zen-control-color: #555;
-
-/*
 * Identicon
 */
 $identicon-red: #ffebee;
@@ -437,7 +410,6 @@ $identicon-indigo: #e8eaf6;
 $identicon-blue: #e3f2fd;
 $identicon-teal: #e0f2f1;
 $identicon-orange: #fbe9e7;
-$identicon-fg-color: #555555;
 
 /*
 * Calendar
@@ -506,16 +478,8 @@ $common-gray-light: #bbb;
 $common-gray-dark: #444;
 
 /*
-* Events
-*/
-$events-pre-color: #777;
-$events-note-icon-color: #777;
-$events-body-border: #ddd;
-
-/*
 * Files
 */
-$blame-line-numbers-border: #ddd;
 $logs-li-color: #888;
 $logs-p-color: #333;
 
@@ -534,8 +498,6 @@ $input-short-md-width: 280px;
 * Help
 */
 $document-index-color: #888;
-$help-shortcut-color: #999;
-$help-shortcut-mapping-color: #555;
 $help-shortcut-header-color: #333;
 
 /*
@@ -546,12 +508,6 @@ $issues-today-border: #e1e8d5;
 $compare-display-color: #888;
 
 /*
-* jQuery UI
-*/
-$jq-ui-border: #ddd;
-$jq-ui-default-color: #777;
-
-/*
 * Label
 */
 $label-font-size: 12px;
@@ -575,34 +531,19 @@ $fade-mask-transition-curve: ease-in-out;
 $login-brand-holder-color: #888;
 
 /*
-* Nav
-*/
-$nav-link-gray: #959494;
-$nav-toggle-gray: #666;
-
-/*
-* Notify
-*/
-$notify-details: #777;
-$notify-footer: #777;
-
-/*
 * Projects
 */
 $project-option-descr-color: #54565b;
-$project-breadcrumb-color: #999;
 $project-network-controls-color: #888;
 
 $feature-toggle-color: #fff;
 $feature-toggle-text-color: #fff;
-$feature-toggle-color-disabled: #999;
 $feature-toggle-color-enabled: #4a8bee;
 
 /*
 Stat Graph
 */
 $stat-graph-common-bg: #f3f3f3;
-$stat-graph-axis-fill: #aaa;
 $stat-graph-selection-fill: #333;
 $stat-graph-selection-stroke: #333;
 
@@ -613,17 +554,9 @@ $select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
 $select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
 
 /*
-* Todo
-*/
-$todo-body-pre-color: #777;
-$todo-body-border: #ddd;
-
-/*
 * Typography
 */
 $kdb-bg: #fcfcfc;
-$kdb-color: #555;
-$kdb-border: #ccc;
 $kdb-border-bottom: #bbb;
 $kdb-shadow: #bbb;
 $body-text-shadow: rgba(255, 255, 255, 0.01);
@@ -632,7 +565,6 @@ $body-text-shadow: rgba(255, 255, 255, 0.01);
 * UI Dev Kit
 */
 $ui-dev-kit-example-color: #bbb;
-$ui-dev-kit-example-border: #ddd;
 
 /*
 Pipeline Graph
@@ -666,12 +598,10 @@ $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
 /*
 Performance Bar
 */
-$perf-bar-text: #999;
 $perf-bar-production: #222;
 $perf-bar-staging: #291430;
 $perf-bar-development: #4c1210;
 $perf-bar-bucket-bg: #111;
-$perf-bar-bucket-color: #ccc;
 $perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2);
 $perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
 
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index f2d296fb875..a4fbd9c073f 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -35,7 +35,7 @@
 
 .zen-control {
   padding: 0;
-  color: $zen-control-color;
+  color: $gl-gray-700;
   background: none;
   border: 0;
 }
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index a81e5eb5ebf..f24c80bd81c 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -7,12 +7,12 @@ img {
 
 p.details {
   font-style: italic;
-  color: $notify-details;
+  color: $gl-gray-500;
 }
 
 .footer > p {
   font-size: small;
-  color: $notify-footer;
+  color: $gl-gray-500;
 }
 
 pre.commit-message {
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index 49fe50977f5..38fec3f0aa8 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -23,7 +23,7 @@
     .bar {
       position: absolute;
       height: 4px;
-      background-color: $divergence-graph-bar-bg;
+      background-color: $gl-gray-200;
     }
 
     .bar-behind {
@@ -61,7 +61,7 @@
     height: 18px;
     margin: 5px 0 0;
     float: left;
-    background-color: $divergence-graph-separator-bg;
+    background-color: $gl-gray-200;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 207c68432a7..987dcd32e3a 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -31,7 +31,7 @@
 
     .file-mode-changed {
       padding: 10px;
-      color: $file-mode-changed;
+      color: $gl-gray-500;
     }
 
     .suppressed-container {
@@ -245,7 +245,7 @@
 
       .swipe-wrap {
         overflow: hidden;
-        border-left: 1px solid $diff-swipe-border;
+        border-left: 1px solid $gl-gray-400;
         position: absolute;
         display: block;
         top: 13px;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 196f6ae6d8c..79984c1a546 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -153,7 +153,7 @@
 
 .x-axis path,
 .y-axis path {
-  stroke: $stat-graph-axis-fill;
+  stroke: $gl-gray-350;
 }
 
 .label-x-axis-line,
@@ -163,7 +163,7 @@
 
 .y-axis {
   line {
-    stroke: $stat-graph-axis-fill;
+    stroke: $gl-gray-350;
     stroke-width: 1;
   }
 }
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index da0c9b44498..a91d44805ee 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -87,7 +87,7 @@
         border: 0;
         background: $gray-light;
         border-radius: 0;
-        color: $events-pre-color;
+        color: $gl-gray-500;
         overflow: hidden;
       }
 
@@ -104,7 +104,7 @@
     }
 
     .event-note-icon {
-      color: $events-pre-color;
+      color: $gl-gray-500;
       float: left;
       font-size: $gl-font-size;
       line-height: 16px;
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index 22fce893fd7..4fb1a956fab 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -20,7 +20,7 @@
 .graphs {
   .graph-author-email {
     float: right;
-    color: $graph-author-email-color;
+    color: $gl-gray-500;
   }
 
   .graph-additions {
@@ -58,7 +58,7 @@
 
   .y-axis-label {
     line {
-      stroke: $stat-graph-axis-fill;
+      stroke: $gl-gray-350;
     }
 
     text {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 9ff62e58681..394c99268be 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -263,7 +263,7 @@
       height: 100%;
       width: 100%;
       background-color: transparent;
-      border: 2px outset $kdb-border;
+      border: 2px outset $gl-gray-200;
       border-radius: 50%;
       animation: spin-avatar 3s infinite linear;
     }
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 0350fe5752e..2c23f31c240 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -1,6 +1,6 @@
 .shortcut-mappings {
   font-size: 12px;
-  color: $help-shortcut-mapping-color;
+  color: $gl-gray-700;
 
   tbody:first-child tr:first-child {
     padding-top: 0;
@@ -22,7 +22,7 @@
 
   .shortcut {
     padding-right: 10px;
-    color: $help-shortcut-color;
+    color: $gl-gray-400;
     text-align: right;
     white-space: nowrap;
   }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 7b8cad254c7..9d46c2cf4fa 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -910,7 +910,7 @@
     opacity: .65;
 
     &:hover {
-      color: $file-mode-changed;
+      color: $gl-gray-500;
       text-decoration: none;
     }
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index b1e33196049..c9e0899425f 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -94,8 +94,8 @@ ul.notes {
       opacity: 0.5;
 
       .dummy-avatar {
-        background-color: $kdb-border;
-        border: 1px solid darken($kdb-border, 25%);
+        background-color: $gl-gray-200;
+        border: 1px solid darken($gl-gray-200, 25%);
       }
 
       .note-headline-light,
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 9b7051924e6..7c42dcad959 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -371,7 +371,7 @@
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
-  color: $save-project-loader-color;
+  color: $gl-gray-700;
 }
 
 .transfer-project .select2-container {
@@ -447,7 +447,7 @@
 
   > li + li::before {
     padding: 0 3px;
-    color: $project-breadcrumb-color;
+    color: $gl-gray-400;
   }
 
   a {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 5a594920e44..dbf8692d69b 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -249,7 +249,7 @@
   }
 
   .loading-metrics .metrics-load-spinner {
-    color: $loading-color;
+    color: $gl-gray-700;
   }
 
   .metrics-list {
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 5d3b7b21ce4..3fc37e20c36 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -143,7 +143,7 @@
         border: 0;
         background: $gray-light;
         border-radius: 0;
-        color: $todo-body-pre-color;
+        color: $gl-gray-500;
         margin: 0 20px;
         overflow: hidden;
       }
@@ -205,7 +205,7 @@
 
     .todo-body {
       margin: 0;
-      border-left: 2px solid $todo-body-border;
+      border-left: 2px solid $gl-gray-100;
       padding-left: 10px;
     }
   }
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 48ac5b21db8..84c617c7ec0 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -6,7 +6,7 @@
 
   .example {
     padding: 15px;
-    border: 1px dashed $ui-dev-kit-example-border;
+    border: 1px dashed $gl-gray-100;
     margin-bottom: 15px;
 
     &::before {
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 57d43beaf21..2e2ab8532d2 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -11,10 +11,10 @@
   height: $performance-bar-height;
   background: $black;
   line-height: $performance-bar-height;
-  color: $perf-bar-text;
+  color: $gl-gray-400;
 
   select {
-    color: $perf-bar-text;
+    color: $gl-gray-400;
     width: 200px;
   }
 
@@ -53,7 +53,7 @@
     padding: 4px 6px;
     font-family: Consolas, 'Liberation Mono', Courier, monospace;
     line-height: 1;
-    color: $perf-bar-bucket-color;
+    color: $gl-gray-200;
     border-radius: 3px;
     box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
       inset 0 1px 2px $perf-bar-bucket-box-shadow-to;