[MD History] Color tweaks.

This CL fixes some colors in MD History that were low contrast. It also
makes a bunch of colors consistent and pulls most colors into
shared_vars.html so we can better manage our vast color spectrum.

BUG=670836
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2549133003
Cr-Commit-Position: refs/heads/master@{#438073}

chrome/browser/resources/md_downloads/vulcanized.html

@@ -34,7 +34,8 @@ 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;
+  --md-loading-message-color: #6e6e6e;
   /* This is --google-blue-700, rewritten as a native custom property for speed.
    */
   --md-toolbar-color: rgb(51, 103, 214);
@@ -3028,7 +3029,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 {
@@ -3296,7 +3297,8 @@ paper-item {
 :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;
+  --md-loading-message-color: #6e6e6e;
   /* This is --google-blue-700, rewritten as a native custom property for speed.
    */
   --md-toolbar-color: rgb(51, 103, 214);

chrome/browser/resources/md_history/app.html

@@ -17,6 +17,7 @@
   <template>
     <style include="shared-style">
       :host {
+        color: var(--primary-text-color);
         display: block;
         height: 100%;
         overflow: hidden;
@@ -63,7 +64,7 @@
 
       #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);
@@ -71,7 +72,7 @@
 
       h1 {
         -webkit-padding-start: 24px;
-        color: rgb(66, 66, 66);
+        color: var(--primary-text-color);
         font-size: 123%;
         font-weight: 400;
       }

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

@@ -31,7 +31,8 @@ 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;
+  --md-loading-message-color: #6e6e6e;
   /* This is --google-blue-700, rewritten as a native custom property for speed.
    */
   --md-toolbar-color: rgb(51, 103, 214);
@@ -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 {
@@ -2105,10 +2106,16 @@ h1 {
     --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));;
     --first-card-padding-top: 24px;
+    --history-item-time-color: #646464;
+    --interactive-color: var(--google-blue-500);
     --item-height: 44px;
-    --primary-text-color: #333;
-    --secondary-text-color: #757575;
+    --link-color: var(--google-blue-700);
+    --primary-text-color: var(--paper-grey-800);
+    --secondary-text-color: var(--paper-grey-600);
+    --separator-color: rgba(0, 0, 0, 0.08);
     --side-bar-width: 256px;
+    --sidebar-footer-text-color: #6e6e6e;
+    --sidebar-unselected-color: #5a5a5a;
     --toolbar-grouped-height: 101px;
     --toolbar-height: 56px;
 }
@@ -2120,11 +2127,14 @@ h1 {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -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;
@@ -2208,11 +2218,14 @@ button.more-vert-button div {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -2226,7 +2239,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;
@@ -2299,7 +2312,7 @@ cr-toolbar, #overlay-buttons, #overlay-wrapper, #toolbar-container {
 }
 
 :host([items-selected_]) {
-  background: rgb(68, 136, 255);
+  background: var(--interactive-color);
 }
 
 #toolbar-container {
@@ -2348,7 +2361,7 @@ iron-dropdown {
   box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
         background-color: white;
         border-radius: 2px;
-        color: var(--paper-grey-800);
+        color: var(--primary-text-color);
         overflow: hidden;
         padding: 12px 20px;
 }
@@ -2697,11 +2710,14 @@ paper-tab {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -2715,7 +2731,7 @@ paper-tab {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -2775,8 +2791,7 @@ button.more-vert-button div {
 }
 
 :host {
-  --checked-color: rgb(68, 136, 255);
-        display: block;
+  display: block;
         outline: none;
         pointer-events: none;
 }
@@ -2839,7 +2854,7 @@ button {
 }
 
 :host([selected]) #checkbox {
-  color: var(--checked-color);
+  color: var(--interactive-color);
 }
 
 #checkmark {
@@ -2867,8 +2882,8 @@ button {
 }
 
 :host([selected]) #checkmark {
-  background: var(--checked-color);
-        border-color: var(--checked-color);
+  background: var(--interactive-color);
+        border-color: var(--interactive-color);
 }
 
 :host([selected]) #checkmark::after {
@@ -2879,7 +2894,7 @@ button {
 }
 
 #time-accessed {
-  color: #646464;
+  color: var(--history-item-time-color);
         min-width: 96px;
 }
 
@@ -2900,7 +2915,7 @@ button {
 }
 
 #bookmark-star {
-  color: var(--checked-color);
+  color: var(--interactive-color);
         height: 32px;
         width: 32px;
 }
@@ -3007,11 +3022,14 @@ button {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -3025,7 +3043,7 @@ button {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -3117,11 +3135,14 @@ iron-list {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -3135,7 +3156,7 @@ iron-list {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -3399,11 +3420,14 @@ dialog .body {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -3417,7 +3441,7 @@ dialog .body {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -3489,7 +3513,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;
@@ -3511,7 +3535,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;
@@ -3536,7 +3560,7 @@ iron-selector > a {
 }
 
 iron-selector > a.iron-selected {
-  color: var(--google-blue-500);
+  color: var(--link-color);
 }
 
 #spacer {
@@ -3544,7 +3568,7 @@ iron-selector > a.iron-selected {
 }
 
 #footer {
-  color: var(--paper-grey-600);
+  color: var(--sidebar-footer-text-color);
         width: var(--side-bar-width);
 }
 
@@ -3556,8 +3580,7 @@ iron-selector > a.iron-selected {
 }
 
 #footer a {
-  color: var(--google-blue-700);
-        text-decoration: none;
+  text-decoration: none;
 }
 
 </style>
@@ -3591,11 +3614,14 @@ iron-selector > a.iron-selected {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -3609,7 +3635,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;
@@ -3669,7 +3695,8 @@ button.more-vert-button div {
 }
 
 :host {
-  display: block;
+  color: var(--primary-text-color);
+        display: block;
         height: 100%;
         overflow: hidden;
         z-index: 0;
@@ -3712,7 +3739,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);
@@ -3720,7 +3747,7 @@ history-toolbar {
 
 h1 {
   -webkit-padding-start: 24px;
-        color: rgb(66, 66, 66);
+        color: var(--primary-text-color);
         font-size: 123%;
         font-weight: 400;
 }

chrome/browser/resources/md_history/grouped_list.html

@@ -32,7 +32,7 @@
       }
 
       .domain-count {
-        color: rgb(151, 156, 160);
+        color: var(--secondary-text-color);
         padding-left: 10px;
       }
 

chrome/browser/resources/md_history/history.html

@@ -53,7 +53,7 @@
 
     #loading-message {
       align-items: center;
-      color: #b4b4b4;
+      color: var(--md-loading-message-color);
       flex: 1;
       font-weight: 500;
       justify-content: center;

chrome/browser/resources/md_history/history_item.html

@@ -16,7 +16,6 @@
   <template>
     <style include="shared-style">
       :host {
-        --checked-color: rgb(68, 136, 255);
         display: block;
         outline: none;
         pointer-events: none;
@@ -81,7 +80,7 @@
       }
 
       :host([selected]) #checkbox {
-        color: var(--checked-color);
+        color: var(--interactive-color);
       }
 
       #checkmark {
@@ -109,8 +108,8 @@
       }
 
       :host([selected]) #checkmark {
-        background: var(--checked-color);
-        border-color: var(--checked-color);
+        background: var(--interactive-color);
+        border-color: var(--interactive-color);
       }
 
       :host([selected]) #checkmark::after {
@@ -121,7 +120,7 @@
       }
 
       #time-accessed {
-        color: #646464;
+        color: var(--history-item-time-color);
         min-width: 96px;
       }
 
@@ -142,7 +141,7 @@
       }
 
       #bookmark-star {
-        color: var(--checked-color);
+        color: var(--interactive-color);
         height: 32px;
         width: 32px;
       }

