model: Add StreamColorSwatch.recipientBar{Icon,Background}

zulip · Nov 16, 2023 · 0c44b5f · 0c44b5f
1 parent c0311de
commit 0c44b5f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/lib/api/model/model.dart b/lib/api/model/model.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/foundation.dart';
 import 'package:flutter/painting.dart';
+import 'package:flutter_color_models/flutter_color_models.dart';
 import 'package:json_annotation/json_annotation.dart';
 
 import '../../widgets/color.dart';
@@ -384,9 +385,15 @@ class StreamColorSwatch extends ColorSwatch<_StreamColorVariant> {
 
   Color get unreadCountBadgeBackground => this[_StreamColorVariant.unreadCountBadgeBackground]!;
 
+  Color get recipientBarIcon => this[_StreamColorVariant.recipientBarIcon]!;
+
+  Color get recipientBarBackground => this[_StreamColorVariant.recipientBarBackground]!;
+
   static Map<_StreamColorVariant, Color> _compute(int base) {
     final baseAsColor = Color(base);
 
+    final clamped20to75 = clampLchLightness(baseAsColor, 20, 75);
+
     return {
       _StreamColorVariant.base: baseAsColor,
 
@@ -398,13 +405,34 @@ class StreamColorSwatch extends ColorSwatch<_StreamColorVariant> {
       // TODO profiling for expensive computation
       _StreamColorVariant.unreadCountBadgeBackground:
         clampLchLightness(baseAsColor, 30, 70).withOpacity(0.3),
+
+      // Follows `.recepeient__icon` in Vlad's replit, except (to match web)
+      // with a `.darken(0.12)` omitted:
+      //   <https://replit.com/@VladKorobov/zulip-topic-feed-colors#script.js>
+      //   <https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/design.3A.20.23F117.20.22Inbox.22.20screen/near/1624484>
+      //
+      // TODO await decision on that `.darken(0.12)` or another way to raise contrast:
+      //   https://chat.zulip.org/#narrow/stream/101-design/topic/UI.20redesign.3A.20recipient.20bar.20colors/near/1675786
+      _StreamColorVariant.recipientBarIcon: clamped20to75,
+
+      // Follows `.recepient` in Vlad's replit:
+      //   <https://replit.com/@VladKorobov/zulip-topic-feed-colors#script.js>
+      //
+      // TODO I think [LabColor.interpolate] doesn't actually do LAB mixing;
+      //   it just calls up to the superclass method [ColorModel.interpolate]:
+      //     <https://pub.dev/documentation/flutter_color_models/latest/flutter_color_models/ColorModel/interpolate.html>
+      //   which does ordinary RGB mixing. Investigate and send a PR?
+      _StreamColorVariant.recipientBarBackground: LabColor.fromColor(const Color(0xfff9f9f9))
+        .interpolate(LabColor.fromColor(clamped20to75), 0.22),
     };
   }
 }
 
 enum _StreamColorVariant {
   base,
   unreadCountBadgeBackground,
+  recipientBarIcon,
+  recipientBarBackground,
 }
 
 /// As in the get-messages response.

diff --git a/test/api/model/model_checks.dart b/test/api/model/model_checks.dart
@@ -6,6 +6,8 @@ import 'package:zulip/api/model/model.dart';
 extension StreamColorSwatchChecks on Subject<StreamColorSwatch> {
   Subject<Color> get base => has((s) => s.base, 'base');
   Subject<Color> get unreadCountBadgeBackground => has((s) => s.unreadCountBadgeBackground, 'unreadCountBadgeBackground');
+  Subject<Color> get recipientBarIcon => has((s) => s.recipientBarIcon, 'recipientBarIcon');
+  Subject<Color> get recipientBarBackground => has((s) => s.recipientBarBackground, 'recipientBarBackground');
 }
 
 extension MessageChecks on Subject<Message> {

diff --git a/test/api/model/model_test.dart b/test/api/model/model_test.dart
@@ -152,6 +152,8 @@ void main() {
         runCheck(0xFFFFFFE0, const Color(0x4dadad90)); // 0x4dacad90
         runCheck(0xFFFF69B4, const Color(0x4dff69b4));
       });
+
+      // TODO recipientBarIcon, recipientBarBackground
     });
   });