action_sheet [nfc]: Centralize .withValues variants of contextMenuCancelBg

Also switched to .fromMap for better readability

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/action_sheet.dart

@@ -169,9 +169,10 @@ class MessageActionSheetCancelButton extends StatelessWidget {
         foregroundColor: designVariables.contextMenuCancelText,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
         splashFactory: NoSplash.splashFactory,
-      ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
-          designVariables.contextMenuCancelBg.withFadedAlpha(
-            states.contains(WidgetState.pressed) ? 0.20 : 0.15))),
+      ).copyWith(backgroundColor: WidgetStateColor.fromMap({
+        WidgetState.pressed: designVariables.contextMenuCancelPressedBg,
+        ~WidgetState.pressed: designVariables.contextMenuCancelBg,
+      })),
       onPressed: () {
         Navigator.pop(context);
       },

lib/widgets/theme.dart

@@ -136,7 +136,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: const Color(0xff1a1a1a),
       channelColorSwatches: ChannelColorSwatches.light,
       atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
-      contextMenuCancelBg: const Color(0xff797986),
+      contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15),
+      contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
       groupDmConversationIcon: Colors.black.withValues(alpha: 0.5),
       groupDmConversationIconBg: const Color(0x33808080),
@@ -175,7 +176,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       textInput: const Color(0xffffffff).withValues(alpha: 0.9),
       title: const Color(0xffffffff),
       channelColorSwatches: ChannelColorSwatches.dark,
-      contextMenuCancelBg: const Color(0xff797986), // the same as the light mode in Figma
+      contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15), // the same as the light mode in Figma
+      contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20), // the same as the light mode in Figma
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
       atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
       dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
@@ -224,6 +226,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.channelColorSwatches,
     required this.atMentionMarker,
     required this.contextMenuCancelBg,
+    required this.contextMenuCancelPressedBg,
     required this.dmHeaderBg,
     required this.groupDmConversationIcon,
     required this.groupDmConversationIconBg,
@@ -276,6 +279,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color atMentionMarker;
   final Color contextMenuCancelBg; // In Figma, but unnamed.
+  final Color contextMenuCancelPressedBg; // In Figma, but unnamed.
   final Color dmHeaderBg;
   final Color groupDmConversationIcon;
   final Color groupDmConversationIconBg;
@@ -315,6 +319,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     ChannelColorSwatches? channelColorSwatches,
     Color? atMentionMarker,
     Color? contextMenuCancelBg,
+    Color? contextMenuCancelPressedBg,
     Color? dmHeaderBg,
     Color? groupDmConversationIcon,
     Color? groupDmConversationIconBg,
@@ -353,6 +358,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
       atMentionMarker: atMentionMarker ?? this.atMentionMarker,
       contextMenuCancelBg: contextMenuCancelBg ?? this.contextMenuCancelBg,
+      contextMenuCancelPressedBg: contextMenuCancelPressedBg ?? this.contextMenuCancelPressedBg,
       dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
       groupDmConversationIcon: groupDmConversationIcon ?? this.groupDmConversationIcon,
       groupDmConversationIconBg: groupDmConversationIconBg ?? this.groupDmConversationIconBg,
@@ -398,6 +404,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
       atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
       contextMenuCancelBg: Color.lerp(contextMenuCancelBg, other.contextMenuCancelBg, t)!,
+      contextMenuCancelPressedBg: Color.lerp(contextMenuCancelPressedBg, other.contextMenuCancelPressedBg, t)!,
       dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,
       groupDmConversationIcon: Color.lerp(groupDmConversationIcon, other.groupDmConversationIcon, t)!,
       groupDmConversationIconBg: Color.lerp(groupDmConversationIconBg, other.groupDmConversationIconBg, t)!,