Refactor gitlab css state colors

app/assets/stylesheets/generic/buttons.scss

@@ -41,16 +41,16 @@
   }
 
   &.btn-close {
-    color: $bg_danger;
-    border-color: $border_danger;
+    color: $gl-danger;
+    border-color: $gl-danger;
     &:hover {
       color: #B94A48;
     }
   }
 
   &.btn-reopen {
-    color: $bg_success;
-    border-color: $border_success;
+    color: $gl-success;
+    border-color: $gl-success;
     &:hover {
       color: #468847;
     }

app/assets/stylesheets/generic/common.scss

@@ -61,7 +61,7 @@ pre {
 
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
-  background: $bg_primary;
+  background: $gl-primary;
   color: #FFF
 }
 

app/assets/stylesheets/generic/issue_box.scss

@@ -11,17 +11,17 @@
   margin-right: 5px;
 
   &.issue-box-closed {
-    background-color: $bg_danger;
+    background-color: $gl-danger;
     color: #FFF;
   }
 
   &.issue-box-merged {
-    background-color: $bg_primary;
+    background-color: $gl-primary;
     color: #FFF;
   }
 
   &.issue-box-open {
-    background-color: $bg_success;
+    background-color: $gl-success;
     color: #FFF;
   }
 

app/assets/stylesheets/generic/jquery.scss

@@ -41,8 +41,8 @@
   }
 
   .ui-state-active {
-    border: 1px solid $bg_primary;
-    background: $bg_primary;
+    border: 1px solid $gl-primary;
+    background: $gl-primary;
     color: #FFF;
   }
 

app/assets/stylesheets/generic/selects.scss

@@ -42,7 +42,7 @@
   .select2-results {
     max-height: 350px;
     .select2-highlighted {
-      background: $bg_primary;
+      background: $gl-primary;
     }
   }
 }

app/assets/stylesheets/gl_bootstrap.scss

@@ -4,15 +4,27 @@
  */
 
 $font-size-base: 13px !default;
-$nav-pills-active-link-hover-bg: $bg_primary;
-$pagination-active-bg: $bg_primary;
-$list-group-active-bg: $bg_primary;
+$nav-pills-active-link-hover-bg: $gl-primary;
+$pagination-active-bg: $gl-primary;
+$list-group-active-bg: $gl-primary;
 
-$brand-primary:         $bg_primary;
-$brand-success:         $bg_success;
+$brand-primary:    $gl-primary;
+$brand-success:    $gl-success;
 $brand-info:       #029ACF;
-$brand-warning:         $bg_warning;
-$brand-danger:          $bg_danger;
+$brand-warning:    $gl-warning;
+$brand-danger:     $gl-danger;
+
+$state-primary-bg: lighten($gl-primary, 30%);
+$state-success-bg: lighten($gl-success, 10%);
+$state-info-bg:    lighten($gl-info, 30%);
+$state-warning-bg: lighten($gl-warning, 30%);
+$state-danger-bg:  lighten($gl-danger, 30%);
+
+$state-primary-txt: $gl-primary;
+$state-success-txt: $gl-success;
+$state-info-txt:    $gl-info;
+$state-warning-txt: $gl-warning;
+$state-danger-txt:  $gl-danger;
 
 // Core variables and mixins
 @import "bootstrap/variables";
@@ -226,31 +238,31 @@ $brand-danger:          $bg_danger;
 .panel-danger {
   @include panel-colored;
   .panel-heading {
-    color: $border_danger;
-    border-color: $border_danger;
+    color: $gl-danger;
+    border-color: $gl-danger;
   }
 }
 
 .panel-success {
   @include panel-colored;
   .panel-heading {
-    color: $border_success;
-    border-color: $border_success;
+    color: $gl-success;
+    border-color: $gl-success;
   }
 }
 
 .panel-primary {
   @include panel-colored;
   .panel-heading {
-    color: $border_primary;
-    border-color: $border_primary;
+    color: $gl-primary;
+    border-color: $gl-primary;
   }
 }
 
 .panel-warning {
   @include panel-colored;
   .panel-heading {
-    color: $border_warning;
-    border-color: $border_warning;
+    color: $gl-warning;
+    border-color: $gl-warning;
   }
 }

