scanning: Remove CSS mixins from the Scan app

CSS mixins are no longer necessary and can be replaced with CSS vars.

Bug: 1167325
Change-Id: I39b304e8644c4df511952166f7b30c82d92d359e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2633399Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844821}

chromeos/components/scanning/resources/scan_done_section.html

@@ -5,11 +5,14 @@
   }
 
   .container {
-    @apply --scanning-done-section-option-font;
     align-items: center;
     color: var(--scanning-done-section-option-text-color);
     display: flex;
+    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);
     height: 36px;
+    line-height: var(--scanning-done-section-option-line-height);
     margin-bottom: 8px;
     margin-inline-end: 32px;
     margin-inline-start: 32px;

chromeos/components/scanning/resources/scan_preview.html

 <style include="scanning-shared scanning-fonts">
   #helperText {
-    @apply --scanning-helper-text-font;
     color: var(--scanning-helper-text-color);
+    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);
     margin: auto;
     text-align: center;
     width: 60%;
@@ -15,8 +18,11 @@
 
   #progressText,
   #cancelingText {
-    @apply --scanning-progress-text-font;
     color: var(--scanning-progress-text-color);
+    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);
   }
 
   #scanProgress,

chromeos/components/scanning/resources/scan_settings_section.html

@@ -16,12 +16,15 @@
   }
 
   ::slotted([slot=label]) {
-    @apply --scanning-select-font;
-    color: var(--scanning-select-text-color);
+    color: var(--scanning-scan-setting-text-color);
     flex: none;
     flex-basis: 68px;
     flex-grow: 0;
     flex-shrink: 0;
+    font-family: var(--scanning-scan-setting-font-family);
+    font-size: var(--scanning-scan-setting-font-size);
+    font-weight: var(--scanning-regular-font-weight);
+    line-height: var(--scanning-scan-setting-line-height);
     padding-inline-end: 20px;
     word-break: break-word;
   }

chromeos/components/scanning/resources/scanner_select.html

 <style include="throbber scanning-fonts scanning-shared">
   #scanHelp {
-    @apply --scanning-no-scanners-help-text-font;
     color: var(--scanning-no-scanners-help-text-color);
+    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);
   }
 
   #scanHelpLink {

chromeos/components/scanning/resources/scanning_app.html

 <style include="cr-shared-style scanning-shared scanning-fonts">
   #appTitle {
-    @apply --scanning-section-title-font;
-    color: var(--scanning-section-title-text-color);
+    color: var(--scanning-app-title-text-color);
+    font-family: var(--scanning-app-title-font-family);
+    font-size: var(--scanning-app-title-font-size);
+    font-weight: var(--scanning-medium-font-weight);
+    line-height: var(--scanning-app-title-line-height);
     margin-bottom: 16px;
     margin-inline-end: 0;
     margin-inline-start: 32px;
@@ -10,7 +13,6 @@
   }
 
   #moreSettingsButton {
-    @apply --scanning-more-settings-font;
     --ink-color: var(--menu-text-color);
     --paper-ripple-opacity: 0;
     align-items: center;
@@ -20,7 +22,11 @@
     box-shadow: none;
     color: var(--scanning-more-settings-text-color);
     display: flex;
+    font-family: var(--scanning-more-settings-font-family);
+    font-size: var(--scanning-more-settings-font-size);
+    font-weight: var(--scanning-regular-font-weight);
     height: unset;
+    line-height: var(--scanning-more-settings-line-height);
     margin-bottom: 8px;
     margin-inline-end: 40px;
     margin-inline-start: 32px;

chromeos/components/scanning/resources/scanning_fonts_css.html

 <template>
   <style>
     :host {
+      --scanning-app-title-font-family: "Google Sans", Roboto, sans-serif;
       --scanning-done-section-option-font-family: Roboto;
       --scanning-helper-text-font-family: Roboto;
       --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-scan-setting-font-family: Roboto;
 
+      --scanning-app-title-font-size: 22px;
       --scanning-done-section-option-font-size: 13px;
       --scanning-helper-text-font-size: 13px;
       --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-scan-setting-font-size: 13px;
 
+      --scanning-app-title-line-height: 28px;
       --scanning-done-section-option-line-height: 20px;
       --scanning-helper-text-line-height: 20px;
       --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-scan-setting-line-height: 20px;
 
       --scanning-regular-font-weight: 400;
       --scanning-medium-font-weight: 500;
 
+      --scanning-app-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);
-
-      --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-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);
-      }
+      --scanning-scan-setting-text-color: var(--google-grey-900);
     }
   </style>
 </template>

chromeos/components/scanning/resources/scanning_shared_css.html

@@ -17,9 +17,12 @@
     }
 
     select.md-select {
-      @apply --scanning-select-font;
       background-position-x: calc(100% - 12px);
-      color: var(--scanning-select-text-color);
+      color: var(--scanning-scan-setting-text-color);
+      font-family: var(--scanning-scan-setting-font-family);
+      font-size: var(--scanning-scan-setting-font-size);
+      font-weight: var(--scanning-regular-font-weight);
+      line-height: var(--scanning-scan-setting-line-height);
       padding-inline-end: 32px;
       padding-inline-start: 16px;
     }