inbox [nfc]: Place provisional dark-theme color variants, pending design

This completes a workable dark-theme implementation for the inbox screen. It's likely that some colors will be tweaked to follow designs that haven't been made yet. As noted in TODOs in each color that's placed here: - Some of the UI elements are colored with actual design variables from the new Figma that's marked ready for dev. But that Figma doesn't yet have those same UI elements, so it's unclear if it's the right choice of variable. - Some dark-theme colors were made up by me just now. NFC because none of the light-theme colors are changed, and we don't support dark theme yet.

Author: chrisbobbe

lib/widgets/inbox.dart

@@ -245,9 +245,11 @@ abstract class _HeaderItem extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
+ final designVariables = DesignVariables.of(context);
  return Material(
- // TODO(#95) need dark-theme color
- color: collapsed ? Colors.white : uncollapsedBackgroundColor(context),
+ color: collapsed
+ ? designVariables.background // TODO(design) check if this is the right variable
+ : uncollapsedBackgroundColor(context),
  child: InkWell(
  // TODO use onRowTap to handle taps that are not on the collapse button.
  // Probably we should give the collapse button a 44px or 48px square
@@ -258,8 +260,7 @@ abstract class _HeaderItem extends StatelessWidget {
  onTap: onCollapseButtonTap,
  child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
  Padding(padding: const EdgeInsets.all(10),
- // TODO(#95) need dark-theme color
- child: Icon(size: 20, color: const Color(0x7F1D2E48),
+ child: Icon(size: 20, color: designVariables.sectionCollapseIcon,
  collapsed ? ZulipIcons.arrow_right : ZulipIcons.arrow_down)),
  Icon(size: 18,
  color: collapsed
@@ -270,11 +271,11 @@ abstract class _HeaderItem extends StatelessWidget {
  Expanded(child: Padding(
  padding: const EdgeInsets.symmetric(vertical: 4),
  child: Text(
- style: const TextStyle(
+ style: TextStyle(
  fontSize: 17,
  height: (20 / 17),
- // TODO(#95) need dark-theme color
- color: Color(0xFF222222),
+ // TODO(design) check if this is the right variable
+ color: designVariables.labelMenuButton,
  ).merge(weightVariableTextStyle(context, wght: 600)),
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
@@ -302,9 +303,9 @@ class _AllDmsHeaderItem extends _HeaderItem {
  @override String get title => 'Direct messages'; // TODO(i18n)
  @override IconData get icon => ZulipIcons.user;
 
- // TODO(#95) need dark-theme colors
- @override Color collapsedIconColor(context) => const Color(0xFF222222);
- @override Color uncollapsedIconColor(context) => const Color(0xFF222222);
+ // TODO(design) check if this is the right variable for these
+ @override Color collapsedIconColor(context) => DesignVariables.of(context).labelMenuButton;
+ @override Color uncollapsedIconColor(context) => DesignVariables.of(context).labelMenuButton;
 
  @override Color uncollapsedBackgroundColor(context) => DesignVariables.of(context).dmHeaderBg;
  @override Color? unreadCountBadgeBackgroundColor(context) => null;
@@ -368,6 +369,8 @@ class _DmItem extends StatelessWidget {
  final store = PerAccountStoreWidget.of(context);
  final selfUser = store.users[store.selfUserId]!;
 
+ final designVariables = DesignVariables.of(context);
+
  final title = switch (narrow.otherRecipientIds) { // TODO dedupe with [RecentDmConversationsItem]
  [] => selfUser.fullName,
  [var otherUserId] => store.users[otherUserId]?.fullName ?? '(unknown user)',
@@ -379,8 +382,7 @@ class _DmItem extends StatelessWidget {
  };
 
  return Material(
- // TODO(#95) need dark-theme color
- color: Colors.white,
+ color: designVariables.background, // TODO(design) check if this is the right variable
  child: InkWell(
  onTap: () {
  Navigator.push(context,
@@ -392,11 +394,11 @@ class _DmItem extends StatelessWidget {
  Expanded(child: Padding(
  padding: const EdgeInsets.symmetric(vertical: 4),
  child: Text(
- style: const TextStyle(
+ style: TextStyle(
  fontSize: 17,
  height: (20 / 17),
- // TODO(#95) need dark-theme color
- color: Color(0xFF222222),
+ // TODO(design) check if this is the right variable
+ color: designVariables.labelMenuButton,
  ),
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
@@ -501,9 +503,10 @@ class _TopicItem extends StatelessWidget {
  final store = PerAccountStoreWidget.of(context);
  final subscription = store.subscriptions[streamId]!;
 
+ final designVariables = DesignVariables.of(context);
+
  return Material(
- // TODO(#95) need dark-theme color
- color: Colors.white,
+ color: designVariables.background, // TODO(design) check if this is the right variable
  child: InkWell(
  onTap: () {
  final narrow = TopicNarrow(streamId, topic);
@@ -516,11 +519,11 @@ class _TopicItem extends StatelessWidget {
  Expanded(child: Padding(
  padding: const EdgeInsets.symmetric(vertical: 4),
  child: Text(
- style: const TextStyle(
+ style: TextStyle(
  fontSize: 17,
  height: (20 / 17),
- // TODO(#95) need dark-theme color
- color: Color(0xFF222222),
+ // TODO(design) check if this is the right variable
+ color: designVariables.labelMenuButton,
  ),
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
@@ -538,15 +541,13 @@ class _TopicItem extends StatelessWidget {
 class _AtMentionMarker extends StatelessWidget {
  const _AtMentionMarker();
 
- // TODO(#95) need dark-theme color
- static final markerColor = const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor();
-
  @override
  Widget build(BuildContext context) {
+ final designVariables = DesignVariables.of(context);
  // Design for at-mention marker based on Figma screen:
  // https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=224-16386&mode=design&t=JsNndFQ8fKFH0SjS-0
  return Padding(
  padding: const EdgeInsetsDirectional.only(end: 4),
- child: Icon(ZulipIcons.at_sign, size: 14, color: markerColor));
+ child: Icon(ZulipIcons.at_sign, size: 14, color: designVariables.atMentionMarker));
  }
 }

lib/widgets/theme.dart

@@ -139,9 +139,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
  mainBackground: const Color(0xfff0f0f0),
  title: const Color(0xff1a1a1a),
  channelColorSwatches: ChannelColorSwatches.light,
+ atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
  dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.35, 0.93).toColor(),
  loginOrDivider: const Color(0xffdedede),
  loginOrDividerText: const Color(0xff575757),
+ sectionCollapseIcon: const Color(0x7f1e2e48),
  star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
  unreadCountBadgeTextForChannel: Colors.black.withOpacity(0.9),
  );
@@ -158,9 +160,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
  mainBackground: const Color(0xff1d1d1d),
  title: const Color(0xffffffff),
  channelColorSwatches: ChannelColorSwatches.dark,
+ // TODO(#95) need proper dark-theme color (this is ad hoc)
+ atMentionMarker: const HSLColor.fromAHSL(0.4, 0, 0, 1).toColor(),
  dmHeaderBg: const HSLColor.fromAHSL(1, 46, 0.15, 0.2).toColor(),
  loginOrDivider: const Color(0xff424242),
  loginOrDividerText: const Color(0xffa8a8a8),
+ // TODO(#95) need proper dark-theme color (this is ad hoc)
+ sectionCollapseIcon: const Color(0x7fb6c8e2),
  // TODO(#95) unchanged in dark theme?
  star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
  unreadCountBadgeTextForChannel: Colors.white.withOpacity(0.9),
@@ -177,9 +183,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
  required this.mainBackground,
  required this.title,
  required this.channelColorSwatches,
+ required this.atMentionMarker,
  required this.dmHeaderBg,
  required this.loginOrDivider,
  required this.loginOrDividerText,
+ required this.sectionCollapseIcon,
  required this.star,
  required this.unreadCountBadgeTextForChannel,
  });
@@ -208,9 +216,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
  final ChannelColorSwatches channelColorSwatches;
 
  // Not named variables in Figma; taken from older Figma drafts, or elsewhere.
+ final Color atMentionMarker;
  final Color dmHeaderBg;
  final Color loginOrDivider; // TODO(#95) need proper dark-theme color (this is ad hoc)
  final Color loginOrDividerText; // TODO(#95) need proper dark-theme color (this is ad hoc)
+ final Color sectionCollapseIcon;
  final Color star;
  final Color unreadCountBadgeTextForChannel;
 
@@ -226,9 +236,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
  Color? mainBackground,
  Color? title,
  ChannelColorSwatches? channelColorSwatches,
+ Color? atMentionMarker,
  Color? dmHeaderBg,
  Color? loginOrDivider,
  Color? loginOrDividerText,
+ Color? sectionCollapseIcon,
  Color? star,
  Color? unreadCountBadgeTextForChannel,
  }) {
@@ -243,9 +255,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
  mainBackground: mainBackground ?? this.mainBackground,
  title: title ?? this.title,
  channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
+ atMentionMarker: atMentionMarker ?? this.atMentionMarker,
  dmHeaderBg: dmHeaderBg ?? this.dmHeaderBg,
  loginOrDivider: loginOrDivider ?? this.loginOrDivider,
  loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText,
+ sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon,
  star: star ?? this.star,
  unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel,
  );
@@ -267,9 +281,11 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
  mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
  title: Color.lerp(title, other.title, t)!,
  channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
+ atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,
  dmHeaderBg: Color.lerp(dmHeaderBg, other.dmHeaderBg, t)!,
  loginOrDivider: Color.lerp(loginOrDivider, other.loginOrDivider, t)!,
  loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!,
+ sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!,
  star: Color.lerp(star, other.star, t)!,
  unreadCountBadgeTextForChannel: Color.lerp(unreadCountBadgeTextForChannel, other.unreadCountBadgeTextForChannel, t)!,
  );