From 74cfcc4d39229b0b0d856fe0dfdf50e80ad991ae Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Mon, 16 Mar 2015 20:53:26 -0700
Subject: [PATCH] Introduce sky/framework/theme/typography.dart

This CL adds typography information to the Sky theme. The values are from the
Material Design spec. I've also applied these values to the stocks app and the
various components.

We're not geting precisely the right typography in some cases because of
https://github.com/domokit/mojo/issues/65.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1006363004
---
 examples/stocks-fn/stockrow.dart  |  5 ++---
 examples/stocks-fn/stocksapp.dart | 34 ++++++++++++++++---------------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/examples/stocks-fn/stockrow.dart b/examples/stocks-fn/stockrow.dart
index 6eb9df64803..4d7d688256e 100644
--- a/examples/stocks-fn/stockrow.dart
+++ b/examples/stocks-fn/stockrow.dart
@@ -16,8 +16,7 @@ class StockRow extends Component {
   );
 
   static Style _tickerStyle = new Style('''
-    flex: 1;
-    font-family: 'Roboto Medium', 'Helvetica';'''
+    flex: 1;'''
   );
 
   static Style _lastSaleStyle = new Style('''
@@ -26,7 +25,7 @@ class StockRow extends Component {
   );
 
   static Style _changeStyle = new Style('''
-    color: #8A8A8A;
+    ${typography.black.caption};
     text-align: right;'''
   );
 
diff --git a/examples/stocks-fn/stocksapp.dart b/examples/stocks-fn/stocksapp.dart
index 9f9da043c55..0f806162de8 100644
--- a/examples/stocks-fn/stocksapp.dart
+++ b/examples/stocks-fn/stocksapp.dart
@@ -1,19 +1,20 @@
 library stocksapp;
 
-import '../../framework/fn.dart';
-import '../../framework/animation/scroll_behavior.dart';
-import '../../framework/components/drawer.dart';
-import '../../framework/components/drawer_header.dart';
-import '../../framework/components/fixed_height_scrollable.dart';
-import '../../framework/components/floating_action_button.dart';
-import '../../framework/components/icon.dart';
-import '../../framework/components/input.dart';
-import '../../framework/components/material.dart';
-import '../../framework/components/menu_divider.dart';
-import '../../framework/components/menu_item.dart';
-import '../../framework/components/action_bar.dart';
 import '../data/stocks.dart';
 import 'dart:math';
+import 'package:sky/framework/animation/scroll_behavior.dart';
+import 'package:sky/framework/components/action_bar.dart';
+import 'package:sky/framework/components/drawer.dart';
+import 'package:sky/framework/components/drawer_header.dart';
+import 'package:sky/framework/components/fixed_height_scrollable.dart';
+import 'package:sky/framework/components/floating_action_button.dart';
+import 'package:sky/framework/components/icon.dart';
+import 'package:sky/framework/components/input.dart';
+import 'package:sky/framework/components/material.dart';
+import 'package:sky/framework/components/menu_divider.dart';
+import 'package:sky/framework/components/menu_item.dart';
+import 'package:sky/framework/fn.dart';
+import 'package:sky/framework/theme/typography.dart' as typography;
 
 part 'stockarrow.dart';
 part 'stocklist.dart';
@@ -27,8 +28,8 @@ class StocksApp extends App {
     display: flex;
     flex-direction: column;
     height: -webkit-fill-available;
-    font-family: 'Roboto Regular', 'Helvetica';
-    font-size: 16px;'''
+    ${typography.typeface};
+    ${typography.black.body1};'''
   );
 
   static Style _iconStyle = new Style('''
@@ -37,7 +38,8 @@ class StocksApp extends App {
 
   static Style _titleStyle = new Style('''
     padding-left: 24px;
-    flex: 1;'''
+    flex: 1;
+    ${typography.white.title};'''
   );
 
   List<Stock> _sortedStocks;
@@ -99,7 +101,7 @@ class StocksApp extends App {
       title = new Input(focused: true, placeholder: 'Search stocks',
           onChanged: _handleSearchQueryChanged);
     } else {
-      title = new Text('I am a stocks app');
+      title = new Text('Stocks');
     }
 
     var toolbar = new ActionBar(