Update OOBE fonts

Bug: 1000606
Change-Id: I35cb734412924fa0a315063c5ca80556f6bb40fd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1863094
Commit-Queue: Denis Kuznetsov <antrim@chromium.org>
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#706962}

chrome/browser/resources/chromeos/login/app_downloading.css

@@ -4,8 +4,6 @@
 
 :root {
   color: #333;
-  font: 13px Roboto, sans-serif;
-  font-weight: 400; /* roboto-regular */
 }
 
 #app-downloading-video-container {

chrome/browser/resources/chromeos/login/arc_terms_of_service.css

@@ -4,17 +4,11 @@
 
 a {
   color: var(--google-blue-500);
-  font-family: 'Roboto';
-  font-size: 13px;
-  font-weight: 400;
   text-decoration: none;
 }
 
 p {
   color: rgba(0, 0, 0, 0.54);
-  font-family: 'Roboto';
-  font-size: 13px;
-  font-weight: 400;
   line-height: 16px;
   margin: 0;
   padding: 0;

chrome/browser/resources/chromeos/login/demo_preferences.css

@@ -18,5 +18,4 @@
 
 .language-selection-title {
   color: rgba(0, 0, 0, 0.87);
-  font: 13px Roboto, sans-serif;
 }

chrome/browser/resources/chromeos/login/discover/discover_card.css

@@ -7,11 +7,11 @@
   box-shadow: 0 2px 10px rgba(0,0,0,0.18);
   display: flex;
   flex-direction: row;
-  font-family: var(--oobe-title-font-family);
   height: 208px;
   min-height: 0;
   position: relative;
   width: 312px;
+  @apply --oobe-default-font;
 }
 
 :host([highlight]) {
@@ -46,6 +46,7 @@
 
 #title {
   color: rgb(32, 33, 36);
+  font-family: var(--oobe-header-font-family);
   font-size: 18sp;
   line-height: 24px;
 }

chrome/browser/resources/chromeos/login/gaia_card_parameters.css

@@ -14,14 +14,13 @@ gaia-card div.gaia-body-text p {
 }
 
 gaia-card p.enterprise-info {
+  @apply --oobe-default-font;
   color: white;
-  font-size: 15px;
   margin: 8px 0 0 0;
 }
 
 gaia-card h1.welcome-message {
   color: white;
-  font-size: 20px;
-  font-weight: normal;
   margin-bottom: 0;
+  @apply --oobe-header-font;
 }

chrome/browser/resources/chromeos/login/marketing_opt_in.css

@@ -9,7 +9,6 @@
 .marketing-option {
   border-top: var(--marketing-opt-in-dialog-list-item-border);
   color: var(--google-grey-900);
-  font-size: 13px;
   line-height: 20px;
   min-height: 48px;
 }

chrome/browser/resources/chromeos/login/offline_ad_login.css

@@ -22,7 +22,6 @@ oobe-dialog [slot='subtitle'] {
 
 .encryption-subtitle {
   color: --google-grey-600;
-  font: 13px Roboto, sans-serif;
   padding-bottom: 9px;
   padding-top: 9px;
 }

chrome/browser/resources/chromeos/login/oobe_dialog.css

@@ -3,13 +3,12 @@
  * found in the LICENSE file. */
 
 :host {
-  --title-font-size: 28px;
   --title-font-distance-to-baseline: 7px;
-  --subtitle-font-size: 13px;
+  --subtitle-font-size: --oobe-default-font-size;
   --subtitle-font-distance-to-baseline: 3px;
   --subtitle-line-height: 18px;
   --offline-gaia-dialog-width: 768px;
-  font-family: var(--oobe-default-font-family);
+  @apply --oobe-default-font;
 }
 
 #header-container {
@@ -28,10 +27,8 @@
 }
 
 #oobe-title ::slotted(h1) {
-  color: var(--google-grey-900);
-  font-family: var(--oobe-title-font-family);
-  font-size: var(--title-font-size);
-  font-weight: normal;
+  color: var(--oobe-header-text-color);
+  @apply --oobe-header-font;
   margin: 0;
 }
 
