color [nfc]: Add ColorExtension.withFadedAlpha

And use it everywhere we were using `.withValues(alpha:`
to fade a color variable, except for one place in
`lib/widgets/emoji_reaction.dart` where the variable is
semi-transparent in dark mode to begin with.
We'll do that as a non-NFC change in a later commit.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/action_sheet.dart

@@ -13,6 +13,7 @@ import '../model/internal_link.dart';
 import '../model/narrow.dart';
 import 'actions.dart';
 import 'clipboard.dart';
+import 'color.dart';
 import 'dialog.dart';
 import 'icons.dart';
 import 'inset_shadow.dart';
@@ -145,8 +146,8 @@ abstract class MessageActionSheetMenuItemButton extends StatelessWidget {
         foregroundColor: designVariables.contextMenuItemText,
         splashFactory: NoSplash.splashFactory,
       ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
-          designVariables.contextMenuItemBg.withValues(
-            alpha: states.contains(WidgetState.pressed) ? 0.20 : 0.12))),
+          designVariables.contextMenuItemBg.withFadedAlpha(
+            states.contains(WidgetState.pressed) ? 0.20 : 0.12))),
       onPressed: () => _handlePressed(context),
       child: Text(label(zulipLocalizations),
         style: const TextStyle(fontSize: 20, height: 24 / 20)
@@ -168,8 +169,8 @@ class MessageActionSheetCancelButton extends StatelessWidget {
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
         splashFactory: NoSplash.splashFactory,
       ).copyWith(backgroundColor: WidgetStateColor.resolveWith((states) =>
-          designVariables.contextMenuCancelBg.withValues(
-            alpha: states.contains(WidgetState.pressed) ? 0.20 : 0.15))),
+          designVariables.contextMenuCancelBg.withFadedAlpha(
+            states.contains(WidgetState.pressed) ? 0.20 : 0.15))),
       onPressed: () {
         Navigator.pop(context);
       },

lib/widgets/color.dart

@@ -38,4 +38,21 @@ extension ColorExtension on Color {
            ((g * 255.0).round() & 0xff) << 8 |
            ((b * 255.0).round() & 0xff) << 0;
   }
+
+  /// Makes a copy of this color with [a] multiplied by `factor`.
+  ///
+  /// `factor` must be between 0 and 1, inclusive.
+  ///
+  /// To fade a color variable from [DesignVariables], [ContentTheme], etc.,
+  /// use this instead of calling [withValues] with `factor` passed as `alpha`,
+  /// which simply replaces the color's [a] instead of multiplying by it.
+  /// Using [withValues] gives the same result for an opaque color,
+  /// but a wrong result for a semi-transparent color,
+  /// and we want our color variables to be free to change
+  /// without breaking things.
+  Color withFadedAlpha(double factor) {
+    assert(factor >= 0);
+    assert(factor <= 1);
+    return withValues(alpha: a * factor);
+  }
 }

test/widgets/color_test.dart

@@ -1,6 +1,6 @@
-import 'dart:ui';
-
 import 'package:checks/checks.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_checks/flutter_checks.dart';
 import 'package:test/scaffolding.dart';
 import 'package:zulip/widgets/color.dart';
 
@@ -14,5 +14,27 @@ void main() {
         check(Color(testCase).argbInt).equals(testCase);
       }
     });
+
+    const color = Color.fromRGBO(100, 200, 100, 0.5);
+
+    test('withFadedAlpha smoke', () {
+      check(color.withFadedAlpha(0.5))
+        .isSameColorAs(color.withValues(alpha: 0.25));
+    });
+
+    test('withFadedAlpha opaque color', () {
+      const color = Colors.black;
+
+      check(color.withFadedAlpha(0.5))
+        .isSameColorAs(color.withValues(alpha: 0.5));
+    });
+
+    test('withFadedAlpha factor > 1 fails', () {
+      check(() => color.withFadedAlpha(1.1)).throws<AssertionError>();
+    });
+
+    test('withFadedAlpha factor < 0 fails', () {
+      check(() => color.withFadedAlpha(-0.1)).throws<AssertionError>();
+    });
   });
 }