Bug 1551202 - Update <message-bar> to fully match Photon's style r=jaws
authorRob Wu <rob@robwu.nl>
Sat, 18 May 2019 12:28:55 +0000
changeset 474430 5dd4697aa1a177aa9f6e950c197b67893b142c1e
parent 474429 2519b62544a9dae3fb29c59294420498ca637f8f
child 474431 5142d8acf5e7a44966ddf03f08a4d03aac29ec7f
push id113153
push userapavel@mozilla.com
push dateSat, 18 May 2019 21:48:51 +0000
treeherdermozilla-inbound@e013f1f17109 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1551202
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
toolkit/mozapps/extensions/content/message-bar.css
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/shared/incontent-icons/info.svg
--- a/toolkit/mozapps/extensions/content/message-bar.css
+++ b/toolkit/mozapps/extensions/content/message-bar.css
@@ -4,36 +4,58 @@
   --check-icon-url: url("chrome://global/skin/icons/check.svg");
   --error-icon-url: url("chrome://global/skin/icons/error.svg");
   --close-icon-url: url("chrome://global/skin/icons/close.svg");
   --icon-size: 16px;
 }
 
 /* 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;
-  color: #003706;
+  background-color: var(--green-50);
+  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;
+
+  --message-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. */
 :host(:not([hidden])) {
   display: block;
 }
 
 .container {
@@ -91,42 +113,23 @@ button.close {
 /* MessageBar icon style */
 
 .icon {
   padding: 4px;
   width: var(--icon-size);
   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;
-}
-
-: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);
+  stroke: currentColor;
+  content: var(--message-bar-icon-url);
 }
 
 /* Close icon styles */
 
 :host(:not([dismissable])) button.close {
   display: none;
 }
 
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -67,22 +67,33 @@
   --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
   --grey-90: #0c0c0d;
   --grey-90-a10: rgba(12, 12, 13, 0.1);
   --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);
   --shadow-30: 0 4px 16px var(--grey-90-a10);
 
   --card-padding: 16px;
   --card-shadow: var(--shadow-10);
   --card-outline-color: var(--grey-30);
--- a/toolkit/themes/shared/incontent-icons/info.svg
+++ b/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">
-  <circle cx="50" cy="50" r="44" stroke="#424e5a" stroke-width="11" fill="none"/>
+<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="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>