Merge branch 'remove-scss-variables-4' into 'master'

Remove another batch of reassigned scss variables

See merge request gitlab-org/gitlab-ce!21334

20 files changed, 53 insertions, 78 deletions

diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index e8e707cf90c..c91f5e279ea 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -4,11 +4,11 @@
 
 $text-color: $gl-text-color;
 
-$brand-primary: $gl-primary;
-$brand-success: $gl-success;
-$brand-info: $gl-info;
-$brand-warning: $gl-warning;
-$brand-danger: $gl-danger;
+$brand-primary: $blue-500;
+$brand-success: $green-500;
+$brand-info: $blue-500;
+$brand-warning: $orange-500;
+$brand-danger: $red-500;
 
 $border-radius-base: 3px !default;
 
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 4c7c399a3ca..9dd0384a228 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -8,7 +8,7 @@
   float: left;
   margin-right: 15px;
   border-radius: $avatar-radius;
-  border: 1px solid $avatar-border;
+  border: 1px solid $gray-normal;
   &.s16 { @include avatar-size(16px, 6px); }
   &.s18 { @include avatar-size(18px, 6px); }
   &.s19 { @include avatar-size(19px, 6px); }
@@ -36,7 +36,7 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  background: $avatar-background;
+  background: $gray-lightest;
   overflow: hidden;
 
   &.avatar-inline {
@@ -62,7 +62,7 @@
   }
 
   &:not([href]):hover {
-    border-color: darken($avatar-border, 10%);
+    border-color: darken($gray-normal, 10%);
   }
 }
 
@@ -70,7 +70,7 @@
   text-align: center;
   vertical-align: top;
   color: $identicon-fg-color;
-  background-color: $identicon-gray;
+  background-color: $gray-darker;
 
   // Sizes
   &.s16 { font-size: 12px; line-height: 1.33; }
@@ -94,7 +94,7 @@
   &.bg4 { background-color: $identicon-blue; }
   &.bg5 { background-color: $identicon-teal; }
   &.bg6 { background-color: $identicon-orange; }
