MD History: Address design nits

chrome/browser/resources/md_history/shared_style.html

 <dom-module id="shared-style">
   <template>
     <style>
       :root {
         --card-border-color: rgba(0, 0, 0, 0.14);
         --card-first-last-item-padding: 8px;
         --card-max-width: 960px;
         --card-min-width: 550px;
         --card-padding-between: 20px;
         --card-padding-side: 24px;
         --first-card-padding-top: 24px;
+        --item-height: 44px;
+        --primary-text-color: #333;
+        --secondary-text-color: #757575;
         --side-bar-width: 256px;
         --toolbar-grouped-height: 101px;
         --toolbar-height: 56px;
       }
 
       [hidden] {
         display: none !important;
       }
 
       .card-title {
         @apply(--layout-center);
         @apply(--layout-horizontal);
         -webkit-padding-start: 20px;
-        background: #fafafa;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: #333;
+        color: var(--primary-text-color);
         font-size: 14px;
         font-weight: 500;
         height: 48px;
       }
 
       .centered-message {
         align-items: center;
         color: #b4b4b4;
         display: flex;
         flex: 1;
         font-size: 14px;
         font-weight: 500;
         height: 100%;
         justify-content: center;
       }
 
       .website-icon {
         -webkit-margin-end: 16px;
         background-repeat: no-repeat;
         background-size: 16px;
         height: 16px;
         width: 16px;
       }
 
       .website-title {
-        color: #333;
+        color: var(--primary-text-color);
         overflow: hidden;
         text-decoration: none;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
       .website-title:hover {
         text-decoration: underline;
       }
     </style>
   </template>
 </dom-module>