Merge branch 'psi-emoji-picker-dark' into 'master'

Fix new emoji picker in dark mode

See merge request gitlab-org/gitlab!59616

app/assets/javascripts/emoji/components/category.vue

@@ -39,7 +39,7 @@ export default {
 
 <template>
   <gl-intersection-observer class="gl-px-5 gl-h-full" @appear="categoryAppeared">
-    <div class="gl-top-0 gl-py-3 gl-w-full emoji-picker-category-header">
+    <div class="gl-top-0 gl-py-3 gl-w-full gl-z-index-1 emoji-picker-category-header">
       <b>{{ categoryTitle }}</b>
     </div>
     <template v-if="emojis.length">

app/assets/javascripts/emoji/components/picker.vue

@@ -101,7 +101,7 @@ export default {
           v-for="(category, index) in categoryNames"
           :key="category.name"
           :class="{
-            'gl-text-black-normal! emoji-picker-category-active': index === currentCategory,
+            'gl-text-body! emoji-picker-category-active': index === currentCategory,
           }"
           type="button"
           class="gl-border-0 gl-border-b-2 gl-border-b-solid gl-flex-fill-1 gl-text-gray-300 gl-pt-3 gl-pb-3 gl-bg-transparent emoji-picker-category-tab"

app/assets/stylesheets/framework/variables.scss

@@ -82,7 +82,7 @@ $darken-border-dashed-factor: 25% !default;
 $white: #fff !default;
 $white-normal: #f0f0f0 !default;
 $white-dark: #eaeaea !default;
-$white-transparent: rgba(255, 255, 255, 0.8) !default;
+$white-transparent: rgba($white, 0.8) !default;
 
 $gray-lightest: #fdfdfd !default;
 $gray-light: #fafafa !default;