Add surfaceTint, outlineVariant, scrim and re-arrange (#2070)

Re-arrange colors according to [Baseline color scheme tokens]

[Baseline color scheme tokens]:
https://m3.material.io/styles/color/the-color-system/tokens#e26e130c-fa67-48e1-81ca-d28f6e4ed398

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[CLA]: https://cla.developers.google.com/
[Discord]: https://github.com/flutter/flutter/wiki/Chat
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md

experimental/material_3_demo/lib/color_palettes_screen.dart

@@ -137,144 +137,191 @@ class ColorSchemeView extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        ColorGroup(children: [
-          ColorChip(
-            label: 'primary',
-            color: colorScheme.primary,
-            onColor: colorScheme.onPrimary,
-          ),
-          ColorChip(
+        ColorGroup(
+          children: [
+            ColorChip(
+              label: 'primary',
+              color: colorScheme.primary,
+              onColor: colorScheme.onPrimary,
+            ),
+            ColorChip(
               label: 'onPrimary',
               color: colorScheme.onPrimary,
-              onColor: colorScheme.primary),
-          ColorChip(
-            label: 'primaryContainer',
-            color: colorScheme.primaryContainer,
-            onColor: colorScheme.onPrimaryContainer,
-          ),
-          ColorChip(
-            label: 'onPrimaryContainer',
-            color: colorScheme.onPrimaryContainer,
-            onColor: colorScheme.primaryContainer,
-          ),
-        ]),
+              onColor: colorScheme.primary,
+            ),
+            ColorChip(
+              label: 'primaryContainer',
+              color: colorScheme.primaryContainer,
+              onColor: colorScheme.onPrimaryContainer,
+            ),
+            ColorChip(
+              label: 'onPrimaryContainer',
+              color: colorScheme.onPrimaryContainer,
+              onColor: colorScheme.primaryContainer,
+            ),
+          ],
+        ),
         divider,
-        ColorGroup(children: [
-          ColorChip(
-            label: 'secondary',
-            color: colorScheme.secondary,
-            onColor: colorScheme.onSecondary,
-          ),
-          ColorChip(
-            label: 'onSecondary',
-            color: colorScheme.onSecondary,
-            onColor: colorScheme.secondary,
-          ),
-          ColorChip(
-            label: 'secondaryContainer',
-            color: colorScheme.secondaryContainer,
-            onColor: colorScheme.onSecondaryContainer,
-          ),
-          ColorChip(
+        ColorGroup(
+          children: [
+            ColorChip(
+              label: 'secondary',
+              color: colorScheme.secondary,
+              onColor: colorScheme.onSecondary,
+            ),
+            ColorChip(
+              label: 'onSecondary',
+              color: colorScheme.onSecondary,
+              onColor: colorScheme.secondary,
+            ),
+            ColorChip(
+              label: 'secondaryContainer',
+              color: colorScheme.secondaryContainer,
+              onColor: colorScheme.onSecondaryContainer,
+            ),
+            ColorChip(
               label: 'onSecondaryContainer',
               color: colorScheme.onSecondaryContainer,
-              onColor: colorScheme.secondaryContainer),
-        ]),
+              onColor: colorScheme.secondaryContainer,
+            ),
+          ],
+        ),
         divider,
         ColorGroup(
           children: [
             ColorChip(
-                label: 'tertiary',
-                color: colorScheme.tertiary,
-                onColor: colorScheme.onTertiary),
+              label: 'tertiary',
+              color: colorScheme.tertiary,
+              onColor: colorScheme.onTertiary,
+            ),
             ColorChip(
-                label: 'onTertiary',
-                color: colorScheme.onTertiary,
-                onColor: colorScheme.tertiary),
+              label: 'onTertiary',
+              color: colorScheme.onTertiary,
+              onColor: colorScheme.tertiary,
+            ),
             ColorChip(
-                label: 'tertiaryContainer',
-                color: colorScheme.tertiaryContainer,
-                onColor: colorScheme.onTertiaryContainer),
+              label: 'tertiaryContainer',
+              color: colorScheme.tertiaryContainer,
+              onColor: colorScheme.onTertiaryContainer,
+            ),
             ColorChip(
-                label: 'onTertiaryContainer',
-                color: colorScheme.onTertiaryContainer,
-                onColor: colorScheme.tertiaryContainer),
+              label: 'onTertiaryContainer',
+              color: colorScheme.onTertiaryContainer,
+              onColor: colorScheme.tertiaryContainer,
+            ),
           ],
         ),
         divider,
         ColorGroup(
           children: [
             ColorChip(
-                label: 'error',
-                color: colorScheme.error,
-                onColor: colorScheme.onError),
+              label: 'error',
+              color: colorScheme.error,
+              onColor: colorScheme.onError,
+            ),
             ColorChip(
-                label: 'onError',
-                color: colorScheme.onError,
-                onColor: colorScheme.error),
+              label: 'onError',
+              color: colorScheme.onError,
+              onColor: colorScheme.error,
+            ),
             ColorChip(
-                label: 'errorContainer',
-                color: colorScheme.errorContainer,
-                onColor: colorScheme.onErrorContainer),
+              label: 'errorContainer',
+              color: colorScheme.errorContainer,
+              onColor: colorScheme.onErrorContainer,
+            ),
             ColorChip(
-                label: 'onErrorContainer',
-                color: colorScheme.onErrorContainer,
-                onColor: colorScheme.errorContainer),
+              label: 'onErrorContainer',
+              color: colorScheme.onErrorContainer,
+              onColor: colorScheme.errorContainer,
+            ),
           ],
         ),
         divider,
         ColorGroup(
           children: [
             ColorChip(
-                label: 'background',
-                color: colorScheme.background,
-                onColor: colorScheme.onBackground),
+              label: 'surface',
+              color: colorScheme.surface,
+              onColor: colorScheme.onSurface,
+            ),
+            ColorChip(
+              label: 'onSurface',
+              color: colorScheme.onSurface,
+              onColor: colorScheme.surface,
+            ),
+            ColorChip(
+              label: 'surfaceVariant',
+              color: colorScheme.surfaceVariant,
+              onColor: colorScheme.onSurfaceVariant,
+            ),
+            ColorChip(
+              label: 'onSurfaceVariant',
+              color: colorScheme.onSurfaceVariant,
+              onColor: colorScheme.surfaceVariant,
+            ),
             ColorChip(
-                label: 'onBackground',
-                color: colorScheme.onBackground,
-                onColor: colorScheme.background),
+              label: 'surfaceTint',
+              color: colorScheme.surfaceTint,
+            ),
           ],
         ),
         divider,
         ColorGroup(
           children: [
             ColorChip(
-                label: 'surface',
-                color: colorScheme.surface,
-                onColor: colorScheme.onSurface),
+              label: 'outline',
+              color: colorScheme.outline,
+            ),
             ColorChip(
-                label: 'onSurface',
-                color: colorScheme.onSurface,
-                onColor: colorScheme.surface),
+              label: 'outlineVariant',
+              color: colorScheme.outlineVariant,
+            ),
+          ],
+        ),
+        divider,
+        ColorGroup(
+          children: [
+            ColorChip(
+              label: 'inverseSurface',
+              color: colorScheme.inverseSurface,
+              onColor: colorScheme.onInverseSurface,
+            ),
             ColorChip(
-                label: 'surfaceVariant',
-                color: colorScheme.surfaceVariant,
-                onColor: colorScheme.onSurfaceVariant),
+              label: 'onInverseSurface',
+              color: colorScheme.onInverseSurface,
+              onColor: colorScheme.inverseSurface,
+            ),
             ColorChip(
-                label: 'onSurfaceVariant',
-                color: colorScheme.onSurfaceVariant,
-                onColor: colorScheme.surfaceVariant),
+              label: 'inversePrimary',
+              color: colorScheme.inversePrimary,
+              onColor: colorScheme.primary,
+            ),
           ],
         ),
         divider,
         ColorGroup(
           children: [
-            ColorChip(label: 'outline', color: colorScheme.outline),
-            ColorChip(label: 'shadow', color: colorScheme.shadow),
             ColorChip(
-                label: 'inverseSurface',
-                color: colorScheme.inverseSurface,
-                onColor: colorScheme.onInverseSurface),
+              label: 'background',
+              color: colorScheme.background,
+              onColor: colorScheme.onBackground,
+            ),
             ColorChip(
-                label: 'onInverseSurface',
-                color: colorScheme.onInverseSurface,
-                onColor: colorScheme.inverseSurface),
+              label: 'onBackground',
+              color: colorScheme.onBackground,
+              onColor: colorScheme.background,
+            ),
             ColorChip(
-                label: 'inversePrimary',
-                color: colorScheme.inversePrimary,
-                onColor: colorScheme.primary),
+              label: 'scrim',
+              color: colorScheme.scrim,
+            ),
+            ColorChip(
+              label: 'shadow',
+              color: colorScheme.shadow,
+            ),
           ],
         ),
