Merge branch 'badge-color-on-white-bg' into 'master'

added lighter count badge background-color for on white backgrounds

See merge request !7873

10 files changed, 32 insertions, 22 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 40bc0579393..3cf49f4ff1b 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -9,6 +9,7 @@
 @import "framework/asciidoctor.scss";
 @import "framework/blocks.scss";
 @import "framework/buttons.scss";
+@import "framework/badges.scss";
 @import "framework/calendar.scss";
 @import "framework/callout.scss";
 @import "framework/common.scss";
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
new file mode 100644
index 00000000000..e9d7cda0647
--- /dev/null
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -0,0 +1,11 @@
+.badge {
+  font-weight: normal;
+  background-color: $badge-bg;
+  color: $badge-color;
+  vertical-align: baseline;
+}
+
+.badge-dark {
+  background-color: $badge-bg-dark;
+  color: $badge-color-dark;
+}
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index e4affbb1be1..bbf9de06630 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -76,13 +76,6 @@
         color: $black;
       }
     }
-
-    .badge {
-      font-weight: normal;
-      background-color: $nav-badge-bg;
-      color: $gl-gray-light;
-      vertical-align: baseline;
-    }
   }
 
   &.sub-nav {
@@ -434,4 +427,4 @@
       border-bottom: none;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 460c5d995be..a5fb097a47f 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -280,6 +280,14 @@ $btn-active-gray: #ececec;
 $btn-active-gray-light: e4e7ed;
 
 /*
+* Badges
+*/
+$badge-bg: #f3f3f3;
+$badge-bg-dark: #eee;
+$badge-color: #929292;
+$badge-color-dark: #8f8f8f;
+
+/*
  *  Award emoji
  */
 $award-emoji-menu-shadow: rgba(0,0,0,.175);
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 3d60426de01..5517dc5dcbd 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -121,13 +121,6 @@
 
   .folder-name {
     cursor: pointer;
-
-    .badge {
-      font-weight: normal;
-      background-color: $gray-darker;
-      color: $gl-gray-light;
-      vertical-align: baseline;
-    }
   }
 }
 
@@ -142,4 +135,4 @@
       margin-right: 0;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 621b780ce4d..566de8a4eba 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -889,4 +889,4 @@
       min-height: 450px;
     }
   }
-}
+}
\ No newline at end of file
diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml
index ac04f57e217..b69114c96cc 100644
--- a/app/views/layouts/nav/_admin.html.haml
+++ b/app/views/layouts/nav/_admin.html.haml
@@ -31,7 +31,7 @@
       = link_to admin_abuse_reports_path, title: "Abuse Reports" do
         %span
           Abuse Reports
-          %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
+          %span.badge.badge-dark.count= number_with_delimiter(AbuseReport.count(:all))
 
     - if askimet_enabled?
       = nav_link(controller: :spam_logs) do
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index f3539fd372d..221f3ec1ffe 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -26,13 +26,13 @@
         %span
           Issues
           - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-          %span.badge.count= number_with_delimiter(issues.count)
+          %span.badge.badge-dark.count= number_with_delimiter(issues.count)
     = nav_link(path: 'groups#merge_requests') do
       = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
         %span
           Merge Requests
           - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened', non_archived: true).execute
-          %span.badge.count= number_with_delimiter(merge_requests.count)
+          %span.badge.badge-dark.count= number_with_delimiter(merge_requests.count)
     = nav_link(controller: [:group_members]) do
       = link_to group_group_members_path(@group), title: 'Members' do
         %span
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 904d11c2cf4..cc1571cbb4f 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -61,14 +61,14 @@
           %span
             Issues
             - if @project.default_issues_tracker?
-              %span.badge.count.issue_counter= number_with_delimiter(IssuesFinder.new(current_user, project_id: @project.id).execute.opened.count)
+              %span.badge.badge-dark.count.issue_counter= number_with_delimiter(IssuesFinder.new(current_user, project_id: @project.id).execute.opened.count)
 
     - if project_nav_tab? :merge_requests
       = nav_link(controller: :merge_requests) do
         = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
           %span
             Merge Requests
-            %span.badge.count.merge_counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
+            %span.badge.badge-dark.count.merge_counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
 
     - if project_nav_tab? :wiki
       = nav_link(controller: :wikis) do
diff --git a/changelogs/unreleased/badge-color-on-white-bg.yml b/changelogs/unreleased/badge-color-on-white-bg.yml
new file mode 100644
index 00000000000..680d7ff11f0
--- /dev/null
+++ b/changelogs/unreleased/badge-color-on-white-bg.yml
@@ -0,0 +1,4 @@
+---
+title: Added lighter count badge background-color for on white backgrounds
+merge_request: 7873
+author: