From f93040ee4d06d833a07d1f55d1b011c83390270f Mon Sep 17 00:00:00 2001
From: Jared Tarnasky <tarnasky@users.noreply.github.com>
Date: Wed, 2 Aug 2017 11:29:04 -0500
Subject: [PATCH] Add variables for the App Bar's font size and weight. (#1518)

Add variables for the App Bar's font size and weight and align the defaults to Google's Material Design specs, which say "Across form factors, text that appears in the app bar should use the Title style, Medium 20sp." (see https://material.io/guidelines/style/typography.html).
---
 components/app_bar/config.css | 2 ++
 components/app_bar/theme.css  | 9 ++-------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/app_bar/config.css b/components/app_bar/config.css
index ca3ba1b4..a3851e20 100644
--- a/components/app_bar/config.css
+++ b/components/app_bar/config.css
@@ -1,6 +1,8 @@
 :root {
   --appbar-color: var(--color-primary-dark);
   --appbar-contrast: var(--color-primary-contrast);
+  --appbar-title-font-size: calc(2 * var(--unit));
+  --appbar-title-font-weight: 500;
   --appbar-title-total-distance: calc(8 * var(--unit));
   --appbar-height: calc(6.4 * var(--unit));
   --appbar-height-m-portrait: calc(5.6 * var(--unit));
diff --git a/components/app_bar/theme.css b/components/app_bar/theme.css
index 8b9282b4..3f183681 100644
--- a/components/app_bar/theme.css
+++ b/components/app_bar/theme.css
@@ -54,16 +54,11 @@
 
 .title {
   flex-grow: 1;
-  font-size: calc(1.8 * var(--unit));
-  font-weight: bold;
+  font-size: var(--appbar-title-font-size);
+  font-weight: var(--appbar-title-font-weight);
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-
-  & > small {
-    font-size: calc(1.8 * var(--unit));
-    font-weight: normal;
-  }
 }
 
 .leftIcon {