Darken gray icons in pipeline status icon

This fix darkens inaccessible pipeline status icon colors in MR widget
and mini-pipeline graph.

It also fixes inconsistency between preparing and created statuses.

app/assets/stylesheets/framework/icons.scss

@@ -33,16 +33,6 @@
   }
 }
 
-.ci-status-icon-preparing {
-  svg {
-    fill: $gray-300;
-  }
-
-  &.add-border {
-    @include borderless-status-icon($gray-300);
-  }
-}
-
 .ci-status-icon-running {
   svg {
     fill: $blue-400;
@@ -64,15 +54,16 @@
   }
 }
 
+.ci-status-icon-preparing,
 .ci-status-icon-created,
 .ci-status-icon-skipped,
 .ci-status-icon-notfound {
   svg {
-    fill: $gray-darkest;
+    fill: var(--gray-400, $gray-400);
   }
 
   &.add-border {
-    @include borderless-status-icon($gray-darkest);
+    @include borderless-status-icon(var(--gray-400, $gray-400));
   }
 }
 

app/assets/stylesheets/page_bundles/_pipeline_mixins.scss

@@ -98,7 +98,6 @@
     @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
   }
 
-  &.ci-status-icon-preparing,
   &.ci-status-icon-running {
     @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
   }
@@ -106,14 +105,15 @@
   &.ci-status-icon-canceled,
   &.ci-status-icon-scheduled,
   &.ci-status-icon-disabled,
-  &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
     @include mini-pipeline-graph-color(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black);
   }
 
+  &.ci-status-icon-preparing,
   &.ci-status-icon-created,
+  &.ci-status-icon-not-found,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
+    @include mini-pipeline-graph-color(var(--white, $white), var(--gray-100, $gray-100), var(--gray-200, $gray-200), var(--gray-400, $gray-400), var(--gray-500, $gray-500), var(--gray-600, $gray-600));
   }
 }
 

changelogs/unreleased/283897-fix-inaccessible-pipeline-status-icon-colors-in-mr-widget.yml

+---
+title: Improve accessibility of gray color CI status icons
+merge_request: 52356
+author:
+type: changed