From bbd30d23000411456299cd1f3721de688c12588e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Tue, 13 Feb 2024 01:03:11 +0000
Subject: [PATCH] Bug 1879415 - Fix translation locale background. r=gregtatum

Using a background for text color is not great.

Provide a text color to draw on top of the toolbarbutton-icon-attention
color.

Differential Revision: https://phabricator.services.mozilla.com/D201202
---
 browser/themes/shared/browser-custom-colors.css | 1 +
 browser/themes/shared/toolbarbutton-icons.css   | 7 +++++--
 browser/themes/shared/urlbar-searchbar.css      | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/browser/themes/shared/browser-custom-colors.css b/browser/themes/shared/browser-custom-colors.css
index 9f6a15185a7f..d98d56690f8e 100644
--- a/browser/themes/shared/browser-custom-colors.css
+++ b/browser/themes/shared/browser-custom-colors.css
@@ -65,6 +65,7 @@
 
     --toolbarbutton-icon-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
     --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
+    --toolbarbutton-icon-fill-attention-text: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
 
     --toolbar-field-border-color: transparent;
     --toolbar-field-background-color: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
diff --git a/browser/themes/shared/toolbarbutton-icons.css b/browser/themes/shared/toolbarbutton-icons.css
index 7c7b7ce8457f..acbc0e963086 100644
--- a/browser/themes/shared/toolbarbutton-icons.css
+++ b/browser/themes/shared/toolbarbutton-icons.css
@@ -2,15 +2,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@namespace html url("http://www.w3.org/1999/xhtml");
-
 :root {
   --toolbarbutton-icon-fill-attention: AccentColor;
+  --toolbarbutton-icon-fill-attention-text: AccentColorText;
   --warning-icon-bgcolor: light-dark(#FFA436, #FFBD4F);
 }
 
 :root:-moz-lwtheme {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, light-dark(rgb(0, 97, 224), rgb(0, 221, 255)));
+  /* FIXME(emilio): This could have poor contrast on some themes, maybe use
+   * contrast-color() once that's available, or compute a new variable in
+   * LightWeightThemeConsumer */
+  --toolbarbutton-icon-fill-attention-text: var(--toolbar-field-background-color);
 }
 
 .toolbarbutton-animatable-box,
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
index 28cc0702118e..9fc88fbde80a 100644
--- a/browser/themes/shared/urlbar-searchbar.css
+++ b/browser/themes/shared/urlbar-searchbar.css
@@ -629,7 +629,7 @@
   to { transform: rotate(360deg); }
 }
 
-@media (prefers-reduced-motion: no-preference) {
+@media not (prefers-reduced-motion) {
   #translations-button-circle-arrows {
     animation: translationsRotate 1.2s linear infinite;
   }
@@ -658,7 +658,7 @@
 
 #translations-button-locale {
   background-color: var(--toolbarbutton-icon-fill-attention);
-  color: var(--toolbar-field-background-color);
+  color: var(--toolbarbutton-icon-fill-attention-text);
   border-radius: 4px;
   font-size: 0.8em;
   height: 20px;