scanning: Update fonts in Scan app

Update all fonts in the Scan app to conform to the spec.

Spec: https://carbon.googleplex.com/cros-ux/pages/scanning

Before and after: http://shortn/_w86cpakDzE

Bug: 1059779
Change-Id: I8c9018bc7978a176e0de5846ed8753b21395b15e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2594210
Auto-Submit: Jesse Schettler <jschettler@chromium.org>
Commit-Queue: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837691}

chromeos/components/scanning/resources/scan_done_section.html

@@ -8,9 +8,9 @@
   }
 
   .container {
-    @apply --scanning-done-page-option-font;
+    @apply --scanning-done-section-option-font;
     align-items: center;
-    color: var(--scanning-done-page-option-text-color);
+    color: var(--scanning-done-section-option-text-color);
     display: flex;
     height: 36px;
     margin-bottom: 8px;

chromeos/components/scanning/resources/scan_preview.html

 <style include="scanning-shared scanning-fonts">
   /* Styles part of the string returned by getHelperTextHtml_(). */
   #boldHelperText {
-    font-weight: bold;
+    font-weight: var(--scanning-medium-font-weight);
   }
 
   #helperText {

chromeos/components/scanning/resources/scanner_select.html

-<style include="throbber scanning-shared">
+<style include="throbber scanning-fonts scanning-shared">
   #scanHelp {
-    color: var(--google-grey-700);
-    font-size: 10px;
+    @apply --scanning-no-scanners-help-text-font;
+    color: var(--scanning-no-scanners-help-text-color);
   }
 
   #scanHelpLink {
     color: var(--google-blue-600);
-    font-size: 10px;
     text-decoration: none;
   }
 </style>

chromeos/components/scanning/resources/scanning_app.html

@@ -10,6 +10,7 @@
   }
 
   #moreSettingsButton {
+    @apply --scanning-more-settings-font;
     --ink-color: var(--menu-text-color);
     --paper-ripple-opacity: 0;
     align-items: center;
@@ -17,9 +18,8 @@
     border: none;
     border-radius: initial;
     box-shadow: none;
-    color: var(--menu-text-color);
+    color: var(--scanning-more-settings-text-color);
     display: flex;
-    font-weight: unset;
     height: unset;
     margin-bottom: 8px;
     margin-inline-end: 40px;
@@ -35,8 +35,8 @@
   }
 
   #moreSettingsButton > iron-icon {
-    color: var(--scanning-chevron-icon-color);
-    font-size: var(--scanning-chevron-icon-font-size);
+    height: 20px;
+    width: 20px;
   }
 
   #moreSettingsButton > span {

chromeos/components/scanning/resources/scanning_fonts_css.html

@@ -5,26 +5,37 @@
       --scanning-done-section-option-font-family: Roboto;
       --scanning-helper-text-font-family: "Google Sans", Roboto, sans-serif;
       --scanning-more-settings-font-family: Roboto;
+      --scanning-no-scanners-help-text-font-family: Roboto;
       --scanning-progress-text-font-family: "Google Sans", Roboto, sans-serif;
       --scanning-section-title-font-family: "Google Sans", Roboto, sans-serif;
       --scanning-select-font-family: Roboto;
 
-      --scanning-chevron-icon-font-size: 20px;
-      --scanning-done-section-title-font-size: 20px;
-      --scanning-done-section-options-font-size: 13px;
+      --scanning-done-section-title-font-size: 22px;
+      --scanning-done-section-option-font-size: 13px;
       --scanning-helper-text-font-size: 16px;
       --scanning-more-settings-font-size: 12px;
+      --scanning-no-scanners-help-text-font-size: 10px;
       --scanning-progress-text-font-size: 16px;
       --scanning-section-title-font-size: 22px;
       --scanning-select-font-size: 13px;
 
+      --scanning-done-section-title-line-height: 28px;
+      --scanning-done-section-option-line-height: 20px;
+      --scanning-helper-text-line-height: 24px;
+      --scanning-more-settings-line-height: 18px;
+      --scanning-no-scanners-help-text-line-height: 10px;
+      --scanning-progress-text-line-height: 24px;
+      --scanning-section-title-line-height: 28px;
       --scanning-select-line-height: 20px;
 
-      --scanning-chevron-icon-color: var(--google-grey-700);
+      --scanning-regular-font-weight: 400;
+      --scanning-medium-font-weight: 500;
+
       --scanning-done-section-title-text-color: var(--google-grey-900);
       --scanning-done-section-option-text-color: var(--google-grey-900);
       --scanning-helper-text-color: var(--google-grey-700);
       --scanning-more-settings-text-color: var(--google-grey-700);
+      --scanning-no-scanners-help-text-color: var(--google-grey-700);
       --scanning-progress-text-color: var(--google-grey-700);
       --scanning-section-title-text-color: var(--google-grey-900);
       --scanning-select-text-color: var(--google-grey-900);
@@ -32,32 +43,57 @@
       --scanning-section-title-font: {
         font-family: var(--scanning-section-title-font-family);
         font-size: var(--scanning-section-title-font-size);
+        font-weight: var(--scanning-medium-font-weight);
+        line-height: var(--scanning-section-title-line-height)
       }
 
       --scanning-select-font: {
         font-family: var(--scanning-select-font-family);
         font-size: var(--scanning-select-font-size);
+        font-weight: var(--scanning-regular-font-weight);
         line-height: var(--scanning-select-line-height);
       };
 
       --scanning-helper-text-font: {
         font-family: var(--scanning-helper-text-font-family);
         font-size: var(--scanning-helper-text-font-size);
+        font-weight: var(--scanning-regular-font-weight);
+        line-height: var(--scanning-helper-text-line-height);
+      }
+
+      --scanning-more-settings-font: {
+        font-family: var(--scanning-more-settings-font-family);
+        font-size: var(--scanning-more-settings-font-size);
+        font-weight: var(--scanning-regular-font-weight);
+        line-height: var(--scanning-more-settings-line-height);
+      }
+
+      --scanning-no-scanners-help-text-font: {
+        font-family: var(--scanning-no-scanners-help-text-font-family);
+        font-size: var(--scanning-no-scanners-help-text-font-size);
+        font-weight: var(--scanning-regular-font-weight);
+        line-height: var(--scanning-no-scanners-help-text-line-height);
       }
 
       --scanning-progress-text-font: {
         font-family: var(--scanning-progress-text-font-family);
         font-size: var(--scanning-progress-text-font-size);
+        font-weight: var(--scanning-regular-font-weight);
+        line-height: var(--scanning-progress-text-line-height);
       }
 
       --scanning-done-section-title-font: {
         font-family: var(--scanning-done-section-title-font-family);
         font-size: var(--scanning-done-section-title-font-size);
+        font-weight: var(--scanning-medium-font-weight);
+        line-height: var(--scanning-done-section-title-line-height);
       }
 
       --scanning-done-section-option-font: {
         font-family: var(--scanning-done-section-option-font-family);
         font-size: var(--scanning-done-section-option-font-size);
+        font-weight: var(--scanning-regular-font-weight);
+        line-height: var(--scanning-done-section-option-line-height);
       }
     }
   </style>