fix conflict

.scss-lint.yml

@@ -30,7 +30,7 @@ linters:
   # variable declarations. They should be referred to via variables everywhere
   # else.
   ColorVariable:
-    enabled: false
+    enabled: true
   
   # Which form of comments to prefer in CSS.
   Comment:

CHANGELOG.md

@@ -2,6 +2,26 @@
 documentation](doc/development/changelog.md) for instructions on adding your own
 entry.
 
+## 8.14.2 (2016-12-01)
+
+- Remove caching of events data. !6578
+- Rephrase some system notes to be compatible with new system note style. !7692
+- Pass tag SHA to post-receive hook when tag is created via UI. !7700
+- Prevent error when submitting a merge request and pipeline is not defined. !7707
+- Fixes system note style in commit discussion. !7721
+- Use a Redis lease for updating authorized projects. !7733
+- Refactor JiraService by moving code out of JiraService#execute method. !7756
+- Update GitLab Workhorse to v1.0.1. !7759
+- Fix pipelines info being hidden in merge request widget. !7808
+- Fixed commit timeago not rendering after initial page.
+- Fix for error thrown in cycle analytics events if build has not started.
+- Fixed issue boards issue sorting when dragging issue into list.
+- Allow access to the wiki with git when repository feature disabled.
+- Fixed timeago not rendering when resolving a discussion.
+- Update Sidekiq-cron to fix compatibility issues with Sidekiq 4.2.1.
+- Timeout creating and viewing merge request for binary file.
+- Gracefully recover from Redis connection failures in Sidekiq initializer.
+
 ## 8.14.1 (2016-11-28)
 
 - Fix deselecting calendar days on contribution graph. !6453 (ClemMakesApps)

GITLAB_WORKHORSE_VERSION

-1.0.1
+1.1.0

app/assets/javascripts/application.js

@@ -56,33 +56,18 @@
 /*= require es6-promise.auto */
 
 (function () {
-  document.addEventListener('page:fetch', gl.utils.cleanupBeforeFetch);
-  window.addEventListener('hashchange', gl.utils.shiftWindow);
-
-  // automatically adjust scroll position for hash urls taking the height of the navbar into account
-  // https://github.com/twitter/bootstrap/issues/1768
-  window.adjustScroll = function() {
-    var navbar = document.querySelector('.navbar-gitlab');
-    var subnav = document.querySelector('.layout-nav');
-    var fixedTabs = document.querySelector('.js-tabs-affix');
-
-    adjustment = 0;
-    if (navbar) adjustment -= navbar.offsetHeight;
-    if (subnav) adjustment -= subnav.offsetHeight;
-    if (fixedTabs) adjustment -= fixedTabs.offsetHeight;
-
-    return scrollBy(0, adjustment);
-  };
-
-  window.addEventListener("hashchange", adjustScroll);
+  document.addEventListener('page:fetch', function () {
+    // Unbind scroll events
+    $(document).off('scroll');
+    // Close any open tooltips
+    $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
+  });
 
-  window.onload = function () {
-    // Scroll the window to avoid the topnav bar
-    // https://github.com/twitter/bootstrap/issues/1768
-    if (location.hash) {
-      return setTimeout(adjustScroll, 100);
-    }
-  };
+  window.addEventListener('hashchange', gl.utils.handleLocationHash);
+  window.addEventListener('load', function onLoad() {
+    window.removeEventListener('load', onLoad, false);
+    gl.utils.handleLocationHash();
+  }, false);
 
   $(function () {
     var $body = $('body');
@@ -97,7 +82,15 @@
     // Set the default path for all cookies to GitLab's root directory
     Cookies.defaults.path = gon.relative_url_root || '/';
 
-    gl.utils.preventDisabledButtons();
+    // prevent default action for disabled buttons
+    $('.btn').click(function(e) {
+      if ($(this).hasClass('disabled')) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        return false;
+      }
+    });
+
     $('.nav-sidebar').niceScroll({
       cursoropacitymax: '0.4',
       cursorcolor: '#FFF',

app/assets/javascripts/boards/components/board_sidebar.js.es6

@@ -47,7 +47,7 @@
       new gl.DueDateSelectors();
       new LabelsSelect();
       new Sidebar();
-      new Subscription('.subscription');
+      gl.Subscription.bindAll('.subscription');
     }
   });
 })();

app/assets/javascripts/dispatcher.js.es6

@@ -135,8 +135,18 @@
             new TreeView();
           }
           break;
+        case 'projects:pipelines:builds':
         case 'projects:pipelines:show':
-          new gl.Pipelines();
+          const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
+
+          new gl.Pipelines({
+            initTabs: true,
+            tabsOptions: {
+              action: controllerAction,
+              defaultAction: 'pipelines',
+              parentEl: '.pipelines-tabs',
+            },
+          });
           break;
         case 'groups:activity':
           new gl.Activities();
@@ -262,7 +272,7 @@
               new NotificationsDropdown();
               break;
             case 'wikis':
-              new Wikis();
+              new gl.Wikis();
               shortcut_handler = new ShortcutsNavigation();
               new ZenMode();
               new GLForm($('.wiki-form'));

app/assets/javascripts/environments/components/environment_item.js.es6

@@ -451,7 +451,7 @@
           <div v-if="!isFolder && hasLastDeploymentKey" class="js-commit-component">
             <commit-component
               :tag="commitTag"
-              :ref="commitRef"
+              :commit_ref="commitRef"
               :commit_url="commitUrl"
               :short_sha="commitShortSha"
               :title="commitTitle"

app/assets/javascripts/extensions/element.js.es6

 /* global Element */
-/* eslint-disable consistent-return, max-len */
-
-Element.prototype.matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
+/* eslint-disable consistent-return, max-len, no-empty, no-plusplus, func-names */
 
 Element.prototype.closest = Element.prototype.closest || function closest(selector, selectedElement = this) {
   if (!selectedElement) return;
   return selectedElement.matches(selector) ? selectedElement : Element.prototype.closest(selector, selectedElement.parentElement);
 };
+
+Element.prototype.matches = Element.prototype.matches ||
+  Element.prototype.matchesSelector ||
+  Element.prototype.mozMatchesSelector ||
+  Element.prototype.msMatchesSelector ||
+  Element.prototype.oMatchesSelector ||
+  Element.prototype.webkitMatchesSelector ||
+  function (s) {
+    const matches = (this.document || this.ownerDocument).querySelectorAll(s);
+    let i = matches.length;
+    while (--i >= 0 && matches.item(i) !== this) {}
+    return i > -1;
+  };

app/assets/javascripts/gfm_auto_complete.js.es6

@@ -5,6 +5,10 @@
     window.GitLab = {};
   }
 
+  function sanitize(str) {
+    return str.replace(/<(?:.|\n)*?>/gm, '');
+  }
+
   GitLab.GfmAutoComplete = {
     dataLoading: false,
     dataLoaded: false,
@@ -160,8 +164,8 @@
               return {
                 username: m.username,
                 avatarTag: autoCompleteAvatar.length === 1 ?  txtAvatar : imgAvatar,
-                title: gl.utils.sanitize(title),
-                search: gl.utils.sanitize(m.username + " " + m.name)
+                title: sanitize(title),
+                search: sanitize(m.username + " " + m.name)
               };
             });
           }
@@ -195,7 +199,7 @@
               }
               return {
                 id: i.iid,
-                title: gl.utils.sanitize(i.title),
+                title: sanitize(i.title),
                 search: i.iid + " " + i.title
               };
             });
@@ -228,7 +232,7 @@
               }
               return {
                 id: m.iid,
-                title: gl.utils.sanitize(m.title),
+                title: sanitize(m.title),
                 search: "" + m.title
               };
             });
@@ -263,7 +267,7 @@
               }
               return {
                 id: m.iid,
-                title: gl.utils.sanitize(m.title),
+                title: sanitize(m.title),
                 search: m.iid + " " + m.title
               };
             });
@@ -284,9 +288,9 @@
             var sanitizeLabelTitle;
             sanitizeLabelTitle = function(title) {
               if (/[\w\?&]+\s+[\w\?&]+/g.test(title)) {
-                return "\"" + (gl.utils.sanitize(title)) + "\"";
+                return "\"" + (sanitize(title)) + "\"";
               } else {
-                return gl.utils.sanitize(title);
+                return sanitize(title);
               }
             };
             return $.map(merges, function(m) {

app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js.es6

+/**
+ * Linked Tabs
+ *
+ * Handles persisting and restores the current tab selection and content.
+ * Reusable component for static content.
+ *
+ * ### Example Markup
+ *
+ *  <ul class="nav-links tab-links">
+ *    <li class="active">
+ *      <a data-action="tab1" data-target="#tab1" data-toggle="tab" href="/path/tab1">
+ *        Tab 1
+ *      </a>
+ *    </li>
+ *    <li class="groups-tab">
+ *      <a data-action="tab2" data-target="#tab2" data-toggle="tab" href="/path/tab2">
+ *        Tab 2
+ *      </a>
+ *    </li>
+ *
+ *
+ *  <div class="tab-content">
+ *    <div class="tab-pane" id="tab1">
+ *      Tab 1 Content
+ *    </div>
+ *    <div class="tab-pane" id="tab2">
+ *      Tab 2 Content
+ *    </div>
+ * </div>
+ *
+ *
+ * ### How to use
+ *
+ *  new window.gl.LinkedTabs({
+ *    action: "#{controller.action_name}",
+ *    defaultAction: 'tab1',
+ *    parentEl: '.tab-links'
+ *  });
+ */
+
+(() => {
+  window.gl = window.gl || {};
+
+  window.gl.LinkedTabs = class LinkedTabs {
+    /**
+     * Binds the events and activates de default tab.
+     *
+     * @param  {Object} options
+     */
+    constructor(options) {
+      this.options = options || {};
+
+      this.defaultAction = this.options.defaultAction;
+      this.action = this.options.action || this.defaultAction;
+
+      if (this.action === 'show') {
+        this.action = this.defaultAction;
+      }
+
+      this.currentLocation = window.location;
+
+      const tabSelector = `${this.options.parentEl} a[data-toggle="tab"]`;
+
+      // since this is a custom event we need jQuery :(
+      $(document)
+        .off('shown.bs.tab', tabSelector)
+        .on('shown.bs.tab', tabSelector, e => this.tabShown(e));
+
+      this.activateTab(this.action);
+    }
+
+    /**
+     * Handles the `shown.bs.tab` event to set the currect url action.
+     *
+     * @param  {type} evt
+     * @return {Function}
+     */
+    tabShown(evt) {
+      const source = evt.target.getAttribute('href');
+
+      return this.setCurrentAction(source);
+    }
+
+    /**
+     * Updates the URL with the path that matched the given action.
+     *
+     * @param  {String} source
+     * @return {String}
+     */
+    setCurrentAction(source) {
+      const copySource = source;
+
+      copySource.replace(/\/+$/, '');
+
+      const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
+
+      history.replaceState({
+        turbolinks: true,
+        url: newState,
+      }, document.title, newState);
+      return newState;
+    }
+
+    /**
+     * Given the current action activates the correct tab.
+     * http://getbootstrap.com/javascript/#tab-show
+     * Note: Will trigger `shown.bs.tab`
+     */
+    activateTab() {
+      return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show');
+    }
+  };
+})();

app/assets/javascripts/lib/utils/common_utils.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-param-reassign, no-else-return, quotes, object-shorthand, comma-dangle, camelcase, one-var, vars-on-top, one-var-declaration-per-line, no-return-assign, consistent-return, padded-blocks, max-len */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-param-reassign, no-else-return, quotes, object-shorthand, comma-dangle, camelcase, one-var, vars-on-top, one-var-declaration-per-line, no-return-assign, consistent-return, padded-blocks, max-len, prefer-template */
 (function() {
   (function(w) {
     var base;
@@ -33,10 +33,6 @@
       });
     };
 
-    w.gl.utils.split = function(val) {
-      return val.split(/,\s*/);
-    };
-
     w.gl.utils.extractLast = function(term) {
       return this.split(term).pop();
     };
@@ -67,64 +63,39 @@
       });
     };
 
