Skip to content

Commit d5553a4

Browse files
committed
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
1 parent 731d714 commit d5553a4

File tree

2 files changed

+38
-1
lines changed

2 files changed

+38
-1
lines changed

lib/widgets/button.dart

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@ class ZulipWebUiKitButton extends StatelessWidget {
3333

3434
WidgetStateColor _backgroundColor(DesignVariables designVariables) {
3535
switch ((attention, intent)) {
36+
case (ZulipWebUiKitButtonAttention.minimal, ZulipWebUiKitButtonIntent.neutral):
37+
return WidgetStateColor.fromMap({
38+
WidgetState.pressed: designVariables.neutralButtonBg.withFadedAlpha(0.3),
39+
~WidgetState.pressed: designVariables.neutralButtonBg.withAlpha(0),
40+
});
41+
case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.neutral):
42+
case (ZulipWebUiKitButtonAttention.high, ZulipWebUiKitButtonIntent.neutral):
43+
case (ZulipWebUiKitButtonAttention.minimal, ZulipWebUiKitButtonIntent.info):
44+
throw UnimplementedError();
3645
case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.info):
3746
return WidgetStateColor.fromMap({
3847
WidgetState.pressed: designVariables.btnBgAttMediumIntInfoActive,
@@ -48,6 +57,13 @@ class ZulipWebUiKitButton extends StatelessWidget {
4857

4958
Color _labelColor(DesignVariables designVariables) {
5059
switch ((attention, intent)) {
60+
case (ZulipWebUiKitButtonAttention.minimal, ZulipWebUiKitButtonIntent.neutral):
61+
// TODO nit: don't fade in pressed state
62+
return designVariables.neutralButtonLabel.withFadedAlpha(0.85);
63+
case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.neutral):
64+
case (ZulipWebUiKitButtonAttention.high, ZulipWebUiKitButtonIntent.neutral):
65+
case (ZulipWebUiKitButtonAttention.minimal, ZulipWebUiKitButtonIntent.info):
66+
throw UnimplementedError();
5167
case (ZulipWebUiKitButtonAttention.medium, ZulipWebUiKitButtonIntent.info):
5268
return designVariables.btnLabelAttMediumIntInfo;
5369
case (ZulipWebUiKitButtonAttention.high, ZulipWebUiKitButtonIntent.info):
@@ -80,6 +96,8 @@ class ZulipWebUiKitButton extends StatelessWidget {
8096

8197
BorderSide _borderSide(DesignVariables designVariables) {
8298
switch (attention) {
99+
case ZulipWebUiKitButtonAttention.minimal:
100+
return BorderSide.none;
83101
case ZulipWebUiKitButtonAttention.medium:
84102
// TODO inner shadow effect like `box-shadow: inset`, following Figma;
85103
// needs Flutter support for something like that:
@@ -167,10 +185,15 @@ enum ZulipWebUiKitButtonAttention {
167185
high,
168186
medium,
169187
// low,
188+
189+
/// An ad hoc value for the "Reveal message" button
190+
/// on a message from a muted sender:
191+
/// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=6092-50786&m=dev
192+
minimal,
170193
}
171194

172195
enum ZulipWebUiKitButtonIntent {
173-
// neutral,
196+
neutral,
174197
// warning,
175198
// danger,
176199
info,

lib/widgets/theme.dart

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
165165
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
166166
labelMenuButton: const Color(0xff222222),
167167
mainBackground: const Color(0xfff0f0f0),
168+
neutralButtonBg: const Color(0xff8c84ae),
169+
neutralButtonLabel: const Color(0xff433d5c),
168170
textInput: const Color(0xff000000),
169171
title: const Color(0xff1a1a1a),
170172
bgSearchInput: const Color(0xffe3e3e3),
@@ -226,6 +228,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
226228
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
227229
labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
228230
mainBackground: const Color(0xff1d1d1d),
231+
neutralButtonBg: const Color(0xffd4d1e0),
232+
neutralButtonLabel: const Color(0xffa9a3c2),
229233
textInput: const Color(0xffffffff).withValues(alpha: 0.9),
230234
title: const Color(0xffffffff).withValues(alpha: 0.9),
231235
bgSearchInput: const Color(0xff313131),
@@ -295,6 +299,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
295299
required this.labelEdited,
296300
required this.labelMenuButton,
297301
required this.mainBackground,
302+
required this.neutralButtonBg,
303+
required this.neutralButtonLabel,
298304
required this.textInput,
299305
required this.title,
300306
required this.bgSearchInput,
@@ -365,6 +371,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
365371
final Color labelEdited;
366372
final Color labelMenuButton;
367373
final Color mainBackground;
374+
final Color neutralButtonBg;
375+
final Color neutralButtonLabel;
368376
final Color textInput;
369377
final Color title;
370378
final Color bgSearchInput;
@@ -430,6 +438,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
430438
Color? labelEdited,
431439
Color? labelMenuButton,
432440
Color? mainBackground,
441+
Color? neutralButtonBg,
442+
Color? neutralButtonLabel,
433443
Color? textInput,
434444
Color? title,
435445
Color? bgSearchInput,
@@ -490,6 +500,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
490500
labelEdited: labelEdited ?? this.labelEdited,
491501
labelMenuButton: labelMenuButton ?? this.labelMenuButton,
492502
mainBackground: mainBackground ?? this.mainBackground,
503+
neutralButtonBg: neutralButtonBg ?? this.neutralButtonBg,
504+
neutralButtonLabel: neutralButtonLabel ?? this.neutralButtonLabel,
493505
textInput: textInput ?? this.textInput,
494506
title: title ?? this.title,
495507
bgSearchInput: bgSearchInput ?? this.bgSearchInput,
@@ -557,6 +569,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
557569
labelEdited: Color.lerp(labelEdited, other.labelEdited, t)!,
558570
labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
559571
mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
572+
neutralButtonBg: Color.lerp(neutralButtonBg, other.neutralButtonBg, t)!,
573+
neutralButtonLabel: Color.lerp(neutralButtonLabel, other.neutralButtonLabel, t)!,
560574
textInput: Color.lerp(textInput, other.textInput, t)!,
561575
title: Color.lerp(title, other.title, t)!,
562576
bgSearchInput: Color.lerp(bgSearchInput, other.bgSearchInput, t)!,

0 commit comments

Comments
 (0)