content/msglist: Update some elements closer to new, 2023+ design, to prepare for light/dark

lib/widgets/content.dart

@@ -406,12 +406,10 @@ class CodeBlock extends StatelessWidget {
 
   final CodeBlockNode node;
 
-  static final _borderColor = const HSLColor.fromAHSL(0.15, 0, 0, 0).toColor();
-
   @override
   Widget build(BuildContext context) {
     return _CodeBlockContainer(
-      borderColor: _borderColor,
+      borderColor: Colors.transparent,
       child: Text.rich(_buildNodes(node.spans)));
   }
 
@@ -436,7 +434,7 @@ class _CodeBlockContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        color: Colors.white,
+        color: const HSLColor.fromAHSL(0.04, 0, 0, 0).toColor(),
         border: Border.all(
           width: 1,
           color: borderColor),
@@ -725,7 +723,6 @@ class _InlineContentBuilder {
     // TODO `code`: find equivalent of web's `unicode-bidi: embed; direction: ltr`
 
     return _buildNodes(
-      // Use a light gray background, instead of a border.
       style: widget.style
         .merge(_kInlineCodeStyle)
         .apply(fontSizeFactor: _kInlineCodeFontSizeFactor),
@@ -770,12 +767,11 @@ const _kInlineCodeFontSizeFactor = 0.825;
 // assuming the text gets the effect of [weightVariableTextStyle]
 // through inheritance, e.g., from a [DefaultTextStyle].
 final _kInlineCodeStyle = kMonospaceTextStyle
-  .merge(const TextStyle(backgroundColor: Color(0xffeeeeee)));
+  .merge(TextStyle(
+    backgroundColor: const HSLColor.fromAHSL(0.04, 0, 0, 0).toColor()));
 
 final _kCodeBlockStyle = kMonospaceTextStyle
-  .merge(const TextStyle(
-    backgroundColor: Color.fromRGBO(255, 255, 255, 1),
-    fontSize: 0.825 * kBaseFontSize))
+  .merge(const TextStyle(fontSize: 0.825 * kBaseFontSize))
   .merge(
     // TODO(a11y) pass a BuildContext, to handle platform request for bold text.
     //   To get one, the result of this whole computation (to the TextStyle
@@ -813,27 +809,26 @@ class UserMention extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      decoration: _kDecoration,
+      decoration: BoxDecoration(
+        // TODO(#646) different background between direct and wildcard mentions
+        color: const HSLColor.fromAHSL(0.2, 240, 0.7, 0.7).toColor(),
+        borderRadius: const BorderRadius.all(Radius.circular(3))),
       padding: const EdgeInsets.symmetric(horizontal: 0.2 * kBaseFontSize),
       child: InlineContent(
         // If an @-mention is inside a link, let the @-mention override it.
         recognizer: null,  // TODO make @-mentions tappable, for info on user
         // One hopes an @-mention can't contain an embedded link.
         // (The parser on creating a UserMentionNode has a TODO to check that.)
         linkRecognizers: null,
+
+        // TODO(#647) when self-user is non-silently mentioned, make bold, and:
+        // TODO(#646) when self-user is non-silently mentioned,
+        //   distinguish font color between direct and wildcard mentions
         style: surroundingTextStyle,
+
         nodes: node.nodes));
   }
 
-  static get _kDecoration => BoxDecoration(
-    gradient: const LinearGradient(
-      colors: [Color.fromRGBO(0, 0, 0, 0.1), Color.fromRGBO(0, 0, 0, 0)],
-      begin: Alignment.topCenter,
-      end: Alignment.bottomCenter),
-    border: Border.all(
-      color: const Color.fromRGBO(0xcc, 0xcc, 0xcc, 1), width: 1),
-    borderRadius: const BorderRadius.all(Radius.circular(3)));
-
 // This is a more literal translation of Zulip web's CSS.
 // But it turns out CSS `box-shadow` has a quirk we rely on there:
 // it doesn't apply under the element itself, even if the element's
@@ -920,7 +915,10 @@ class GlobalTime extends StatelessWidget {
           child: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
-              Icon(ZulipIcons.clock, size: surroundingFontSize),
+              Icon(
+                size: surroundingFontSize,
+                color: DefaultTextStyle.of(context).style.color!,
+                ZulipIcons.clock),
               // Ad-hoc spacing adjustment per feedback:
               //   https://chat.zulip.org/#narrow/stream/101-design/topic/clock.20icons/near/1729345
               const SizedBox(width: 1),

lib/widgets/message_list.dart

@@ -267,9 +267,7 @@ class _MessageListState extends State<MessageList> with PerAccountStoreAwareStat
     if (!model!.fetched) return const Center(child: CircularProgressIndicator());
 
     return DefaultTextStyle.merge(
-      // TODO figure out text color -- web is supposedly hsl(0deg 0% 20%),
-      //   but seems much darker than that
-      style: const TextStyle(color: Color.fromRGBO(0, 0, 0, 1)),
+      style: TextStyle(color: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor()),
       // Pad the left and right insets, for small devices in landscape.
       child: SafeArea(
         // Don't let this be the place we pad the bottom inset. When there's

test/widgets/content_test.dart

@@ -614,6 +614,29 @@ void main() {
       tester.widget(find.textContaining(renderedTextRegexp));
     });
 
+    testWidgets('clock icon and text are the same color', (tester) async {
+      await tester.pumpWidget(MaterialApp(home: DefaultTextStyle(
+        style: const TextStyle(color: Colors.green),
+        child: BlockContentList(nodes:
+          parseContent('<p>$timeSpanHtml</p>').nodes),
+      )));
+
+      final icon = tester.widget<Icon>(
+        find.descendant(of: find.byType(GlobalTime),
+          matching: find.byIcon(ZulipIcons.clock)));
+
+      final textSpan = tester.renderObject<RenderParagraph>(
+        find.descendant(of: find.byType(GlobalTime),
+          matching: find.textContaining(renderedTextRegexp)
+      )).text;
+      final textColor = mergedStyleOfSubstring(textSpan, renderedTextRegexp)!.color;
+      check(textColor).isNotNull();
+
+      check(icon).color
+        ..equals(textColor!)
+        ..equals(Colors.green);
+    });
+
     testWidgets('maintains font-size ratio with surrounding text', (tester) async {
       Future<void> doCheck(double Function(GlobalTime widget) sizeFromWidget) async {
         await checkFontSizeRatio(tester,