unread_count_badge: Remove bold variant; pin down to current Figma

The "Channels" page and "Inbox" page both have updated designs in
Figma, which we should follow.

This commit matches the badges on the "Channels" page to that new
design. There's more work to match the badges on the "Inbox" page,
but now that work is defined crisply in a TODO:

  // TODO support the "kind=quantity" variant, update dartdoc

Related: zulip#1406
Related: zulip#1527

Author: chrisbobbe

lib/widgets/inbox.dart

@@ -311,7 +311,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

@@ -338,8 +338,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');
 }