-  &.bg7 { background-color: $identicon-gray; }
+  &.bg7 { background-color: $gray-darker; }
 }
 
 .avatar-container {
@@ -122,7 +122,7 @@
 .avatar-counter {
   background-color: $gray-darkest;
   color: $white-light;
-  border: 1px solid $avatar-border;
+  border: 1px solid $gray-normal;
   border-radius: 1em;
   font-family: $regular-font;
   font-size: 9px;
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index 57df9b969c3..c6060161dec 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -1,6 +1,6 @@
 .badge.badge-pill {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
-  color: $badge-color;
+  color: $gl-text-color-secondary;
   vertical-align: baseline;
 }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 0dc7aa4ef68..72b4ed0ac33 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -452,14 +452,14 @@
 }
 
 .btn-missing {
-  color: $notes-light-color;
+  color: $gl-text-color-secondary;
   border: 1px dashed $border-gray-normal-dashed;
   border-radius: $border-radius-default;
 
   &:hover,
   &:active,
   &:focus {
-    color: $notes-light-color;
+    color: $gl-text-color-secondary;
     background-color: $white-normal;
   }
 }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 79ca6e61e9a..7c5380a90f7 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -352,7 +352,7 @@ img.emoji {
   border-color: $border-color !important;
 
   .dz-upload {
-    background: $gl-success !important;
+    background: $green-500 !important;
   }
 
 }
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 9b09ed0ed0a..abfe350677e 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -206,7 +206,7 @@
   &.focus,
   &.focus:hover {
     border-color: $blue-300;
-    box-shadow: 0 0 4px $search-input-focus-shadow-color;
+    box-shadow: 0 0 4px $dropdown-input-focus-shadow;
   }
 
   gl-emoji {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index e7e13d35d8e..11a30d83f03 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -554,7 +554,7 @@
   float: left;
   margin-right: 5px;
   border-radius: 50%;
-  border: 1px solid $avatar-border;
+  border: 1px solid $gray-normal;
 }
 
 .with-performance-bar .navbar-gitlab {
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index d1f7ff4438b..f002edced8a 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -11,7 +11,7 @@
 
 .ci-status-icon-failed {
   svg {
-    fill: $gl-danger;
+    fill: $red-500;
   }
 
   &.add-border {
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index da5f80d9d37..2d672e62e08 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -26,12 +26,12 @@
 
   &.status-box-closed,
   &.status-box-mr-closed {
-    background-color: $gl-danger;
+    background-color: $red-500;
   }
 
   &.status-box-issue-closed,
   &.status-box-mr-merged {
-    background-color: $gl-primary;
+    background-color: $blue-500;
   }
 
   &.status-box-open {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 96508a71bd8..3531ce31794 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -297,19 +297,9 @@ $tanuki-yellow: #fca326;
 /*
  * State colors:
  */
-$gl-primary: $blue-500;
-$gl-success: $green-500;
-$gl-success-focus: rgba($gl-success, 0.4);
-$gl-info: $blue-500;
-$gl-warning: $orange-500;
-$gl-danger: $red-500;
+$green-500-focus: rgba($green-500, 0.4);
 $gl-btn-active-background: rgba(0, 0, 0, 0.16);
 $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
-// Bootstrap override states
-$success: $gl-success;
-$info: $gl-info;
-$warning: $gl-warning;
-$danger: $gl-danger;
 
 /*
  * Commit Diff Colors
@@ -330,9 +320,9 @@ $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-info-color: grey;
+$diff-image-info-color: gray;
 $diff-swipe-border: #999;
-$diff-view-modes-color: grey;
+$diff-view-modes-color: gray;
 $diff-view-modes-border: #c1c1c1;
 $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 
@@ -372,7 +362,6 @@ $dropdown-member-form-control-width: 163px;
 * Filtered Search
 */
 $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);
-$dropdown-hover-color: $blue-400;
 
 /*
 * Contextual Sidebar
@@ -387,7 +376,7 @@ $sidebar-milestone-toggle-bottom-margin: 10px;
 * Buttons
 */
 $btn-active-gray: #ececec;
-$btn-active-gray-light: e4e7ed;
+$btn-active-gray-light: #e4e7ed;
 $btn-white-active: #848484;
 $gl-btn-padding: 10px;
 $gl-btn-line-height: 16px;
@@ -398,7 +387,6 @@ $gl-btn-horz-padding: 12px;
 * Badges
 */
 $badge-bg: rgba(0, 0, 0, 0.07);
-$badge-color: $gl-text-color-secondary;
 
 /*
 * Pagination
@@ -406,21 +394,12 @@ $badge-color: $gl-text-color-secondary;
 $pagination-padding-y: 6px;
 $pagination-padding-x: 16px;
 $pagination-line-height: 20px;
-$pagination-border-color: $border-color;
-$pagination-active-bg: $blue-600;
-$pagination-active-border-color: $blue-600;
-$pagination-hover-bg: $blue-50;
-$pagination-hover-border-color: $border-color;
-$pagination-hover-color: $gl-text-color;
 $pagination-disabled-color: #cdcdcd;
-$pagination-disabled-bg: $gray-light;
-$pagination-disabled-border-color: $border-color;
 
 /*
  *  Status icons
  */
 $status-icon-size: 22px;
-$status-icon-margin: $gl-btn-padding;
 
 /*
  *  Award emoji
@@ -433,16 +412,13 @@ $award-emoji-positive-add-lines: #bb9c13;
  * Search Box
  */
 $search-input-border-color: rgba($blue-400, 0.8);
-$search-input-focus-shadow-color: $dropdown-input-focus-shadow;
 $search-input-width: 240px;
 $search-input-active-width: 320px;
-$location-badge-active-bg: $blue-500;
 $location-icon-color: #e7e9ed;
 
 /*
  *  Notes
  */
-$notes-light-color: $gl-text-color-secondary;
 $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
@@ -463,7 +439,6 @@ $identicon-indigo: #e8eaf6;
 $identicon-blue: #e3f2fd;
 $identicon-teal: #e0f2f1;
 $identicon-orange: #fbe9e7;
-$identicon-gray: $gray-darker;
 $identicon-fg-color: #555555;
 
 /*
@@ -479,7 +454,6 @@ $calendar-user-contrib-text: #959494;
 $cycle-analytics-box-padding: 30px;
 $cycle-analytics-box-text-color: #8c8c8c;
 $cycle-analytics-big-font: 19px;
-$cycle-analytics-dark-text: $gl-text-color;
 $cycle-analytics-light-gray: #bfbfbf;
 $cycle-analytics-dismiss-icon-color: #b2b2b2;
 
@@ -507,9 +481,6 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards
 * Avatar
 */
 $avatar-radius: 50%;
-$avatar-border: $gray-normal;
-$avatar-border-hover: $gray-darker;
-$avatar-background: $gray-lightest;
 $gl-avatar-size: 40px;
 
 /*
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index b9c343fa2e9..7d90452e1f4 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -14,3 +14,7 @@ $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
 $card-border-color: $border-color;
 $card-cap-bg: $gray-light;
+$success: $green-500;
+$info: $blue-500;
+$warning: $orange-500;
+$danger: $red-500;
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index bc4c90711d7..f0228768b5a 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -285,7 +285,7 @@
 
     .total-time {
       font-size: $cycle-analytics-big-font;
-      color: $cycle-analytics-dark-text;
+      color: $gl-text-color;
 
       span {
         color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 6f0f82964c8..9ac47a771a5 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -144,7 +144,7 @@
       color: $blue-800;
 
       .avatar {
-        border-color: rgba($avatar-border, .2);
+        border-color: rgba($gray-normal, .2);
       }
 
     }
@@ -231,7 +231,7 @@
     }
 
     a.edit-link:not([href]):hover {
-      color: rgba($avatar-border, .2);
+      color: rgba($gray-normal, .2);
     }
 
     .lock-edit, // uses same style, different js behaviour
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index d32943fceec..d2b9470be69 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -67,7 +67,7 @@
 .dropdown-labels-error {
   padding: 5px 10px;
   margin-bottom: 10px;
-  background-color: $gl-danger;
+  background-color: $red-500;
   color: $white-light;
 }
 
@@ -117,7 +117,7 @@
       color: $blue-600;
 
       &.remove-row {
-        color: $gl-danger;
+        color: $red-500;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 621321101cd..5631d943984 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -200,7 +200,7 @@
 
   .mr-widget-icon {
     font-size: 22px;
-    margin-right: $status-icon-margin;
+    margin-right: $gl-btn-padding;
   }
 
   .ci-status-icon svg {
@@ -281,7 +281,7 @@
       margin-bottom: 0;
 
       &.has-conflicts .fa-exclamation-triangle {
-        color: $gl-warning;
+        color: $orange-500;
       }
 
       time {
@@ -313,7 +313,7 @@
     }
 
     .danger {
-      color: $gl-danger;
+      color: $red-500;
     }
 
     .spacing,
@@ -514,7 +514,7 @@
 }
 
 .mr-links {
-  padding-left: $status-icon-size + $status-icon-margin;
+  padding-left: $status-icon-size + $gl-btn-padding;
 }
 
 .mr-info-list {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 4f861d43f55..ac7b701c2e2 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -74,13 +74,13 @@
     }
 
     &.is-dropzone-hover {
-      border-color: $gl-success;
+      border-color: $green-500;
       box-shadow: 0 0 2px $black-transparent,
-                  0 0 4px $gl-success-focus;
+                  0 0 4px $green-500-focus;
 
       .comment-toolbar,
       .nav-links {
-        border-color: $gl-success;
+        border-color: $green-500;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 2e1b2126887..fce04c58c24 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -443,7 +443,7 @@ ul.notes {
 
 .note-headline-light,
 .discussion-headline-light {
-  color: $notes-light-color;
+  color: $gl-text-color-secondary;
 }
 
 .discussion-headline-light {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c11916454c8..3154bcf5d0f 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -394,23 +394,23 @@
 }
 
 .vs-public {
-  color: $gl-primary;
+  color: $blue-500;
 }
 
 .vs-internal {
-  color: $gl-warning;
+  color: $orange-500;
 }
 
 .vs-private {
-  color: $gl-success;
+  color: $green-500;
 }
 
 .lfs-enabled {
-  color: $gl-success;
+  color: $green-500;
 }
 
 .lfs-disabled {
-  color: $gl-warning;
+  color: $orange-500;
 }
 
 .breadcrumb.repo-breadcrumb {
@@ -731,7 +731,7 @@
       background-color: transparent;
       font-size: $gl-font-size;
       line-height: $gl-btn-line-height;
-      color: $notes-light-color;
+      color: $gl-text-color-secondary;
     }
 
     .stat-link {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 5b3a468cd1c..77119aea9e2 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -24,12 +24,12 @@ $search-avatar-size: 16px;
 .form-control:hover,
 :not[readonly] {
   border-color: lighten($blue-300, 20%);
-  box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+  box-shadow: 0 0 4px lighten($dropdown-input-focus-shadow, 20%);
 }
 
 input[type='checkbox']:hover {
-  box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%),
-    0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
+  box-shadow: 0 0 2px 2px lighten($dropdown-input-focus-shadow, 20%),
+    0 0 0 1px lighten($dropdown-input-focus-shadow, 20%);
 }
 
 .search {
@@ -181,7 +181,7 @@ input[type='checkbox']:hover {
     width: $search-avatar-size;
     height: $search-avatar-size;
     border-radius: 50%;
-    border: 1px solid $avatar-border;
+    border: 1px solid $gray-normal;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 5aa4cdec9c3..e351dd7c0bb 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -120,11 +120,11 @@
 }
 
 .warning-title {
-  color: $gl-warning;
+  color: $orange-500;
 }
 
 .danger-title {
-  color: $gl-danger;
+  color: $red-500;
 }
 
 .integration-settings-form {