Revert "Upstream 20240517"

app/javascript/styles/mastodon/emoji_picker.scss

@@ -1,6 +1,7 @@
 .emoji-mart {
   font-size: 13px;
   display: inline-block;
+  color: $inverted-text-color;
 
   &,
   * {
@@ -14,8 +15,20 @@
 }
 
 .emoji-mart-bar {
+  border: 0 solid darken($ui-secondary-color, 8%);
+
   &:first-child {
-    background: var(--dropdown-border-color);
+    border-bottom-width: 1px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    background: $ui-secondary-color;
+  }
+
+  &:last-child {
+    border-top-width: 1px;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    display: none;
   }
 }
 
@@ -23,6 +36,7 @@
   display: flex;
   justify-content: space-between;
   padding: 0 6px;
+  color: $lighter-text-color;
   line-height: 0;
 }
 
@@ -36,10 +50,9 @@
   cursor: pointer;
   background: transparent;
   border: 0;
-  color: $darker-text-color;
 
   &:hover {
-    color: lighten($darker-text-color, 4%);
+    color: darken($lighter-text-color, 4%);
   }
 }
 
@@ -47,7 +60,7 @@
   color: $highlight-text-color;
 
   &:hover {
-    color: lighten($highlight-text-color, 4%);
+    color: darken($highlight-text-color, 4%);
   }
 
   .emoji-mart-anchor-bar {
@@ -82,6 +95,7 @@
   height: 270px;
   max-height: 35vh;
   padding: 0 6px 6px;
+  background: $simple-background-color;
   will-change: transform;
 
   &::-webkit-scrollbar-track:hover,
@@ -93,6 +107,7 @@
 .emoji-mart-search {
   padding: 10px;
   padding-inline-end: 45px;
+  background: $simple-background-color;
   position: relative;
 
   input {
@@ -103,20 +118,19 @@
     font-family: inherit;
     display: block;
     width: 100%;
-    background: $ui-base-color;
-    color: $darker-text-color;
-    border: 1px solid lighten($ui-base-color, 8%);
+    background: rgba($ui-secondary-color, 0.3);
+    color: $inverted-text-color;
+    border: 1px solid $ui-secondary-color;
     border-radius: 4px;
 
     &::-moz-focus-inner {
       border: 0;
     }
 
-    &:active,
-    &:focus {
-      outline: none !important;
-      border-width: 1px !important;
-      border-color: $ui-button-background-color;
+    &::-moz-focus-inner,
+    &:focus,
+    &:active {
+      outline: 0 !important;
     }
 
     &::-webkit-search-cancel-button {
@@ -141,21 +155,17 @@
   &:disabled {
     cursor: default;
     pointer-events: none;
+    opacity: 0.3;
   }
 
   svg {
-    fill: $darker-text-color;
+    fill: $action-button-color;
   }
 }
 
 .emoji-mart-category .emoji-mart-emoji {
   cursor: pointer;
 
-  &.emoji-mart-emoji-custom img {
-    width: auto !important;
-    min-width: 22px;
-  }
-
   span {
     z-index: 1;
     position: relative;
@@ -170,7 +180,7 @@
     inset-inline-start: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--dropdown-border-color);
+    background-color: rgba($ui-secondary-color, 0.7);
     border-radius: 100%;
   }
 }
@@ -187,6 +197,7 @@
     width: 100%;
     font-weight: 500;
     padding: 5px 6px;
+    background: $simple-background-color;
   }
 }
 
@@ -230,7 +241,7 @@
 
 .emoji-mart-no-results {
   font-size: 14px;
-  color: $dark-text-color;
+  color: $light-text-color;
   text-align: center;
   padding: 5px 6px;
   padding-top: 70px;