[MD History] Color tweaks.

chrome/browser/resources/md_history/app.vulcanized.html

Index: chrome/browser/resources/md_history/app.vulcanized.html
diff --git a/chrome/browser/resources/md_history/app.vulcanized.html b/chrome/browser/resources/md_history/app.vulcanized.html
index ed67f297b52dea6c59860a15156e50655c16e31f..e1d2f452e767d09ed74f239b9b75b618e61c13d0 100644
--- a/chrome/browser/resources/md_history/app.vulcanized.html
+++ b/chrome/browser/resources/md_history/app.vulcanized.html
@@ -31,10 +31,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 :root {
   /* This is a custom, Chrome-specific color that does not have a --paper or
    * --google equivalent. */
-  --md-background-color: rgb(241, 241, 241);
+  --md-background-color: #f1f1f1;
   /* This is --google-blue-700, rewritten as a native custom property for speed.
    */
   --md-toolbar-color: rgb(51, 103, 214);
+  --md-loading-message-color: #6e6e6e;
 }
 
 </style>
@@ -1896,7 +1897,7 @@ input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-s
 }
 
 :host(:not([narrow]):not([showing-search])) #icon, :host(:not([narrow])) #prompt {
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
 :host([narrow]:not([showing-search])) #searchTerm {
@@ -2104,13 +2105,22 @@ h1 {
     --card-padding-between: 16px;
     --card-padding-side: 24px;
     --card-sizing_-_margin:  0 auto; --card-sizing_-_max-width:  var(--card-max-width); --card-sizing_-_min-width:  var(--card-min-width); --card-sizing_-_padding:  0 var(--card-padding-side); --card-sizing_-_width:  calc(100% - 2 * var(--card-padding-side));;
+    --drawer-header-color: #666;
     --first-card-padding-top: 24px;
+    --history-item-time-color: #646464;
     --item-height: 44px;
     --primary-text-color: #333;
     --secondary-text-color: #757575;
+    --separator-color: rgba(0, 0, 0, 0.08);
     --side-bar-width: 256px;
+    --sidebar-footer-link-color: var(--google-blue-700);
+    --sidebar-footer-text-color: #6e6e6e;
+    --sidebar-selected-color: var(--google-blue-700);
+    --sidebar-unselected-color: #5a5a5a;
+    --synced-devices-notice-color: var(--paper-grey-800);
     --toolbar-grouped-height: 101px;
     --toolbar-height: 56px;
+    --toolbar-selected-color: rgb(68, 136, 255);
 }
 
 </style>
@@ -2138,7 +2148,7 @@ h1 {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -2227,7 +2237,7 @@ button.more-vert-button div {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -2301,7 +2311,7 @@ cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container {
 }
 
 :host([items-selected_]) {
-  background: rgb(68, 136, 255);
+  background: var(--toolbar-selected-color);
 }
 
 #toolbar-container {
@@ -2350,7 +2360,7 @@ iron-dropdown {
   box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
         background-color: white;
         border-radius: 2px;
-        color: var(--paper-grey-800);
+        color: var(--synced-devices-notice-color);
         overflow: hidden;
         padding: 12px 20px;
 }
@@ -2494,6 +2504,8 @@ paper-tabs {
 <style is="custom-style" css-build="shadow">html {
   --cr-actionable_-_cursor:  pointer;;
     --cr-focused-item-color: var(--google-grey-300);
+    
+    --cr-icon-padding: 8px;
     --cr-selectable-focus_-_background-color:  var(--cr-focused-item-color); --cr-selectable-focus_-_outline:  none;
     --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
     --paper-checkbox-ink-size: 40px;
@@ -2710,7 +2722,7 @@ paper-tabs {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -2875,7 +2887,7 @@ button {
 }
 
 #time-accessed {
-  color: #646464;
+  color: var(--history-item-time-color);
         min-width: 96px;
 }
 
@@ -3021,7 +3033,7 @@ button {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -3132,7 +3144,7 @@ iron-list {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -3414,7 +3426,7 @@ dialog .body {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -3487,7 +3499,7 @@ button.more-vert-button div {
 }
 
 div.separator {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--separator-color);
         flex-shrink: 0;
         height: 1px;
         margin: 8px 0;
@@ -3509,7 +3521,7 @@ div.separator {
 iron-selector {
   -webkit-user-select: none;
         background-color: transparent;
-        color: #5a5a5a;
+        color: var(--sidebar-unselected-color);
         display: flex;
         flex: 1;
         flex-direction: column;
@@ -3534,7 +3546,7 @@ iron-selector > a {
 }
 
 iron-selector > a.iron-selected {
-  color: var(--google-blue-500);
+  color: var(--sidebar-selected-color);
 }
 
 #spacer {
@@ -3542,7 +3554,7 @@ iron-selector > a.iron-selected {
 }
 
 #footer {
-  color: var(--paper-grey-600);
+  color: var(--sidebar-footer-text-color);
         width: var(--side-bar-width);
 }
 
@@ -3554,7 +3566,7 @@ iron-selector > a.iron-selected {
 }
 
 #footer a {
-  color: var(--google-blue-700);
+  color: var(--sidebar-footer-link-color);
         text-decoration: none;
 }
 
@@ -3607,7 +3619,7 @@ iron-selector > a.iron-selected {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -3711,7 +3723,7 @@ history-toolbar {
 
 #drawer-header {
   align-items: center;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        border-bottom: 1px solid var(--separator-color);
         box-sizing: border-box;
         display: flex;
         height: var(--toolbar-height);
@@ -3719,7 +3731,7 @@ history-toolbar {
 
 h1 {
   -webkit-padding-start: 24px;
-        color: rgb(66, 66, 66);
+        color: var(--drawer-header-color);
         font-size: 123%;
         font-weight: 400;
 }