From 115c2d62eb7d87608486c2608999f9ffae3376b3 Mon Sep 17 00:00:00 2001 From: Leigha Jarett Date: Wed, 13 Dec 2023 15:21:49 -0500 Subject: [PATCH] Finishing PoC --- .../lib/color_palettes_screen.dart | 1089 ++++++++++------- 1 file changed, 635 insertions(+), 454 deletions(-) diff --git a/experimental/material_3_demo/lib/color_palettes_screen.dart b/experimental/material_3_demo/lib/color_palettes_screen.dart index b90baf0e3..dea623c90 100644 --- a/experimental/material_3_demo/lib/color_palettes_screen.dart +++ b/experimental/material_3_demo/lib/color_palettes_screen.dart @@ -173,445 +173,607 @@ class _ColorSchemeViewState extends State { super.didUpdateWidget(oldWidget); } + @override + Widget build(BuildContext context) { + final primary = EditableColorChip( + small: _small, + label: 'primary', + color: _colorScheme.primary, + onColor: _colorScheme.onPrimary, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(primary: color); + widget.handleColorRoleChange( + widget.brightness, + primary: color, + ); + }, + ); + + final onPrimary = EditableColorChip( + small: _small, + label: 'onPrimary', + color: _colorScheme.onPrimary, + onColor: _colorScheme.primary, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onPrimary: color); + widget.handleColorRoleChange( + widget.brightness, + onPrimary: color, + ); + }, + ); + + final primaryContainer = EditableColorChip( + small: _small, + label: 'primaryContainer', + color: _colorScheme.primaryContainer, + onColor: _colorScheme.onPrimaryContainer, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(primaryContainer: color); + widget.handleColorRoleChange( + widget.brightness, + primaryContainer: color, + ); + }, + ); + + final onPrimaryContainer = EditableColorChip( + small: _small, + label: 'onPrimaryContainer', + color: _colorScheme.onPrimaryContainer, + onColor: _colorScheme.primaryContainer, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onPrimaryContainer: color); + widget.handleColorRoleChange( + widget.brightness, + onPrimaryContainer: color, + ); + }, + ); + + final secondary = EditableColorChip( + small: _small, + label: 'secondary', + color: _colorScheme.secondary, + onColor: _colorScheme.onSecondary, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(secondary: color); + widget.handleColorRoleChange( + widget.brightness, + secondary: color, + ); + }, + ); + + final onSecondary = EditableColorChip( + small: _small, + label: 'onSecondary', + color: _colorScheme.onSecondary, + onColor: _colorScheme.secondary, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onSecondary: color); + widget.handleColorRoleChange( + widget.brightness, + onSecondary: color, + ); + }, + ); + + final secondaryContainer = EditableColorChip( + small: _small, + label: 'secondaryContainer', + color: _colorScheme.secondaryContainer, + onColor: _colorScheme.onSecondaryContainer, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(secondaryContainer: color); + widget.handleColorRoleChange( + widget.brightness, + secondaryContainer: color, + ); + }, + ); + + final onSecondaryContainer = EditableColorChip( + small: _small, + label: 'onSecondaryContainer', + color: _colorScheme.onSecondaryContainer, + onColor: _colorScheme.secondaryContainer, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onSecondaryContainer: color); + widget.handleColorRoleChange( + widget.brightness, + onSecondaryContainer: color, + ); + }, + ); + + final tertiary = EditableColorChip( + small: _small, + label: 'tertiary', + color: _colorScheme.tertiary, + onColor: _colorScheme.onTertiary, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(tertiary: color); + widget.handleColorRoleChange( + widget.brightness, + tertiary: color, + ); + }, + ); + + final onTertiary = EditableColorChip( + small: _small, + label: 'onTertiary', + color: _colorScheme.onTertiary, + onColor: _colorScheme.tertiary, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onTertiary: color); + widget.handleColorRoleChange( + widget.brightness, + onTertiary: color, + ); + }, + ); + + final tertiaryContainer = EditableColorChip( + small: _small, + label: 'tertiaryContainer', + color: _colorScheme.tertiaryContainer, + onColor: _colorScheme.onTertiaryContainer, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(tertiaryContainer: color); + widget.handleColorRoleChange( + widget.brightness, + tertiaryContainer: color, + ); + }, + ); + + final onTertiaryContainer = EditableColorChip( + small: _small, + label: 'onTertiaryContainer', + color: _colorScheme.onTertiaryContainer, + onColor: _colorScheme.tertiaryContainer, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onTertiaryContainer: color); + widget.handleColorRoleChange( + widget.brightness, + onTertiaryContainer: color, + ); + }, + ); + + final error = EditableColorChip( + small: _small, + label: 'error', + color: _colorScheme.error, + onColor: _colorScheme.onError, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(error: color); + widget.handleColorRoleChange( + widget.brightness, + error: color, + ); + }, + ); + + final onError = EditableColorChip( + small: _small, + label: 'onError', + color: _colorScheme.onError, + onColor: _colorScheme.error, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onError: color); + widget.handleColorRoleChange( + widget.brightness, + onError: color, + ); + }, + ); + + final errorContainer = EditableColorChip( + small: _small, + label: 'errorContainer', + color: _colorScheme.errorContainer, + onColor: _colorScheme.onErrorContainer, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(errorContainer: color); + widget.handleColorRoleChange( + widget.brightness, + errorContainer: color, + ); + }, + ); + + final onErrorContainer = EditableColorChip( + small: _small, + label: 'onErrorContainer', + color: _colorScheme.onErrorContainer, + onColor: _colorScheme.errorContainer, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onErrorContainer: color); + widget.handleColorRoleChange( + widget.brightness, + onErrorContainer: color, + ); + }, + ); + + final surface = EditableColorChip( + small: _small, + label: 'surface', + color: _colorScheme.surface, + onColor: _colorScheme.onSurface, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(surface: color); + widget.handleColorRoleChange( + widget.brightness, + surface: color, + ); + }, + ); + + final onSurface = EditableColorChip( + small: _small, + label: 'onSurface', + color: _colorScheme.onSurface, + onColor: _colorScheme.surface, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onSurface: color); + widget.handleColorRoleChange( + widget.brightness, + onSurface: color, + ); + }, + ); + + final surfaceVariant = EditableColorChip( + small: _small, + label: 'surfaceVariant', + color: _colorScheme.surfaceVariant, + onColor: _colorScheme.onSurfaceVariant, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(surfaceVariant: color); + widget.handleColorRoleChange( + widget.brightness, + surfaceVariant: color, + ); + }, + ); + + final onSurfaceVariant = EditableColorChip( + small: _small, + label: 'onSurfaceVariant', + color: _colorScheme.onSurfaceVariant, + onColor: _colorScheme.surfaceVariant, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onSurfaceVariant: color); + widget.handleColorRoleChange( + widget.brightness, + onSurfaceVariant: color, + ); + }, + ); + + final surfaceTint = EditableColorChip( + small: _small, + label: 'surfaceTint', + color: _colorScheme.surfaceTint, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(surfaceTint: color); + widget.handleColorRoleChange( + widget.brightness, + surfaceTint: color, + ); + }, + ); + + final background = EditableColorChip( + small: _small, + label: 'background', + color: _colorScheme.background, + onColor: _colorScheme.onBackground, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(background: color); + widget.handleColorRoleChange( + widget.brightness, + background: color, + ); + }, + ); + + final onBackground = EditableColorChip( + small: _small, + label: 'onBackground', + color: _colorScheme.onBackground, + onColor: _colorScheme.background, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onBackground: color); + widget.handleColorRoleChange( + widget.brightness, + onBackground: color, + ); + }, + ); + + final outline = EditableColorChip( + small: _small, + label: 'outline', + color: _colorScheme.outline, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(outline: color); + widget.handleColorRoleChange( + widget.brightness, + outline: color, + ); + }, + ); + + final outlineVariant = EditableColorChip( + small: _small, + label: 'outlineVariant', + color: _colorScheme.outlineVariant, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(outlineVariant: color); + widget.handleColorRoleChange( + widget.brightness, + outlineVariant: color, + ); + }, + ); + + final shadow = EditableColorChip( + small: _small, + label: 'shadow', + color: _colorScheme.shadow, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(shadow: color); + widget.handleColorRoleChange( + widget.brightness, + shadow: color, + ); + }, + ); + + final inverseSurface = EditableColorChip( + small: _small, + label: 'inverseSurface', + color: _colorScheme.inverseSurface, + onColor: _colorScheme.onInverseSurface, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(inverseSurface: color); + widget.handleColorRoleChange( + widget.brightness, + inverseSurface: color, + ); + }, + ); + + final onInverseSurface = EditableColorChip( + small: _small, + label: 'onInverseSurface', + color: _colorScheme.onInverseSurface, + onColor: _colorScheme.inverseSurface, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(onInverseSurface: color); + widget.handleColorRoleChange( + widget.brightness, + onInverseSurface: color, + ); + }, + ); + + final inversePrimary = EditableColorChip( + small: _small, + label: 'inversePrimary', + color: _colorScheme.inversePrimary, + onColor: _colorScheme.primary, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(inversePrimary: color); + widget.handleColorRoleChange( + widget.brightness, + inversePrimary: color, + ); + }, + ); + + final scrim = EditableColorChip( + small: _small, + label: 'scrim', + color: _colorScheme.scrim, + updateColorScheme: (color) { + _colorScheme = _colorScheme.copyWith(scrim: color); + widget.handleColorRoleChange( + widget.brightness, + scrim: color, + ); + }, + ); + + return _small + ? Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: 20), + ColorGroupNavRail( + message: + "Accents (primary, secondary, tertiary) are usually your brand colors and are used to emphasize elements. Error is for error states.", + colorName: "Accents & Error", + children: [primary, secondary, tertiary, error]), + ColorGroupNavRail( + message: + "Indicates a color for text or icons on top of its paired parent color.", + colorName: "On Accents & Error", + children: [onPrimary, onSecondary, onTertiary, onError]), + ColorGroupNavRail( + message: + "Used as a fill color for foreground elements like buttons.", + colorName: "Containers", + children: [ + primaryContainer, + secondaryContainer, + tertiaryContainer, + errorContainer + ]), + ColorGroupNavRail( + message: + "Indicates a color for text or icons on top of the paired container color.", + colorName: "On Containers", + children: [ + onPrimaryContainer, + onSecondaryContainer, + onTertiaryContainer, + onErrorContainer + ]), + ColorGroupNavRail( + message: + "Applied to actionable components on surfaces that are the reverse of those in the surrounding UI, creating a contrasting effect.", + colorName: "Inverse Primary", + children: [inversePrimary]), + SizedBox(height: 20), + ColorGroupNavRail( + message: + "Background is typically used behind scrollable content, while surface and surfaceVariant are used for background of widgets. Inverse surface is used as the reverse of surface for a contrasting effect.", + colorName: "Background & Surfaces", + children: [ + background, + surface, + surfaceVariant, + inverseSurface + ]), + ColorGroupNavRail( + message: + "The color used for text and icons on top of the background or surface colors.", + colorName: "On Background & Surfaces", + children: [ + onBackground, + onSurface, + onSurfaceVariant, + onInverseSurface + ]), + ColorGroupNavRail( + // TO DO: figure out what to put here, since this is deprecated + message: "", + colorName: "Surface Tint", + children: [surfaceTint]), + ColorGroupNavRail( + message: + "Scrim is used for a semi-transparent overaly that darks areas to focus attention. Shadow and outline are used for shadows and outlines on some widgets.", + colorName: "Scrim, Shadow, Outline", + children: [scrim, shadow, outline, outlineVariant]), + ], + ) + : Column( + children: [ + ColorGroup( + small: _small, + children: [ + primary, + onPrimary, + primaryContainer, + onPrimaryContainer, + ], + ), + divider, + ColorGroup( + small: _small, + children: [ + secondary, + onSecondary, + secondaryContainer, + onSecondaryContainer, + ], + ), + divider, + ColorGroup( + small: _small, + children: [ + tertiary, + onTertiary, + tertiaryContainer, + onTertiaryContainer, + ], + ), + divider, + ColorGroup( + small: _small, + children: [ + error, + onError, + errorContainer, + onErrorContainer, + ], + ), + divider, + ColorGroup( + small: _small, + children: [ + surface, + onSurface, + surfaceVariant, + onSurfaceVariant, + surfaceTint, + ], + ), + divider, + ColorGroup( + small: _small, + children: [ + outline, + outlineVariant, + ], + ), + divider, + ColorGroup( + small: _small, + children: [ + inverseSurface, + onInverseSurface, + inversePrimary, + ], + ), + divider, + ColorGroup( + small: _small, + children: [background, onBackground, scrim, shadow], + ), + divider, + ], + ); + } +} + +class ColorGroupNavRail extends StatelessWidget { + const ColorGroupNavRail({ + super.key, + required this.message, + required this.colorName, + required this.children, + }); + + final String message; + final String colorName; + final List children; + @override Widget build(BuildContext context) { return Column( children: [ - ColorGroup( - small: _small, - children: [ - EditableColorChip( - small: _small, - label: 'primary', - color: _colorScheme.primary, - onColor: _colorScheme.onPrimary, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(primary: color); - widget.handleColorRoleChange( - widget.brightness, - primary: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onPrimary', - color: _colorScheme.onPrimary, - onColor: _colorScheme.primary, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onPrimary: color); - widget.handleColorRoleChange( - widget.brightness, - onPrimary: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'primaryContainer', - color: _colorScheme.primaryContainer, - onColor: _colorScheme.onPrimaryContainer, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(primaryContainer: color); - widget.handleColorRoleChange( - widget.brightness, - primaryContainer: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onPrimaryContainer', - color: _colorScheme.onPrimaryContainer, - onColor: _colorScheme.primaryContainer, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onPrimaryContainer: color); - widget.handleColorRoleChange( - widget.brightness, - onPrimaryContainer: color, - ); - }, - ), - ], - ), - divider, - ColorGroup( - small: _small, - children: [ - EditableColorChip( - small: _small, - label: 'secondary', - color: _colorScheme.secondary, - onColor: _colorScheme.onSecondary, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(secondary: color); - widget.handleColorRoleChange( - widget.brightness, - secondary: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onSecondary', - color: _colorScheme.onSecondary, - onColor: _colorScheme.secondary, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onSecondary: color); - widget.handleColorRoleChange( - widget.brightness, - onSecondary: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'secondaryContainer', - color: _colorScheme.secondaryContainer, - onColor: _colorScheme.onSecondaryContainer, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(secondaryContainer: color); - widget.handleColorRoleChange( - widget.brightness, - secondaryContainer: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onSecondaryContainer', - color: _colorScheme.onSecondaryContainer, - onColor: _colorScheme.secondaryContainer, - updateColorScheme: (color) { - _colorScheme = - _colorScheme.copyWith(onSecondaryContainer: color); - widget.handleColorRoleChange( - widget.brightness, - onSecondaryContainer: color, - ); - }, - ), - ], - ), - divider, - ColorGroup( - small: _small, - children: [ - EditableColorChip( - small: _small, - label: 'tertiary', - color: _colorScheme.tertiary, - onColor: _colorScheme.onTertiary, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(tertiary: color); - widget.handleColorRoleChange( - widget.brightness, - tertiary: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onTertiary', - color: _colorScheme.onTertiary, - onColor: _colorScheme.tertiary, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onTertiary: color); - widget.handleColorRoleChange( - widget.brightness, - onTertiary: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'tertiaryContainer', - color: _colorScheme.tertiaryContainer, - onColor: _colorScheme.onTertiaryContainer, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(tertiaryContainer: color); - widget.handleColorRoleChange( - widget.brightness, - tertiaryContainer: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onTertiaryContainer', - color: _colorScheme.onTertiaryContainer, - onColor: _colorScheme.tertiaryContainer, - updateColorScheme: (color) { - _colorScheme = - _colorScheme.copyWith(onTertiaryContainer: color); - widget.handleColorRoleChange( - widget.brightness, - onTertiaryContainer: color, - ); - }, - ), - ], - ), - divider, - ColorGroup( - small: _small, - children: [ - EditableColorChip( - small: _small, - label: 'error', - color: _colorScheme.error, - onColor: _colorScheme.onError, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(error: color); - widget.handleColorRoleChange( - widget.brightness, - error: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onError', - color: _colorScheme.onError, - onColor: _colorScheme.error, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onError: color); - widget.handleColorRoleChange( - widget.brightness, - onError: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'errorContainer', - color: _colorScheme.errorContainer, - onColor: _colorScheme.onErrorContainer, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(errorContainer: color); - widget.handleColorRoleChange( - widget.brightness, - errorContainer: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onErrorContainer', - color: _colorScheme.onErrorContainer, - onColor: _colorScheme.errorContainer, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onErrorContainer: color); - widget.handleColorRoleChange( - widget.brightness, - onErrorContainer: color, - ); - }, - ), - ], - ), - divider, - ColorGroup( - small: _small, - children: [ - EditableColorChip( - small: _small, - label: 'surface', - color: _colorScheme.surface, - onColor: _colorScheme.onSurface, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(surface: color); - widget.handleColorRoleChange( - widget.brightness, - surface: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onSurface', - color: _colorScheme.onSurface, - onColor: _colorScheme.surface, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onSurface: color); - widget.handleColorRoleChange( - widget.brightness, - onSurface: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'surfaceVariant', - color: _colorScheme.surfaceVariant, - onColor: _colorScheme.onSurfaceVariant, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(surfaceVariant: color); - widget.handleColorRoleChange( - widget.brightness, - surfaceVariant: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onSurfaceVariant', - color: _colorScheme.onSurfaceVariant, - onColor: _colorScheme.surfaceVariant, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onSurfaceVariant: color); - widget.handleColorRoleChange( - widget.brightness, - onSurfaceVariant: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'surfaceTint', - color: _colorScheme.surfaceTint, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(surfaceTint: color); - widget.handleColorRoleChange( - widget.brightness, - surfaceTint: color, - ); - }, - ), - ], - ), - divider, - ColorGroup( - small: _small, - children: [ - EditableColorChip( - small: _small, - label: 'outline', - color: _colorScheme.outline, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(outline: color); - widget.handleColorRoleChange( - widget.brightness, - outline: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'outlineVariant', - color: _colorScheme.outlineVariant, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(outlineVariant: color); - widget.handleColorRoleChange( - widget.brightness, - outlineVariant: color, - ); - }, - ), - ], - ), - divider, - ColorGroup( - small: _small, - children: [ - EditableColorChip( - small: _small, - label: 'inverseSurface', - color: _colorScheme.inverseSurface, - onColor: _colorScheme.onInverseSurface, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(inverseSurface: color); - widget.handleColorRoleChange( - widget.brightness, - inverseSurface: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onInverseSurface', - color: _colorScheme.onInverseSurface, - onColor: _colorScheme.inverseSurface, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onInverseSurface: color); - widget.handleColorRoleChange( - widget.brightness, - onInverseSurface: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'inversePrimary', - color: _colorScheme.inversePrimary, - onColor: _colorScheme.primary, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(inversePrimary: color); - widget.handleColorRoleChange( - widget.brightness, - inversePrimary: color, - ); - }, - ), - ], - ), - divider, - ColorGroup( - small: _small, - children: [ - EditableColorChip( - small: _small, - label: 'background', - color: _colorScheme.background, - onColor: _colorScheme.onBackground, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(background: color); - widget.handleColorRoleChange( - widget.brightness, - background: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'onBackground', - color: _colorScheme.onBackground, - onColor: _colorScheme.background, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onBackground: color); - widget.handleColorRoleChange( - widget.brightness, - onBackground: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'scrim', - color: _colorScheme.scrim, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(scrim: color); - widget.handleColorRoleChange( - widget.brightness, - scrim: color, - ); - }, - ), - EditableColorChip( - small: _small, - label: 'shadow', - color: _colorScheme.shadow, - updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(shadow: color); - widget.handleColorRoleChange( - widget.brightness, - shadow: color, - ); - }, - ), - ], + Tooltip( + message: message, + child: Row( + children: [ + Text(colorName, + style: Theme.of(context) + .textTheme + .labelSmall! + .copyWith(fontWeight: FontWeight.bold)), + const SizedBox(width: 5), + const Icon(Icons.info_outline_rounded, size: 16), + ], + ), ), - divider, + ColorGroup(small: true, children: children) ], ); } @@ -709,15 +871,28 @@ class ColorGroup extends StatelessWidget { @override Widget build(BuildContext context) { + final axisCount = children.length % 4 == 0 + ? 4 + : children.length % 3 == 0 + ? 3 + : children.length % 2 == 0 + ? 2 + : 1; + return RepaintBoundary( child: Card( elevation: 0.0, - clipBehavior: Clip.antiAlias, + clipBehavior: small ? Clip.none : Clip.antiAlias, child: small ? GridView.count( - crossAxisCount: 2, + crossAxisCount: axisCount, + crossAxisSpacing: 1, shrinkWrap: true, - childAspectRatio: 1 / 0.3, + // childAspectRatio: children.length / 1, + // childAspectRatio: (4 / axisCount) * axisCount + + // when 4 then 4, when 1 then 16 + childAspectRatio: 16 / axisCount, physics: const NeverScrollableScrollPhysics(), children: children, ) @@ -758,24 +933,30 @@ class ColorChip extends StatelessWidget { final Color labelColor = onColor ?? contrastColor(color); return Container( - color: color, - child: Padding( - padding: small ? const EdgeInsets.all(8) : const EdgeInsets.all(16), - child: Row( - children: [ - Expanded( - child: Text(label, - style: TextStyle( - color: labelColor, fontSize: small ? 10 : null))), - Visibility( - visible: !small, - child: Text( - color.value.toRadixString(16).substring(2), - style: GoogleFonts.spaceMono(color: labelColor), - )), - ], - ), + decoration: BoxDecoration( + color: color, + border: small + ? Border.all( + color: Theme.of(context).colorScheme.onSurface, + width: 2, + ) + : null, ), + child: small + ? null + : Padding( + padding: const EdgeInsets.all(16), + child: Row( + children: [ + Expanded( + child: Text(label, style: TextStyle(color: labelColor))), + Text( + color.value.toRadixString(16).substring(2), + style: GoogleFonts.spaceMono(color: labelColor), + ), + ], + ), + ), ); } }