Commit 74cfcc4d authored by Adam Barth's avatar Adam Barth

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
parent 914d9359
......@@ -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;'''
);
......
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(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment