| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 // See http://www.google.com/design/spec/style/typography.html | 5 // See http://www.google.com/design/spec/style/typography.html |
| 6 | 6 |
| 7 const String _display4 = 'font-size: 112px; font-weight: 300'; | 7 import 'dart:sky'; |
| 8 const String _display3 = 'font-size: 56px; font-weight: 400'; | |
| 9 const String _display2 = 'font-size: 45px; font-weight: 400'; | |
| 10 const String _display1 = 'font-size: 34px; font-weight: 400'; | |
| 11 const String _headline = 'font-size: 24px; font-weight: 400'; | |
| 12 const String _title = 'font-size: 20px; font-weight: 500'; | |
| 13 const String _subhead = 'font-size: 16px; font-weight: 400'; | |
| 14 const String _body2 = 'font-size: 14px; font-weight: 500'; | |
| 15 const String _body1 = 'font-size: 14px; font-weight: 400'; | |
| 16 const String _caption = 'font-size: 12px; font-weight: 400'; | |
| 17 const String _button = 'font-size: 14px; font-weight: 500'; | |
| 18 | 8 |
| 19 class _Black { | 9 import '../rendering/paragraph.dart'; |
| 20 final String display4 = 'color: #757575; ${_display4}'; // 54% | |
| 21 final String display3 = 'color: #757575; ${_display3}'; // 54% | |
| 22 final String display2 = 'color: #757575; ${_display2}'; // 54% | |
| 23 final String display1 = 'color: #757575; ${_display1}'; // 54% | |
| 24 final String headline = 'color: #212121; ${_headline}'; // 87% | |
| 25 final String title = 'color: #212121; ${_title}'; // 87% | |
| 26 final String subhead = 'color: #212121; ${_subhead}'; // 87% | |
| 27 final String body2 = 'color: #212121; ${_body2}'; // 87% | |
| 28 final String body1 = 'color: #212121; ${_body1}'; // 87% | |
| 29 final String caption = 'color: #757575; ${_caption}'; // 54% | |
| 30 final String button = 'color: #212121; ${_button}'; // 87% | |
| 31 | 10 |
| 32 const _Black(); | 11 // TODO(eseidel): Font weights are supposed to be language relative! |
| 12 // These values are for English-like text. |
| 13 class _TextTheme { |
| 14 _TextTheme(Color color54, Color color87) |
| 15 : display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.light,
color: color54), |
| 16 display3 = new TextStyle(fontSize: 56.0, fontWeight: FontWeight.regular,
color: color54), |
| 17 display2 = new TextStyle(fontSize: 45.0, fontWeight: FontWeight.regular,
color: color54), |
| 18 display1 = new TextStyle(fontSize: 34.0, fontWeight: FontWeight.regular,
color: color54), |
| 19 headline = new TextStyle(fontSize: 24.0, fontWeight: FontWeight.regular,
color: color87), |
| 20 title = new TextStyle(fontSize: 20.0, fontWeight: FontWeight.medium,
color: color87), |
| 21 subhead = new TextStyle(fontSize: 16.0, fontWeight: FontWeight.regular,
color: color87), |
| 22 body2 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.medium,
color: color87), |
| 23 body1 = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.regular,
color: color87), |
| 24 caption = new TextStyle(fontSize: 12.0, fontWeight: FontWeight.regular,
color: color54), |
| 25 button = new TextStyle(fontSize: 14.0, fontWeight: FontWeight.medium,
color: color87); |
| 26 |
| 27 final TextStyle display4; |
| 28 final TextStyle display3; |
| 29 final TextStyle display2; |
| 30 final TextStyle display1; |
| 31 final TextStyle headline; |
| 32 final TextStyle title; |
| 33 final TextStyle subhead; |
| 34 final TextStyle body2; |
| 35 final TextStyle body1; |
| 36 final TextStyle caption; |
| 37 final TextStyle button; |
| 33 } | 38 } |
| 34 | 39 |
| 35 const _Black black = const _Black(); | |
| 36 | 40 |
| 37 class _White { | 41 final _TextTheme black = new _TextTheme( |
| 38 final String display4 = 'color: #8A8A8A; ${_display4}'; // 54% | 42 const Color(0xFF757575), |
| 39 final String display3 = 'color: #8A8A8A; ${_display3}'; // 54% | 43 const Color(0xFF212121) |
| 40 final String display2 = 'color: #8A8A8A; ${_display2}'; // 54% | 44 ); |
| 41 final String display1 = 'color: #8A8A8A; ${_display1}'; // 54% | |
| 42 final String headline = 'color: #DEDEDE; ${_headline}'; // 87% | |
| 43 final String title = 'color: #DEDEDE; ${_title}'; // 87% | |
| 44 final String subhead = 'color: #DEDEDE; ${_subhead}'; // 87% | |
| 45 final String body2 = 'color: #DEDEDE; ${_body2}'; // 87% | |
| 46 final String body1 = 'color: #DEDEDE; ${_body1}'; // 87% | |
| 47 final String caption = 'color: #8A8A8A; ${_caption}'; // 54% | |
| 48 final String button = 'color: #DEDEDE; ${_button}'; // 87% | |
| 49 | 45 |
| 50 const _White(); | |
| 51 } | |
| 52 | 46 |
| 53 const _White white = const _White(); | 47 final _TextTheme white = new _TextTheme( |
| 48 const Color(0xFF8A8A8A), |
| 49 const Color(0xFFDEDEDE) |
| 50 ); |
| 54 | 51 |
| 55 // TODO(abarth): Maybe this should be hard-coded in Scaffold? | 52 // TODO(abarth): Maybe this should be hard-coded in Scaffold? |
| 56 const String typeface = 'font-family: sans-serif'; | 53 const String typeface = 'font-family: sans-serif'; |
| OLD | NEW |