[ntp] Changes description text to secondary text color

Bug: 1080876
Change-Id: I278a8d4477f6811440e78e86b7bcf2fa7e10ad3c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2569433Reviewed-by: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Andre Vincent <andrevincent@google.com>
Cr-Commit-Position: refs/heads/master@{#833544}

chrome/browser/resources/new_tab_page/customize_modules.html

@@ -37,6 +37,10 @@
     font-weight: bold;
   }
 
+  #hideDescription {
+    color: var(--cr-secondary-text-color);
+  }
+
   cr-policy-indicator {
     margin-inline-end: 24px;
   }
@@ -49,7 +53,7 @@
   <div id="hideIcon" class="cr-icon icon-visibility-off"></div>
   <div id="hideTitleContainer">
     <div id="hideTitle">$i18n{hideModules}</div>
-    $i18n{hideModulesDesc}
+    <div id="hideDescription">$i18n{hideModulesDesc}</div>
   </div>
   <cr-policy-indicator indicator-type="devicePolicy"
       hidden="[[!hideManagedByPolicy_]]">

chrome/browser/resources/new_tab_page/customize_shortcuts.html

@@ -132,6 +132,10 @@
     margin: 8px 0;
   }
 
+  .option-description {
+    color: var(--cr-secondary-text-color);
+  }
+
   #hide {
     align-items: center;
     border: 1px solid var(--ntp-border-color);
@@ -245,7 +249,7 @@
       <div class="selected-check"></div>
     </cr-button>
     <div class="option-title">$i18n{myShortcuts}</div>
-    $i18n{shortcutsCurated}
+    <div class="option-description">$i18n{shortcutsCurated}</div>
   </div>
   <div id="optionMostVisited"
       class$="option [[getMostVisitedSelected_(customLinksEnabled_, hide_)]]">
@@ -262,14 +266,14 @@
       <div class="selected-check"></div>
     </cr-button>
     <div class="option-title">$i18n{mostVisited}</div>
-    $i18n{shortcutsSuggested}
+    <div class="option-description">$i18n{shortcutsSuggested}</div>
   </div>
 </div>
 <div id="hide" class$="[[getHideClass_(hide_)]]">
   <div id="hideIcon" class="cr-icon icon-visibility-off"></div>
   <div id="hideTitleContainer">
     <div id="hideTitle">$i18n{hideShortcuts}</div>
-    $i18n{hideShortcutsDesc}
+    <div class="option-description">$i18n{hideShortcutsDesc}</div>
   </div>
   <cr-toggle id="hideToggle" title="$i18n{hideShortcuts}" checked="[[hide_]]"
       on-change="onHideChange_"></cr-toggle>