From 1e42cbbe91443cf76eac47cb2b6800f582128712 Mon Sep 17 00:00:00 2001
From: Ram <ramon@mozillafoundation.org>
Date: Mon, 10 Jun 2024 13:00:01 -0600
Subject: [PATCH] Fix Autocomplete Component styling with UI Colors for dark
 mode (#12443)

* Fix Reports/Block inventory autocomplete select fields dark mode contrast colors
Followed color variables of default UI controls as possible.

* Style input text inside autocomplete select component for dark mode to an accesibility-friendly contrast.

* Remove input element outline
---
 .../wagtailcustomization/static/css/admin.css | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/network-api/networkapi/wagtailcustomization/static/css/admin.css b/network-api/networkapi/wagtailcustomization/static/css/admin.css
index 6e27231ba54..3ec0319c307 100644
--- a/network-api/networkapi/wagtailcustomization/static/css/admin.css
+++ b/network-api/networkapi/wagtailcustomization/static/css/admin.css
@@ -58,3 +58,48 @@ fieldset ul li div label {
 .required .field > label::after {
   display: inline-block !important;
 }
+
+/* Fix select2 dropdown autocomplete input field low contrast color scheme on dark mode */
+@media (prefers-color-scheme: dark) {
+  #wagtail .select2 .select2-selection {
+    color: var(--w-color-text-context);
+    background-color: var(--w-color-surface-field);
+    border-color: var(--w-color-border-field-default);
+    border-radius: 0.3125rem;
+  }
+  #wagtail .select2-container .select2-results .select2-results__options {
+    background-color: var(--w-color-surface-field);
+  }
+  /* Hover/Focus; Important for accesibility */
+  #wagtail .select2 .select2-selection:hover,
+  #wagtail .select2 .select2-selection:focus {
+    border-color: var(--w-color-border-field-hover);
+  }
+  /* Options */
+  #wagtail .select2-container .select2-results .select2-results__option {
+    color: var(--w-color-text-context);
+    background-color: var(--w-color-surface-field);
+  }
+  /* Selected/hover option */
+  #wagtail
+    .select2-container
+    .select2-results
+    .select2-results__option--highlighted {
+    color: var(--w-color-text-label-menus-active);
+    background-color: var(--w-color-surface-button-default);
+  }
+  /* Input element */
+  #wagtail
+    .select2-container--default
+    .select2-search--inline
+    .select2-search__field {
+    color: var(--w-color-text-context);
+  }
+  /* Focus input outline */
+  #wagtail
+    .select2-container--default
+    .select2-search--inline
+    .select2-search__field:focus-visible {
+    outline: none !important;
+  }
+}