Merge branch 'master' into auto-pipelines-vue

* master: (35 commits)
  Adds back removed class in merge request pipelines table
  Fix dropdown icon alignment
  Simplify HTML of mini pipeline graph and dropdown Creates individual html for dropdown Adds simplified  CSS for the new dropdown Removes old CSS Improves dropdown item in Chrome, Firefox and Safari Use SCSS variables for colors. Fix scss linter errors Adds animation when the stage is hovered. Adds back tooltip on dropdown toggle Fixes broken tests additional css changes to get more into direction of mockups
  Adds CHANGELOG entry
  Removes unneeded `window` declaration
  Decreases font-size on login page
  Ensure internal Gitlab::Git references use the namespace
  Absorb gitlab_git
  Fix review comments.
  Add spec for note edit and fix one commented spec.
  Review fixes.
  Use gl.utils.isInViewport and improve gl.utils.animateToElement.
  Make sure elements share the same scope
  Hide edit warning element when form reverted.
  Remove unnecessary styling came from merge conflicts.
  Fix single note edit form specs.
  Separate edit form in Changes and Discussions tab.
  Fix warning styling for responsive design.
  Fix task list for single edit note widget changes.
  Fix notes spec.
  ...

60 files changed, 563 insertions, 501 deletions

diff --git a/app/assets/javascripts/environments/components/environment.js.es6 b/app/assets/javascripts/environments/components/environment.js.es6
index facd653fd72..6b7fb9215d1 100644
--- a/app/assets/javascripts/environments/components/environment.js.es6
+++ b/app/assets/javascripts/environments/components/environment.js.es6
@@ -45,7 +45,7 @@
     return fn(item);
   }).filter(Boolean);
 
