[go: nahoru, domu]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Nov 30, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/flutter/lib/src/material/theme_data.dart
Original file line number Diff line number Diff line change
Expand Up @@ -563,7 +563,9 @@ class ThemeData with Diagnosticable {
splashColor ??= isDark ? _kDarkThemeSplashColor : _kLightThemeSplashColor;

// 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 defaultPrimaryTextTheme = primaryIsDark ? typography.white : typography.black;
TextTheme defaultAccentTextTheme = accentIsDark ? typography.white : typography.black;
Expand Down
22 changes: 21 additions & 1 deletion packages/flutter/lib/src/material/typography.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/painting.dart';

import 'color_scheme.dart';
import 'colors.dart';
import 'text_theme.dart';

Expand Down Expand Up @@ -166,20 +167,39 @@ class Typography with Diagnosticable {
/// * <https://m3.material.io/styles/typography>
factory Typography.material2021({
TargetPlatform? platform = TargetPlatform.android,
ColorScheme colorScheme = const ColorScheme.light(),
TextTheme? black,
TextTheme? white,
TextTheme? englishLike,
TextTheme? dense,
TextTheme? tall,
}) {
assert(platform != null || (black != null && white != null));
return Typography._withPlatform(
final Typography base = Typography._withPlatform(
platform,
black, white,
englishLike ?? englishLike2021,
dense ?? dense2021,
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(
Expand Down
21 changes: 11 additions & 10 deletions packages/flutter/test/material/banner_theme_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,16 @@ void main() {
});

testWidgets('Passing no MaterialBannerThemeData returns defaults', (WidgetTester tester) async {
final ThemeData theme = ThemeData(useMaterial3: true);
const String contentText = 'Content';
final ThemeData theme = ThemeData(useMaterial3: true);
late final ThemeData localizedTheme;

await tester.pumpWidget(MaterialApp(
theme: theme,
builder:(BuildContext context, Widget? child) {
localizedTheme = Theme.of(context);
return child!;
},
home: Scaffold(
body: MaterialBanner(
content: const Text(contentText),
Expand All @@ -93,12 +98,9 @@ void main() {
expect(material.elevation, 0.0);

final RenderParagraph content = _getTextRenderObjectFromDialog(tester, contentText);
// Default value for ThemeData.typography is Typography.material2021()
expect(
content.text.style,
Typography.material2021().englishLike.bodyMedium!.merge(
Typography.material2021().black.bodyMedium,
),
localizedTheme.textTheme.bodyMedium,
);

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

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

await tester.pumpWidget(MaterialApp(
theme: theme,
home: Scaffold(
body: Builder(
builder: (BuildContext context) {
localizedTheme = Theme.of(context);
return GestureDetector(
key: tapTarget,
onTap: () {
Expand Down Expand Up @@ -157,12 +161,9 @@ void main() {
expect(material.elevation, 0.0);

final RenderParagraph content = _getTextRenderObjectFromDialog(tester, contentText);
// Default value for ThemeData.typography is Typography.material2021()
expect(
content.text.style,
Typography.material2021().englishLike.bodyMedium!.merge(
Typography.material2021().black.bodyMedium,
),
localizedTheme.textTheme.bodyMedium,
);

final Offset rowTopLeft = tester.getTopLeft(find.byType(Row));
Expand Down
2 changes: 1 addition & 1 deletion packages/flutter/test/material/list_tile_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2202,7 +2202,7 @@ void main() {
);
}

final ThemeData theme = ThemeData();
final ThemeData theme = ThemeData(useMaterial3: true);

// ListTile - ListTileStyle.list (default).
await tester.pumpWidget(buildFrame());
Expand Down
6 changes: 3 additions & 3 deletions packages/flutter/test/material/theme_data_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -72,15 +72,15 @@ void main() {
test('light, dark and fallback constructors support useMaterial3', () {
final ThemeData lightTheme = ThemeData.light(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);
expect(darkTheme.useMaterial3, true);
expect(darkTheme.typography, Typography.material2021());
expect(darkTheme.typography, Typography.material2021(colorScheme: darkTheme.colorScheme));

final ThemeData fallbackTheme = ThemeData.light(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 {
Expand Down
3 changes: 2 additions & 1 deletion packages/flutter/test/material/theme_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,8 @@ void main() {

testWidgets('ThemeData with null typography uses proper defaults', (WidgetTester tester) async {
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 {
Expand Down
42 changes: 42 additions & 0 deletions packages/flutter/test/material/typography_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -363,4 +363,46 @@ void main() {
expect(theme.bodySmall!.textBaseline, TextBaseline.alphabetic);
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);
});
}