Add TextStyle fontFamily:, extend support for fontWeight:

Defined constants for all 9 CSS font-weight values
with conventional names from the "Common weight
name mapping" section of
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight.

The FontWeight enum now just enumerates the actual
CSS weight values.

I've moved the TextStyle class into its own file.

R=ianh@google.com

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

examples/rendering/interactive_flex.dart

@@ -6,6 +6,7 @@ import 'dart:sky';
 import 'dart:math' as math;
 import 'package:sky/framework/net/image_cache.dart' as image_cache;
 import 'package:sky/app/view.dart';
+import 'package:sky/painting/text_style.dart';
 import 'package:sky/rendering/box.dart';
 import 'package:sky/rendering/block.dart';
 import 'package:sky/rendering/flex.dart';

examples/rendering/render_paragraph.dart

@@ -4,6 +4,7 @@
 
 import 'dart:sky';
 import 'package:sky/app/view.dart';
+import 'package:sky/painting/text_style.dart';
 import 'package:sky/rendering/box.dart';
 import 'package:sky/rendering/object.dart';
 import 'package:sky/rendering/flex.dart';

examples/stocks2/lib/stock_row.dart

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:sky/painting/text_style.dart';
 import 'package:sky/rendering/box.dart';
 import 'package:sky/theme2/typography.dart' as typography;
 import 'package:sky/widgets/ink_well.dart';
 import 'package:sky/widgets/basic.dart';
-import 'package:sky/rendering/paragraph.dart';
 
 import 'stock_arrow.dart';
 import 'stock_data.dart';

sdk/BUILD.gn

