replace hard-coded colors for admin filters with variables

- fixes #7584

CHANGELOG.txt

@@ -72,6 +72,7 @@ Changelog
  * Fix: Switch widgets on/off states are now visually different for high-contrast mode users (Sakshi Uppoor)
  * Fix: Nested InlinePanel usage no longer fails to save when creating two or more items (Indresh P, Rinish Sam, Anirudh V S)
  * Fix: Changed relation name used for admin commenting from `comments` to `wagtail_admin_comments` to avoid conflicts with third-party commenting apps (Matt Westcott)
+ * Fix: CSS variables are now correctly used for the filtering menu in modeladmin (Noah H)
 
 
 2.14.2 (14.10.2021)

docs/releases/2.15.rst

@@ -97,6 +97,7 @@ Bug fixes
  * Switch widgets on/off states are now visually different for high-contrast mode users (Sakshi Uppoor)
  * Nested InlinePanel usage no longer fails to save when creating two or more items (Indresh P, Rinish Sam, Anirudh V S)
  * Changed relation name used for admin commenting from ``comments`` to ``wagtail_admin_comments`` to avoid conflicts with third-party commenting apps (Matt Westcott)
+ * CSS variables are now correctly used for the filtering menu in modeladmin (Noah H)
 
 Upgrade considerations
 ======================

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss

@@ -95,8 +95,8 @@
         vertical-align: middle;
         display: block;
         background-color: #fff;
-        border: 1px solid #43b1b0;
-        color: #43b1b0;
+        border: 1px solid $color-teal;
+        color: $color-teal;
         text-decoration: none;
         text-transform: uppercase;
         position: relative;
@@ -107,8 +107,8 @@
         -moz-appearance: none;
 
         &:hover {
-            background-color: #358c8b;
-            border-color: #358c8b;
+            background-color: $color-teal-dark;
+            border-color: $color-teal-dark;
             color: #fff;
         }
     }
@@ -117,8 +117,8 @@
         // stylelint-disable-next-line declaration-no-important
         color: #fff !important;
         // stylelint-disable-next-line declaration-no-important
-        border-color: #43b1b0 !important;
-        background-color: #43b1b0;
+        border-color: $color-teal !important;
+        background-color: $color-teal;
     }
 }