Skip to content

Commit 1f0c262

Browse files
Gaurav-Kushwaha-1225Gaurav-Kushwaha-1225
committed
theme[nfc]: Remove colorMessageHeaderIconInteractive
Removed `colorMessageHeaderIconInteractive` from `DesignVariables` and used `title` in place of it as per the design guidelines.
1 parent ab54810 commit 1f0c262

File tree

2 files changed

+63
-70
lines changed

2 files changed

+63
-70
lines changed

‎lib/widgets/message_list.dart‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,14 +55,14 @@ class MessageListTheme extends ThemeExtension<MessageListTheme> {
5555

5656
MessageListTheme.dark() :
5757
this._(
58-
dateSeparator: Colors.white,
59-
dateSeparatorText: const HSLColor.fromAHSL(0.75, 0, 0, 1).toColor(),
60-
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
61-
messageTimestamp: const HSLColor.fromAHSL(0.8, 0, 0, 0.85).toColor(),
62-
recipientHeaderText: const HSLColor.fromAHSL(0.8, 0, 0, 1).toColor(),
58+
dateSeparator: Colors.white.withValues(alpha: 51),
59+
dateSeparatorText: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
60+
dmRecipientHeaderBg: const HSLColor.fromAHSL(1, 0, 0, 0.14).toColor(),
61+
messageTimestamp: const HSLColor.fromAHSL(0.5, 0, 0, 1).toColor(),
62+
recipientHeaderText: const HSLColor.fromAHSL(0.9, 0, 0, 1).toColor(),
6363
senderBotIcon: const HSLColor.fromAHSL(1, 180, 0.05, 0.5).toColor(),
64-
senderName: const HSLColor.fromAHSL(0.85, 0, 0, 1).toColor(),
65-
streamMessageBgDefault: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
64+
senderName: const HSLColor.fromAHSL(0.9, 0, 0, 1).toColor(),
65+
streamMessageBgDefault: const HSLColor.fromAHSL(1, 0, 0, 0.11).toColor(),
6666
streamRecipientHeaderChevronRight: Colors.white.withValues(alpha: 0.3),
6767

6868
// 0.75 opacity from here:
@@ -352,7 +352,7 @@ class MessageListAppBarTitle extends StatelessWidget {
352352
padding: const EdgeInsetsDirectional.only(start: 4),
353353
child: Icon(icon,
354354
// TODO(design) copies the recipient header in web; is there a better color?
355-
color: designVariables.colorMessageHeaderIconInteractive, size: 14)),
355+
color: designVariables.title, size: 14)),
356356
]);
357357
}
358358

@@ -1098,7 +1098,7 @@ class StreamMessageRecipientHeader extends StatelessWidget {
10981098
style: recipientHeaderTextStyle(context))),
10991099
const SizedBox(width: 4),
11001100
// TODO(design) copies the recipient header in web; is there a better color?
1101-
Icon(size: 14, color: designVariables.colorMessageHeaderIconInteractive,
1101+
Icon(size: 14, color: designVariables.title,
11021102
// A null [Icon.icon] makes a blank space.
11031103
iconDataForTopicVisibilityPolicy(
11041104
store.topicVisibilityPolicy(message.streamId, topic))),

‎lib/widgets/theme.dart‎

Lines changed: 54 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
147147
bgSearchInput: const Color(0xffe3e3e3),
148148
textMessage: const Color(0xff262626),
149149
channelColorSwatches: ChannelColorSwatches.light,
150-
colorMessageHeaderIconInteractive: Colors.black.withValues(alpha: 0.2),
151150
contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15),
152151
contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20),
153152
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
@@ -167,61 +166,60 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
167166
);
168167

