Merge branch '330702-pb-in-dark' into 'master'

Overhaul CSS in performance bar in Dark mode v1

See merge request gitlab-org/gitlab!61552

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

@@ -214,7 +214,7 @@ export default {
         <div></div>
       </template>
     </gl-modal>
-    <span class="gl-text-white">{{ title }}</span>
+    {{ title }}
     <request-warning :html-id="htmlId" :warnings="warnings" />
   </div>
 </template>

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

@@ -141,7 +141,7 @@ export default {
       <div id="peek-view-host" class="view">
         <span
           v-if="hasHost"
-          class="current-host gl-text-white"
+          class="current-host"
           :class="{ canary: currentRequest.details.host.canary }"
         >
           <span v-html="birdEmoji"></span>

app/assets/stylesheets/performance_bar.scss

@@ -11,47 +11,40 @@
   height: $performance-bar-height;
   background: $black;
   line-height: $performance-bar-height;
-  color: $gray-300;
+  color: $gray-100;
 
   select {
-    color: $white;
     width: 200px;
   }
 
   input {
-    color: $gray-300;
     width: $input-short-width - 60px;
   }
 
+  select,
+  input {
+    color: inherit;
+    background-color: inherit;
+  }
+
+  option {
+    color: initial;
+  }
+
   &.disabled {
     display: none;
   }
 
   &.production {
     background-color: $perf-bar-production;
-
-    select,
-    input {
-      background: $perf-bar-production;
-    }
   }
 
   &.staging {
     background-color: $perf-bar-staging;
-
-    select,
-    input {
-      background: $perf-bar-staging;
-    }
   }
 
   &.development {
     background-color: $perf-bar-development;
-
-    select,
-    input {
-      background: $perf-bar-development;
-    }
   }
 
   // UI Elements
@@ -61,7 +54,6 @@
     padding: 4px 6px;
     font-family: Consolas, 'Liberation Mono', Courier, monospace;
     line-height: 1;
-    color: $gray-100;
     border-radius: 3px;
     box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
       inset 0 1px 2px $perf-bar-bucket-box-shadow-to;