unread_badge_count [nfc]: Use new Figma design variables in neutral v…

…ariant These are the same colors in light mode -- with the background color refactored to match Figma's representation as hex with a percent opacity -- so this is NFC, since we don't support dark mode yet. But since these are settled variables in the new Figma, we now have dark-theme variants for these!
chrisbobbe · Jul 31, 2024 · a668626 · a668626
1 parent 27ff723
commit a668626
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/lib/widgets/theme.dart b/lib/widgets/theme.dart
@@ -129,9 +129,11 @@ const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);
 class DesignVariables extends ThemeExtension<DesignVariables> {
   DesignVariables.light() :
     this._(
+      bgCounterUnread: const Color(0xff666699).withOpacity(0.15),
       bgTopBar: const Color(0xfff5f5f5),
       borderBar: const Color(0x33000000),
       icon: const Color(0xff666699),
+      labelCounterUnread: const Color(0xff222222),
       mainBackground: const Color(0xfff0f0f0),
       title: const Color(0xff1a1a1a),
       channelColorSwatches: ChannelColorSwatches.light,
@@ -141,9 +143,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   DesignVariables.dark() :
     this._(
+      bgCounterUnread: const Color(0xff666699).withOpacity(0.37),
       bgTopBar: const Color(0xff242424),
       borderBar: Colors.black.withOpacity(0.41),
       icon: const Color(0xff7070c2),
+      labelCounterUnread: const Color(0xffffffff).withOpacity(0.7),
       mainBackground: const Color(0xff1d1d1d),
       title: const Color(0xffffffff),
       channelColorSwatches: ChannelColorSwatches.dark,
@@ -153,9 +157,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     );
 
   DesignVariables._({
+    required this.bgCounterUnread,
     required this.bgTopBar,
     required this.borderBar,
     required this.icon,
+    required this.labelCounterUnread,
     required this.mainBackground,
     required this.title,
     required this.channelColorSwatches,
@@ -173,9 +179,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     return extension!;
   }
 
+  final Color bgCounterUnread;
   final Color bgTopBar;
   final Color borderBar;
   final Color icon;
+  final Color labelCounterUnread;
   final Color mainBackground;
   final Color title;
 
@@ -188,19 +196,23 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   @override
   DesignVariables copyWith({
+    Color? bgCounterUnread,
     Color? bgTopBar,
     Color? borderBar,
     Color? icon,
+    Color? labelCounterUnread,
     Color? mainBackground,
     Color? title,
     ChannelColorSwatches? channelColorSwatches,
     Color? star,
     Color? unreadCountBadgeTextForChannel,
   }) {
     return DesignVariables._(
+      bgCounterUnread: bgCounterUnread ?? this.bgCounterUnread,
       bgTopBar: bgTopBar ?? this.bgTopBar,
       borderBar: borderBar ?? this.borderBar,
       icon: icon ?? this.icon,
+      labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
       mainBackground: mainBackground ?? this.mainBackground,
       title: title ?? this.title,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
@@ -215,9 +227,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       return this;
     }
     return DesignVariables._(
+      bgCounterUnread: Color.lerp(bgCounterUnread, other.bgCounterUnread, t)!,
       bgTopBar: Color.lerp(bgTopBar, other.bgTopBar, t)!,
       borderBar: Color.lerp(borderBar, other.borderBar, t)!,
       icon: Color.lerp(icon, other.icon, t)!,
+      labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,
       mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
       title: Color.lerp(title, other.title, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),

diff --git a/lib/widgets/unread_count_badge.dart b/lib/widgets/unread_count_badge.dart
@@ -34,8 +34,7 @@ class UnreadCountBadge extends StatelessWidget {
     final effectiveBackgroundColor = switch (backgroundColor) {
       ChannelColorSwatch(unreadCountBadgeBackground: var color) => color,
       Color() => backgroundColor,
-      // TODO(#95) need dark-theme color
-      null => const Color.fromRGBO(102, 102, 153, 0.15),
+      null => designVariables.bgCounterUnread,
     };
 
     return DecoratedBox(
@@ -50,13 +49,9 @@ class UnreadCountBadge extends StatelessWidget {
             fontSize: 16,
             height: (18 / 16),
             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(#95) need dark-theme color
             color: backgroundColor is ChannelColorSwatch
               ? designVariables.unreadCountBadgeTextForChannel
-              : const Color(0xFF222222),
+              : designVariables.labelCounterUnread,
           ).merge(weightVariableTextStyle(context,
               wght: bold ? 600 : null)),
           count.toString())));