From 49bc4d9d0223fce5e83cf7a235ee914c917c0ceb Mon Sep 17 00:00:00 2001 From: Hrishikesh Kadam Date: Thu, 2 Nov 2023 08:03:57 +0530 Subject: [PATCH] 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]. [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 --- .../lib/color_palettes_screen.dart | 229 +++++++++++------- .../test/color_screen_test.dart | 2 +- .../lib/color_palettes_screen.dart | 229 +++++++++++------- material_3_demo/test/color_screen_test.dart | 2 +- 4 files changed, 278 insertions(+), 184 deletions(-) diff --git a/experimental/material_3_demo/lib/color_palettes_screen.dart b/experimental/material_3_demo/lib/color_palettes_screen.dart index db399f817..580678be7 100644 --- a/experimental/material_3_demo/lib/color_palettes_screen.dart +++ b/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, ], ); } diff --git a/experimental/material_3_demo/test/color_screen_test.dart b/experimental/material_3_demo/test/color_screen_test.dart index 3f82ce741..f9f6453fa 100644 --- a/experimental/material_3_demo/test/color_screen_test.dart +++ b/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)); }); } diff --git a/material_3_demo/lib/color_palettes_screen.dart b/material_3_demo/lib/color_palettes_screen.dart index db399f817..580678be7 100644 --- a/material_3_demo/lib/color_palettes_screen.dart +++ b/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, ], ); } diff --git a/material_3_demo/test/color_screen_test.dart b/material_3_demo/test/color_screen_test.dart index 3f82ce741..f9f6453fa 100644 --- a/material_3_demo/test/color_screen_test.dart +++ b/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)); }); }