169168
static final dark = DesignVariables._(
170-
background: const Color(0xff000000),
171-
bannerBgIntDanger: const Color(0xff461616),
172-
bgBotBar: const Color(0xff222222),
173-
bgContextMenu: const Color(0xff262626),
174-
bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.37),
175-
bgMenuButtonActive: Colors.black.withValues(alpha: 0.2),
176-
bgMenuButtonSelected: Colors.black.withValues(alpha: 0.25),
177-
bgTopBar: const Color(0xff242424),
178-
borderBar: Colors.black.withValues(alpha: 0.5),
179-
borderMenuButtonSelected: Colors.white.withValues(alpha: 0.1),
180-
btnLabelAttLowIntDanger: const Color(0xffff8b7c),
181-
btnLabelAttMediumIntDanger: const Color(0xffff8b7c),
182-
composeBoxBg: const Color(0xff0f0f0f),
183-
contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
184-
contextMenuItemBg: const Color(0xff7977fe),
185-
contextMenuItemText: const Color(0xff9398fd),
186-
editorButtonPressedBg: Colors.white.withValues(alpha: 0.06),
187-
foreground: const Color(0xffffffff),
188-
icon: const Color(0xff7977fe),
189-
iconSelected: Colors.white.withValues(alpha: 0.8),
190-
labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.7),
191-
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
192-
labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
193-
mainBackground: const Color(0xff1d1d1d),
194-
textInput: const Color(0xffffffff).withValues(alpha: 0.9),
195-
title: const Color(0xffffffff),
196-
bgSearchInput: const Color(0xff313131),
197-
textMessage: const Color(0xffffffff).withValues(alpha: 0.8),
198-
channelColorSwatches: ChannelColorSwatches.dark,
199-
contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15), // the same as the light mode in Figma
200-
contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20), // the same as the light mode in Figma
201-
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
202-
colorMessageHeaderIconInteractive: Colors.white.withValues(alpha: 0.2),
203-
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
204-
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
205-
groupDmConversationIcon: Colors.white.withValues(alpha: 0.5),
206-
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
207-
groupDmConversationIconBg: const Color(0x33cccccc),
208-
inboxItemIconMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
209-
loginOrDivider: const Color(0xff424242),
210-
loginOrDividerText: const Color(0xffa8a8a8),
211-
modalBarrierColor: const Color(0xff000000).withValues(alpha: 0.5),
212-
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
213-
mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.6).toColor(),
214-
navigationButtonBg: Colors.white.withValues(alpha: 0.05),
215-
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
216-
sectionCollapseIcon: const Color(0x7fb6c8e2),
217-
// TODO(design-dark) unchanged in dark theme?
218-
star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
219-
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
220-
subscriptionListHeaderLine: const HSLColor.fromAHSL(0.4, 240, 0.1, 0.75).toColor(),
221-
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
222-
subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.75).toColor(),
223-
unreadCountBadgeTextForChannel: Colors.white.withValues(alpha: 0.9),
224-
);
169+
background: const Color(0xff000000),
170+
bannerBgIntDanger: const Color(0xff461616),
171+
bgBotBar: const Color(0xff222222),
172+
bgContextMenu: const Color(0xff262626),
173+
bgCounterUnread: const Color(0xff393c49),
174+
bgMenuButtonActive: Colors.black.withValues(alpha: 0.2),
175+
bgMenuButtonSelected: Colors.black.withValues(alpha: 0.25),
176+
bgTopBar: const Color(0xff242424),
177+
borderBar: Colors.black.withValues(alpha: 0.5),
178+
borderMenuButtonSelected: Colors.white.withValues(alpha: 0.1),
179+
btnLabelAttLowIntDanger: const Color(0xffff8b7c),
180+
btnLabelAttMediumIntDanger: const Color(0xffff8b7c),
181+
composeBoxBg: const Color(0xff0f0f0f),
182+
contextMenuCancelText: const Color(0xffffffff).withValues(alpha: 0.75),
183+
contextMenuItemBg: const Color(0xff7977fe),
184+
contextMenuItemText: const Color(0xff9398fd),
185+
editorButtonPressedBg: Colors.white.withValues(alpha: 0.06),
186+
foreground: const Color(0xff0f0f0f),
187+
icon: const Color(0xff7977fe),
188+
iconSelected: Colors.white.withValues(alpha: 0.8),
189+
labelCounterUnread: const Color(0xffffffff).withValues(alpha: 0.73),
190+
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 1).toColor(),
191+
labelMenuButton: const Color(0xffffffff).withValues(alpha: 0.85),
192+
mainBackground: const Color(0xff1d1d1d),
193+
textInput: const Color(0xffffffff).withValues(alpha: 0.9),
194+
title: const Color(0xffffffff).withValues(alpha: 0.9),
195+
bgSearchInput: const Color(0xff313131),
196+
textMessage: const Color(0xffffffff).withValues(alpha: 0.8),
197+
channelColorSwatches: ChannelColorSwatches.dark,
198+
contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15), // the same as the light mode in Figma
199+
contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20), // the same as the light mode in Figma
200+
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
201+
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
202+
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
203+
groupDmConversationIcon: Colors.white.withValues(alpha: 0.5),
204+
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
205+
groupDmConversationIconBg: const Color(0x33cccccc),
206+
inboxItemIconMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
207+
loginOrDivider: const Color(0xff424242),
208+
loginOrDividerText: const Color(0xffa8a8a8),
209+
modalBarrierColor: const Color(0xff000000).withValues(alpha: 0.3),
210+
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
211+
mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.6).toColor(),
212+
navigationButtonBg: Colors.white.withValues(alpha: 0.05),
213+
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
214+
sectionCollapseIcon: const Color(0x7fb6c8e2),
215+
// TODO(design-dark) unchanged in dark theme?
216+
star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
217+
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
218+
subscriptionListHeaderLine: const HSLColor.fromAHSL(0.4, 240, 0.1, 0.75).toColor(),
219+
// TODO(design-dark) need proper dark-theme color (this is ad hoc)
220+
subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.75).toColor(),
221+
unreadCountBadgeTextForChannel: Colors.white.withValues(alpha: 0.9),
222+
);
225223

