Add support for text styles.

This is a completion of Hans's WIP patch:
https://codereview.chromium.org/1176133002/

Makes it possible for us to style text in fn2 apps.

The title style in the toolbar doesn't look quite right
but as far as I can tell its the same color as the
old typography code produced.  Will need further investigation.

Fixes #213

R=abarth@chromium.org, jackson@google.com

Review URL: https://codereview.chromium.org/1178913003.

examples/stocks2/lib/stock_app.dart

@@ -4,7 +4,9 @@
 
 import 'package:sky/framework/editing2/input.dart';
 import 'package:sky/framework/rendering/box.dart';
+import 'package:sky/framework/rendering/paragraph.dart';
 import 'package:sky/framework/theme2/colors.dart' as colors;
+import 'package:sky/framework/theme2/typography.dart' as typography;
 import 'package:sky/framework/widgets/drawer.dart';
 import 'package:sky/framework/widgets/drawer_header.dart';
 import 'package:sky/framework/widgets/floating_action_button.dart';
@@ -28,9 +30,6 @@ enum StockMode { optimistic, pessimistic }
 
 class StocksApp extends App {
 
-  // static final Style _titleStyle = new Style('''
-  //   ${typography.white.title};''');
-
   List<Stock> _stocks = [];
 
   StocksApp({ RenderView renderViewOverride }) : super(renderViewOverride: renderViewOverride) {
@@ -157,7 +156,7 @@ class StocksApp extends App {
         left: new IconButton(
           icon: 'navigation/menu_white',
           onGestureTap: (_) => _drawerController.toggle()),
-        center: new Text('Stocks'),
+        center: new Text('Stocks', style: typography.white.title),
         right: [
           new IconButton(
             icon: 'action/search_white',

examples/stocks2/lib/stock_row.dart

@@ -5,8 +5,10 @@
 import 'dart:sky' as sky;
 
 import 'package:sky/framework/rendering/box.dart';
-import 'package:sky/framework/widgets/wrappers.dart';
+import 'package:sky/framework/theme2/typography.dart' as typography;
 import 'package:sky/framework/widgets/ink_well.dart';
+import 'package:sky/framework/widgets/wrappers.dart';
+import 'package:sky/framework/rendering/paragraph.dart';
 
 import 'stock_arrow.dart';
 import 'stock_data.dart';
@@ -31,9 +33,12 @@ class StockRow extends Component {
           margin: const EdgeDims.only(right: 5.0)),
       new FlexExpandingChild(new Text(stock.symbol), flex: 2, key: "symbol"),
       // TODO(hansmuller): text-align: right
-      new FlexExpandingChild(new Text(lastSale), key: "lastSale"),
-      // TODO(hansmuller): text-align: right, ${typography.black.caption};
-      new FlexExpandingChild(new Text(changeInPrice), key: "changeInPrice")
+      new FlexExpandingChild(new Text(lastSale,
+            style: const TextStyle(textAlign: TextAlign.right)),
+          key: "lastSale"),
+      new FlexExpandingChild(new Text(changeInPrice,
+          style: typography.black.caption.copyWith(textAlign: TextAlign.right)),
+        key: "changeInPrice")
     ];
 
     // TODO(hansmuller): An explicit |height| shouldn't be needed