From 58c8548d6574626f958e3487c945d682f05d63d9 Mon Sep 17 00:00:00 2001 From: Ed Lee Date: Sat, 17 Apr 2021 13:13:57 +0000 Subject: [PATCH] Bug 1705511 - Copy over in-content colors for new tab defaults and themes setting new tab colors r=thecount,jaws Use the values from common.inc.css both light and dark. The theme values will override the page defaults, but not all themes use ntp_. Differential Revision: https://phabricator.services.mozilla.com/D112410 --- browser/components/newtab/content-src/styles/_theme.scss | 8 ++++---- .../components/newtab/content-src/styles/_variables.scss | 6 ++++++ browser/components/newtab/css/activity-stream-linux.css | 8 ++++---- browser/components/newtab/css/activity-stream-mac.css | 8 ++++---- browser/components/newtab/css/activity-stream-windows.css | 8 ++++---- browser/themes/addons/dark/manifest.json | 4 ++-- browser/themes/addons/light/manifest.json | 4 ++-- .../browser/browser_ext_themes_ntp_colors_perwindow.js | 4 ++-- toolkit/mozapps/extensions/default-theme/manifest.json | 4 ++-- 9 files changed, 30 insertions(+), 24 deletions(-) diff --git a/browser/components/newtab/content-src/styles/_theme.scss b/browser/components/newtab/content-src/styles/_theme.scss index 29e313873e32..1a0a3215a7b0 100644 --- a/browser/components/newtab/content-src/styles/_theme.scss +++ b/browser/components/newtab/content-src/styles/_theme.scss @@ -23,7 +23,7 @@ $shadow-secondary: 0 1px 4px 0 $grey-90-20; // Default theme body { // General styles - --newtab-background-color: #{$grey-10}; + --newtab-background-color: #{$in-content-page-background}; --newtab-border-primary-color: #{$grey-40}; --newtab-border-secondary-color: #{$grey-30}; --newtab-element-active-color: #{$grey-30-60}; @@ -38,7 +38,7 @@ body { --newtab-link-primary-color: #{$blue-60}; --newtab-link-secondary-color: #{$teal-70}; --newtab-text-conditional-color: #{$grey-60}; - --newtab-text-primary-color: #{$grey-90}; + --newtab-text-primary-color: #{$in-content-page-color}; --newtab-text-secondary-color: #{$grey-50}; --newtab-textbox-background-color: #{$white}; --newtab-textbox-border: #{$grey-90-20}; @@ -128,7 +128,7 @@ body { &[lwt-newtab-brighttext] { // General styles - --newtab-background-color: #{$grey-80}; + --newtab-background-color: #{$in-content-page-background-dark}; --newtab-border-primary-color: #{$grey-10-80}; --newtab-border-secondary-color: #{$grey-10-10}; --newtab-button-primary-color: #{$blue-60}; @@ -144,7 +144,7 @@ body { --newtab-link-primary-color: #{$blue-40}; --newtab-link-secondary-color: #{$pocket-teal}; --newtab-text-conditional-color: #{$grey-10}; - --newtab-text-primary-color: #{$grey-10}; + --newtab-text-primary-color: #{$in-content-page-color-dark}; --newtab-text-secondary-color: #{$grey-10-80}; --newtab-textbox-background-color: #{$grey-70}; --newtab-textbox-border: #{$grey-10-20}; diff --git a/browser/components/newtab/content-src/styles/_variables.scss b/browser/components/newtab/content-src/styles/_variables.scss index b43b9fe9248a..3438118fac6b 100644 --- a/browser/components/newtab/content-src/styles/_variables.scss +++ b/browser/components/newtab/content-src/styles/_variables.scss @@ -102,6 +102,12 @@ $newtab-background-primary-text-color: #151515; $newtab-background-darktheme-primary-text-color: #CDCDD4; $newtab-wordmark-default-color: #20123A; +// Matching proton in-content colors +$in-content-page-color: rgb(21, 20, 26); +$in-content-page-color-dark: rgb(251, 251, 254); +$in-content-page-background: $white; +$in-content-page-background-dark: rgb(28, 27, 34); + $newtab-card-primary-text-color: #20123A; $newtab-card-darktheme-primary-text-color: #E0E0E6; $newtab-card-line-color: #716F87; diff --git a/browser/components/newtab/css/activity-stream-linux.css b/browser/components/newtab/css/activity-stream-linux.css index bc5edf60cbf6..efafd2c6ffbb 100644 --- a/browser/components/newtab/css/activity-stream-linux.css +++ b/browser/components/newtab/css/activity-stream-linux.css @@ -28,7 +28,7 @@ input { display: none !important; } body { - --newtab-background-color: #F9F9FA; + --newtab-background-color: #FFF; --newtab-border-primary-color: #B1B1B3; --newtab-border-secondary-color: #D7D7DB; --newtab-element-active-color: rgba(215, 215, 219, 0.6); @@ -42,7 +42,7 @@ body { --newtab-link-primary-color: #0060DF; --newtab-link-secondary-color: #008EA4; --newtab-text-conditional-color: #4A4A4F; - --newtab-text-primary-color: #0C0C0D; + --newtab-text-primary-color: #15141a; --newtab-text-secondary-color: #737373; --newtab-textbox-background-color: #FFF; --newtab-textbox-border: rgba(12, 12, 13, 0.2); @@ -109,7 +109,7 @@ body { --newtab-card-second-shadow: rgba(29, 17, 51, 0.12); --newtab-wordmark-color: #20123A; } body[lwt-newtab-brighttext] { - --newtab-background-color: #2A2A2E; + --newtab-background-color: #1c1b22; --newtab-border-primary-color: rgba(249, 249, 250, 0.8); --newtab-border-secondary-color: rgba(249, 249, 250, 0.1); --newtab-button-primary-color: #0060DF; @@ -125,7 +125,7 @@ body { --newtab-link-primary-color: #45A1FF; --newtab-link-secondary-color: #50BCB6; --newtab-text-conditional-color: #F9F9FA; - --newtab-text-primary-color: #F9F9FA; + --newtab-text-primary-color: #fbfbfe; --newtab-text-secondary-color: rgba(249, 249, 250, 0.8); --newtab-textbox-background-color: #38383D; --newtab-textbox-border: rgba(249, 249, 250, 0.2); diff --git a/browser/components/newtab/css/activity-stream-mac.css b/browser/components/newtab/css/activity-stream-mac.css index 41ff8b1baf00..720a80461a84 100644 --- a/browser/components/newtab/css/activity-stream-mac.css +++ b/browser/components/newtab/css/activity-stream-mac.css @@ -31,7 +31,7 @@ input { display: none !important; } body { - --newtab-background-color: #F9F9FA; + --newtab-background-color: #FFF; --newtab-border-primary-color: #B1B1B3; --newtab-border-secondary-color: #D7D7DB; --newtab-element-active-color: rgba(215, 215, 219, 0.6); @@ -45,7 +45,7 @@ body { --newtab-link-primary-color: #0060DF; --newtab-link-secondary-color: #008EA4; --newtab-text-conditional-color: #4A4A4F; - --newtab-text-primary-color: #0C0C0D; + --newtab-text-primary-color: #15141a; --newtab-text-secondary-color: #737373; --newtab-textbox-background-color: #FFF; --newtab-textbox-border: rgba(12, 12, 13, 0.2); @@ -112,7 +112,7 @@ body { --newtab-card-second-shadow: rgba(29, 17, 51, 0.12); --newtab-wordmark-color: #20123A; } body[lwt-newtab-brighttext] { - --newtab-background-color: #2A2A2E; + --newtab-background-color: #1c1b22; --newtab-border-primary-color: rgba(249, 249, 250, 0.8); --newtab-border-secondary-color: rgba(249, 249, 250, 0.1); --newtab-button-primary-color: #0060DF; @@ -128,7 +128,7 @@ body { --newtab-link-primary-color: #45A1FF; --newtab-link-secondary-color: #50BCB6; --newtab-text-conditional-color: #F9F9FA; - --newtab-text-primary-color: #F9F9FA; + --newtab-text-primary-color: #fbfbfe; --newtab-text-secondary-color: rgba(249, 249, 250, 0.8); --newtab-textbox-background-color: #38383D; --newtab-textbox-border: rgba(249, 249, 250, 0.2); diff --git a/browser/components/newtab/css/activity-stream-windows.css b/browser/components/newtab/css/activity-stream-windows.css index 584843c5f31b..62df2bf0cca0 100644 --- a/browser/components/newtab/css/activity-stream-windows.css +++ b/browser/components/newtab/css/activity-stream-windows.css @@ -28,7 +28,7 @@ input { display: none !important; } body { - --newtab-background-color: #F9F9FA; + --newtab-background-color: #FFF; --newtab-border-primary-color: #B1B1B3; --newtab-border-secondary-color: #D7D7DB; --newtab-element-active-color: rgba(215, 215, 219, 0.6); @@ -42,7 +42,7 @@ body { --newtab-link-primary-color: #0060DF; --newtab-link-secondary-color: #008EA4; --newtab-text-conditional-color: #4A4A4F; - --newtab-text-primary-color: #0C0C0D; + --newtab-text-primary-color: #15141a; --newtab-text-secondary-color: #737373; --newtab-textbox-background-color: #FFF; --newtab-textbox-border: rgba(12, 12, 13, 0.2); @@ -109,7 +109,7 @@ body { --newtab-card-second-shadow: rgba(29, 17, 51, 0.12); --newtab-wordmark-color: #20123A; } body[lwt-newtab-brighttext] { - --newtab-background-color: #2A2A2E; + --newtab-background-color: #1c1b22; --newtab-border-primary-color: rgba(249, 249, 250, 0.8); --newtab-border-secondary-color: rgba(249, 249, 250, 0.1); --newtab-button-primary-color: #0060DF; @@ -125,7 +125,7 @@ body { --newtab-link-primary-color: #45A1FF; --newtab-link-secondary-color: #50BCB6; --newtab-text-conditional-color: #F9F9FA; - --newtab-text-primary-color: #F9F9FA; + --newtab-text-primary-color: #fbfbfe; --newtab-text-secondary-color: rgba(249, 249, 250, 0.8); --newtab-textbox-background-color: #38383D; --newtab-textbox-border: rgba(249, 249, 250, 0.2); diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json index 6dcc56b1820d..a188090ee7f4 100644 --- a/browser/themes/addons/dark/manifest.json +++ b/browser/themes/addons/dark/manifest.json @@ -35,8 +35,8 @@ "toolbar_field_focus": "rgb(66,65,77)", "toolbar_field_separator": "rgb(82,82,94)", "toolbar_text": "#BFBFC9", - "ntp_background": "#2A2A2E", - "ntp_text": "rgb(249, 249, 250)", + "ntp_background": "rgb(28, 27, 34)", + "ntp_text": "rgb(251, 251, 254)", "sidebar": "#38383D", "sidebar_text": "rgb(249, 249, 250)", "sidebar_border": "rgba(255, 255, 255, 0.1)", diff --git a/browser/themes/addons/light/manifest.json b/browser/themes/addons/light/manifest.json index da8e6da04d33..82426a918865 100644 --- a/browser/themes/addons/light/manifest.json +++ b/browser/themes/addons/light/manifest.json @@ -36,8 +36,8 @@ "toolbar_field_focus": "white", "toolbar_field_separator": "rgb(240,240,244)", "toolbar_text": "rgb(21,20,26)", - "ntp_background": "#F9F9FA", - "ntp_text": "rgb(12, 12, 13)", + "ntp_background": "#fff", + "ntp_text": "rgb(21, 20, 26)", "popup_action_color": "rgb(21,20,26)", "button": "rgb(240,240,244)", "button_hover": "rgb(224,224,230)", diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js b/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js index bf204632ec64..a5e8800402bb 100644 --- a/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js @@ -93,8 +93,8 @@ function test_ntp_default_theme(browser, url) { browser, [ { - background: hexToCSS("#F9F9FA"), - color: hexToCSS("#0C0C0D"), + background: hexToCSS("#FFFFFF"), + color: hexToCSS("#15141A"), }, ], function({ background, color }) { diff --git a/toolkit/mozapps/extensions/default-theme/manifest.json b/toolkit/mozapps/extensions/default-theme/manifest.json index 324cfb670ed9..04ea037d0b1a 100644 --- a/toolkit/mozapps/extensions/default-theme/manifest.json +++ b/toolkit/mozapps/extensions/default-theme/manifest.json @@ -38,8 +38,8 @@ "toolbar_field_focus": "rgb(66,65,77)", "toolbar_field_separator": "#5F6670", "toolbar_text": "#BFBFC9", - "ntp_background": "#2A2A2E", - "ntp_text": "rgb(249, 249, 250)", + "ntp_background": "rgb(28, 27, 34)", + "ntp_text": "rgb(251, 251, 254)", "sidebar": "#38383D", "sidebar_text": "rgb(249, 249, 250)", "sidebar_border": "rgba(255, 255, 255, 0.1)",