app/assets/stylesheets/main/variables.scss

@@ -14,28 +14,13 @@ $link_hover_color: darken($link-color, 10%);
 $btn-border: 1px solid #ccc;
 
 /*
- * Success colors (green)
+ * State colors:
  */
-$border_success: #019875;
-$bg_success: #019875;
-
-/*
- * Danger colors (red)
- */
-$border_danger: #d43f3a;
-$bg_danger: #d9534f;
-
-/*
- * Primary colors (blue)
- */
-$border_primary: #446e9b;
-$bg_primary: #446e9b;
-
-/*
- * Warning colors (yellow)
- */
-$bg_warning: #EB9532;
-$border_warning: #EB9532;
+$gl-success: #019875;
+$gl-danger: #d9534f;
+$gl-primary: #446e9b;
+$gl-info: #029ACF;
+$gl-warning: #EB9532;
 
 /**
  * Commit Diff Colors

app/assets/stylesheets/sections/dashboard.scss

@@ -111,8 +111,8 @@
 }
 
 .dash-new-project {
-  background: $bg_success;
-  border: 1px solid $border_success;
+  background: $gl-success;
+  border: 1px solid $gl-success;
 
   a {
     color: #FFF;
@@ -120,8 +120,8 @@
 }
 
 .dash-new-group {
-  background: $bg_success;
-  border: 1px solid $border_success;
+  background: $gl-success;
+  border: 1px solid $gl-success;
 
   a {
     color: #FFF;

app/assets/stylesheets/sections/merge_requests.scss

@@ -136,8 +136,8 @@
     background-color: #F5F5F5;
 
     &.ci-success {
-      color: $bg_success;
-      border-color: $border_success;
+      color: $gl-success;
+      border-color: $gl-success;
       background-color: #F1FAF1;
     }
 
@@ -148,20 +148,20 @@
     }
 
     &.ci-running {
-      color: $bg_warning;
-      border-color: $border_warning;
+      color: $gl-warning;
+      border-color: $gl-warning;
       background-color: #FAF5F1;
     }
 
     &.ci-failed {
-      color: $bg_danger;
-      border-color: $border_danger;
+      color: $gl-danger;
+      border-color: $gl-danger;
       background-color: #FAF1F1;
     }
 
     &.ci-error {
-      color: $bg_danger;
-      border-color: $border_danger;
+      color: $gl-danger;
+      border-color: $gl-danger;
       background-color: #FAF1F1;
     }
   }

app/assets/stylesheets/sections/notes.scss

@@ -194,7 +194,7 @@ ul.notes {
 
     &:hover {
       font-size: 24px;
-      background: $bg_primary;
+      background: $gl-primary;
       color: #FFF;
       @include show-add-diff-note;
     }

app/assets/stylesheets/sections/notifications.scss

@@ -10,13 +10,13 @@
 }
 
 .ns-part {
-  color: $bg_primary;
+  color: $gl-primary;
 }
 
 .ns-watch {
-  color: $bg_success;
+  color: $gl-success;
 }
 
 .ns-mute {
-  color: $bg_danger;
+  color: $gl-danger;
 }

app/assets/stylesheets/sections/projects.scss

@@ -267,15 +267,15 @@ ul.nav.nav-projects-tabs {
 }
 
 .vs-public {
-  color: $bg_primary;
+  color: $gl-primary;
 }
 
 .vs-internal {
-  color: $bg_warning;
+  color: $gl-warning;
 }
 
 .vs-private {
-  color: $bg_success;
+  color: $gl-success;
 }
 
 .breadcrumb.repo-breadcrumb {

app/assets/stylesheets/sections/tree.scss

@@ -46,7 +46,7 @@
       }
 
       i {
-        color: $bg_primary;
+        color: $gl-primary;
       }
 
       img {