-    w.gl.utils.disableButtonIfAnyEmptyField = function(form, form_selector, button_selector) {
-      var closest_submit, updateButtons;
-      closest_submit = form.find(button_selector);
-      updateButtons = function() {
-        var filled;
-        filled = true;
-        form.find('input').filter(form_selector).each(function() {
-          return filled = this.rstrip($(this).val()) !== "" || !$(this).attr('required');
-        });
-        if (filled) {
-          return closest_submit.enable();
-        } else {
-          return closest_submit.disable();
-        }
-      };
-      updateButtons();
-      return form.keyup(updateButtons);
-    };
-
-    w.gl.utils.sanitize = function(str) {
-      return str.replace(/<(?:.|\n)*?>/gm, '');
-    };
-
-    w.gl.utils.unbindEvents = function() {
-      return $(document).off('scroll');
-    };
+    // automatically adjust scroll position for hash urls taking the height of the navbar into account
+    // https://github.com/twitter/bootstrap/issues/1768
+    w.gl.utils.handleLocationHash = function() {
+      var hash = w.gl.utils.getLocationHash();
+      if (!hash) return;
 
-    w.gl.utils.shiftWindow = function() {
-      return w.scrollBy(0, -100);
-    };
+      var navbar = document.querySelector('.navbar-gitlab');
+      var subnav = document.querySelector('.layout-nav');
+      var fixedTabs = document.querySelector('.js-tabs-affix');
 
+      var adjustment = 0;
+      if (navbar) adjustment -= navbar.offsetHeight;
+      if (subnav) adjustment -= subnav.offsetHeight;
 
-    gl.utils.updateTooltipTitle = function($tooltipEl, newTitle) {
-      return $tooltipEl.tooltip('destroy').attr('title', newTitle).tooltip('fixTitle');
-    };
-    gl.utils.preventDisabledButtons = function() {
-      return $('.btn').click(function(e) {
-        if ($(this).hasClass('disabled')) {
-          e.preventDefault();
-          e.stopImmediatePropagation();
-          return false;
+      // scroll to user-generated markdown anchor if we cannot find a match
+      if (document.getElementById(hash) === null) {
+        var target = document.getElementById('user-content-' + hash);
+        if (target && target.scrollIntoView) {
+          target.scrollIntoView(true);
+          window.scrollBy(0, adjustment);
+        }
+      } else {
+        // only adjust for fixedTabs when not targeting user-generated content
+        if (fixedTabs) {
+          adjustment -= fixedTabs.offsetHeight;
+        }
+        window.scrollBy(0, adjustment);
       }
-      });
     };
+
     gl.utils.getPagePath = function() {
       return $('body').data('page').split(':')[0];
     };
-    gl.utils.parseUrl = function (url) {
-      var parser = document.createElement('a');
-      parser.href = url;
-      return parser;
-    };
-    gl.utils.cleanupBeforeFetch = function() {
-      // Unbind scroll events
-      $(document).off('scroll');
-      // Close any open tooltips
-      $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
-    };
 
     gl.utils.isMetaKey = function(e) {
       return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;

app/assets/javascripts/merge_request_tabs.js

@@ -220,7 +220,8 @@
 
       // We extract pathname for the current Changes tab anchor href
       // some pages like MergeRequestsController#new has query parameters on that anchor
-      var url = gl.utils.parseUrl(source);
+      var url = document.createElement('a');
+      url.href = source;
 
       return this._get({
         url: (url.pathname + ".json") + this._location.search,

app/assets/javascripts/pipelines.js.es6

+//= require lib/utils/bootstrap_linked_tabs
+
 /* eslint-disable */
 ((global) => {
 
   class Pipelines {
-    constructor() {
+    constructor(options) {
+
+      if (options.initTabs && options.tabsOptions) {
+        new global.LinkedTabs(options.tabsOptions);
+      }
+
       this.addMarginToBuildColumns();
     }
 

app/assets/javascripts/subscription.js

-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, vars-on-top, no-unused-vars, one-var, one-var-declaration-per-line, camelcase, consistent-return, no-undef, padded-blocks, max-len */
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Subscription = (function() {
-    function Subscription(container) {
-      this.toggleSubscription = bind(this.toggleSubscription, this);
-      var $container;
-      this.$container = $(container);
-      this.url = this.$container.attr('data-url');
-      this.subscribe_button = this.$container.find('.js-subscribe-button');
-      this.subscription_status = this.$container.find('.subscription-status');
-      this.subscribe_button.unbind('click').click(this.toggleSubscription);
-    }
-
-    Subscription.prototype.toggleSubscription = function(event) {
-      var action, btn, current_status;
-      btn = $(event.currentTarget);
-      action = btn.find('span').text();
-      current_status = this.subscription_status.attr('data-status');
-      btn.addClass('disabled');
-
-      if ($('html').hasClass('issue-boards-page')) {
-        this.url = this.$container.attr('data-url');
-      }
-
-      return $.post(this.url, (function(_this) {
-        return function() {
-          var status;
-          btn.removeClass('disabled');
-
-          if ($('html').hasClass('issue-boards-page')) {
-            Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'subscribed', !gl.issueBoards.BoardsStore.detail.issue.subscribed);
-          } else {
-            status = current_status === 'subscribed' ? 'unsubscribed' : 'subscribed';
-            _this.subscription_status.attr('data-status', status);
-            action = status === 'subscribed' ? 'Unsubscribe' : 'Subscribe';
-            btn.find('span').text(action);
-            _this.subscription_status.find('>div').toggleClass('hidden');
-            if (btn.attr('data-original-title')) {
-              return btn.tooltip('hide').attr('data-original-title', action).tooltip('fixTitle');
-            }
-          }
-        };
-      })(this));
-    };
-
-    return Subscription;
-
-  })();
-
-}).call(this);

app/assets/javascripts/subscription.js.es6

+/* global Vue */
+
+(() => {
+  class Subscription {
+    constructor(containerElm) {
+      this.containerElm = containerElm;
+
+      const subscribeButton = containerElm.querySelector('.js-subscribe-button');
+      if (subscribeButton) {
+        // remove class so we don't bind twice
+        subscribeButton.classList.remove('js-subscribe-button');
+        subscribeButton.addEventListener('click', this.toggleSubscription.bind(this));
+      }
+    }
+
+    toggleSubscription(event) {
+      const button = event.currentTarget;
+      const buttonSpan = button.querySelector('span');
+      if (!buttonSpan || button.classList.contains('disabled')) {
+        return;
+      }
+      button.classList.add('disabled');
+
+      const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe';
+      const toggleActionUrl = this.containerElm.dataset.url;
+
+      $.post(toggleActionUrl, () => {
+        button.classList.remove('disabled');
+
+        // hack to allow this to work with the issue boards Vue object
+        if (document.querySelector('html').classList.contains('issue-boards-page')) {
+          Vue.set(
+            gl.issueBoards.BoardsStore.detail.issue,
+            'subscribed',
+            !gl.issueBoards.BoardsStore.detail.issue.subscribed,
+          );
+        } else {
+          buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe';
+        }
+      });
+    }
+
+    static bindAll(selector) {
+      [].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
+    }
+  }
+
+  window.gl = window.gl || {};
+  window.gl.Subscription = Subscription;
+})();

app/assets/javascripts/vue_common_component/commit.js.es6

@@ -23,7 +23,7 @@
        * name
        * ref_url
        */
-      ref: {
+      commit_ref: {
         type: Object,
         required: false,
         default: () => ({}),
@@ -79,8 +79,8 @@
        *
        * @returns {Boolean}
        */
-      hasRef() {
-        return this.ref && this.ref.name && this.ref.ref_url;
+      hasCommitRef() {
+        return this.commit_ref && this.commit_ref.name && this.commit_ref.ref_url;
       },
 
       /**
@@ -131,15 +131,15 @@
     template: `
       <div class="branch-commit">
 
-        <div v-if="hasRef" class="icon-container">
+        <div v-if="hasCommitRef" class="icon-container">
           <i v-if="tag" class="fa fa-tag"></i>
           <i v-if="!tag" class="fa fa-code-fork"></i>
         </div>
 
-        <a v-if="hasRef"
+        <a v-if="hasCommitRef"
           class="monospace branch-name"
-          :href="ref.ref_url">
-          {{ref.name}}
+          :href="commit_ref.ref_url">
+          {{commit_ref.name}}
         </a>
 
         <div class="icon-container commit-icon commit-icon-container"></div>

app/assets/javascripts/wikis.js

-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, consistent-return, one-var, one-var-declaration-per-line, no-undef, prefer-template, padded-blocks, max-len */
-
-/*= require latinise */
-
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Wikis = (function() {
-    function Wikis() {
-      this.slugify = bind(this.slugify, this);
-      $('.new-wiki-page').on('submit', (function(_this) {
-        return function(e) {
-          var field, path, slug;
-          $('[data-error~=slug]').addClass('hidden');
-          field = $('#new_wiki_path');
-          slug = _this.slugify(field.val());
-          if (slug.length > 0) {
-            path = field.attr('data-wikis-path');
-            location.href = path + '/' + slug;
-            return e.preventDefault();
-          }
-        };
-      })(this));
-    }
-
-    Wikis.prototype.dasherize = function(value) {
-      return value.replace(/[_\s]+/g, '-');
-    };
-
-    Wikis.prototype.slugify = function(value) {
-      return this.dasherize(value.trim().toLowerCase().latinise());
-    };
-
-    return Wikis;
-
-  })();
-
-}).call(this);

app/assets/javascripts/wikis.js.es6

+/* eslint-disable no-param-reassign */
+/* global Breakpoints */
+
+/*= require latinise */
+/*= require breakpoints */
+/*= require jquery.nicescroll */
+
+((global) => {
+  const dasherize = str => str.replace(/[_\s]+/g, '-');
+  const slugify = str => dasherize(str.trim().toLowerCase().latinise());
+
+  class Wikis {
+    constructor() {
+      this.bp = Breakpoints.get();
+      this.sidebarEl = document.querySelector('.js-wiki-sidebar');
+      this.sidebarExpanded = false;
+      $(this.sidebarEl).niceScroll();
+
+      const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle');
+      for (let i = 0; i < sidebarToggles.length; i += 1) {
+        sidebarToggles[i].addEventListener('click', e => this.handleToggleSidebar(e));
+      }
+
+      this.newWikiForm = document.querySelector('form.new-wiki-page');
+      if (this.newWikiForm) {
+        this.newWikiForm.addEventListener('submit', e => this.handleNewWikiSubmit(e));
+      }
+
+      window.addEventListener('resize', () => this.renderSidebar());
+      this.renderSidebar();
+    }
+
+    handleNewWikiSubmit(e) {
+      if (!this.newWikiForm) return;
+
+      const slugInput = this.newWikiForm.querySelector('#new_wiki_path');
+      const slug = slugify(slugInput.value);
+
+      if (slug.length > 0) {
+        const wikisPath = slugInput.getAttribute('data-wikis-path');
+        window.location.href = `${wikisPath}/${slug}`;
+        e.preventDefault();
+      }
+    }
+
+    handleToggleSidebar(e) {
+      e.preventDefault();
+      this.sidebarExpanded = !this.sidebarExpanded;
+      this.renderSidebar();
+    }
+
+    sidebarCanCollapse() {
+      const bootstrapBreakpoint = this.bp.getBreakpointSize();
+      return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
+    }
+
+    renderSidebar() {
+      if (!this.sidebarEl) return;
+      const { classList } = this.sidebarEl;
+      if (this.sidebarExpanded || !this.sidebarCanCollapse()) {
+        if (!classList.contains('right-sidebar-expanded')) {
+          classList.remove('right-sidebar-collapsed');
+          classList.add('right-sidebar-expanded');
+        }
+      } else if (classList.contains('right-sidebar-expanded')) {
+        classList.add('right-sidebar-collapsed');
+        classList.remove('right-sidebar-expanded');
+      }
+    }
+  }
+
+  global.Wikis = Wikis;
+})(window.gl || (window.gl = {}));

app/assets/stylesheets/framework/avatar.scss

@@ -8,7 +8,7 @@
   float: left;
   margin-right: 15px;
   border-radius: $avatar_radius;
-  border: 1px solid rgba(0, 0, 0, .1);
+  border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
   &.s20 { @include avatar-size(20px, 7px); }
   &.s24 { @include avatar-size(24px, 8px); }

app/assets/stylesheets/framework/blocks.scss

@@ -41,7 +41,7 @@
   }
 
   &.white {
-    background-color: white;
+    background-color: $white-light;
   }
 
   &.top-block {
@@ -158,7 +158,7 @@
 
     p {
       padding: 0 $gl-padding;
-      color: #5c5d5e;
+      color: $gl-text-color-dark;
     }
   }
 

app/assets/stylesheets/framework/buttons.scss

@@ -68,23 +68,23 @@
 }
 
 @mixin btn-green {
-  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
+  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, $white-light);
 }
 
 @mixin btn-blue {
-  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff);
+  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, $white-light);
 }
 
 @mixin btn-blue-medium {
-  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff);
+  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light);
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
+  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, $white-light);
 }
 
 @mixin btn-red {
-  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
+  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, $white-light);
 }
 
 @mixin btn-gray {
@@ -289,8 +289,8 @@
   .active {
     box-shadow: $gl-btn-active-background;
 
-    border: 1px solid #c6cacf !important;
-    background-color: #e4e7ed !important;
+    border: 1px solid $border-white-dark !important;
+    background-color: $btn-active-gray-light !important;
   }
 }
 
@@ -345,13 +345,13 @@
 
 .btn-static {
   background-color: $background-color !important;
-  border: 1px solid lightgrey;
+  border: 1px solid $border-gray-light;
   cursor: default;
 
   &:active {
-    -moz-box-shadow: inset 0 0 0 white;
-    -webkit-box-shadow: inset 0 0 0 white;
-    box-shadow: inset 0 0 0 white;
+    -moz-box-shadow: inset 0 0 0 $white-light;
+    -webkit-box-shadow: inset 0 0 0 $white-light;
+    box-shadow: inset 0 0 0 $white-light;
   }
 }
 

app/assets/stylesheets/framework/calendar.scss

@@ -2,7 +2,7 @@
   padding-left: 0;
   padding-right: 0;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
     overflow-x: scroll;
   }
 }
