[NTP][WebUI] Ensures dark mode (e.g. macos) works in the NTP

http://screenshot/d4Noo0ggQW3
http://screenshot/XMXnBaPDYDi

Bug: 1041124
Change-Id: I4ede6366fc8f639f14208e4f4cb7fc86ab16f58d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2017931
Commit-Queue: Moe Ahmadi <mahmadi@chromium.org>
Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#735998}

chrome/browser/resources/new_tab_page/app.html

@@ -6,7 +6,6 @@
   }
 
   #customizeButton {
-    background-color: white;
     border: none;
     border-radius: calc(0.5 * var(--cr-button-height));
     bottom: 16px;
@@ -15,14 +14,8 @@
     position: absolute;
   }
 
-  #customizeIcon {
-    -webkit-mask-image: url(icons/icon_pencil.svg);
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: 100%;
-    background-color: var(--text-color);
-    height: 16px;
-    margin-inline-end: 8px;
-    width: 16px;
+  #customizeButton:not(:hover) {
+    background-color: var(--ntp-background-override-color);
   }
 
   :host-context([dir='ltr']) #customizeButton {
@@ -33,6 +26,16 @@
     left: 16px;
   }
 
+  #customizeIcon {
+    -webkit-mask-image: url(icons/icon_pencil.svg);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-size: 100%;
+    background-color: var(--text-color);
+    height: 16px;
+    margin-inline-end: 8px;
+    width: 16px;
+  }
+
   ntp-most-visited[dark] {
     --icon-button-color-active: var(--google-grey-refresh-300);
     --icon-button-color: white;

chrome/browser/resources/new_tab_page/customize_dialog.html

@@ -20,6 +20,7 @@
   .menu-item {
     align-items: center;
     border-radius: 0 16px 16px 0;
+    color: var(--ntp-primary-text-color);
     cursor: pointer;
     display: flex;
     flex-direction: row;
@@ -34,23 +35,24 @@
     border-radius: 16px 0 0 16px;
   }
 
-  .menu-item:hover {
-    background-color: rgba(var(--google-grey-900-rgb), .1);
+  .menu-item:hover,
+  .menu-item:focus {
+    background-color: var(--ntp-hover-background-color);
   }
 
-  .menu-item[selected] {
-    background-color: var(--google-blue-50);
-    color: var(--google-blue-refresh-700);
+  .menu-item:active {
+    background-color: var(--ntp-active-background-color);
   }
 
-  :host-context(.focus-outline-visible) .menu-item:focus {
-    background-color: rgba(var(--google-grey-900-rgb), .16);
+  .menu-item[selected] {
+    background-color: var(--ntp-selected-background-color);
+    color: var(--ntp-selected-primary-text-color);
   }
 
   .menu-item-icon {
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
-    background-color: var(--cr-secondary-text-color);
+    background-color: var(--ntp-primary-text-color);
     height: 20px;
     margin-inline-end: 16px;
     margin-inline-start: 24px;
@@ -58,7 +60,7 @@
   }
 
   .menu-item[selected] .menu-item-icon {
-    background-color: var(--google-blue-refresh-700);
+    background-color: var(--ntp-selected-primary-text-color);
   }
 
   #backgroundsIcon {

chrome/browser/resources/new_tab_page/customize_shortcuts.html

@@ -13,7 +13,7 @@
   }
 
   .option-image {
-    border: 1px solid var(--google-grey-refresh-300);
+    border: 1px solid var(--ntp-border-color);
     border-radius: 4px;
     box-sizing: border-box;
     cursor: pointer;
@@ -23,27 +23,14 @@
     width: 268px;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .option-image {
-      border-color: var(--google-grey-refresh-700);
-    }
-  }
-
   .selected .option-image {
-    background-color: var(--google-blue-50);
-    border-color: var(--google-blue-600);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .selected .option-image {
-      background-color: rgba(var(--google-blue-200-rgb), .1);
-      border-color: var(--google-blue-refresh-300);
-    }
+    background-color: var(--ntp-selected-background-color);
+    border-color: var(--ntp-selected-border-color);
   }
 
   .option-mini {
-    background-color: white;
-    border: 1px solid var(--google-grey-refresh-300);
+    background-color: var(--ntp-background-override-color);
+    border: 1px solid var(--ntp-border-color);
     border-radius: 4px;
     box-sizing: border-box;
     height: 144px;
@@ -53,26 +40,19 @@
     width: 144px;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .option-mini {
-      background-color: var(--google-grey-900);
-      border-color: var(--google-grey-refresh-700);
-    }
-  }
-
   html[dir=rtl] .option-mini {
     left: 40px;
     right: unset;
   }
 
   .selected .option-mini {
+    border-color: transparent;
     box-shadow: 0 1px 3px 0 rgba(var(--google-grey-800-rgb), .3),
         0 4px 8px 3px rgba(var(--google-grey-800-rgb), .15);
   }
 
   @media (prefers-color-scheme: dark) {
     .selected .option-mini {
-      border-color: transparent;
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
           0 4px 8px 3px rgba(0, 0, 0, .15);
     }
@@ -83,19 +63,13 @@
   }
 
   .selected ntp-mini-page {
-    --mini-page-shortcut-color: var(--google-blue-600);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .selected ntp-mini-page {
-      --mini-page-shortcut-color: var(--google-blue-refresh-300);
-    }
+    --mini-page-shortcut-color: var(--ntp-selected-border-color);
   }
 
   .option-icon {
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
-    background: 96px 96px var(--google-grey-200);
+    background: 96px 96px var(--ntp-border-color);
     height: 96px;
     left: 16px;
     position: absolute;
@@ -115,19 +89,13 @@
     right: 16px;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .option-icon {
-      background-color: var(--google-grey-refresh-700);
-    }
-  }
-
   .selected .option-icon {
-    background-color: rgba(var(--google-blue-600-rgb), .24);
+    background-color: var(--ntp-selected-light-background-color);
   }
 
   @media (prefers-color-scheme: dark) {
     .selected .option-icon {
-      background-color: var(--google-blue-refresh-300);
+      background-color: var(--ntp-selected-border-color);
     }
   }
 
@@ -163,7 +131,7 @@
 
   #hide {
     align-items: center;
-    border: 1px solid var(--google-grey-refresh-300);
+    border: 1px solid var(--ntp-border-color);
     border-radius: 4px;
     box-sizing: border-box;
     display: flex;
@@ -173,24 +141,10 @@
     width: 100%;
   }
 
-  @media (prefers-color-scheme: dark) {
-    #hide {
-      border-color: var(--google-grey-refresh-700);
-    }
-  }
-
   #hide.selected {
-    background-color: var(--google-blue-50);
-    border-color: var(--google-blue-600);
-    color: var(--google-blue-600);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    #hide.selected {
-      background-color: rgba(var(--google-blue-200-rgb), .1);
-      border-color: var(--google-blue-refresh-300);
-      color: var(--google-blue-refresh-300);
-    }
+    background-color: var(--ntp-selected-background-color);
+    border-color: var(--ntp-selected-border-color);
+    color: var(--ntp-selected-border-color);
   }
 
   #hideIcon {
