subscription_list [nfc]: Place provisional dark-theme colors pending design

Like we did in a recent commit for the "Direct messages" screen, and
like we did for the "Inbox" screen in c6abaf9.

Author: chrisbobbe

lib/widgets/subscription_list.dart

@@ -120,14 +120,15 @@ class _NoSubscriptionsItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
     return SliverToBoxAdapter(
       child: Padding(
         padding: const EdgeInsets.all(10),
         child: Text("No channels found",
           textAlign: TextAlign.center,
           style: TextStyle(
-            // TODO(#95) need dark-theme color
-            color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
+            color: designVariables.subscriptionListHeaderText,
             fontSize: 18,
             height: (20 / 18),
           ))));
@@ -139,34 +140,34 @@ class _SubscriptionListHeader extends StatelessWidget {
 
   final String label;
 
-  static final _line = Expanded(child: Divider(
-    // TODO(#95) need dark-theme color
-    color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor()));
-
   @override
   Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
+    final line = Expanded(child: Divider(
+      color: designVariables.subscriptionListHeaderLine));
+
     return SliverToBoxAdapter(
       child: ColoredBox(
-        // TODO(#95) need dark-theme color
-        color: Colors.white,
+        // TODO(design) check if this is the right variable
+        color: designVariables.background,
         child: Row(crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             const SizedBox(width: 16),
-            _line,
+            line,
             const SizedBox(width: 8),
             Padding(
               padding: const EdgeInsets.symmetric(vertical: 7),
               child: Text(label,
                 textAlign: TextAlign.center,
                 style: TextStyle(
-                  // TODO(#95) need dark-theme color
-                  color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
+                  color: designVariables.subscriptionListHeaderText,
                   fontSize: 14,
                   letterSpacing: proportionalLetterSpacing(context, 0.04, baseFontSize: 14),
                   height: (16 / 14),
                 ))),
             const SizedBox(width: 8),
-            _line,
+            line,
             const SizedBox(width: 16),
           ])));
   }
@@ -207,12 +208,14 @@ class SubscriptionItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+
     final swatch = colorSwatchFor(context, subscription);
     final hasUnreads = (unreadCount > 0);
     final opacity = subscription.isMuted ? 0.55 : 1.0;
     return Material(
-      // TODO(#95) need dark-theme color
-      color: Colors.white,
+      // TODO(design) check if this is the right variable
+      color: designVariables.background,
       child: InkWell(
         onTap: () {
           Navigator.push(context,
@@ -237,19 +240,11 @@ class SubscriptionItem extends StatelessWidget {
               child: Opacity(
                 opacity: opacity,
                 child: Text(
-                  style: const TextStyle(
+                  style: TextStyle(
                     fontSize: 18,
                     height: (20 / 18),
-                    // The old, soon-to-be-outdated Figma has #262626:
-                    //   https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=171-12359&t=OgFPAdLiXz9OEzCF-0
-                    // That might be accidental, though. The same page has
-                    // #222222 for the topics. The "Inbox" page in that Figma
-                    // has #222222 for the "Private messages" header, but yeah,
-                    // #262626 for the channel headers. Hmm...on our "Inbox",
-                    // looks like we just took #222222 for both those headers.
-                    // Anyway, eager to have the updated Figma to work from.
-                    // 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: hasUnreads ? 600 : null)),
                   maxLines: 1,

lib/widgets/theme.dart

@@ -150,6 +150,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       loginOrDividerText: const Color(0xff575757),
       sectionCollapseIcon: const Color(0x7f1e2e48),
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
+      subscriptionListHeaderLine: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor(),
+      subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
       unreadCountBadgeTextForChannel: Colors.black.withOpacity(0.9),
     );
 
@@ -181,6 +183,10 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       sectionCollapseIcon: const Color(0x7fb6c8e2),
       // TODO(#95) unchanged in dark theme?
       star: const HSLColor.fromAHSL(0.5, 47, 1, 0.41).toColor(),
+      // TODO(#95) need proper dark-theme color (this is ad hoc)
+      subscriptionListHeaderLine: const HSLColor.fromAHSL(0.4, 240, 0.1, 0.75).toColor(),
+      // TODO(#95) need proper dark-theme color (this is ad hoc)
+      subscriptionListHeaderText: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.75).toColor(),
       unreadCountBadgeTextForChannel: Colors.white.withOpacity(0.9),
     );
 
@@ -206,6 +212,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.loginOrDividerText,
     required this.sectionCollapseIcon,
     required this.star,
+    required this.subscriptionListHeaderLine,
+    required this.subscriptionListHeaderText,
     required this.unreadCountBadgeTextForChannel,
   });
 
@@ -244,6 +252,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color loginOrDividerText; // TODO(#95) need proper dark-theme color (this is ad hoc)
   final Color sectionCollapseIcon;
   final Color star;
+  final Color subscriptionListHeaderLine;
+  final Color subscriptionListHeaderText;
   final Color unreadCountBadgeTextForChannel;
 
   @override
@@ -269,6 +279,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? loginOrDividerText,
     Color? sectionCollapseIcon,
     Color? star,
+    Color? subscriptionListHeaderLine,
+    Color? subscriptionListHeaderText,
     Color? unreadCountBadgeTextForChannel,
   }) {
     return DesignVariables._(
@@ -293,6 +305,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       loginOrDividerText: loginOrDividerText ?? this.loginOrDividerText,
       sectionCollapseIcon: sectionCollapseIcon ?? this.sectionCollapseIcon,
       star: star ?? this.star,
+      subscriptionListHeaderLine: subscriptionListHeaderLine ?? this.subscriptionListHeaderLine,
+      subscriptionListHeaderText: subscriptionListHeaderText ?? this.subscriptionListHeaderText,
       unreadCountBadgeTextForChannel: unreadCountBadgeTextForChannel ?? this.unreadCountBadgeTextForChannel,
     );
   }
@@ -324,6 +338,8 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       loginOrDividerText: Color.lerp(loginOrDividerText, other.loginOrDividerText, t)!,
       sectionCollapseIcon: Color.lerp(sectionCollapseIcon, other.sectionCollapseIcon, t)!,
       star: Color.lerp(star, other.star, t)!,
+      subscriptionListHeaderLine: Color.lerp(subscriptionListHeaderLine, other.subscriptionListHeaderLine, t)!,
+      subscriptionListHeaderText: Color.lerp(subscriptionListHeaderText, other.subscriptionListHeaderText, t)!,
       unreadCountBadgeTextForChannel: Color.lerp(unreadCountBadgeTextForChannel, other.unreadCountBadgeTextForChannel, t)!,
     );
   }