Bug 1546077 - Fix some background colors and a few other colors in about:addons for dark mode r=dao
authorKestrel <ke5trel@protonmail.com>
Wed, 01 May 2019 11:59:08 +0000
changeset 472610 1b3ddfeda3ba7c39df47f2d21f9bc3416d9d340f
parent 472609 e41e55098af85d1c8d0ddecd9e1bc1a16b4e9124
child 472611 ee580278f872fc2b68631da034d80a3dbf4eed2a
push id35969
push userccoroiu@mozilla.com
push dateMon, 06 May 2019 04:24:23 +0000
treeherdermozilla-central@f0566d1a9ab1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1546077
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 1546077 - Fix some background colors and a few other colors in about:addons for dark mode r=dao Differential Revision: https://phabricator.services.mozilla.com/D28328
toolkit/themes/shared/extensions/extensions.inc.css
toolkit/themes/shared/in-content/common.inc.css
--- a/toolkit/themes/shared/extensions/extensions.inc.css
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -356,16 +356,18 @@ button.warning {
   background-color: transparent;
 }
 
 .icon {
   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
   max-width: 24px;
   max-height: 24px;
   margin-inline-end: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 .content-inner-container {
   margin-inline-end: 5px;
 }
 
 .addon[active="false"] .icon {
   filter: grayscale(1);
@@ -570,32 +572,32 @@ button.warning {
 .addon-view[notification],
 .addon-view[pending] {
   --view-highlight-color: transparent;
   background-image: radial-gradient(at 50% 0%,
                                     var(--view-highlight-color) 0%,
                                     transparent 75%);
 }
 .addon-view[notification="warning"] {
-  --view-highlight-color: #F9F5E5;
+  --view-highlight-color: rgb(208, 176, 47, 0.1);
 }
 
 .addon-view[notification="error"] {
-  --view-highlight-color: #FFE8E9;
+  --view-highlight-color: rgb(255, 0, 13, 0.1);
 }
 
 .addon-view[pending="enable"],
 .addon-view[pending="upgrade"],
 .addon-view[pending="install"] {
-  --view-highlight-color: #EFFAF2;
+  --view-highlight-color: rgb(61, 194, 97, 0.1);
 }
 
 .addon-view[pending="disable"],
 .addon-view[pending="uninstall"] {
-  --view-highlight-color: #F2F2F2;
+  --view-highlight-color: rgb(128, 128, 128, 0.1);
 }
 
 .list > .addon[selected] {
   background-color: var(--in-content-box-background);
 }
 
 .list:focus > .addon[selected] {
   box-shadow: var(--card-shadow-focus);
@@ -615,17 +617,17 @@ button.warning {
 
 .list > .addon[status="uninstalled"] {
   border: none;
 }
 
 .addon[status="uninstalled"] > .container {
   -moz-box-align: center;
   padding: 4px 20px;
-  background-color: #FDFFA8;
+  background-color: rgb(255, 255, 0, 0.1);
   border-radius: 8px;
   font-size: 120%;
 }
 
 .addon[status="uninstalled"][selected] {
   background-color: transparent;
 }
 
@@ -810,17 +812,16 @@ button.warning {
 }
 
 .detail-row,
 .detail-row-complex {
   border-top: 1px solid var(--in-content-box-border-color);
   -moz-box-align: center;
   min-height: 35px;
   line-height: 20px;
-  text-shadow: 0 1px 1px #fefffe;
 }
 
 .inline-options-browser {
   margin-top: 2em;
 }
 
 .preferences-alignment {
   min-height: 30px;
@@ -844,17 +845,17 @@ button.warning {
 }
 
 .detail-row-footer > .preferences-description {
   margin-inline-start: 6px;
   margin-top: 0;
   margin-bottom: 0;
   /* card-width - card-padding - description-margins */
   width: calc(664px - 32px - 11px);
-  color: var(--grey-60);
+  color: var(--in-content-deemphasized-text);
 }
 
 /*** creator ***/
 
 .creator > label {
   margin-inline-start: 0;
   margin-inline-end: 0;
 }
@@ -1057,17 +1058,17 @@ button.button-link:not([disabled="true"]
 .addon[active="true"] .experiment-bullet,
 #detail-view[active="true"] #detail-experiment-bullet {
   fill: rgb(106, 201, 20);
 }
 
 /*** info UI for add-ons that have been disabled for being unsigned ***/
 
 #show-disabled-unsigned-extensions:not(:hover) {
-  background-color: #fcf8ed;
+  background-color: rgba(218, 170, 37, 0.05);
 }
 
 #disabled-unsigned-addons-info,
 #legacy-extensions-info {
   margin-bottom: 2em;
   margin-right: 48px;
   margin-left: 48px;
 }
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -12,16 +12,17 @@
   --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-a30);
+  --in-content-box-info-background: var(--grey-20);
   --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
   --in-content-item-selected: #0a84ff;
   --in-content-border-highlight: #0a84ff;
   --in-content-border-focus: #0a84ff;
   --in-content-border-hover: var(--grey-90-a50);
   --in-content-border-active: var(--blue-50);
   --in-content-border-active-shadow: var(--blue-50-a30);
   --in-content-border-invalid: var(--red-50);
@@ -95,16 +96,17 @@
     --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);
     --in-content-box-background-odd: rgba(249,249,250,0.05);
+    --in-content-box-info-background: rgba(249,249,250,0.15);
 
     --in-content-border-color: rgba(249,249,250,0.2);
     --in-content-border-hover: rgba(249,249,250,0.3);
     --in-content-box-border-color: rgba(249,249,250,0.2);
 
     --in-content-button-background: rgba(249,249,250,0.1);
     --in-content-button-background-hover: rgba(249,249,250,0.15);
     --in-content-button-background-active: rgba(249,249,250,0.2);
@@ -121,16 +123,18 @@
     --in-content-category-text-selected: var(--blue-40);
     --in-content-category-text-selected-active: var(--blue-50);
     --in-content-link-color: var(--blue-40);
     --in-content-link-color-hover: var(--blue-50);
     --in-content-link-color-active: var(--blue-60);
 
     --in-content-tab-color: var(--in-content-page-color);
 
+    --card-outline-color: var(--grey-60);
+
     scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
   }
 }
 }
 
 html|html,
 xul|page,
 xul|window {
@@ -849,19 +853,18 @@ xul|treechildren::-moz-tree-image {
 xul|treechildren::-moz-tree-cell-text(selected),
 xul|treechildren::-moz-tree-twisty(selected),
 xul|treechildren::-moz-tree-image(selected) {
   color: var(--in-content-selected-text);
 }
 
 /* Message bars */
 .message-bar {
-  background-color: var(--grey-20);
+  background-color: var(--in-content-box-info-background);
   border-radius: 4px;
-  color: var(--grey-90);
   min-height: 32px;
   -moz-box-align: center;
   padding: 4px;
 }
 
 .message-bar-description {
   margin: 2px 0;
   line-height: 1.25;