theme: Compute colorSwatchFor when subscription is null

Looking into the design requirement a bit more, we initially fall back
to this color because we didn't have the logic to generate channel
colors:
  https://chat.zulip.org/#narrow/channel/48-mobile/topic/All.20channels.20screen.20-.20.23F832/near/1904009

This replaces the ad-hoc colors with generated colors based on a
fallback base color.

The base color we fall back to is still a placeholder.  Ideally, we
should pick a color even for the subscribed streams, as shown in the
Figma design linked in zulip#188.  That issue is out-of-scope for this,
though.

For now, it's sufficient to just remove the ad-hoc color on
MessageListTheme.  This way we don't have to reuse it in places
where colors for unsubscribed streams are needed, namely the topic list.

Author: PIG208

lib/widgets/message_list.dart

@@ -45,9 +45,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     unreadMarker: const HSLColor.fromAHSL(1, 227, 0.78, 0.59).toColor(),
 
     unreadMarkerGap: Colors.white.withValues(alpha: 0.6),
-
-    // TODO(design) this seems ad-hoc; is there a better color?
-    unsubscribedStreamRecipientHeaderBg: const Color(0xfff5f5f5),
   );
 
   static final dark = MessageListTheme._(
@@ -64,9 +61,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     unreadMarker: const HSLColor.fromAHSL(0.75, 227, 0.78, 0.59).toColor(),
 
     unreadMarkerGap: Colors.transparent,
-
-    // TODO(design) this is ad-hoc and untested; is there a better color?
-    unsubscribedStreamRecipientHeaderBg: const Color(0xff0a0a0a),
   );
 
   MessageListTheme._({
@@ -76,7 +70,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     required this.streamRecipientHeaderChevronRight,
     required this.unreadMarker,
     required this.unreadMarkerGap,
-    required this.unsubscribedStreamRecipientHeaderBg,
   });
 
   /// The [MessageListTheme] from the context's active theme.
@@ -95,7 +88,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
   final Color streamRecipientHeaderChevronRight;
   final Color unreadMarker;
   final Color unreadMarkerGap;
-  final Color unsubscribedStreamRecipientHeaderBg;
 
   @override
   MessageListTheme copyWith({
@@ -105,7 +97,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
     Color? streamRecipientHeaderChevronRight,
     Color? unreadMarker,
     Color? unreadMarkerGap,
-    Color? unsubscribedStreamRecipientHeaderBg,
   }) {
     return MessageListTheme._(
       dmRecipientHeaderBg: dmRecipientHeaderBg ?? this.dmRecipientHeaderBg,
@@ -114,7 +105,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       streamRecipientHeaderChevronRight: streamRecipientHeaderChevronRight ?? this.streamRecipientHeaderChevronRight,
       unreadMarker: unreadMarker ?? this.unreadMarker,
       unreadMarkerGap: unreadMarkerGap ?? this.unreadMarkerGap,
-      unsubscribedStreamRecipientHeaderBg: unsubscribedStreamRecipientHeaderBg ?? this.unsubscribedStreamRecipientHeaderBg,
     );
   }
 
@@ -130,7 +120,6 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
       streamRecipientHeaderChevronRight: Color.lerp(streamRecipientHeaderChevronRight, other.streamRecipientHeaderChevronRight, t)!,
       unreadMarker: Color.lerp(unreadMarker, other.unreadMarker, t)!,
       unreadMarkerGap: Color.lerp(unreadMarkerGap, other.unreadMarkerGap, t)!,
-      unsubscribedStreamRecipientHeaderBg: Color.lerp(unsubscribedStreamRecipientHeaderBg, other.unsubscribedStreamRecipientHeaderBg, t)!,
     );
   }
 }
@@ -221,9 +210,8 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
       case ChannelNarrow(:final streamId):
       case TopicNarrow(:final streamId):
         final subscription = store.subscriptions[streamId];
-        appBarBackgroundColor = subscription != null
-          ? colorSwatchFor(context, subscription).barBackground
-          : messageListTheme.unsubscribedStreamRecipientHeaderBg;
+        appBarBackgroundColor =
+          colorSwatchFor(context, subscription).barBackground;
         // All recipient headers will match this color; remove distracting line
         // (but are recipient headers even needed for topic narrows?)
         removeAppBarBottomBorder = true;
@@ -1046,24 +1034,15 @@ class StreamMessageRecipientHeader extends StatelessWidget {
     //   https://github.com/zulip/zulip-mobile/issues/5511
     final store = PerAccountStoreWidget.of(context);
     final designVariables = DesignVariables.of(context);
+    final messageListTheme = MessageListTheme.of(context);
     final zulipLocalizations = ZulipLocalizations.of(context);
 
     final streamId = message.conversation.streamId;
     final topic = message.conversation.topic;
 
-    final messageListTheme = MessageListTheme.of(context);
-
-    final subscription = store.subscriptions[streamId];
-    final Color backgroundColor;
-    final Color iconColor;
-    if (subscription != null) {
-      final swatch = colorSwatchFor(context, subscription);
-      backgroundColor = swatch.barBackground;
-      iconColor = swatch.iconOnBarBackground;
-    } else {
-      backgroundColor = messageListTheme.unsubscribedStreamRecipientHeaderBg;
-      iconColor = designVariables.title;
-    }
+    final swatch = colorSwatchFor(context, store.subscriptions[streamId]);
+    final backgroundColor = swatch.barBackground;
+    final iconColor = swatch.iconOnBarBackground;
 
     final Widget streamWidget;
     if (!_containsDifferentChannels(narrow)) {

lib/widgets/theme.dart

@@ -561,10 +561,19 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   }
 }
 
+// This is taken from:
+//   https://github.com/zulip/zulip/blob/b248e2d93/web/src/stream_data.ts#L40
+const kDefaultChannelColorSwatchBaseColor = 0xffc2c2c2;
+
 /// The theme-appropriate [ChannelColorSwatch] based on [subscription.color].
 ///
+/// If [subscription] is null, [ChannelColorSwatch] will be based on
+/// [kDefaultChannelColorSwatchBaseColor].
+///
 /// For how this value is cached, see [ChannelColorSwatches.forBaseColor].
-ChannelColorSwatch colorSwatchFor(BuildContext context, Subscription subscription) {
+// TODO(#188) pick different colors for unsubscribed channels
+ChannelColorSwatch colorSwatchFor(BuildContext context, Subscription? subscription) {
   return DesignVariables.of(context)
-    .channelColorSwatches.forBaseColor(subscription.color);
+    .channelColorSwatches.forBaseColor(
+      subscription?.color ?? kDefaultChannelColorSwatchBaseColor);
 }

test/widgets/theme_test.dart

@@ -7,6 +7,7 @@ import 'package:flutter_checks/flutter_checks.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:zulip/model/settings.dart';
 import 'package:zulip/widgets/channel_colors.dart';
+import 'package:zulip/widgets/color.dart';
 import 'package:zulip/widgets/text.dart';
 import 'package:zulip/widgets/theme.dart';
 
@@ -178,5 +179,13 @@ void main() {
       check(colorSwatchFor(element, subscription))
         .isSameColorSwatchAs(ChannelColorSwatch.dark(baseColor));
     });
+
+    testWidgets('fallback to default base color when no subscription', (tester) async {
+      await tester.pumpWidget(const TestZulipApp());
+      await tester.pump();
+      final element = tester.element(find.byType(Placeholder));
+      check(colorSwatchFor(element, null))
+        .isSameColorSwatchAs(ChannelColorSwatch.light(Colors.white.argbInt));
+    });
   });
 }