chrome/browser/resources/md_history/history_toolbar.html

@@ -32,7 +32,7 @@
       }
 
       :host([items-selected_]) {
-        background: rgb(68, 136, 255);
+        background: var(--interactive-color);
       }
 
       #toolbar-container {
@@ -90,7 +90,7 @@
         @apply(--shadow-elevation-2dp);
         background-color: white;
         border-radius: 2px;
-        color: var(--paper-grey-800);
+        color: var(--primary-text-color);
         overflow: hidden;
         padding: 12px 20px;
       }

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

@@ -48,11 +48,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -66,7 +69,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -147,7 +150,7 @@ button.more-vert-button div {
 }
 
 .domain-count {
-  color: rgb(151, 156, 160);
+  color: var(--secondary-text-color);
         padding-left: 10px;
 }
 
@@ -598,11 +601,14 @@ paper-ripple {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -616,7 +622,7 @@ paper-ripple {
 
 .centered-message {
   align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;
@@ -785,11 +791,14 @@ button.more-vert-button div {
   display: none !important;
 }
 
+a {
+  color: var(--link-color);
+}
+
 .card-title {
   align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -803,7 +812,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;
@@ -958,13 +967,12 @@ paper-spinner {
 }
 
 #sign-in-promo {
-  color: var(--primary-text-color);
-        font-size: 215%;
+  font-size: 215%;
         margin-top: 40px;
 }
 
 #sign-in-promo-desc {
-  color: #848484;
+  color: var(--secondary-text-color);
         font-size: 123%;
         margin-top: 10px;
 }

chrome/browser/resources/md_history/shared_style.html

@@ -7,11 +7,14 @@
         display: none !important;
       }
 
+      a {
+        color: var(--link-color);
+      }
+
       .card-title {
         align-items: center;
         border-bottom: 1px solid var(--card-border-color);
         border-radius: 2px 2px 0 0;
-        color: var(--primary-text-color);
         display: flex;
         font-size: 14px;
         font-weight: 500;
@@ -25,7 +28,7 @@
 
       .centered-message {
         align-items: center;
-        color: #b4b4b4;
+        color: var(--md-loading-message-color);
         display: flex;
         flex: 1;
         font-size: 14px;

chrome/browser/resources/md_history/shared_vars.html

+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/default-theme.html">
+
 <style is="custom-style">
   :root {
     --card-border-color: rgba(0, 0, 0, 0.14);
@@ -14,10 +17,16 @@
       width: calc(100% - 2 * var(--card-padding-side));
     };
     --first-card-padding-top: 24px;
+    --history-item-time-color: #646464;
+    --interactive-color: var(--google-blue-500);
     --item-height: 44px;
-    --primary-text-color: #333;
-    --secondary-text-color: #757575;
+    --link-color: var(--google-blue-700);
+    --primary-text-color: var(--paper-grey-800);
+    --secondary-text-color: var(--paper-grey-600);
+    --separator-color: rgba(0, 0, 0, 0.08);
     --side-bar-width: 256px;
+    --sidebar-footer-text-color: #6e6e6e;
+    --sidebar-unselected-color: #5a5a5a;
     --toolbar-grouped-height: 101px;
     --toolbar-height: 56px;
   }

chrome/browser/resources/md_history/side_bar.html

@@ -23,7 +23,7 @@
       }
 
       div.separator {
-        background-color: rgba(0, 0, 0, 0.08);
+        background-color: var(--separator-color);
         flex-shrink: 0;
         height: 1px;
         margin: 8px 0;
@@ -45,7 +45,7 @@
       iron-selector {
         -webkit-user-select: none;
         background-color: transparent;
-        color: #5a5a5a;
+        color: var(--sidebar-unselected-color);
         display: flex;
         flex: 1;
         flex-direction: column;
@@ -70,7 +70,7 @@
       }
 
       iron-selector > a.iron-selected {
-        color: var(--google-blue-500);
+        color: var(--link-color);
       }
 
       #spacer {
@@ -78,7 +78,7 @@
       }
 
       #footer {
-        color: var(--paper-grey-600);
+        color: var(--sidebar-footer-text-color);
         width: var(--side-bar-width);
       }
 
@@ -90,7 +90,6 @@
       }
 
       #footer a {
-        color: var(--google-blue-700);
         text-decoration: none;
       }
     </style>

chrome/browser/resources/md_history/synced_device_manager.html

@@ -41,13 +41,12 @@
       }
 
       #sign-in-promo {
-        color: var(--primary-text-color);
         font-size: 215%;
         margin-top: 40px;
       }
 
       #sign-in-promo-desc {
-        color: #848484;
+        color: var(--secondary-text-color);
         font-size: 123%;
         margin-top: 10px;
       }

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

@@ -109,7 +109,7 @@
 
       :host(:not([narrow]):not([showing-search])) #icon,
       :host(:not([narrow])) #prompt {
-        opacity: 0.6;
+        opacity: 0.7;
       }
 
       :host([narrow]:not([showing-search])) #searchTerm {

ui/webui/resources/css/md_colors.css

@@ -5,7 +5,8 @@
 :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;
+  --md-loading-message-color: #6e6e6e;
   /* This is --google-blue-700, rewritten as a native custom property for speed.
    */
   --md-toolbar-color: rgb(51, 103, 214);