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.

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,

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

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));
   });
 }

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;
 }

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;
 }