tor-browser

commit 0ef154afb36c48a4e4a156412324ec76b6516886
parent 2d10d3bd480372091eb61c63ff4c198168eded75
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Fri, 17 Oct 2025 13:38:13 +0000

Bug 1994963 - [devtools] Make devtools standalone button nicer in dark mode. r=devtools-reviewers,jdescottes.

Set a proper border and tweak the --toolbarbutton-hover-(background|color) variables so we do get different
colors on hover with accessible contrast.

Depends on D269005

Differential Revision: https://phabricator.services.mozilla.com/D269020

Diffstat:
M
devtools/client/themes/common.css
 | 
9
++++++++-
M
devtools/client/themes/variables.css
 | 
4
++--

2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
@@ -416,8 +416,15 @@ iframe {
 .devtools-button.devtools-button-standalone {
   min-height: 28px;
   padding: 4px 6px;
-  border: 1px solid light-dark(rgba(138, 161, 180, 0.2), transparent);
+  border: 1px solid light-dark(rgba(138, 161, 180, 0.2), var(--grey-50));
   background: var(--toolbarbutton-background);
+  /* prettier-ignore */
+  color: light-dark(
+    var(--grey-70),
+    /* In dark mode, --grey-40 will only give us a AA contrast score, but --grey-30
+       is a bit too harsh, so we mix the color just enough to get a AAA score */
+    color-mix(in srgb, var(--grey-30) 70%, var(--grey-40))
+  );
 }
 
 /* Selectable button which is unchecked. */
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
@@ -160,8 +160,8 @@
 
   /* Toolbar buttons */
   --toolbarbutton-background: light-dark(var(--grey-10), var(--grey-70));
-  --toolbarbutton-hover-background: light-dark(var(--grey-20), var(--grey-70));
-  --toolbarbutton-hover-color: inherit;
+  --toolbarbutton-hover-background: light-dark(var(--grey-20), var(--grey-60));
+  --toolbarbutton-hover-color: light-dark(var(--grey-80), var(--grey-30));
   --toolbarbutton-checked-background: var(--toolbarbutton-hover-background);
   --toolbarbutton-checked-color: var(--theme-icon-checked-color);