From a55a32d7a6a37d65477de3b098bc3d98456bc984 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Thu, 25 Apr 2019 13:29:15 +0000 Subject: [PATCH] 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 | 13 ++++++------- toolkit/mozapps/extensions/content/panel-item.css | 1 + toolkit/mozapps/extensions/content/panel-list.css | 4 ++-- toolkit/mozapps/extensions/content/shortcuts.css | 2 ++ toolkit/themes/shared/in-content/common.inc.css | 6 ++++-- 5 files changed, 15 insertions(+), 11 deletions(-) diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css index ad6b4fec73e6..7c386829ea97 100644 --- a/toolkit/mozapps/extensions/content/aboutaddons.css +++ b/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; } diff --git a/toolkit/mozapps/extensions/content/panel-item.css b/toolkit/mozapps/extensions/content/panel-item.css index 4adced1eb94a..d5817b99c2f8 100644 --- a/toolkit/mozapps/extensions/content/panel-item.css +++ b/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; diff --git a/toolkit/mozapps/extensions/content/panel-list.css b/toolkit/mozapps/extensions/content/panel-list.css index d15c66361115..49065fe36ec3 100644 --- a/toolkit/mozapps/extensions/content/panel-list.css +++ b/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; diff --git a/toolkit/mozapps/extensions/content/shortcuts.css b/toolkit/mozapps/extensions/content/shortcuts.css index af47ce82f328..4ddc27935bad 100644 --- a/toolkit/mozapps/extensions/content/shortcuts.css +++ b/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 { diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css index c84ffd81e16b..9fc3cf150c98 100644 --- a/toolkit/themes/shared/in-content/common.inc.css +++ b/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);