MD Settings: up contast of headers and other things that use grey 500 on white

chrome/browser/resources/settings/search_engines_page/search_engines_list.html

Index: chrome/browser/resources/settings/search_engines_page/search_engines_list.html
diff --git a/chrome/browser/resources/settings/search_engines_page/search_engines_list.html b/chrome/browser/resources/settings/search_engines_page/search_engines_list.html
index 1395cd955ac50253e5de7d28416466740128232a..8d7fc14a6c3782f7a3ce10b277d39dcd3447a91b 100644
--- a/chrome/browser/resources/settings/search_engines_page/search_engines_list.html
+++ b/chrome/browser/resources/settings/search_engines_page/search_engines_list.html
@@ -7,25 +7,29 @@
 
 <dom-module id="settings-search-engines-list">
   <template>
-    <style include="cr-shared-style">
-      .headers {
+    <style include="settings-shared">
+      #headers {
         display: flex;
         padding: 10px 0;
       }
 
-      .headers .name,
-      .headers .keyword {
+      #headers .name,
+      #headers .keyword {
         flex: 3;
       }
 
-      .headers .url {
+      #headers .url {
         flex: 4;
       }
 
-      div#outer {
+      #outer {
         @apply(--settings-list-frame-padding);
       }
 
+      /* TODO(dbeam): this rule results in incorrectly showing a top border for
+       * "Other Search Engines", which hides the headers while still adding a
+       * dividing line (even though there's no content above the other engines
+       * to actually divide). */
       settings-search-engine-entry {
         border-top: var(--settings-separator-line);
       }
@@ -35,7 +39,7 @@
       }
     </style>
     <div id="outer">
-      <div class="headers" hidden$="[[hideHeaders]]">
+      <div id="headers" class="column-header" hidden$="[[hideHeaders]]">
         <div class="name">$i18n{searchEnginesSearchEngine}</div>
         <div class="keyword">$i18n{searchEnginesKeyword}</div>
         <div class="url">$i18n{searchEnginesQueryURL}</div>