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

EE- remove scss variables 4

See merge request gitlab-org/gitlab-ee!6961

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;
 

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 {
@@ -66,7 +66,7 @@
   }
 
   &:not([href]):hover {
-    border-color: darken($avatar-border, 10%);
+    border-color: darken($gray-normal, 10%);
   }
 }
 
@@ -74,7 +74,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; }
@@ -98,7 +98,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 {
@@ -126,7 +126,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;

app/assets/stylesheets/framework/badges.scss

 .badge.badge-pill {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
-  color: $badge-color;
+  color: $gl-text-color-secondary;
   vertical-align: baseline;
 }

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;
   }
 }

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;
   }
 
 }

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 {

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 {

app/assets/stylesheets/framework/icons.scss

@@ -11,7 +11,7 @@
 
 .ci-status-icon-failed {
   svg {
-    fill: $gl-danger;
+    fill: $red-500;
   }
 
   &.add-border {

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 {

app/assets/stylesheets/framework/variables.scss

@@ -308,19 +308,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
@@ -341,10 +331,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-bg: #ddd;
-$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%);
 
@@ -384,7 +373,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
@@ -399,7 +387,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;
@@ -410,7 +398,6 @@ $gl-btn-horz-padding: 12px;
 * Badges
 */
 $badge-bg: rgba(0, 0, 0, 0.07);
-$badge-color: $gl-text-color-secondary;
 
 /*
 * Pagination
@@ -418,21 +405,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
@@ -445,16 +423,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;
@@ -475,7 +450,6 @@ $identicon-indigo: #e8eaf6;
 $identicon-blue: #e3f2fd;
 $identicon-teal: #e0f2f1;
 $identicon-orange: #fbe9e7;
-$identicon-gray: $gray-darker;
 $identicon-fg-color: #555555;
 
 /*
@@ -491,7 +465,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;
 
@@ -519,9 +492,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;
 
 /*

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;

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;

app/assets/stylesheets/pages/environments.scss

@@ -710,7 +710,7 @@
 }
 
 .alert-error-message {
-  color: $gl-danger;
+  color: $red-500;
   vertical-align: middle;
 }
 

app/assets/stylesheets/pages/groups.scss

@@ -187,11 +187,11 @@
 
 .card {
   .shared_runners_limit_under_quota {
-    color: $gl-success;
+    color: $green-500;
   }
 
   .shared_runners_limit_over_quota {
-    color: $gl-danger;
+    color: $red-500;
   }
 }
 

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);
       }
 
     }
@@ -240,7 +240,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
@@ -946,7 +946,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;
   }
 }
 

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;
       }
     }
   }

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 {

app/assets/stylesheets/pages/milestone.scss

@@ -400,7 +400,7 @@
     fill: none;
 
     &.actual {
-      stroke: $gl-success;
+      stroke: $green-500;
     }
 
     &.ideal {
@@ -412,7 +412,7 @@
   .focus {
     circle {
       fill: $white-light;
-      stroke: $gl-success;
+      stroke: $green-500;
       stroke-width: 2px;
     }
   }

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;
       }
     }
   }

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 {

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 {
@@ -732,7 +732,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 {

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;
   }
 }
 

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 {

ee/app/assets/stylesheets/pages/epics.scss

@@ -12,7 +12,7 @@
     }
 
     .date-warning-icon {
-      color: $gl-warning;
+      color: $orange-500;
       margin-top: -1px;
     }
 

ee/app/assets/stylesheets/pages/geo_nodes.scss

@@ -29,11 +29,11 @@
 }
 
 .geo-node-healthy {
-  color: $gl-success;
+  color: $green-500;
 }
 
 .geo-node-unhealthy {
-  color: $gl-danger;
+  color: $red-500;
 }
 
 .geo-node-offline {
@@ -54,11 +54,11 @@
   }
 
   .status-icon-warning {
-    fill: $gl-warning;
+    fill: $orange-500;
   }
 
   .status-icon-failure {
-    fill: $gl-danger;
+    fill: $red-500;
   }
 
   .card-body {
@@ -112,7 +112,7 @@
     }
 
     .detail-value-stale-icon {
-      color: $gl-warning;
+      color: $orange-500;
     }
 
     .node-detail-value-bold {
@@ -120,7 +120,7 @@
     }
 
     .node-detail-value-error {
-      color: $gl-danger;
+      color: $red-500;
     }
   }