button [nfc]: Have ZulipWebUiKitButton support ad hoc minimal-neutral type

For muted-users, coming up.

Figma:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6092-50795&m=dev

Author: chrisbobbe

lib/widgets/button.dart

@@ -33,6 +33,15 @@ class ZulipWebUiKitButton extends StatelessWidget {
 
   WidgetStateColor _backgroundColor(DesignVariables designVariables) {
     switch ((attention, intent)) {
+      case (ZulipWebUiKitButtonAttention.minimal, ZulipWebUiKitButtonIntent.neutral):
+        return WidgetStateColor.fromMap({
+          WidgetState.pressed: designVariables.neutralButtonBg.withFadedAlpha(0.3),
+          ~WidgetState.pressed: designVariables.neutralButtonBg.withAlpha(0),
+        });
+      case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.neutral):
+      case (ZulipWebUiKitButtonAttention.high, ZulipWebUiKitButtonIntent.neutral):
+      case (ZulipWebUiKitButtonAttention.minimal, ZulipWebUiKitButtonIntent.info):
+        throw UnimplementedError();
       case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.info):
         return WidgetStateColor.fromMap({
           WidgetState.pressed: designVariables.btnBgAttMediumIntInfoActive,
@@ -48,6 +57,13 @@ class ZulipWebUiKitButton extends StatelessWidget {
 
   Color _labelColor(DesignVariables designVariables) {
     switch ((attention, intent)) {
+      case (ZulipWebUiKitButtonAttention.minimal, ZulipWebUiKitButtonIntent.neutral):
+        // TODO nit: don't fade in pressed state
+        return designVariables.neutralButtonLabel.withFadedAlpha(0.85);
+      case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.neutral):
+      case (ZulipWebUiKitButtonAttention.high, ZulipWebUiKitButtonIntent.neutral):
+      case (ZulipWebUiKitButtonAttention.minimal, ZulipWebUiKitButtonIntent.info):
+        throw UnimplementedError();
       case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.info):
         return designVariables.btnLabelAttMediumIntInfo;
       case (ZulipWebUiKitButtonAttention.high, ZulipWebUiKitButtonIntent.info):
@@ -80,6 +96,8 @@ class ZulipWebUiKitButton extends StatelessWidget {
 
   BorderSide _borderSide(DesignVariables designVariables) {
     switch (attention) {
+      case ZulipWebUiKitButtonAttention.minimal:
+        return BorderSide.none;
       case ZulipWebUiKitButtonAttention.medium:
         // TODO inner shadow effect like `box-shadow: inset`, following Figma;
         //   needs Flutter support for something like that:
@@ -167,10 +185,15 @@ enum ZulipWebUiKitButtonAttention {
   high,
   medium,
   // low,
+
+  /// An ad hoc value for the "Reveal message" button
+  /// on a message from a muted sender:
+  ///   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6092-50786&m=dev
+  minimal,
 }
 
 enum ZulipWebUiKitButtonIntent {
-  // neutral,
+  neutral,
   // warning,
   // danger,
   info,

lib/widgets/theme.dart

@@ -171,6 +171,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     labelMenuButton: const Color(0xff222222),
     labelSearchPrompt: const Color(0xff000000).withValues(alpha: 0.5),
     mainBackground: const Color(0xfff0f0f0),
+    neutralButtonBg: const Color(0xff8c84ae),
+    neutralButtonLabel: const Color(0xff433d5c),
     radioBorder: Color(0xffbbbdc8),
     radioFillSelected: Color(0xff4370f0),
     textInput: const Color(0xff000000),
@@ -240,6 +242,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
     labelSearchPrompt: const Color(0xffffffff).withValues(alpha: 0.5),
     mainBackground: const Color(0xff1d1d1d),
+    neutralButtonBg: const Color(0xffd4d1e0),
+    neutralButtonLabel: const Color(0xffa9a3c2),
     radioBorder: Color(0xff626573),
     radioFillSelected: Color(0xff4e7cfa),
     textInput: const Color(0xffffffff).withValues(alpha: 0.9),
@@ -317,6 +321,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.labelMenuButton,
     required this.labelSearchPrompt,
     required this.mainBackground,
+    required this.neutralButtonBg,
+    required this.neutralButtonLabel,
     required this.radioBorder,
     required this.radioFillSelected,
     required this.textInput,
@@ -395,6 +401,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color labelMenuButton;
   final Color labelSearchPrompt;
   final Color mainBackground;
+  final Color neutralButtonBg;
+  final Color neutralButtonLabel;
   final Color radioBorder;
   final Color radioFillSelected;
   final Color textInput;
@@ -468,6 +476,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? labelMenuButton,
     Color? labelSearchPrompt,
     Color? mainBackground,
+    Color? neutralButtonBg,
+    Color? neutralButtonLabel,
     Color? radioBorder,
     Color? radioFillSelected,
     Color? textInput,
@@ -536,6 +546,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       labelMenuButton: labelMenuButton ?? this.labelMenuButton,
       labelSearchPrompt: labelSearchPrompt ?? this.labelSearchPrompt,
       mainBackground: mainBackground ?? this.mainBackground,
+      neutralButtonBg: neutralButtonBg ?? this.neutralButtonBg,
+      neutralButtonLabel: neutralButtonLabel ?? this.neutralButtonLabel,
       radioBorder: radioBorder ?? this.radioBorder,
       radioFillSelected: radioFillSelected ?? this.radioFillSelected,
       textInput: textInput ?? this.textInput,
@@ -611,6 +623,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
       labelSearchPrompt: Color.lerp(labelSearchPrompt, other.labelSearchPrompt, t)!,
       mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
+      neutralButtonBg: Color.lerp(neutralButtonBg, other.neutralButtonBg, t)!,
+      neutralButtonLabel: Color.lerp(neutralButtonLabel, other.neutralButtonLabel, t)!,
       radioBorder: Color.lerp(radioBorder, other.radioBorder, t)!,
       radioFillSelected: Color.lerp(radioFillSelected, other.radioFillSelected, t)!,
       textInput: Color.lerp(textInput, other.textInput, t)!,