Remove jquery.scss; Combine multiple duplicate grays into global gray...

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

app/assets/stylesheets/framework.scss

@@ -27,7 +27,6 @@
 @import 'framework/header';
 @import 'framework/highlight';
 @import 'framework/issue_box';
-@import 'framework/jquery';
 @import 'framework/lists';
 @import 'framework/logo';
 @import 'framework/markdown_area';

app/assets/stylesheets/framework/avatar.scss

@@ -69,7 +69,7 @@
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: $identicon-fg-color;
+  color: $gl-gray-700;
   background-color: $gray-darker;
   // Sizes

app/assets/stylesheets/framework/buttons.scss

@@ -369,7 +369,7 @@
 }
 .clone-dropdown-btn a {
-  color: $dropdown-link-color;
+  color: $gl-gray-700;
   &:hover {
     text-decoration: none;

app/assets/stylesheets/framework/common.scss

@@ -43,7 +43,7 @@
   color: $brand-info;
 }
-.hint { font-style: italic; color: $hint-color; }
+.hint { font-style: italic; color: $gl-gray-400; }
 .light { color: $gl-text-color; }
 .slead {
@@ -70,13 +70,6 @@ pre {
     padding: 0;
   }
-  &.card.card-body-pre {
-    border: 1px solid $gray-darker;
-    background: $gray-light;
-    border-radius: 0;
-    color: $well-pre-color;
-  }
-
   &.wrap {
     word-break: break-word;
     white-space: pre-wrap;
@@ -121,49 +114,24 @@ hr {
   text-decoration: none;
 }
-.back-link {
-  font-size: 14px;
-}
-
 table {
   a code {
     position: relative;
     top: -2px;
     margin-right: 3px;
   }
-
-  td.permission-x {
-    background: $table-permission-x-bg !important;
-    text-align: center;
-  }
 }
 .loading {
   margin: 20px auto;
   height: 40px;
-  color: $loading-color;
+  color: $gl-gray-700;
   font-size: 32px;
   text-align: center;
 }
-span.update-author {
-  display: block;
-  color: $update-author-color;
-  font-weight: $gl-font-weight-normal;
-  font-style: italic;
-
-  strong {
-    font-weight: $gl-font-weight-bold;
-    font-style: normal;
-  }
-}
-
-.field_with_errors {
-  display: inline;
-}
-
 p.time {
-  color: $time-color;
+  color: $gl-gray-400;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }
@@ -197,40 +165,11 @@ li.note {
   background-color: inherit;
 }
-.project_member_show {
-  td:first-child {
-    color: $project-member-show-color;
-  }
-}
-
-.rss-icon {
-  img {
-    width: 24px;
-    vertical-align: top;
-  }
-
-  strong {
-    line-height: 24px;
-  }
-}
-
 .show-suppressed-diff,
 .show-all-commits {
   cursor: pointer;
 }
-.git_error_tips {
-  @extend .col-lg-6;
-  text-align: left;
-  margin-top: 40px;
-
-  pre {
-    background: $white-light;
-    border: 0;
-    font-size: 12px;
-  }
-}
-
 .error-message {
   padding: 10px;
   background: $red-400;
@@ -258,7 +197,7 @@ li.note {
 .gitlab-promo {
   a {
-    color: $gl-promo-color;
+    color: $gl-gray-350;
     margin-right: 30px;
   }
 }
@@ -271,19 +210,6 @@ li.note {
   }
 }
-.control-group {
-  .controls {
-    span {
-      &.descr {
-        position: relative;
-        top: 2px;
-        left: 5px;
-        color: $control-group-descr-color;
-      }
-    }
-  }
-}
-
 img.emoji {
   height: 20px;
   vertical-align: top;
@@ -302,12 +228,6 @@ img.emoji {
   margin-bottom: 10px;
 }
-.side-filters {
-  fieldset {
-    margin-bottom: 15px;
-  }
-}
-
 .footer-links {
   margin-bottom: 20px;
@@ -329,25 +249,6 @@ img.emoji {
   text-align: center;
 }
-.header-with-avatar {
-  h3 {
-    margin: 0;
-    font-weight: $gl-font-weight-bold;
-  }
-
-  .username {
-    font-size: 18px;
-    color: $username-color;
-    margin-top: 8px;
-  }
-
-  .description {
-    font-size: $gl-font-size;
-    color: $description-color;
-    margin-top: 8px;
-  }
-}
-
 .dropzone .dz-preview .dz-progress {
   border-color: $border-color !important;
@@ -386,16 +287,6 @@ img.emoji {
   }
 }
-.content-separator {
-  margin-left: -$gl-padding;
-  margin-right: -$gl-padding;
-  border-top: 1px solid $border-color;
-}
-
-.hide-bottom-border {
-  border-bottom: 0 !important;
-}
-
 .gl-accessibility {
   &:focus {
     display: flex;

app/assets/stylesheets/framework/dropdowns.scss

@@ -607,25 +607,25 @@
   width: 100%;
   min-height: 30px;
   padding: 0 7px;
-  color: $dropdown-input-color;
+  color: $gl-gray-700;
   line-height: 30px;
   border: 1px solid $dropdown-divider-color;
   border-radius: 2px;
   outline: 0;
   &:focus {
-    color: $dropdown-link-color;
+    color: $gl-gray-700;
     border-color: $blue-300;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
     ~ .fa {
-      color: $dropdown-link-color;
+      color: $gl-gray-700;
     }
   }
   &:hover {
     ~ .fa {
-      color: $dropdown-link-color;
+      color: $gl-gray-700;
     }
   }
 }
@@ -890,7 +890,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
       position: absolute;
       top: 13px;
       right: 25px;
-      color: $md-area-border;
+      color: $gray-100;
     }
   }
@@ -929,7 +929,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
   &:hover {
     .frequent-items-item-avatar-container .avatar {
-      border-color: $md-area-border;
+      border-color: $gray-100;
     }
   }

app/assets/stylesheets/framework/files.scss

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

app/assets/stylesheets/framework/jquery.scss

-.ui-widget {
-  font-family: $regular-font;
-  font-size: $font-size-base;
-
-  .ui-state-default {
-    border: 1px solid $white-light;
-    background: $white-light;
-    color: $jq-ui-default-color;
-  }
-
-  .ui-state-highlight {
-    border: 0;
-    background: transparent;
-  }
-}

app/assets/stylesheets/framework/markdown_area.scss

@@ -122,7 +122,7 @@
 .markdown-area {
   border-radius: 0;
   background: $white-light;
-  border: 1px solid $md-area-border;
+  border: 1px solid $gray-100;
   min-height: 140px;
   max-height: 500px;
   padding: 5px;

app/assets/stylesheets/framework/mixins.scss

@@ -20,7 +20,7 @@
   display: inline-block;
   overflow-x: auto;
   border: 0;
-  border-color: $md-area-border;
+  border-color: $gray-100;
   @supports (width: fit-content) {
     display: block;
@@ -29,11 +29,11 @@
   tr {
     th {
-      border-bottom: solid 2px $md-area-border;
+      border-bottom: solid 2px $gray-100;
     }
     td {
-      border-color: $md-area-border;
+      border-color: $gray-100;
     }
   }
 }

app/assets/stylesheets/framework/selects.scss

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

app/assets/stylesheets/framework/toggle.scss

@@ -31,7 +31,7 @@
   height: 24px;
   cursor: pointer;
   user-select: none;
-  background: $feature-toggle-color-disabled;
+  background: $gl-gray-400;
   border-radius: 12px;
   padding: 3px;
   transition: all .4s ease;
@@ -61,7 +61,7 @@
     }
     .toggle-icon-svg {
-      fill: $feature-toggle-color-disabled;
+      fill: $gl-gray-400;
     }
     .toggle-status-checked {

app/assets/stylesheets/framework/typography.scss

@@ -61,12 +61,12 @@
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
-    color: $kdb-color;
+    color: $gl-gray-700;
     vertical-align: middle;
     background-color: $kdb-bg;
     border-width: 1px;
     border-style: solid;
-    border-color: $kdb-border $kdb-border $kdb-border-bottom;
+    border-color: $gl-gray-200 $gl-gray-200 $kdb-border-bottom;
     border-image: none;
     border-radius: 3px;
     box-shadow: 0 -1px 0 $kdb-shadow inset;

app/assets/stylesheets/framework/variables.scss

@@ -31,6 +31,14 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
+$gl-gray-100: #dddddd;
+$gl-gray-200: #cccccc;
+$gl-gray-350: #aaaaaa;
+$gl-gray-400: #999999;
+$gl-gray-500: #777777;
+$gl-gray-600: #666666;
+$gl-gray-700: #555555;
+
 $green-50: #f1fdf6;
 $green-100: #dcf5e7;
 $green-200: #b3e6c8;
@@ -206,11 +214,6 @@ $gl-header-color: #4c4e54;
 $list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
-/*
- * Markdown
- */
-$md-area-border: #ddd;
-
 /*
  * Code
  */
@@ -241,7 +244,6 @@ $input-horizontal-padding: 12px;
 /*
  * Misc
  */
-$progress-color: #c0392b;
 $header-height: 40px;
 $ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
@@ -256,14 +258,7 @@ $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-margin-5: 5px;
 $sidebar-block-hover-color: #ebebeb;
-$group-path-color: #999;
-$namespace-kind-color: #aaa;
-$panel-heading-link-color: #777;
-$graph-author-email-color: #777;
 $count-arrow-border: #dce0e5;
-$save-project-loader-color: #555;
-$divergence-graph-bar-bg: #ccc;
-$divergence-graph-separator-bg: #ccc;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $highlight-changes-color: rgb(235, 255, 232);
@@ -276,20 +271,8 @@ $project-title-row-height: 24px;
 /*
 * Common component specific colors
 */
-$hint-color: #999;
-$well-pre-color: #555;
-$loading-color: #555;
-$update-author-color: #999;
 $user-mention-bg: rgba($blue-500, 0.044);
 $user-mention-bg-hover: rgba($blue-500, 0.15);
-$time-color: #999;
-$project-member-show-color: #aaa;
-$gl-promo-color: #aaa;
-$control-group-descr-color: #666;
-$table-permission-x-bg: #d9edf7;
-$username-color: #666;
-$description-color: #666;
-$profiler-border: #eee;
 /* tanuki logo colors */
 $tanuki-red: #e24329;
@@ -320,9 +303,7 @@ $line-select-yellow: #fcf8e7;
 $line-select-yellow-dark: #f0e2bd;
 $dark-diff-match-bg: rgba(255, 255, 255, 0.3);
 $dark-diff-match-color: rgba(255, 255, 255, 0.1);
-$file-mode-changed: #777;
 $diff-image-info-color: gray;
-$diff-swipe-border: #999;
 $diff-view-modes-color: gray;
 $diff-view-modes-border: #c1c1c1;
 $diff-jagged-border-gradient-color: darken($white-normal, 8%);
@@ -342,12 +323,10 @@ $dropdown-width: 300px;
 $dropdown-min-height: 40px;
 $dropdown-max-height: 312px;
 $dropdown-vertical-offset: 4px;
-$dropdown-link-color: #555;
 $dropdown-empty-row-bg: rgba(#000, 0.04);
 $dropdown-shadow-color: rgba(#000, 0.1);
 $dropdown-divider-color: rgba(#000, 0.1);
 $dropdown-title-btn-color: #bfbfbf;
-$dropdown-input-color: #555;
 $dropdown-input-fa-color: #c7c7c7;
 $dropdown-input-focus-shadow: rgba($blue-300, 0.4);
 $dropdown-loading-bg: rgba(#fff, 0.6);
@@ -420,14 +399,8 @@ $location-icon-color: #e7e9ed;
 $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
-$note-line2-border: #ddd;
 $note-icon-gutter-width: 55px;
-/*
-* Zen
-*/
-$zen-control-color: #555;
-
 /*
 * Identicon
 */
@@ -437,7 +410,6 @@ $identicon-indigo: #e8eaf6;
 $identicon-blue: #e3f2fd;
 $identicon-teal: #e0f2f1;
 $identicon-orange: #fbe9e7;
-$identicon-fg-color: #555555;
 /*
 * Calendar
@@ -505,17 +477,9 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0);
 $common-gray-light: #bbb;
 $common-gray-dark: #444;
-/*
-* Events
-*/
-$events-pre-color: #777;
-$events-note-icon-color: #777;
-$events-body-border: #ddd;
-
 /*
 * Files
 */
-$blame-line-numbers-border: #ddd;
 $logs-li-color: #888;
 $logs-p-color: #333;
@@ -534,8 +498,6 @@ $input-short-md-width: 280px;
 * Help
 */
 $document-index-color: #888;
-$help-shortcut-color: #999;
-$help-shortcut-mapping-color: #555;
 $help-shortcut-header-color: #333;
 /*
@@ -545,12 +507,6 @@ $issues-today-bg: #f3fff2;
 $issues-today-border: #e1e8d5;
 $compare-display-color: #888;
-/*
-* jQuery UI
-*/
-$jq-ui-border: #ddd;
-$jq-ui-default-color: #777;
-
 /*
 * Label
 */
@@ -574,35 +530,20 @@ $fade-mask-transition-curve: ease-in-out;
 */
 $login-brand-holder-color: #888;
-/*
-* Nav
-*/
-$nav-link-gray: #959494;
-$nav-toggle-gray: #666;
-
-/*
-* Notify
-*/
-$notify-details: #777;
-$notify-footer: #777;
-
 /*
 * Projects
 */
 $project-option-descr-color: #54565b;
-$project-breadcrumb-color: #999;
 $project-network-controls-color: #888;
 $feature-toggle-color: #fff;
 $feature-toggle-text-color: #fff;
-$feature-toggle-color-disabled: #999;
 $feature-toggle-color-enabled: #4a8bee;
 /*
 Stat Graph
 */
 $stat-graph-common-bg: #f3f3f3;
-$stat-graph-axis-fill: #aaa;
 $stat-graph-selection-fill: #333;
 $stat-graph-selection-stroke: #333;
@@ -612,18 +553,10 @@ $stat-graph-selection-stroke: #333;
 $select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
 $select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
-/*
-* Todo
-*/
-$todo-body-pre-color: #777;
-$todo-body-border: #ddd;
-
 /*
 * Typography
 */
 $kdb-bg: #fcfcfc;
-$kdb-color: #555;
-$kdb-border: #ccc;
 $kdb-border-bottom: #bbb;
 $kdb-shadow: #bbb;
 $body-text-shadow: rgba(255, 255, 255, 0.01);
@@ -632,7 +565,6 @@ $body-text-shadow: rgba(255, 255, 255, 0.01);
 * UI Dev Kit
 */
 $ui-dev-kit-example-color: #bbb;
-$ui-dev-kit-example-border: #ddd;
 /*
 Pipeline Graph
@@ -666,12 +598,10 @@ $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
 /*
 Performance Bar
 */
-$perf-bar-text: #999;
 $perf-bar-production: #222;
 $perf-bar-staging: #291430;
 $perf-bar-development: #4c1210;
 $perf-bar-bucket-bg: #111;
-$perf-bar-bucket-color: #ccc;
 $perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2);
 $perf-bar-bucket-box-shadow-to: rgba($black, 0.25);

app/assets/stylesheets/framework/zen.scss

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

app/assets/stylesheets/notify.scss

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

app/assets/stylesheets/pages/branches.scss

@@ -23,7 +23,7 @@
     .bar {
       position: absolute;
       height: 4px;
-      background-color: $divergence-graph-bar-bg;
+      background-color: $gl-gray-200;
     }
     .bar-behind {
@@ -61,7 +61,7 @@
     height: 18px;
     margin: 5px 0 0;
     float: left;
-    background-color: $divergence-graph-separator-bg;
+    background-color: $gl-gray-200;
   }
 }

app/assets/stylesheets/pages/diff.scss

@@ -31,7 +31,7 @@
     .file-mode-changed {
       padding: 10px;
-      color: $file-mode-changed;
+      color: $gl-gray-500;
     }
     .suppressed-container {
@@ -245,7 +245,7 @@
       .swipe-wrap {
         overflow: hidden;
-        border-left: 1px solid $diff-swipe-border;
+        border-left: 1px solid $gl-gray-400;
         position: absolute;
         display: block;
         top: 13px;

app/assets/stylesheets/pages/environments.scss

@@ -153,7 +153,7 @@
 .x-axis path,
 .y-axis path {
-  stroke: $stat-graph-axis-fill;
+  stroke: $gl-gray-350;
 }
 .label-x-axis-line,
@@ -163,7 +163,7 @@
 .y-axis {
   line {
-    stroke: $stat-graph-axis-fill;
+    stroke: $gl-gray-350;
     stroke-width: 1;
   }
 }

app/assets/stylesheets/pages/events.scss

@@ -87,7 +87,7 @@
         border: 0;
         background: $gray-light;
         border-radius: 0;
-        color: $events-pre-color;
+        color: $gl-gray-500;
         overflow: hidden;
       }
@@ -104,7 +104,7 @@
     }
     .event-note-icon {
-      color: $events-pre-color;
+      color: $gl-gray-500;
       float: left;
       font-size: $gl-font-size;
       line-height: 16px;

app/assets/stylesheets/pages/graph.scss

@@ -20,7 +20,7 @@
 .graphs {
   .graph-author-email {
     float: right;
-    color: $graph-author-email-color;
+    color: $gl-gray-500;
   }
   .graph-additions {
@@ -58,7 +58,7 @@
   .y-axis-label {
     line {
-      stroke: $stat-graph-axis-fill;
+      stroke: $gl-gray-350;
     }
     text {