WebUI: typography style refresh

Bug: 849857
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ia153c02e3f88c27a430c50cc85b2f3906f1b9c32
Reviewed-on: https://chromium-review.googlesource.com/1102189
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#568958}

chrome/browser/resources/md_bookmarks/shared_vars.html

@@ -14,8 +14,8 @@
     --iron-icon-height: 20px;
     --iron-icon-width: 20px;
     --min-sidebar-width: 256px;
-    --primary-text-color: var(--paper-grey-900);
-    --secondary-text-color: var(--paper-grey-600);
+    --primary-text-color: var(--google-grey-900);
+    --secondary-text-color: var(--google-grey-700);
     --splitter-width: 15px;
   }
 </style>

chrome/browser/resources/md_downloads/item.html

@@ -34,9 +34,12 @@
 
       #date {
         color: var(--paper-grey-700);
-        font-size: 100%;
-        font-weight: 500;
+        font-size: 123%;
+        font-weight: 400;
+        letter-spacing: .25px;
         margin: 24px auto 10px;
+        padding-bottom: 4px;
+        padding-top: 8px;
         width: var(--downloads-card-width);
       }
 

chrome/browser/resources/md_extensions/item.html

@@ -118,9 +118,7 @@
       #extension-id,
       #inspect-views,
       #button-strip {
-        /* TODO(dschuyler): use --cr-secondary-text. */
-        color: var(--paper-grey-600);
-        font-weight: 400;
+        @apply --cr-secondary-text;
       }
 
       #extension-id {

chrome/browser/resources/md_extensions/item_list.html

@@ -54,8 +54,13 @@
 
       #app-title {
         @apply --cr-section-text;
+        font-size: 123%;
+        font-weight: 400;
+        letter-spacing: .25px;
         margin-bottom: 12px;
         margin-top: 21px;
+        padding-bottom: 4px;
+        padding-top: 8px;
       }
     </style>
     <div id="container">

chrome/browser/resources/md_history/history.html

@@ -56,6 +56,7 @@
       background: var(--md-toolbar-color);
       color: #fff;
       height: 56px;
+      letter-spacing: .25px;
     }
 
     #loading-message {

chrome/browser/resources/md_history/history_item.html

@@ -41,6 +41,11 @@
 
       :host([is-card-start]) #date-accessed {
         display: block;
+        font-size: 123%;
+        font-weight: 400;
+        letter-spacing: .25px;
+        padding-bottom: 4px;
+        padding-top: 8px;
       }
 
       #item-container {

chrome/browser/resources/md_history/shared_vars.html

@@ -26,8 +26,8 @@
     --iron-icon-height: var(--cr-icon-size);
     --iron-icon-width: var(--cr-icon-size);
     --link-color: var(--google-blue-700);
-    --primary-text-color: var(--paper-grey-900);
-    --secondary-text-color: var(--paper-grey-600);
+    --primary-text-color: var(--google-grey-900);
+    --secondary-text-color: var(--google-grey-700);
     --separator-color: rgba(0, 0, 0, 0.08);
     --side-bar-width: 256px;
     --sidebar-footer-text-color: #6e6e6e;

chrome/browser/resources/md_user_manager/shared_styles.html

@@ -7,7 +7,7 @@
       :root {
         --error-color: var(--google-red-700);
         --page-width: 624px;
-        --primary-text-color: var(--paper-grey-800);
+        --primary-text-color: var(--google-grey-900);
         --title-icon-color: var(--paper-grey-500);
         --user-manager-separator-line: 1px solid rgba(0, 0, 0, .12);
       }

chrome/browser/resources/pdf/elements/shared-vars.html

@@ -5,7 +5,7 @@
 <custom-style>
 <style is="custom-style">
   html {
-    --primary-text-color: var(--paper-grey-900);
+    --primary-text-color: var(--google-grey-900);
     --iron-icon-height: 20px;
     --iron-icon-width: 20px;
     --paper-icon-button: {

chrome/browser/resources/settings/settings_page/settings_section.html

@@ -21,8 +21,13 @@
 
       #header .title {
         @apply --cr-section-text;
+        font-size: 123%;
+        font-weight: 400;
+        letter-spacing: .25px;
         margin-bottom: 0;
         margin-top: var(--settings-page-vertical-margin);
+        padding-bottom: 4px;
+        padding-top: 8px;
       }
 
       #card {

chrome/browser/resources/settings/settings_page/settings_subpage.html

@@ -47,6 +47,7 @@
       }
 
       h1 {
+        color: var(--google-grey-700);
         flex: 1;  /* Push other items to the end. */
         @apply --cr-title-text;
       }

chrome/browser/resources/settings/settings_shared_css.html

@@ -20,7 +20,7 @@
       h2 {
         align-items: center;
         align-self: flex-start;
-        color: var(--paper-grey-600);
+        color: var(--google-grey-900);
         display: flex;
         font-size: inherit;
         font-weight: 500;
@@ -322,7 +322,7 @@
       }
 
       .column-header {
-        color: var(--paper-grey-600);
+        color: var(--google-grey-600);
         font-weight: 500;
       }
 

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/default-theme.html">
@@ -60,6 +61,7 @@
       :host ::slotted([slot=body]) {
         -webkit-padding-end: 20px;
         -webkit-padding-start: 20px;
+        color: var(--secondary-text-color);
         padding-bottom: 0;
         padding-top: 0;
         @apply --cr-dialog-body;
@@ -76,6 +78,7 @@
       :host ::slotted([slot=title]) {
         -webkit-padding-end: 20px;
         -webkit-padding-start: 20px;
+        color: var(--primary-text-color);
         flex: 1;
         font-size: calc(15 / 13 * 100%);
         line-height: 1;

ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html

@@ -70,9 +70,7 @@
       }
 
       #subLabel {
-        /* TODO(dschuyler): replace with: @apply --cr-secondary-text; */
-        color: var(--paper-grey-600);
-        font-weight: 400;
+        @apply --cr-secondary-text;
       }
     </style>
     <button disabled="[[disabled]]">

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

@@ -25,6 +25,7 @@
         flex: 1;
         font-size: 123%;
         font-weight: 400;
+        letter-spacing: .25px;
         line-height: normal;
       }
 

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -6,6 +6,9 @@
 <custom-style>
 <style is="custom-style">
   html {
+    --primary-text-color: var(--google-grey-900);
+    --secondary-text-color: var(--google-grey-700);
+
     --cr-actionable: {
       cursor: pointer;
     };
@@ -47,12 +50,12 @@
     }
 
     --cr-primary-text: {
-        color: var(--paper-grey-900);
+        color: var(--primary-text-color);
         line-height: 154%;  /* 20px. */
      }
 
     --cr-secondary-text: {
-      color: var(--paper-grey-600);
+      color: var(--secondary-text-color);
       font-weight: 400;
     }
 
@@ -89,7 +92,7 @@
     };
 
     --cr-section-text: {
-        color: var(--paper-grey-700);
+        color: var(--google-grey-700);
         font-size: 100%;  /* Likely to be 13px. */
         font-weight: 500;
     };
@@ -153,6 +156,7 @@
     --google-grey-refresh-100: #F1F3F4;
     --google-grey-200: #E8EAED;
     --google-grey-400: #BDC1C6;
+    --google-grey-600: #80868B;
     --google-grey-900: #202124;
     --google-red-600: #D93025;
   }