Unverified Commit 322dd06d authored by Darren Austin's avatar Darren Austin Committed by GitHub

Updated the M3 textTheme to use `onSurface` color for all styles. (#116125)

parent afda8153
...@@ -565,7 +565,9 @@ class ThemeData with Diagnosticable { ...@@ -565,7 +565,9 @@ class ThemeData with Diagnosticable {
splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor; splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor;
// TYPOGRAPHY & ICONOGRAPHY // TYPOGRAPHY & ICONOGRAPHY
typography ??= useMaterial3 ? Typography.material2021(platform: platform) : Typography.material2014(platform: platform); typography ??= useMaterial3
? Typography.material2021(platform: platform, colorScheme: colorScheme)
: Typography.material2014(platform: platform);
TextTheme defaultTextTheme = isDark ? typography.white : typography.black; TextTheme defaultTextTheme = isDark ? typography.white : typography.black;
TextTheme defaultPrimaryTextTheme = primaryIsDark ? typography.white : typography.black; TextTheme defaultPrimaryTextTheme = primaryIsDark ? typography.white : typography.black;
TextTheme defaultAccentTextTheme = accentIsDark ? typography.white : typography.black; TextTheme defaultAccentTextTheme = accentIsDark ? typography.white : typography.black;
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/painting.dart'; import 'package:flutter/painting.dart';
import 'color_scheme.dart';
import 'colors.dart'; import 'colors.dart';
import 'text_theme.dart'; import 'text_theme.dart';
...@@ -166,6 +167,7 @@ class Typography with Diagnosticable { ...@@ -166,6 +167,7 @@ class Typography with Diagnosticable {
/// * <https://m3.material.io/styles/typography> /// * <https://m3.material.io/styles/typography>
factory Typography.material2021({ factory Typography.material2021({
TargetPlatform? platform = TargetPlatform.android, TargetPlatform? platform = TargetPlatform.android,
ColorScheme colorScheme = const ColorScheme.light(),
TextTheme? black, TextTheme? black,
TextTheme? white, TextTheme? white,
TextTheme? englishLike, TextTheme? englishLike,
...@@ -173,13 +175,31 @@ class Typography with Diagnosticable { ...@@ -173,13 +175,31 @@ class Typography with Diagnosticable {
TextTheme? tall, TextTheme? tall,
}) { }) {
assert(platform != null || (black != null && white != null)); assert(platform != null || (black != null && white != null));
return Typography._withPlatform( final Typography base = Typography._withPlatform(
platform, platform,
black, white, black, white,
englishLike ?? englishLike2021, englishLike ?? englishLike2021,
dense ?? dense2021, dense ?? dense2021,
tall ?? tall2021, tall ?? tall2021,
); );
// Ensure they are all uniformly dark or light, with
// no color variation based on style as it was in previous
// versions of Material Design.
final Color dark = colorScheme.brightness == Brightness.light ? colorScheme.onSurface : colorScheme.surface;
final Color light = colorScheme.brightness == Brightness.light ? colorScheme.surface : colorScheme.onSurface;
return base.copyWith(
black: base.black.apply(
displayColor: dark,
bodyColor: dark,
decorationColor: dark
),
white: base.white.apply(
displayColor: light,
bodyColor: light,
decorationColor: light
),
);
} }
factory Typography._withPlatform( factory Typography._withPlatform(
......
...@@ -67,11 +67,16 @@ void main() { ...@@ -67,11 +67,16 @@ void main() {
}); });
testWidgets('Passing no MaterialBannerThemeData returns defaults', (WidgetTester tester) async { testWidgets('Passing no MaterialBannerThemeData returns defaults', (WidgetTester tester) async {
final ThemeData theme = ThemeData(useMaterial3: true);
const String contentText = 'Content'; const String contentText = 'Content';
final ThemeData theme = ThemeData(useMaterial3: true);
late final ThemeData localizedTheme;
await tester.pumpWidget(MaterialApp( await tester.pumpWidget(MaterialApp(
theme: theme, theme: theme,
builder:(BuildContext context, Widget? child) {
localizedTheme = Theme.of(context);
return child!;
},
home: Scaffold( home: Scaffold(
body: MaterialBanner( body: MaterialBanner(
content: const Text(contentText), content: const Text(contentText),
...@@ -93,12 +98,9 @@ void main() { ...@@ -93,12 +98,9 @@ void main() {
expect(material.elevation, 0.0); expect(material.elevation, 0.0);
final RenderParagraph content = _getTextRenderObjectFromDialog(tester, contentText); final RenderParagraph content = _getTextRenderObjectFromDialog(tester, contentText);
// Default value for ThemeData.typography is Typography.material2021()
expect( expect(
content.text.style, content.text.style,
Typography.material2021().englishLike.bodyMedium!.merge( localizedTheme.textTheme.bodyMedium,
Typography.material2021().black.bodyMedium,
),
); );
final Offset rowTopLeft = tester.getTopLeft(find.byType(Row)); final Offset rowTopLeft = tester.getTopLeft(find.byType(Row));
...@@ -114,15 +116,17 @@ void main() { ...@@ -114,15 +116,17 @@ void main() {
}); });
testWidgets('Passing no MaterialBannerThemeData returns defaults when presented by ScaffoldMessenger', (WidgetTester tester) async { testWidgets('Passing no MaterialBannerThemeData returns defaults when presented by ScaffoldMessenger', (WidgetTester tester) async {
final ThemeData theme = ThemeData(useMaterial3: true);
const String contentText = 'Content'; const String contentText = 'Content';
const Key tapTarget = Key('tap-target'); const Key tapTarget = Key('tap-target');
final ThemeData theme = ThemeData(useMaterial3: true);
late final ThemeData localizedTheme;
await tester.pumpWidget(MaterialApp( await tester.pumpWidget(MaterialApp(
theme: theme, theme: theme,
home: Scaffold( home: Scaffold(
body: Builder( body: Builder(
builder: (BuildContext context) { builder: (BuildContext context) {
localizedTheme = Theme.of(context);
return GestureDetector( return GestureDetector(
key: tapTarget, key: tapTarget,
onTap: () { onTap: () {
...@@ -157,12 +161,9 @@ void main() { ...@@ -157,12 +161,9 @@ void main() {
expect(material.elevation, 0.0); expect(material.elevation, 0.0);
final RenderParagraph content = _getTextRenderObjectFromDialog(tester, contentText); final RenderParagraph content = _getTextRenderObjectFromDialog(tester, contentText);
// Default value for ThemeData.typography is Typography.material2021()
expect( expect(
content.text.style, content.text.style,
Typography.material2021().englishLike.bodyMedium!.merge( localizedTheme.textTheme.bodyMedium,
Typography.material2021().black.bodyMedium,
),
); );
final Offset rowTopLeft = tester.getTopLeft(find.byType(Row)); final Offset rowTopLeft = tester.getTopLeft(find.byType(Row));
......
...@@ -2230,7 +2230,7 @@ void main() { ...@@ -2230,7 +2230,7 @@ void main() {
); );
} }
final ThemeData theme = ThemeData(); final ThemeData theme = ThemeData(useMaterial3: true);
// ListTile - ListTileStyle.list (default). // ListTile - ListTileStyle.list (default).
await tester.pumpWidget(buildFrame()); await tester.pumpWidget(buildFrame());
......
...@@ -72,15 +72,15 @@ void main() { ...@@ -72,15 +72,15 @@ void main() {
test('light, dark and fallback constructors support useMaterial3', () { test('light, dark and fallback constructors support useMaterial3', () {
final ThemeData lightTheme = ThemeData.light(useMaterial3: true); final ThemeData lightTheme = ThemeData.light(useMaterial3: true);
expect(lightTheme.useMaterial3, true); expect(lightTheme.useMaterial3, true);
expect(lightTheme.typography, Typography.material2021()); expect(lightTheme.typography, Typography.material2021(colorScheme: lightTheme.colorScheme));
final ThemeData darkTheme = ThemeData.dark(useMaterial3: true); final ThemeData darkTheme = ThemeData.dark(useMaterial3: true);
expect(darkTheme.useMaterial3, true); expect(darkTheme.useMaterial3, true);
expect(darkTheme.typography, Typography.material2021()); expect(darkTheme.typography, Typography.material2021(colorScheme: darkTheme.colorScheme));
final ThemeData fallbackTheme = ThemeData.light(useMaterial3: true); final ThemeData fallbackTheme = ThemeData.light(useMaterial3: true);
expect(fallbackTheme.useMaterial3, true); expect(fallbackTheme.useMaterial3, true);
expect(fallbackTheme.typography, Typography.material2021()); expect(fallbackTheme.typography, Typography.material2021(colorScheme: fallbackTheme.colorScheme));
}); });
testWidgets('Defaults to MaterialTapTargetBehavior.padded on mobile platforms and MaterialTapTargetBehavior.shrinkWrap on desktop', (WidgetTester tester) async { testWidgets('Defaults to MaterialTapTargetBehavior.padded on mobile platforms and MaterialTapTargetBehavior.shrinkWrap on desktop', (WidgetTester tester) async {
......
...@@ -134,7 +134,8 @@ void main() { ...@@ -134,7 +134,8 @@ void main() {
testWidgets('ThemeData with null typography uses proper defaults', (WidgetTester tester) async { testWidgets('ThemeData with null typography uses proper defaults', (WidgetTester tester) async {
expect(ThemeData().typography, Typography.material2014()); expect(ThemeData().typography, Typography.material2014());
expect(ThemeData(useMaterial3: true).typography, Typography.material2021()); final ThemeData m3Theme = ThemeData(useMaterial3: true);
expect(m3Theme.typography, Typography.material2021(colorScheme: m3Theme.colorScheme));
}); });
testWidgets('PopupMenu inherits shadowed app theme', (WidgetTester tester) async { testWidgets('PopupMenu inherits shadowed app theme', (WidgetTester tester) async {
......
...@@ -363,4 +363,46 @@ void main() { ...@@ -363,4 +363,46 @@ void main() {
expect(theme.bodySmall!.textBaseline, TextBaseline.alphabetic); expect(theme.bodySmall!.textBaseline, TextBaseline.alphabetic);
expect(theme.bodySmall!.leadingDistribution, TextLeadingDistribution.even); expect(theme.bodySmall!.leadingDistribution, TextLeadingDistribution.even);
}); });
test('Default M3 light textTheme styles all use onSurface', () {
final ThemeData theme = ThemeData(useMaterial3: true);
final TextTheme textTheme = theme.textTheme;
final Color dark = theme.colorScheme.onSurface;
expect(textTheme.displayLarge!.color, dark);
expect(textTheme.displayMedium!.color, dark);
expect(textTheme.displaySmall!.color, dark);
expect(textTheme.headlineLarge!.color, dark);
expect(textTheme.headlineMedium!.color, dark);
expect(textTheme.headlineSmall!.color, dark);
expect(textTheme.titleLarge!.color, dark);
expect(textTheme.titleMedium!.color, dark);
expect(textTheme.titleSmall!.color, dark);
expect(textTheme.bodyLarge!.color, dark);
expect(textTheme.bodyMedium!.color, dark);
expect(textTheme.bodySmall!.color, dark);
expect(textTheme.labelLarge!.color, dark);
expect(textTheme.labelMedium!.color, dark);
expect(textTheme.labelSmall!.color, dark);
});
test('Default M3 dark textTheme styles all use onSurface', () {
final ThemeData theme = ThemeData(useMaterial3: true, brightness: Brightness.dark);
final TextTheme textTheme = theme.textTheme;
final Color light = theme.colorScheme.onSurface;
expect(textTheme.displayLarge!.color, light);
expect(textTheme.displayMedium!.color, light);
expect(textTheme.displaySmall!.color, light);
expect(textTheme.headlineLarge!.color, light);
expect(textTheme.headlineMedium!.color, light);
expect(textTheme.headlineSmall!.color, light);
expect(textTheme.titleLarge!.color, light);
expect(textTheme.titleMedium!.color, light);
expect(textTheme.titleSmall!.color, light);
expect(textTheme.bodyLarge!.color, light);
expect(textTheme.bodyMedium!.color, light);
expect(textTheme.bodySmall!.color, light);
expect(textTheme.labelLarge!.color, light);
expect(textTheme.labelMedium!.color, light);
expect(textTheme.labelSmall!.color, light);
});
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment