typography.dart 4.88 KB
Newer Older
1 2 3 4 5 6
// 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

7
import 'dart:sky' show Color;
8

9
import 'package:sky/painting.dart';
10
import 'package:sky/src/material/colors.dart';
11 12

// TODO(eseidel): Font weights are supposed to be language relative!
13
// TODO(jackson): Baseline should be language relative!
14 15
// These values are for English-like text.
class TextTheme {
16 17

  const TextTheme._black()
18 19 20 21 22 23 24 25 26 27 28
    : display4 = const TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: Colors.black54, textBaseline: TextBaseline.alphabetic),
      display3 = const TextStyle(fontSize:  56.0, fontWeight: FontWeight.w400, color: Colors.black54, textBaseline: TextBaseline.alphabetic),
      display2 = const TextStyle(fontSize:  45.0, fontWeight: FontWeight.w400, color: Colors.black54, height: 48.0 / 45.0, textBaseline: TextBaseline.alphabetic),
      display1 = const TextStyle(fontSize:  34.0, fontWeight: FontWeight.w400, color: Colors.black54, height: 40.0 / 34.0, textBaseline: TextBaseline.alphabetic),
      headline = const TextStyle(fontSize:  24.0, fontWeight: FontWeight.w400, color: Colors.black87, height: 32.0 / 24.0, textBaseline: TextBaseline.alphabetic),
      title    = const TextStyle(fontSize:  20.0, fontWeight: FontWeight.w500, color: Colors.black87, height: 28.0 / 20.0, textBaseline: TextBaseline.alphabetic),
      subhead  = const TextStyle(fontSize:  16.0, fontWeight: FontWeight.w400, color: Colors.black87, height: 24.0 / 16.0, textBaseline: TextBaseline.alphabetic),
      body2    = const TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: Colors.black87, height: 24.0 / 14.0, textBaseline: TextBaseline.alphabetic),
      body1    = const TextStyle(fontSize:  14.0, fontWeight: FontWeight.w400, color: Colors.black87, height: 20.0 / 14.0, textBaseline: TextBaseline.alphabetic),
      caption  = const TextStyle(fontSize:  12.0, fontWeight: FontWeight.w400, color: Colors.black54, textBaseline: TextBaseline.alphabetic),
      button   = const TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: Colors.black87, textBaseline: TextBaseline.alphabetic);
29 30

  const TextTheme._white()
31 32 33 34 35 36 37 38 39 40 41
    : display4 = const TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: Colors.white54, textBaseline: TextBaseline.alphabetic),
      display3 = const TextStyle(fontSize:  56.0, fontWeight: FontWeight.w400, color: Colors.white54, textBaseline: TextBaseline.alphabetic),
      display2 = const TextStyle(fontSize:  45.0, fontWeight: FontWeight.w400, color: Colors.white54, height: 48.0 / 45.0, textBaseline: TextBaseline.alphabetic),
      display1 = const TextStyle(fontSize:  34.0, fontWeight: FontWeight.w400, color: Colors.white54, height: 40.0 / 34.0, textBaseline: TextBaseline.alphabetic),
      headline = const TextStyle(fontSize:  24.0, fontWeight: FontWeight.w400, color: Colors.white87, height: 32.0 / 24.0, textBaseline: TextBaseline.alphabetic),
      title    = const TextStyle(fontSize:  20.0, fontWeight: FontWeight.w500, color: Colors.white87, height: 28.0 / 20.0, textBaseline: TextBaseline.alphabetic),
      subhead  = const TextStyle(fontSize:  16.0, fontWeight: FontWeight.w400, color: Colors.white87, height: 24.0 / 16.0, textBaseline: TextBaseline.alphabetic),
      body2    = const TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: Colors.white87, height: 24.0 / 14.0, textBaseline: TextBaseline.alphabetic),
      body1    = const TextStyle(fontSize:  14.0, fontWeight: FontWeight.w400, color: Colors.white87, height: 20.0 / 14.0, textBaseline: TextBaseline.alphabetic),
      caption  = const TextStyle(fontSize:  12.0, fontWeight: FontWeight.w400, color: Colors.white54, textBaseline: TextBaseline.alphabetic),
      button   = const TextStyle(fontSize:  14.0, fontWeight: FontWeight.w500, color: Colors.white87, textBaseline: TextBaseline.alphabetic);
42 43 44 45 46 47 48 49 50 51 52 53 54

  final TextStyle display4;
  final TextStyle display3;
  final TextStyle display2;
  final TextStyle display1;
  final TextStyle headline;
  final TextStyle title;
  final TextStyle subhead;
  final TextStyle body2;
  final TextStyle body1;
  final TextStyle caption;
  final TextStyle button;

55
}
56

57 58
class Typography {
  Typography._();
59

60 61
  static const TextTheme black = const TextTheme._black();
  static const TextTheme white = const TextTheme._white();
62

63 64
  // TODO(abarth): Maybe this should be hard-coded in Scaffold?
  static const String typeface = 'font-family: sans-serif';
65

66
  // TODO(ianh): Remove this when we remove fn2, now that it's hard-coded in App.
67 68 69 70 71 72 73 74 75 76 77
  static const TextStyle error = const TextStyle(
    color: const Color(0xD0FF0000),
    fontFamily: 'monospace',
    fontSize: 48.0,
    fontWeight: FontWeight.w900,
    textAlign: TextAlign.right,
    decoration: underline,
    decorationColor: const Color(0xFFFF00),
    decorationStyle: TextDecorationStyle.double
  );
}