theme [nfc]: Add more variables to DesignVariables, from the new Figma

Author: chrisbobbe

Diff for: lib/widgets/theme.dart

@@ -129,11 +129,13 @@ const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);
 class DesignVariables extends ThemeExtension<DesignVariables> {
   DesignVariables.light() :
     this._(
+      background: const Color(0xffffffff),
       bgCounterUnread: const Color(0xff666699).withOpacity(0.15),
       bgTopBar: const Color(0xfff5f5f5),
       borderBar: const Color(0x33000000),
       icon: const Color(0xff666699),
       labelCounterUnread: const Color(0xff222222),
+      labelMenuButton: const Color(0xff222222),
       mainBackground: const Color(0xfff0f0f0),
       title: const Color(0xff1a1a1a),
       channelColorSwatches: ChannelColorSwatches.light,
@@ -145,11 +147,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   DesignVariables.dark() :
     this._(
+      background: const Color(0xff000000),
       bgCounterUnread: const Color(0xff666699).withOpacity(0.37),
       bgTopBar: const Color(0xff242424),
       borderBar: Colors.black.withOpacity(0.41),
       icon: const Color(0xff7070c2),
       labelCounterUnread: const Color(0xffffffff).withOpacity(0.7),
+      labelMenuButton: const Color(0xffffffff).withOpacity(0.85),
       mainBackground: const Color(0xff1d1d1d),
       title: const Color(0xffffffff),
       channelColorSwatches: ChannelColorSwatches.dark,
@@ -161,11 +165,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     );
 
   DesignVariables._({
+    required this.background,
     required this.bgCounterUnread,
     required this.bgTopBar,
     required this.borderBar,
     required this.icon,
     required this.labelCounterUnread,
+    required this.labelMenuButton,
     required this.mainBackground,
     required this.title,
     required this.channelColorSwatches,
@@ -185,11 +191,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     return extension!;
   }
 
+  final Color background;
   final Color bgCounterUnread;
   final Color bgTopBar;
   final Color borderBar;
   final Color icon;
   final Color labelCounterUnread;
+  final Color labelMenuButton;
   final Color mainBackground;
   final Color title;
 
@@ -204,11 +212,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
 
   @override
   DesignVariables copyWith({
+    Color? background,
     Color? bgCounterUnread,
     Color? bgTopBar,
     Color? borderBar,
     Color? icon,
     Color? labelCounterUnread,
+    Color? labelMenuButton,
     Color? mainBackground,
     Color? title,
     ChannelColorSwatches? channelColorSwatches,
@@ -218,11 +228,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? unreadCountBadgeTextForChannel,
   }) {
     return DesignVariables._(
+      background: background ?? this.background,
       bgCounterUnread: bgCounterUnread ?? this.bgCounterUnread,
       bgTopBar: bgTopBar ?? this.bgTopBar,
       borderBar: borderBar ?? this.borderBar,
       icon: icon ?? this.icon,
       labelCounterUnread: labelCounterUnread ?? this.labelCounterUnread,
+      labelMenuButton: labelMenuButton ?? this.labelMenuButton,
       mainBackground: mainBackground ?? this.mainBackground,
       title: title ?? this.title,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
@@ -239,11 +251,13 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       return this;
     }
     return DesignVariables._(
+      background: Color.lerp(background, other.background, t)!,
       bgCounterUnread: Color.lerp(bgCounterUnread, other.bgCounterUnread, t)!,
       bgTopBar: Color.lerp(bgTopBar, other.bgTopBar, t)!,
       borderBar: Color.lerp(borderBar, other.borderBar, t)!,
       icon: Color.lerp(icon, other.icon, t)!,
       labelCounterUnread: Color.lerp(labelCounterUnread, other.labelCounterUnread, t)!,
+      labelMenuButton: Color.lerp(labelMenuButton, other.labelMenuButton, t)!,
       mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
       title: Color.lerp(title, other.title, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),