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

Ee remove scss variables 5

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

app/assets/stylesheets/framework/callout.scss

@@ -25,25 +25,25 @@
 
 /* Variations */
 .bs-callout-danger {
-  background-color: $callout-danger-bg;
-  border-color: $callout-danger-border;
-  color: $callout-danger-color;
+  background-color: $red-100;
+  border-color: $red-200;
+  color: $red-700;
 }
 
 .bs-callout-warning {
-  background-color: $callout-warning-bg;
-  border-color: $callout-warning-border;
-  color: $callout-warning-color;
+  background-color: $orange-100;
+  border-color: $orange-200;
+  color: $orange-700;
 }
 
 .bs-callout-info {
-  background-color: $callout-info-bg;
-  border-color: $callout-info-border;
-  color: $callout-info-color;
+  background-color: $blue-100;
+  border-color: $blue-200;
+  color: $blue-700;
 }
 
 .bs-callout-success {
-  background-color: $callout-success-bg;
-  border-color: $callout-success-border;
-  color: $callout-success-color;
+  background-color: $green-100;
+  border-color: $green-200;
+  color: $green-700;
 }

app/assets/stylesheets/framework/common.scss

 /** COLORS **/
-.cgray { color: $common-gray; }
+.cgray { color: $gl-text-color; }
 .clgray { color: $common-gray-light; }
-.cred { color: $common-red; }
-.cgreen { color: $common-green; }
+.cred { color: $red-500; }
+.cgreen { color: $green-600; }
 .cdark { color: $common-gray-dark; }
 
 .text-plain,
@@ -44,10 +44,10 @@
 }
 
 .hint { font-style: italic; color: $hint-color; }
-.light { color: $common-gray; }
+.light { color: $gl-text-color; }
 
 .slead {
-  color: $common-gray;
+  color: $gl-text-color;
   font-size: 14px;
   margin-bottom: 12px;
   font-weight: $gl-font-weight-normal;

app/assets/stylesheets/framework/dropdowns.scss

@@ -147,7 +147,7 @@
 }
 
 @mixin dropdown-item-hover {
-  background-color: $dropdown-item-hover-bg;
+  background-color: $gray-darker;
   color: $gl-text-color;
   outline: 0;
 
@@ -195,7 +195,7 @@
     text-decoration: none;
 
     .badge.badge-pill {
-      background-color: darken($dropdown-link-hover-bg, 5%);
+      background-color: darken($blue-50, 5%);
     }
   }
 
@@ -233,7 +233,7 @@
   font-weight: $gl-font-weight-normal;
   padding: 8px 0;
   background-color: $white-light;
-  border: 1px solid $dropdown-border-color;
+  border: 1px solid $border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
 
