Bug 1551202 - Support dark theme at HTML about:addons r=jaws
authorRob Wu <rob@robwu.nl>
Sat, 18 May 2019 05:47:15 +0000
changeset 533263 2519b62544a9dae3fb29c59294420498ca637f8f
parent 533262 9fc0f690af5abfa8245d078f9c92099b3ca42bdf
child 533264 5dd4697aa1a177aa9f6e950c197b67893b142c1e
push id11276
push userrgurzau@mozilla.com
push dateMon, 20 May 2019 13:11:24 +0000
treeherdermozilla-beta@847755a7c325 [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 - Support dark theme at HTML about:addons r=jaws Most colors have been replaced with a variable that has the same color value. The exception is the border color at the add-on details. `--grey-90-a20` was replaced with `--in-content-box-border-color`, whose value is `--grey-90-a30`. This is close enough. Differential Revision: https://phabricator.services.mozilla.com/D31508
toolkit/mozapps/extensions/content/aboutaddons.css
toolkit/mozapps/extensions/content/abuse-report-panel.css
toolkit/mozapps/extensions/content/message-bar.css
toolkit/mozapps/extensions/content/panel-item.css
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -211,26 +211,26 @@ recommended-addon-card .addon-descriptio
   margin-top: 30px;
 }
 
 .discopane-privacy-policy-link {
   font-size: small;
 }
 
 addon-details {
-  color: var(--grey-60);
+  color: var(--in-content-deemphasized-text);
 }
 
 .addon-detail-description {
   margin: 16px 0;
 }
 
 .addon-detail-contribute {
   padding: var(--card-padding);
-  border: 1px solid var(--grey-90-a20);
+  border: 1px solid var(--in-content-box-border-color);
   border-radius: var(--panel-border-radius);
   margin-bottom: var(--card-padding);
   display: flex;
   flex-direction: column;
 }
 
 .addon-detail-contribute > label {
   font-style: italic;
@@ -247,25 +247,25 @@ addon-details {
   margin-bottom: 0;
   align-self: flex-end;
 }
 
 .addon-detail-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-top: 1px solid var(--grey-90-a20);
+  border-top: 1px solid var(--in-content-box-border-color);
   margin: 0 calc(var(--card-padding) * -1);
   padding: var(--card-padding);
-  color: var(--grey-90);
+  color: var(--in-content-text-color);
 }
 
 .addon-detail-row.addon-detail-help-row {
   display: block;
-  color: var(--grey-60);
+  color: var(--in-content-deemphasized-text);
   padding-top: 4px;
   padding-bottom: var(--card-padding);
   border: none;
 }
 
 .addon-detail-row-has-help,
 .addon-detail-row:last-of-type {
   padding-bottom: 0;
--- a/toolkit/mozapps/extensions/content/abuse-report-panel.css
+++ b/toolkit/mozapps/extensions/content/abuse-report-panel.css
@@ -26,17 +26,17 @@
 
 /* Ensure that the document (embedded in the XUL about:addons using a
    XUL browser) has a transparent background */
 html {
   background-color: transparent;
 }
 
 .modal-overlay-outer {
-  background: rgba(12, 12, 13, 0.6);
+  background: var(--grey-90-a60);
   width: 100%;
   height: 100%;
   position: fixed;
   z-index: -1;
 }
 
 .modal-panel-container {
   padding-top: var(--modal-panel-margin-top);
@@ -97,17 +97,17 @@ button.abuse-report-close-icon:hover:act
 }
 
 .abuse-report-contents,
 .abuse-report-contents > hr {
   width: 100%;
 }
 
 .abuse-report-note {
-  color: var(--grey-50);
+  color: var(--in-content-deemphasized-text);
   font-size: var(--note-font-size);
   font-weight: var(--note-font-weight);
   line-height: var(--line-height);
 }
 
 .abuse-report-subtitle {
   font-size: var(--subtitle-font-size);
   font-weight: var(--subtitle-font-weight);
--- a/toolkit/mozapps/extensions/content/message-bar.css
+++ b/toolkit/mozapps/extensions/content/message-bar.css
@@ -3,17 +3,17 @@
   --warn-icon-url: url("chrome://global/skin/icons/warning.svg");
   --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([type=warning]) {
   background-color: var(--yellow-50);
   color: var(--yellow-90);
 }
 
 :host([type=success]) {
   background-color: #30e60b;
   color: #003706;
@@ -22,18 +22,18 @@
 :host([type=error]) {
   background: #d70022;
   color: #ffffff;
 }
 
 :host {
   border-radius: 4px;
   /* Colors used by default, and for [type=generic] message bars.*/
-  background-color: var(--grey-20);
-  color: var(--grey-90);
+  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 {
--- a/toolkit/mozapps/extensions/content/panel-item.css
+++ b/toolkit/mozapps/extensions/content/panel-item.css
@@ -1,10 +1,11 @@
 button {
   background-color: transparent;
+  color: inherit;
   background-image: var(--icon);
   background-position: 16px center;
   background-repeat: no-repeat;
   background-size: 16px;
   border: none;
   position: relative;
   display: block;
   font-size: inherit;