74 lines
4.7 KiB
Dart
74 lines
4.7 KiB
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
|
|
|
|
import 'dart:sky';
|
|
|
|
import 'package:sky/painting/text_style.dart';
|
|
import 'package:sky/theme/colors.dart' as colors;
|
|
|
|
// TODO(eseidel): Font weights are supposed to be language relative!
|
|
// TODO(jackson): Baseline should be language relative!
|
|
// These values are for English-like text.
|
|
class TextTheme {
|
|
|
|
const TextTheme._black()
|
|
: 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);
|
|
|
|
const TextTheme._white()
|
|
: 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);
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
|
const TextTheme black = const TextTheme._black();
|
|
const TextTheme white = const TextTheme._white();
|
|
|
|
// TODO(abarth): Maybe this should be hard-coded in Scaffold?
|
|
const String typeface = 'font-family: sans-serif';
|
|
|
|
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
|
|
);
|