theme [nfc]: Rename some variables that aren't named variables in Figma

We're free to rename these because they don't correspond to named
variables in the Figma.

These more general names will be used for an avatar placeholder for
muted users, coming up.

Co-authored-by: Sayed Mahmood Sayedi <[email protected]>

Author: chrisbobbe

lib/widgets/recent_dm_conversations.dart

@@ -99,9 +99,9 @@ class RecentDmConversationsItem extends StatelessWidget {
         //   // 'Chris、Greg、Alya'
         title = narrow.otherRecipientIds.map(store.userDisplayName)
           .join(', ');
-        avatar = ColoredBox(color: designVariables.groupDmConversationIconBg,
+        avatar = ColoredBox(color: designVariables.avatarPlaceholderBg,
           child: Center(
-            child: Icon(color: designVariables.groupDmConversationIcon,
+            child: Icon(color: designVariables.avatarPlaceholderIcon,
               ZulipIcons.group_dm)));
     }
 

lib/widgets/theme.dart

@@ -170,11 +170,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     bgSearchInput: const Color(0xffe3e3e3),
     textMessage: const Color(0xff262626),
     channelColorSwatches: ChannelColorSwatches.light,
+    avatarPlaceholderBg: const Color(0x33808080),
+    avatarPlaceholderIcon: Colors.black.withValues(alpha: 0.5),
     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),
     inboxItemIconMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
     loginOrDivider: const Color(0xffdedede),
     loginOrDividerText: const Color(0xff575757),
@@ -231,14 +231,14 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     bgSearchInput: const Color(0xff313131),
     textMessage: const Color(0xffffffff).withValues(alpha: 0.8),
     channelColorSwatches: ChannelColorSwatches.dark,
+    // TODO(design-dark) need proper dark-theme color (this is ad hoc)
+    avatarPlaceholderBg: const Color(0x33cccccc),
+    // TODO(design-dark) need proper dark-theme color (this is ad hoc)
+    avatarPlaceholderIcon: Colors.white.withValues(alpha: 0.5),
     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)
     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),
-    // TODO(design-dark) need proper dark-theme color (this is ad hoc)
-    groupDmConversationIconBg: const Color(0x33cccccc),
     inboxItemIconMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
     loginOrDivider: const Color(0xff424242),
     loginOrDividerText: const Color(0xffa8a8a8),
@@ -300,11 +300,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.bgSearchInput,
     required this.textMessage,
     required this.channelColorSwatches,
+    required this.avatarPlaceholderBg,
+    required this.avatarPlaceholderIcon,
     required this.contextMenuCancelBg,
     required this.contextMenuCancelPressedBg,
     required this.dmHeaderBg,
-    required this.groupDmConversationIcon,
-    required this.groupDmConversationIconBg,
     required this.inboxItemIconMarker,
     required this.loginOrDivider,
     required this.loginOrDividerText,
@@ -374,11 +374,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final ChannelColorSwatches channelColorSwatches;
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
+  final Color avatarPlaceholderBg;
+  final Color avatarPlaceholderIcon;
   final Color contextMenuCancelBg; // In Figma, but unnamed.
   final Color contextMenuCancelPressedBg; // In Figma, but unnamed.
   final Color dmHeaderBg;
-  final Color groupDmConversationIcon;
-  final Color groupDmConversationIconBg;
   final Color inboxItemIconMarker;
   final Color loginOrDivider; // TODO(design-dark) need proper dark-theme color (this is ad hoc)
   final Color loginOrDividerText; // TODO(design-dark) need proper dark-theme color (this is ad hoc)
@@ -435,11 +435,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? bgSearchInput,
     Color? textMessage,
     ChannelColorSwatches? channelColorSwatches,
+    Color? avatarPlaceholderBg,
+    Color? avatarPlaceholderIcon,
     Color? contextMenuCancelBg,
     Color? contextMenuCancelPressedBg,
     Color? dmHeaderBg,
-    Color? groupDmConversationIcon,
-    Color? groupDmConversationIconBg,
     Color? inboxItemIconMarker,
     Color? loginOrDivider,
     Color? loginOrDividerText,
@@ -495,11 +495,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       bgSearchInput: bgSearchInput ?? this.bgSearchInput,
       textMessage: textMessage ?? this.textMessage,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
+      avatarPlaceholderBg: avatarPlaceholderBg ?? this.avatarPlaceholderBg,
+      avatarPlaceholderIcon: avatarPlaceholderIcon ?? this.avatarPlaceholderIcon,
       contextMenuCancelBg: contextMenuCancelBg ?? this.contextMenuCancelBg,
       contextMenuCancelPressedBg: contextMenuCancelPressedBg ?? this.contextMenuCancelPressedBg,
       dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
-      groupDmConversationIcon: groupDmConversationIcon ?? this.groupDmConversationIcon,
-      groupDmConversationIconBg: groupDmConversationIconBg ?? this.groupDmConversationIconBg,
       inboxItemIconMarker: inboxItemIconMarker ?? this.inboxItemIconMarker,
       loginOrDivider: loginOrDivider ?? this.loginOrDivider,
       loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText,
@@ -562,11 +562,11 @@ 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),
+      avatarPlaceholderBg: Color.lerp(avatarPlaceholderBg, other.avatarPlaceholderBg, t)!,
+      avatarPlaceholderIcon: Color.lerp(avatarPlaceholderIcon, other.avatarPlaceholderIcon, 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)!,
       inboxItemIconMarker: Color.lerp(inboxItemIconMarker, other.inboxItemIconMarker, t)!,
       loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!,
       loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!,