@@ -874,7 +874,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     overflow-y: auto;
 
     li.section-empty.section-failure {
-      color: $callout-danger-color;
+      color: $red-700;
     }
 
     .frequent-items-list-item-container a {

app/assets/stylesheets/framework/feature_highlight.scss

@@ -72,11 +72,11 @@
 .feature-highlight-popover {
   width: 240px;
   padding: 0;
-  border: 1px solid $dropdown-border-color;
+  border: 1px solid $border-color;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
 
   &.right > .arrow {
-    border-right-color: $dropdown-border-color;
+    border-right-color: $border-color;
   }
 
   .popover-body {

app/assets/stylesheets/framework/files.scss

@@ -312,11 +312,11 @@ span.idiff {
     text-decoration: none;
 
     .new-file {
-      color: $notify-new-file;
+      color: $green-600;
     }
 
     .deleted-file {
-      color: $notify-deleted-file;
+      color: $red-700;
     }
   }
 }

app/assets/stylesheets/framework/forms.scss

@@ -8,7 +8,7 @@ input {
 
 input[type='text'].danger {
   background: $input-danger-bg !important;
-  border-color: $input-danger-border;
+  border-color: $red-400;
   text-shadow: 0 1px 1px $white-light;
 }
 

app/assets/stylesheets/framework/selects.scss

@@ -58,7 +58,7 @@
 .select2-drop.select2-drop-above {
   box-shadow: 0 2px 4px $dropdown-shadow-color;
   border-radius: $border-radius-base;
-  border: 1px solid $dropdown-border-color;
+  border: 1px solid $border-color;
   min-width: 175px;
   color: $gl-text-color;
   z-index: 999;
@@ -69,7 +69,7 @@
 }
 
 .select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid $dropdown-border-color;
+  border-top: 1px solid $border-color;
   margin-top: -6px;
 }
 
@@ -193,7 +193,7 @@
     color: $gl-text-color;
 
     .select2-result-label {
-      background: $dropdown-item-hover-bg;
+      background: $gray-darker;
     }
   }
 

app/assets/stylesheets/framework/variables.scss

@@ -270,16 +270,14 @@ $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
 $highlight-changes-color: rgb(235, 255, 232);
 $performance-bar-height: 35px;
-$system-header-height: 35px;
-$system-footer-height: $system-header-height;
 $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
 
 // EE-only CSS variables START
+$system-header-height: 35px;
 $issue-box-upcoming-bg: #8f8f8f;
 $pages-group-name-color: #4c4e54;
-$ldap-members-override-bg: $orange-50;
 // EE-only CSS variables END
 
 /*
@@ -352,9 +350,7 @@ $dropdown-min-height: 40px;
 $dropdown-max-height: 312px;
 $dropdown-vertical-offset: 4px;
 $dropdown-link-color: #555;
-$dropdown-link-hover-bg: $blue-50;
 $dropdown-empty-row-bg: rgba(#000, 0.04);
-$dropdown-border-color: $border-color;
 $dropdown-shadow-color: rgba(#000, 0.1);
 $dropdown-divider-color: rgba(#000, 0.1);
 $dropdown-title-btn-color: #bfbfbf;
@@ -364,7 +360,6 @@ $dropdown-input-focus-shadow: rgba($blue-300, 0.4);
 $dropdown-loading-bg: rgba(#fff, 0.6);
 $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
-$dropdown-item-hover-bg: $gray-darker;
 $dropdown-fade-mask-height: 32px;
 $dropdown-member-form-control-width: 163px;
 
@@ -505,22 +500,6 @@ $blame-blue: #254e77;
 */
 $builds-trace-bg: #111;
 
-/*
-* Callout
-*/
-$callout-danger-bg: $red-100;
-$callout-danger-border: $red-200;
-$callout-danger-color: $red-700;
-$callout-warning-bg: $orange-100;
-$callout-warning-border: $orange-200;
-$callout-warning-color: $orange-700;
-$callout-info-bg: $blue-100;
-$callout-info-border: $blue-200;
-$callout-info-color: $blue-700;
-$callout-success-bg: $green-100;
-$callout-success-border: $green-200;
-$callout-success-color: $green-700;
-
 /*
 * Commit Page
 */
@@ -530,16 +509,8 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0);
 /*
 * Common
 */
-$common-gray: $gl-text-color;
 $common-gray-light: #bbb;
 $common-gray-dark: #444;
-$common-red: $red-500;
-$common-green: $green-600;
-
-/*
-* Editor
-*/
-$editor-cancel-color: $red-600;
 
 /*
 * Events
@@ -560,7 +531,6 @@ $logs-p-color: #333;
 */
 $input-height: 34px;
 $input-danger-bg: #f2dede;
-$input-danger-border: $red-400;
 $input-group-addon-bg: #f7f8fa;
 $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
 $gl-field-focus-shadow-error: rgba($red-500, 0.6);
@@ -606,17 +576,10 @@ $fade-in-duration: 200ms;
 $fade-mask-transition-duration: 0.1s;
 $fade-mask-transition-curve: ease-in-out;
 
-/*
-* Lint
-*/
-$lint-incorrect-color: $red-500;
-$lint-correct-color: $green-500;
-
 /*
 * Login
 */
 $login-brand-holder-color: #888;
-$login-devise-error-color: $red-700;
 
 /*
 * Nav
@@ -629,15 +592,12 @@ $nav-toggle-gray: #666;
 */
 $notify-details: #777;
 $notify-footer: #777;
-$notify-new-file: $green-600;
-$notify-deleted-file: $red-700;
 
 /*
 * Projects
 */
 $project-option-descr-color: #54565b;
 $project-breadcrumb-color: #999;
-$project-private-forks-notice-odd: $green-600;
 $project-network-controls-color: #888;
 
 $feature-toggle-color: #fff;
@@ -645,22 +605,11 @@ $feature-toggle-text-color: #fff;
 $feature-toggle-color-disabled: #999;
 $feature-toggle-color-enabled: #4a8bee;
 