@@ -40,8 +37,7 @@
 }
 
 #oobe-subtitle ::slotted(*) {
-  color: var(--google-grey-700);
-  font-size: var(--subtitle-font-size);
+  color: var(--oobe-subheader-text-color);
   line-height: var(--subtitle-line-height);
   /* margin 12px = 32 - line-height
                    - 5 (line height - font size)

chrome/browser/resources/chromeos/login/oobe_eula.css

@@ -59,7 +59,7 @@ cr-toggle {
 
 .password-row div {
   color: rgb(66, 133, 244);
-  font: 24px Roboto;
+  font-size: 24px;
   margin-top: 82px;
 }
 

chrome/browser/resources/chromeos/login/oobe_fonts.css

@@ -5,5 +5,26 @@
 :host {
   --oobe-button-font-family: "Google Sans", Roboto, sans-serif;
   --oobe-default-font-family: Roboto, sans-serif;
-  --oobe-title-font-family: "Google Sans", Roboto, sans-serif;
+  --oobe-header-font-family: "Google Sans", Roboto, sans-serif;
+
+  --oobe-header-font-size: 28px;
+  --oobe-default-font-size: 13px;
+
+  --oobe-default-font-weight: 400; /* regular */
+  --oobe-header-font-weight: 400; /* regular */
+
+  --oobe-header-text-color: var(--google-grey-900);
+  --oobe-subheader-text-color: var(--google-grey-700);
+
+  --oobe-default-font: {
+      font-family: var(--oobe-default-font-family);
+      font-size: var(--oobe-default-font-size);
+      font-weight: var(--oobe-default-font-weight);
+  };
+
+  --oobe-header-font: {
+      font-family: var(--oobe-header-font-family);
+      font-size: var(--oobe-header-font-size);
+      font-weight: var(--oobe-default-font-weight);
+  };
 }

chrome/browser/resources/chromeos/login/oobe_reset.css

@@ -19,7 +19,6 @@ a {
 }
 
 #tpmFirmwareUpdate {
-  font: 13px Roboto, sans-serif;
   margin-bottom: 20px;
   margin-inline-start: 20px;
   margin-top: 23px; /* = 36 - font size */

chrome/browser/resources/chromeos/login/oobe_reset_confirmation_overlay.css

@@ -24,8 +24,8 @@
 }
 
 .reset-popup-content-area {
+  @apply --oobe-default-font;
   color: rgba(0, 0, 0, .54);
-  font: 13px Roboto, sans-serif;
   line-height: 20px;
   padding: 0 20px 20.5px;
 }

chrome/browser/resources/chromeos/login/oobe_update.css

@@ -4,7 +4,6 @@
 
 :host .text {
   color: #333;
-  font: 13px Roboto, sans-serif;
   line-height: 18px;
 }
 

chrome/browser/resources/chromeos/login/oobe_welcome_dialog.css

@@ -5,12 +5,10 @@
 
 #title {
   align-self: center;
-  color: var(--google-grey-900);
-  font-family: var(--oobe-button-font-family);
-  font-size: 28px;
-  font-weight: 400; /* regular */
+  color: var(--oobe-header-text-color);
   margin: 0;
   user-select: none;
+  @apply --oobe-header-font;
 }
 
 .welcome-illustration {

chrome/browser/resources/chromeos/login/sync_consent.css

@@ -4,8 +4,6 @@
 
 :root {
   color: #333;
-  font: 13px Roboto, sans-serif;
-  font-weight: 400; /* roboto-regular */
 }
 
 .overview-list-item {
@@ -83,6 +81,5 @@ cr-radio-button {
 
 #syncConsentMakeChromeSyncOptionsDialog .sync-option-subtitle {
   color: rgba(0, 0, 0, 0.54);
-  font: 13px Roboto, sans-serif;
   padding-inline-start: 8px;
 }