Bug 1544111 - Fix contrast of various elements in HTML about:addons in dark mode. r=dao

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

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

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -53,6 +53,8 @@ addon-list .addon.card {
   width: var(--addon-icon-size);
   height: var(--addon-icon-size);
   margin-inline-end: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .card-contents {
@@ -68,7 +70,6 @@ addon-list .addon.card {
 .addon-name {
   font-size: 16px;
   font-weight: 600;
-  color: var(--grey-90);
   line-height: 22px;
   /* Subtract the top line-height so the text and icon align at the top. */
   margin-top: -3px;
@@ -77,7 +78,7 @@ addon-list .addon.card {
 .addon-description {
   font-size: 14px;
   line-height: 20px;
-  color: var(--grey-60);
+  color: var(--in-content-deemphasized-text);
   font-weight: 400;
 }
 
@@ -103,10 +104,6 @@ addon-card:not([expanded]) .addon-description {
   margin-inline-end: -8px;
 }
 
-addon-details {
-  color: var(--grey-60);
-}
-
 .addon-detail-description {
   margin: 16px 0;
 }
@@ -194,6 +191,8 @@ button[action="more-options"] {
   width: 24px;
   height: 24px;
   margin: 0;
+  -moz-context-properties: fill;
+  fill: currentColor;
   background: url("chrome://global/skin/icons/more.svg") no-repeat center center;
 }
 
@@ -206,7 +205,7 @@ panel-item[action="remove"] {
 panel-item-separator {
   display: block;
   height: 1px;
-  background: var(--panel-border-color);
+  background: var(--in-content-box-border-color);
   padding: 0;
   margin: 6px 0;
 }

toolkit/mozapps/extensions/content/panel-item.css

@@ -1,4 +1,5 @@
 button {
+  color: inherit;
   background-color: transparent;
   background-image: var(--icon);
   background-position: 16px center;

toolkit/mozapps/extensions/content/panel-list.css

@@ -9,7 +9,7 @@
 :host {
   position: absolute;
   background: var(--in-content-box-background);
-  border: 1px solid var(--panel-border-color);
+  border: 1px solid var(--in-content-box-border-color);
   border-radius: var(--panel-border-radius);
   padding: 6px 0;
   margin-bottom: 16px;
@@ -44,7 +44,7 @@
   width: 18px;
   height: 9px;
   -moz-context-properties: fill, stroke;
-  stroke: var(--panel-border-color);
+  stroke: var(--in-content-box-border-color);
   fill: var(--in-content-box-background);
   background: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
   position: absolute;

toolkit/mozapps/extensions/content/shortcuts.css

@@ -20,6 +20,8 @@
   width: 24px;
   height: 24px;
   margin-inline-end: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .card-heading {

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

@@ -10,12 +10,13 @@
   --in-content-page-color: #0c0c0d;
   --in-content-page-background: #f9f9fa;
   --in-content-text-color: var(--grey-90);
+  --in-content-deemphasized-text: var(--grey-60);
   --in-content-selected-text: #fff;
   --in-content-box-background: #fff;
   --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
   --in-content-box-background-hover: #ededf0; /* grey 20 */
   --in-content-box-background-active: #d7d7db; /* grey 30 */
-  --in-content-box-border-color: var(--grey-90-a40);
+  --in-content-box-border-color: var(--grey-90-a30);
   --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #0a84ff;
@@ -48,7 +49,6 @@
   --in-content-table-border-dark-color: #d1d1d1;
   --in-content-table-header-background: #0a84ff;
 
-  --panel-border-color: var(--grey-90-a20);
   --panel-border-radius: 2px; /* This is overridden on Windows */
 
   /* The photon animation curve */
@@ -63,6 +63,7 @@
   --blue-80: #002275;
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
+  --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
   --grey-90: #0c0c0d;
@@ -95,6 +96,7 @@
     --in-content-page-background: #2A2A2E;
     --in-content-page-color: rgb(249, 249, 250);
     --in-content-text-color: var(--in-content-page-color);
+    --in-content-deemphasized-text: var(--grey-40);
     --in-content-box-background: #202023;
     --in-content-box-background-hover: rgba(249,249,250,0.15);
     --in-content-box-background-active: rgba(249,249,250,0.2);