Skip to content

Commit dcc8123

Browse files
chrisbobbegnprice
chrisbobbe
authored and
gnprice
committed
theme [nfc]: Make DesignVariables.{light,dark} static final fields
Instead of constructors. Nicer to compute each of these just once.
1 parent 0b90e42 commit dcc8123

File tree

3 files changed

+115
-117
lines changed

3 files changed

+115
-117
lines changed

‎lib/widgets/theme.dart‎

Lines changed: 106 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ ThemeData zulipThemeData(BuildContext context) {
2626

2727
switch (brightness) {
2828
case Brightness.light: {
29-
designVariables = DesignVariables.light();
29+
designVariables = DesignVariables.light;
3030
themeExtensions = [
3131
ContentTheme.light(context),
3232
designVariables,
@@ -35,7 +35,7 @@ ThemeData zulipThemeData(BuildContext context) {
3535
];
3636
}
3737
case Brightness.dark: {
38-
designVariables = DesignVariables.dark();
38+
designVariables = DesignVariables.dark;
3939
themeExtensions = [
4040
ContentTheme.dark(context),
4141
designVariables,
@@ -117,113 +117,111 @@ const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);
117117
/// or
118118
/// https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=2945-49492&t=MEb4vtp7S26nntxm-0
119119
class DesignVariables extends ThemeExtension<DesignVariables> {
120-
DesignVariables.light() :
121-
this._(
122-
background: const Color(0xffffffff),
123-
bannerBgIntDanger: const Color(0xfff2e4e4),
124-
bgBotBar: const Color(0xfff6f6f6),
125-
bgContextMenu: const Color(0xfff2f2f2),
126-
bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.15),
127-
bgMenuButtonActive: Colors.black.withValues(alpha: 0.05),
128-
bgMenuButtonSelected: Colors.white,
129-
bgTopBar: const Color(0xfff5f5f5),
130-
borderBar: Colors.black.withValues(alpha: 0.2),
131-
borderMenuButtonSelected: Colors.black.withValues(alpha: 0.2),
132-
btnLabelAttLowIntDanger: const Color(0xffc0070a),
133-
btnLabelAttMediumIntDanger: const Color(0xffac0508),
134-
composeBoxBg: const Color(0xffffffff),
135-
contextMenuCancelText: const Color(0xff222222),
136-
contextMenuItemBg: const Color(0xff6159e1),
137-
contextMenuItemText: const Color(0xff381da7),
138-
editorButtonPressedBg: Colors.black.withValues(alpha: 0.06),
139-
foreground: const Color(0xff000000),
140-
icon: const Color(0xff6159e1),
141-
iconSelected: const Color(0xff222222),
142-
labelCounterUnread: const Color(0xff222222),
143-
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
144-
labelMenuButton: const Color(0xff222222),
145-
mainBackground: const Color(0xfff0f0f0),
146-
textInput: const Color(0xff000000),
147-
title: const Color(0xff1a1a1a),
148-
bgSearchInput: const Color(0xffe3e3e3),
149-
textMessage: const Color(0xff262626),
150-
channelColorSwatches: ChannelColorSwatches.light,
151-
colorMessageHeaderIconInteractive: Colors.black.withValues(alpha: 0.2),
152-
contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15),
153-
contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20),
154-
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
155-
groupDmConversationIcon: Colors.black.withValues(alpha: 0.5),
156-
groupDmConversationIconBg: const Color(0x33808080),
157-
inboxItemIconMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
158-
loginOrDivider: const Color(0xffdedede),
159-
loginOrDividerText: const Color(0xff575757),
160-
modalBarrierColor: const Color(0xff000000).withValues(alpha: 0.3),
161-
mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.8).toColor(),
162-
navigationButtonBg: Colors.black.withValues(alpha: 0.05),
163-
sectionCollapseIcon: const Color(0x7f1e2e48),
164-
star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
165-
subscriptionListHeaderLine: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor(),
166-
subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
167-
unreadCountBadgeTextForChannel: Colors.black.withValues(alpha: 0.9),
168-
);
120+
static final light = DesignVariables._(
121+
background: const Color(0xffffffff),
122+
bannerBgIntDanger: const Color(0xfff2e4e4),
123+
bgBotBar: const Color(0xfff6f6f6),
124+
bgContextMenu: const Color(0xfff2f2f2),
125+
bgCounterUnread: const Color(0xff666699).withValues(alpha: 0.15),
126+
bgMenuButtonActive: Colors.black.withValues(alpha: 0.05),
127+
bgMenuButtonSelected: Colors.white,
128+
bgTopBar: const Color(0xfff5f5f5),
129+
borderBar: Colors.black.withValues(alpha: 0.2),
130+
borderMenuButtonSelected: Colors.black.withValues(alpha: 0.2),
131+
btnLabelAttLowIntDanger: const Color(0xffc0070a),
132+
btnLabelAttMediumIntDanger: const Color(0xffac0508),
133+
composeBoxBg: const Color(0xffffffff),
134+
contextMenuCancelText: const Color(0xff222222),
135+
contextMenuItemBg: const Color(0xff6159e1),
136+
contextMenuItemText: const Color(0xff381da7),
137+
editorButtonPressedBg: Colors.black.withValues(alpha: 0.06),
138+
foreground: const Color(0xff000000),
139+
icon: const Color(0xff6159e1),
140+
iconSelected: const Color(0xff222222),
141+
labelCounterUnread: const Color(0xff222222),
142+
labelEdited: const HSLColor.fromAHSL(0.35, 0, 0, 0).toColor(),
143+
labelMenuButton: const Color(0xff222222),
144+
mainBackground: const Color(0xfff0f0f0),
145+
textInput: const Color(0xff000000),
146+
title: const Color(0xff1a1a1a),
147+
bgSearchInput: const Color(0xffe3e3e3),
148+
textMessage: const Color(0xff262626),
149+
channelColorSwatches: ChannelColorSwatches.light,
150+
colorMessageHeaderIconInteractive: Colors.black.withValues(alpha: 0.2),
151+
contextMenuCancelBg: const Color(0xff797986).withValues(alpha: 0.15),
152+
contextMenuCancelPressedBg: const Color(0xff797986).withValues(alpha: 0.20),
153+
dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
154+
groupDmConversationIcon: Colors.black.withValues(alpha: 0.5),
155+
groupDmConversationIconBg: const Color(0x33808080),
156+
inboxItemIconMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
157+
loginOrDivider: const Color(0xffdedede),
158+
loginOrDividerText: const Color(0xff575757),
159+
modalBarrierColor: const Color(0xff000000).withValues(alpha: 0.3),
160+
mutedUnreadBadge: const HSLColor.fromAHSL(0.5, 0, 0, 0.8).toColor(),
161+
navigationButtonBg: Colors.black.withValues(alpha: 0.05),
162+
sectionCollapseIcon: const Color(0x7f1e2e48),
163+
star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
164+
subscriptionListHeaderLine: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor(),
165+
subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
166+
unreadCountBadgeTextForChannel: Colors.black.withValues(alpha: 0.9),
167+
);
169168

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

228226
DesignVariables._({
229227
required this.background,

‎test/widgets/home_test.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ void main () {
118118
});
119119

120120
group('menu', () {
121-
final designVariables = DesignVariables.light();
121+
final designVariables = DesignVariables.light;
122122

123123
final inboxMenuIconFinder = find.descendant(
124124
of: find.byType(BottomSheet),

‎test/widgets/theme_test.dart‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -74,26 +74,26 @@ void main() {
7474
group('DesignVariables', () {
7575
group('lerp', () {
7676
testWidgets('light -> light', (tester) async {
77-
final a = DesignVariables.light();
78-
final b = DesignVariables.light();
77+
final a = DesignVariables.light;
78+
final b = DesignVariables.light;
7979
check(() => a.lerp(b, 0.5)).returnsNormally();
8080
});
8181

8282
testWidgets('light -> dark', (tester) async {
83-
final a = DesignVariables.light();
84-
final b = DesignVariables.dark();
83+
final a = DesignVariables.light;
84+
final b = DesignVariables.dark;
8585
check(() => a.lerp(b, 0.5)).returnsNormally();
8686
});
8787

8888
testWidgets('dark -> light', (tester) async {
89-
final a = DesignVariables.dark();
90-
final b = DesignVariables.light();
89+
final a = DesignVariables.dark;
90+
final b = DesignVariables.light;
9191
check(() => a.lerp(b, 0.5)).returnsNormally();
9292
});
9393

9494
testWidgets('dark -> dark', (tester) async {
95-
final a = DesignVariables.dark();
96-
final b = DesignVariables.dark();
95+
final a = DesignVariables.dark;
96+
final b = DesignVariables.dark;
9797
check(() => a.lerp(b, 0.5)).returnsNormally();
9898
});
9999
});

0 commit comments

Comments
 (0)