-/*
-* Runners
-*/
-$runner-state-shared-bg: $green-400;
-$runner-state-specific-bg: $blue-400;
-$runner-status-online-color: $green-600;
-$runner-status-offline-color: $gray-darkest;
-$runner-status-paused-color: $red-500;
-
 /*
 Stat Graph
 */
 $stat-graph-common-bg: #f3f3f3;
-$stat-graph-area-fill: $green-500;
 $stat-graph-axis-fill: #aaa;
-$stat-graph-orange-fill: $orange-500;
 $stat-graph-selection-fill: #333;
 $stat-graph-selection-stroke: #333;
 
@@ -673,7 +622,6 @@ $select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
 /*
 * Todo
 */
-$todo-alert-blue: $blue-500;
 $todo-body-pre-color: #777;
 $todo-body-border: #ddd;
 
@@ -696,7 +644,6 @@ $ui-dev-kit-example-border: #ddd;
 /*
 Pipeline Graph
 */
-$stage-hover-bg: $gray-darker;
 $ci-action-icon-size: 22px;
 $ci-action-icon-size-lg: 24px;
 $pipeline-dropdown-line-height: 20px;
@@ -730,7 +677,6 @@ GitLab Plans
 $gl-gold-plan: #d4af37;
 $gl-silver-plan: #91a1ab;
 $gl-bronze-plan: #cd7f32;
-$gl-no-plan: $gl-gray-light;
 
 /*
 Cross-project Pipelines
@@ -738,13 +684,6 @@ Cross-project Pipelines
 
 $linked-project-column-margin: 60px;
 
-/*
-Convdev Index
-*/
-$color-high-score: $green-400;
-$color-average-score: $orange-400;
-$color-low-score: $red-400;
-
 /*
 Performance Bar
 */
@@ -798,9 +737,5 @@ Modals
 $modal-body-height: 134px;
 $modal-border-color: #e9ecef;
 
-/*
-Prometheus
-*/
-$prometheus-table-row-highlight-color: $theme-gray-100;
 
 $priority-label-empty-state-width: 114px;

app/assets/stylesheets/pages/builds.scss

@@ -331,7 +331,7 @@
       }
 
       &:hover {
-        background-color: $dropdown-item-hover-bg;
+        background-color: $gray-darker;
       }
 
       .icon-retry {

app/assets/stylesheets/pages/convdev_index.scss

@@ -80,7 +80,7 @@ $space-between-cards: 8px;
 }
 
 .convdev-card-low {
-  border-top-color: $color-low-score;
+  border-top-color: $red-400;
 
   .board-card-score-big {
     background-color: $red-50;
@@ -88,7 +88,7 @@ $space-between-cards: 8px;
 }
 
 .convdev-card-average {
-  border-top-color: $color-average-score;
+  border-top-color: $orange-400;
 
   .board-card-score-big {
     background-color: $orange-50;
@@ -96,7 +96,7 @@ $space-between-cards: 8px;
 }
 
 .convdev-card-high {
-  border-top-color: $color-high-score;
+  border-top-color: $green-400;
 
   .board-card-score-big {
     background-color: $green-50;
@@ -243,13 +243,13 @@ $space-between-cards: 8px;
 }
 
 .convdev-high-score {
-  color: $color-high-score;
+  color: $green-400;
 }
 
 .convdev-average-score {
-  color: $color-average-score;
+  color: $orange-400;
 }
 
 .convdev-low-score {
-  color: $color-low-score;
+  color: $red-400;
 }

app/assets/stylesheets/pages/editor.scss

@@ -23,10 +23,10 @@
   }
 
   .cancel-btn {
-    color: $editor-cancel-color;
+    color: $red-600;
 
     &:hover {
-      color: $editor-cancel-color;
+      color: $red-600;
     }
   }
 

app/assets/stylesheets/pages/environments.scss

@@ -661,7 +661,7 @@
 }
 
 .prometheus-table-row-highlight {
-  background-color: $prometheus-table-row-highlight-color;
+  background-color: $theme-gray-100;
 }
 
 // EE-only

app/assets/stylesheets/pages/login.scss

@@ -186,7 +186,7 @@
     h2 {
       margin-top: 0;
       font-size: 14px;
-      color: $login-devise-error-color;
+      color: $red-700;
     }
   }
 }

app/assets/stylesheets/pages/members.scss