+        divider,
       ],
     );
   }

experimental/material_3_demo/test/color_screen_test.dart

@@ -70,6 +70,6 @@ void main() {
     ));
     expect(find.text('Light ColorScheme'), findsOneWidget);
     expect(find.text('Dark ColorScheme'), findsOneWidget);
-    expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(14));
+    expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(16));
   });
 }

material_3_demo/lib/color_palettes_screen.dart

@@ -137,144 +137,191 @@ class ColorSchemeView extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        ColorGroup(children: [
-          ColorChip(
-            label: 'primary',
-            color: colorScheme.primary,
-            onColor: colorScheme.onPrimary,
-          ),
-          ColorChip(
+        ColorGroup(
+          children: [
+            ColorChip(
+              label: 'primary',
+              color: colorScheme.primary,
+              onColor: colorScheme.onPrimary,
+            ),
+            ColorChip(
               label: 'onPrimary',
               color: colorScheme.onPrimary,
-              onColor: colorScheme.primary),
-          ColorChip(
-            label: 'primaryContainer',
-            color: colorScheme.primaryContainer,
-            onColor: colorScheme.onPrimaryContainer,
-          ),
-          ColorChip(
-            label: 'onPrimaryContainer',
-            color: colorScheme.onPrimaryContainer,
-            onColor: colorScheme.primaryContainer,
-          ),
-        ]),
+              onColor: colorScheme.primary,
+            ),
+            ColorChip(
+              label: 'primaryContainer',
+              color: colorScheme.primaryContainer,
+              onColor: colorScheme.onPrimaryContainer,
+            ),
+            ColorChip(
+              label: 'onPrimaryContainer',
+              color: colorScheme.onPrimaryContainer,
+              onColor: colorScheme.primaryContainer,
+            ),
+          ],
+        ),
         divider,
