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.

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.
128c7234 · Darren Austin · GitHub · d4f8ffee · 128c7234 · 128c7234
Unverified Commit 128c7234 authored Nov 23, 2021 by Darren Austin Committed by GitHub Nov 23, 2021
6 changed files
--- 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,

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

--- a/packages/flutter/lib/src/material/color_scheme.dart
+++ b/packages/flutter/lib/src/material/color_scheme.dart
--- 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.brightness, Brightness.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.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.onError, const Color(0xffffffff));
-    expect(scheme.brightness, Brightness.light);
+    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.brightness, Brightness.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.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.onError, const Color(0xff000000));
-    expect(scheme.brightness, Brightness.dark);
+    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.brightness, Brightness.light);
    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.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.onError, const Color(0xffffffff));
-    expect(scheme.brightness, Brightness.light);
+    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.brightness, Brightness.dark);
    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.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.onError, const Color(0xff000000));
-    expect(scheme.brightness, Brightness.dark);
+    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));
  });
 }
--- 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;
 }
--- 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;
 }