Skip to content

Commit 322dd06

Browse files
darrenaustindarrenaustin
authored
Updated the M3 textTheme to use onSurface color for all styles. (#116125)
1 parent afda815 commit 322dd06

File tree

7 files changed

+83
-17
lines changed

7 files changed

+83
-17
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -565,7 +565,9 @@ class ThemeData with Diagnosticable {
565565
splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor;
566566

567567
// TYPOGRAPHY & ICONOGRAPHY
568-
typography ??= useMaterial3 ? Typography.material2021(platform: platform) : Typography.material2014(platform: platform);
568+
typography ??= useMaterial3
569+
? Typography.material2021(platform: platform, colorScheme: colorScheme)
570+
: Typography.material2014(platform: platform);
569571
TextTheme defaultTextTheme = isDark ? typography.white : typography.black;
570572
TextTheme defaultPrimaryTextTheme = primaryIsDark ? typography.white : typography.black;
571573
TextTheme defaultAccentTextTheme = accentIsDark ? typography.white : typography.black;

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import 'package:flutter/foundation.dart';
66
import 'package:flutter/painting.dart';
77

8+
import 'color_scheme.dart';
89
import 'colors.dart';
910
import 'text_theme.dart';
1011

@@ -166,20 +167,39 @@ class Typography with Diagnosticable {
166167
/// * <https://m3.material.io/styles/typography>
167168
factory Typography.material2021({
168169
TargetPlatform? platform = TargetPlatform.android,
170+
ColorScheme colorScheme = const ColorScheme.light(),
169171
TextTheme? black,
170172
TextTheme? white,
171173
TextTheme? englishLike,
172174
TextTheme? dense,
173175
TextTheme? tall,
174176
}) {
175177
assert(platform != null || (black != null && white != null));
176-
return Typography._withPlatform(
178+
final Typography base = Typography._withPlatform(
177179
platform,
178180
black, white,
179181
englishLike ?? englishLike2021,
180182
dense ?? dense2021,
181183
tall ?? tall2021,
182184
);
185+
186+
// Ensure they are all uniformly dark or light, with
187+
// no color variation based on style as it was in previous
188+
// versions of Material Design.
189+
final Color dark = colorScheme.brightness == Brightness.light ? colorScheme.onSurface : colorScheme.surface;
190+
final Color light = colorScheme.brightness == Brightness.light ? colorScheme.surface : colorScheme.onSurface;
191+
return base.copyWith(
192+
black: base.black.apply(
193+
displayColor: dark,
194+
bodyColor: dark,
195+
decorationColor: dark
196+
),
197+
white: base.white.apply(
198+
displayColor: light,
199+
bodyColor: light,
200+
decorationColor: light
201+
),
202+
);
183203
}
184204

185205
factory Typography._withPlatform(

‎packages/flutter/test/material/banner_theme_test.dart‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,16 @@ void main() {
6767
});
6868

6969
testWidgets('Passing no MaterialBannerThemeData returns defaults', (WidgetTester tester) async {
70-
final ThemeData theme = ThemeData(useMaterial3: true);
7170
const String contentText = 'Content';
71+
final ThemeData theme = ThemeData(useMaterial3: true);
72+
late final ThemeData localizedTheme;
7273

7374
await tester.pumpWidget(MaterialApp(
7475
theme: theme,
76+
builder:(BuildContext context, Widget? child) {
77+
localizedTheme = Theme.of(context);
78+
return child!;
79+
},
7580
home: Scaffold(
7681
body: MaterialBanner(
7782
content: const Text(contentText),
@@ -93,12 +98,9 @@ void main() {
9398
expect(material.elevation, 0.0);
9499

95100
final RenderParagraph content = _getTextRenderObjectFromDialog(tester, contentText);
96-
// Default value for ThemeData.typography is Typography.material2021()
97101
expect(
98102
content.text.style,
99-
Typography.material2021().englishLike.bodyMedium!.merge(
100-
Typography.material2021().black.bodyMedium,
101-
),
103+
localizedTheme.textTheme.bodyMedium,
102104
);
103105

104106
final Offset rowTopLeft = tester.getTopLeft(find.byType(Row));
@@ -114,15 +116,17 @@ void main() {
114116
});
115117

116118
testWidgets('Passing no MaterialBannerThemeData returns defaults when presented by ScaffoldMessenger', (WidgetTester tester) async {
117-
final ThemeData theme = ThemeData(useMaterial3: true);
118119
const String contentText = 'Content';
119120
const Key tapTarget = Key('tap-target');
121+
final ThemeData theme = ThemeData(useMaterial3: true);
122+
late final ThemeData localizedTheme;
120123

121124
await tester.pumpWidget(MaterialApp(
122125
theme: theme,
123126
home: Scaffold(
124127
body: Builder(
125128
builder: (BuildContext context) {
129+
localizedTheme = Theme.of(context);
126130
return GestureDetector(
127131
key: tapTarget,
128132
onTap: () {
@@ -157,12 +161,9 @@ void main() {
157161
expect(material.elevation, 0.0);
158162

159163
final RenderParagraph content = _getTextRenderObjectFromDialog(tester, contentText);
160-
// Default value for ThemeData.typography is Typography.material2021()
161164
expect(
162165
content.text.style,
163-
Typography.material2021().englishLike.bodyMedium!.merge(
164-
Typography.material2021().black.bodyMedium,
165-
),
166+
localizedTheme.textTheme.bodyMedium,
166167
);
167168

168169
final Offset rowTopLeft = tester.getTopLeft(find.byType(Row));

‎packages/flutter/test/material/list_tile_test.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2230,7 +2230,7 @@ void main() {
22302230
);
22312231
}
22322232

2233-
final ThemeData theme = ThemeData();
2233+
final ThemeData theme = ThemeData(useMaterial3: true);
22342234

22352235
// ListTile - ListTileStyle.list (default).
22362236
await tester.pumpWidget(buildFrame());

‎packages/flutter/test/material/theme_data_test.dart‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,15 +72,15 @@ void main() {
7272
test('light, dark and fallback constructors support useMaterial3', () {
7373
final ThemeData lightTheme = ThemeData.light(useMaterial3: true);
7474
expect(lightTheme.useMaterial3, true);
75-
expect(lightTheme.typography, Typography.material2021());
75+
expect(lightTheme.typography, Typography.material2021(colorScheme: lightTheme.colorScheme));
7676

7777
final ThemeData darkTheme = ThemeData.dark(useMaterial3: true);
7878
expect(darkTheme.useMaterial3, true);
79-
expect(darkTheme.typography, Typography.material2021());
79+
expect(darkTheme.typography, Typography.material2021(colorScheme: darkTheme.colorScheme));
8080

8181
final ThemeData fallbackTheme = ThemeData.light(useMaterial3: true);
8282
expect(fallbackTheme.useMaterial3, true);
83-
expect(fallbackTheme.typography, Typography.material2021());
83+
expect(fallbackTheme.typography, Typography.material2021(colorScheme: fallbackTheme.colorScheme));
8484
});
8585

8686
testWidgets('Defaults to MaterialTapTargetBehavior.padded on mobile platforms and MaterialTapTargetBehavior.shrinkWrap on desktop', (WidgetTester tester) async {

‎packages/flutter/test/material/theme_test.dart‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,8 @@ void main() {
134134

135135
testWidgets('ThemeData with null typography uses proper defaults', (WidgetTester tester) async {
136136
expect(ThemeData().typography, Typography.material2014());
137-
expect(ThemeData(useMaterial3: true).typography, Typography.material2021());
137+
final ThemeData m3Theme = ThemeData(useMaterial3: true);
138+
expect(m3Theme.typography, Typography.material2021(colorScheme: m3Theme.colorScheme));
138139
});
139140

140141
testWidgets('PopupMenu inherits shadowed app theme', (WidgetTester tester) async {

‎packages/flutter/test/material/typography_test.dart‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -363,4 +363,46 @@ void main() {
363363
expect(theme.bodySmall!.textBaseline, TextBaseline.alphabetic);
364364
expect(theme.bodySmall!.leadingDistribution, TextLeadingDistribution.even);
365365
});
366+
367+
test('Default M3 light textTheme styles all use onSurface', () {
368+
final ThemeData theme = ThemeData(useMaterial3: true);
369+
final TextTheme textTheme = theme.textTheme;
370+
final Color dark = theme.colorScheme.onSurface;
371+
expect(textTheme.displayLarge!.color, dark);
372+
expect(textTheme.displayMedium!.color, dark);
373+
expect(textTheme.displaySmall!.color, dark);
374+
expect(textTheme.headlineLarge!.color, dark);
375+
expect(textTheme.headlineMedium!.color, dark);
376+
expect(textTheme.headlineSmall!.color, dark);
377+
expect(textTheme.titleLarge!.color, dark);
378+
expect(textTheme.titleMedium!.color, dark);
379+
expect(textTheme.titleSmall!.color, dark);
380+
expect(textTheme.bodyLarge!.color, dark);
381+
expect(textTheme.bodyMedium!.color, dark);
382+
expect(textTheme.bodySmall!.color, dark);
383+
expect(textTheme.labelLarge!.color, dark);
384+
expect(textTheme.labelMedium!.color, dark);
385+
expect(textTheme.labelSmall!.color, dark);
386+
});
387+
388+
test('Default M3 dark textTheme styles all use onSurface', () {
389+
final ThemeData theme = ThemeData(useMaterial3: true, brightness: Brightness.dark);
390+
final TextTheme textTheme = theme.textTheme;
391+
final Color light = theme.colorScheme.onSurface;
392+
expect(textTheme.displayLarge!.color, light);
393+
expect(textTheme.displayMedium!.color, light);
394+
expect(textTheme.displaySmall!.color, light);
395+
expect(textTheme.headlineLarge!.color, light);
396+
expect(textTheme.headlineMedium!.color, light);
397+
expect(textTheme.headlineSmall!.color, light);
398+
expect(textTheme.titleLarge!.color, light);
399+
expect(textTheme.titleMedium!.color, light);
400+
expect(textTheme.titleSmall!.color, light);
401+
expect(textTheme.bodyLarge!.color, light);
402+
expect(textTheme.bodyMedium!.color, light);
403+
expect(textTheme.bodySmall!.color, light);
404+
expect(textTheme.labelLarge!.color, light);
405+
expect(textTheme.labelMedium!.color, light);
406+
expect(textTheme.labelSmall!.color, light);
407+
});
366408
}

0 commit comments

Comments
 (0)