Add support for text styles - Work In Progress

sky/sdk/lib/framework/theme2/typography.dart

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // See http://www.google.com/design/spec/style/typography.html
 
-const String _display4 = 'font-size: 112px; font-weight: 300';
-const String _display3 = 'font-size:  56px; font-weight: 400';
-const String _display2 = 'font-size:  45px; font-weight: 400';
-const String _display1 = 'font-size:  34px; font-weight: 400';
-const String _headline = 'font-size:  24px; font-weight: 400';
-const String _title    = 'font-size:  20px; font-weight: 500';
-const String _subhead  = 'font-size:  16px; font-weight: 400';
-const String _body2    = 'font-size:  14px; font-weight: 500';
-const String _body1    = 'font-size:  14px; font-weight: 400';
-const String _caption  = 'font-size:  12px; font-weight: 400';
-const String _button   = 'font-size:  14px; font-weight: 500';
+const TextStyle _display4 = const TextStyle(fontSize: '112px', fontWeight: '300');
+const TextStyle _display3 = const TextStyle(fontSize:  '56px', fontWeight: '400');
+const TextStyle _display2 = const TextStyle(fontSize:  '45px', fontWeight: '400');
+const TextStyle _display1 = const TextStyle(fontSize:  '34px', fontWeight: '400');
+const TextStyle _headline = const TextStyle(fontSize:  '24px', fontWeight: '400');
+const TextStyle _title    = const TextStyle(fontSize:  '20px', fontWeight: '500');
+const TextStyle _subhead  = const TextStyle(fontSize:  '16px', fontWeight: '400');
+const TextStyle _body2    = const TextStyle(fontSize:  '14px', fontWeight: '500');
+const TextStyle _body1    = const TextStyle(fontSize:  '14px', fontWeight: '400');
+const TextStyle _caption  = const TextStyle(fontSize:  '12px', fontWeight: '400');
+const TextStyle _button   = const TextStyle(fontSize:  '14px', fontWeight: '500');
 
+// TODO(hansmuller) specify inherited values explicitly, like inherit: _display4
 class _Black {
-  final String display4 = 'color: #757575; ${_display4}'; // 54%
-  final String display3 = 'color: #757575; ${_display3}'; // 54%
-  final String display2 = 'color: #757575; ${_display2}'; // 54%
-  final String display1 = 'color: #757575; ${_display1}'; // 54%
-  final String headline = 'color: #212121; ${_headline}'; // 87%
-  final String title    = 'color: #212121; ${_title}';    // 87%
-  final String subhead  = 'color: #212121; ${_subhead}';  // 87%
-  final String body2    = 'color: #212121; ${_body2}';    // 87%
-  final String body1    = 'color: #212121; ${_body1}';    // 87%
-  final String caption  = 'color: #757575; ${_caption}';  // 54%
-  final String button   = 'color: #212121; ${_button}';   // 87%
+  final TextStyle display4 = const TextStyle(color: const Color(0x757575), fontSize: _display4.fontSize, fontWeight: _display4.fontWeight); // 54%
+  final TextStyle display4 = const TextStyle(color: const Color(0x757575), fontSize: _display4.fontSize, fontWeight: _display4.fontWeight); // 54%
+  final TextStyle display3 = const TextStyle(color: const Color(0x757575), fontSize: _display3.fontSize, fontWeight: _display3.fontWeight); // 54%
+  final TextStyle display2 = const TextStyle(color: const Color(0x757575), fontSize: _display2.fontSize, fontWeight: _display2.fontWeight); // 54%
+  final TextStyle display1 = const TextStyle(color: const Color(0x757575), fontSize: _display1.fontSize, fontWeight: _display1.fontWeight); // 54%
+  final TextStyle headline = const TextStyle(color: const Color(0x212121), fontSize: _headline.fontSize, fontWeight: _headline.fontWeight); // 87%
+  final TextStyle title    = const TextStyle(color: const Color(0x212121), fontSize: _title.fontSize, fontWeight: _title.fontWeight);       // 87%
+  final TextStyle subhead  = const TextStyle(color: const Color(0x212121), fontSize: _subhead.fontSize, fontWeight: _subhead.fontWeight);   // 87%
+  final TextStyle body2    = const TextStyle(color: const Color(0x212121), fontSize: _body2.fontSize, fontWeight: _body2.fontWeight);       // 87%
+  final TextStyle body1    = const TextStyle(color: const Color(0x212121), fontSize: _body1.fontSize, fontWeight: _body1.fontWeight);       // 87%
+  final TextStyle caption  = const TextStyle(color: const Color(0x757575), fontSize: _caption.fontSize, fontWeight: _caption.fontWeight);   // 54%
+  final TextStyle button   = const TextStyle(color: const Color(0x212121), fontSize: _button.fontSize, fontWeight: _button.fontWeight);     // 87%
 
   const _Black();
 }
 
 const _Black black = const _Black();
 
 class _White {
-  final String display4 = 'color: #8A8A8A; ${_display4}'; // 54%
-  final String display3 = 'color: #8A8A8A; ${_display3}'; // 54%
-  final String display2 = 'color: #8A8A8A; ${_display2}'; // 54%
-  final String display1 = 'color: #8A8A8A; ${_display1}'; // 54%
-  final String headline = 'color: #DEDEDE; ${_headline}'; // 87%
-  final String title    = 'color: #DEDEDE; ${_title}';    // 87%
-  final String subhead  = 'color: #DEDEDE; ${_subhead}';  // 87%
-  final String body2    = 'color: #DEDEDE; ${_body2}';    // 87%
-  final String body1    = 'color: #DEDEDE; ${_body1}';    // 87%
-  final String caption  = 'color: #8A8A8A; ${_caption}';  // 54%
-  final String button   = 'color: #DEDEDE; ${_button}';   // 87%
+  final TextStyle display4 = const TextStyle(color: const Color(0x8A8A8A), _display4); // 54%
+  final TextStyle display3 = const TextStyle(color: const Color(0x8A8A8A), _display3); // 54%
+  final TextStyle display2 = const TextStyle(color: const Color(0x8A8A8A), _display2); // 54%
+  final TextStyle display1 = const TextStyle(color: const Color(0x8A8A8A), _display1); // 54%
+  final TextStyle headline = const TextStyle(color: const Color(0xDEDEDE), _headline); // 87%
+  final TextStyle title    = const TextStyle(color: const Color(0xDEDEDE), _title);    // 87%
+  final TextStyle subhead  = const TextStyle(color: const Color(0xDEDEDE), _subhead);  // 87%
+  final TextStyle body2    = const TextStyle(color: const Color(0xDEDEDE), _body2);    // 87%
+  final TextStyle body1    = const TextStyle(color: const Color(0xDEDEDE), _body1);    // 87%
+  final TextStyle caption  = const TextStyle(color: const Color(0x8A8A8A), _caption);  // 54%
+  final String button      = const TextStyle(color: const Color(0xDEDEDE), _button);   // 87%
 
   const _White();
 }
 
 const _White white = const _White();
 
 // TODO(abarth): Maybe this should be hard-coded in Scaffold?
 const String typeface = 'font-family: sans-serif';