From c8bc9d56130ffeb7af1c1a7a9b777235dedcbac1 Mon Sep 17 00:00:00 2001 From: Collin Jackson Date: Fri, 21 Aug 2015 17:27:18 -0700 Subject: [PATCH] Fix typography to use opacity instead of color value --- packages/flutter/lib/theme/colors.dart | 4 ++ packages/flutter/lib/theme/typography.dart | 47 +++++++++++----------- 2 files changed, 27 insertions(+), 24 deletions(-) diff --git a/packages/flutter/lib/theme/colors.dart b/packages/flutter/lib/theme/colors.dart index 344a660369..54fc3caa6d 100644 --- a/packages/flutter/lib/theme/colors.dart +++ b/packages/flutter/lib/theme/colors.dart @@ -10,6 +10,10 @@ import 'dart:sky' show Color; const white = const Color(0xFFFFFFFF); const black = const Color(0xFF000000); 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 Red = const { 50: const Color(0xFFFFEBEE), diff --git a/packages/flutter/lib/theme/typography.dart b/packages/flutter/lib/theme/typography.dart index d540795514..516ee35ba3 100644 --- a/packages/flutter/lib/theme/typography.dart +++ b/packages/flutter/lib/theme/typography.dart @@ -7,39 +7,38 @@ 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 { - // The two colours used here are 54% and 87%, respectively, of the base color (black or white) - const TextTheme._black() - : display4 = const TextStyle(fontSize: 112.0, fontWeight: FontWeight.w100, color: const Color(0xFF757575), textBaseline: TextBaseline.alphabetic), - display3 = const TextStyle(fontSize: 56.0, fontWeight: FontWeight.w400, color: const Color(0xFF757575), textBaseline: TextBaseline.alphabetic), - display2 = const TextStyle(fontSize: 45.0, fontWeight: FontWeight.w400, color: const Color(0xFF757575), 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), - headline = const TextStyle(fontSize: 24.0, fontWeight: FontWeight.w400, color: const Color(0xFF212121), 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), - subhead = const TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400, color: const Color(0xFF212121), 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), - body1 = const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400, color: const Color(0xFF212121), height: 20.0 / 14.0, textBaseline: TextBaseline.alphabetic), - caption = const TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: const Color(0xFF757575), textBaseline: TextBaseline.alphabetic), - button = const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: const Color(0xFF212121), 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: 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: const Color(0xFF8A8A8A), textBaseline: TextBaseline.alphabetic), - display3 = const TextStyle(fontSize: 56.0, fontWeight: FontWeight.w400, color: const Color(0xFF8A8A8A), textBaseline: TextBaseline.alphabetic), - display2 = const TextStyle(fontSize: 45.0, fontWeight: FontWeight.w400, color: const Color(0xFF8A8A8A), 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), - headline = const TextStyle(fontSize: 24.0, fontWeight: FontWeight.w400, color: const Color(0xFFDEDEDE), 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), - subhead = const TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400, color: const Color(0xFFDEDEDE), 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), - body1 = const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w400, color: const Color(0xFFDEDEDE), height: 20.0 / 14.0, textBaseline: TextBaseline.alphabetic), - caption = const TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: const Color(0xFF8A8A8A), textBaseline: TextBaseline.alphabetic), - button = const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: const Color(0xFFDEDEDE), 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: 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;