-        ColorGroup(children: [
-          ColorChip(
-            label: 'secondary',
-            color: colorScheme.secondary,
-            onColor: colorScheme.onSecondary,
-          ),
-          ColorChip(
-            label: 'onSecondary',
-            color: colorScheme.onSecondary,
-            onColor: colorScheme.secondary,
-          ),
-          ColorChip(
-            label: 'secondaryContainer',
-            color: colorScheme.secondaryContainer,
-            onColor: colorScheme.onSecondaryContainer,
-          ),
-          ColorChip(
+        ColorGroup(
+          children: [
+            ColorChip(
+              label: 'secondary',
+              color: colorScheme.secondary,
+              onColor: colorScheme.onSecondary,
+            ),
+            ColorChip(
+              label: 'onSecondary',
+              color: colorScheme.onSecondary,
+              onColor: colorScheme.secondary,
+            ),
+            ColorChip(
+              label: 'secondaryContainer',
+              color: colorScheme.secondaryContainer,
+              onColor: colorScheme.onSecondaryContainer,
+            ),
+            ColorChip(
               label: 'onSecondaryContainer',
               color: colorScheme.onSecondaryContainer,
-              onColor: colorScheme.secondaryContainer),
-        ]),
+              onColor: colorScheme.secondaryContainer,
+            ),
+          ],
+        ),
         divider,
         ColorGroup(
           children: [
             ColorChip(
-                label: 'tertiary',
-                color: colorScheme.tertiary,
-                onColor: colorScheme.onTertiary),
+              label: 'tertiary',
+              color: colorScheme.tertiary,
+              onColor: colorScheme.onTertiary,
+            ),
             ColorChip(
-                label: 'onTertiary',
-                color: colorScheme.onTertiary,
-                onColor: colorScheme.tertiary),
+              label: 'onTertiary',
+              color: colorScheme.onTertiary,
+              onColor: colorScheme.tertiary,
+            ),
             ColorChip(
-                label: 'tertiaryContainer',
-                color: colorScheme.tertiaryContainer,
-                onColor: colorScheme.onTertiaryContainer),
+              label: 'tertiaryContainer',
+              color: colorScheme.tertiaryContainer,
+              onColor: colorScheme.onTertiaryContainer,
+            ),
             ColorChip(
-                label: 'onTertiaryContainer',
-                color: colorScheme.onTertiaryContainer,
-                onColor: colorScheme.tertiaryContainer),
+              label: 'onTertiaryContainer',
+              color: colorScheme.onTertiaryContainer,
+              onColor: colorScheme.tertiaryContainer,
+            ),
           ],
         ),
         divider,
         ColorGroup(
           children: [
             ColorChip(
-                label: 'error',
-                color: colorScheme.error,
-                onColor: colorScheme.onError),
+              label: 'error',
+              color: colorScheme.error,
+              onColor: colorScheme.onError,
+            ),
             ColorChip(
-                label: 'onError',
-                color: colorScheme.onError,
-                onColor: colorScheme.error),
+              label: 'onError',
+              color: colorScheme.onError,
+              onColor: colorScheme.error,
+            ),
             ColorChip(
-                label: 'errorContainer',
-                color: colorScheme.errorContainer,
-                onColor: colorScheme.onErrorContainer),
+              label: 'errorContainer',
+              color: colorScheme.errorContainer,
+              onColor: colorScheme.onErrorContainer,
+            ),
             ColorChip(
-                label: 'onErrorContainer',
-                color: colorScheme.onErrorContainer,
-                onColor: colorScheme.errorContainer),
+              label: 'onErrorContainer',
+              color: colorScheme.onErrorContainer,
+              onColor: colorScheme.errorContainer,
+            ),
           ],
         ),
         divider,
         ColorGroup(
           children: [
             ColorChip(
-                label: 'background',
-                color: colorScheme.background,
-                onColor: colorScheme.onBackground),
+              label: 'surface',
+              color: colorScheme.surface,
+              onColor: colorScheme.onSurface,
+            ),
+            ColorChip(
+              label: 'onSurface',
+              color: colorScheme.onSurface,
+              onColor: colorScheme.surface,
+            ),
+            ColorChip(
+              label: 'surfaceVariant',
+              color: colorScheme.surfaceVariant,
+              onColor: colorScheme.onSurfaceVariant,
+            ),
+            ColorChip(
+              label: 'onSurfaceVariant',
+              color: colorScheme.onSurfaceVariant,
+              onColor: colorScheme.surfaceVariant,
+            ),
             ColorChip(
-                label: 'onBackground',
-                color: colorScheme.onBackground,
-                onColor: colorScheme.background),
+              label: 'surfaceTint',
+              color: colorScheme.surfaceTint,
+            ),
           ],
         ),
         divider,
         ColorGroup(
           children: [
             ColorChip(
-                label: 'surface',
-                color: colorScheme.surface,
-                onColor: colorScheme.onSurface),
+              label: 'outline',
+              color: colorScheme.outline,
+            ),
             ColorChip(
-                label: 'onSurface',
-                color: colorScheme.onSurface,
-                onColor: colorScheme.surface),
+              label: 'outlineVariant',
+              color: colorScheme.outlineVariant,
+            ),
+          ],
+        ),
+        divider,
+        ColorGroup(
+          children: [
+            ColorChip(
+              label: 'inverseSurface',
+              color: colorScheme.inverseSurface,
+              onColor: colorScheme.onInverseSurface,
+            ),
             ColorChip(
-                label: 'surfaceVariant',
-                color: colorScheme.surfaceVariant,
-                onColor: colorScheme.onSurfaceVariant),
+              label: 'onInverseSurface',
+              color: colorScheme.onInverseSurface,
+              onColor: colorScheme.inverseSurface,
+            ),
             ColorChip(
-                label: 'onSurfaceVariant',
-                color: colorScheme.onSurfaceVariant,
-                onColor: colorScheme.surfaceVariant),
+              label: 'inversePrimary',
+              color: colorScheme.inversePrimary,
+              onColor: colorScheme.primary,
+            ),
           ],
         ),
         divider,
         ColorGroup(
           children: [
-            ColorChip(label: 'outline', color: colorScheme.outline),
-            ColorChip(label: 'shadow', color: colorScheme.shadow),
             ColorChip(
-                label: 'inverseSurface',
-                color: colorScheme.inverseSurface,
-                onColor: colorScheme.onInverseSurface),
+              label: 'background',
+              color: colorScheme.background,
+              onColor: colorScheme.onBackground,
+            ),
             ColorChip(
-                label: 'onInverseSurface',
-                color: colorScheme.onInverseSurface,
-                onColor: colorScheme.inverseSurface),
+              label: 'onBackground',
+              color: colorScheme.onBackground,
+              onColor: colorScheme.background,
+            ),
             ColorChip(
-                label: 'inversePrimary',
-                color: colorScheme.inversePrimary,
-                onColor: colorScheme.primary),
+              label: 'scrim',
+              color: colorScheme.scrim,
+            ),
+            ColorChip(
+              label: 'shadow',
+              color: colorScheme.shadow,
+            ),
           ],
         ),
+        divider,
       ],
     );
   }

material_3_demo/test/color_screen_test.dart

@@ -70,6 +70,6 @@ void main() {
     ));
     expect(find.text('Light ColorScheme'), findsOneWidget);
     expect(find.text('Dark ColorScheme'), findsOneWidget);
-    expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(14));
+    expect(find.byType(ColorGroup, skipOffstage: false), findsNWidgets(16));
   });
 }