Adapt FilterNavigatorBar to High Contrast Mode.

src/components/app/ProfileFilterNavigator.css

@@ -21,6 +21,9 @@
   margin: 5px 5px 0;
   color: var(--internal-selected-color);
   content: '';
+
+  /* opt-out of forced color so the arrow is visible */
+  forced-color-adjust: none;
   inset-block-start: 4px;
   inset-inline-start: 4px;
 }
@@ -29,3 +32,13 @@ span.profileFilterNavigator--tab-selector::before {
   /* Disabled tab selector indicates this with a grayed out arrow. */
   color: var(--grey-30);
 }
+
+@media (forced-colors: active) {
+  .profileFilterNavigator--tab-selector::before {
+    color: currentcolor;
+  }
+
+  span.profileFilterNavigator--tab-selector::before {
+    color: GrayText;
+  }
+}

src/components/shared/FilterNavigatorBar.css

@@ -3,7 +3,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .filterNavigatorBar {
+  --internal-background-color: transparent;
+  --internal-hover-background-color: rgb(0 0 0 / 0.1);
+  --internal-hover-color: inherit;
+  --internal-active-background-color: rgb(0 0 0 / 0.2);
+  --internal-selected-background-color: transparent;
   --internal-selected-color: var(--selected-color, var(--blue-60));
+  --internal-separator-img: url(../../../res/img/svg/scope-bar-separator.svg);
 
   display: flex;
   height: 24px;
@@ -28,6 +34,11 @@
   border-width: 0 8px 0 6px;
   border-right-color: transparent !important;
   background-clip: padding-box;
+  background-color: var(--internal-background-color);
+
+  /* Make sur the design also works in High Contrast Mode. The colors are overriden
+     in the forced colors media query. */
+  forced-color-adjust: none;
   line-height: 24px;
   transition:
     opacity 250ms var(--animation-curve),
@@ -88,7 +99,7 @@
 
 .filterNavigatorBarItem:not(.filterNavigatorBarLeafItem)::after {
   animation: fadeIn 250ms var(--animation-curve);
-  background-image: url(../../../res/img/svg/scope-bar-separator.svg);
+  background-image: var(--internal-separator-img);
   background-position: -18px -12px;
   background-repeat: no-repeat;
   background-size: 24px 24px;
@@ -104,33 +115,48 @@
   }
 }
 
-.filterNavigatorBarSelectedItem {
+.filterNavigatorBarItem:not(
+    .filterNavigatorBarRootItem,
+    .filterNavigatorBarLeafItem
+  )::before,
+.filterNavigatorBarItem:not(.filterNavigatorBarLeafItem)::after {
+  border-color: var(--internal-background-color);
+}
+
+.filterNavigatorBarItem.filterNavigatorBarSelectedItem {
+  background-color: var(--internal-selected-background-color);
   color: var(--internal-selected-color);
 }
 
+.filterNavigatorBarSelectedItem:not(.filterNavigatorBarRootItem)::before,
+.filterNavigatorBarSelectedItem:not(:first-of-type:last-of-type)::after {
+  border-color: var(--internal-selected-background-color);
+}
+
 .filterNavigatorBarItem:not(.filterNavigatorBarLeafItem):hover,
 .filterNavigatorBarItem:has(button.profileFilterNavigator--tab-selector):hover {
-  background-color: rgb(0 0 0 / 0.1);
+  background-color: var(--internal-hover-background-color);
+  color: var(--internal-hover-color);
 }
 
 .filterNavigatorBarItem:not(
     .filterNavigatorBarRootItem,
     .filterNavigatorBarLeafItem
   ):hover::before,
 .filterNavigatorBarItem:not(.filterNavigatorBarLeafItem):hover::after {
-  border-color: rgb(0 0 0 / 0.1);
+  border-color: var(--internal-hover-background-color);
 }
 
 .filterNavigatorBarItem:not(.filterNavigatorBarLeafItem):active:hover {
-  background-color: rgb(0 0 0 / 0.2);
+  background-color: var(--internal-hover-background-color);
 }
 
 .filterNavigatorBarItem:not(
     .filterNavigatorBarRootItem,
     .filterNavigatorBarLeafItem
   ):active:hover::before,
 .filterNavigatorBarItem:not(.filterNavigatorBarLeafItem):active:hover::after {
-  border-color: rgb(0 0 0 / 0.2);
+  border-color: var(--internal-hover-background-color);
 }
 
 .filterNavigatorBarUncommittedItem {
@@ -176,3 +202,40 @@
     transition: none;
   }
 }
+
+@media (forced-colors: active) {
+  .filterNavigatorBar {
+    --internal-background-color: ButtonFace;
+    --internal-hover-background-color: SelectedItemText;
+    --internal-hover-color: SelectedItem;
+    --internal-active-background-color: SelectedItemText;
+    --internal-selected-background-color: SelectedItem;
+    --internal-selected-color: SelectedItemText;
+    --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-light.svg);
+  }
+
+  .filterNavigatorBarItem {
+    color: ButtonText;
+  }
+
+  /* When the tab selector is active, we want the item to look like a button */
+  .filterNavigatorBarSelectedItem:has(
+      button.profileFilterNavigator--tab-selector
+    ) {
+    background-color: ButtonFace;
+    color: ButtonText;
+  }
+
+  /* In regular mode, the opacity is tweaked, which isn't suited for High Contrast Mode.
+     Here we want the full opacity and a gray text */
+  .filterNavigatorBarUncommittedItem {
+    color: GrayText;
+    opacity: 1;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .filterNavigatorBar {
+      --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-dark.svg);
+    }
+  }
+}