subscription_list: Place ad hoc dark-theme color for MutedUnreadBadge

Thanks to Greg for the reminder that this needed attention:
  https://chat.zulip.org/#narrow/stream/48-mobile/topic/dark.20theme/near/1936853

Web, in `main`, uses hsl(0, 0%, 30%) with 50% opacity. We tried
using that, but it ended up with pretty low contrast, given the
different background it's on here in mobile. So, this ad hoc value,
until we have a design from Vlad.

Web's light and dark colors might both actually change soon, with
the in-flight PR zulip/zulip#31847 that's test-deployed on CZO. But
not by much, and not enough to fix the low-contrast issue for us in
dark theme. I think the intended change is just to bump the opacity
from 50% to 55%. So we might refresh the light variant after that PR
is merged, and in any case will refresh both once we have Vlad's
design.

Author: chrisbobbe

lib/widgets/theme.dart

@@ -126,6 +126,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIconBg: const Color(0x33808080),
       loginOrDivider: const Color(0xffdedede),
       loginOrDividerText: const Color(0xff575757),
+      mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.8).toColor(),
       sectionCollapseIcon: const Color(0x7f1e2e48),
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
       subscriptionListHeaderLine: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor(),
@@ -159,6 +160,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       loginOrDivider: const Color(0xff424242),
       loginOrDividerText: const Color(0xffa8a8a8),
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
+      mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.6).toColor(),
+      // TODO(design-dark) need proper dark-theme color (this is ad hoc)
       sectionCollapseIcon: const Color(0x7fb6c8e2),
       // TODO(design-dark) unchanged in dark theme?
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
@@ -190,6 +193,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.groupDmConversationIconBg,
     required this.loginOrDivider,
     required this.loginOrDividerText,
+    required this.mutedUnreadBadge,
     required this.sectionCollapseIcon,
     required this.star,
     required this.subscriptionListHeaderLine,
@@ -231,6 +235,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color groupDmConversationIconBg;
   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)
+  final Color mutedUnreadBadge;
   final Color sectionCollapseIcon;
   final Color star;
   final Color subscriptionListHeaderLine;
@@ -259,6 +264,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? groupDmConversationIconBg,
     Color? loginOrDivider,
     Color? loginOrDividerText,
+    Color? mutedUnreadBadge,
     Color? sectionCollapseIcon,
     Color? star,
     Color? subscriptionListHeaderLine,
@@ -286,6 +292,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIconBg: groupDmConversationIconBg ?? this.groupDmConversationIconBg,
       loginOrDivider: loginOrDivider ?? this.loginOrDivider,
       loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText,
+      mutedUnreadBadge: mutedUnreadBadge ?? this.mutedUnreadBadge,
       sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon,
       star: star ?? this.star,
       subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine,
@@ -320,6 +327,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       groupDmConversationIconBg: Color.lerp(groupDmConversationIconBg, other.groupDmConversationIconBg, t)!,
       loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!,
       loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!,
+      mutedUnreadBadge: Color.lerp(mutedUnreadBadge, other.mutedUnreadBadge, t)!,
       sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!,
       star: Color.lerp(star, other.star, t)!,
       subscriptionListHeaderLine: Color.lerp(subscriptionListHeaderLine, other.subscriptionListHeaderLine, t)!,

lib/widgets/unread_count_badge.dart

@@ -63,12 +63,13 @@ class MutedUnreadBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
     return Container(
       width: 8,
       height: 8,
       margin: const EdgeInsetsDirectional.only(end: 3),
       decoration: BoxDecoration(
-        color: const HSLColor.fromAHSL(0.5, 0, 0, 0.8).toColor(),
+        color: designVariables.mutedUnreadBadge,
         shape: BoxShape.circle));
   }
 }