theme: Replace colorMessageHeaderIconInteractive with title

The `colorMessageHeaderIconInteractive` giving color to follow/mute
icons beside topic names have been replaced to a lighter and darker
versions in dark and light themes respectively, using the `title`
variable of `DesignVariables`.

This specific UI doesn't appear in the Figma design, but we use `title`
because it's used there for the color of a dropdown icon that also
appears next to topics.

Figma: https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=4021-7569&t=b56sVJ6in9zEY1tU-0
discussion: #1213 (comment), #1213 (comment)

Author: Gaurav-Kushwaha-1225

lib/widgets/message_list.dart

@@ -14,6 +14,7 @@ import '../model/typing_status.dart';
 import 'action_sheet.dart';
 import 'actions.dart';
 import 'app_bar.dart';
+import 'color.dart';
 import 'compose_box.dart';
 import 'content.dart';
 import 'emoji_reaction.dart';
@@ -373,8 +374,7 @@ class MessageListAppBarTitle extends StatelessWidget {
           Padding(
             padding: const EdgeInsetsDirectional.only(start: 4),
             child: Icon(icon,
-              // TODO(design) copies the recipient header in web; is there a better color?
-              color: designVariables.colorMessageHeaderIconInteractive, size: 14)),
+              color: designVariables.title.withFadedAlpha(0.5), size: 14)),
       ]);
   }
 
@@ -1125,8 +1125,7 @@ class StreamMessageRecipientHeader extends StatelessWidget {
               overflow: TextOverflow.ellipsis,
               style: recipientHeaderTextStyle(context))),
           const SizedBox(width: 4),
-          // TODO(design) copies the recipient header in web; is there a better color?
-          Icon(size: 14, color: designVariables.colorMessageHeaderIconInteractive,
+          Icon(size: 14, color: designVariables.title.withFadedAlpha(0.5),
             // A null [Icon.icon] makes a blank space.
             iconDataForTopicVisibilityPolicy(
               store.topicVisibilityPolicy(message.streamId, topic))),

lib/widgets/theme.dart

@@ -150,7 +150,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     bgSearchInput: const Color(0xffe3e3e3),
     textMessage: const Color(0xff262626),
     channelColorSwatches: ChannelColorSwatches.light,
-    colorMessageHeaderIconInteractive: Colors.black.withValues(alpha: 0.2),
     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(),
@@ -202,7 +201,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     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)
-    colorMessageHeaderIconInteractive: Colors.white.withValues(alpha: 0.2),
     dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
     // TODO(design-dark) need proper dark-theme color (this is ad hoc)
     groupDmConversationIcon: Colors.white.withValues(alpha: 0.5),
@@ -256,7 +254,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.bgSearchInput,
     required this.textMessage,
     required this.channelColorSwatches,
-    required this.colorMessageHeaderIconInteractive,
     required this.contextMenuCancelBg,
     required this.contextMenuCancelPressedBg,
     required this.dmHeaderBg,
@@ -318,7 +315,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final ChannelColorSwatches channelColorSwatches;
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
-  final Color colorMessageHeaderIconInteractive;
   final Color contextMenuCancelBg; // In Figma, but unnamed.
   final Color contextMenuCancelPressedBg; // In Figma, but unnamed.
   final Color dmHeaderBg;
@@ -367,7 +363,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? bgSearchInput,
     Color? textMessage,
     ChannelColorSwatches? channelColorSwatches,
-    Color? colorMessageHeaderIconInteractive,
     Color? contextMenuCancelBg,
     Color? contextMenuCancelPressedBg,
     Color? dmHeaderBg,
@@ -415,7 +410,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgSearchInput: bgSearchInput ?? this.bgSearchInput,
       textMessage: textMessage ?? this.textMessage,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
-      colorMessageHeaderIconInteractive: colorMessageHeaderIconInteractive ?? this.colorMessageHeaderIconInteractive,
       contextMenuCancelBg: contextMenuCancelBg ?? this.contextMenuCancelBg,
       contextMenuCancelPressedBg: contextMenuCancelPressedBg ?? this.contextMenuCancelPressedBg,
       dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
@@ -470,7 +464,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgSearchInput: Color.lerp(bgSearchInput, other.bgSearchInput, t)!,
       textMessage: Color.lerp(textMessage, other.textMessage, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
-      colorMessageHeaderIconInteractive: Color.lerp(colorMessageHeaderIconInteractive, other.colorMessageHeaderIconInteractive, t)!,
       contextMenuCancelBg: Color.lerp(contextMenuCancelBg, other.contextMenuCancelBg, t)!,
       contextMenuCancelPressedBg: Color.lerp(contextMenuCancelPressedBg, other.contextMenuCancelPressedBg, t)!,
       dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,