Bug 1919035 - Make moz-button respect toolbar color change in chrome. r=reusable-components-reviewers,desktop-theme-reviewers,dao,hjones

In Bug 1902083, I added a span as a child of the button element in
moz-button. This new span allowed us to have a larger click area via
padding. The visual styles that were previously on the button element
were moved to the .button-background selector, the newly added span.
This caused the UA styles to set color to ButtonText on the button
element which was then inherited by the .button-background styles.

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

toolkit/content/widgets/moz-button/moz-button.css

@@ -13,8 +13,9 @@ button {
   background: transparent;
   border: none;
   /* HTML button gets `font: -moz-button` from UA styles,
-  * but we want it to match the root font styling. */
+   * but we want it to match the root font styling. */
   font: inherit;
+  color: var(--button-text-color);
   width: 100%;
 
   &:focus-visible {
@@ -30,7 +31,6 @@ button {
 .button-background {
   box-sizing: border-box;
   min-height: var(--button-min-height);
-  color: var(--button-text-color);
   border: var(--button-border);
   border-radius: var(--button-border-radius);
   background-color: var(--button-background-color);