@@ -28,13 +28,13 @@
 .user-contrib-cell {
   &:hover {
     cursor: pointer;
-    stroke: #000;
+    stroke: $black;
   }
 }
 
 .user-contrib-text {
   font-size: 12px;
-  fill: #959494;
+  fill: $calendar-user-contrib-text;
 }
 
 .calendar-hint {

app/assets/stylesheets/framework/callout.scss

@@ -25,25 +25,25 @@
 
 /* Variations */
 .bs-callout-danger {
-  background-color: #fdf7f7;
-  border-color: #eed3d7;
-  color: #b94a48;
+  background-color: $callout-danger-bg;
+  border-color: $callout-danger-border;
+  color: $callout-danger-color;
 }
 
 .bs-callout-warning {
-  background-color: #faf8f0;
-  border-color: #faebcc;
-  color: #8a6d3b;
+  background-color: $callout-warning-bg;
+  border-color: $callout-warning-border;
+  color: $callout-warning-color;
 }
 
 .bs-callout-info {
-  background-color: #f4f8fa;
-  border-color: #bce8f1;
-  color: #34789a;
+  background-color: $callout-info-bg;
+  border-color: $callout-info-border;
+  color: $callout-info-color;
 }
 
 .bs-callout-success {
-  background-color: #dff0d8;
-  border-color: #5ca64d;
-  color: #3c763d;
+  background-color: $callout-success-bg;
+  border-color: $callout-success-border;
+  color: $callout-success-color;
 }

app/assets/stylesheets/framework/common.scss

 /** COLORS **/
-.cgray { color: $gl-gray; }
-.clgray { color: #bbb; }
-.cred { color: $gl-text-red; }
-.cgreen { color: $gl-text-green; }
-.cdark { color: #444; }
+.cgray { color: $common-gray; }
+.clgray { color: $common-gray-light; }
+.cred { color: $common-red; }
+.cgreen { color: $common-green; }
+.cdark { color: $common-gray-dark; }
 
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
@@ -28,11 +28,11 @@
 .center { text-align: center; }
 
 .underlined-link { text-decoration: underline; }
-.hint { font-style: italic; color: #999; }
-.light { color: $gl-gray; }
+.hint { font-style: italic; color: $hint-color; }
+.light { color: $common-gray; }
 
 .slead {
-  color: $gl-gray;
+  color: $common-gray;
   font-size: 15px;
   margin-bottom: 12px;
   font-weight: normal;
@@ -52,10 +52,10 @@ pre {
   }
 
   &.well-pre {
-    border: 1px solid #eee;
+    border: 1px solid $well-pre-bg;
     background: $gray-light;
     border-radius: 0;
-    color: #555;
+    color: $well-pre-color;
   }
 }
 
@@ -87,14 +87,14 @@ table a code {
 .loading {
   margin: 20px auto;
   height: 40px;
-  color: #555;
+  color: $loading-color;
   font-size: 32px;
   text-align: center;
 }
 
 span.update-author {
   display: block;
-  color: #999;
+  color: $update-author-color;
   font-weight: normal;
   font-style: italic;
 
@@ -105,7 +105,7 @@ span.update-author {
 }
 
 .user-mention {
-  color: #2fa0bb;
+  color: $user-mention-color;
   font-weight: bold;
 }
 
@@ -114,7 +114,7 @@ span.update-author {
 }
 
 p.time {
-  color: #999;
+  color: $time-color;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }
@@ -150,7 +150,7 @@ li.note {
 
 .project_member_show {
   td:first-child {
-    color: #aaa;
+    color: $project-member-show-color;
   }
 }
 
@@ -176,7 +176,7 @@ li.note {
   margin-top: 40px;
 
   pre {
-    background: white;
+    background: $white-light;
     border: none;
     font-size: 12px;
   }
@@ -184,12 +184,12 @@ li.note {
 
 .error-message {
   padding: 10px;
-  background: #c67;
+  background: $error-bg;
   margin: 0;
-  color: #fff;
+  color: $white-light;
 
   a {
-    color: #fff;
+    color: $white-light;
     text-decoration: underline;
   }
 }
@@ -197,22 +197,22 @@ li.note {
 .browser-alert {
   padding: 10px;
   text-align: center;
-  background: #c67;
-  color: #fff;
+  background: $error-bg;
+  color: $white-light;
   font-weight: bold;
 
   a {
-    color: #fff;
+    color: $white-light;
     text-decoration: underline;
   }
 }
 
 .warning_message {
-  border-left: 4px solid #ed9;
-  color: #b90;
+  border-left: 4px solid $warning-message-border;
+  color: $warning-message-color;
   padding: 10px;
   margin-bottom: 10px;
-  background: #ffffe6;
+  background: $warning-message-bg;
   padding-left: 20px;
 
   &.centered {
@@ -222,7 +222,7 @@ li.note {
 
 .gitlab-promo {
   a {
-    color: #aaa;
+    color: $gl-promo-color;
     margin-right: 30px;
   }
 }
@@ -245,7 +245,7 @@ li.note {
         position: relative;
         top: 2px;
         left: 5px;
-        color: #666;
+        color: $control-group-descr-color;
       }
     }
   }
@@ -270,7 +270,7 @@ img.emoji {
 
 table {
   td.permission-x {
-    background: #d9edf7 !important;
+    background: $table-permission-x-bg !important;
     text-align: center;
   }
 }
@@ -323,13 +323,13 @@ table {
 
   .username {
     font-size: 18px;
-    color: #666;
+    color: $username-color;
     margin-top: 8px;
   }
 
   .description {
     font-size: $gl-font-size;
-    color: #666;
+    color: $description-color;
     margin-top: 8px;
   }
 }
@@ -339,7 +339,7 @@ table {
 
   .profiler-button,
   .profiler-controls {
-    border-color: #eee !important;
+    border-color: $profiler-border !important;
   }
 }
 

app/assets/stylesheets/framework/dropdowns.scss

@@ -376,7 +376,7 @@
     position: absolute;
     top: 10px;
     right: 20px;
-    color: #c7c7c7;
+    color: $dropdown-input-fa-color;
     font-size: 12px;
     pointer-events: none;
   }
@@ -529,7 +529,7 @@
     .ui-datepicker-calendar {
       .ui-state-hover,
       .ui-state-active {
-        color: #fff;
+        color: $white-light;
         border: 0;
       }
     }

app/assets/stylesheets/framework/files.scss

@@ -59,10 +59,10 @@
   }
 
   .file-content {
-    background: #fff;
+    background: $white-light;
 
     &.image_file {
-      background: #eee;
+      background: $file-image-bg;
       text-align: center;
 
       img {
@@ -84,8 +84,8 @@
     }
 
     &.blob-no-preview {
-      background: #eee;
-      text-shadow: 0 1px 2px #fff;
+      background: $blob-bg;
+      text-shadow: 0 1px 2px $white-light;
       padding: 100px 0;
     }
 
@@ -99,7 +99,7 @@
       }
 
       tr {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid $blame-border;
       }
 
       td {
@@ -120,7 +120,7 @@
 
       td.line-numbers {
         float: none;
-        border-left: 1px solid #ddd;
+        border-left: 1px solid $blame-line-numbers-border;
 
         i {
           float: none;
@@ -134,7 +134,7 @@
     }
 
     &.logs {
-      background: #eee;
+      background: $logs-bg;
       max-height: 700px;
       overflow-y: auto;
 
@@ -143,14 +143,14 @@
         padding: 10px 0;
         border-left: 1px solid $border-color;
         margin-bottom: 0;
-        background: white;
+        background: $white-light;
 
         li {
-          color: #888;
+          color: $logs-li-color;
 
           p {
             margin: 0;
-            color: #333;
+            color: $logs-p-color;
             line-height: 24px;
             padding-left: 10px;
           }

app/assets/stylesheets/framework/flash.scss

@@ -38,7 +38,7 @@
   }
 }
 
-@media (max-width: $screen-md-min) {
+@media (max-width: $screen-sm-max) {
   ul.notes {
     .flash-container.timeline-content {
       margin-left: 0;

app/assets/stylesheets/framework/forms.scss

@@ -7,9 +7,9 @@ input {
 }
 
 input[type='text'].danger {
-  background: #f2dede!important;
-  border-color: #d66;
-  text-shadow: 0 1px 1px #fff;
+  background: $input-danger-bg !important;
+  border-color: $input-danger-border;
+  text-shadow: 0 1px 1px $white-light;
 }
 
 .datetime-controls {
@@ -98,7 +98,7 @@ label {
     }
   }
 
-  @media(max-width: $screen-sm-min) {
+  @media(max-width: $screen-xs-max) {
     padding: 0 $gl-padding;
 
     .control-label,
@@ -159,7 +159,7 @@ label {
   }
 
   .input-group-addon {
-    background-color: #f7f8fa;
+    background-color: $input-group-addon-bg;
   }
 
   .input-group-addon:not(:first-child):not(:last-child) {
@@ -181,7 +181,7 @@ label {
     border: 1px solid $green-normal;
 
     &:focus {
-      box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal;
+      box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-normal;
       border: 0 none;
     }
   }
@@ -190,7 +190,7 @@ label {
     border: 1px solid $red-normal;
 
     &:focus {
-      box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6);
+      box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
       border: 0 none;
     }
   }

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -21,7 +21,6 @@
       background: $color-darker;
     }
 
-    .sidebar-header,
     .sidebar-action-buttons {
       color: $color-light;
       background-color: lighten($color-darker, 5%);
@@ -86,37 +85,57 @@
 }
 
 $theme-charcoal: #3d454d;
+$theme-charcoal-light: #485157;
 $theme-charcoal-dark: #383f45;
 $theme-charcoal-text: #b9bbbe;
 
+$theme-blue-light: #becde9;
 $theme-blue: #2980b9;
+$theme-blue-dark: #1970a9;
+$theme-blue-darker: #096099;
+
+$theme-graphite-lighter: #ccc;
+$theme-graphite-light: #777;
 $theme-graphite: #666;
+$theme-graphite-dark: #555;
+
+$theme-gray-light: #979797;
 $theme-gray: #373737;
+$theme-gray-dark: #272727;
+$theme-gray-darker: #222;
+
+$theme-green-light: #adc;
 $theme-green: #019875;
+$theme-green-dark: #018865;
+$theme-green-darker: #017855;
+
+$theme-violet-light: #98c;
 $theme-violet: #548;
+$theme-violet-dark: #436;
+$theme-violet-darker: #325;
 
 body {
   &.ui_blue {
-    @include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
+    @include gitlab-theme($theme-blue-light, $theme-blue, $theme-blue-dark, $theme-blue-darker);
   }
 
   &.ui_charcoal {
-    @include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
+    @include gitlab-theme($theme-charcoal-text, $theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark);
   }
 
   &.ui_graphite {
-    @include gitlab-theme(#ccc, #777, $theme-graphite, #555);
+    @include gitlab-theme($theme-graphite-lighter, $theme-graphite-light, $theme-graphite, $theme-graphite-dark);
   }
 
   &.ui_gray {
-    @include gitlab-theme(#979797, $theme-gray, #272727, #222);
+    @include gitlab-theme($theme-gray-light, $theme-gray, $theme-gray-dark, $theme-gray-darker);
   }
 
   &.ui_green {
-    @include gitlab-theme(#adc, $theme-green, #018865, #017855);
+    @include gitlab-theme($theme-green-light, $theme-green, $theme-green-dark, $theme-green-darker);
   }
 
   &.ui_violet {
-    @include gitlab-theme(#98c, $theme-violet, #436, #325);
+    @include gitlab-theme($theme-violet-light, $theme-violet, $theme-violet-dark, $theme-violet-darker);
   }
 }

app/assets/stylesheets/framework/header.scss

@@ -8,7 +8,7 @@ header {
 
   &.navbar-empty {
     height: $header-height;
-    background: #fff;
+    background: $white-light;
     border-bottom: 1px solid $btn-gray-hover;
 
     .center-logo {
@@ -76,7 +76,7 @@ header {
       }
 
       .navbar-toggle {
-        color: #666;
+        color: $nav-toggle-gray;
         margin: 6px 0;
         border-radius: 0;
         position: absolute;
@@ -228,7 +228,7 @@ header {
 }
 
 .page-sidebar-pinned.right-sidebar-expanded {
-  @media (max-width: $screen-lg-min) {
+  @media (max-width: $screen-md-max) {
     .header-content .title {
       width: 300px;
     }

app/assets/stylesheets/framework/issue_box.scss

@@ -20,7 +20,7 @@
   display: block;
   float: left;
   margin-right: 10px;
-  color: #fff;
+  color: $white-light;
   font-size: $gl-font-size;
   line-height: 25px;
 
@@ -37,10 +37,10 @@
   }
 
   &.status-box-expired {
-    background: #cea61b;
+    background-color: $issue-status-expired;
   }
 
   &.status-box-upcoming {
-    background: #8f8f8f;
+    background: $issue-box-upcoming-bg;
   }
 }

app/assets/stylesheets/framework/jquery.scss

@@ -4,13 +4,13 @@
 
   &.ui-datepicker,
   &.ui-datepicker-inline {
-    border: 1px solid #ddd;
+    border: 1px solid $jq-ui-border;
     padding: 10px;
     width: 270px;
 
     .ui-datepicker-header {
-      background: #fff;
-      border-color: #ddd;
+      background: $white-light;
+      border-color: $jq-ui-border;
 
       .ui-datepicker-prev,
       .ui-datepicker-next {
@@ -39,7 +39,7 @@
   }
 
   &.ui-autocomplete {
-    border-color: #ddd;
+    border-color: $jq-ui-border;
     padding: 0;
     margin-top: 2px;
     z-index: 1001;
@@ -50,9 +50,9 @@
   }
 
   .ui-state-default {
-    border: 1px solid #fff;
-    background: #fff;
-    color: #777;
+    border: 1px solid $white-light;
+    background: $white-light;
+    color: $jq-ui-default-color;
   }
 
   .ui-state-highlight {
@@ -66,7 +66,7 @@
     .ui-state-focus {
       border: 1px solid $gl-primary;
       background: $gl-primary;
-      color: #fff;
+      color: $white-light;
     }
   }
 }

app/assets/stylesheets/framework/layout.scss

@@ -6,7 +6,7 @@ html {
 
 body {
   &.navless {
-    background-color: white !important;
+    background-color: $white-light !important;
   }
 }
 

app/assets/stylesheets/framework/lists.scss

@@ -11,8 +11,8 @@
   > li {
     padding: 10px 15px;
     min-height: 20px;
-    border-bottom: 1px solid #eee;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid $list-border-light;
+    border-bottom: 1px solid $list-border;
 
     &::after {
       content: " ";
@@ -21,7 +21,7 @@
     }
 
     &.disabled {
-      color: #888;
+      color: $list-text-disabled-color;
     }
 
     &.unstyled {
@@ -31,9 +31,9 @@
     }
 
     &.warning-row {
-      background-color: #fcf8e3;
-      border-color: #faebcc;
-      color: #8a6d3b;
+      background-color: $list-warning-row-bg;
+      border-color: $list-warning-row-border;
+      color: $list-warning-row-color;
     }
 
     &.smoke { background-color: $background-color; }

app/assets/stylesheets/framework/markdown_area.scss

@@ -73,7 +73,7 @@
 }
 
 .referenced-users {
-  color: #4c4e54;
+  color: $gl-header-color;
   padding-top: 10px;
 }
 
@@ -85,8 +85,8 @@
 
 .markdown-area {
   border-radius: 0;
-  background: #fff;
-  border: 1px solid #ddd;
+  background: $white-light;
+  border: 1px solid $md-area-border;
   min-height: 140px;
   max-height: 500px;
   padding: 5px;
@@ -108,7 +108,7 @@
 
   hr {
     // Darken 'whitesmoke' a bit to make it more visible in note bodies
-    border-color: darken(#f5f5f5, 8%);
+    border-color: darken($gray-normal, 8%);
     margin: 10px 0;
   }
 
@@ -135,7 +135,7 @@
 .toolbar-btn {
   float: left;
   padding: 0 5px;
-  color: #959494;
+  color: $note-toolbar-color;
   background: transparent;
   border: 0;
   outline: 0;

app/assets/stylesheets/framework/mixins.scss

@@ -24,7 +24,7 @@
     @include clearfix;
 
     padding: 10px 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $list-border-light;
     display: block;
     margin: 0;
 
@@ -67,8 +67,8 @@
 }
 
 @mixin dark-diff-match-line {
-  color: rgba(255, 255, 255, 0.3);
-  background: rgba(255, 255, 255, 0.1);
+  color: $dark-diff-match-bg;
+  background: $dark-diff-match-color;
 }
 
 @mixin webkit-prefix($property, $value) {

app/assets/stylesheets/framework/mobile.scss

@@ -133,9 +133,9 @@
   right: 0;
   top: 30%;
   padding: 5px 15px;
-  background: #eee;
+  background: $show-aside-bg;
   font-size: 20px;
-  color: #777;
+  color: $show-aside-color;
   z-index: 100;
-  box-shadow: 0 1px 2px #ddd;
+  box-shadow: 0 1px 2px $show-aside-shadow;
 }

app/assets/stylesheets/framework/nav.scss

@@ -75,7 +75,7 @@
 
     .badge {
       font-weight: normal;
-      background-color: #eee;
+      background-color: $nav-badge-bg;
       color: $btn-transparent-color;
       vertical-align: baseline;
     }
@@ -123,7 +123,7 @@
     line-height: 28px;
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: 100%;
     }
   }

app/assets/stylesheets/framework/pagination.scss

@@ -43,7 +43,7 @@
 /**
  * Small screen pagination
  */
-@media (max-width: $screen-xs) {
+@media (max-width: $screen-xs-min) {
   .gl-pagination {
     .pagination li a {
       padding: 6px 10px;
@@ -62,7 +62,7 @@
 /**
  * Medium screen pagination
  */
-@media (min-width: $screen-xs) and (max-width: $screen-md-max) {
+@media (min-width: $screen-xs-min) and (max-width: $screen-md-max) {
   .gl-pagination {
     .page {
       display: none;

app/assets/stylesheets/framework/selects.scss

@@ -6,7 +6,7 @@
 .select2-container,
 .select2-container.select2-drop-above {
   .select2-choice {
-    background: #fff;
+    background: $white-light;
     border-color: $input-border;
     height: 35px;
     padding: $gl-vert-padding $gl-input-padding;
@@ -47,7 +47,7 @@
 }
 
 .select2-drop {
-  box-shadow: rgba(76, 86, 103, 0.247059) 0 0 1px 0, rgba(31, 37, 50, 0.317647) 0 2px 18px 0;
+  box-shadow: $select2-drop-shadow1 0 0 1px 0, $select2-drop-shadow2 0 2px 18px 0;
   border-radius: $border-radius-default;
   border: none;
   min-width: 175px;
@@ -59,7 +59,7 @@
 }
 
 .select2-drop {
-  color: #7f8fa4;
+  color: $gl-grayish-blue;
 }
 
 .select2-highlighted {
@@ -156,7 +156,7 @@
 
 .select2-search input {
   padding: 2px 25px 2px 5px;
-  background: #fff image-url('select2.png');
+  background: $white-light image-url('select2.png');
   background-repeat: no-repeat;
   background-position: right 0 bottom 6px;
   border: 1px solid $input-border;
@@ -169,7 +169,7 @@
 }
 
 .select2-search input.select2-active {
-  background-color: #fff;
+  background-color: $white-light;
   background-image: image-url('select2-spinner.gif') !important;
   background-repeat: no-repeat;
   background-position: right 5px center !important;
@@ -206,7 +206,7 @@
 .select2-highlighted {
   .group-result {
     .group-path {
-      color: #fff;
+      color: $white-light;
     }
   }
 }
@@ -221,7 +221,7 @@
   }
 
   .group-path {
-    color: #999;
+    color: $group-path-color;
   }
 }
 
@@ -241,7 +241,7 @@
 
 .namespace-result {
   .namespace-kind {
-    color: #aaa;
+    color: $namespace-kind-color;
     font-weight: normal;
   }
 

app/assets/stylesheets/framework/sidebar.scss

@@ -36,7 +36,7 @@
   transition: padding $sidebar-transition-duration;
 
   .container-fluid {
-    background: #fff;
+    background: $white-light;
     padding: 0 $gl-padding;
 
     &.container-blank {
@@ -59,11 +59,6 @@
     padding: 0 !important;
   }
 
-  .sidebar-header {
-    padding: 11px 22px 12px;
-    font-size: 20px;
-  }
-
   li {
     &.separate-item {
       padding-top: 10px;
@@ -220,7 +215,7 @@ header.header-sidebar-pinned {
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    &:not(.build-sidebar) {
+    &:not(.build-sidebar):not(.wiki-sidebar) {
       padding-right: $sidebar_collapsed_width;
     }
   }

app/assets/stylesheets/framework/tables.scss

@@ -14,11 +14,11 @@ table {
     .warning,
     .danger,
     .info {
-      color: #fff;
+      color: $white-light;
 
       a:not(.btn) {
         text-decoration: underline;
-        color: #fff;
+        color: $white-light;
       }
     }
 

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -97,13 +97,13 @@
   display: inline-block;
 
   &.label-gray {
-    background-color: #f8fafc;
+    background-color: $label-gray-bg;
     color: $gl-gray;
     text-shadow: none;
   }
 
   &.label-inverse {
-    background-color: #333;
+    background-color: $label-inverse-bg;
   }
 }
 
@@ -158,7 +158,7 @@
       font-weight: normal;
 
       a {
-        color: #777;
+        color: $panel-heading-link-color;
       }
     }
   }
@@ -172,7 +172,7 @@
 .alert {
   a:not(.btn) {
     @extend .alert-link;
-    color: #fff;
+    color: $white-light;
     text-decoration: underline;
   }
 }

app/assets/stylesheets/framework/tw_bootstrap_variables.scss

@@ -48,7 +48,7 @@ $font-size-base: $gl-font-size;
 
 $padding-base-vertical: $gl-vert-padding;
 $padding-base-horizontal: $gl-padding;
-$component-active-color: #fff;
+$component-active-color: $white-light;
 $component-active-bg: $brand-info;
 
 //== Forms
@@ -66,7 +66,7 @@ $legend-color: $text-color;
 //##
 
 $pagination-color: $gl-gray;
-$pagination-bg: #fff;
+$pagination-bg: $white-light;
 $pagination-border: $border-color;
 
 $pagination-hover-color: $gl-gray;
@@ -74,7 +74,7 @@ $pagination-hover-bg: $row-hover;
 $pagination-hover-border: $border-color;
 
 $pagination-active-color: $blue-dark;
-$pagination-active-bg: #fff;
+$pagination-active-bg: $white-light;
 $pagination-active-border: $border-color;
 
 $pagination-disabled-color: #cdcdcd;
@@ -86,19 +86,19 @@ $pagination-disabled-border: $border-color;
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-$state-success-text: #fff;
+$state-success-text: $white-light;
 $state-success-bg: $brand-success;
 $state-success-border: $brand-success;
 
-$state-info-text: #fff;
+$state-info-text: $white-light;
 $state-info-bg: $brand-info;
 $state-info-border: $brand-info;
 
-$state-warning-text: #fff;
+$state-warning-text: $white-light;
 $state-warning-bg: $brand-warning;
 $state-warning-border: $brand-warning;
 
-$state-danger-text: #fff;
+$state-danger-text: $white-light;
 $state-danger-bg: $brand-danger;
 $state-danger-border: $brand-danger;
 
@@ -135,14 +135,14 @@ $well-border: #eee;
 $code-color: #c7254e;
 $code-bg: #f9f2f4;
 
-$kbd-color: #fff;
+$kbd-color: $white-light;
 $kbd-bg: #333;
 
 //== Buttons
 //
 //##
 $btn-default-color: $gl-text-color;
-$btn-default-bg: #fff;
+$btn-default-bg: $white-light;
 $btn-default-border: #e7e9ed;
 
 //== Nav

app/assets/stylesheets/framework/typography.scss

@@ -33,15 +33,15 @@
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
-    color: #555;
+    color: $kdb-color;
     vertical-align: middle;
-    background-color: #fcfcfc;
+    background-color: $kdb-bg;
     border-width: 1px;
     border-style: solid;
-    border-color: #ccc #ccc #bbb;
+    border-color: $kdb-border $kdb-border $kdb-border-bottom;
     border-image: none;
     border-radius: 3px;
-    box-shadow: 0 -1px 0 #bbb inset;
+    box-shadow: 0 -1px 0 $kdb-shadow inset;
   }
 
   h1 {
@@ -81,7 +81,7 @@
   }
 
   blockquote {
-    color: #7f8fa4;
+    color: $gl-grayish-blue;
     font-size: inherit;
     padding: 8px 21px;
     margin: 12px 0;
@@ -94,13 +94,13 @@
   }
 
   blockquote p {
-    color: #7f8fa4 !important;
+    color: $gl-grayish-blue !important;
     font-size: inherit;
     line-height: 1.5;
   }
 
   p {
-    color: #5c5d5e;
+    color: $gl-text-color-dark;
     margin: 6px 0 0;
   }
 
@@ -108,10 +108,10 @@
     @extend .table;
     @extend .table-bordered;
     margin: 12px 0;
-    color: #5c5d5e;
+    color: $gl-text-color-dark;
 
     th {
-      background: #f8fafc;
+      background: $label-gray-bg;
     }
   }
 
@@ -182,6 +182,7 @@
       left: -16px;
       position: absolute;
       text-decoration: none;
+      outline: none;
 
       &::after {
         content: image-url('icon_anchor.svg');
@@ -201,7 +202,7 @@
  *
  */
 body {
-  -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
+  -webkit-text-shadow: $body-text-shadow 0 0 1px;
 }
 
 .page-title {

app/assets/stylesheets/framework/variables.scss

@@ -96,6 +96,8 @@ $dark-background-color: #f5f5f5;
 $table-text-gray: #8f8f8f;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
+$well-light-border: #f1f1f1;
+$well-light-text-color: #5b6169;
 
 /*
  * Text
@@ -103,11 +105,13 @@ $well-inner-border: #eef0f2;
 $gl-font-size: 15px;
 $gl-title-color: #333;
 $gl-text-color: #5c5c5c;
+$gl-text-color-dark: #5c5d5e;
 $gl-text-color-light: #8c8c8c;
 $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-placeholder-color: #8f8f8f;
 $gl-icon-color: $gl-placeholder-color;
@@ -123,13 +127,20 @@ $gl-header-color: #4c4e54;
 $list-font-size: $gl-font-size;
 $list-title-color: $gl-title-color;
 $list-text-color: $gl-text-color;
+$list-text-disabled-color: #888;
+$list-border-light: #eee;
+$list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
+$list-warning-row-bg: #fcf8e3;
+$list-warning-row-border: #faebcc;
+$list-warning-row-color: #8a6d3b;
 
 /*
  * Markdown
  */
 $md-text-color: $gl-text-color;
 $md-link-color: $gl-link-color;
+$md-area-border: #ddd;
 
 /*
  * Code
@@ -153,10 +164,8 @@ $gl-sidebar-padding: 22px;
 $row-hover: #f7faff;
 $row-hover-border: #b2d7ff;
 $progress-color: #c0392b;
-$avatar_radius: 50%;
 $header-height: 50px;
 $fixed-layout-width: 1280px;
-$gl-avatar-size: 40px;
 $error-exclamation-point: #e62958;
 $border-radius-default: 2px;
 $btn-transparent-color: #8f8f8f;
@@ -166,10 +175,47 @@ $provider-btn-not-active-color: #4688f1;
 $link-underline-blue: #4a8bee;
 $active-item-blue: #4a8bee;
 $layout-link-gray: #7e7c7c;
-$todo-alert-blue: #428bca;
 $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;
+$show-aside-bg: #eee;
+$show-aside-color: #777;
+$show-aside-shadow: #ddd;
+$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;
+$issue-box-upcoming-bg: #8f8f8f;
+
+/*
+* Common component specific colors
+*/
+$hint-color: #999;
+$well-pre-bg: #eee;
+$well-pre-color: #555;
+$loading-color: #555;
+$update-author-color: #999;
+$user-mention-color: #2fa0bb;
+$time-color: #999;
+$project-member-show-color: #aaa;
+$gl-promo-color: #aaa;
+$error-bg: #c67;
+$warning-message-bg: #ffffe6;
+$warning-message-border: #ed9;
+$warning-message-color: #b90;
+$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;
@@ -205,6 +251,16 @@ $table-border-gray: #f0f0f0;
 $line-target-blue: #f6faff;
 $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;
+$file-mode-changed: #777;
+$diff-image-bg: #ddd;
+$diff-image-info-color: grey;
+$diff-image-img-bg: #e5e5e5;
+$diff-swipe-border: #999;
+$diff-view-modes-color: grey;
+$diff-view-modes-border: #c1c1c1;
 
 /*
  * Fonts
@@ -226,6 +282,7 @@ $dropdown-divider-color: rgba(#000, .1);
 $dropdown-header-color: #959494;
 $dropdown-title-btn-color: #bfbfbf;
 $dropdown-input-color: #555;
+$dropdown-input-fa-color: #c7c7c7;
 $dropdown-input-focus-border: $focus-border-color;
 $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
@@ -243,6 +300,7 @@ $dropdown-toggle-hover-icon-color: darken($dropdown-toggle-icon-color, 7%);
 * Buttons
 */
 $btn-active-gray: #ececec;
+$btn-active-gray-light: e4e7ed;
 $btn-placeholder-gray: #c7c7c7;
 $btn-white-active: #848484;
 $btn-gray-hover: #eee;
@@ -252,6 +310,7 @@ $btn-gray-hover: #eee;
  */
 $award-emoji-menu-bg: #fff;
 $award-emoji-menu-border: #f1f2f4;
+$award-emoji-menu-shadow: rgba(0,0,0,.175);
 $award-emoji-new-btn-icon-color: #dcdcdc;
 
 /*
@@ -273,17 +332,28 @@ $notes-light-color: #8e8e8e;
 $notes-action-color: #c3c3c3;
 $notes-role-color: #8e8e8e;
 $notes-role-border-color: #e4e4e4;
-
 $note-disabled-comment-color: #b2b2b2;
 $note-form-border-color: #e5e5e5;
 $note-toolbar-color: #959494;
+$note-targe3-outside: #fffff0;
+$note-targe3-inside: #ffffd3;
+$note-line2-border: #ddd;
+
 
+/*
+* Zen
+*/
+$zen-control-color: #555;
 $zen-control-hover-color: #111;
 
+/*
+* Calendar
+*/
 $calendar-header-color: #b8b8b8;
 $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
 $calendar-unselectable-bg: $gray-light;
+$calendar-user-contrib-text: #959494;
 
 /*
  *  Cycle Analytics
@@ -293,13 +363,217 @@ $cycle-analytics-box-text-color: #8c8c8c;
 $cycle-analytics-big-font: 19px;
 $cycle-analytics-dark-text: $gl-title-color;
 $cycle-analytics-light-gray: #bfbfbf;
+$cycle-analytics-dismiss-icon-color: #b2b2b2;
 
 /*
  * Personal Access Tokens
  */
 $personal-access-tokens-disabled-label-color: #bbb;
 
+/*
+* CI
+*/
 $ci-output-bg: #1d1f21;
 $ci-text-color: #c5c8c6;
+$ci-skipped-color: #888;
 
+/*
+* Boards
+*/
 $issue-boards-font-size: 15px;
+$issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
+
+/*
+* Avatar
+*/
+$avatar_radius: 50%;
+$avatar-border: rgba(0, 0, 0, .1);
+$gl-avatar-size: 40px;
+
+/*
+* Builds
+*/
+$builds-trace-bg: #111;
+
+/*
+* Callout
+*/
+$callout-danger-bg: #fdf7f7;
+$callout-danger-border: #eed3d7;
+$callout-danger-color: #b94a48;
+$callout-warning-bg: #faf8f0;
+$callout-warning-border: #faebcc;
+$callout-warning-color: #8a6d3b;
+$callout-info-bg: #f4f8fa;
+$callout-info-border: #bce8f1;
+$callout-info-color: #34789a;
+$callout-success-bg: #dff0d8;
+$callout-success-border: #5ca64d;
+$callout-success-color: #3c763d;
+
+/*
+* Commit Page
+*/
+$commit-committer-color: #999;
+$commit-max-width-marker-color: rgba(0, 0, 0, 0.0);
+$commit-message-text-area-bg: rgba(0, 0, 0, 0.0);
+
+/*
+* Common
+*/
+$common-gray: $gl-gray;
+$common-gray-light: #bbb;
+$common-gray-dark: #444;
+$common-red: $gl-text-red;
+$common-green: $gl-text-green;
+
+
+/*
+* Dashboard
+*/
+$dashboard-project-access-icon-color: #888;
+
+/*
+* Editor
+*/
+$editor-cancel-color: #b94a48;
+
+/*
+* Events
+*/
+$events-pre-color: #777;
+$events-note-icon-color: #777;
+$events-body-border: #ddd;
+
+/*
+* Files
+*/
+$file-image-bg: #eee;
+$blob-bg: #eee;
+$blame-border: #eee;
+$blame-line-numbers-border: #ddd;
+$logs-bg: #eee;
+$logs-li-color: #888;
+$logs-p-color: #333;
+
+/*
+* Forms
+*/
+$input-danger-bg: #f2dede;
+$input-danger-border: #d66;
+$input-group-addon-bg: #f7f8fa;
+$gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
+$gl-field-focus-shadow-error: rgba(210, 40, 82, 0.6);
+
+/*
+* Help
+*/
+$document-index-color: #888;
+$help-shortcut-color: #999;
+$help-shortcut-mapping-color: #555;
+$help-shortcut-header-color: #333;
+
+/*
+* Issues
+*/
+$issues-border: #e5e5e5;
+$issues-today-bg: #f3fff2;
+$issues-today-border: #e1e8d5;
+
+/*
+* jQuery UI
+*/
+$jq-ui-border: #ddd;
+$jq-ui-default-color: #777;
+
+/*
+* Label
+*/
+$label-gray-bg: #f8fafc;
+$label-inverse-bg: #333;
+$label-remove-border: rgba(0, 0, 0, .1);
+
+/*
+* Lint
+*/
+$lint-incorrect-color: red;
+$lint-correct-color: #47a447;
+
+/*
+* Login
+*/
+$login-brand-holder-color: #888;
+$login-devise-error-color: #a00;
+
+/*
+* Nav
+*/
+$nav-link-gray: #959494;
+$nav-badge-bg: #eee;
+$nav-toggle-gray: #666;
+
+/*
+* Notify
+*/
+$notify-details: #777;
+$notify-footer: #777;
+$notify-new-file: #090;
+$notify-deleted-file: #b00;
+
+/*
+* Projects
+*/
+$project-option-descr-color: #54565b;
+$project-breadcrumb-color: #999;
+$project-private-forks-notice-odd: #2aa056;
+$project-network-controls-color: #888;
+$project-limit-message-bg: #f28d35;
+
+/*
+* Runners
+*/
+$runner-state-shared-bg: #32b186;
+$runner-state-specific-bg: #3498db;
+$runner-status-online-color: green;
+$runner-status-offline-color: gray;
+$runner-status-paused-color: red;
+
+/*
+Stat Graph
+*/
+$stat-graph-common-bg: #f3f3f3;
+$stat-graph-area-fill: #1db34f;
+$stat-graph-axis-fill: #aaa;
+$stat-graph-orange-fill: #f17f49;
+$stat-graph-selection-fill: #333;
+$stat-graph-selection-stroke: #333;
+
+/*
+* Selects
+*/
+$select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
+$select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
+
+
+/*
+* Todo
+*/
+$todo-alert-blue: #428bca;
+$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);
+
+/*
+* UI Dev Kit
+*/
+$ui-dev-kit-example-color: #bbb;
+$ui-dev-kit-example-border: #ddd;

app/assets/stylesheets/framework/zen.scss

 .zen-backdrop {
   &.fullscreen {
-    background-color: white;
+    background-color: $white-light;
     position: fixed;
     top: 0;
     bottom: 0;
@@ -12,7 +12,7 @@
       border: none;
       box-shadow: none;
       border-radius: 0;
-      color: #000;
+      color: $black;
       font-size: 20px;
       line-height: 26px;
       padding: 30px;
@@ -34,7 +34,7 @@
 
 .zen-control {
   padding: 0;
-  color: #555;
+  color: $zen-control-color;
   background: none;
   border: 0;
 }

app/assets/stylesheets/highlight/dark.scss

 /* https://github.com/MozMorris/tomorrow-pygments */
+
+/*
+* Dark syntax colors
+*/
+$dark-new-bg: rgba(51, 255, 51, 0.1);
+$dark-new-idiff: rgba(51, 255, 51, 0.2);
+$dark-old-bg: rgba(255, 51, 51, 0.2);
+$dark-old-idiff: rgba(255, 51, 51, 0.25);
+$dark-border: #808080;
+$dark-code-border: #666;
+$dark-main-bg: #1d1f21;
+$dark-main-color: #1d1f21;
+$dark-line-color: #c5c8c6;
+$dark-line-num-color: rgba(255, 255, 255, 0.3);
+$dark-diff-not-empty-bg: #557;
+$dark-highlight-bg: #ffe792;
+$dark-highlight-color: $black;
+$dark-pre-hll-bg: #373b41;
+$dark-hll-bg: #373b41;
+$dark-c: #969896;
+$dark-err: #c66;
+$dark-k: #b294bb;
+$dark-l: #de935f;
+$dark-n: #c5c8c6;
+$dark-o: #8abeb7;
+$dark-p: #c5c8c6;
+$dark-cm: #969896;
+$dark-cp: #969896;
+$dark-c1: #969896;
+$dark-cs: #969896;
+$dark-gd: #c66;
+$dark-gh: #c5c8c6;
+$dark-gi: #b5bd68;
+$dark-gp: #969896;
+$dark-gu: #8abeb7;
+$dark-kc: #b294bb;
+$dark-kd: #b294bb;
+$dark-kn: #8abeb7;
+$dark-kp: #b294bb;
+$dark-kr: #b294bb;
+$dark-kt: #f0c674;
+$dark-ld: #b5bd68;
+$dark-m: #de935f;
+$dark-s: #b5bd68;
+$dark-na: #81a2be;
+$dark-nb: #c5c8c6;
+$dark-nc: #f0c674;
+$dark-no: #c66;
+$dark-nd: #8abeb7;
+$dark-ni: #c5c8c6;
+$dark-ne: #c66;
+$dark-nf: #81a2be;
+$dark-nl: #c5c8c6;
+$dark-nn: #f0c674;
+$dark-nx: #81a2be;
+$dark-py: #c5c8c6;
+$dark-nt: #8abeb7;
+$dark-nv: #c66;
+$dark-ow: #8abeb7;
+$dark-w: #c5c8c6;
+$dark-mf: #de935f;
+$dark-mh: #de935f;
+$dark-mi: #de935f;
+$dark-mo: #de935f;
+$dark-sb: #b5bd68;
+$dark-sc: #c5c8c6;
+$dark-sd: #969896;
+$dark-s2: #b5bd68;
+$dark-se: #de935f;
+$dark-sh: #b5bd68;
+$dark-si: #de935f;
+$dark-sx: #b5bd68;
+$dark-sr: #b5bd68;
+$dark-s1: #b5bd68;
+$dark-ss: #b5bd68;
+$dark-bp: #c5c8c6;
+$dark-vc: #c66;
+$dark-vg: #c66;
+$dark-vi: #c66;
+$dark-il: #de935f;
+
 .code.dark {
   // Line numbers
   .line-numbers,
   .diff-line-num {
-    background-color: #1d1f21;
+    background-color: $dark-main-bg;
   }
 
   .diff-line-num,
   .diff-line-num a {
-    color: rgba(255, 255, 255, 0.3);
+    color: $dark-main-color;
+    color: $dark-line-num-color;
   }
 
   // Code itself
   pre.code,
   .diff-line-num {
-    border-color: #666;
+    border-color: $dark-code-border;
   }
 
   &,
   pre.code,
   .line_holder .line_content {
-    background-color: #1d1f21;
-    color: #c5c8c6;
+    background-color: $dark-main-bg;
+    color: $dark-line-color;
   }
 
   // Diff line
@@ -32,18 +114,18 @@
 
     td.diff-line-num.hll:not(.empty-cell),
     td.line_content.hll:not(.empty-cell) {
-      background-color: #557;
-      border-color: darken(#557, 15%);
+      background-color: $dark-diff-not-empty-bg;
+      border-color: darken($dark-diff-not-empty-bg, 15%);
     }
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background(rgba(51, 255, 51, 0.1), rgba(51, 255, 51, 0.2), #808080);
+      @include diff_background($dark-new-bg, $dark-new-idiff, $dark-border);
     }
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background(rgba(255, 51, 51, 0.2), rgba(255, 51, 51, 0.25), #808080);
+      @include diff_background($dark-old-bg, $dark-old-idiff, $dark-border);
     }
 
     .line_content.match {
@@ -53,77 +135,77 @@
 
   // highlight line via anchor
   pre .hll {
-    background-color: #557 !important;
+    background-color: $dark-pre-hll-bg !important;
   }
 
   // Search result highlight
   span.highlight_word {
-    background-color: #ffe792 !important;
-    color: #000 !important;
+    background-color: $dark-highlight-bg !important;
+    color: $dark-highlight-color !important;
   }
 
-  .hll { background-color: #373b41; }
-  .c { color: #969896; } /* Comment */
-  .err { color: #c66; } /* Error */
-  .k { color: #b294bb; } /* Keyword */
-  .l { color: #de935f; } /* Literal */
-  .n { color: #c5c8c6; } /* Name */
-  .o { color: #8abeb7; } /* Operator */
-  .p { color: #c5c8c6; } /* Punctuation */
-  .cm { color: #969896; } /* Comment.Multiline */
-  .cp { color: #969896; } /* Comment.Preproc */
-  .c1 { color: #969896; } /* Comment.Single */
-  .cs { color: #969896; } /* Comment.Special */
-  .gd { color: #c66; } /* Generic.Deleted */
+  .hll { background-color: $dark-hll-bg; }
+  .c { color: $dark-c; } /* Comment */
+  .err { color: $dark-err; } /* Error */
+  .k { color: $dark-k; } /* Keyword */
+  .l { color: $dark-l; } /* Literal */
+  .n { color: $dark-n; } /* Name */
+  .o { color: $dark-o; } /* Operator */
+  .p { color: $dark-p; } /* Punctuation */
+  .cm { color: $dark-cm; } /* Comment.Multiline */
+  .cp { color: $dark-cp; } /* Comment.Preproc */
+  .c1 { color: $dark-c1; } /* Comment.Single */
+  .cs { color: $dark-cs; } /* Comment.Special */
+  .gd { color: $dark-gd; } /* Generic.Deleted */
   .ge { font-style: italic; } /* Generic.Emph */
-  .gh { color: #c5c8c6; font-weight: bold; } /* Generic.Heading */
-  .gi { color: #b5bd68; } /* Generic.Inserted */
-  .gp { color: #969896; font-weight: bold; } /* Generic.Prompt */
+  .gh { color: $dark-gh; font-weight: bold; } /* Generic.Heading */
+  .gi { color: $dark-gi; } /* Generic.Inserted */
+  .gp { color: $dark-gp; font-weight: bold; } /* Generic.Prompt */
   .gs { font-weight: bold; } /* Generic.Strong */
-  .gu { color: #8abeb7; font-weight: bold; } /* Generic.Subheading */
-  .kc { color: #b294bb; } /* Keyword.Constant */
-  .kd { color: #b294bb; } /* Keyword.Declaration */
-  .kn { color: #8abeb7; } /* Keyword.Namespace */
-  .kp { color: #b294bb; } /* Keyword.Pseudo */
-  .kr { color: #b294bb; } /* Keyword.Reserved */
-  .kt { color: #f0c674; } /* Keyword.Type */
-  .ld { color: #b5bd68; } /* Literal.Date */
-  .m { color: #de935f; } /* Literal.Number */
-  .s { color: #b5bd68; } /* Literal.String */
-  .na { color: #81a2be; } /* Name.Attribute */
-  .nb { color: #c5c8c6; } /* Name.Builtin */
-  .nc { color: #f0c674; } /* Name.Class */
-  .no { color: #c66; } /* Name.Constant */
-  .nd { color: #8abeb7; } /* Name.Decorator */
-  .ni { color: #c5c8c6; } /* Name.Entity */
-  .ne { color: #c66; } /* Name.Exception */
-  .nf { color: #81a2be; } /* Name.Function */
-  .nl { color: #c5c8c6; } /* Name.Label */
-  .nn { color: #f0c674; } /* Name.Namespace */
-  .nx { color: #81a2be; } /* Name.Other */
-  .py { color: #c5c8c6; } /* Name.Property */
-  .nt { color: #8abeb7; } /* Name.Tag */
-  .nv { color: #c66; } /* Name.Variable */
-  .ow { color: #8abeb7; } /* Operator.Word */
-  .w { color: #c5c8c6; } /* Text.Whitespace */
-  .mf { color: #de935f; } /* Literal.Number.Float */
-  .mh { color: #de935f; } /* Literal.Number.Hex */
-  .mi { color: #de935f; } /* Literal.Number.Integer */
-  .mo { color: #de935f; } /* Literal.Number.Oct */
-  .sb { color: #b5bd68; } /* Literal.String.Backtick */
-  .sc { color: #c5c8c6; } /* Literal.String.Char */
-  .sd { color: #969896; } /* Literal.String.Doc */
-  .s2 { color: #b5bd68; } /* Literal.String.Double */
-  .se { color: #de935f; } /* Literal.String.Escape */
-  .sh { color: #b5bd68; } /* Literal.String.Heredoc */
-  .si { color: #de935f; } /* Literal.String.Interpol */
-  .sx { color: #b5bd68; } /* Literal.String.Other */
-  .sr { color: #b5bd68; } /* Literal.String.Regex */
-  .s1 { color: #b5bd68; } /* Literal.String.Single */
-  .ss { color: #b5bd68; } /* Literal.String.Symbol */
-  .bp { color: #c5c8c6; } /* Name.Builtin.Pseudo */
-  .vc { color: #c66; } /* Name.Variable.Class */
-  .vg { color: #c66; } /* Name.Variable.Global */
-  .vi { color: #c66; } /* Name.Variable.Instance */
-  .il { color: #de935f; } /* Literal.Number.Integer.Long */
+  .gu { color: $dark-gu; font-weight: bold; } /* Generic.Subheading */
+  .kc { color: $dark-kc; } /* Keyword.Constant */
+  .kd { color: $dark-kd; } /* Keyword.Declaration */
+  .kn { color: $dark-kn; } /* Keyword.Namespace */
+  .kp { color: $dark-kp; } /* Keyword.Pseudo */
+  .kr { color: $dark-kr; } /* Keyword.Reserved */
+  .kt { color: $dark-kt; } /* Keyword.Type */
+  .ld { color: $dark-ld; } /* Literal.Date */
+  .m { color: $dark-m; } /* Literal.Number */
+  .s { color: $dark-s; } /* Literal.String */
+  .na { color: $dark-na; } /* Name.Attribute */
+  .nb { color: $dark-nb; } /* Name.Builtin */
+  .nc { color: $dark-nc; } /* Name.Class */
+  .no { color: $dark-no; } /* Name.Constant */
+  .nd { color: $dark-nd; } /* Name.Decorator */
+  .ni { color: $dark-ni; } /* Name.Entity */
+  .ne { color: $dark-ne; } /* Name.Exception */
+  .nf { color: $dark-nf; } /* Name.Function */
+  .nl { color: $dark-nl; } /* Name.Label */
+  .nn { color: $dark-nn; } /* Name.Namespace */
+  .nx { color: $dark-nx; } /* Name.Other */
+  .py { color: $dark-py; } /* Name.Property */
+  .nt { color: $dark-nt; } /* Name.Tag */
+  .nv { color: $dark-nv; } /* Name.Variable */
+  .ow { color: $dark-ow; } /* Operator.Word */
+  .w { color: $dark-w; } /* Text.Whitespace */
+  .mf { color: $dark-mf; } /* Literal.Number.Float */
+  .mh { color: $dark-mh; } /* Literal.Number.Hex */
+  .mi { color: $dark-mi; } /* Literal.Number.Integer */
+  .mo { color: $dark-mo; } /* Literal.Number.Oct */
+  .sb { color: $dark-sb; } /* Literal.String.Backtick */
+  .sc { color: $dark-sc; } /* Literal.String.Char */
+  .sd { color: $dark-sd; } /* Literal.String.Doc */
+  .s2 { color: $dark-s2; } /* Literal.String.Double */
+  .se { color: $dark-se; } /* Literal.String.Escape */
+  .sh { color: $dark-sh; } /* Literal.String.Heredoc */
+  .si { color: $dark-si; } /* Literal.String.Interpol */
+  .sx { color: $dark-sx; } /* Literal.String.Other */
+  .sr { color: $dark-sr; } /* Literal.String.Regex */
+  .s1 { color: $dark-s1; } /* Literal.String.Single */
+  .ss { color: $dark-ss; } /* Literal.String.Symbol */
+  .bp { color: $dark-bp; } /* Name.Builtin.Pseudo */
+  .vc { color: $dark-vc; } /* Name.Variable.Class */
+  .vg { color: $dark-vg; } /* Name.Variable.Global */
+  .vi { color: $dark-vi; } /* Name.Variable.Instance */
+  .il { color: $dark-il; } /* Literal.Number.Integer.Long */
 }

app/assets/stylesheets/highlight/monokai.scss

 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
+
+/*
+* Monokai Colors
+*/
+$monokai-bg: #272822;
+$monokai-border: #555;
+$monokai-text-color: #f8f8f2;
+$monokai-line-num-color: rgba(255, 255, 255, 0.3);
+$monokai-line-empty-bg: #49483e;
+$monokai-line-empty-border: darken($monokai-line-empty-bg, 15%);
+$monokai-diff-border: #808080;
+$monokai-highlight-bg: #ffe792;
+
+$monokai-new-bg: rgba(166, 226, 46, 0.1);
+$monokai-new-idiff: rgba(166, 226, 46, 0.15);
+
+$monokai-old-bg: rgba(254, 147, 140, 0.15);
+$monokai-old-idiff: rgba(254, 147, 140, 0.2);
+
+$monokai-hll: #49483e;
+$monokai-c: #75715e;
+$monokai-err-color: #960050;
+$monokai-err-bg: #1e0010;
+$monokai-k: #66d9ef;
+$monokai-l: #ae81ff;
+$monokai-n: #f8f8f2;
+$monokai-o: #f92672;
+$monokai-p: #f8f8f2;
+$monokai-cm: #75715e;
+$monokai-cp: #75715e;
+$monokai-c1: #75715e;
+$monokai-cs: #75715e;
+$monokai-kc: #66d9ef;
+$monokai-kd: #66d9ef;
+$monokai-kn: #f92672;
+$monokai-kp: #66d9ef;
+$monokai-kr: #66d9ef;
+$monokai-kt: #66d9ef;
+$monokai-ld: #e6db74;
+$monokai-m: #ae81ff;
+$monokai-s: #e6db74;
+$monokai-na: #a6e22e;
+$monokai-nb: #f8f8f2;
+$monokai-nc: #a6e22e;
+$monokai-no: #66d9ef;
+$monokai-nd: #a6e22e;
+$monokai-ni: #f8f8f2;
+$monokai-ne: #a6e22e;
+$monokai-nf: #a6e22e;
+$monokai-nl: #f8f8f2;
+$monokai-nn: #f8f8f2;
+$monokai-nx: #a6e22e;
+$monokai-py: #f8f8f2;
+$monokai-nt: #f92672;
+$monokai-nv: #f8f8f2;
+$monokai-ow: #f92672;
+$monokai-w: #f8f8f2;
+$monokai-mf: #ae81ff;
+$monokai-mh: #ae81ff;
+$monokai-mi: #ae81ff;
+$monokai-mo: #ae81ff;
+$monokai-sb: #e6db74;
+$monokai-sc: #e6db74;
+$monokai-sd: #e6db74;
+$monokai-s2: #e6db74;
+$monokai-se: #ae81ff;
+$monokai-sh: #e6db74;
+$monokai-si: #e6db74;
+$monokai-sx: #e6db74;
+$monokai-sr: #e6db74;
+$monokai-s1: #e6db74;
+$monokai-ss: #e6db74;
+$monokai-bp: #f8f8f2;
+$monokai-vc: #f8f8f2;
+$monokai-vg: #f8f8f2;
+$monokai-vi: #f8f8f2;
+$monokai-il: #ae81ff;
+$monokai-gu: #75715e;
+$monokai-gd: #f92672;
+$monokai-gi: #a6e22e;
+
 .code.monokai {
   // Line numbers
   .line-numbers,
   .diff-line-num {
-    background-color: #272822;
+    background-color: $monokai-bg;
   }
 
   .diff-line-num,
   .diff-line-num a {
-    color: rgba(255, 255, 255, 0.3);
+    color: $monokai-line-num-color;
   }
 
   // Code itself
   pre.code,
   .diff-line-num {
-    border-color: #555;
+    border-color: $monokai-border;
   }
 
   &,
   pre.code,
   .line_holder .line_content {
-    background-color: #272822;
-    color: #f8f8f2;
+    background-color: $monokai-bg;
+    color: $monokai-text-color;
   }
 
   // Diff line
@@ -32,18 +113,18 @@
 
     td.diff-line-num.hll:not(.empty-cell),
     td.line_content.hll:not(.empty-cell) {
-      background-color: #49483e;
-      border-color: darken(#49483e, 15%);
+      background-color: $monokai-line-empty-bg;
+      border-color: $monokai-line-empty-border;
     }
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background(rgba(166, 226, 46, 0.1), rgba(166, 226, 46, 0.15), #808080);
+      @include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
     }
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background(rgba(254, 147, 140, 0.15), rgba(254, 147, 140, 0.2), #808080);
+      @include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
     }
 
     .line_content.match {
@@ -53,75 +134,75 @@
 
   // highlight line via anchor
   pre .hll {
-    background-color: #49483e !important;
+    background-color: $monokai-hll !important;
   }
 
   // Search result highlight
   span.highlight_word {
-    background-color: #ffe792 !important;
-    color: #000 !important;
+    background-color: $monokai-highlight-bg !important;
+    color: $black !important;
   }
 
-  .hll { background-color: #49483e; }
-  .c { color: #75715e; } /* Comment */
-  .err { color: #960050; background-color: #1e0010; } /* Error */
-  .k { color: #66d9ef; } /* Keyword */
-  .l { color: #ae81ff; } /* Literal */
-  .n { color: #f8f8f2; } /* Name */
-  .o { color: #f92672; } /* Operator */
-  .p { color: #f8f8f2; } /* Punctuation */
-  .cm { color: #75715e; } /* Comment.Multiline */
-  .cp { color: #75715e; } /* Comment.Preproc */
-  .c1 { color: #75715e; } /* Comment.Single */
-  .cs { color: #75715e; } /* Comment.Special */
+  .hll { background-color: $monokai-hll; }
+  .c { color: $monokai-c; } /* Comment */
+  .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */
+  .k { color: $monokai-k; } /* Keyword */
+  .l { color: $monokai-l; } /* Literal */
+  .n { color: $monokai-n; } /* Name */
+  .o { color: $monokai-o; } /* Operator */
+  .p { color: $monokai-p; } /* Punctuation */
+  .cm { color: $monokai-cm; } /* Comment.Multiline */
+  .cp { color: $monokai-cp; } /* Comment.Preproc */
+  .c1 { color: $monokai-c1; } /* Comment.Single */
+  .cs { color: $monokai-cs; } /* Comment.Special */
   .ge { font-style: italic; } /* Generic.Emph */
   .gs { font-weight: bold; } /* Generic.Strong */
-  .kc { color: #66d9ef; } /* Keyword.Constant */
-  .kd { color: #66d9ef; } /* Keyword.Declaration */
-  .kn { color: #f92672; } /* Keyword.Namespace */
-  .kp { color: #66d9ef; } /* Keyword.Pseudo */
-  .kr { color: #66d9ef; } /* Keyword.Reserved */
-  .kt { color: #66d9ef; } /* Keyword.Type */
-  .ld { color: #e6db74; } /* Literal.Date */
-  .m { color: #ae81ff; } /* Literal.Number */
-  .s { color: #e6db74; } /* Literal.String */
-  .na { color: #a6e22e; } /* Name.Attribute */
-  .nb { color: #f8f8f2; } /* Name.Builtin */
-  .nc { color: #a6e22e; } /* Name.Class */
-  .no { color: #66d9ef; } /* Name.Constant */
-  .nd { color: #a6e22e; } /* Name.Decorator */
-  .ni { color: #f8f8f2; } /* Name.Entity */
-  .ne { color: #a6e22e; } /* Name.Exception */
-  .nf { color: #a6e22e; } /* Name.Function */
-  .nl { color: #f8f8f2; } /* Name.Label */
-  .nn { color: #f8f8f2; } /* Name.Namespace */
-  .nx { color: #a6e22e; } /* Name.Other */
-  .py { color: #f8f8f2; } /* Name.Property */
-  .nt { color: #f92672; } /* Name.Tag */
-  .nv { color: #f8f8f2; } /* Name.Variable */
-  .ow { color: #f92672; } /* Operator.Word */
-  .w { color: #f8f8f2; } /* Text.Whitespace */
-  .mf { color: #ae81ff; } /* Literal.Number.Float */
-  .mh { color: #ae81ff; } /* Literal.Number.Hex */
-  .mi { color: #ae81ff; } /* Literal.Number.Integer */
-  .mo { color: #ae81ff; } /* Literal.Number.Oct */
-  .sb { color: #e6db74; } /* Literal.String.Backtick */
-  .sc { color: #e6db74; } /* Literal.String.Char */
-  .sd { color: #e6db74; } /* Literal.String.Doc */
-  .s2 { color: #e6db74; } /* Literal.String.Double */
-  .se { color: #ae81ff; } /* Literal.String.Escape */
-  .sh { color: #e6db74; } /* Literal.String.Heredoc */
-  .si { color: #e6db74; } /* Literal.String.Interpol */
-  .sx { color: #e6db74; } /* Literal.String.Other */
-  .sr { color: #e6db74; } /* Literal.String.Regex */
-  .s1 { color: #e6db74; } /* Literal.String.Single */
-  .ss { color: #e6db74; } /* Literal.String.Symbol */
-  .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
-  .vc { color: #f8f8f2; } /* Name.Variable.Class */
-  .vg { color: #f8f8f2; } /* Name.Variable.Global */
-  .vi { color: #f8f8f2; } /* Name.Variable.Instance */
-  .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
-  .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-  .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
-  .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
+  .kc { color: $monokai-kc; } /* Keyword.Constant */
+  .kd { color: $monokai-kd; } /* Keyword.Declaration */
+  .kn { color: $monokai-kn; } /* Keyword.Namespace */
+  .kp { color: $monokai-kp; } /* Keyword.Pseudo */
+  .kr { color: $monokai-kr; } /* Keyword.Reserved */
+  .kt { color: $monokai-kt; } /* Keyword.Type */
+  .ld { color: $monokai-ld; } /* Literal.Date */
+  .m { color: $monokai-m; } /* Literal.Number */
+  .s { color: $monokai-s; } /* Literal.String */
+  .na { color: $monokai-na; } /* Name.Attribute */
+  .nb { color: $monokai-nb; } /* Name.Builtin */
+  .nc { color: $monokai-nc; } /* Name.Class */
+  .no { color: $monokai-no; } /* Name.Constant */
+  .nd { color: $monokai-nd; } /* Name.Decorator */
+  .ni { color: $monokai-ni; } /* Name.Entity */
+  .ne { color: $monokai-ne; } /* Name.Exception */
+  .nf { color: $monokai-nf; } /* Name.Function */
+  .nl { color: $monokai-nl; } /* Name.Label */
+  .nn { color: $monokai-nn; } /* Name.Namespace */
+  .nx { color: $monokai-nx; } /* Name.Other */
+  .py { color: $monokai-py; } /* Name.Property */
+  .nt { color: $monokai-nt; } /* Name.Tag */
+  .nv { color: $monokai-nv; } /* Name.Variable */
+  .ow { color: $monokai-ow; } /* Operator.Word */
+  .w { color: $monokai-w; } /* Text.Whitespace */
+  .mf { color: $monokai-mf; } /* Literal.Number.Float */
+  .mh { color: $monokai-mh; } /* Literal.Number.Hex */
+  .mi { color: $monokai-mi; } /* Literal.Number.Integer */
+  .mo { color: $monokai-mo; } /* Literal.Number.Oct */
+  .sb { color: $monokai-sb; } /* Literal.String.Backtick */
+  .sc { color: $monokai-sc; } /* Literal.String.Char */
+  .sd { color: $monokai-sd; } /* Literal.String.Doc */
+  .s2 { color: $monokai-s2; } /* Literal.String.Double */
+  .se { color: $monokai-se; } /* Literal.String.Escape */
+  .sh { color: $monokai-sh; } /* Literal.String.Heredoc */
+  .si { color: $monokai-si; } /* Literal.String.Interpol */
+  .sx { color: $monokai-sx; } /* Literal.String.Other */
+  .sr { color: $monokai-sr; } /* Literal.String.Regex */
+  .s1 { color: $monokai-s1; } /* Literal.String.Single */
+  .ss { color: $monokai-ss; } /* Literal.String.Symbol */
+  .bp { color: $monokai-bp; } /* Name.Builtin.Pseudo */
+  .vc { color: $monokai-vc; } /* Name.Variable.Class */
+  .vg { color: $monokai-vg; } /* Name.Variable.Global */
+  .vi { color: $monokai-vi; } /* Name.Variable.Instance */
+  .il { color: $monokai-il; } /* Literal.Number.Integer.Long */
+  .gu { color: $monokai-gu; } /* Generic.Subheading & Diff Unified/Comment? */
+  .gd { color: $monokai-gd; } /* Generic.Deleted & Diff Deleted */
+  .gi { color: $monokai-gi; } /* Generic.Inserted & Diff Inserted */
 }

app/assets/stylesheets/highlight/white.scss

 /* https://github.com/aahan/pygments-github-style */
 
+/*
+* White Syntax Colors
+*/
+$white-code-color: #333;
+$white-highlight: #fafe3d;
+$white-pre-hll-bg: #f8eec7;
+$white-hll-bg: #f8f8f8;
+$white-c: #998;
+$white-err: #a61717;
+$white-err-bg: #e3d2d2;
+$white-cm: #998;
+$white-cp: #999;
+$white-c1: #998;
+$white-cs: #999;
+$white-gd: $black;
+$white-gd-bg: #fdd;
+$white-gd-x: $black;
+$white-gd-x-bg: #faa;
+$white-gr: #a00;
+$white-gh: #999;
+$white-gi: $black;
+$white-gi-bg: #dfd;
+$white-gi-x: $black;
+$white-gi-x-bg: #afa;
+$white-go: #888;
+$white-gp: #555;
+$white-gu: #800080;
+$white-gt: #a00;
+$white-kt: #458;
+$white-m: #099;
+$white-s: #d14;
+$white-n: #333;
+$white-na: teal;
+$white-nb: #0086b3;
+$white-nc: #458;
+$white-no: teal;
+$white-ni: purple;
+$white-ne: #900;
+$white-nf: #900;
+$white-nn: #555;
+$white-nt: navy;
+$white-nv: teal;
+$white-w: #bbb;
+$white-mf: #099;
+$white-mh: #099;
+$white-mi: #099;
+$white-mo: #099;
+$white-sb: #d14;
+$white-sc: #d14;
+$white-sd: #d14;
+$white-s2: #d14;
+$white-se: #d14;
+$white-sh: #d14;
+$white-si: #d14;
+$white-sx: #d14;
+$white-sr: #009926;
+$white-s1: #d14;
+$white-ss: #990073;
+$white-bp: #999;
+$white-vc: teal;
+$white-vg: teal;
+$white-vi: teal;
+$white-il: #099;
+$white-gc-color: #999;
+$white-gc-bg: #eaf2f5;
+
+
 @mixin matchLine {
   color: $black-transparent;
   background-color: $match-line;
@@ -26,8 +93,8 @@
   &,
   pre.code,
   .line_holder .line_content {
-    background-color: #fff;
-    color: #333;
+    background-color: $white-light;
+    color: $white-code-color;
   }
 
   // Diff line
@@ -83,75 +150,75 @@
 
   // highlight line via anchor
   pre .hll {
-    background-color: #f8eec7 !important;
+    background-color: $white-pre-hll-bg !important;
   }
 
   // Search result highlight
   span.highlight_word {
-    background-color: #fafe3d !important;
+    background-color: $white-highlight !important;
   }
 
-  .hll { background-color: #f8f8f8; }
-  .c { color: #998; font-style: italic; }
-  .err { color: #a61717; background-color: #e3d2d2; }
+  .hll { background-color: $white-hll-bg; }
+  .c { color: $white-c; font-style: italic; }
+  .err { color: $white-err; background-color: $white-err-bg; }
   .k { font-weight: bold; }
   .o { font-weight: bold; }
-  .cm { color: #998; font-style: italic; }
-  .cp { color: #999; font-weight: bold; }
-  .c1 { color: #998; font-style: italic; }
-  .cs { color: #999; font-weight: bold; font-style: italic; }
-  .gd { color: #000; background-color: #fdd; }
-  .gd .x { color: #000; background-color: #faa; }
+  .cm { color: $white-cm; font-style: italic; }
+  .cp { color: $white-cp; font-weight: bold; }
+  .c1 { color: $white-c1; font-style: italic; }
+  .cs { color: $white-cs; font-weight: bold; font-style: italic; }
+  .gd { color: $white-gd; background-color: $white-gd-bg; }
+  .gd .x { color: $white-gd-x; background-color: $white-gd-x-bg; }
   .ge { font-style: italic; }
-  .gr { color: #a00; }
-  .gh { color: #999; }
-  .gi { color: #000; background-color: #dfd; }
-  .gi .x { color: #000; background-color: #afa; }
-  .go { color: #888; }
-  .gp { color: #555; }
+  .gr { color: $white-gr; }
+  .gh { color: $white-gh; }
+  .gi { color: $white-gi; background-color: $white-gi-bg; }
+  .gi .x { color: $white-gi-x; background-color: $white-gi-x-bg; }
+  .go { color: $white-go; }
+  .gp { color: $white-gp; }
   .gs { font-weight: bold; }
-  .gu { color: #800080; font-weight: bold; }
-  .gt { color: #a00; }
+  .gu { color: $white-gu; font-weight: bold; }
+  .gt { color: $white-gt; }
   .kc { font-weight: bold; }
   .kd { font-weight: bold; }
   .kn { font-weight: bold; }
   .kp { font-weight: bold; }
   .kr { font-weight: bold; }
-  .kt { color: #458; font-weight: bold; }
-  .m { color: #099; }
-  .s { color: #d14; }
-  .n { color: #333; }
-  .na { color: teal; }
-  .nb { color: #0086b3; }
-  .nc { color: #458; font-weight: bold; }
-  .no { color: teal; }
-  .ni { color: purple; }
-  .ne { color: #900; font-weight: bold; }
-  .nf { color: #900; font-weight: bold; }
-  .nn { color: #555; }
-  .nt { color: navy; }
-  .nv { color: teal; }
+  .kt { color: $white-kt; font-weight: bold; }
+  .m { color: $white-m; }
+  .s { color: $white-s; }
+  .n { color: $white-n; }
+  .na { color: $white-na; }
+  .nb { color: $white-nb; }
+  .nc { color: $white-nc; font-weight: bold; }
+  .no { color: $white-no; }
+  .ni { color: $white-ni; }
+  .ne { color: $white-ne; font-weight: bold; }
+  .nf { color: $white-nf; font-weight: bold; }
+  .nn { color: $white-nn; }
+  .nt { color: $white-nt; }
+  .nv { color: $white-nv; }
   .ow { font-weight: bold; }
-  .w { color: #bbb; }
-  .mf { color: #099; }
-  .mh { color: #099; }
-  .mi { color: #099; }
-  .mo { color: #099; }
-  .sb { color: #d14; }
-  .sc { color: #d14; }
-  .sd { color: #d14; }
-  .s2 { color: #d14; }
-  .se { color: #d14; }
-  .sh { color: #d14; }
-  .si { color: #d14; }
-  .sx { color: #d14; }
-  .sr { color: #009926; }
-  .s1 { color: #d14; }
-  .ss { color: #990073; }
-  .bp { color: #999; }
-  .vc { color: teal; }
-  .vg { color: teal; }
-  .vi { color: teal; }
-  .il { color: #099; }
-  .gc { color: #999; background-color: #eaf2f5; }
+  .w { color: $white-w; }
+  .mf { color: $white-mf; }
+  .mh { color: $white-mh; }
+  .mi { color: $white-mi; }
+  .mo { color: $white-mo; }
+  .sb { color: $white-sb; }
+  .sc { color: $white-sc; }
+  .sd { color: $white-sd; }
+  .s2 { color: $white-s2; }
+  .se { color: $white-se; }
+  .sh { color: $white-sh; }
+  .si { color: $white-si; }
+  .sx { color: $white-sx; }
+  .sr { color: $white-sr; }
+  .s1 { color: $white-s1; }
+  .ss { color: $white-ss; }
+  .bp { color: $white-bp; }
+  .vc { color: $white-vc; }
+  .vg { color: $white-vg; }
+  .vi { color: $white-vi; }
+  .il { color: $white-il; }
+  .gc { color: $white-gc-color; background-color: $white-gc-bg; }
 }

app/assets/stylesheets/mailers/devise.scss

+@import "framework/variables";
+
 // NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout
 // used for Devise email templates, and _should not_ be included in any
 // application stylesheets.
@@ -46,7 +48,7 @@ table {
 
   &#body {
     background-color: $message-background-color;
-    border: 1px solid #000;
+    border: 1px solid $black;
     border-radius: 4px;
     margin: 0 auto;
     width: 600px;

app/assets/stylesheets/mailers/highlighted_diff_email.scss

@@ -10,8 +10,72 @@
 // preference): plain class selectors, type (element name) selectors, or
 // explicit child selectors.
 
+/*
+* Highlighted Diff Email Syntax Colors
+*/
+$highlighted-highlight-word: #fafe3d;
+$highlighted-hll-bg: #f8f8f8;
+$highlighted-c: #998;
+$highlighted-err: #a61717;
+$highlighted-err-bg: #e3d2d2;
+$highlighted-cm: #998;
+$highlighted-cp: #999;
+$highlighted-c1: #998;
+$highlighted-cs: #999;
+$highlighted-gd: #000;
+$highlighted-gd-bg: #fdd;
+$highlighted-gd-x: #000;
+$highlighted-gd-x-bg: #faa;
+$highlighted-gr: #a00;
+$highlighted-gh: #999;
+$highlighted-gi: #000;
+$highlighted-gi-bg: #dfd;
+$highlighted-gi-x: #000;
+$highlighted-gi-x-bg: #afa;
+$highlighted-go: #888;
+$highlighted-gp: #555;
+$highlighted-gu: #800080;
+$highlighted-gt: #a00;
+$highlighted-kt: #458;
+$highlighted-m: #099;
+$highlighted-s: #d14;
+$highlighted-n: #333;
+$highlighted-na: teal;
+$highlighted-nb: #0086b3;
+$highlighted-nc: #458;
+$highlighted-no: teal;
+$highlighted-ni: purple;
+$highlighted-ne: #900;
+$highlighted-nf: #900;
+$highlighted-nn: #555;
+$highlighted-nt: navy;
+$highlighted-nv: teal;
+$highlighted-w: #bbb;
+$highlighted-mf: #099;
+$highlighted-mh: #099;
+$highlighted-mi: #099;
+$highlighted-mo: #099;
+$highlighted-sb: #d14;
+$highlighted-sc: #d14;
+$highlighted-sd: #d14;
+$highlighted-s2: #d14;
+$highlighted-se: #d14;
+$highlighted-sh: #d14;
+$highlighted-si: #d14;
+$highlighted-sx: #d14;
+$highlighted-sr: #009926;
+$highlighted-s1: #d14;
+$highlighted-ss: #990073;
+$highlighted-bp: #999;
+$highlighted-vc: teal;
+$highlighted-vg: teal;
+$highlighted-vi: teal;
+$highlighted-il: #099;
+$highlighted-gc: #999;
+$highlighted-gc-bg: #eaf2f5;
+
 .code {
-  background-color: #fff;
+  background-color: $white-light;
   font-family: monospace;
   font-size: $code_font_size;
   -premailer-cellpadding: 0;
@@ -75,69 +139,69 @@ pre {
 }
 
 span.highlight_word {
-  background-color: #fafe3d !important;
+  background-color: $highlighted-highlight-word !important;
 }
 
-.hll { background-color: #f8f8f8; }
-.c { color: #998; font-style: italic; }
-.err { color: #a61717; background-color: #e3d2d2; }
+.hll { background-color: $highlighted-hll-bg; }
+.c { color: $highlighted-c; font-style: italic; }
+.err { color: $highlighted-err; background-color: $highlighted-err-bg; }
 .k { font-weight: bold; }
 .o { font-weight: bold; }
-.cm { color: #998; font-style: italic; }
-.cp { color: #999; font-weight: bold; }
-.c1 { color: #998; font-style: italic; }
-.cs { color: #999; font-weight: bold; font-style: italic; }
-.gd { color: #000; background-color: #fdd; }
-.gd .x { color: #000; background-color: #faa; }
+.cm { color: $highlighted-cm; font-style: italic; }
+.cp { color: $highlighted-cp; font-weight: bold; }
+.c1 { color: $highlighted-c1; font-style: italic; }
+.cs { color: $highlighted-cs; font-weight: bold; font-style: italic; }
+.gd { color: $highlighted-gd; background-color: $highlighted-gd-bg; }
+.gd .x { color: $highlighted-gd; background-color: $highlighted-gd-x-bg; }
 .ge { font-style: italic; }
-.gr { color: #a00; }
-.gh { color: #999; }
-.gi { color: #000; background-color: #dfd; }
-.gi .x { color: #000; background-color: #afa; }
-.go { color: #888; }
-.gp { color: #555; }
+.gr { color: $highlighted-gr; }
+.gh { color: $highlighted-gh; }
+.gi { color: $highlighted-gi; background-color: $highlighted-gi-bg; }
+.gi .x { color: $highlighted-gi; background-color: $highlighted-gi-x-bg; }
+.go { color: $highlighted-go; }
+.gp { color: $highlighted-gp; }
 .gs { font-weight: bold; }
-.gu { color: #800080; font-weight: bold; }
-.gt { color: #a00; }
+.gu { color: $highlighted-gu; font-weight: bold; }
+.gt { color: $highlighted-gt; }
 .kc { font-weight: bold; }
 .kd { font-weight: bold; }
 .kn { font-weight: bold; }
 .kp { font-weight: bold; }
 .kr { font-weight: bold; }
-.kt { color: #458; font-weight: bold; }
-.m { color: #099; }
-.s { color: #d14; }
-.n { color: #333; }
-.na { color: teal; }
-.nb { color: #0086b3; }
-.nc { color: #458; font-weight: bold; }
-.no { color: teal; }
-.ni { color: purple; }
-.ne { color: #900; font-weight: bold; }
-.nf { color: #900; font-weight: bold; }
-.nn { color: #555; }
-.nt { color: navy; }
-.nv { color: teal; }
+.kt { color: $highlighted-kt; font-weight: bold; }
+.m { color: $highlighted-m; }
+.s { color: $highlighted-s; }
+.n { color: $highlighted-n; }
+.na { color: $highlighted-na; }
+.nb { color: $highlighted-nb; }
+.nc { color: $highlighted-nc; font-weight: bold; }
+.no { color: $highlighted-no; }
+.ni { color: $highlighted-ni; }
+.ne { color: $highlighted-ne; font-weight: bold; }
+.nf { color: $highlighted-nf; font-weight: bold; }
+.nn { color: $highlighted-nn; }
+.nt { color: $highlighted-nt; }
+.nv { color: $highlighted-nv; }
 .ow { font-weight: bold; }
-.w { color: #bbb; }
-.mf { color: #099; }
-.mh { color: #099; }
-.mi { color: #099; }
-.mo { color: #099; }
-.sb { color: #d14; }
-.sc { color: #d14; }
-.sd { color: #d14; }
-.s2 { color: #d14; }
-.se { color: #d14; }
-.sh { color: #d14; }
-.si { color: #d14; }
-.sx { color: #d14; }
-.sr { color: #009926; }
-.s1 { color: #d14; }
-.ss { color: #990073; }
-.bp { color: #999; }
-.vc { color: teal; }
-.vg { color: teal; }
-.vi { color: teal; }
-.il { color: #099; }
-.gc { color: #999; background-color: #eaf2f5; }
+.w { color: $highlighted-w; }
+.mf { color: $highlighted-mf; }
+.mh { color: $highlighted-mh; }
+.mi { color: $highlighted-mi; }
+.mo { color: $highlighted-mo; }
+.sb { color: $highlighted-sb; }
+.sc { color: $highlighted-sc; }
+.sd { color: $highlighted-sd; }
+.s2 { color: $highlighted-s2; }
+.se { color: $highlighted-se; }
+.sh { color: $highlighted-sh; }
+.si { color: $highlighted-si; }
+.sx { color: $highlighted-sx; }
+.sr { color: $highlighted-sr; }
+.s1 { color: $highlighted-s1; }
+.ss { color: $highlighted-ss; }
+.bp { color: $highlighted-bp; }
+.vc { color: $highlighted-vc; }
+.vg { color: $highlighted-vg; }
+.vi { color: $highlighted-vi; }
+.il { color: $highlighted-il; }
+.gc { color: $highlighted-gc; background-color: $highlighted-gc-bg; }

app/assets/stylesheets/notify.scss

+@import "framework/variables";
+
 img {
   max-width: 100%;
   height: auto;
@@ -5,12 +7,12 @@ img {
 
 p.details {
   font-style: italic;
-  color: #777;
+  color: $notify-details;
 }
 
 .footer > p {
   font-size: small;
-  color: #777;
+  color: $notify-footer;
 }
 
 pre.commit-message {
@@ -21,10 +23,10 @@ pre.commit-message {
   text-decoration: none;
 
   > .new-file {
-    color: #090;
+    color: $notify-new-file;
   }
 
   > .deleted-file {
-    color: #b00;
+    color: $notify-deleted-file;
   }
 }

app/assets/stylesheets/pages/admin.scss

@@ -31,7 +31,7 @@
 
   .form-actions {
     padding-left: 130px;
-    background: #fff;
+    background: $white-light;
    }
 
   .visibility-levels {

app/assets/stylesheets/pages/awards.scss

@@ -15,7 +15,7 @@
   background-color: $award-emoji-menu-bg;
   border: 1px solid $award-emoji-menu-border;
   border-radius: $border-radius-base;
-  box-shadow: 0 6px 12px rgba(0,0,0,.175);
+  box-shadow: 0 6px 12px $award-emoji-menu-shadow;
   pointer-events: none;
   opacity: 0;
   transform: scale(.2);

app/assets/stylesheets/pages/boards.scss

@@ -145,7 +145,7 @@
 .board-blank-state {
   height: calc(100% - 49px);
   padding: $gl-padding;
-  background-color: #fff;
+  background-color: $white-light;
 }
 
 .board-blank-state-list {
@@ -191,9 +191,9 @@
 .card {
   position: relative;
   padding: 10px $gl-padding;
-  background: #fff;
+  background: $white-light;
   border-radius: $border-radius-default;
-  box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
+  box-shadow: 0 1px 2px $issue-boards-card-shadow;
   list-style: none;
 
   &:not(:last-child) {
@@ -325,7 +325,6 @@
   }
 
   .issuable-header-text {
-    width: 100%;
     padding-right: 35px;
 
     > strong {

app/assets/stylesheets/pages/builds.scss

 .build-page {
   pre.trace {
-    background: #111;
-    color: #fff;
+    background: $builds-trace-bg;
+    color: $white-light;
     font-family: $monospace_font;
     white-space: pre-wrap;
     overflow: auto;

app/assets/stylesheets/pages/ci_projects.scss

 .ci-body {
   .project-title {
     margin: 0;
-    color: #444;
+    color: $common-gray-dark;
     font-size: 20px;
     line-height: 1.5;
   }

app/assets/stylesheets/pages/commit.scss

@@ -5,7 +5,7 @@
 .commit-author,
 .commit-committer {
   display: block;
-  color: #999;
+  color: $commit-committer-color;
   font-weight: normal;
   font-style: italic;
 }
@@ -113,17 +113,17 @@
   overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
   .max-width-marker {
     width: 72ch;
-    color: rgba(0, 0, 0, 0.0);
+    color: $commit-max-width-marker-color;
     font-family: inherit;
     left: $left;
     height: 100%;
-    border-right: 1px solid mix($input-border, white);
+    border-right: 1px solid mix($input-border, $white-light);
     position: absolute;
     z-index: 1;
   }
 
   > textarea {
-    background-color: rgba(0, 0, 0, 0.0);
+    background-color: $commit-message-text-area-bg;
     font-family: inherit;
     padding-left: $left;
     position: relative;

app/assets/stylesheets/pages/commits.scss

@@ -8,8 +8,8 @@
 .commit-header {
   padding: 5px 10px;
   background-color: $background-color;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
+  border-top: 1px solid $gray-darker;
+  border-bottom: 1px solid $gray-darker;
   font-size: 14px;
 
   &:first-child {
@@ -94,7 +94,7 @@
   }
 
   &:not(:last-child) {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $gray-darker;
   }
 
   a,
@@ -201,7 +201,7 @@
     .bar {
       position: absolute;
       height: 4px;
-      background-color: #ccc;
+      background-color: $divergence-graph-bar-bg;
     }
 
     .bar-behind {
@@ -218,7 +218,7 @@
       padding-top: 6px;
       padding-bottom: 0;
       font-size: 12px;
-      color: #333;
+      color: $gl-title-color;
       display: block;
     }
 
@@ -239,6 +239,6 @@
     height: 18px;
     margin: 5px 0 0;
     float: left;
-    background-color: #ccc;
+    background-color: $divergence-graph-separator-bg;
   }
 }

app/assets/stylesheets/pages/confirmation.scss

 .well-confirmation {
   margin-bottom: 20px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid $gray-darker;
 
   > h1,
   h2,

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -53,7 +53,7 @@
       border-bottom: none;
       position: relative;
 
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 6px 0 24px;
       }
     }
@@ -61,7 +61,7 @@
     .column {
       text-align: center;
 
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 15px 0;
       }
 
@@ -78,7 +78,7 @@
       }
 
       &:last-child {
-        @media (max-width: $screen-sm-min) {
+        @media (max-width: $screen-xs-max) {
           text-align: center;
         }
       }
@@ -141,9 +141,9 @@
 
     .dismiss-icon {
       position: absolute;
-      right: $cycle-analytics-box-padding;
+      right: $cycle-analytics-dismiss-icon-color;
       cursor: pointer;
-      color: #b2b2b2;
+      color: $cycle-analytics-dismiss-icon-color;
     }
 
     .svg-container {
@@ -156,7 +156,7 @@
     }
 
     .inner-content {
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 0 28px;
         text-align: center;
       }

app/assets/stylesheets/pages/dashboard.scss

@@ -32,7 +32,7 @@
   margin-bottom: 15px;
 
   i {
-    color: #888;
+    color: $dashboard-project-access-icon-color;
   }
 }
 

app/assets/stylesheets/pages/detail_page.scss

 .detail-page-header {
   padding: $gl-padding-top 0;
   border-bottom: 1px solid $border-color;
-  color: #5c5d5e;
+  color: $gl-text-color-dark;
   font-size: 16px;
   line-height: 34px;
 
   .author {
-    color: #5c5d5e;
+    color: $gl-text-color-dark;
   }
 
   .identifier {
-    color: #5c5d5e;
+    color: $gl-text-color-dark;
   }
 
   .issue_created_ago,

app/assets/stylesheets/pages/diff.scss

@@ -14,7 +14,7 @@
     background: $background-color;
     border-bottom: 1px solid $border-color;
     padding: 10px 16px;
-    color: #555;
+    color: $gl-diff-text-color;
     z-index: 10;
     border-radius: 3px 3px 0 0;
 
@@ -24,7 +24,7 @@
       display: block;
 
       .file-mode {
-        color: #777;
+        color: $file-mode-changed;
       }
     }
 
@@ -49,8 +49,8 @@
   .diff-content {
     overflow: auto;
     overflow-y: hidden;
-    background: #fff;
-    color: #333;
+    background: $white-light;
+    color: $gl-title-color;
     border-radius: 0 0 3px 3px;
 
     .unfold {
@@ -59,7 +59,7 @@
 
     .file-mode-changed {
       padding: 10px;
-      color: #777;
+      color: $file-mode-changed;
     }
 
     .suppressed-container {
@@ -172,7 +172,7 @@
   }
 
   .image {
-    background: #ddd;
+    background: $diff-image-bg;
     text-align: center;
     padding: 30px;
 
@@ -182,13 +182,13 @@
 
     .frame {
       display: inline-block;
-      background-color: #fff;
+      background-color: $white-light;
       line-height: 0;
 
       img {
-        border: 1px solid #fff;
-        background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%),
-        linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%);
+        border: 1px solid $white-light;
+        background-image: linear-gradient(45deg, $diff-image-img-bg 25%, transparent 25%, transparent 75%, $diff-image-img-bg 75%, $diff-image-img-bg 100%),
+        linear-gradient(45deg, $diff-image-img-bg 25%, transparent 25%, transparent 75%, $diff-image-img-bg 75%, $diff-image-img-bg 100%);
         background-size: 10px 10px;
         background-position: 0 0, 5px 5px;
         max-width: 100%;
@@ -206,7 +206,7 @@
     .image-info {
       font-size: 12px;
       margin: 5px 0 0;
-      color: grey;
+      color: $diff-image-info-color;
     }
 
     .view.swipe {
@@ -220,7 +220,7 @@
 
       .swipe-wrap {
         overflow: hidden;
-        border-left: 1px solid #999;
+        border-left: 1px solid $diff-swipe-border;
         position: absolute;
         display: block;
         top: 13px;
@@ -350,7 +350,7 @@
   .view-modes {
     padding: 10px;
     text-align: center;
-    background: #eee;
+    background: $gray-darker;
 
     ul,
     li {
@@ -361,8 +361,8 @@
     }
 
     li {
-      color: grey;
-      border-left: 1px solid #c1c1c1;
+      color: $diff-view-modes-color;
+      border-left: 1px solid $diff-view-modes-border;
       padding: 0 12px 0 16px;
       cursor: pointer;
 
@@ -380,7 +380,7 @@
         }
 
         cursor: default;
-        color: #333;
+        color: $gl-title-color;
       }
 
       &.disabled {

app/assets/stylesheets/pages/editor.scss

@@ -14,10 +14,10 @@
   }
 
   .cancel-btn {
-    color: #b94a48;
+    color: $editor-cancel-color;
 
     &:hover {
-      color: #b94a48;
+      color: $editor-cancel-color;
     }
   }
 

app/assets/stylesheets/pages/environments.scss

@@ -8,7 +8,7 @@
   font-size: 34px;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: $screen-xs-max) {
   .environments-container {
     width: 100%;
     overflow: auto;

app/assets/stylesheets/pages/events.scss

@@ -62,7 +62,7 @@
         border: none;
         background: $gray-light;
         border-radius: 0;
-        color: #777;
+        color: $events-pre-color;
         margin: 0 20px;
         overflow: hidden;
       }
@@ -80,7 +80,7 @@
     }
 
     .event-note-icon {
-      color: #777;
+      color: $events-pre-color;
       float: left;
       font-size: $gl-font-size;
       line-height: 16px;
@@ -91,7 +91,7 @@
   .event_icon {
     position: relative;
     float: right;
-    border: 1px solid #eee;
+    border: 1px solid $gray-darker;
     padding: 5px;
     border-radius: 5px;
     background: $gray-light;
@@ -170,7 +170,7 @@
 
     .event-body {
       margin: 0;
-      border-left: 2px solid #ddd;
+      border-left: 2px solid $events-body-border;
       padding-left: 10px;
     }
 
@@ -186,4 +186,3 @@
     display: none;
   }
 }
-

app/assets/stylesheets/pages/graph.scss

@@ -2,15 +2,15 @@
   border: 1px solid $border-color;
 
   .controls {
-    color: #888;
+    color: $project-network-controls-color;
     font-size: 14px;
     padding: 5px;
     border-bottom: 1px solid $border-color;
-    background: #eee;
+    background: $gray-darker;
   }
 
   .network-graph {
-    background: #fff;
+    background: $white-light;
     height: 500px;
     overflow-y: scroll;
     overflow-x: hidden;
@@ -20,15 +20,14 @@
 .graphs {
   .graph-author-email {
     float: right;
-    color: #777;
+    color: $graph-author-email-color;
   }
 
   .graph-additions {
-    color: #4a2;
+    color: $gl-text-green;
   }
 
   .graph-deletions {
-    color: #d12f19;
+    color: $gl-text-red;
   }
 }
-

app/assets/stylesheets/pages/groups.scss

@@ -49,14 +49,14 @@
   padding: 50px 100px;
   overflow: hidden;
 
-  @media (max-width: $screen-md-min) {
+  @media (max-width: $screen-sm-max) {
     padding: 50px 0;
   }
 
   svg {
     float: right;
 
-    @media (max-width: $screen-md-min) {
+    @media (max-width: $screen-sm-max) {
       float: none;
       display: block;
       width: 250px;
@@ -71,7 +71,7 @@
     width: 460px;
     margin-top: 120px;
 
-    @media (max-width: $screen-md-min) {
+    @media (max-width: $screen-sm-max) {
       float: none;
       margin-top: 60px;
       width: auto;

app/assets/stylesheets/pages/help.scss

@@ -9,7 +9,7 @@
 
   li {
     line-height: 24px;
-    color: #888;
+    color: $document-index-color;
 
     a {
       margin-right: 3px;
@@ -20,7 +20,7 @@
 
 .shortcut-mappings {
   font-size: 12px;
-  color: #555;
+  color: $help-shortcut-mapping-color;
 
   tbody:first-child tr:first-child {
     padding-top: 0;
@@ -29,7 +29,7 @@
   th {
     padding-top: 15px;
     line-height: 1.5;
-    color: #333;
+    color: $help-shortcut-header-color;
     text-align: left;
   }
 
@@ -42,7 +42,7 @@
 
   .shortcut {
     padding-right: 10px;
-    color: #999;
+    color: $help-shortcut-color;
     text-align: right;
     white-space: nowrap;
   }

app/assets/stylesheets/pages/issuable.scss

@@ -233,7 +233,7 @@
       width: 100%;
       text-align: center;
       padding-bottom: 10px;
-      color: #999;
+      color: $issuable-sidebar-color;
 
       &:hover {
         color: $gl-gray;
@@ -249,12 +249,12 @@
       }
 
       .avatar:hover {
-        border-color: #999;
+        border-color: $issuable-avatar-hover-border;
       }
 
       .btn-clipboard {
         border: none;
-        color: #999;
+        color: $issuable-clipboard-color;
 
         &:hover {
           background: transparent;

app/assets/stylesheets/pages/issues.scss

@@ -82,18 +82,18 @@ ul.related-merge-requests > li {
 .merge-request,
 .issue {
   &.today {
-    background: #f3fff2;
-    border-color: #e1e8d5;
+    background: $issues-today-bg;
+    border-color: $issues-today-border;
   }
 
   &.closed {
     background: $gray-light;
-    border-color: #e5e5e5;
+    border-color: $issues-border;
   }
 
   &.merged {
     background: $gray-light;
-    border-color: #e5e5e5;
+    border-color: $issues-border;
   }
 }
 

app/assets/stylesheets/pages/labels.scss

@@ -198,7 +198,7 @@
   }
 
   .label-remove {
-    border-left: 1px solid rgba(0, 0, 0, .1);
+    border-left: 1px solid $label-remove-border;
     z-index: 3;
   }
 

app/assets/stylesheets/pages/lint.scss

 .ci-body {
   .incorrect-syntax {
     font-size: 19px;
-    color: red;
+    color: $lint-incorrect-color;
   }
 
   .correct-syntax {
     font-size: 19px;
-    color: #47a447;
+    color: $lint-correct-color;
   }
 }

app/assets/stylesheets/pages/login.scss

@@ -18,7 +18,7 @@
 
     p {
       font-size: 18px;
-      color: #888;
+      color: $login-brand-holder-color;
     }
 
     h1:first-child {
@@ -174,7 +174,7 @@
   .form-control {
     &:active,
     &:focus {
-      background-color: #fff;
+      background-color: $white-light;
     }
   }
 
@@ -195,7 +195,7 @@
     h2 {
       margin-top: 0;
       font-size: 14px;
-      color: #a00;
+      color: $login-devise-error-color;
     }
   }
 }
@@ -254,4 +254,3 @@
     }
   }
 }
-

app/assets/stylesheets/pages/merge_conflicts.scss

+// Disabled to use the color map for creating color schemes
+// scss-lint:disable ColorVariable
 $colors: (
   white_header_head_neutral   : #e1fad7,
   white_line_head_neutral     : #effdec,
@@ -98,6 +100,7 @@ $colors: (
   solarized_dark_header_not_chosen     : rgba(#839496, .25),
   solarized_dark_line_not_chosen       : rgba(#839496, .15)
 );
+// scss-lint:enable ColorVariable
 
 
 @mixin color-scheme($color) {
@@ -228,14 +231,15 @@ $colors: (
       position: absolute;
       right: 10px;
       padding: 0;
-      color: #fff;
+      outline: none;
+      color: $white-light;
       width: 75px; // static width to make 2 buttons have same width
       height: 19px;
     }
   }
 
   .btn-success .fa-spinner {
-    color: #fff;
+    color: $white-light;
   }
 
   .editor-wrap {

app/assets/stylesheets/pages/merge_requests.scss

@@ -86,7 +86,7 @@
   }
 
   .normal {
-    color: #5c5d5e;
+    color: $gl-text-color-dark;
   }
 
   .js-deployment-link {
@@ -143,7 +143,7 @@
   }
 
   .mr-widget-footer {
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gray-darker;
   }
 
   .ci-coverage {

app/assets/stylesheets/pages/milestone.scss

@@ -123,7 +123,7 @@
   padding: 20px 0;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: $screen-xs-max) {
   .milestone-actions {
     @include clearfix();
     padding-top: $gl-vert-padding;

app/assets/stylesheets/pages/note_form.scss

@@ -111,7 +111,7 @@
   text-align: center;
   font-size: 13px;
 
-  @media (max-width: $screen-md-min) {
+  @media (max-width: $screen-sm-max) {
     // On smaller devices the warning becomes the fourth item in the list,
     // rather than centering, and grows to span the full width of the
     // comment area.
@@ -132,7 +132,7 @@
   font-size: 15px;
 
   .md-area {
-    background-color: #fff;
+    background-color: $white-light;
   }
 }
 

app/assets/stylesheets/pages/notes.scss

@@ -3,9 +3,9 @@
  */
 
 @-webkit-keyframes targe3-note {
-  from { background: #fffff0; }
-  50% { background: #ffffd3; }
-  to { background: #fffff0; }
+  from { background: $note-targe3-outside; }
+  50% { background: $note-targe3-inside; }
+  to { background: $note-targe3-outside; }
 }
 
 ul.notes {
@@ -253,7 +253,7 @@ ul.notes {
 }
 
 .page-sidebar-pinned.right-sidebar-expanded {
-  @media (max-width: $screen-lg-min) {
+  @media (max-width: $screen-md-max) {
     .note-header {
       .note-headline-light {
         display: block;
@@ -305,7 +305,7 @@ ul.notes {
     &.notes_line2 {
       text-align: center;
       padding: 10px 0;
-      border-left: 1px solid #ddd !important;
+      border-left: 1px solid $note-line2-border !important;
     }
 
     &.notes_content {
@@ -471,7 +471,7 @@ ul.notes {
   .add-diff-note {
     margin-top: -4px;
     border-radius: 40px;
-    background: #fff;
+    background: $white-light;
     padding: 4px;
     font-size: 16px;
     color: $gl-link-color;
@@ -484,7 +484,7 @@ ul.notes {
 
     &:hover {
       background: $gl-info;
-      color: #fff;
+      color: $white-light;
       @include show-add-diff-note;
     }
   }

app/assets/stylesheets/pages/profile.scss

@@ -180,7 +180,7 @@
   .modal-dialog {
     width: 380px;
 
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: auto;
     }
 

app/assets/stylesheets/pages/projects.scss

@@ -8,7 +8,7 @@
 
 .no-ssh-key-message,
 .project-limit-message {
-  background-color: #f28d35;
+  background-color: $project-limit-message-bg;
   margin-bottom: 0;
 }
 
@@ -76,7 +76,7 @@
     &.static-namespace {
       height: 35px;
       border-radius: 3px;
-      border: 1px solid #e5e5e5;
+      border: 1px solid $border-color;
     }
 
     &+ .select2 a {
@@ -189,7 +189,7 @@
   }
 
   .download-button {
-    @media (max-width: $screen-lg-min) {
+    @media (max-width: $screen-md-max) {
       margin-left: 0;
     }
   }
@@ -225,7 +225,7 @@
         left: 0;
         margin-top: -6px;
         border-width: 7px 5px 7px 0;
-        border-right-color: #dce0e5;
+        border-right-color: $count-arrow-border;
         pointer-events: none;
       }
 
@@ -240,7 +240,7 @@
         left: 1px;
         margin-top: -9px;
         border-width: 10px 7px 10px 0;
-        border-right-color: #fff;
+        border-right-color: $white-light;
         pointer-events: none;
       }
     }
@@ -248,7 +248,7 @@
     .count {
       @include btn-gray;
       display: inline-block;
-      background: white;
+      background: $white-light;
       border-radius: 2px;
       border-width: 1px;
       border-style: solid;
@@ -270,7 +270,7 @@
       }
 
       &:hover {
-        background: #fff;
+        background: $white-light;
       }
     }
   }
@@ -302,7 +302,7 @@
 
     .option-descr {
       margin-left: 29px;
-      color: #54565b;
+      color: $project-option-descr-color;
     }
   }
 }
@@ -310,7 +310,7 @@
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
-  color: #555;
+  color: $save-project-loader-color;
 }
 
 .transfer-project .select2-container {
@@ -373,7 +373,7 @@ a.deploy-project-label {
 
   > li + li::before {
     padding: 0 3px;
-    color: #999;
+    color: $project-breadcrumb-color;
   }
 
   a {
@@ -549,20 +549,20 @@ a.deploy-project-label {
 }
 
 pre.light-well {
-  border-color: #f1f1f1;
+  border-color: $well-light-border;
 }
 
 .git-empty {
   margin: 0 7px 7px;
 
   h5 {
-    color: #5c5d5e;
+    color: $gl-text-color-dark;
   }
 
   .light-well {
     border-radius: 2px;
 
-    color: #5b6169;
+    color: $well-light-text-color;
     font-size: 13px;
     line-height: 1.6em;
   }
@@ -716,7 +716,7 @@ pre.light-well {
 
   .form-control {
     @extend .monospace;
-    background: #fff;
+    background: $white-light;
     font-size: 14px;
     margin-left: -1px;
     cursor: auto;
@@ -726,17 +726,17 @@ pre.light-well {
 
 .cannot-be-merged,
 .cannot-be-merged:hover {
-  color: #e62958;
+  color: $error-exclamation-point;
   margin-top: 2px;
 }
 
 .private-forks-notice .private-fork-icon {
   i:nth-child(1) {
-    color: #2aa056;
+    color: $project-private-forks-notice-odd;
   }
 
   i:nth-child(2) {
-    color: #fff;
+    color: $white-light;
   }
 }
 

app/assets/stylesheets/pages/runners.scss

 .runner-state {
   padding: 6px 12px;
   margin-right: 10px;
-  color: #fff;
+  color: $white-light;
 
   &.runner-state-shared {
-    background: #32b186;
+    background: $runner-state-shared-bg;
   }
 
   &.runner-state-specific {
-    background: #3498db;
+    background: $runner-state-specific-bg;
   }
 }
 
 .runner-status-online {
-  color: green;
+  color: $runner-status-online-color;
 }
 
 .runner-status-offline {
-  color: gray;
+  color: $runner-status-offline-color;
 }
 
 .runner-status-paused {
-  color: red;
+  color: $runner-status-paused-color;
 }
 
 .runner {

app/assets/stylesheets/pages/stat_graph.scss

 .tint-box {
-  background: #f3f3f3;
+  background: $stat-graph-common-bg;
   position: relative;
   margin-bottom: 10px;
 }
 
 .area {
-  fill: #1db34f;
+  fill: $stat-graph-area-fill;
   fill-opacity: 0.5;
 }
 
 .axis {
-  fill: #aaa;
+  fill: $stat-graph-axis-fill;
   font-size: 10px;
 }
 
@@ -37,26 +37,26 @@
     @include make-md-column(6);
     margin-top: 10px;
 
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: 100%;
     }
   }
 
   .person .spark {
     display: block;
-    background: #f3f3f3;
+    background: $stat-graph-common-bg;
     width: 100%;
   }
 
   .person .area-contributor {
-    fill: #f17f49;
+    fill: $stat-graph-orange-fill;
   }
 }
 
 .selection rect {
-  fill: #333;
+  fill: $stat-graph-selection-fill;
   fill-opacity: 0.1;
-  stroke: #333;
+  stroke: $stat-graph-selection-stroke;
   stroke-width: 1px;
   stroke-opacity: 0.4;
   shape-rendering: crispedges;

app/assets/stylesheets/pages/status.scss

@@ -2,7 +2,7 @@
   .ci-status {
     padding: 2px 7px;
     margin-right: 10px;
-    border: 1px solid #eee;
+    border: 1px solid $gray-darker;
     white-space: nowrap;
     border-radius: 4px;
 

app/assets/stylesheets/pages/todos.scss

@@ -11,7 +11,7 @@
       background: $todo-alert-blue;
       margin-left: -17px;
       font-size: 11px;
-      color: white;
+      color: $white-light;
       padding: 3px;
       padding-top: 1px;
       padding-bottom: 1px;
@@ -81,7 +81,7 @@
       word-wrap: break-word;
 
       .md {
-        color: #7f8fa4;
+        color: $gl-grayish-blue;
         font-size: $gl-font-size;
 
         .label {
@@ -90,7 +90,7 @@
         }
 
         p {
-          color: #5c5d5e;
+          color: $gl-text-color-dark;
         }
       }
 
@@ -102,7 +102,7 @@
         border: none;
         background: $gray-light;
         border-radius: 0;
-        color: #777;
+        color: $todo-body-pre-color;
         margin: 0 20px;
         overflow: hidden;
       }
@@ -146,7 +146,7 @@
 
     .todo-body {
       margin: 0;
-      border-left: 2px solid #ddd;
+      border-left: 2px solid $todo-body-border;
       padding-left: 10px;
     }
   }

app/assets/stylesheets/pages/tree.scss

@@ -31,7 +31,7 @@
       .last-commit {
         @include str-truncated(506px);
 
-        @media (min-width: $screen-sm-max) and (max-width: $screen-md-max) {
+        @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
           @include str-truncated(450px);
         }
 

app/assets/stylesheets/pages/ui_dev_kit.scss

@@ -7,11 +7,11 @@
   .example {
     &::before {
       content: "Example";
-      color: #bbb;
+      color: $ui-dev-kit-example-color;
     }
 
     padding: 15px;
-    border: 1px dashed #ddd;
+    border: 1px dashed $ui-dev-kit-example-border;
     margin-bottom: 15px;
   }
 }

app/assets/stylesheets/pages/wiki.scss

@@ -4,3 +4,128 @@
   margin-right: auto;
   padding-right: 7px;
 }
+
+.wiki-page-header {
+  @extend .top-area;
+  position: relative;
+
+  .wiki-page-title {
+    margin: 0;
+    font-size: 22px;
+  }
+
+  .wiki-last-edit-by {
+    color: $gl-gray-light;
+
+    strong {
+      color: $gl-text-color;
+    }
+  }
+
+  .light {
+    font-weight: normal;
+    color: $gl-gray-light;
+  }
+
+  .git-access-header {
+    padding: 16px 40px 11px 0;
+    line-height: 28px;
+    font-size: 18px;
+  }
+
+  .git-clone-holder {
+    width: 100%;
+    padding-bottom: 40px;
+  }
+
+  button.sidebar-toggle {
+    position: absolute;
+    right: 0;
+    top: 11px;
+    display: block;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    &.has-sidebar-toggle {
+      padding-right: 40px;
+    }
+
+    .git-clone-holder {
+      width: 480px;
+    }
+
+    .nav-controls {
+      width: auto;
+      min-width: 50%;
+      white-space: nowrap;
+    }
+  }
+
+  @media (min-width: $screen-md-min) {
+    &.has-sidebar-toggle {
+      padding-right: 0;
+    }
+
+    button.sidebar-toggle {
+      display: none;
+    }
+  }
+}
+
+.wiki-git-access {
+  margin: $gl-padding 0;
+
+  h3 {
+    font-size: 22px;
+    font-weight: normal;
+    margin-top: 1.4em;
+  }
+}
+
+.right-sidebar.wiki-sidebar {
+  padding: $gl-padding 0;
+
+  &.right-sidebar-collapsed {
+    display: none;
+  }
+
+  .blocks-container {
+    padding: 0 $gl-padding;
+  }
+
+  .block {
+    width: 100%;
+  }
+
+  a {
+    color: $layout-link-gray;
+
+    &:hover,
+    &.active {
+      color: $black;
+    }
+  }
+
+  .active > a {
+    color: $black;
+  }
+
+  ul.wiki-pages,
+  ul.wiki-pages li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul.wiki-pages li {
+    margin: 5px 0 10px;
+  }
+
+  .wiki-sidebar-header {
+    padding: 0 $gl-padding $gl-padding;
+
+    .gutter-toggle {
+      margin-top: 0;
+    }
+  }
+}

app/controllers/help_controller.rb

@@ -7,8 +7,10 @@ class HelpController < ApplicationController
     @help_index = File.read(Rails.root.join('doc', 'README.md'))
 
     # Prefix Markdown links with `help/` unless they are external links
-    # See http://rubular.com/r/MioSrVLK3S
-    @help_index.gsub!(%r{(\]\()(?!.+://)([^\)\(]+\))}, '\1/help/\2')
+    # See http://rubular.com/r/X3baHTbPO2
+    @help_index.gsub!(%r{(?<delim>\]\()(?!.+://)(?!/)(?<link>[^\)\(]+\))}) do
+      "#{$~[:delim]}#{Gitlab.config.gitlab.relative_url_root}/help/#{$~[:link]}"
+    end
   end
 
   def show

app/controllers/projects/merge_requests_controller.rb

@@ -492,7 +492,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   def validates_merge_request
     # Show git not found page
     # if there is no saved commits between source & target branch
-    if @merge_request.commits.blank?
+    if @merge_request.has_no_commits?
       # and if target branch doesn't exist
       return invalid_mr unless @merge_request.target_branch_exists?
     end
@@ -500,7 +500,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
   def define_show_vars
     @noteable = @merge_request
-    @commits_count = @merge_request.commits.count
+    @commits_count = @merge_request.commits_count
 
     if @merge_request.locked_long_ago?
       @merge_request.unlock_mr

app/controllers/projects/pipelines_controller.rb

 class Projects::PipelinesController < Projects::ApplicationController
   before_action :pipeline, except: [:index, :new, :create]
-  before_action :commit, only: [:show]
+  before_action :commit, only: [:show, :builds]
   before_action :authorize_read_pipeline!
   before_action :authorize_create_pipeline!, only: [:new, :create]
   before_action :authorize_update_pipeline!, only: [:retry, :cancel]
@@ -48,6 +48,14 @@ class Projects::PipelinesController < Projects::ApplicationController
   def show
   end
 
+  def builds
+    respond_to do |format|
+      format.html do
+        render 'show'
+      end
+    end
+  end
+
   def retry
     pipeline.retry_failed(current_user)
 

app/controllers/projects/wikis_controller.rb

@@ -115,6 +115,8 @@ class Projects::WikisController < Projects::ApplicationController
 
     # Call #wiki to make sure the Wiki Repo is initialized
     @project_wiki.wiki
+
+    @sidebar_wiki_pages = @project_wiki.pages.first(15)
   rescue ProjectWiki::CouldNotCreateWikiError
     flash[:notice] = "Could not create Wiki Repository at this time. Please try again later."
     redirect_to project_path(@project)

app/finders/issuable_finder.rb

@@ -49,6 +49,32 @@ class IssuableFinder
     execute.find_by(*params)
   end
 
+  # We often get counts for each state by running a query per state, and
+  # counting those results. This is typically slower than running one query
+  # (even if that query is slower than any of the individual state queries) and
+  # grouping and counting within that query.
+  #
+  def count_by_state
+    count_params = params.merge(state: nil, sort: nil)
+    labels_count = label_names.any? ? label_names.count : 1
+    finder = self.class.new(current_user, count_params)
+    counts = Hash.new(0)
+
+    # Searching by label includes a GROUP BY in the query, but ours will be last
+    # because it is added last. Searching by multiple labels also includes a row
+    # per issuable, so we have to count those in Ruby - which is bad, but still
+    # better than performing multiple queries.
+    #
+    finder.execute.reorder(nil).group(:state).count.each do |key, value|
+      counts[Array(key).last.to_sym] += value / labels_count
+    end
+
+    counts[:all] = counts.values.sum
+    counts[:opened] += counts[:reopened]
+
+    counts
+  end
+
   def group
     return @group if defined?(@group)
 

app/helpers/issuables_helper.rb

@@ -180,12 +180,9 @@ module IssuablesHelper
   end
 
   def issuables_count_for_state(issuable_type, state)
-    issuables_finder = public_send("#{issuable_type}_finder")
-
-    params = issuables_finder.params.merge(state: state)
-    finder = issuables_finder.class.new(issuables_finder.current_user, params)
-
-    finder.execute.page(1).total_count
+    @counts ||= {}
+    @counts[issuable_type] ||= public_send("#{issuable_type}_finder").count_by_state
+    @counts[issuable_type][state]
   end
 
   IRRELEVANT_PARAMS_FOR_CACHE_KEY = %i[utf8 sort page]
@@ -195,6 +192,7 @@ module IssuablesHelper
     opts = params.with_indifferent_access
     opts[:state] = state
     opts.except!(*IRRELEVANT_PARAMS_FOR_CACHE_KEY)
+    opts.delete_if { |_, value| value.blank? }
 
     hexdigest(['issuables_count', issuable_type, opts.sort].flatten.join('-'))
   end

app/helpers/nav_helper.rb

@@ -20,6 +20,11 @@ module NavHelper
       end
     elsif current_path?('builds#show')
       "page-gutter build-sidebar right-sidebar-expanded"
+    elsif current_path?('wikis#show') ||
+      current_path?('wikis#edit') ||
+      current_path?('wikis#history') ||
+      current_path?('wikis#git_access')
+      "page-gutter wiki-sidebar right-sidebar-expanded"
     end
   end