@@ -199,13 +153,7 @@
   }
 
   .selected #hideIcon {
-    background-color: var(--google-blue-600);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .selected #hideIcon {
-      background-color: var(--google-blue-refresh-300);
-    }
+    background-color: var(--ntp-selected-border-color);
   }
 
   #hideTitleContainer {
@@ -220,23 +168,8 @@
     margin-inline-end: 20px;
   }
 
-  .selected-border {
-    border: 2px solid rgba(var(--google-blue-600-rgb), .4);
-    border-radius: 4px;
-    box-sizing: border-box;
-    height: 100%;
-    position: relative;
-    width: 100%;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .selected-border {
-      border-color: var(--google-blue-refresh-300);
-    }
-  }
-
   .selected-circle {
-    background: #FFF no-repeat center;
+    background: var(--ntp-background-override-color) no-repeat center;
     border-radius: 50%;
     display: none;
     height: 22px;
@@ -251,12 +184,6 @@
     right: 66px;
   }
 
-  @media (prefers-color-scheme: dark) {
-    .selected-circle {
-      background-color: var(--google-grey-900);
-    }
-  }
-
   .selected-check {
     background: url(icons/check_circle.svg) no-repeat center;
     background-size: 28px 28px;

chrome/browser/resources/new_tab_page/customize_themes.html

@@ -5,8 +5,9 @@
 
   #thirdPartyTheme {
     align-items: center;
-    border: 1px solid var(--google-grey-200);
     border-radius: 5px;
+    border: 1px solid var(--ntp-border-color);
+    color: var(--ntp-primary-text-color);
     display: flex;
     flex-direction: row;
     margin-bottom: 24px;
@@ -17,7 +18,7 @@
     -webkit-mask-image: url(icons/brush.svg);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
-    background-color: var(--cr-secondary-text-color);
+    background-color: var(--ntp-primary-text-color);
     height: 24px;
     margin-inline-end: 20px;
     width: 24px;
@@ -36,7 +37,7 @@
     -webkit-mask-image: url(chrome://resources/images/open_in_new.svg);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: 100%;
-    background-color: var(--cr-secondary-text-color);
+    background-color: var(--ntp-primary-text-color);
     height: 20px;
     margin-inline-end: 24px;
     width: 20px;
@@ -86,6 +87,14 @@
     --ntp-theme-icon-frame-color: rgb(222, 225, 230);
     --ntp-theme-icon-active-tab-color: white;
   }
+
+  @media (prefers-color-scheme: dark) {
+    #defaultTheme {
+      --ntp-theme-icon-frame-color: rgb(var(--google-grey-900-rgb));
+      --ntp-theme-icon-active-tab-color: rgb(50, 54, 57);
+    }
+  }
+
 </style>
 <div id="thirdPartyThemeContainer" hidden="[[!isThirdPartyTheme_(theme)]]">
   <div id="thirdPartyTheme">

