Skip to content

Commit 93a1b7a

Browse files
darrenaustindarrenaustin
authored
Material 3 Typography support. (#97829)
1 parent 26d4e92 commit 93a1b7a

File tree

7 files changed

+346
-3
lines changed

7 files changed

+346
-3
lines changed

‎dev/tools/gen_defaults/bin/gen_defaults.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import 'dart:convert';
1818
import 'dart:io';
1919

2020
import 'package:gen_defaults/fab_template.dart';
21+
import 'package:gen_defaults/typography_template.dart';
2122

2223
Map<String, dynamic> _readTokenFile(String fileName) {
2324
return jsonDecode(File('dev/tools/gen_defaults/data/$fileName').readAsStringSync()) as Map<String, dynamic>;
@@ -70,4 +71,5 @@ Future<void> main(List<String> args) async {
7071
}
7172

7273
FABTemplate('$materialLib/floating_action_button.dart', tokens).updateFile();
74+
TypographyTemplate('$materialLib/typography.dart', tokens).updateFile();
7375
}

‎dev/tools/gen_defaults/lib/template.dart‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@ abstract class TokenTemplate {
8686
}
8787

8888
String textStyle(String tokenName) {
89-
final String fontName = '$tokenName.text-style';
90-
return tokens[fontName]!.toString();
89+
return tokens['$tokenName.text-style']!.toString();
9190
}
9291
}

‎dev/tools/gen_defaults/lib/typography_template.dart‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'template.dart';
6+
7+
class TypographyTemplate extends TokenTemplate {
8+
const TypographyTemplate(String fileName, Map<String, dynamic> tokens) : super(fileName, tokens);
9+
10+
@override
11+
String generate() => '''
12+
// Generated version ${tokens["version"]}
13+
class _M3Typography {
14+
_M3Typography._();
15+
16+
${_textTheme('englishLike', 'alphabetic')}
17+
18+
${_textTheme('dense', 'ideographic')}
19+
20+
${_textTheme('tall', 'alphabetic')}
21+
}
22+
''';
23+
24+
String _textTheme(String name, String baseline) {
25+
final StringBuffer theme = StringBuffer('static const TextTheme $name = TextTheme(\n');
26+
theme.writeln(' displayLarge: ${_textStyleDef('md.sys.typescale.display-large', '$name displayLarge 2021', baseline)},');
27+
theme.writeln(' displayMedium: ${_textStyleDef('md.sys.typescale.display-medium', '$name displayMedium 2021', baseline)},');
28+
theme.writeln(' displaySmall: ${_textStyleDef('md.sys.typescale.display-small', '$name displaySmall 2021', baseline)},');
29+
theme.writeln(' headlineLarge: ${_textStyleDef('md.sys.typescale.headline-large', '$name headlineLarge 2021', baseline)},');
30+
theme.writeln(' headlineMedium: ${_textStyleDef('md.sys.typescale.headline-medium', '$name headlineMedium 2021', baseline)},');
31+
theme.writeln(' headlineSmall: ${_textStyleDef('md.sys.typescale.headline-small', '$name headlineSmall 2021', baseline)},');
32+
theme.writeln(' titleLarge: ${_textStyleDef('md.sys.typescale.title-large', '$name titleLarge 2021', baseline)},');
33+
theme.writeln(' titleMedium: ${_textStyleDef('md.sys.typescale.title-medium', '$name titleMedium 2021', baseline)},');
34+
theme.writeln(' titleSmall: ${_textStyleDef('md.sys.typescale.title-small', '$name titleSmall 2021', baseline)},');
35+
theme.writeln(' labelLarge: ${_textStyleDef('md.sys.typescale.label-large', '$name labelLarge 2021', baseline)},');
36+
theme.writeln(' labelMedium: ${_textStyleDef('md.sys.typescale.label-medium', '$name labelMedium 2021', baseline)},');
37+
theme.writeln(' labelSmall: ${_textStyleDef('md.sys.typescale.label-small', '$name labelSmall 2021', baseline)},');
38+
theme.writeln(' bodyLarge: ${_textStyleDef('md.sys.typescale.body-large', '$name bodyLarge 2021', baseline)},');
39+
theme.writeln(' bodyMedium: ${_textStyleDef('md.sys.typescale.body-medium', '$name bodyMedium 2021', baseline)},');
40+
theme.writeln(' bodySmall: ${_textStyleDef('md.sys.typescale.body-small', '$name bodySmall 2021', baseline)},');
41+
theme.write(' );');
42+
return theme.toString();
43+
}
44+
45+
String _textStyleDef(String tokenName, String debugLabel, String baseline) {
46+
final StringBuffer style = StringBuffer("TextStyle(debugLabel: '$debugLabel'");
47+
style.write(', inherit: false');
48+
style.write(', fontSize: ${_fontSize(tokenName)}');
49+
style.write(', fontWeight: ${_fontWeight(tokenName)}');
50+
style.write(', letterSpacing: ${_fontSpacing(tokenName)}');
51+
style.write(', height: ${_fontHeight(tokenName)}');
52+
style.write(', textBaseline: TextBaseline.$baseline');
53+
style.write(', leadingDistribution: TextLeadingDistribution.even');
54+
style.write(')');
55+
return style.toString();
56+
}
57+
58+
String _fontSize(String textStyleTokenName) {
59+
return tokens['$textStyleTokenName.size']!.toString();
60+
}
61+
62+
String _fontWeight(String textStyleTokenName) {
63+
final String weightValue = tokens[tokens['$textStyleTokenName.weight']!]!.toString();
64+
return 'FontWeight.w$weightValue';
65+
}
66+
67+
String _fontSpacing(String textStyleTokenName) {
68+
return tokens['$textStyleTokenName.tracking']!.toString();
69+
}
70+
71+
String _fontHeight(String textStyleTokenName) {
72+
final double size = tokens['$textStyleTokenName.size']! as double;
73+
final double lineHeight = tokens['$textStyleTokenName.line-height']! as double;
74+
return (lineHeight / size).toStringAsFixed(2);
75+
}
76+
}

‎packages/flutter/lib/src/material/theme_data.dart‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -495,7 +495,7 @@ class ThemeData with Diagnosticable {
495495
splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor;
496496

497497
// TYPOGRAPHY & ICONOGRAPHY
498-
typography ??= Typography.material2014(platform: platform);
498+
typography ??= useMaterial3 ? Typography.material2021(platform: platform) : Typography.material2014(platform: platform);
499499
TextTheme defaultTextTheme = isDark ? typography.white : typography.black;
500500
TextTheme defaultPrimaryTextTheme = primaryIsDark ? typography.white : typography.black;
501501
TextTheme defaultAccentTextTheme = accentIsDark ? typography.white : typography.black;
@@ -1134,6 +1134,9 @@ class ThemeData with Diagnosticable {
11341134
/// start using new colors, typography and other features of Material 3.
11351135
/// If false, they will use the Material 2 look and feel.
11361136
///
1137+
/// If true, the default Typography will be [Typography.material2021],
1138+
/// otherwise it will default to [Typography.material2014].
1139+
///
11371140
/// During the migration to Material 3, turning this on may yield
11381141
/// inconsistent look and feel in your app. Some components will be migrated
11391142
/// before others and typography changes will be coming in stages.

0 commit comments

Comments
 (0)