Replace $gray-300 value, replace usages with $gray-200

app/assets/stylesheets/components/dashboard_skeleton.scss

@@ -33,7 +33,7 @@
     height: $gl-padding-32;
 
     &-arrow {
-      color: $gray-300;
+      color: $gray-200;
     }
 
     &-downstream {

app/assets/stylesheets/framework/stacked_progress_bar.scss

@@ -40,7 +40,7 @@
     color: $gl-gray-dark;
 
     &:hover {
-      background-color: $gray-300;
+      background-color: $gray-200;
     }
   }
 

app/assets/stylesheets/framework/typography.scss

@@ -187,7 +187,7 @@
 
     tr {
       th {
-        border-bottom: solid 2px $gray-300;
+        border-bottom: solid 2px $gray-200;
       }
     }
 

app/assets/stylesheets/framework/variables.scss

@@ -165,7 +165,7 @@ $gray-10: #fafafa !default;
 $gray-50: #f0f0f0 !default;
 $gray-100: #dbdbdb !default;
 $gray-200: #bfbfbf !default;
-$gray-300: #ccc !default;
+$gray-300: #999 !default;
 $gray-400: #bababa !default;
 $gray-500: #a7a7a7 !default;
 $gray-600: #919191 !default;

app/assets/stylesheets/pages/pipelines.scss

@@ -809,7 +809,7 @@
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color($white, $gray-100, $gray-300, $gray-500, $gray-600, $gray-700);
+    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-500, $gray-600, $gray-700);
   }
 }
 

ee/app/assets/stylesheets/components/deployment_instance.scss

@@ -48,7 +48,7 @@
   }
 
   &-pending {
-    background-color: $gray-300;
+    background-color: $gray-200;
     border-color: $gray-700;
 
     &.link:hover {

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

@@ -237,7 +237,7 @@
 
     .carousel-indicators {
       li {
-        background-color: $gray-300;
+        background-color: $gray-200;
         width: 8px;
         height: 8px;
         border-radius: 100%;

ee/changelogs/unreleased/224118-replace-gray-300-value-replace-usages-with-gray-200-2.yml

+---
+title: Replace $gray-300 hex value, remap usages to $gray-200
+merge_request: 37586
+author:
+type: other