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

@@ -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));

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,

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;