chrome/browser/resources/new_tab_page/new_tab_page.html

@@ -14,17 +14,12 @@
         background: $i18n{backgroundColor};
         margin: 0;
       }
-
-      @media (prefers-color-scheme: dark) {
-        body {
-          background: rgb(67, 67, 71);
-        }
-      }
     </style>
   </head>
   <body>
     <ntp-app></ntp-app>
     <script type="module" src="app.js"></script>
     <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+    <link rel="stylesheet" href="shared_vars.css">
   </body>
 </html>

chrome/browser/resources/new_tab_page/new_tab_page_resources.grd

@@ -68,6 +68,8 @@
     <structures>
       <structure name="IDR_NEW_TAB_PAGE_NEW_TAB_PAGE_HTML"
           file="new_tab_page.html" type="chrome_html" compress="gzip" />
+      <structure name="IDR_NEW_TAB_PAGE_SHARED_VARS_CSS"
+          file="shared_vars.css" type="chrome_html" compress="gzip" />
       <structure name="IDR_NEW_TAB_PAGE_BROWSER_PROXY_JS"
           file="browser_proxy.js" type="chrome_html" compress="gzip" />
       <structure name="IDR_NEW_TAB_PAGE_UTILS_JS"

chrome/browser/resources/new_tab_page/shared_vars.css

+/*
+ * Copyright 2020 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+html {
+  --ntp-active-background-color: rgba(var(--google-grey-900-rgb), .16);
+  --ntp-background-override-color: white;
+  --ntp-border-color: var(--google-grey-refresh-300);
+  --ntp-hover-background-color: rgba(var(--google-grey-900-rgb), .1);
+  --ntp-primary-text-color: var(--google-grey-refresh-700);
+  --ntp-selected-background-color: rgba(var(--google-blue-refresh-700-rgb), .16);
+  --ntp-selected-border-color: var(--google-blue-600);
+  --ntp-selected-light-background-color: rgba(var(--google-blue-600-rgb), .24);
+  --ntp-selected-primary-text-color: var(--google-blue-refresh-700);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --ntp-active-background-color: rgba(var(--google-grey-200-rgb), .16);
+    --ntp-background-override-color: var(--google-grey-900);
+    --ntp-border-color: var(--google-grey-refresh-700);
+    --ntp-hover-background-color: rgba(var(--google-grey-200-rgb), .1);
+    --ntp-primary-text-color: var(--google-grey-refresh-300);
+    --ntp-selected-background-color: rgba(var(--google-blue-refresh-300-rgb), .16);
+    --ntp-selected-border-color: var(--google-blue-refresh-300);
+    --ntp-selected-light-background-color: rgba(var(--google-blue-refresh-300-rgb), .24);
+    --ntp-selected-primary-text-color: var(--google-blue-refresh-300);
+  }
+}

chrome/browser/resources/new_tab_page/theme_icon.html

@@ -35,11 +35,11 @@
   }
 
   #checkMark circle {
-    fill: var(--google-blue-refresh-500);
+    fill: var(--ntp-selected-border-color);
   }
 
   #checkMark path {
-    fill: white;
+    fill: var(--ntp-background-override-color);
   }
 </style>
 <svg xmlns="http://www.w3.org/2000/svg"