firka/flutter
firka/flutter
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix typography to use opacity instead of color value

Browse Source
This commit is contained in:
Collin Jackson 2015-08-21 17:27:18 -07:00
parent 9a493c15e9
commit c8bc9d5613
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/flutter/lib/theme/colors.dart
View File

@ -10,6 +10,10 @@ import 'dart:sky' show Color;
const white = const Color(0xFFFFFFFF); const white = const Color(0xFFFFFFFF);
const black = const Color(0xFF000000); const black = const Color(0xFF000000);
const transparent = const Color(0x00000000); const transparent = const Color(0x00000000);
const white54 = const Color(0x8AFFFFFF);
const white87 = const Color(0xDDFFFFFF);
const black54 = const Color(0x8A000000);
const black87 = const Color(0xDD000000);
const Map<int, Color> Red = const { const Map<int, Color> Red = const {
50: const Color(0xFFFFEBEE), 50: const Color(0xFFFFEBEE),

47
packages/flutter/lib/theme/typography.dart
View File

@ -7,39 +7,38 @@
import 'dart:sky'; import 'dart:sky';
import 'package:sky/painting/text_style.dart'; 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(eseidel): Font weights are supposed to be language relative!
// TODO(jackson): Baseline should be language relative! // TODO(jackson): Baseline should be language relative!
// These values are for English-like text. // These values are for English-like text.
class TextTheme { class TextTheme {
// The two colours used here are 54% and 87%, respectively, of the base color (black or white)
const TextTheme._black() const TextTheme._black()
: display4 = const TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: const Color(0xFF757575), textBaseline: TextBaseline.alphabetic), : 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: const Color(0xFF757575), 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: const Color(0xFF757575), height: 48.0 / 45.0, 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: const Color(0xFF757575), height: 40.0 / 34.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: const Color(0xFF212121), height: 32.0 / 24.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: const Color(0xFF212121), height: 28.0 / 20.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: const Color(0xFF212121), height: 24.0 / 16.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: const Color(0xFF212121), height: 24.0 / 14.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: const Color(0xFF212121), height: 20.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: const Color(0xFF757575), 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: const Color(0xFF212121), textBaseline: TextBaseline.alphabetic); button = const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: colors.black87, textBaseline: TextBaseline.alphabetic);
const TextTheme._white() const TextTheme._white()
: display4 = const TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: const Color(0xFF8A8A8A), textBaseline: TextBaseline.alphabetic), : 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: const Color(0xFF8A8A8A), 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: const Color(0xFF8A8A8A), height: 48.0 / 45.0, 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: const Color(0xFF8A8A8A), height: 40.0 / 34.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: const Color(0xFFDEDEDE), height: 32.0 / 24.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: const Color(0xFFDEDEDE), height: 28.0 / 20.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: const Color(0xFFDEDEDE), height: 24.0 / 16.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: const Color(0xFFDEDEDE), height: 24.0 / 14.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: const Color(0xFFDEDEDE), height: 20.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: const Color(0xFF8A8A8A), 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: const Color(0xFFDEDEDE), textBaseline: TextBaseline.alphabetic); button = const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: colors.white87, textBaseline: TextBaseline.alphabetic);
final TextStyle display4; final TextStyle display4;
final TextStyle display3; final TextStyle display3;