[NTP] Only change font weight on default background

Reducing the font weight only on the default white background for CrOS
and MacOS.

Screencast:
https://bugs.chromium.org/p/chromium/issues/detail?id=867779#c18

Bug: 867779
Change-Id: Ib349bd2ca7dc91e506c5bd485b1e94a1ea57616c
Reviewed-on: https://chromium-review.googlesource.com/1199809
Commit-Queue: Weilun Shi <sweilun@chromium.org>
Reviewed-by: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#588713}

chrome/browser/resources/local_ntp/most_visited_single.css

@@ -496,6 +496,12 @@ body.dark-theme .md-tile-container:active + .md-menu::after {
   word-wrap: break-word;
 }
 
+/* Font weight on Mac and ChromeOS looks heavier on default background and
+ * needs to be reduced. */
+body.mac-chromeos .md-title {
+  font-weight: 400;
+}
+
 /* Apply when a custom background is set */
 body.dark-theme .md-title {
   color: rgb(248, 249, 250);

chrome/browser/resources/local_ntp/most_visited_single.js

@@ -300,6 +300,12 @@ var updateTheme = function(info) {
   document.body.style.setProperty('--tile-title-color', info.tileTitleColor);
   document.body.classList.toggle('dark-theme', info.isThemeDark);
   document.body.classList.toggle('using-theme', info.isUsingTheme);
+
+  // Reduce font weight on the default(white) background for Mac and CrOS.
+  document.body.classList.toggle('mac-chromeos',
+      !info.isThemeDark && !info.isUsingTheme &&
+      (navigator.userAgent.indexOf('Mac') > -1 ||
+      navigator.userAgent.indexOf('CrOS') > -1));
 };
 
 
@@ -803,11 +809,6 @@ function renderMaterialDesignTile(data) {
   mdTitle.className = CLASSES.MD_TITLE;
   mdTitle.innerText = data.title;
   mdTitle.style.direction = data.direction || 'ltr';
-  // Font weight on Mac and ChromeOS is heavier and needs to be reduced.
-  if (navigator.userAgent.indexOf('Mac') > -1 ||
-      navigator.userAgent.indexOf('CrOS') > -1) {
-    mdTitle.style.fontWeight = 400;
-  }
   // Windows font family fallback to Segoe
   if (navigator.userAgent.indexOf('Windows') > -1) {
     mdTitle.style.fontFamily = 'Segoe UI';