-  window.gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
+  gl.environmentsList.EnvironmentsComponent = Vue.component('environment-component', {
     props: {
       store: {
         type: Object,
@@ -55,7 +55,7 @@
     },
 
     components: {
-      'environment-item': window.gl.environmentsList.EnvironmentItem,
+      'environment-item': gl.environmentsList.EnvironmentItem,
     },
 
     data() {
diff --git a/app/assets/javascripts/environments/components/environment_actions.js.es6 b/app/assets/javascripts/environments/components/environment_actions.js.es6
index 7c743705d51..81468f4d3bc 100644
--- a/app/assets/javascripts/environments/components/environment_actions.js.es6
+++ b/app/assets/javascripts/environments/components/environment_actions.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
+  gl.environmentsList.ActionsComponent = Vue.component('actions-component', {
     props: {
       actions: {
         type: Array,
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js.es6 b/app/assets/javascripts/environments/components/environment_external_url.js.es6
index aed65b33c04..6592c1b5f0f 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.js.es6
+++ b/app/assets/javascripts/environments/components/environment_external_url.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
+  gl.environmentsList.ExternalUrlComponent = Vue.component('external-url-component', {
     props: {
       externalUrl: {
         type: String,
diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index b26a40aa268..0e6bc3fdb2c 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -29,12 +29,12 @@
   gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
 
     components: {
-      'commit-component': window.gl.CommitComponent,
-      'actions-component': window.gl.environmentsList.ActionsComponent,
-      'external-url-component': window.gl.environmentsList.ExternalUrlComponent,
-      'stop-component': window.gl.environmentsList.StopComponent,
-      'rollback-component': window.gl.environmentsList.RollbackComponent,
-      'terminal-button-component': window.gl.environmentsList.TerminalButtonComponent,
+      'commit-component': gl.CommitComponent,
+      'actions-component': gl.environmentsList.ActionsComponent,
+      'external-url-component': gl.environmentsList.ExternalUrlComponent,
+      'stop-component': gl.environmentsList.StopComponent,
+      'rollback-component': gl.environmentsList.RollbackComponent,
+      'terminal-button-component': gl.environmentsList.TerminalButtonComponent,
     },
 
     props: {
@@ -183,7 +183,7 @@
        * @returns {String}
        */
       createdDate() {
-        return window.gl.environmentsList.timeagoInstance.format(
+        return gl.environmentsList.timeagoInstance.format(
           this.model.last_deployment.deployable.created_at,
         );
       },
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js.es6 b/app/assets/javascripts/environments/components/environment_rollback.js.es6
index 6d4e8fad604..b52298b4a88 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.js.es6
+++ b/app/assets/javascripts/environments/components/environment_rollback.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
+  gl.environmentsList.RollbackComponent = Vue.component('rollback-component', {
     props: {
       retryUrl: {
         type: String,
diff --git a/app/assets/javascripts/environments/components/environment_stop.js.es6 b/app/assets/javascripts/environments/components/environment_stop.js.es6
index 7292f924e5c..0a29f2f36e9 100644
--- a/app/assets/javascripts/environments/components/environment_stop.js.es6
+++ b/app/assets/javascripts/environments/components/environment_stop.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.StopComponent = Vue.component('stop-component', {
+  gl.environmentsList.StopComponent = Vue.component('stop-component', {
     props: {
       stopUrl: {
         type: String,
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6 b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6
index 25e6ac7f3c9..050184ba497 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.js.es6
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.js.es6
@@ -5,7 +5,7 @@
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
 
-  window.gl.environmentsList.TerminalButtonComponent = Vue.component('terminal-button-component', {
+  gl.environmentsList.TerminalButtonComponent = Vue.component('terminal-button-component', {
     props: {
       terminalPath: {
         type: String,
diff --git a/app/assets/javascripts/environments/environments_bundle.js.es6 b/app/assets/javascripts/environments/environments_bundle.js.es6
index 20eee7976ec..9f24a6a4f88 100644
--- a/app/assets/javascripts/environments/environments_bundle.js.es6
+++ b/app/assets/javascripts/environments/environments_bundle.js.es6
@@ -7,15 +7,17 @@
 $(() => {
   window.gl = window.gl || {};
 
-  if (window.gl.EnvironmentsListApp) {
-    window.gl.EnvironmentsListApp.$destroy(true);
+  if (gl.EnvironmentsListApp) {
+    gl.EnvironmentsListApp.$destroy(true);
   }
-  const Store = window.gl.environmentsList.EnvironmentsStore;
+  const Store = gl.environmentsList.EnvironmentsStore;
 
-  window.gl.EnvironmentsListApp = new window.gl.environmentsList.EnvironmentsComponent({
+  gl.EnvironmentsListApp = new gl.environmentsList.EnvironmentsComponent({
     el: document.querySelector('#environments-list-view'),
+
     propsData: {
       store: Store.create(),
     },
+
   });
 });
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index 7dc2d13e5d8..04814fa0843 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -35,8 +35,8 @@
         autosize(this.textarea);
         // form and textarea event listeners
         this.addEventListeners();
-        gl.text.init(this.form);
       }
+      gl.text.init(this.form);
       // hide discard button
       this.form.find('.js-note-discard').hide();
       return this.form.show();
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 0a0e73e0ccc..31a71379af3 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -106,8 +106,9 @@
       );
     };
 
-    gl.utils.getPagePath = function() {
-      return $('body').data('page').split(':')[0];
+    gl.utils.getPagePath = function(index) {
+      index = index || 0;
+      return $('body').data('page').split(':')[index];
     };
 
     gl.utils.parseUrl = function (url) {
@@ -127,6 +128,17 @@
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };
 
+    gl.utils.scrollToElement = function($el) {
+      var top = $el.offset().top;
+      gl.navBarHeight = gl.navBarHeight || $('.navbar-gitlab').height();
+      gl.navLinksHeight = gl.navLinksHeight || $('.nav-links').height();
+      gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height();
+
+      return $('body, html').animate({
+        scrollTop: top - (gl.navBarHeight + gl.navLinksHeight + gl.mrTabsHeight)
+      }, 200);
+    };
+
   })(window);
 
 }).call(this);
diff --git a/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6 b/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6
deleted file mode 100644
index 5ae978010c9..00000000000
--- a/app/assets/javascripts/lib/utils/custom_event_polyfill.js.es6
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * CustomEvent support for IE
- */
-if (typeof window.CustomEvent !== 'function') {
-  window.CustomEvent = function CustomEvent(e, params) {
-    const options = params || { bubbles: false, cancelable: false, detail: undefined };
-    const evt = document.createEvent('CustomEvent');
-    evt.initCustomEvent(e, options.bubbles, options.cancelable, options.detail);
-    return evt;
-  };
-  window.CustomEvent.prototype = window.Event.prototype;
-}
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index a8b9a352870..8de5a6191b6 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -52,6 +52,12 @@
       this.setupMainTargetNoteForm();
       this.initTaskList();
       this.collapseLongCommitList();
+
+      // We are in the Merge Requests page so we need another edit form for Changes tab
+      if (gl.utils.getPagePath(1) === 'merge_requests') {
+        $('.note-edit-form').clone()
+          .addClass('mr-note-edit-form').insertAfter('.note-edit-form');
+      }
     }
 
     Notes.prototype.addBinding = function() {
@@ -63,7 +69,7 @@
       // change note in UI after update
       $(document).on("ajax:success", "form.edit-note", this.updateNote);
       // Edit note link
-      $(document).on("click", ".js-note-edit", this.showEditForm);
+      $(document).on("click", ".js-note-edit", this.showEditForm.bind(this));
       $(document).on("click", ".note-edit-cancel", this.cancelEdit);
       // Reopen and close actions for Issue/MR combined with note form submit
       $(document).on("click", ".js-comment-button", this.updateCloseButton);
@@ -466,6 +472,7 @@
       var $html, $note_li;
       // Convert returned HTML to a jQuery object so we can modify it further
       $html = $(note.html);
+      this.revertNoteEditForm();
       gl.utils.localTimeAgo($('.js-timeago', $html));
       $html.renderGFM();
       $html.find('.js-task-list-container').taskList('enable');
@@ -480,48 +487,56 @@
     };
 
 
+    Notes.prototype.checkContentToAllowEditing = function($el) {
+      var initialContent = $el.find('.original-note-content').text().trim();
+      var currentContent = $el.find('.note-textarea').val();
+      var isAllowed = true;
+
+      if (currentContent === initialContent) {
+        this.removeNoteEditForm($el);
+      }
+      else {
+        var $buttons = $el.find('.note-form-actions');
+        var isWidgetVisible = gl.utils.isInViewport($el.get(0));
+
+        if (!isWidgetVisible) {
+          gl.utils.scrollToElement($el);
+        }
+
+        $el.find('.js-edit-warning').show();
+        isAllowed = false;
+      }
+
+      return isAllowed;
+    }
+
+
     /*
     Called in response to clicking the edit note link
 
     Replaces the note text with the note edit form
     Adds a data attribute to the form with the original content of the note for cancellations
-     */
-
+    */
     Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) {
-      var $noteText, done, form, note;
       e.preventDefault();
-      note = $(this).closest(".note");
-      note.addClass("is-editting");
-      form = note.find(".note-edit-form");
-      form.addClass('current-note-edit-form');
-      // Show the attachment delete link
-      note.find(".js-note-attachment-delete").show();
-      done = function($noteText) {
-        var noteTextVal;
-        // Neat little trick to put the cursor at the end
-        noteTextVal = $noteText.val();
-        // Store the original note text in a data attribute to retrieve if a user cancels edit.
-        form.find('form.edit-note').data('original-note', noteTextVal);
-        return $noteText.val('').val(noteTextVal);
-      };
-      new GLForm(form);
-      if ((scrollTo != null) && (myLastNote != null)) {
-        // scroll to the bottom
-        // so the open of the last element doesn't make a jump
-        $('html, body').scrollTop($(document).height());
-        return $('html, body').animate({
-          scrollTop: myLastNote.offset().top - 150
-        }, 500, function() {
-          var $noteText;
-          $noteText = form.find(".js-note-text");
-          $noteText.focus();
-          return done($noteText);
-        });
-      } else {
-        $noteText = form.find('.js-note-text');
-        $noteText.focus();
-        return done($noteText);
+
+      var $target = $(e.target);
+      var $editForm = $(this.getEditFormSelector($target));
+      var $note = $target.closest('.note');
+      var $currentlyEditing = $('.note.is-editting:visible');
+
+      if ($currentlyEditing.length) {
+        var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
+
+        if (!isEditAllowed) {
+          return;
+        }
       }
+
+      $note.find('.js-note-attachment-delete').show();
+      $editForm.addClass('current-note-edit-form');
+      $note.addClass('is-editting');
+      this.putEditFormInPlace($target);
     };
 
 
@@ -532,19 +547,41 @@
      */
 
     Notes.prototype.cancelEdit = function(e) {
-      var note;
       e.preventDefault();
-      note = $(e.target).closest('.note');
+      var $target = $(e.target);
+      var note = $target.closest('.note');
+      note.find('.js-edit-warning').hide();
+      this.revertNoteEditForm($target);
       return this.removeNoteEditForm(note);
     };
 
+    Notes.prototype.revertNoteEditForm = function($target) {
+      $target = $target || $('.note.is-editting:visible');
+      var selector = this.getEditFormSelector($target);
+      var $editForm = $(selector);
+
+      $editForm.insertBefore('.notes-form');
+      $editForm.find('.js-comment-button').enable();
+      $editForm.find('.js-edit-warning').hide();
+    };
+
+    Notes.prototype.getEditFormSelector = function($el) {
+      var selector = '.note-edit-form:not(.mr-note-edit-form)';
+
+      if ($el.parents('#diffs').length) {
+        selector = '.note-edit-form.mr-note-edit-form';
+      }
+
+      return selector;
+    };
+
     Notes.prototype.removeNoteEditForm = function(note) {
-      var form;
-      form = note.find(".current-note-edit-form");
-      note.removeClass("is-editting");
-      form.removeClass("current-note-edit-form");
+      var form = note.find('.current-note-edit-form');
+      note.removeClass('is-editting');
+      form.removeClass('current-note-edit-form');
+      form.find('.js-edit-warning').hide();
       // Replace markdown textarea text with original note text.
-      return form.find(".js-note-text").val(form.find('form.edit-note').data('original-note'));
+      return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note'));
     };
 
 
@@ -837,15 +874,44 @@
 
     Notes.prototype.initTaskList = function() {
       this.enableTaskList();
-      return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList);
+      return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList.bind(this));
     };
 
     Notes.prototype.enableTaskList = function() {
       return $('.note .js-task-list-container').taskList('enable');
     };
 
-    Notes.prototype.updateTaskList = function() {
-      return $('form', this).submit();
+    Notes.prototype.putEditFormInPlace = function($el) {
+      var $editForm = $(this.getEditFormSelector($el));
+      var $note = $el.closest('.note');
+
+      $editForm.insertAfter($note.find('.note-text'));
+
+      var $originalContentEl = $note.find('.original-note-content');
+      var originalContent = $originalContentEl.text().trim();
+      var postUrl = $originalContentEl.data('post-url');
+      var targetId = $originalContentEl.data('target-id');
+      var targetType = $originalContentEl.data('target-type');
+
+      new GLForm($editForm.find('form'));
+
+      $editForm.find('form').attr('action', postUrl);
+      $editForm.find('.js-form-target-id').val(targetId);
+      $editForm.find('.js-form-target-type').val(targetType);
+      $editForm.find('.js-note-text').focus().val(originalContent);
+      $editForm.find('.js-md-write-button').trigger('click');
+      $editForm.find('.referenced-users').hide();
+    }
+
+    Notes.prototype.updateTaskList = function(e) {
+      var $target = $(e.target);
+      var $list = $target.closest('.js-task-list-container');
+      var $editForm = $(this.getEditFormSelector($target));
+      var $note = $list.closest('.note');
+
+      this.putEditFormInPlace($list);
+      $editForm.find('#note_note').val($note.find('.original-task-list').val());
+      $('form', $list).submit();
     };
 
     Notes.prototype.updateNotesCount = function(updateCount) {
diff --git a/app/assets/javascripts/terminal/terminal_bundle.js.es6 b/app/assets/javascripts/terminal/terminal_bundle.js.es6
index ded7ee6e9fe..33d2c1e1a17 100644
--- a/app/assets/javascripts/terminal/terminal_bundle.js.es6
+++ b/app/assets/javascripts/terminal/terminal_bundle.js.es6
@@ -1,3 +1,5 @@
+//= require xterm/encoding-indexes
+//= require xterm/encoding
 //= require xterm/xterm.js
 //= require xterm/fit.js
 //= require ./terminal.js
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index e9d7cda0647..47a8f44c709 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -4,8 +4,3 @@
   color: $badge-color;
   vertical-align: baseline;
 }
-
-.badge-dark {
-  background-color: $badge-bg-dark;
-  color: $badge-color-dark;
-}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index e9aadffc73c..407c800feb7 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -1,13 +1,13 @@
 .centered-light-block {
   text-align: center;
-  color: $gl-gray;
+  color: $gl-text-color;
   margin: 20px;
 }
 
 .nothing-here-block {
   text-align: center;
   padding: 20px;
-  color: $gl-gray;
+  color: $gl-text-color;
   font-weight: normal;
   font-size: 14px;
   line-height: 36px;
@@ -29,7 +29,7 @@
   margin-bottom: 0;
   border-top: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
-  color: $gl-gray;
+  color: $gl-text-color;
 
   &.oneline-block {
     line-height: 42px;
@@ -135,11 +135,11 @@
   }
 
   .cover-title {
-    color: $gl-header-color;
+    color: $gl-text-color;
     font-size: 23px;
 
     h1 {
-      color: $gl-gray-dark;
+      color: $gl-text-color;
       margin-bottom: 6px;
       font-size: 23px;
     }
@@ -153,7 +153,7 @@
 
     p {
       padding: 0 $gl-padding;
-      color: $gl-text-color-dark;
+      color: $gl-text-color;
     }
   }
 
@@ -211,7 +211,7 @@
       display: inline;
       font-weight: normal;
       font-size: 24px;
-      color: $gl-title-color;
+      color: $gl-text-color;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index a11f1cd7735..e04a87a7327 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -88,7 +88,7 @@
 }
 
 @mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark);
+  @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-text-color);
 }
 
 @mixin btn-white {
@@ -242,7 +242,7 @@
 }
 
 .btn-transparent {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   background-color: transparent;
   border: 0;
 
@@ -338,7 +338,7 @@
   margin-left: 10px;
 
   i {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 67b5aa37ae7..0ce94a26a7f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -412,7 +412,7 @@ table {
     padding: 0 10px;
     clip: auto;
     text-decoration: none;
-    color: $gl-title-color;
+    color: $gl-text-color;
     background: $gray-light;
     z-index: 1;
   }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 889366d6ddf..755eddefa42 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -201,7 +201,7 @@
     }
 
     .icon-play {
-      fill: $gl-gray-light;
+      fill: $gl-text-color-secondary;
       margin-right: 6px;
       height: 12px;
       width: 11px;
@@ -209,7 +209,7 @@
   }
 
   .dropdown-header {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
     font-size: 13px;
     line-height: 22px;
     padding: 0 10px;
@@ -222,7 +222,7 @@
   .unclickable {
     cursor: not-allowed;
     padding: 5px 8px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -592,7 +592,7 @@
     }
 
     .ui-datepicker-title {
-      color: $gl-gray;
+      color: $gl-text-color;
       font-size: 14px;
       line-height: 1;
       font-weight: normal;
@@ -614,17 +614,17 @@
 
 .dropdown-menu-inner-title {
   display: block;
-  color: $gl-title-color;
+  color: $gl-text-color;
   font-weight: 600;
 }
 
 .dropdown-menu-inner-content {
   display: block;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
 }
 
 .dropdown-toggle-text {
   &.is-default {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 8726a69867b..25d6fbe465a 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -153,7 +153,7 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
 }
 
 .input-group {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 971940773f7..72b3fe2016c 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-gray-light;
+        color: $gl-text-color-secondary;
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
@@ -63,7 +63,7 @@ header {
         &:focus,
         &:active {
           background-color: $gray-light;
-          color: darken($gl-gray-light, 30%);
+          color: darken($gl-text-color-secondary, 30%);
 
           .todos-pending-count {
             background: darken($todo-alert-blue, 10%);
@@ -88,7 +88,7 @@ header {
         }
 
         &.active {
-          color: $gl-gray-light;
+          color: $gl-text-color-secondary;
         }
       }
     }
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 529cc7f88e3..4826561dffe 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -35,10 +35,10 @@
 .ci-status-icon-canceled,
 .ci-status-icon-disabled,
 .ci-status-icon-not-found {
-  color: $gl-gray;
+  color: $gl-text-color;
 
   svg {
-    fill: $gl-gray;
+    fill: $gl-text-color;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 298913108ee..46632f15f35 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -41,6 +41,6 @@
   }
 
   &.status-box-upcoming {
-    background: $gl-gray-light;
+    background: $gl-text-color-secondary;
   }
 }
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index bffd0e6f0cd..771dfaec46e 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -128,7 +128,7 @@ ul.content-list {
     }
 
     a {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
 
     .member-group-link {
@@ -230,7 +230,7 @@ ul.content-list {
   }
 
   .label-default {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index e30d81d09f0..5bff694658c 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -73,7 +73,7 @@
 }
 
 .referenced-users {
-  color: $gl-header-color;
+  color: $gl-text-color;
   padding-top: 10px;
 }
 
@@ -135,7 +135,7 @@
 .toolbar-btn {
   float: left;
   padding: 0 5px;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   background: transparent;
   border: 0;
   outline: 0;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 4f2ac77f228..1acd06122a3 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -46,7 +46,7 @@
 
     &.light {
       a {
-        color: $gl-gray;
+        color: $gl-text-color;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 5abda13a963..a292e7686f9 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -51,7 +51,7 @@
       margin-bottom: -1px;
       font-size: 14px;
       line-height: 28px;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
       border-bottom: 2px solid transparent;
 
       &:hover,
@@ -315,7 +315,7 @@
 
     .fa-caret-down {
       margin-left: 5px;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
 
     .dropdown {
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
index 625bea96aaa..4decee2c525 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-gray-light;
+      color: $gl-text-color-secondary;
       font-size: 13px;
       margin-right: 3px;
     }
@@ -42,7 +42,7 @@
 
   .commit-committer-link,
   .commit-author-link {
-    color: $gl-gray;
+    color: $gl-text-color;
     font-weight: bold;
   }
 
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 6078505807e..ff185cd8767 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -7,7 +7,7 @@
   .timeline-entry {
     padding: $gl-padding $gl-btn-padding 11px;
     border-color: $white-normal;
-    color: $gl-gray;
+    color: $gl-text-color;
     border-bottom: 1px solid $border-white-light;
 
     &:target {
@@ -32,7 +32,7 @@
 
   .system-note {
     .note-text {
-      color: $gl-gray !important;
+      color: $gl-text-color !important;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 28cbae9a449..12d56359d7d 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -98,7 +98,7 @@
 
   &.label-gray {
     background-color: $label-gray-bg;
-    color: $gl-gray;
+    color: $gl-text-color;
     text-shadow: none;
   }
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 876adf7f712..0fc89d5976a 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -65,11 +65,11 @@ $legend-color: $text-color;
 //
 //##
 
-$pagination-color: $gl-gray;
+$pagination-color: $gl-text-color;
 $pagination-bg: $white-light;
 $pagination-border: $border-color;
 
-$pagination-hover-color: $gl-gray;
+$pagination-hover-color: $gl-text-color;
 $pagination-hover-bg: $row-hover;
 $pagination-hover-border: $border-color;
 
@@ -121,6 +121,9 @@ $panel-default-heading-bg: $gray-light;
 $panel-footer-bg: $gray-light;
 $panel-inner-border: $border-color;
 
+$badge-bg: $badge-bg;
+$badge-color: $badge-color;
+
 //== Wells
 //
 //##
@@ -154,7 +157,7 @@ $nav-link-padding: 13px $gl-padding;
 //
 //##
 $pre-bg: $gray-light !default;
-$pre-color: $gl-gray !default;
+$pre-color: $gl-text-color !default;
 $pre-border-color: $border-color;
 
 $table-bg-accent: $gray-light;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index d906d26bba9..bd58a26f429 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,5 +1,5 @@
 @mixin md-typography {
-  color: $md-text-color;
+  color: $gl-text-color;
   word-wrap: break-word;
 
   a {
@@ -50,14 +50,14 @@
     margin: 16px 0 10px;
     padding: 0 0 0.3em;
     border-bottom: 1px solid $white-dark;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   h2 {
     font-size: 1.5em;
     font-weight: 600;
     margin: 16px 0 10px;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   h3 {
@@ -100,7 +100,7 @@
   }
 
   p {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
     margin: 6px 0 0;
   }
 
@@ -108,7 +108,7 @@
     @extend .table;
     @extend .table-bordered;
     margin: 12px 0;
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
 
     th {
       background: $label-gray-bg;
@@ -230,7 +230,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: $gl-title-color;
+  color: $gl-text-color;
   font-weight: 600;
 }
 
@@ -292,7 +292,7 @@ h2,
 h3,
 h4 {
   small {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index dc211fc55a7..3e52c482ece 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -94,29 +94,22 @@ $well-light-text-color: #5b6169;
  * Text
  */
 $gl-font-size: 14px;
-$gl-title-color: #333;
-$gl-text-color: #5c5c5c;
-$gl-text-color-dark: #5c5d5e;
-$gl-text-color-light: #8c8c8c;
+$gl-text-color: rgba(0, 0, 0, .85);
+$gl-text-color-secondary: rgba(0, 0, 0, .55);
+$gl-text-color-disabled: rgba(0, 0, 0, .35);
 $gl-text-green: #4a2;
 $gl-text-red: #d12f19;
 $gl-text-orange: #d90;
 $gl-link-color: #3777b0;
-$gl-diff-text-color: #555;
-$gl-dark-link-color: #333;
-$gl-gray-light: #8f8f8f;
 $gl-grayish-blue: #7f8fa4;
-$gl-gray: $gl-text-color;
-$gl-gray-dark: #313236;
-$gl-header-color: #4c4e54;
 
 /*
  * Lists
  */
 $list-font-size: $gl-font-size;
-$list-title-color: $gl-title-color;
+$list-title-color: $gl-text-color;
 $list-text-color: $gl-text-color;
-$list-text-disabled-color: #888;
+$list-text-disabled-color: $gl-text-color-disabled;
 $list-border-light: #eee;
 $list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
@@ -127,7 +120,6 @@ $list-warning-row-color: #8a6d3b;
 /*
  * Markdown
  */
-$md-text-color: $gl-text-color;
 $md-link-color: $gl-link-color;
 $md-area-border: #ddd;
 
@@ -168,9 +160,7 @@ $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
 $issue-status-expired: #cea61b;
-$issuable-sidebar-color: #999;
-$issuable-avatar-hover-border: #999;
-$issuable-clipboard-color: #999;
+$issuable-sidebar-color: $gl-text-color-secondary;
 $show-aside-bg: #eee;
 $show-aside-color: #777;
 $show-aside-shadow: #ddd;
@@ -282,10 +272,8 @@ $btn-active-gray-light: e4e7ed;
 /*
 * Badges
 */
-$badge-bg: #f3f3f3;
-$badge-bg-dark: #eee;
-$badge-color: #929292;
-$badge-color-dark: #8f8f8f;
+$badge-bg: #eee;
+$badge-color: $gl-text-color-secondary;
 
 /*
  *  Award emoji
@@ -304,8 +292,8 @@ $location-icon-color: #e7e9ed;
 /*
  *  Notes
  */
-$notes-light-color: #8e8e8e;
-$notes-role-color: #8e8e8e;
+$notes-light-color: $gl-text-color-secondary;
+$notes-role-color: $gl-text-color-secondary;
 $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
@@ -330,7 +318,7 @@ $calendar-user-contrib-text: #959494;
 $cycle-analytics-box-padding: 30px;
 $cycle-analytics-box-text-color: #8c8c8c;
 $cycle-analytics-big-font: 19px;
-$cycle-analytics-dark-text: $gl-title-color;
+$cycle-analytics-dark-text: $gl-text-color;
 $cycle-analytics-light-gray: #bfbfbf;
 $cycle-analytics-dismiss-icon-color: #b2b2b2;
 
@@ -382,7 +370,7 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0.0);
 /*
 * Common
 */
-$common-gray: $gl-gray;
+$common-gray: $gl-text-color;
 $common-gray-light: #bbb;
 $common-gray-dark: #444;
 $common-red: $gl-text-red;
@@ -537,3 +525,4 @@ Pipeline Graph
 */
 $stage-hover-bg: #eaf3fc;
 $stage-hover-border: #d1e7fc;
+$action-icon-color: #d6d6d6;
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
index f9c850ebdc8..32eb750180f 100644
--- a/app/assets/stylesheets/framework/wells.scss
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -1,6 +1,6 @@
 .info-well {
   background: $gray-light;
-  color: $gl-gray;
+  color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index 84b639fabf5..97ade638db6 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -40,7 +40,7 @@
 }
 
 .zen-control-full {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
 
   &:hover {
     color: $gl-link-color;
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 54a5664a874..b425c78e0d5 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -3,7 +3,7 @@
 /*
 * White Syntax Colors
 */
-$white-code-color: #333;
+$white-code-color: $gl-text-color;
 $white-highlight: #fafe3d;
 $white-pre-hll-bg: #f8eec7;
 $white-hll-bg: #f8f8f8;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 76a88d96183..c18de7b940a 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -259,7 +259,7 @@
 
 .board-list-count {
   padding: 10px 0;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   font-size: 13px;
 
   > .fa {
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index 8d671585b7a..3e2fa8ca88d 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -29,7 +29,7 @@
       padding-top: 6px;
       padding-bottom: 0;
       font-size: 12px;
-      color: $gl-title-color;
+      color: $gl-text-color;
       display: block;
     }
 
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f9e8d297c05..fd101d43b5b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -160,7 +160,7 @@
     flex: 1;
 
     a {
-      color: $gl-gray;
+      color: $gl-text-color;
 
       &:hover {
         color: $gl-link-color;
@@ -357,7 +357,7 @@
 }
 
 .build-light-text {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
 }
 
 .build-gutter-toggle {
diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss
index d1cd1e5d848..90643832390 100644
--- a/app/assets/stylesheets/pages/ci_projects.scss
+++ b/app/assets/stylesheets/pages/ci_projects.scss
@@ -18,7 +18,7 @@
     }
 
     td {
-      color: $gl-gray;
+      color: $gl-text-color;
       vertical-align: middle !important;
 
       a {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index d890cf3502b..fef8e8eec27 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -19,7 +19,7 @@
 
   .commit-title {
     margin: 0;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   .commit-description {
@@ -96,14 +96,14 @@
   }
 
   .commit-row-message {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 }
 
 .text-expander {
   display: inline-block;
   background: $gray-light;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   padding: 0 5px;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
@@ -153,7 +153,7 @@
 
   a,
   button {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
     vertical-align: baseline;
   }
 
@@ -176,7 +176,7 @@
     }
 
     a {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
   }
 
@@ -193,7 +193,7 @@
 }
 
 .branch-commit {
-  color: $gl-gray;
+  color: $gl-text-color;
 
   .commit-icon {
     text-align: center;
@@ -203,7 +203,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $gl-gray-light;
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -212,6 +212,6 @@
   }
 
   .commit-row-message {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 9ce261eafef..6566f27ea2d 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -111,14 +111,14 @@
           line-height: 19px;
           font-size: 14px;
           font-weight: 600;
-          color: $gl-title-color;
+          color: $gl-text-color;
         }
 
         &.text {
           color: $layout-link-gray;
 
           &.value-col {
-            color: $gl-title-color;
+            color: $gl-text-color;
           }
         }
       }
@@ -260,7 +260,7 @@
 
       .stage-empty,
       .not-available {
-        color: $gl-text-color-light;
+        color: $gl-text-color-secondary;
       }
     }
   }
@@ -327,7 +327,7 @@
         @include text-overflow();
 
         a {
-          color: $gl-dark-link-color;
+          color: $gl-text-color;
         }
       }
     }
@@ -355,7 +355,7 @@
     .issue-link,
     .commit-author-link,
     .issue-author-link {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
 
     // Custom CSS for components
@@ -396,11 +396,11 @@
       }
 
       .item-build-name {
-        color: $gl-title-color;
+        color: $gl-text-color;
       }
 
       .pipeline-id {
-        color: $gl-title-color;
+        color: $gl-text-color;
         padding: 0 3px 0 0;
       }
 
@@ -423,7 +423,7 @@
       }
 
       .fa {
-        color: $gl-text-color-light;
+        color: $gl-text-color-secondary;
         font-size: $code_font_size;
       }
     }
@@ -435,7 +435,7 @@
     width: 75%;
     margin: 0 auto;
     padding-top: 130px;
-    color: $gl-text-color-light;
+    color: $gl-text-color-secondary;
 
     h4 {
       color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 9b28df1afc5..46fd19c93f9 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -1,15 +1,15 @@
 .detail-page-header {
   padding: $gl-padding-top 0;
   border-bottom: 1px solid $border-color;
-  color: $gl-text-color-dark;
+  color: $gl-text-color;
   line-height: 34px;
 
   .author {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .identifier {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .issue_created_ago,
@@ -22,7 +22,7 @@
   .title {
     margin: 0 0 16px;
     font-size: 2em;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
     padding: 0 0 0.3em;
     border-bottom: 1px solid $white-dark;
   }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index f30795fd2c2..96ba7c40634 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -14,7 +14,7 @@
     background: $gray-light;
     border-bottom: 1px solid $border-color;
     padding: 10px 16px;
-    color: $gl-diff-text-color;
+    color: $gl-text-color;
     z-index: 10;
     border-radius: 3px 3px 0 0;
 
@@ -50,7 +50,7 @@
     overflow: auto;
     overflow-y: hidden;
     background: $white-light;
-    color: $gl-title-color;
+    color: $gl-text-color;
     border-radius: 0 0 3px 3px;
 
     .unfold {
@@ -380,7 +380,7 @@
         }
 
         cursor: default;
-        color: $gl-title-color;
+        color: $gl-text-color;
       }
 
       &.disabled {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 5517dc5dcbd..778ef01430e 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -72,25 +72,25 @@
 
   .external-url,
   .dropdown-new {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .dropdown-menu {
 
     .fa {
       margin-right: 6px;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
   }
 
   .build-link,
   .branch-name {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .stop-env-link,
   .external-url {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     .stop-env-icon {
       font-size: 14px;
@@ -101,7 +101,7 @@
     .build-column {
 
       .build-link {
-        color: $gl-dark-link-color;
+        color: $gl-text-color;
       }
 
       .avatar {
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 98925c2d0cb..b989d72ce1c 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .avatar {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 16bff5f1e03..d377526e655 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -13,7 +13,7 @@
   .stats {
     float: right;
     line-height: $list-text-height;
-    color: $gl-gray;
+    color: $gl-text-color;
 
     span {
       margin-right: 15px;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 42a3f5baed9..0a8c037c402 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -103,7 +103,7 @@
     }
 
     .edit-link {
-      color: $gl-gray;
+      color: $gl-text-color;
 
       &:hover {
         color: $md-link-color;
@@ -139,7 +139,7 @@
   }
 
   .btn-clipboard:hover {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
@@ -174,7 +174,7 @@
     }
 
     .no-value {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
 
     .sidebar-collapsed-icon {
@@ -242,7 +242,7 @@
       color: $issuable-sidebar-color;
 
       &:hover {
-        color: $gl-gray;
+        color: $gl-text-color;
       }
 
       span {
@@ -255,16 +255,16 @@
       }
 
       .avatar:hover {
-        border-color: $issuable-avatar-hover-border;
+        border-color: $issuable-sidebar-color;
       }
 
       .btn-clipboard {
         border: none;
-        color: $issuable-clipboard-color;
+        color: $issuable-sidebar-color;
 
         &:hover {
           background: transparent;
-          color: $gl-gray;
+          color: $gl-text-color;
         }
       }
     }
@@ -338,7 +338,7 @@
   margin-left: 5px;
 
   a {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index d129eb12a45..78683c7d574 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -117,7 +117,7 @@
 
 .manage-labels-list {
   .btn-action {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
 
     .fa {
       font-size: 18px;
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 712bd3da22f..71ed5b1361a 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -17,14 +17,19 @@
     line-height: 1.5;
 
     p {
-      font-size: 18px;
+      font-size: 16px;
       color: $login-brand-holder-color;
     }
 
     h1:first-child {
       font-weight: normal;
-      margin-bottom: 30px;
+      margin-bottom: 0.68em;
       margin-top: 0;
+      font-size: 34px;
+    }
+
+    h3 {
+      font-size: 22px;
     }
 
     img {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 98d5967e76a..45ff9f7ff5f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -4,7 +4,7 @@
  */
 .mr-state-widget {
   background: $gray-light;
-  color: $gl-gray;
+  color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 2px;
 
@@ -58,7 +58,7 @@
         padding-right: 0;
 
         a {
-          color: $gl-gray;
+          color: $gl-text-color;
         }
       }
 
@@ -70,7 +70,7 @@
 
   .ci_widget {
     border-bottom: 1px solid $well-inner-border;
-    color: $gl-gray;
+    color: $gl-text-color;
 
     svg {
       margin-right: 4px;
@@ -94,7 +94,7 @@
   }
 
   .normal {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .js-deployment-link {
@@ -106,7 +106,7 @@
       font-weight: 600;
       font-size: 16px;
       margin: 5px 0;
-      color: $gl-gray-dark;
+      color: $gl-text-color;
 
       &.has-conflicts .fa-exclamation-triangle {
         color: $gl-warning;
@@ -190,7 +190,7 @@
 }
 
 .label-branch {
-  color: $gl-gray-dark;
+  color: $gl-text-color;
   font-family: $monospace_font;
   font-weight: bold;
   overflow: hidden;
@@ -363,7 +363,7 @@
 
     th {
       background-color: $white-light;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index f47ae9c6157..e284b7269ce 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -102,7 +102,7 @@
     margin-top: 7px;
 
     .issuable-number {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
       margin-right: 5px;
     }
 
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index e54e12be82f..f984b469609 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -27,6 +27,7 @@
 .new-note,
 .note-edit-form {
   .note-form-actions {
+    position: relative;
     margin-top: $gl-padding;
   }
 
@@ -44,7 +45,7 @@
 .note-textarea {
   display: block;
   padding: 10px 0;
-  color: $gl-gray;
+  color: $gl-text-color;
   font-family: $regular_font;
   border: 0;
 
@@ -204,7 +205,7 @@
 
 .comment-toolbar {
   padding-top: $gl-padding-top;
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   border-top: 1px solid $border-color;
 }
 
@@ -265,3 +266,18 @@
     }
   }
 }
+
+.note-edit-warning.settings-message {
+  display: none;
+  padding: 5px 10px;
+  position: absolute;
+  left: 127px;
+  top: 2px;
+
+  @media (max-width: $screen-xs-max) {
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 21d72791e81..ad4c31ca29e 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -345,7 +345,7 @@ ul.notes {
   }
 
   .author_link {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
@@ -588,13 +588,11 @@ ul.notes {
 
 // Merge request notes in diffs
 .diff-file {
-
   // Diff is side by side
   .notes_content.parallel .note-header .note-headline-light {
     display: block;
     position: relative;
   }
-
   // Diff is inline
   .notes_content .note-header .note-headline-light {
     display: inline-block;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 8650f973889..8f615905853 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -140,7 +140,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $gl-gray-light;
+      fill: $gl-text-color-secondary;
     }
 
     .fa {
@@ -186,12 +186,13 @@
   .stage-cell {
     font-size: 0;
 
-    svg {
-      height: 18px;
-      width: 18px;
-      position: relative;
+    > .stage-container > button > svg {
+      height: 22px;
+      width: 22px;
+      position: absolute;
+      top: -1px;
+      left: -1px;
       z-index: 2;
-      vertical-align: middle;
       overflow: visible;
     }
 
@@ -209,7 +210,7 @@
           content: '';
           width: 8px;
           position: absolute;
-          right: -7px;
+          right: -8px;
           top: 10px;
           border-bottom: 2px solid $border-color;
         }
@@ -219,7 +220,7 @@
 
   .duration,
   .finished-at {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
     margin: 4px 0;
 
     .fa {
@@ -240,7 +241,7 @@
 
     .btn {
       margin: 0;
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
     }
 
     .cancel-retry-btns {
@@ -253,10 +254,10 @@
 
     .dropdown-toggle,
     .dropdown-menu {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
 
       .fa {
-        color: $gl-gray-light;
+        color: $gl-text-color-secondary;
         font-size: 14px;
       }
 
@@ -290,7 +291,7 @@
   .build-link {
 
     a {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
   }
 
@@ -347,13 +348,14 @@
   white-space: nowrap;
   transition: max-height 0.3s, padding 0.3s;
 
-  ul {
+  .stage-column-list,
+  .builds-container > ul {
     padding: 0;
   }
 
   a {
     text-decoration: none;
-    color: $gl-text-color-light;
+    color: $gl-text-color-secondary;
   }
 
   svg {
@@ -477,13 +479,54 @@
     width: 186px;
     margin-bottom: 10px;
     white-space: normal;
-    color: $gl-text-color-light;
+    color: $gl-text-color-secondary;
+
+    // Action Icons in big pipeline-graph nodes
+    > .ci-action-icon-container .ci-action-icon-wrapper {
+      i {
+        color: $border-color;
+        border-radius: 100%;
+        border: 1px solid $border-color;
+        padding: 5px 6px;
+        font-size: 13px;
+        background: $white-light;
+        height: 30px;
+        width: 30px;
+
+        &::before {
+          position: relative;
+          top: 3px;
+          left: 3px;
+        }
+
+        &:hover {
+          color: $gl-text-color;
+          background-color: $stage-hover-bg;
+          border: 1px solid $stage-hover-bg;
+        }
+      }
+
+      .ci-play-icon {
+        padding: 5px 5px 5px 7px;
+      }
+    }
+
+    > .ci-action-icon-container {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+    }
+
+    .ci-status-icon svg {
+      height: 20px;
+      width: 20px;
+    }
 
     .dropdown-menu-toggle {
       background-color: transparent;
       border: none;
       padding: 0;
-      color: $gl-text-color-light;
+      color: $gl-text-color-secondary;
 
       &:focus {
         outline: none;
@@ -513,16 +556,6 @@
       }
     }
 
-    > .ci-action-icon-container {
-      position: absolute;
-      right: 5px;
-      top: 5px;
-    }
-
-    .ci-status-icon svg {
-      height: 20px;
-      width: 20px;
-    }
 
     .arrow {
       &::before,
@@ -605,29 +638,9 @@
       }
     }
   }
-
-  .grouped-pipeline-dropdown {
-    .dropdown-build {
-      .build-content {
-        width: 100%;
-
-        &:hover {
-          background-color: $stage-hover-bg;
-          color: $gl-text-color;
-        }
-      }
-
-      .ci-action-icon-container {
-        padding: 0;
-        font-size: 11px;
-        position: absolute;
-        top: 1px;
-        right: 8px;
-      }
-    }
-  }
 }
 
+// Triggers the dropdown in the big pipeline graph
 .dropdown-counter-badge {
   color: $border-color;
   font-weight: 100;
@@ -637,66 +650,6 @@
   top: 8px;
 }
 
-.grouped-pipeline-dropdown {
-  padding: 0;
-  width: 195px;
-  min-width: 195px;
-  left: auto;
-  right: -195px;
-  top: -4px;
-  box-shadow: 0 1px 5px $black-transparent;
-
-  a {
-    display: inline-block;
-  }
-
-  .dropdown-build {
-    .build-content {
-      width: 100%;
-
-      &:hover {
-        background-color: $stage-hover-bg;
-        color: $gl-text-color;
-      }
-    }
-
-    .ci-action-icon-container {
-      padding: 0;
-      font-size: 11px;
-      position: absolute;
-      margin-top: 3px;
-      right: 7px;
-    }
-  }
-
-  ul {
-    max-height: 245px;
-    overflow: auto;
-    margin: 3px 0;
-
-    li {
-      margin: 4px 8px 4px 9px;
-      padding: 0;
-      line-height: 1.1;
-      position: relative;
-
-      .ci-action-icon-container:hover {
-        background-color: transparent;
-      }
-
-      .ci-status-icon {
-        position: relative;
-        top: 2px;
-      }
-    }
-  }
-}
-
-.pipeline-graph .dropdown-build .ci-status-icon svg {
-  width: 18px;
-  height: 18px;
-}
-
 .ci-status-text {
   max-width: 110px;
   white-space: nowrap;
@@ -708,177 +661,233 @@
   font-weight: 200;
 }
 
-// Action Icons
-.ci-action-icon-container .ci-action-icon-wrapper {
-  i {
-    color: $border-color;
-    border-radius: 100%;
-    border: 1px solid $border-color;
-    padding: 5px 6px;
-    font-size: 13px;
-    background: $white-light;
-    height: 30px;
-    width: 30px;
+// Dropdown button in mini pipeline graph
+.mini-pipeline-graph-dropdown-toggle {
+  border-radius: 100px;
+  background-color: $white-light;
+  border-width: 1px;
+  border-style: solid;
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  transition: all 0.2s linear;
+  position: relative;
 
-    &::before {
-      position: relative;
-      top: 3px;
-      left: 3px;
-    }
+  > .fa.fa-caret-down {
+    position: absolute;
+    left: 20px;
+    top: 5px;
+    display: inline-block;
+    visibility: hidden;
+    opacity: 0;
+    color: inherit;
+    font-size: 12px;
+    transition: visibility 0.1s, opacity 0.1s linear;
+  }
 
-    &:hover {
-      color: $gl-text-color;
-      background-color: $stage-hover-bg;
-      border: 1px solid $stage-hover-bg;
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+    width: 35px;
+
+    .fa.fa-caret-down {
+      visibility: visible;
+      opacity: 1;
     }
   }
 
-  .ci-play-icon {
-    padding: 5px 5px 5px 7px;
+  // Dropdown button animation in mini pipeline graph
+  &.ci-status-icon-success {
+    border-color: $gl-success;
+    color: $gl-success;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-success, 0.1);
+      border-color: $gl-success;
+    }
   }
-}
 
-.dropdown-build {
-  color: $gl-text-color-light;
+  &.ci-status-icon-failed {
+    border-color: $gl-danger;
+    color: $gl-danger;
 
-  .build-content {
-    padding: 4px 7px 8px;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-danger, 0.1);
+      border-color: $gl-danger;
+    }
   }
 
-  .ci-action-icon-container {
-    padding: 0;
-    font-size: 11px;
-    float: right;
-    margin-top: 3px;
-    display: inline-block;
-    position: relative;
+  &.ci-status-icon-pending,
+  &.ci-status-icon-success_with_warnings {
+    border-color: $gl-warning;
+    color: $gl-warning;
 
-    i {
-      font-size: 11px;
-      margin-top: 0;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-warning, 0.1);
+      border-color: $gl-warning;
     }
   }
 
-  .ci-action-icon-container {
-    i {
-      width: 24px;
-      height: 24px;
+  &.ci-status-icon-running {
+    border-color: $blue-normal;
+    color: $blue-normal;
 
-      &::before {
-        top: 1px;
-        left: 1px;
-      }
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($blue-normal, 0.1);
+      border-color: $blue-normal;
     }
   }
 
-  .stage {
-    max-width: 100px;
-    width: 100px;
-  }
+  &.ci-status-icon-canceled,
+  &.ci-status-icon-disabled,
+  &.ci-status-icon-not-found,
+  &.ci-status-icon-manual {
+    border-color: $gl-text-color;
+    color: $gl-text-color;
 
-  .ci-status-icon svg {
-    height: 18px;
-    width: 18px;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-text-color, 0.1);
+      border-color: $gl-text-color;
+    }
   }
 
-  .ci-status-text {
-    max-width: 95px;
+  &.ci-status-icon-created,
+  &.ci-status-icon-skipped {
+    border-color: $gray-darkest;
+    color: $gray-darkest;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gray-darkest, 0.1);
+      border-color: $gray-darkest;
+    }
   }
 }
 
-/**
- * Builds dropdown in mini pipeline
- */
-.mini-pipeline-graph {
-  .builds-dropdown {
-    background-color: transparent;
-    padding: 0;
-    color: $gl-text-color-light;
-    border: none;
-    margin: 0;
-
-    &:focus,
-    &:hover {
-      outline: none;
-      margin-right: -8px;
+// dropdown content for big and mini pipeline
+.big-pipeline-graph-dropdown-menu,
+.mini-pipeline-graph-dropdown-menu {
+  width: 195px;
+  max-width: 195px;
 
-      .ci-status-icon {
-        width: 32px;
-        padding: 0 8px 0 0;
-        transition: width 0.1s cubic-bezier(0.25, 0, 1, 1);
+  li {
+    padding: 2px 3px;
+  }
 
-        + .dropdown-caret {
-          visibility: visible;
-          opacity: 1;
-        }
-      }
-    }
+  .scrollable-menu {
+    max-height: 245px;
+    overflow: auto;
+  }
 
-    &:focus,
-    &:active {
-      .ci-status-icon-success {
-        background-color: rgba($gl-success, .1);
-      }
+  // Loading icon
+  .builds-dropdown-loading {
+    margin: 0 auto;
+    width: 20px;
+  }
+
+  // Action icon on the right
+  a.ci-action-icon-wrapper {
+    color: $action-icon-color;
+    border: 1px solid $action-icon-color;
+    border-radius: 20px;
+    width: 22px;
+    height: 22px;
+    padding: 2px 0 0 5px;
+    cursor: pointer;
+    float: right;
+    margin: -26px 9px 0 0;
+    font-size: 12px;
+    background-color: $white-light;
 
-      .ci-status-icon-failed {
-        background-color: rgba($gl-danger, .1);
-      }
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
+      border: 1px solid transparent;
+    }
+  }
 
-      .ci-status-icon-pending,
-      .ci-status-icon-success_with_warnings {
-        background-color: rgba($gl-warning, .1);
-      }
+  // link to the build
+  .mini-pipeline-graph-dropdown-item {
+    padding: 3px 7px 4px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.428571429;
+    white-space: nowrap;
+    margin: 0 5px;
+    border-radius: 3px;
 
-      .ci-status-icon-running {
-        background-color: rgba($blue-normal, .1);
-      }
+    // build name
+    .ci-build-text {
+      font-weight: 200;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 90px;
+      color: $gl-text-color-secondary;
+      margin-left: 2px;
+      display: inline-block;
+      top: 1px;
+      vertical-align: text-bottom;
+      position: relative;
+    }
 
-      .ci-status-icon-canceled,
-      .ci-status-icon-disabled,
-      .ci-status-icon-not-found {
-        background-color: rgba($gl-gray, .1);
-      }
+    // status icon on the left
+    .ci-status-icon {
+      top: 3px;
+      position: relative;
 
-      .ci-status-icon-created,
-      .ci-status-icon-skipped {
-        background-color: rgba($gray-darkest, .1);
+      > svg {
+        overflow: visible;
+        width: 18px;
+        height: 18px;
       }
     }
 
-    .mini-pipeline-graph-icon-container {
-      .dropdown-caret {
-        font-size: 11px;
-        position: absolute;
-        top: 6px;
-        left: 20px;
-        margin-right: -6px;
-        z-index: 2;
-        visibility: hidden;
-        opacity: 0;
-        transition: visibility 0.1s, opacity 0.1s linear;
-      }
+    &:hover,
+    &:focus {
+      outline: none;
+      text-decoration: none;
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
     }
   }
+}
 
-  .dropdown-build .build-content {
-    padding: 3px 7px 7px;
-  }
-
-  .builds-dropdown-loading {
-    margin: 10px auto;
-    width: 18px;
-  }
-
-  .grouped-pipeline-dropdown {
-    right: -172px;
-    top: 23px;
-    min-height: 50px;
+// Dropdown in the big pipeline graph
+.big-pipeline-graph-dropdown-menu {
+  width: 195px;
+  min-width: 195px;
+  left: auto;
+  right: -195px;
+  top: -4px;
+  box-shadow: 0 1px 5px $black-transparent;
 
-    a {
-      color: $gl-text-color-light;
+  .mini-pipeline-graph-dropdown-item {
+    .ci-status-icon {
+      top: -1px;
     }
   }
+}
 
+/**
+ * Top arrow in the dropdown in the mini pipeline graph
+ */
+.mini-pipeline-graph-dropdown-menu {
   .arrow-up {
     &::before,
     &::after {
@@ -907,31 +916,8 @@
 }
 
 /**
- * Icons in mini pipeline graph
+ * Terminal
  */
-.mini-pipeline-graph-icon-container .ci-status-icon {
-  display: inline-block;
-  border: 1px solid;
-  border-radius: 22px;
-  margin-right: 1px;
-  width: 22px;
-  height: 22px;
-  position: relative;
-  z-index: 2;
-  transition: all 0.1s cubic-bezier(0.25, 0, 1, 1);
-
-  svg {
-    top: -1px;
-    left: -1px;
-  }
-}
-
-.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg {
-  width: 22px;
-  height: 22px;
-}
-
-
 .terminal-icon {
   margin-left: 3px;
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 4a1bc560292..e30d73886e1 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -292,7 +292,7 @@
     .option-title {
       font-weight: normal;
       display: inline-block;
-      color: $gl-gray-dark;
+      color: $gl-text-color;
     }
 
     .option-descr {
@@ -331,7 +331,7 @@
 a.deploy-project-label {
   padding: 5px;
   margin-right: 5px;
-  color: $gl-gray;
+  color: $gl-text-color;
   background-color: $row-hover;
 
   &:hover {
@@ -372,7 +372,7 @@ a.deploy-project-label {
   }
 
   a {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .dropdown-menu {
@@ -426,7 +426,7 @@ a.deploy-project-label {
         width: 100%;
         height: 100%;
         padding-top: $gl-padding;
-        color: $gl-gray;
+        color: $gl-text-color;
 
         .caption {
           min-height: 30px;
@@ -552,7 +552,7 @@ pre.light-well {
   margin: 0 7px 7px;
 
   h5 {
-    color: $gl-text-color-dark;
+    color: $gl-text-color;
   }
 
   .light-well {
@@ -662,7 +662,7 @@ pre.light-well {
   }
 
   .commit-row-message {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 
   .commit_short_id {
@@ -750,7 +750,7 @@ pre.light-well {
 
 .protected-branches-list {
   a {
-    color: $gl-gray;
+    color: $gl-text-color;
 
     &:hover {
       color: $gl-link-color;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index ddee2c95247..a28a87ed4f8 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,5 +1,5 @@
 .settings-list-icon {
-  color: $gl-gray-light;
+  color: $gl-text-color-secondary;
   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 2f6f03e9877..f19275770be 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -61,15 +61,15 @@
 
     &.ci-canceled,
     &.ci-disabled {
-      color: $gl-gray;
-      border-color: $gl-gray;
+      color: $gl-text-color;
+      border-color: $gl-text-color;
 
       &:not(span):hover {
-        background-color: rgba($gl-gray, .07);
+        background-color: rgba($gl-text-color, .07);
       }
 
       svg {
-        fill: $gl-gray;
+        fill: $gl-text-color;
       }
     }
 
@@ -101,15 +101,15 @@
 
     &.ci-created,
     &.ci-skipped {
-      color: $gl-gray-light;
-      border-color: $gl-gray-light;
+      color: $gl-text-color-secondary;
+      border-color: $gl-text-color-secondary;
 
       &:not(span):hover {
-        background-color: rgba($gl-gray-light, .07);
+        background-color: rgba($gl-text-color-secondary, .07);
       }
 
       svg {
-        fill: $gl-gray-light;
+        fill: $gl-text-color-secondary;
       }
     }
 
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 508b30f3947..01675acc62e 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -90,7 +90,7 @@
         }
 
         p {
-          color: $gl-text-color-dark;
+          color: $gl-text-color;
         }
       }
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index fe4f08e4749..4cce1c363eb 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -78,7 +78,7 @@
 
       i,
       a {
-        color: $gl-dark-link-color;
+        color: $gl-text-color;
       }
 
       img {
@@ -104,21 +104,21 @@
     padding-right: 8px;
 
     .commit-author-name {
-      color: $gl-gray;
+      color: $gl-text-color;
     }
   }
 
   .tree-time-ago {
     min-width: 135px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .tree-commit {
     max-width: 320px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     .tree-commit-link {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
 
       &:hover {
         text-decoration: underline;
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index b9f81533150..d5783e14b21 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -15,7 +15,7 @@
   }
 
   .wiki-last-edit-by {
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     strong {
       color: $gl-text-color;
@@ -24,7 +24,7 @@
 
   .light {
     font-weight: normal;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .git-access-header {