Merge pull request #19472 from calixteman/update_button_hover_color

Fix the color of the background button when hovering it

web/viewer.css

@@ -55,7 +55,7 @@
     inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25),
     0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
   --toolbarSidebar-border-bottom: none;
-  --button-hover-color: rgb(221 222 223);
+  --button-hover-color: color-mix(in srgb, currentColor 17%, transparent);
   --toggled-btn-color: rgb(0 0 0);
   --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
   --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
@@ -76,7 +76,6 @@
   --doorhanger-bg-color: rgb(255 255 255);
   --doorhanger-border-color: rgb(12 12 13 / 0.2);
   --doorhanger-hover-color: rgb(12 12 13);
-  --doorhanger-hover-bg-color: rgb(237 237 237);
   --doorhanger-separator-color: rgb(222 222 222);
   --dialog-button-border: none;
   --dialog-button-bg-color: rgb(12 12 13 / 0.1);
@@ -156,7 +155,6 @@
     --sidebar-toolbar-bg-color: rgb(50 50 52);
     --toolbar-bg-color: rgb(56 56 61);
     --toolbar-border-color: rgb(12 12 13);
-    --button-hover-color: rgb(102 102 103);
     --toggled-btn-color: rgb(255 255 255);
     --toggled-btn-bg-color: rgb(0 0 0 / 0.3);
     --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4);
@@ -172,10 +170,9 @@
     --treeitem-selected-bg-color: rgb(255 255 255 / 0.25);
     --thumbnail-hover-color: rgb(255 255 255 / 0.1);
     --thumbnail-selected-color: rgb(255 255 255 / 0.2);
-    --doorhanger-bg-color: rgb(74 74 79);
+    --doorhanger-bg-color: #42414d;
     --doorhanger-border-color: rgb(39 39 43);
     --doorhanger-hover-color: rgb(249 249 250);
-    --doorhanger-hover-bg-color: rgb(93 94 98);
     --doorhanger-separator-color: rgb(92 92 97);
     --dialog-button-bg-color: rgb(92 92 97);
     --dialog-button-hover-bg-color: rgb(115 115 115);
@@ -185,7 +182,6 @@
 @media screen and (forced-colors: active) {
   :root {
     --button-hover-color: Highlight;
-    --doorhanger-hover-bg-color: Highlight;
     --toolbar-icon-opacity: 1;
     --toolbar-icon-bg-color: ButtonText;
     --toolbar-icon-hover-bg-color: ButtonFace;
@@ -1076,7 +1072,6 @@ dialog :link {
     }
 
     &:is(:hover, :focus-visible) {
-      background-color: var(--doorhanger-hover-bg-color);
       color: var(--doorhanger-hover-color);
     }