compose_box: Implement topic input redesign

`Spoiler` has a similar bottom underline implementation.  We could have
used `UnderlineInputBorder` on `InputDecoration`, but that also comes
with other input state styles (e.g.: focused, disabled, etc.).

See also:

  - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3954-13395
  - https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3862-14350

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

lib/widgets/compose_box.dart

@@ -17,6 +17,7 @@ import 'autocomplete.dart';
 import 'dialog.dart';
 import 'icons.dart';
 import 'store.dart';
+import 'text.dart';
 import 'theme.dart';
 
 const double _inputVerticalPadding = 8;
@@ -394,20 +395,36 @@ class _TopicInput extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final zulipLocalizations = ZulipLocalizations.of(context);
-    ColorScheme colorScheme = Theme.of(context).colorScheme;
+    final designVariables = DesignVariables.of(context);
+    const textFieldHeight = 42;
+    TextStyle topicTextStyle = TextStyle(
+      fontSize: 22,
+      height: textFieldHeight / 22,
+      color: designVariables.textInput,
+    ).merge(weightVariableTextStyle(context, wght: 600));
 
     return TopicAutocomplete(
       streamId: streamId,
       controller: controller,
       focusNode: focusNode,
       contentFocusNode: contentFocusNode,
-      fieldViewBuilder: (context) => TextField(
-        controller: controller,
-        focusNode: focusNode,
-        textInputAction: TextInputAction.next,
-        style: TextStyle(color: colorScheme.onSurface),
-        decoration: InputDecoration(hintText: zulipLocalizations.composeBoxTopicHintText),
-      ));
+      fieldViewBuilder: (context) => Stack(
+        children: [
+          TextField(
+            controller: controller,
+            focusNode: focusNode,
+            textInputAction: TextInputAction.next,
+            style: topicTextStyle,
+            decoration: InputDecoration(
+              hintText: zulipLocalizations.composeBoxTopicHintText,
+              hintStyle: topicTextStyle.copyWith(
+                color: designVariables.textInput.withValues(alpha: 0.5)))),
+          Positioned(bottom: 0, left: 0, right: 0,
+            child: Container(height: 1, decoration: BoxDecoration(
+              border: Border(
+                bottom: BorderSide(width: 1,
+                  color: designVariables.foreground.withValues(alpha: 0.2)))))),
+        ]));
   }
 }
 

lib/widgets/theme.dart

@@ -117,6 +117,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       mainBackground: const Color(0xfff0f0f0),
       title: const Color(0xff1a1a1a),
       bgComposeBox: const Color(0xffffffff),
+      textInput: const Color(0xff000000),
       foreground: const Color(0xff000000),
       channelColorSwatches: ChannelColorSwatches.light,
       atMentionMarker: const HSLColor.fromAHSL(0.5, 0, 0, 0.2).toColor(),
@@ -148,6 +149,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       mainBackground: const Color(0xff1d1d1d),
       title: const Color(0xffffffff),
       bgComposeBox: const Color(0xff0f0f0f),
+      textInput: const Color(0xffffffff).withValues(alpha: 0.9),
       foreground: const Color(0xffffffff),
       channelColorSwatches: ChannelColorSwatches.dark,
       // TODO(design-dark) need proper dark-theme color (this is ad hoc)
@@ -185,6 +187,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     required this.mainBackground,
     required this.title,
     required this.bgComposeBox,
+    required this.textInput,
     required this.foreground,
     required this.channelColorSwatches,
     required this.atMentionMarker,
@@ -224,6 +227,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
   final Color mainBackground;
   final Color title;
   final Color bgComposeBox;
+  final Color textInput;
   final Color foreground;
 
   // Not exactly from the Figma design, but from Vlad anyway.
@@ -258,6 +262,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
     Color? mainBackground,
     Color? title,
     Color? bgComposeBox,
+    Color? textInput,
     Color? foreground,
     ChannelColorSwatches? channelColorSwatches,
     Color? atMentionMarker,
@@ -287,6 +292,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       mainBackground: mainBackground ?? this.mainBackground,
       title: title ?? this.title,
       bgComposeBox: bgComposeBox ?? this.bgComposeBox,
+      textInput: textInput ?? this.textInput,
       foreground: foreground ?? this.foreground,
       channelColorSwatches: channelColorSwatches ?? this.channelColorSwatches,
       atMentionMarker: atMentionMarker ?? this.atMentionMarker,
@@ -323,6 +329,7 @@ class DesignVariables extends ThemeExtension<DesignVariables> {
       mainBackground: Color.lerp(mainBackground, other.mainBackground, t)!,
       title: Color.lerp(title, other.title, t)!,
       bgComposeBox: Color.lerp(bgComposeBox, other.bgComposeBox, t)!,
+      textInput: Color.lerp(textInput, other.textInput, t)!,
       foreground: Color.lerp(foreground, other.foreground, t)!,
       channelColorSwatches: ChannelColorSwatches.lerp(channelColorSwatches, other.channelColorSwatches, t),
       atMentionMarker: Color.lerp(atMentionMarker, other.atMentionMarker, t)!,