@@ -69,6 +69,7 @@ dart_pkg("sdk") {
     "lib/internals.dart",
     "lib/painting/box_painter.dart",
     "lib/painting/shadows.dart",
+    "lib/painting/text_style.dart",
     "lib/rendering/block.dart",
     "lib/rendering/box.dart",
     "lib/rendering/flex.dart",

sdk/lib/painting/text_style.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.
+
+import 'dart:sky';
+
+enum FontWeight {
+  w100,
+  w200,
+  w300,
+  w400,
+  w500,
+  w600,
+  w700,
+  w800,
+  w900
+}
+
+const thin = FontWeight.w100;
+const extraLight = FontWeight.w200;
+const light = FontWeight.w300;
+const normal = FontWeight.w400;
+const medium = FontWeight.w500;
+const semiBold = FontWeight.w600;
+const bold = FontWeight.w700;
+const extraBold = FontWeight.w800;
+const black = FontWeight.w900;
+
+enum TextAlign {
+  left,
+  right,
+  center
+}
+
+class TextStyle {
+  const TextStyle({
+    this.color,
+    this.fontFamily,
+    this.fontSize,
+    this.fontWeight,
+    this.textAlign
+  });
+
+  final Color color;
+  final String fontFamily;
+  final double fontSize; // in pixels
+  final FontWeight fontWeight;
+  final TextAlign textAlign;
+
+  TextStyle copyWith({
+    Color color,
+    double fontSize,
+    FontWeight fontWeight,
+    TextAlign textAlign
+  }) {
+    return new TextStyle(
+      color: color != null ? color : this.color,
+      fontFamily: fontFamily != null ? fontFamily : this.fontFamily,
+      fontSize: fontSize != null ? fontSize : this.fontSize,
+      fontWeight: fontWeight != null ? fontWeight : this.fontWeight,
+      textAlign: textAlign != null ? textAlign : this.textAlign
+    );
+  }
+
+  bool operator ==(other) {
+    return other is TextStyle &&
+      color == other.color &&
+      fontFamily == other.fontFamily && 
+      fontSize == other.fontSize &&
+      fontWeight == other.fontWeight &&
+      textAlign == other.textAlign;
+  }
+
+  int get hashCode {
+    // Use Quiver: https://github.com/domokit/mojo/issues/236
+    int value = 373;
+    value = 37 * value + color.hashCode;
+    value = 37 * value + fontFamily.hashCode;
+    value = 37 * value + fontSize.hashCode;
+    value = 37 * value + fontWeight.hashCode;
+    value = 37 * value + textAlign.hashCode;
+    return value;
+  }
+
+  void applyToCSSStyle(CSSStyleDeclaration cssStyle) {
+    if (color != null) {
+      cssStyle['color'] = 'rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 255.0})';
+    }
+    // TODO(hansmuller): escape the fontFamily string.
+    if (fontFamily != null) {
+      cssStyle['font-family'] = fontFamily;
+    }
+    if (fontSize != null) {
+      cssStyle['font-size'] = "${fontSize}px";
+    }
+    if (fontWeight != null) {
+      cssStyle['font-weight'] = const {
+        FontWeight.w100: '100',
+        FontWeight.w200: '200',
+        FontWeight.w300: '300',
+        FontWeight.w400: '400',
+        FontWeight.w500: '500',
+        FontWeight.w600: '600',
+        FontWeight.w700: '700',
+        FontWeight.w800: '800',
+        FontWeight.w900: '900'
+      }[fontWeight];
+    }
+    if (textAlign != null) {
+      cssStyle['text-align'] = const {
+        TextAlign.left: 'left',
+        TextAlign.right: 'right',
+        TextAlign.center: 'center',
+      }[textAlign];
+    }
+  }
+
+  String toString([String prefix = '']) {
+    List<String> result = [];
+    if (color != null)
+      result.add('${prefix}color: $color');
+    // TODO(hansmuller): escape the fontFamily string.
+    if (fontFamily != null)
+      result.add('${prefix}fontFamily: "${fontFamily}"');
+    if (fontSize != null)
+      result.add('${prefix}fontSize: $fontSize');
+    if (fontWeight != null)
+      result.add('${prefix}fontWeight: $fontWeight');
+    if (textAlign != null)
+      result.add('${prefix}textAlign: $textAlign');
+    if (result.isEmpty)
+      return '${prefix}<no style specified>';
+    return result.join('\n');
+  }
+}

sdk/lib/rendering/paragraph.dart

@@ -6,102 +6,7 @@ import 'dart:sky' as sky;
 
 import 'box.dart';
 import 'object.dart';
-
-enum FontWeight {
-  light, // 300
-  regular, // 400
-  medium, // 500
-}
-
-enum TextAlign {
-  left,
-  right,
-  center
-}
-
-class TextStyle {
-  const TextStyle({
-    this.color,
-    this.fontSize,
-    this.fontWeight,
-    this.textAlign
-  });
-
-  final Color color;
-  final double fontSize; // in pixels
-  final FontWeight fontWeight;
-  final TextAlign textAlign;
-
-  TextStyle copyWith({
-    Color color,
-    double fontSize,
-    FontWeight fontWeight,
-    TextAlign textAlign
-  }) {
-    return new TextStyle(
-      color: color != null ? color : this.color,
-      fontSize: fontSize != null ? fontSize : this.fontSize,
-      fontWeight: fontWeight != null ? fontWeight : this.fontWeight,
-      textAlign: textAlign != null ? textAlign : this.textAlign
-    );
-  }
-
-  bool operator ==(other) {
-    return other is TextStyle &&
-      color == other.color &&
-      fontSize == other.fontSize &&
-      fontWeight == other.fontWeight &&
-      textAlign == other.textAlign;
-  }
-
-  int get hashCode {
-    // Use Quiver: https://github.com/domokit/mojo/issues/236
-    int value = 373;
-    value = 37 * value + color.hashCode;
-    value = 37 * value + fontSize.hashCode;
-    value = 37 * value + fontWeight.hashCode;
-    value = 37 * value + textAlign.hashCode;
-    return value;
-  }
-
-  void _applyToCSSStyle(sky.CSSStyleDeclaration cssStyle) {
-    if (color != null) {
-      cssStyle['color'] = 'rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha / 255.0})';
-    }
-    if (fontSize != null) {
-      cssStyle['font-size'] = "${fontSize}px";
-    }
-    if (fontWeight != null) {
-      cssStyle['font-weight'] = const {
-        FontWeight.light: '300',
-        FontWeight.regular: '400',
-        FontWeight.medium: '500',
-      }[fontWeight];
-    }
-    if (textAlign != null) {
-      cssStyle['text-align'] = const {
-        TextAlign.left: 'left',
-        TextAlign.right: 'right',
-        TextAlign.center: 'center',
-      }[textAlign];
-    }
-  }
-
-  String toString([String prefix = '']) {
-    List<String> result = [];
-    if (color != null)
-      result.add('${prefix}color: $color');
-    if (fontSize != null)
-      result.add('${prefix}fontSize: $fontSize');
-    if (fontWeight != null)
-      result.add('${prefix}fontWeight: $fontWeight');
-    if (textAlign != null)
-      result.add('${prefix}textAlign: $textAlign');
-    if (result.isEmpty)
-      return '${prefix}<no style specified>';
-    return result.join('\n');
-  }
-}
+import '../painting/text_style.dart';
 
 abstract class InlineBase {
   sky.Node _toDOM(sky.Document owner);
@@ -133,7 +38,7 @@ class InlineStyle extends InlineBase {
 
   sky.Node _toDOM(sky.Document owner) {
     sky.Element parent = owner.createElement('t');
-    style._applyToCSSStyle(parent.style);
+    style.applyToCSSStyle(parent.style);
     for (InlineBase child in children) {
       parent.appendChild(child._toDOM(owner));
     }

sdk/lib/theme2/typography.dart

@@ -6,23 +6,23 @@
 
 import 'dart:sky';
 
-import '../rendering/paragraph.dart';
+import '../painting/text_style.dart';
 
 // TODO(eseidel): Font weights are supposed to be language relative!
 // These values are for English-like text.
 class _TextTheme {
   _TextTheme(Color color54, Color color87)
-    : display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.light,   color: color54),
-      display3 = new TextStyle(fontSize:  56.0, fontWeight: FontWeight.regular, color: color54),
-      display2 = new TextStyle(fontSize:  45.0, fontWeight: FontWeight.regular, color: color54),
-      display1 = new TextStyle(fontSize:  34.0, fontWeight: FontWeight.regular, color: color54),
-      headline = new TextStyle(fontSize:  24.0, fontWeight: FontWeight.regular, color: color87),
-      title    = new TextStyle(fontSize:  20.0, fontWeight: FontWeight.medium,  color: color87),
-      subhead  = new TextStyle(fontSize:  16.0, fontWeight: FontWeight.regular, color: color87),
-      body2    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.medium,  color: color87),
-      body1    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.regular, color: color87),
-      caption  = new TextStyle(fontSize:  12.0, fontWeight: FontWeight.regular, color: color54),
-      button   = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.medium,  color: color87);
+    : display4 = new TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: color54),
+      display3 = new TextStyle(fontSize:  56.0, fontWeight: FontWeight.w400, color: color54),
+      display2 = new TextStyle(fontSize:  45.0, fontWeight: FontWeight.w400, color: color54),
+      display1 = new TextStyle(fontSize:  34.0, fontWeight: FontWeight.w400, color: color54),
+      headline = new TextStyle(fontSize:  24.0, fontWeight: FontWeight.w400, color: color87),
+      title    = new TextStyle(fontSize:  20.0, fontWeight: FontWeight.w500, color: color87),
+      subhead  = new TextStyle(fontSize:  16.0, fontWeight: FontWeight.w400, color: color87),
+      body2    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: color87),
+      body1    = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w400, color: color87),
+      caption  = new TextStyle(fontSize:  12.0, fontWeight: FontWeight.w400, color: color54),
+      button   = new TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: color87);
 
   final TextStyle display4;
   final TextStyle display3;

sdk/lib/widgets/basic.dart

@@ -4,6 +4,7 @@
 
 import 'package:vector_math/vector_math.dart';
 
+import '../painting/text_style.dart';
 import '../rendering/block.dart';
 import '../rendering/box.dart';
 import '../rendering/flex.dart';