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
This commit is contained in:
Ed Lee 2021-04-17 13:13:57 +00:00
parent b6e1337b20
commit 58c8548d65
9 changed files with 30 additions and 24 deletions

View File

@ -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};

View File

@ -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;

View File

@ -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);

View File

@ -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);

View File

@ -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);

View File

@ -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)",

View File

@ -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)",

View File

@ -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 }) {

View File

@ -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)",