unread_count_badge: Remove bold variant; pin down to current Figma

Author: chrisbobbe

lib/widgets/inbox.dart

@@ -310,7 +310,6 @@ abstract class _HeaderItem extends StatelessWidget {
           Padding(padding: const EdgeInsetsDirectional.only(end: 16),
             child: UnreadCountBadge(
               channelIdForBackground: channelId,
-              bold: true,
               count: count)),
         ])));
   }

lib/widgets/subscription_list.dart

@@ -337,8 +337,7 @@ class SubscriptionItem extends StatelessWidget {
               opacity: opacity,
               child: UnreadCountBadge(
                 count: unreadCount,
-                channelIdForBackground: subscription.streamId,
-                bold: true)),
+                channelIdForBackground: subscription.streamId)),
           ] else if (showMutedUnreadBadge) ...[
             const SizedBox(width: 12),
             // TODO(#747) show @-mention indicator when it applies

lib/widgets/theme.dart

@@ -184,7 +184,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     foreground: const Color(0xff000000),
     icon: const Color(0xff6159e1),
     iconSelected: const Color(0xff222222),
-    labelCounterUnread: const Color(0xff222222),
+    labelCounterUnread: const Color(0xff1a1a1a),
     labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
     labelMenuButton: const Color(0xff222222),
     labelSearchPrompt: const Color(0xff000000).withValues(alpha: 0.5),
@@ -285,7 +285,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     foreground: const Color(0xffffffff),
     icon: const Color(0xff7977fe),
     iconSelected: Colors.white.withValues(alpha: 0.8),
-    labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.7),
+    labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.95),
     labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
     labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
     labelSearchPrompt: const Color(0xffffffff).withValues(alpha: 0.5),

lib/widgets/unread_count_badge.dart

@@ -6,24 +6,32 @@ import 'theme.dart';
 
 /// A widget to display a given number of unreads in a conversation.
 ///
-/// Implements the design for these in Figma:
-///   <https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=341%3A12387&mode=dev>
+/// See Figma's "counter-menu" component, which this is based on:
+///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2037-186671&m=dev
+/// It looks like that component was created for the main menu,
+/// then adapted for various other contexts, like the Inbox page.
+///
+/// Currently this widget supports only those other contexts (not the main menu)
+/// and only the component's "kind=unread" variant (not "kind=quantity").
+/// For example, the "Channels" page:
+///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6205-26001&m=dev
+// TODO support the main-menu context, update dartdoc
+// TODO support the "kind=quantity" variant, update dartdoc
 class UnreadCountBadge extends StatelessWidget {
   const UnreadCountBadge({
     super.key,
     required this.count,
     required this.channelIdForBackground,
-    this.bold = false,
   });
 
   final int count;
-  final bool bold;
 
   /// An optional [Subscription.streamId], for a channel-colorized background.
   ///
   /// Useful when this badge represents messages in one specific channel.
   ///
   /// If null, the default neutral background will be used.
+  // TODO remove; the Figma doesn't use this anymore.
   final int? channelIdForBackground;
 
   @override
@@ -46,19 +54,17 @@ class UnreadCountBadge extends StatelessWidget {
 
     return DecoratedBox(
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(3),
+        borderRadius: BorderRadius.circular(5),
         color: backgroundColor,
       ),
       child: Padding(
-        padding: const EdgeInsets.fromLTRB(4, 0, 4, 1),
+        padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 3),
         child: Text(
           style: TextStyle(
             fontSize: 16,
-            height: (18 / 16),
-            fontFeatures: const [FontFeature.enable('smcp')], // small caps
+            height: (16 / 16),
             color: textColor,
-          ).merge(weightVariableTextStyle(context,
-              wght: bold ? 600 : null)),
+          ).merge(weightVariableTextStyle(context, wght: 500)),
           count.toString())));
   }
 }

test/widgets/checks.dart

@@ -94,7 +94,6 @@ extension PerAccountStoreWidgetChecks on Subject<PerAccountStoreWidget> {
 
 extension UnreadCountBadgeChecks on Subject<UnreadCountBadge> {
   Subject<int> get count => has((b) => b.count, 'count');
-  Subject<bool> get bold => has((b) => b.bold, 'bold');
   Subject<int?> get channelIdForBackground => has((b) => b.channelIdForBackground, 'channelIdForBackground');
 }