Merge branch '41404-pipelines-charts' into 'master'

Resolve "Pipeline graph uses inconsistent colors for its legend and its content"

Closes #41404

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

app/assets/javascripts/pipelines/pipelines_charts.js

@@ -6,16 +6,16 @@ document.addEventListener('DOMContentLoaded', () => {
     const data = {
       labels: chartScope.labels,
       datasets: [{
-        fillColor: '#7f8fa4',
-        strokeColor: '#7f8fa4',
-        pointColor: '#7f8fa4',
+        fillColor: '#707070',
+        strokeColor: '#707070',
+        pointColor: '#707070',
         pointStrokeColor: '#EEE',
         data: chartScope.totalValues,
       },
       {
-        fillColor: '#44aa22',
-        strokeColor: '#44aa22',
-        pointColor: '#44aa22',
+        fillColor: '#1aaa55',
+        strokeColor: '#1aaa55',
+        pointColor: '#1aaa55',
         pointStrokeColor: '#fff',
         data: chartScope.successValues,
       },

app/assets/stylesheets/pages/pipelines.scss

@@ -993,3 +993,11 @@ button.mini-pipeline-graph-dropdown-toggle {
   font-weight: $gl-font-weight-normal;
   line-height: 1.5;
 }
+
+.legend-all {
+  color: $gl-text-color-secondary;
+}
+
+.legend-success {
+  color: $green-500;
+}

app/views/projects/pipelines/charts/_pipelines.haml

@@ -4,11 +4,11 @@
 %h4= _("Pipelines charts")
 %p
    
-  %span.cgreen
+  %span.legend-success
     = icon("circle")
     = s_("Pipeline|success")
    
-  %span.cgray
+  %span.legend-all
     = icon("circle")
     = s_("Pipeline|all")