unread_count_badge: Clear out a TODO by following Vlad's design

I don't have a strong opinion on whether we really want to do this,
but we still don't have direction from the web app, or the new Figma
-- neither one has stream-colored unread count badges -- and it is
nice to clear out a TODO.

lib/widgets/theme.dart

@@ -136,6 +136,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: const Color(0xff1a1a1a),
       channelColorSwatches: ChannelColorSwatches.light,
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
+      unreadCountBadgeTextForChannel: Colors.black.withOpacity(0.9),
     );
 
   DesignVariables.dark() :
@@ -148,6 +149,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       channelColorSwatches: ChannelColorSwatches.dark,
       // TODO(#95) unchanged in dark theme?
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
+      unreadCountBadgeTextForChannel: Colors.white.withOpacity(0.9),
     );
 
   DesignVariables._({
@@ -158,6 +160,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.title,
     required this.channelColorSwatches,
     required this.star,
+    required this.unreadCountBadgeTextForChannel,
   });
 
   /// The [DesignVariables] from the context's active theme.
@@ -181,6 +184,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
   final Color star;
+  final Color unreadCountBadgeTextForChannel;
 
   @override
   DesignVariables copyWith({
@@ -191,6 +195,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? title,
     ChannelColorSwatches? channelColorSwatches,
     Color? star,
+    Color? unreadCountBadgeTextForChannel,
   }) {
     return DesignVariables._(
       bgTopBar: bgTopBar ?? this.bgTopBar,
@@ -200,6 +205,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: title ?? this.title,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
       star: star ?? this.star,
+      unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel,
     );
   }
 
@@ -216,6 +222,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       title: Color.lerp(title, other.title, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
       star: Color.lerp(star, other.star, t)!,
+      unreadCountBadgeTextForChannel: Color.lerp(unreadCountBadgeTextForChannel, other.unreadCountBadgeTextForChannel, t)!,
     );
   }
 }

lib/widgets/unread_count_badge.dart

@@ -1,8 +1,8 @@
-
 import 'package:flutter/widgets.dart';
 
 import 'channel_colors.dart';
 import 'text.dart';
+import 'theme.dart';
 
 /// A widget to display a given number of unreads in a conversation.
 ///
@@ -29,6 +29,8 @@ class UnreadCountBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
     final effectiveBackgroundColor = switch (backgroundColor) {
       ChannelColorSwatch(unreadCountBadgeBackground: var color) => color,
       Color() => backgroundColor,
@@ -44,22 +46,17 @@ class UnreadCountBadge extends StatelessWidget {
       child: Padding(
         padding: const EdgeInsets.fromLTRB(4, 0, 4, 1),
         child: Text(
-          style: const TextStyle(
+          style: TextStyle(
             fontSize: 16,
             height: (18 / 16),
-            fontFeatures: [FontFeature.enable('smcp')], // small caps
+            fontFeatures: const [FontFeature.enable('smcp')], // small caps
 
             // From the Figma:
             //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=171-12359&mode=design&t=JKrw76SGUF51nSJG-0
-            // TODO or, when background is stream-colored, follow Vlad's replit?
-            //     https://replit.com/@VladKorobov/zulip-sidebar#script.js
-            //   which would mean:
-            //   - in light mode use `Color.fromRGBO(0, 0, 0, 0.9)`
-            //   - in dark mode use `Color.fromRGBO(255, 255, 255, 0.9)`
-            //   The web app doesn't (yet?) use stream-colored unread markers
-            //   so we can't take direction from there.
             // TODO(#95) need dark-theme color
-            color: Color(0xFF222222),
+            color: backgroundColor is ChannelColorSwatch
+              ? designVariables.unreadCountBadgeTextForChannel
+              : const Color(0xFF222222),
           ).merge(weightVariableTextStyle(context,
               wght: bold ? 600 : null)),
           count.toString())));