@@ -138,7 +138,7 @@
 }
 
 .alert-member-ldap {
-  background-color: $ldap-members-override-bg;
+  background-color: $orange-50;
 
   @include media-breakpoint-up(sm) {
     line-height: 40px;

app/assets/stylesheets/pages/pipelines.scss

@@ -19,7 +19,7 @@
   background-color: $white-light;
 
   &:hover {
-    background-color: $stage-hover-bg;
+    background-color: $gray-darker;
     border: 1px solid $dropdown-toggle-active-border-color;
     color: $gl-text-color;
   }
@@ -597,7 +597,7 @@
 
     a.build-content:hover,
     button.build-content:hover {
-      background-color: $stage-hover-bg;
+      background-color: $gray-darker;
       border: 1px solid $dropdown-toggle-active-border-color;
     }
 
@@ -670,7 +670,7 @@
       display: block;
 
       &:hover {
-        background-color: $stage-hover-bg;
+        background-color: $gray-darker;
         border: 1px solid $dropdown-toggle-active-border-color;
 
         svg {
@@ -837,7 +837,7 @@ button.mini-pipeline-graph-dropdown-toggle {
       display: block;
 
       &:hover {
-        background-color: $stage-hover-bg;
+        background-color: $gray-darker;
         border: 1px solid $dropdown-toggle-active-border-color;
 
         svg {
@@ -936,7 +936,7 @@ button.mini-pipeline-graph-dropdown-toggle {
       &:focus {
         outline: none;
         text-decoration: none;
-        background-color: $stage-hover-bg;
+        background-color: $gray-darker;
       }
     }
   }

app/assets/stylesheets/pages/projects.scss

@@ -901,7 +901,7 @@ pre.light-well {
 
 .private-forks-notice .private-fork-icon {
   i:nth-child(1) {
-    color: $project-private-forks-notice-odd;
+    color: $green-600;
   }
 
   i:nth-child(2) {
@@ -1129,12 +1129,12 @@ pre.light-well {
 .project-ci-body {
   .incorrect-syntax {
     font-size: 18px;
-    color: $lint-incorrect-color;
+    color: $red-500;
   }
 
   .correct-syntax {
     font-size: 18px;
-    color: $lint-correct-color;
+    color: $green-500;
   }
 }
 

app/assets/stylesheets/pages/runners.scss

@@ -4,24 +4,24 @@
   color: $white-light;
 
   &.runner-state-shared {
-    background: $runner-state-shared-bg;
+    background: $green-400;
   }
 
   &.runner-state-specific {
-    background: $runner-state-specific-bg;
+    background: $blue-400;
   }
 }
 
 .runner-status-online {
-  color: $runner-status-online-color;
+  color: $green-600;
 }
 
 .runner-status-offline {
-  color: $runner-status-offline-color;
+  color: $gray-darkest;
 }
 
 .runner-status-paused {
-  color: $runner-status-paused-color;
+  color: $red-500;
 }
 
 .runner {

app/assets/stylesheets/pages/stat_graph.scss

@@ -5,7 +5,7 @@
 }
 
 .area {
-  fill: $stat-graph-area-fill;
+  fill: $green-500;
   fill-opacity: 0.5;
 }
 
@@ -54,7 +54,7 @@
     }
 
     .area-contributor {
-      fill: $stat-graph-orange-fill;
+      fill: $orange-500;
     }
   }
 }

ee/app/assets/stylesheets/framework/system_messages.scss

@@ -25,8 +25,8 @@
 
 .footer-message {
   bottom: 0;
-  height: $system-footer-height;
-  line-height: $system-footer-height;
+  height: $system-header-height;
+  line-height: $system-header-height;
 }
 
 .with-performance-bar {
@@ -104,7 +104,7 @@
   // navless pages' footer border eg: login page
   &.devise-layout-html body .footer-container,
   &.devise-layout-html body hr.footer-fixed {
-    bottom: $system-footer-height;
+    bottom: $system-header-height;
   }
 }
 
@@ -121,7 +121,7 @@
   }
 
   @if (map-get($map, system-footer) == true) {
-    $height: $height + $system-footer-height;
+    $height: $height + $system-header-height;
   }
 
   @if (map-get($map, flash) == true) {

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

@@ -29,6 +29,6 @@
   }
 
   &:not([data-plan]) {
-    svg g { fill: $gl-no-plan; }
+    svg g { fill: $gl-gray-light; }
   }
 }

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

@@ -82,7 +82,7 @@
 }
 
 .classification-label {
-  background-color: $common-red;
+  background-color: $red-500;
 }
 
 .load-wrapper {