226224
DesignVariables._({
227225
required this.background,
@@ -253,7 +251,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
253251
required this.bgSearchInput,
254252
required this.textMessage,
255253
required this.channelColorSwatches,
256-
required this.colorMessageHeaderIconInteractive,
257254
required this.contextMenuCancelBg,
258255
required this.contextMenuCancelPressedBg,
259256
required this.dmHeaderBg,
@@ -315,7 +312,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
315312
final ChannelColorSwatches channelColorSwatches;
316313

317314
// Not named variables in Figma; taken from older Figma drafts, or elsewhere.
318-
final Color colorMessageHeaderIconInteractive;
319315
final Color contextMenuCancelBg; // In Figma, but unnamed.
320316
final Color contextMenuCancelPressedBg; // In Figma, but unnamed.
321317
final Color dmHeaderBg;
@@ -364,7 +360,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
364360
Color? bgSearchInput,
365361
Color? textMessage,
366362
ChannelColorSwatches? channelColorSwatches,
367-
Color? colorMessageHeaderIconInteractive,
368363
Color? contextMenuCancelBg,
369364
Color? contextMenuCancelPressedBg,
370365
Color? dmHeaderBg,
@@ -412,7 +407,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
412407
bgSearchInput: bgSearchInput ?? this.bgSearchInput,
413408
textMessage: textMessage ?? this.textMessage,
414409
channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
415-
colorMessageHeaderIconInteractive: colorMessageHeaderIconInteractive ?? this.colorMessageHeaderIconInteractive,
416410
contextMenuCancelBg: contextMenuCancelBg ?? this.contextMenuCancelBg,
417411
contextMenuCancelPressedBg: contextMenuCancelPressedBg ?? this.contextMenuCancelPressedBg,
418412
dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
@@ -467,7 +461,6 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
467461
bgSearchInput: Color.lerp(bgSearchInput, other.bgSearchInput, t)!,
468462
textMessage: Color.lerp(textMessage, other.textMessage, t)!,
469463
channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
470-
colorMessageHeaderIconInteractive: Color.lerp(colorMessageHeaderIconInteractive, other.colorMessageHeaderIconInteractive, t)!,
471464
contextMenuCancelBg: Color.lerp(contextMenuCancelBg, other.contextMenuCancelBg, t)!,
472465
contextMenuCancelPressedBg: Color.lerp(contextMenuCancelPressedBg, other.contextMenuCancelPressedBg, t)!,
473466
dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,

0 commit comments

Comments
 (0)