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.
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 90cf627..8ba3357 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 @@
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 d4b9e03..5b29eea 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 399c244..43642d4 100644
--- a/packages/flutter/lib/src/material/color_scheme.dart
+++ b/packages/flutter/lib/src/material/color_scheme.dart
@@ -8,8 +8,8 @@
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 @@
@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 @@
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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
- /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
- 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
- /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
- 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
- /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
- 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
- /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
- 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
/// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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
+ /// <https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html>.
+ 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 @@
/// {@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 @@
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(<Object?>[
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', 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 2e2ea20..1020f02 100644
--- a/packages/flutter/test/material/color_scheme_test.dart
+++ b/packages/flutter/test/material/color_scheme_test.dart
@@ -9,76 +9,156 @@
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 99c875a..512e251 100644
--- a/packages/flutter/test_fixes/material.dart
+++ b/packages/flutter/test_fixes/material.dart
@@ -507,4 +507,15 @@
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 07b27f1..82fb20f 100644
--- a/packages/flutter/test_fixes/material.dart.expect
+++ b/packages/flutter/test_fixes/material.dart.expect
@@ -480,4 +480,15 @@
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;
}
