Bug 1551202 - Update <message-bar> to fully match Photon's style r=jaws

- Update info.svg to adjust color based on the fill color.

- Use button colors as defined by Photon (without this, the background
  of the non-generic buttons are almost indistinguishable when dark
  themes are enabled).

- Small refactor of message-bar.css to put all type-specific
  declarations in one location.

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

--HG--
extra : moz-landing-system : lando

toolkit/mozapps/extensions/content/message-bar.css

@@ -9,26 +9,48 @@
 
 /* MessageBar colors by message type */
 /* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */
+
+:host {
+  /* Colors used by default, and for [type=generic] message bars.*/
+  background-color: var(--in-content-box-info-background);
+  color: var(--in-content-text-color);
+
+  --message-bar-icon-url: var(--info-icon-url);
+  /* The default values of --in-content-button* are sufficient, even for dark themes */
+}
+
 :host([type=warning]) {
   background-color: var(--yellow-50);
   color: var(--yellow-90);
+
+  --message-bar-icon-url: var(--warn-icon-url);
+  --in-content-button-background: var(--yellow-60);
+  --in-content-button-background-hover: var(--yellow-70);
+  --in-content-button-background-active: var(--yellow-80);
 }
 
 :host([type=success]) {
-  background-color: #30e60b;
+  background-color: var(--green-50);
-  color: #003706;
+  color: var(--green-90);
+
+  --message-bar-icon-url: var(--check-icon-url);
+  --in-content-button-background: var(--green-60);
+  --in-content-button-background-hover: var(--green-70);
+  --in-content-button-background-active: var(--green-80);
 }
 
 :host([type=error]) {
-  background: #d70022;
+  background-color: var(--red-60);
   color: #ffffff;
+
+  --messsage-bar-icon-url: var(--error-icon-url);
+  --in-content-button-background: var(--red-70);
+  --in-content-button-background-hover: var(--red-80);
+  --in-content-button-background-active: var(--red-90);
 }
 
 :host {
   border-radius: 4px;
-  /* Colors used by default, and for [type=generic] message bars.*/
-  background-color: var(--in-content-box-info-background);
-  color: var(--in-content-text-color);
 }
 
 /* Make the host to behave as a block by default, but allow hidden to hide it. */
@@ -96,32 +118,13 @@ button.close {
   height: var(--icon-size);
 }
 
-.icon {
+.icon::after {
   -moz-appearance: none;
-  -moz-context-properties: fill, fill-opacity;
+  -moz-context-properties: fill, stroke;
   color: inherit !important;
   fill: currentColor;
-  fill-opacity: 0;
+  stroke: currentColor;
-}
+  content: var(--message-bar-icon-url);
-
-:host([type=success]) .icon {
-  fill-opacity: 1;
-}
-
-:host(:not([type])) .icon::after, :host([type=generic]) .icon::after {
-  content: var(--info-icon-url);
-}
-
-:host([type=warning]) .icon::after {
-  content: var(--warn-icon-url);
-}
-
-:host([type=success]) .icon::after {
-  content: var(--check-icon-url);
-}
-
-:host([type=error]) .icon::after {
-  content: var(--error-icon-url);
 }
 
 /* Close icon styles */

toolkit/themes/shared/in-content/common.inc.css

@@ -72,12 +72,23 @@
   --grey-90-a20: rgba(12, 12, 13, 0.2);
   --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a50: rgba(12, 12, 13, 0.5);
+  --green-50: #30e60b;
+  --green-60: #12bc00;
+  --green-70: #058b00;
+  --green-80: #006504;
+  --green-90: #003706;
   --purple-70: #6200a4;
   --purple-70-a40: rgba(98, 0, 164, 0.4);
   --red-50: #ff0039;
   --red-50-a30: rgba(255, 0, 57, 0.3);
   --red-60: #d70022;
+  --red-70: #a4000f;
+  --red-80: #5a0002;
+  --red-90: #3e0200;
   --yellow-50: #ffe900;
+  --yellow-60: #d7b600;
+  --yellow-70: #a47f00;
+  --yellow-80: #715100;
   --yellow-90: #3e2800;
 
   --shadow-10: 0 1px 4px var(--grey-90-a10);

toolkit/themes/shared/incontent-icons/info.svg

@@ -1,8 +1,8 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#424e5a">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="context-fill #424e5a">
-  <circle cx="50" cy="50" r="44" stroke="#424e5a" stroke-width="11" fill="none"/>
+  <circle cx="50" cy="50" r="44" stroke="context-fill #424e5a" stroke-width="11" fill="none"/>
   <circle cx="50" cy="24.6" r="6.4"/>
   <rect x="45" y="39.9" width="10.1" height="41.8"/>
 </svg>