Chrome OS OOBE: Use Google Sans for OOBE buttons and titles.

Bug: 828996,868093
Change-Id: Ic1dd75cc142bd22b2b9edc31bd5b90abe150e081
Reviewed-on: https://chromium-review.googlesource.com/1170430Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582292}

chrome/browser/resources/chromeos/login/oobe_buttons.html

@@ -56,6 +56,7 @@
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning"></style>
     <style include="paper-button-style cr-icons cr-shared-style"></style>
+    <link rel="stylesheet" href="oobe_fonts.css">
     <link rel="stylesheet" href="oobe_text_buttons.css">
     <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]"
         inverse$="[[inverse]]" aria-label$="[[labelForAria]]"
@@ -90,8 +91,9 @@
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning"></style>
     <style include="paper-button-style cr-icons cr-shared-style"></style>
-    <link rel="stylesheet" href="oobe_back_button.css">
+    <link rel="stylesheet" href="oobe_fonts.css">
     <link rel="stylesheet" href="oobe_text_buttons.css">
+    <link rel="stylesheet" href="oobe_back_button.css">
     <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
         aria-label$="[[labelForAria]]" class="action-button">
       <div class="flex horizontal layout start center">
@@ -111,8 +113,9 @@
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning"></style>
     <style include="paper-button-style cr-icons cr-shared-style"></style>
-    <link rel="stylesheet" href="oobe_next_button.css">
+    <link rel="stylesheet" href="oobe_fonts.css">
     <link rel="stylesheet" href="oobe_text_buttons.css">
+    <link rel="stylesheet" href="oobe_next_button.css">
     <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
         class="action-button">
       <div class="flex horizontal layout start center">
@@ -146,6 +149,7 @@
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning"></style>
     <style include="paper-button-style cr-icons cr-shared-style"></style>
+    <link rel="stylesheet" href="oobe_fonts.css">
     <link rel="stylesheet" href="oobe_text_buttons.css">
     <link rel="stylesheet" href="oobe_welcome_secondary_button.css">
     <paper-button id="button" aria-label$="[[labelForAria]]">

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

@@ -25,6 +25,7 @@
 
 #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;
   margin: 0;

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

@@ -52,6 +52,7 @@
 -->
 <dom-module id="oobe-dialog">
   <template>
+    <link rel="stylesheet" href="oobe_fonts.css">
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="oobe_dialog.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">

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

+/* Copyright 2018 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+:root {
+  --oobe-button-font-family: "Google Sans", Roboto, sans-serif;
+  --oobe-title-font-family: "Google Sans", Roboto, sans-serif;
+}

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

@@ -20,7 +20,8 @@
 
 .reset-popup h1 {
   color: var(--google-grey-900);
-  font: 15px Roboto, sans-serif;
+  font-family: var(--oobe-button-font-family);
+  font-size: 15px;
   margin-bottom: 0;
   margin-top: 0;
   padding: 16px 20px;

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

@@ -5,8 +5,6 @@
  * This contains common styling for all the OOBE screens. */
 
 :root {
-  --oobe-roboto-medium: 500 12px Roboto;
-  --oobe-roboto-bold: 700 12px Roboto;
   --oobe-text-button-focused-border-color:
       rgba(66, 133, 244, 0.4); /* #4284f4 */
 }

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

@@ -11,5 +11,6 @@
  */
 :host ::slotted(*),
 #text {
+  font-family: var(--oobe-button-font-family);
   font-size: 12px;
 }

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

@@ -17,6 +17,7 @@
 
 #title {
   color: var(--google-grey-900);
+  font-family: var(--oobe-button-font-family);
   font-size: 28px;
   font-weight: 400; /* regular */
   margin: 0;

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

@@ -56,6 +56,7 @@
 
 <dom-module id="oobe-welcome-dialog">
   <template>
+    <link rel="stylesheet" href="oobe_fonts.css">
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_welcome_dialog.css">