From 128c723445880dc7ad848fea86d03fe9bd3da1da Mon Sep 17 00:00:00 2001 From: Darren Austin Date: Tue, 23 Nov 2021 13:56:16 -0800 Subject: [PATCH] Added Material 3 colors to ColorScheme. (#93427) * Added the new Material 3 colors to ColorScheme. * Deprecated primaryVariant and secondaryVariant colors in the ColorScheme. * Added a flutter fix for the deprecated colors. --- .../flutter_gallery/lib/demo/shrine/app.dart | 2 - packages/flutter/lib/fix_data.yaml | 100 ++ .../lib/src/material/color_scheme.dart | 919 +++++++++++++----- .../test/material/color_scheme_test.dart | 176 +++- packages/flutter/test_fixes/material.dart | 11 + .../flutter/test_fixes/material.dart.expect | 11 + 6 files changed, 933 insertions(+), 286 deletions(-) diff --git a/dev/integration_tests/flutter_gallery/lib/demo/shrine/app.dart b/dev/integration_tests/flutter_gallery/lib/demo/shrine/app.dart index 90cf627eb8..8ba3357061 100644 --- a/dev/integration_tests/flutter_gallery/lib/demo/shrine/app.dart +++ b/dev/integration_tests/flutter_gallery/lib/demo/shrine/app.dart @@ -112,9 +112,7 @@ TextTheme _buildShrineTextTheme(TextTheme base) { const ColorScheme kShrineColorScheme = ColorScheme( primary: kShrinePink100, - primaryVariant: kShrineBrown900, secondary: kShrinePink50, - secondaryVariant: kShrineBrown900, surface: kShrineSurfaceWhite, background: kShrineBackgroundWhite, error: kShrineErrorRed, diff --git a/packages/flutter/lib/fix_data.yaml b/packages/flutter/lib/fix_data.yaml index d4b9e031f6..5b29eea83c 100644 --- a/packages/flutter/lib/fix_data.yaml +++ b/packages/flutter/lib/fix_data.yaml @@ -14,6 +14,106 @@ version: 1 transforms: + # Changes made in https://github.com/flutter/flutter/pull/93427 + - title: "Remove 'primaryVariant' and 'secondaryVariant'" + date: 2021-11-19 + element: + uris: [ 'material.dart' ] + constructor: '' + inClass: 'ColorScheme' + changes: + - kind: 'removeParameter' + name: 'primaryVariant' + - kind: 'removeParameter' + name: 'secondaryVariant' + + # Changes made in https://github.com/flutter/flutter/pull/93427 + - title: "Remove 'primaryVariant' and 'secondaryVariant'" + date: 2021-11-19 + element: + uris: [ 'material.dart' ] + constructor: 'light' + inClass: 'ColorScheme' + changes: + - kind: 'removeParameter' + name: 'primaryVariant' + - kind: 'removeParameter' + name: 'secondaryVariant' + + # Changes made in https://github.com/flutter/flutter/pull/93427 + - title: "Remove 'primaryVariant' and 'secondaryVariant'" + date: 2021-11-19 + element: + uris: [ 'material.dart' ] + constructor: 'dark' + inClass: 'ColorScheme' + changes: + - kind: 'removeParameter' + name: 'primaryVariant' + - kind: 'removeParameter' + name: 'secondaryVariant' + + # Changes made in https://github.com/flutter/flutter/pull/93427 + - title: "Remove 'primaryVariant' and 'secondaryVariant'" + date: 2021-11-19 + element: + uris: [ 'material.dart' ] + constructor: 'highContrastLight' + inClass: 'ColorScheme' + changes: + - kind: 'removeParameter' + name: 'primaryVariant' + - kind: 'removeParameter' + name: 'secondaryVariant' + + # Changes made in https://github.com/flutter/flutter/pull/93427 + - title: "Remove 'primaryVariant' and 'secondaryVariant'" + date: 2021-11-19 + element: + uris: [ 'material.dart' ] + constructor: 'highContrastDark' + inClass: 'ColorScheme' + changes: + - kind: 'removeParameter' + name: 'primaryVariant' + - kind: 'removeParameter' + name: 'secondaryVariant' + + # Changes made in https://github.com/flutter/flutter/pull/93427 + - title: "Remove 'primaryVariant' and 'secondaryVariant'" + date: 2021-11-19 + element: + uris: [ 'material.dart' ] + method: 'copyWith' + inClass: 'ColorScheme' + changes: + - kind: 'removeParameter' + name: 'primaryVariant' + - kind: 'removeParameter' + name: 'secondaryVariant' + + # Changes made in https://github.com/flutter/flutter/pull/93427 + - title: "Migrate 'primaryVariant' to 'primaryContainer'" + date: 2021-11-19 + element: + uris: [ 'material.dart' ] + getter: 'primaryVariant' + inClass: 'ColorScheme' + changes: + - kind: 'rename' + newName: 'primaryContainer' + + # Changes made in https://github.com/flutter/flutter/pull/93427 + - title: "Migrate 'secondaryVariant' to 'secondaryContainer'" + date: 2021-11-19 + element: + uris: [ 'material.dart' ] + getter: 'secondaryVariant' + inClass: 'ColorScheme' + changes: + - kind: 'rename' + newName: 'secondaryContainer' + # Changes made in https://github.com/flutter/flutter/pull/93396 - title: "Remove 'primaryColorBrightness'" date: 2021-11-11 diff --git a/packages/flutter/lib/src/material/color_scheme.dart b/packages/flutter/lib/src/material/color_scheme.dart index 399c2442ea..43642d4139 100644 --- a/packages/flutter/lib/src/material/color_scheme.dart +++ b/packages/flutter/lib/src/material/color_scheme.dart @@ -8,8 +8,8 @@ import 'package:flutter/widgets.dart'; import 'colors.dart'; import 'theme_data.dart'; -/// A set of twelve colors based on the -/// [Material spec](https://material.io/design/color/the-color-system.html) +/// A set of colors based on the +/// [Material spec](https://m3.material.io/styles/color/the-color-system/color-roles) /// that can be used to configure the color properties of most components. /// /// The [Theme] has a color scheme, [ThemeData.colorScheme], which is constructed @@ -17,154 +17,373 @@ import 'theme_data.dart'; @immutable class ColorScheme with Diagnosticable { /// Create a ColorScheme instance. + /// + /// For the color parameters that are nullable, it is still recommended + /// that applications provide values for them. They are only nullable due + /// to backwards compatibility concerns. + /// + /// If a color is not provided, the closest fallback color from the given + /// colors will be used for it (e.g. [primaryContainer] will default + /// to [primary]). Material 3 makes use of these colors for many component + /// defaults, so for the best results the application should supply colors + /// for all the parameters. const ColorScheme({ - required this.primary, - required this.primaryVariant, - required this.secondary, - required this.secondaryVariant, - required this.surface, - required this.background, - required this.error, - required this.onPrimary, - required this.onSecondary, - required this.onSurface, - required this.onBackground, - required this.onError, required this.brightness, - }) : assert(primary != null), - assert(primaryVariant != null), - assert(secondary != null), - assert(secondaryVariant != null), - assert(surface != null), - assert(background != null), - assert(error != null), + required this.primary, + required this.onPrimary, + Color? primaryContainer, + Color? onPrimaryContainer, + required this.secondary, + required this.onSecondary, + Color? secondaryContainer, + Color? onSecondaryContainer, + Color? tertiary, + Color? onTertiary, + Color? tertiaryContainer, + Color? onTertiaryContainer, + required this.error, + required this.onError, + Color? errorContainer, + Color? onErrorContainer, + required this.background, + required this.onBackground, + required this.surface, + required this.onSurface, + Color? surfaceVariant, + Color? onSurfaceVariant, + Color? outline, + Color? shadow, + Color? inverseSurface, + Color? onInverseSurface, + Color? inversePrimary, + @Deprecated( + 'Use primary or primaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? primaryVariant, + @Deprecated( + 'Use secondary or secondaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? secondaryVariant, + }) : assert(brightness != null), + assert(primary != null), assert(onPrimary != null), + assert(secondary != null), assert(onSecondary != null), - assert(onSurface != null), - assert(onBackground != null), + assert(error != null), assert(onError != null), - assert(brightness != null); + assert(background != null), + assert(onBackground != null), + assert(surface != null), + assert(onSurface != null), + _primaryContainer = primaryContainer, + _onPrimaryContainer = onPrimaryContainer, + _secondaryContainer = secondaryContainer, + _onSecondaryContainer = onSecondaryContainer, + _tertiary = tertiary, + _onTertiary = onTertiary, + _tertiaryContainer = tertiaryContainer, + _onTertiaryContainer = onTertiaryContainer, + _errorContainer = errorContainer, + _onErrorContainer = onErrorContainer, + _surfaceVariant = surfaceVariant, + _onSurfaceVariant = onSurfaceVariant, + _outline = outline, + _shadow = shadow, + _inverseSurface = inverseSurface, + _onInverseSurface = onInverseSurface, + _inversePrimary = inversePrimary, + _primaryVariant = primaryVariant, + _secondaryVariant = secondaryVariant; /// Create a ColorScheme based on a purple primary color that matches the /// [baseline Material color scheme](https://material.io/design/color/the-color-system.html#color-theme-creation). const ColorScheme.light({ - this.primary = const Color(0xff6200ee), - this.primaryVariant = const Color(0xff3700b3), - this.secondary = const Color(0xff03dac6), - this.secondaryVariant = const Color(0xff018786), - this.surface = Colors.white, - this.background = Colors.white, - this.error = const Color(0xffb00020), - this.onPrimary = Colors.white, - this.onSecondary = Colors.black, - this.onSurface = Colors.black, - this.onBackground = Colors.black, - this.onError = Colors.white, this.brightness = Brightness.light, - }) : assert(primary != null), - assert(primaryVariant != null), - assert(secondary != null), - assert(secondaryVariant != null), - assert(surface != null), - assert(background != null), - assert(error != null), + this.primary = const Color(0xff6200ee), + this.onPrimary = Colors.white, + Color? primaryContainer, + Color? onPrimaryContainer, + this.secondary = const Color(0xff03dac6), + this.onSecondary = Colors.black, + Color? secondaryContainer, + Color? onSecondaryContainer, + Color? tertiary, + Color? onTertiary, + Color? tertiaryContainer, + Color? onTertiaryContainer, + this.error = const Color(0xffb00020), + this.onError = Colors.white, + Color? errorContainer, + Color? onErrorContainer, + this.background = Colors.white, + this.onBackground = Colors.black, + this.surface = Colors.white, + this.onSurface = Colors.black, + Color? surfaceVariant, + Color? onSurfaceVariant, + Color? outline, + Color? shadow, + Color? inverseSurface, + Color? onInverseSurface, + Color? inversePrimary, + @Deprecated( + 'Use primary or primaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? primaryVariant = const Color(0xff3700b3), + @Deprecated( + 'Use secondary or secondaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? secondaryVariant = const Color(0xff018786), + }) : assert(brightness != null), + assert(primary != null), assert(onPrimary != null), + assert(secondary != null), assert(onSecondary != null), - assert(onSurface != null), - assert(onBackground != null), + assert(error != null), assert(onError != null), - assert(brightness != null); + assert(background != null), + assert(onBackground != null), + assert(surface != null), + assert(onSurface != null), + _primaryContainer = primaryContainer, + _onPrimaryContainer = onPrimaryContainer, + _secondaryContainer = secondaryContainer, + _onSecondaryContainer = onSecondaryContainer, + _tertiary = tertiary, + _onTertiary = onTertiary, + _tertiaryContainer = tertiaryContainer, + _onTertiaryContainer = onTertiaryContainer, + _errorContainer = errorContainer, + _onErrorContainer = onErrorContainer, + _surfaceVariant = surfaceVariant, + _onSurfaceVariant = onSurfaceVariant, + _outline = outline, + _shadow = shadow, + _inverseSurface = inverseSurface, + _onInverseSurface = onInverseSurface, + _inversePrimary = inversePrimary, + _primaryVariant = primaryVariant, + _secondaryVariant = secondaryVariant; /// Create the recommended dark color scheme that matches the /// [baseline Material color scheme](https://material.io/design/color/dark-theme.html#ui-application). const ColorScheme.dark({ - this.primary = const Color(0xffbb86fc), - this.primaryVariant = const Color(0xff3700B3), - this.secondary = const Color(0xff03dac6), - this.secondaryVariant = const Color(0xff03dac6), - this.surface = const Color(0xff121212), - this.background = const Color(0xff121212), - this.error = const Color(0xffcf6679), - this.onPrimary = Colors.black, - this.onSecondary = Colors.black, - this.onSurface = Colors.white, - this.onBackground = Colors.white, - this.onError = Colors.black, this.brightness = Brightness.dark, - }) : assert(primary != null), - assert(primaryVariant != null), - assert(secondary != null), - assert(secondaryVariant != null), - assert(surface != null), - assert(background != null), - assert(error != null), + this.primary = const Color(0xffbb86fc), + this.onPrimary = Colors.black, + Color? primaryContainer, + Color? onPrimaryContainer, + this.secondary = const Color(0xff03dac6), + this.onSecondary = Colors.black, + Color? secondaryContainer, + Color? onSecondaryContainer, + Color? tertiary, + Color? onTertiary, + Color? tertiaryContainer, + Color? onTertiaryContainer, + this.error = const Color(0xffcf6679), + this.onError = Colors.black, + Color? errorContainer, + Color? onErrorContainer, + this.background = const Color(0xff121212), + this.onBackground = Colors.white, + this.surface = const Color(0xff121212), + this.onSurface = Colors.white, + Color? surfaceVariant, + Color? onSurfaceVariant, + Color? outline, + Color? shadow, + Color? inverseSurface, + Color? onInverseSurface, + Color? inversePrimary, + @Deprecated( + 'Use primary or primaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? primaryVariant = const Color(0xff3700B3), + @Deprecated( + 'Use secondary or secondaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? secondaryVariant = const Color(0xff03dac6), + }) : assert(brightness != null), + assert(primary != null), assert(onPrimary != null), + assert(secondary != null), assert(onSecondary != null), - assert(onSurface != null), - assert(onBackground != null), + assert(error != null), assert(onError != null), - assert(brightness != null); - + assert(background != null), + assert(onBackground != null), + assert(surface != null), + assert(onSurface != null), + _primaryContainer = primaryContainer, + _onPrimaryContainer = onPrimaryContainer, + _secondaryContainer = secondaryContainer, + _onSecondaryContainer = onSecondaryContainer, + _tertiary = tertiary, + _onTertiary = onTertiary, + _tertiaryContainer = tertiaryContainer, + _onTertiaryContainer = onTertiaryContainer, + _errorContainer = errorContainer, + _onErrorContainer = onErrorContainer, + _surfaceVariant = surfaceVariant, + _onSurfaceVariant = onSurfaceVariant, + _outline = outline, + _shadow = shadow, + _inverseSurface = inverseSurface, + _onInverseSurface = onInverseSurface, + _inversePrimary = inversePrimary, + _primaryVariant = primaryVariant, + _secondaryVariant = secondaryVariant; /// Create a high contrast ColorScheme based on a purple primary color that /// matches the [baseline Material color scheme](https://material.io/design/color/the-color-system.html#color-theme-creation). const ColorScheme.highContrastLight({ - this.primary = const Color(0xff0000ba), - this.primaryVariant = const Color(0xff000088), - this.secondary = const Color(0xff66fff9), - this.secondaryVariant = const Color(0xff018786), - this.surface = Colors.white, - this.background = Colors.white, - this.error = const Color(0xff790000), - this.onPrimary = Colors.white, - this.onSecondary = Colors.black, - this.onSurface = Colors.black, - this.onBackground = Colors.black, - this.onError = Colors.white, this.brightness = Brightness.light, - }) : assert(primary != null), - assert(primaryVariant != null), - assert(secondary != null), - assert(secondaryVariant != null), - assert(surface != null), - assert(background != null), - assert(error != null), - assert(onPrimary != null), - assert(onSecondary != null), - assert(onSurface != null), - assert(onBackground != null), - assert(onError != null), - assert(brightness != null); + this.primary = const Color(0xff0000ba), + this.onPrimary = Colors.white, + Color? primaryContainer, + Color? onPrimaryContainer, + this.secondary = const Color(0xff66fff9), + this.onSecondary = Colors.black, + Color? secondaryContainer, + Color? onSecondaryContainer, + Color? tertiary, + Color? onTertiary, + Color? tertiaryContainer, + Color? onTertiaryContainer, + this.error = const Color(0xff790000), + this.onError = Colors.white, + Color? errorContainer, + Color? onErrorContainer, + this.background = Colors.white, + this.onBackground = Colors.black, + this.surface = Colors.white, + this.onSurface = Colors.black, + Color? surfaceVariant, + Color? onSurfaceVariant, + Color? outline, + Color? shadow, + Color? inverseSurface, + Color? onInverseSurface, + Color? inversePrimary, + @Deprecated( + 'Use primary or primaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? primaryVariant = const Color(0xff000088), + @Deprecated( + 'Use secondary or secondaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? secondaryVariant = const Color(0xff018786), + }) : assert(brightness != null), + assert(primary != null), + assert(onPrimary != null), + assert(secondary != null), + assert(onSecondary != null), + assert(error != null), + assert(onError != null), + assert(background != null), + assert(onBackground != null), + assert(surface != null), + assert(onSurface != null), + _primaryContainer = primaryContainer, + _onPrimaryContainer = onPrimaryContainer, + _secondaryContainer = secondaryContainer, + _onSecondaryContainer = onSecondaryContainer, + _tertiary = tertiary, + _onTertiary = onTertiary, + _tertiaryContainer = tertiaryContainer, + _onTertiaryContainer = onTertiaryContainer, + _errorContainer = errorContainer, + _onErrorContainer = onErrorContainer, + _surfaceVariant = surfaceVariant, + _onSurfaceVariant = onSurfaceVariant, + _outline = outline, + _shadow = shadow, + _inverseSurface = inverseSurface, + _onInverseSurface = onInverseSurface, + _inversePrimary = inversePrimary, + _primaryVariant = primaryVariant, + _secondaryVariant = secondaryVariant; /// Create a high contrast ColorScheme based on the dark /// [baseline Material color scheme](https://material.io/design/color/dark-theme.html#ui-application). const ColorScheme.highContrastDark({ - this.primary = const Color(0xffefb7ff), - this.primaryVariant = const Color(0xffbe9eff), - this.secondary = const Color(0xff66fff9), - this.secondaryVariant = const Color(0xff66fff9), - this.surface = const Color(0xff121212), - this.background = const Color(0xff121212), - this.error = const Color(0xff9b374d), - this.onPrimary = Colors.black, - this.onSecondary = Colors.black, - this.onSurface = Colors.white, - this.onBackground = Colors.white, - this.onError = Colors.black, this.brightness = Brightness.dark, - }) : assert(primary != null), - assert(primaryVariant != null), - assert(secondary != null), - assert(secondaryVariant != null), - assert(surface != null), - assert(background != null), - assert(error != null), - assert(onPrimary != null), - assert(onSecondary != null), - assert(onSurface != null), - assert(onBackground != null), - assert(onError != null), - assert(brightness != null); + this.primary = const Color(0xffefb7ff), + this.onPrimary = Colors.black, + Color? primaryContainer, + Color? onPrimaryContainer, + this.secondary = const Color(0xff66fff9), + this.onSecondary = Colors.black, + Color? secondaryContainer, + Color? onSecondaryContainer, + Color? tertiary, + Color? onTertiary, + Color? tertiaryContainer, + Color? onTertiaryContainer, + this.error = const Color(0xff9b374d), + this.onError = Colors.black, + Color? errorContainer, + Color? onErrorContainer, + this.background = const Color(0xff121212), + this.onBackground = Colors.white, + this.surface = const Color(0xff121212), + this.onSurface = Colors.white, + Color? surfaceVariant, + Color? onSurfaceVariant, + Color? outline, + Color? shadow, + Color? inverseSurface, + Color? onInverseSurface, + Color? inversePrimary, + @Deprecated( + 'Use primary or primaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? primaryVariant = const Color(0xffbe9eff), + @Deprecated( + 'Use secondary or secondaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? secondaryVariant = const Color(0xff66fff9), + }) : assert(brightness != null), + assert(primary != null), + assert(onPrimary != null), + assert(secondary != null), + assert(onSecondary != null), + assert(error != null), + assert(onError != null), + assert(background != null), + assert(onBackground != null), + assert(surface != null), + assert(onSurface != null), + _primaryContainer = primaryContainer, + _onPrimaryContainer = onPrimaryContainer, + _secondaryContainer = secondaryContainer, + _onSecondaryContainer = onSecondaryContainer, + _tertiary = tertiary, + _onTertiary = onTertiary, + _tertiaryContainer = tertiaryContainer, + _onTertiaryContainer = onTertiaryContainer, + _errorContainer = errorContainer, + _onErrorContainer = onErrorContainer, + _surfaceVariant = surfaceVariant, + _onSurfaceVariant = onSurfaceVariant, + _outline = outline, + _shadow = shadow, + _inverseSurface = inverseSurface, + _onInverseSurface = onInverseSurface, + _inversePrimary = inversePrimary, + _primaryVariant = primaryVariant, + _secondaryVariant = secondaryVariant; /// Create a color scheme from a [MaterialColor] swatch. /// @@ -206,98 +425,258 @@ class ColorScheme with Diagnosticable { static Brightness _brightnessFor(Color color) => ThemeData.estimateBrightnessForColor(color); + /// The overall brightness of this color scheme. + final Brightness brightness; + /// The color displayed most frequently across your app’s screens and components. final Color primary; - /// A darker version of the primary color. - final Color primaryVariant; + /// A color that's clearly legible when drawn on [primary]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [primary] and [onPrimary] of at least 4.5:1 is recommended. See + /// . + final Color onPrimary; - /// An accent color that, when used sparingly, calls attention to parts - /// of your app. + final Color? _primaryContainer; + /// A color used for elements needing less emphasis than [primary]. + Color get primaryContainer => _primaryContainer ?? primary; + + final Color? _onPrimaryContainer; + /// A color that's clearly legible when drawn on [primaryContainer]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [primaryContainer] and [onPrimaryContainer] of at least 4.5:1 + /// is recommended. See + /// . + Color get onPrimaryContainer => _onPrimaryContainer ?? onPrimary; + + /// An accent color used for less prominent components in the UI, such as + /// filter chips, while expanding the opportunity for color expression. final Color secondary; - /// A darker version of the secondary color. - final Color secondaryVariant; + /// A color that's clearly legible when drawn on [secondary]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [secondary] and [onSecondary] of at least 4.5:1 is recommended. See + /// . + final Color onSecondary; - /// The background color for widgets like [Card]. - final Color surface; + final Color? _secondaryContainer; + /// A color used for elements needing less emphasis than [secondary]. + Color get secondaryContainer => _secondaryContainer ?? secondary; - /// A color that typically appears behind scrollable content. - final Color background; + final Color? _onSecondaryContainer; + /// A color that's clearly legible when drawn on [secondaryContainer]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [secondaryContainer] and [onSecondaryContainer] of at least 4.5:1 is + /// recommended. See + /// . + Color get onSecondaryContainer => _onSecondaryContainer ?? onSecondary; + + final Color? _tertiary; + /// A color used as a contrasting accent that can balance [primary] + /// and [secondary] colors or bring heightened attention to an element, + /// such as an input field. + Color get tertiary => _tertiary ?? secondary; + + final Color? _onTertiary; + /// A color that's clearly legible when drawn on [tertiary]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [tertiary] and [onTertiary] of at least 4.5:1 is recommended. See + /// . + Color get onTertiary => _onTertiary ?? onSecondary; + + final Color? _tertiaryContainer; + /// A color used for elements needing less emphasis than [tertiary]. + Color get tertiaryContainer => _tertiaryContainer ?? tertiary; + + final Color? _onTertiaryContainer; + /// A color that's clearly legible when drawn on [tertiaryContainer]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [tertiaryContainer] and [onTertiaryContainer] of at least 4.5:1 is + /// recommended. See + /// . + Color get onTertiaryContainer => _onTertiaryContainer ?? onTertiary; /// The color to use for input validation errors, e.g. for /// [InputDecoration.errorText]. final Color error; - /// A color that's clearly legible when drawn on [primary]. - /// - /// To ensure that an app is accessible, a contrast ratio of 4.5:1 for [primary] - /// and [onPrimary] is recommended. See - /// . - final Color onPrimary; - - /// A color that's clearly legible when drawn on [secondary]. - /// - /// To ensure that an app is accessible, a contrast ratio of 4.5:1 for [secondary] - /// and [onSecondary] is recommended. See - /// . - final Color onSecondary; - - /// A color that's clearly legible when drawn on [surface]. - /// - /// To ensure that an app is accessible, a contrast ratio of 4.5:1 for [surface] - /// and [onSurface] is recommended. See - /// . - final Color onSurface; - - /// A color that's clearly legible when drawn on [background]. - /// - /// To ensure that an app is accessible, a contrast ratio of 4.5:1 for [background] - /// and [onBackground] is recommended. See - /// . - final Color onBackground; - /// A color that's clearly legible when drawn on [error]. /// - /// To ensure that an app is accessible, a contrast ratio of 4.5:1 for [error] - /// and [onError] is recommended. See + /// To ensure that an app is accessible, a contrast ratio between + /// [error] and [onError] of at least 4.5:1 is recommended. See /// . final Color onError; - /// The overall brightness of this color scheme. - final Brightness brightness; + final Color? _errorContainer; + /// A color used for error elements needing less emphasis than [error]. + Color get errorContainer => _errorContainer ?? error; + + final Color? _onErrorContainer; + /// A color that's clearly legible when drawn on [errorContainer]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [errorContainer] and [onErrorContainer] of at least 4.5:1 is + /// recommended. See + /// . + Color get onErrorContainer => _onErrorContainer ?? onError; + + /// A color that typically appears behind scrollable content. + final Color background; + + /// A color that's clearly legible when drawn on [background]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [background] and [onBackground] of at least 4.5:1 is recommended. See + /// . + final Color onBackground; + + /// The background color for widgets like [Card]. + final Color surface; + + /// A color that's clearly legible when drawn on [surface]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [surface] and [onSurface] of at least 4.5:1 is recommended. See + /// . + final Color onSurface; + + final Color? _surfaceVariant; + /// A color variant of [surface] that can be used for differentiation against + /// a component using [surface]. + Color get surfaceVariant => _surfaceVariant ?? surface; + + final Color? _onSurfaceVariant; + /// A color that's clearly legible when drawn on [surfaceVariant]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [surfaceVariant] and [onSurfaceVariant] of at least 4.5:1 is + /// recommended. See + /// . + Color get onSurfaceVariant => _onSurfaceVariant ?? onSurface; + + final Color? _outline; + /// A utility color that creates boundaries and emphasis to improve usability. + Color get outline => _outline ?? onBackground; + + final Color? _shadow; + /// A color use to paint the drop shadows of elevated components. + Color get shadow => _shadow ?? onBackground; + + final Color? _inverseSurface; + /// A surface color used for displaying the reverse of what’s seen in the + /// surrounding UI, for example in a SnackBar to bring attention to + /// an alert. + Color get inverseSurface => _inverseSurface ?? onSurface; + + final Color? _onInverseSurface; + /// A color that's clearly legible when drawn on [inverseSurface]. + /// + /// To ensure that an app is accessible, a contrast ratio between + /// [inverseSurface] and [onInverseSurface] of at least 4.5:1 is + /// recommended. See + /// . + Color get onInverseSurface => _onInverseSurface ?? surface; + + final Color? _inversePrimary; + /// An accent color used for displaying a highlight color on [inverseSurface] + /// backgrounds, like button text in a SnackBar. + Color get inversePrimary => _inversePrimary ?? onPrimary; + + final Color? _primaryVariant; + /// A darker version of the primary color. + @Deprecated( + 'Use primary or primaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color get primaryVariant => _primaryVariant ?? primary; + + final Color? _secondaryVariant; + /// A darker version of the secondary color. + @Deprecated( + 'Use secondary or secondaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color get secondaryVariant => _secondaryVariant ?? secondary; /// Creates a copy of this color scheme with the given fields /// replaced by the non-null parameter values. ColorScheme copyWith({ - Color? primary, - Color? primaryVariant, - Color? secondary, - Color? secondaryVariant, - Color? surface, - Color? background, - Color? error, - Color? onPrimary, - Color? onSecondary, - Color? onSurface, - Color? onBackground, - Color? onError, Brightness? brightness, + Color? primary, + Color? onPrimary, + Color? primaryContainer, + Color? onPrimaryContainer, + Color? secondary, + Color? onSecondary, + Color? secondaryContainer, + Color? onSecondaryContainer, + Color? tertiary, + Color? onTertiary, + Color? tertiaryContainer, + Color? onTertiaryContainer, + Color? error, + Color? onError, + Color? errorContainer, + Color? onErrorContainer, + Color? background, + Color? onBackground, + Color? surface, + Color? onSurface, + Color? surfaceVariant, + Color? onSurfaceVariant, + Color? outline, + Color? shadow, + Color? inverseSurface, + Color? onInverseSurface, + Color? inversePrimary, + @Deprecated( + 'Use primary or primaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? primaryVariant, + @Deprecated( + 'Use secondary or secondaryContainer instead. ' + 'This feature was deprecated after v2.6.0-0.0.pre.' + ) + Color? secondaryVariant, }) { return ColorScheme( - primary: primary ?? this.primary, - primaryVariant: primaryVariant ?? this.primaryVariant, - secondary: secondary ?? this.secondary, - secondaryVariant: secondaryVariant ?? this.secondaryVariant, - surface: surface ?? this.surface, - background: background ?? this.background, - error: error ?? this.error, - onPrimary: onPrimary ?? this.onPrimary, - onSecondary: onSecondary ?? this.onSecondary, - onSurface: onSurface ?? this.onSurface, - onBackground: onBackground ?? this.onBackground, - onError: onError ?? this.onError, brightness: brightness ?? this.brightness, + primary : primary ?? this.primary, + onPrimary : onPrimary ?? this.onPrimary, + primaryContainer : primaryContainer ?? this.primaryContainer, + onPrimaryContainer : onPrimaryContainer ?? this.onPrimaryContainer, + secondary : secondary ?? this.secondary, + onSecondary : onSecondary ?? this.onSecondary, + secondaryContainer : secondaryContainer ?? this.secondaryContainer, + onSecondaryContainer : onSecondaryContainer ?? this.onSecondaryContainer, + tertiary : tertiary ?? this.tertiary, + onTertiary : onTertiary ?? this.onTertiary, + tertiaryContainer : tertiaryContainer ?? this.tertiaryContainer, + onTertiaryContainer : onTertiaryContainer ?? this.onTertiaryContainer, + error : error ?? this.error, + onError : onError ?? this.onError, + errorContainer : errorContainer ?? this.errorContainer, + onErrorContainer : onErrorContainer ?? this.onErrorContainer, + background : background ?? this.background, + onBackground : onBackground ?? this.onBackground, + surface : surface ?? this.surface, + onSurface : onSurface ?? this.onSurface, + surfaceVariant : surfaceVariant ?? this.surfaceVariant, + onSurfaceVariant : onSurfaceVariant ?? this.onSurfaceVariant, + outline : outline ?? this.outline, + shadow : shadow ?? this.shadow, + inverseSurface : inverseSurface ?? this.inverseSurface, + onInverseSurface : onInverseSurface ?? this.onInverseSurface, + inversePrimary : inversePrimary ?? this.inversePrimary, + primaryVariant: primaryVariant ?? this.primaryVariant, + secondaryVariant: secondaryVariant ?? this.secondaryVariant, ); } @@ -306,19 +685,36 @@ class ColorScheme with Diagnosticable { /// {@macro dart.ui.shadow.lerp} static ColorScheme lerp(ColorScheme a, ColorScheme b, double t) { return ColorScheme( - primary: Color.lerp(a.primary, b.primary, t)!, - primaryVariant: Color.lerp(a.primaryVariant, b.primaryVariant, t)!, - secondary: Color.lerp(a.secondary, b.secondary, t)!, - secondaryVariant: Color.lerp(a.secondaryVariant, b.secondaryVariant, t)!, - surface: Color.lerp(a.surface, b.surface, t)!, - background: Color.lerp(a.background, b.background, t)!, - error: Color.lerp(a.error, b.error, t)!, - onPrimary: Color.lerp(a.onPrimary, b.onPrimary, t)!, - onSecondary: Color.lerp(a.onSecondary, b.onSecondary, t)!, - onSurface: Color.lerp(a.onSurface, b.onSurface, t)!, - onBackground: Color.lerp(a.onBackground, b.onBackground, t)!, - onError: Color.lerp(a.onError, b.onError, t)!, brightness: t < 0.5 ? a.brightness : b.brightness, + primary: Color.lerp(a.primary, b.primary, t)!, + onPrimary: Color.lerp(a.onPrimary, b.onPrimary, t)!, + primaryContainer: Color.lerp(a.primaryContainer, b.primaryContainer, t), + onPrimaryContainer: Color.lerp(a.onPrimaryContainer, b.onPrimaryContainer, t), + secondary: Color.lerp(a.secondary, b.secondary, t)!, + onSecondary: Color.lerp(a.onSecondary, b.onSecondary, t)!, + secondaryContainer: Color.lerp(a.secondaryContainer, b.secondaryContainer, t), + onSecondaryContainer: Color.lerp(a.onSecondaryContainer, b.onSecondaryContainer, t), + tertiary: Color.lerp(a.tertiary, b.tertiary, t), + onTertiary: Color.lerp(a.onTertiary, b.onTertiary, t), + tertiaryContainer: Color.lerp(a.tertiaryContainer, b.tertiaryContainer, t), + onTertiaryContainer: Color.lerp(a.onTertiaryContainer, b.onTertiaryContainer, t), + error: Color.lerp(a.error, b.error, t)!, + onError: Color.lerp(a.onError, b.onError, t)!, + errorContainer: Color.lerp(a.errorContainer, b.errorContainer, t), + onErrorContainer: Color.lerp(a.onErrorContainer, b.onErrorContainer, t), + background: Color.lerp(a.background, b.background, t)!, + onBackground: Color.lerp(a.onBackground, b.onBackground, t)!, + surface: Color.lerp(a.surface, b.surface, t)!, + onSurface: Color.lerp(a.onSurface, b.onSurface, t)!, + surfaceVariant: Color.lerp(a.surfaceVariant, b.surfaceVariant, t), + onSurfaceVariant: Color.lerp(a.onSurfaceVariant, b.onSurfaceVariant, t), + outline: Color.lerp(a.outline, b.outline, t), + shadow: Color.lerp(a.shadow, b.shadow, t), + inverseSurface: Color.lerp(a.inverseSurface, b.inverseSurface, t), + onInverseSurface: Color.lerp(a.onInverseSurface, b.onInverseSurface, t), + inversePrimary: Color.lerp(a.inversePrimary, b.inversePrimary, t), + primaryVariant: Color.lerp(a.primaryVariant, b.primaryVariant, t), + secondaryVariant: Color.lerp(a.secondaryVariant, b.secondaryVariant, t), ); } @@ -329,56 +725,107 @@ class ColorScheme with Diagnosticable { if (other.runtimeType != runtimeType) return false; return other is ColorScheme - && other.primary == primary - && other.primaryVariant == primaryVariant - && other.secondary == secondary - && other.secondaryVariant == secondaryVariant - && other.surface == surface - && other.background == background - && other.error == error - && other.onPrimary == onPrimary - && other.onSecondary == onSecondary - && other.onSurface == onSurface - && other.onBackground == onBackground - && other.onError == onError - && other.brightness == brightness; + && other.brightness == brightness + && other.primary == primary + && other.onPrimary == onPrimary + && other.primaryContainer == primaryContainer + && other.onPrimaryContainer == onPrimaryContainer + && other.secondary == secondary + && other.onSecondary == onSecondary + && other.secondaryContainer == secondaryContainer + && other.onSecondaryContainer == onSecondaryContainer + && other.tertiary == tertiary + && other.onTertiary == onTertiary + && other.tertiaryContainer == tertiaryContainer + && other.onTertiaryContainer == onTertiaryContainer + && other.error == error + && other.onError == onError + && other.errorContainer == errorContainer + && other.onErrorContainer == onErrorContainer + && other.background == background + && other.onBackground == onBackground + && other.surface == surface + && other.onSurface == onSurface + && other.surfaceVariant == surfaceVariant + && other.onSurfaceVariant == onSurfaceVariant + && other.outline == outline + && other.shadow == shadow + && other.inverseSurface == inverseSurface + && other.onInverseSurface == onInverseSurface + && other.inversePrimary == inversePrimary + && other.primaryVariant == primaryVariant + && other.secondaryVariant == secondaryVariant; } @override int get hashCode { - return hashValues( - primary, - primaryVariant, - secondary, - secondaryVariant, - surface, - background, - error, - onPrimary, - onSecondary, - onSurface, - onBackground, - onError, + return hashList([ brightness, - ); + primary, + onPrimary, + primaryContainer, + onPrimaryContainer, + secondary, + onSecondary, + secondaryContainer, + onSecondaryContainer, + tertiary, + onTertiary, + tertiaryContainer, + onTertiaryContainer, + error, + onError, + errorContainer, + onErrorContainer, + background, + onBackground, + surface, + onSurface, + surfaceVariant, + onSurfaceVariant, + outline, + shadow, + inverseSurface, + onInverseSurface, + inversePrimary, + primaryVariant, + secondaryVariant, + ]); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); const ColorScheme defaultScheme = ColorScheme.light(); - properties.add(ColorProperty('primary', primary, defaultValue: defaultScheme.primary)); - properties.add(ColorProperty('primaryVariant', primaryVariant, defaultValue: defaultScheme.primaryVariant)); - properties.add(ColorProperty('secondary', secondary, defaultValue: defaultScheme.secondary)); - properties.add(ColorProperty('secondaryVariant', secondaryVariant, defaultValue: defaultScheme.secondaryVariant)); - properties.add(ColorProperty('surface', surface, defaultValue: defaultScheme.surface)); - properties.add(ColorProperty('background', background, defaultValue: defaultScheme.background)); - properties.add(ColorProperty('error', error, defaultValue: defaultScheme.error)); - properties.add(ColorProperty('onPrimary', onPrimary, defaultValue: defaultScheme.onPrimary)); - properties.add(ColorProperty('onSecondary', onSecondary, defaultValue: defaultScheme.onSecondary)); - properties.add(ColorProperty('onSurface', onSurface, defaultValue: defaultScheme.onSurface)); - properties.add(ColorProperty('onBackground', onBackground, defaultValue: defaultScheme.onBackground)); - properties.add(ColorProperty('onError', onError, defaultValue: defaultScheme.onError)); properties.add(DiagnosticsProperty('brightness', brightness, defaultValue: defaultScheme.brightness)); + properties.add(ColorProperty('primary', primary, defaultValue: defaultScheme.primary)); + properties.add(ColorProperty('onPrimary', onPrimary, defaultValue: defaultScheme.onPrimary)); + properties.add(ColorProperty('primaryContainer', primaryContainer, defaultValue: defaultScheme.primaryContainer)); + properties.add(ColorProperty('onPrimaryContainer', onPrimaryContainer, defaultValue: defaultScheme.onPrimaryContainer)); + properties.add(ColorProperty('secondary', secondary, defaultValue: defaultScheme.secondary)); + properties.add(ColorProperty('onSecondary', onSecondary, defaultValue: defaultScheme.onSecondary)); + properties.add(ColorProperty('secondaryContainer', secondaryContainer, defaultValue: defaultScheme.secondaryContainer)); + properties.add(ColorProperty('onSecondaryContainer', onSecondaryContainer, defaultValue: defaultScheme.onSecondaryContainer)); + properties.add(ColorProperty('tertiary', tertiary, defaultValue: defaultScheme.tertiary)); + properties.add(ColorProperty('onTertiary', onTertiary, defaultValue: defaultScheme.onTertiary)); + properties.add(ColorProperty('tertiaryContainer', tertiaryContainer, defaultValue: defaultScheme.tertiaryContainer)); + properties.add(ColorProperty('onTertiaryContainer', onTertiaryContainer, defaultValue: defaultScheme.onTertiaryContainer)); + properties.add(ColorProperty('error', error, defaultValue: defaultScheme.error)); + properties.add(ColorProperty('onError', onError, defaultValue: defaultScheme.onError)); + properties.add(ColorProperty('errorContainer', errorContainer, defaultValue: defaultScheme.errorContainer)); + properties.add(ColorProperty('onErrorContainer', onErrorContainer, defaultValue: defaultScheme.onErrorContainer)); + properties.add(ColorProperty('background', background, defaultValue: defaultScheme.background)); + properties.add(ColorProperty('onBackground', onBackground, defaultValue: defaultScheme.onBackground)); + properties.add(ColorProperty('surface', surface, defaultValue: defaultScheme.surface)); + properties.add(ColorProperty('onSurface', onSurface, defaultValue: defaultScheme.onSurface)); + properties.add(ColorProperty('surfaceVariant', surfaceVariant, defaultValue: defaultScheme.surfaceVariant)); + properties.add(ColorProperty('onSurfaceVariant', onSurfaceVariant, defaultValue: defaultScheme.onSurfaceVariant)); + properties.add(ColorProperty('outline', outline, defaultValue: defaultScheme.outline)); + properties.add(ColorProperty('shadow', shadow, defaultValue: defaultScheme.shadow)); + properties.add(ColorProperty('inverseSurface', inverseSurface, defaultValue: defaultScheme.inverseSurface)); + properties.add(ColorProperty('onInverseSurface', onInverseSurface, defaultValue: defaultScheme.onInverseSurface)); + properties.add(ColorProperty('inversePrimary', inversePrimary, defaultValue: defaultScheme.inversePrimary)); + properties.add(ColorProperty('primaryVariant', primaryVariant, defaultValue: defaultScheme.primaryVariant)); + properties.add(ColorProperty('secondaryVariant', secondaryVariant, defaultValue: defaultScheme.secondaryVariant)); } } diff --git a/packages/flutter/test/material/color_scheme_test.dart b/packages/flutter/test/material/color_scheme_test.dart index 2e2ea20a5f..1020f02919 100644 --- a/packages/flutter/test/material/color_scheme_test.dart +++ b/packages/flutter/test/material/color_scheme_test.dart @@ -9,76 +9,156 @@ void main() { test('light scheme matches the spec', () { // Colors should match the Material Design baseline default theme: // https://material.io/design/color/dark-theme.html#ui-application + // with the new Material 3 colors defaulting to values from the M2 + // baseline. const ColorScheme scheme = ColorScheme.light(); - expect(scheme.primary, const Color(0xff6200ee)); - expect(scheme.primaryVariant, const Color(0xff3700b3)); - expect(scheme.secondary, const Color(0xff03dac6)); - expect(scheme.secondaryVariant, const Color(0xff018786)); - expect(scheme.background, const Color(0xffffffff)); - expect(scheme.surface, const Color(0xffffffff)); - expect(scheme.error, const Color(0xffb00020)); - expect(scheme.onPrimary, const Color(0xffffffff)); - expect(scheme.onSecondary, const Color(0xff000000)); - expect(scheme.onBackground, const Color(0xff000000)); - expect(scheme.onSurface, const Color(0xff000000)); - expect(scheme.onError, const Color(0xffffffff)); expect(scheme.brightness, Brightness.light); + expect(scheme.primary, const Color(0xff6200ee)); + expect(scheme.onPrimary, const Color(0xffffffff)); + expect(scheme.primaryContainer, scheme.primary); + expect(scheme.onPrimaryContainer, scheme.onPrimary); + expect(scheme.secondary, const Color(0xff03dac6)); + expect(scheme.onSecondary, const Color(0xff000000)); + expect(scheme.secondaryContainer, scheme.secondary); + expect(scheme.onSecondaryContainer, scheme.onSecondary); + expect(scheme.tertiary, scheme.secondary); + expect(scheme.onTertiary, scheme.onSecondary); + expect(scheme.tertiaryContainer, scheme.tertiary); + expect(scheme.onTertiaryContainer, scheme.onTertiary); + expect(scheme.error, const Color(0xffb00020)); + expect(scheme.onError, const Color(0xffffffff)); + expect(scheme.errorContainer, scheme.error); + expect(scheme.onErrorContainer, scheme.onError); + expect(scheme.background, const Color(0xffffffff)); + expect(scheme.onBackground, const Color(0xff000000)); + expect(scheme.surface, const Color(0xffffffff)); + expect(scheme.onSurface, const Color(0xff000000)); + expect(scheme.surfaceVariant, scheme.surface); + expect(scheme.onSurfaceVariant, scheme.onSurface); + expect(scheme.outline, scheme.onBackground); + expect(scheme.shadow, scheme.onBackground); + expect(scheme.inverseSurface, scheme.onSurface); + expect(scheme.onInverseSurface, scheme.surface); + expect(scheme.inversePrimary, scheme.onPrimary); + + expect(scheme.primaryVariant, const Color(0xff3700b3)); + expect(scheme.secondaryVariant, const Color(0xff018786)); }); test('dark scheme matches the spec', () { // Colors should match the Material Design baseline dark theme: // https://material.io/design/color/dark-theme.html#ui-application + // with the new Material 3 colors defaulting to values from the M2 + // baseline. const ColorScheme scheme = ColorScheme.dark(); - expect(scheme.primary, const Color(0xffbb86fc)); - expect(scheme.primaryVariant, const Color(0xff3700b3)); - expect(scheme.secondary, const Color(0xff03dac6)); - expect(scheme.secondaryVariant, const Color(0xff03dac6)); - expect(scheme.background, const Color(0xff121212)); - expect(scheme.surface, const Color(0xff121212)); - expect(scheme.error, const Color(0xffcf6679)); - expect(scheme.onPrimary, const Color(0xff000000)); - expect(scheme.onSecondary, const Color(0xff000000)); - expect(scheme.onBackground, const Color(0xffffffff)); - expect(scheme.onSurface, const Color(0xffffffff)); - expect(scheme.onError, const Color(0xff000000)); expect(scheme.brightness, Brightness.dark); + expect(scheme.primary, const Color(0xffbb86fc)); + expect(scheme.onPrimary, const Color(0xff000000)); + expect(scheme.primaryContainer, scheme.primary); + expect(scheme.onPrimaryContainer, scheme.onPrimary); + expect(scheme.secondary, const Color(0xff03dac6)); + expect(scheme.onSecondary, const Color(0xff000000)); + expect(scheme.secondaryContainer, scheme.secondary); + expect(scheme.onSecondaryContainer, scheme.onSecondary); + expect(scheme.tertiary, scheme.secondary); + expect(scheme.onTertiary, scheme.onSecondary); + expect(scheme.tertiaryContainer, scheme.tertiary); + expect(scheme.onTertiaryContainer, scheme.onTertiary); + expect(scheme.error, const Color(0xffcf6679)); + expect(scheme.onError, const Color(0xff000000)); + expect(scheme.errorContainer, scheme.error); + expect(scheme.onErrorContainer, scheme.onError); + expect(scheme.background, const Color(0xff121212)); + expect(scheme.onBackground, const Color(0xffffffff)); + expect(scheme.surface, const Color(0xff121212)); + expect(scheme.onSurface, const Color(0xffffffff)); + expect(scheme.surfaceVariant, scheme.surface); + expect(scheme.onSurfaceVariant, scheme.onSurface); + expect(scheme.outline, scheme.onBackground); + expect(scheme.shadow, scheme.onBackground); + expect(scheme.inverseSurface, scheme.onSurface); + expect(scheme.onInverseSurface, scheme.surface); + expect(scheme.inversePrimary, scheme.onPrimary); + + expect(scheme.primaryVariant, const Color(0xff3700b3)); + expect(scheme.secondaryVariant, const Color(0xff03dac6)); }); test('high contrast light scheme matches the spec', () { // Colors are based off of the Material Design baseline default theme: // https://material.io/design/color/dark-theme.html#ui-application + // with the new Material 3 colors defaulting to values from the M2 + // baseline. const ColorScheme scheme = ColorScheme.highContrastLight(); - expect(scheme.primary, const Color(0xff0000ba)); - expect(scheme.primaryVariant, const Color(0xff000088)); - expect(scheme.secondary, const Color(0xff66fff9)); - expect(scheme.secondaryVariant, const Color(0xff018786)); - expect(scheme.background, const Color(0xffffffff)); - expect(scheme.surface, const Color(0xffffffff)); - expect(scheme.error, const Color(0xff790000)); - expect(scheme.onPrimary, const Color(0xffffffff)); - expect(scheme.onSecondary, const Color(0xff000000)); - expect(scheme.onBackground, const Color(0xff000000)); - expect(scheme.onSurface, const Color(0xff000000)); - expect(scheme.onError, const Color(0xffffffff)); expect(scheme.brightness, Brightness.light); + expect(scheme.primary, const Color(0xff0000ba)); + expect(scheme.onPrimary, const Color(0xffffffff)); + expect(scheme.primaryContainer, scheme.primary); + expect(scheme.onPrimaryContainer, scheme.onPrimary); + expect(scheme.secondary, const Color(0xff66fff9)); + expect(scheme.onSecondary, const Color(0xff000000)); + expect(scheme.secondaryContainer, scheme.secondary); + expect(scheme.onSecondaryContainer, scheme.onSecondary); + expect(scheme.tertiary, scheme.secondary); + expect(scheme.onTertiary, scheme.onSecondary); + expect(scheme.tertiaryContainer, scheme.tertiary); + expect(scheme.onTertiaryContainer, scheme.onTertiary); + expect(scheme.error, const Color(0xff790000)); + expect(scheme.onError, const Color(0xffffffff)); + expect(scheme.errorContainer, scheme.error); + expect(scheme.onErrorContainer, scheme.onError); + expect(scheme.background, const Color(0xffffffff)); + expect(scheme.onBackground, const Color(0xff000000)); + expect(scheme.surface, const Color(0xffffffff)); + expect(scheme.onSurface, const Color(0xff000000)); + expect(scheme.surfaceVariant, scheme.surface); + expect(scheme.onSurfaceVariant, scheme.onSurface); + expect(scheme.outline, scheme.onBackground); + expect(scheme.shadow, scheme.onBackground); + expect(scheme.inverseSurface, scheme.onSurface); + expect(scheme.onInverseSurface, scheme.surface); + expect(scheme.inversePrimary, scheme.onPrimary); + + expect(scheme.primaryVariant, const Color(0xff000088)); + expect(scheme.secondaryVariant, const Color(0xff018786)); }); test('high contrast dark scheme matches the spec', () { // Colors are based off of the Material Design baseline dark theme: // https://material.io/design/color/dark-theme.html#ui-application + // with the new Material 3 colors defaulting to values from the M2 + // baseline. const ColorScheme scheme = ColorScheme.highContrastDark(); - expect(scheme.primary, const Color(0xffefb7ff)); - expect(scheme.primaryVariant, const Color(0xffbe9eff)); - expect(scheme.secondary, const Color(0xff66fff9)); - expect(scheme.secondaryVariant, const Color(0xff66fff9)); - expect(scheme.background, const Color(0xff121212)); - expect(scheme.surface, const Color(0xff121212)); - expect(scheme.error, const Color(0xff9b374d)); - expect(scheme.onPrimary, const Color(0xff000000)); - expect(scheme.onSecondary, const Color(0xff000000)); - expect(scheme.onBackground, const Color(0xffffffff)); - expect(scheme.onSurface, const Color(0xffffffff)); - expect(scheme.onError, const Color(0xff000000)); expect(scheme.brightness, Brightness.dark); + expect(scheme.primary, const Color(0xffefb7ff)); + expect(scheme.onPrimary, const Color(0xff000000)); + expect(scheme.primaryContainer, scheme.primary); + expect(scheme.onPrimaryContainer, scheme.onPrimary); + expect(scheme.secondary, const Color(0xff66fff9)); + expect(scheme.onSecondary, const Color(0xff000000)); + expect(scheme.secondaryContainer, scheme.secondary); + expect(scheme.onSecondaryContainer, scheme.onSecondary); + expect(scheme.tertiary, scheme.secondary); + expect(scheme.onTertiary, scheme.onSecondary); + expect(scheme.tertiaryContainer, scheme.tertiary); + expect(scheme.onTertiaryContainer, scheme.onTertiary); + expect(scheme.error, const Color(0xff9b374d)); + expect(scheme.onError, const Color(0xff000000)); + expect(scheme.errorContainer, scheme.error); + expect(scheme.onErrorContainer, scheme.onError); + expect(scheme.background, const Color(0xff121212)); + expect(scheme.onBackground, const Color(0xffffffff)); + expect(scheme.surface, const Color(0xff121212)); + expect(scheme.onSurface, const Color(0xffffffff)); + expect(scheme.surfaceVariant, scheme.surface); + expect(scheme.onSurfaceVariant, scheme.onSurface); + expect(scheme.outline, scheme.onBackground); + expect(scheme.shadow, scheme.onBackground); + expect(scheme.inverseSurface, scheme.onSurface); + expect(scheme.onInverseSurface, scheme.surface); + expect(scheme.inversePrimary, scheme.onPrimary); + + expect(scheme.primaryVariant, const Color(0xffbe9eff)); + expect(scheme.secondaryVariant, const Color(0xff66fff9)); }); } diff --git a/packages/flutter/test_fixes/material.dart b/packages/flutter/test_fixes/material.dart index 99c875a48c..512e251427 100644 --- a/packages/flutter/test_fixes/material.dart +++ b/packages/flutter/test_fixes/material.dart @@ -507,4 +507,15 @@ void main() { themeData = ThemeData.raw(primaryColorBrightness: Brightness.dark); themeData = themeData.copyWith(primaryColorBrightness: Brightness.dark); themeData.primaryColorBrightness; // Removing field reference not supported. + + // Changes made in https://github.com/flutter/flutter/pull/93427 + ColorScheme colorScheme = ColorScheme(); + colorScheme = ColorScheme(primaryVariant: Colors.black, secondaryVariant: Colors.white); + colorScheme = ColorScheme.light(primaryVariant: Colors.black, secondaryVariant: Colors.white); + colorScheme = ColorScheme.dark(primaryVariant: Colors.black, secondaryVariant: Colors.white); + colorScheme = ColorScheme.highContrastLight(primaryVariant: Colors.black, secondaryVariant: Colors.white); + colorScheme = ColorScheme.highContrastDark(primaryVariant: Colors.black, secondaryVariant: Colors.white); + colorScheme = colorScheme.copyWith(primaryVariant: Colors.black, secondaryVariant: Colors.white); + colorScheme.primaryVariant; + colorScheme.secondaryVariant; } diff --git a/packages/flutter/test_fixes/material.dart.expect b/packages/flutter/test_fixes/material.dart.expect index 07b27f135d..82fb20f289 100644 --- a/packages/flutter/test_fixes/material.dart.expect +++ b/packages/flutter/test_fixes/material.dart.expect @@ -480,4 +480,15 @@ void main() { themeData = ThemeData.raw(); themeData = themeData.copyWith(); themeData.primaryColorBrightness; // Removing field reference not supported. + + // Changes made in https://github.com/flutter/flutter/pull/93427 + ColorScheme colorScheme = ColorScheme(); + colorScheme = ColorScheme(); + colorScheme = ColorScheme.light(); + colorScheme = ColorScheme.dark(); + colorScheme = ColorScheme.highContrastLight(); + colorScheme = ColorScheme.highContrastDark(); + colorScheme = colorScheme.copyWith(); + colorScheme.primaryContainer; + colorScheme.secondaryContainer; }