Update performance bar background color to use the color variables

app/assets/javascripts/performance_bar/components/detailed_metric.vue

@@ -133,7 +133,7 @@ export default {
   >
     <gl-button v-gl-modal="modalId" class="gl-mr-2" type="button" variant="link">
       <span
-        class="gl-text-blue-300 gl-font-weight-bold"
+        class="gl-text-blue-200 gl-font-weight-bold"
         data-testid="performance-bar-details-label"
       >
         {{ metricDetailsLabel }}
@@ -208,7 +208,7 @@ export default {
         <div></div>
       </template>
     </gl-modal>
-    {{ title }}
+    <span class="gl-text-white">{{ title }}</span>
     <request-warning :html-id="htmlId" :warnings="warnings" />
   </div>
 </template>

app/assets/javascripts/performance_bar/components/performance_bar_app.vue

@@ -136,7 +136,7 @@ export default {
       <div id="peek-view-host" class="view">
         <span
           v-if="hasHost"
-          class="current-host"
+          class="current-host gl-text-white"
           :class="{ canary: currentRequest.details.host.canary }"
         >
           <span v-html="birdEmoji"></span>
@@ -157,16 +157,16 @@ export default {
         id="peek-view-trace"
         class="view"
       >
-        <a class="gl-text-blue-300" :href="currentRequest.details.tracing.tracing_url">{{
+        <a class="gl-text-blue-200" :href="currentRequest.details.tracing.tracing_url">{{
           s__('PerformanceBar|Trace')
         }}</a>
       </div>
       <div v-if="currentRequest.details" id="peek-download" class="view">
-        <a class="gl-text-blue-300" :download="downloadName" :href="downloadPath">{{
+        <a class="gl-text-blue-200" :download="downloadName" :href="downloadPath">{{
           s__('PerformanceBar|Download')
         }}</a>
       </div>
-      <a v-if="statsUrl" class="gl-text-blue-300 view" :href="statsUrl">{{
+      <a v-if="statsUrl" class="gl-text-blue-200 view" :href="statsUrl">{{
         s__('PerformanceBar|Stats')
       }}</a>
       <request-selector

app/assets/stylesheets/framework/variables.scss

@@ -842,10 +842,10 @@ $linked-project-column-margin: 60px;
 /*
 Performance Bar
 */
-$perf-bar-production: #222;
-$perf-bar-staging: #291430;
-$perf-bar-development: #4c1210;
-$perf-bar-bucket-bg: #111;
+$perf-bar-production: $gray-950;
+$perf-bar-staging: $indigo-950;
+$perf-bar-development: $red-950;
+$perf-bar-bucket-bg: $black;
 $perf-bar-bucket-box-shadow-from: rgba($white, 0.2);
 $perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
 $perf-bar-canary-text: $orange-400;

app/assets/stylesheets/performance_bar.scss

@@ -14,7 +14,7 @@
   color: $gray-300;
 
   select {
-    color: $gray-300;
+    color: $white;
     width: 200px;
   }
 

changelogs/unreleased/pb-bg-color.yml

+title: Update performance bar background color to use Pajamas compliant colour palette
+merge_request: 52775
+author: Yogi (@yo)
+type: changed