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 not be less than 0 or greater than 1.
+  ///
+  /// 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);
+  }
 }

lib/widgets/compose_box.dart

@@ -14,6 +14,7 @@ import '../model/compose.dart';
 import '../model/narrow.dart';
 import '../model/store.dart';
 import 'autocomplete.dart';
+import 'color.dart';
 import 'dialog.dart';
 import 'icons.dart';
 import 'store.dart';
@@ -663,7 +664,7 @@ abstract class _AttachUploadsButton extends StatelessWidget {
     return SizedBox(
       width: _composeButtonWidth,
       child: IconButton(
-        icon: Icon(icon, color: designVariables.foreground.withValues(alpha: 0.5)),
+        icon: Icon(icon, color: designVariables.foreground.withFadedAlpha(0.5)),
         tooltip: tooltip(zulipLocalizations),
         onPressed: () => _handlePress(context)));
   }
@@ -933,7 +934,7 @@ class _SendButtonState extends State<_SendButton> {
     final zulipLocalizations = ZulipLocalizations.of(context);
 
     final iconColor = _hasValidationErrors
-      ? designVariables.icon.withValues(alpha: 0.5)
+      ? designVariables.icon.withFadedAlpha(0.5)
       : designVariables.icon;
 
     return SizedBox(

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,22 @@ void main() {
         check(Color(testCase).argbInt).equals(testCase);
       }
     });
+
+    test('withFadedAlpha smoke', () {
+      const color = Color.fromRGBO(100, 200, 100, 0.5);
+
+      check(color.withFadedAlpha(0.5))
+        .isSameColorAs(color.withValues(alpha: 0.25));
+
+      check(() => color.withFadedAlpha(1.1)).throws<AssertionError>();
+      check(() => color.withFadedAlpha(-0.1)).throws<AssertionError>();
+    });
+
+    test('withFadedAlpha opaque color', () {
+      const color = Colors.black;
+
+      check(color.withFadedAlpha(0.5))
+        .isSameColorAs(color.withValues(alpha: 0.5));
+    });
   });
 }

test/widgets/compose_box_test.dart

@@ -17,6 +17,7 @@ import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
 import 'package:zulip/widgets/app.dart';
+import 'package:zulip/widgets/color.dart';
 import 'package:zulip/widgets/compose_box.dart';
 import 'package:zulip/widgets/page.dart';
 import 'package:zulip/widgets/icons.dart';
@@ -439,7 +440,7 @@ void main() {
       final sendButtonWidget = sendButtonElement.widget as IconButton;
       final designVariables = DesignVariables.of(sendButtonElement);
       final expectedIconColor = expected
-        ? designVariables.icon.withValues(alpha: 0.5)
+        ? designVariables.icon.withFadedAlpha(0.5)
         : designVariables.icon;
       check(sendButtonWidget.icon)
         .isA<Icon>().color.isNotNull().isSameColorAs(expectedIconColor);