Bug 1706360 - Adjust default background colors of new-tab. r=dao,Mardak

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

browser/components/newtab/content-src/styles/_variables.scss

@@ -102,11 +102,15 @@ $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);
+
+// These colors should match the colors in the default themes
+// (toolkit/mozapps/extensions/...). Note that they could get replaced by other
+// themes. The color set in --tabpanel-background-color (tabs.inc.css) should
+// match these colors here to avoid flashing.
+$in-content-page-background: #F9F9FB;
+$in-content-page-background-dark: #2A2A2E;
 
 $newtab-card-primary-text-color: #20123A;
 $newtab-card-darktheme-primary-text-color: #E0E0E6;

browser/components/newtab/css/activity-stream-linux.css

@@ -28,7 +28,7 @@ input {
   display: none !important; }
 
 body {
-  --newtab-background-color: #FFF;
+  --newtab-background-color: #F9F9FB;
   --newtab-border-primary-color: #B1B1B3;
   --newtab-border-secondary-color: #D7D7DB;
   --newtab-element-active-color: rgba(215, 215, 219, 0.6);
@@ -110,7 +110,7 @@ body {
   --newtab-card-second-shadow: rgba(29, 17, 51, 0.12);
   --newtab-wordmark-color: #20123A; }
   body[lwt-newtab-brighttext] {
-    --newtab-background-color: #1c1b22;
+    --newtab-background-color: #2A2A2E;
     --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;

browser/components/newtab/css/activity-stream-mac.css

@@ -31,7 +31,7 @@ input {
   display: none !important; }
 
 body {
-  --newtab-background-color: #FFF;
+  --newtab-background-color: #F9F9FB;
   --newtab-border-primary-color: #B1B1B3;
   --newtab-border-secondary-color: #D7D7DB;
   --newtab-element-active-color: rgba(215, 215, 219, 0.6);
@@ -113,7 +113,7 @@ body {
   --newtab-card-second-shadow: rgba(29, 17, 51, 0.12);
   --newtab-wordmark-color: #20123A; }
   body[lwt-newtab-brighttext] {
-    --newtab-background-color: #1c1b22;
+    --newtab-background-color: #2A2A2E;
     --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;

browser/components/newtab/css/activity-stream-windows.css

@@ -28,7 +28,7 @@ input {
   display: none !important; }
 
 body {
-  --newtab-background-color: #FFF;
+  --newtab-background-color: #F9F9FB;
   --newtab-border-primary-color: #B1B1B3;
   --newtab-border-secondary-color: #D7D7DB;
   --newtab-element-active-color: rgba(215, 215, 219, 0.6);
@@ -110,7 +110,7 @@ body {
   --newtab-card-second-shadow: rgba(29, 17, 51, 0.12);
   --newtab-wordmark-color: #20123A; }
   body[lwt-newtab-brighttext] {
-    --newtab-background-color: #1c1b22;
+    --newtab-background-color: #2A2A2E;
     --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;

browser/themes/addons/alpenglow/manifest.json

@@ -53,7 +53,7 @@
       "tab_background_separator": "hsla(261, 53%, 15%, 1)",
       "tab_line": "hsla(265, 100%, 72%, 1)",
       "tab_loading": "hsla(265, 100%, 72%, 1)",
-      "ntp_background": "hsla(0, 0%, 100%, 1)",
+      "ntp_background": "#F9F9FB",
       "ntp_text": "hsla(261, 53%, 15%, 1)",
       "popup": "hsla(254, 46%, 21%, 1)",
       "popup_text": "hsla(255, 100%, 94%, 1)",
@@ -110,7 +110,7 @@
       "tab_background_separator": "hsla(255, 100%, 94%, 1)",
       "tab_line": "hsla(265, 100%, 72%, 1)",
       "tab_loading": "hsla(265, 100%, 72%, 1)",
-      "ntp_background": "hsla(254, 46%, 21%, .96)",
+      "ntp_background": "#2A2A2E",
       "ntp_text": "hsla(255, 100%, 94%, 1)",
       "popup": "hsla(250, 43%, 25%, 1)",
       "popup_text": "hsla(255, 100%, 94%, 1)",

browser/themes/addons/dark/manifest.json

@@ -34,7 +34,7 @@
       "toolbar_field_text": "rgb(251,251,254)",
       "toolbar_field_focus": "rgb(66,65,77)",
       "toolbar_text": "rgb(251, 251, 254)",
-      "ntp_background": "rgb(28, 27, 34)",
+      "ntp_background": "#2A2A2E",
       "ntp_text": "rgb(251, 251, 254)",
       "sidebar": "#38383D",
       "sidebar_text": "rgb(249, 249, 250)",

browser/themes/addons/light/manifest.json

@@ -35,7 +35,7 @@
       "toolbar_field_border": "transparent",
       "toolbar_field_focus": "white",
       "toolbar_text": "rgb(21,20,26)",
-      "ntp_background": "#fff",
+      "ntp_background": "#F9F9FB",
       "ntp_text": "rgb(21, 20, 26)",
       "popup_action_color": "rgb(91,91,102)",
       "button": "rgb(240,240,244)",

browser/themes/shared/tabs.inc.css

@@ -33,13 +33,15 @@
   --tab-shadow-max-size: 6px;
   --proton-tab-block-margin: 4px;
   --inline-tab-padding: 8px;
-  /* Value for --in-content-page-background in in-content/common.inc.css */
-  --tabpanel-background-color: #fff;
+  /* --tabpanel-background-color matches $in-content-page-background in newtab
+     (browser/components/newtab/content-src/styles/_variables.scss) */
+  --tabpanel-background-color: #F9F9FB;
 }
 @media (-moz-toolbar-prefers-color-scheme: dark) {
   :root {
-    /* Value for --in-content-page-background for dark mode in in-content/common.inc.css */
-    --tabpanel-background-color: rgb(28,27,34);
+    /* --tabpanel-background-color matches $in-content-page-background in newtab
+       (browser/components/newtab/content-src/styles/_variables.scss) */
+    --tabpanel-background-color: #2A2A2E;
   }
 } /*** END prefers-color-scheme: dark ***/
 } /*** END proton ***/

toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors_perwindow.js

@@ -93,7 +93,7 @@ function test_ntp_default_theme(browser, url) {
     browser,
     [
       {
-        background: hexToCSS("#FFFFFF"),
+        background: hexToCSS("#F9F9FB"),
         color: hexToCSS("#15141A"),
       },
     ],

toolkit/mozapps/extensions/default-theme/manifest.json

@@ -37,7 +37,7 @@
       "toolbar_field_text": "rgb(251,251,254)",
       "toolbar_field_focus": "rgb(66,65,77)",
       "toolbar_text": "rgb(251, 251, 254)",
-      "ntp_background": "rgb(28, 27, 34)",
+      "ntp_background": "#2A2A2E",
       "ntp_text": "rgb(251, 251, 254)",
       "sidebar": "#38383D",
       "sidebar_text": "rgb(249, 249, 250)",