content [nfc]: Put plain-paragraph text style in a ThemeExtension

See dartdoc for rationale.

Author: chrisbobbe

lib/widgets/content.dart

@@ -20,18 +20,67 @@ import 'message_list.dart';
 import 'store.dart';
 import 'text.dart';
 
+/// A central place for styles for Zulip content (rendered Zulip Markdown).
+///
+/// These styles will animate on theme changes (with help from [lerp]),
+/// so styles that differ between light and dark theme belong here.
+///
+/// Styles also belong here if we want to centralize computing them,
+/// for performance. (The message list is particularly performance-sensitive.)
+///
+/// Content elements are assumed to be painted on a theme-appropriate
+/// background. For what this is in the message list, see
+/// widgets/message_list.dart.
+class ContentTheme extends ThemeExtension<ContentTheme> {
+  ContentTheme() :
+    textStylePlainParagraph = TextStyle(
+      color: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
+      fontSize: kBaseFontSize,
+      height: (22 / kBaseFontSize),
+    );
+
+  ContentTheme._({
+    required this.textStylePlainParagraph,
+  });
+
+  /// The [ContentTheme] from the context's active theme.
+  ///
+  /// The [ThemeData] must include [ContentTheme] in [ThemeData.extensions].
+  static ContentTheme of(BuildContext context) {
+    final theme = Theme.of(context);
+    final extension = theme.extension<ContentTheme>();
+    assert(extension != null);
+    return extension!;
+  }
+
+  /// The [TextStyle] we use for plain, unstyled paragraphs.
+  ///
+  /// Also the base style that all other text content should inherit from.
+  final TextStyle textStylePlainParagraph;
+
+  @override
+  ContentTheme copyWith({
+    TextStyle? textStylePlainParagraph,
+  }) {
+    return ContentTheme._(
+      textStylePlainParagraph: textStylePlainParagraph ?? this.textStylePlainParagraph,
+    );
+  }
+
+  @override
+  ContentTheme lerp(ContentTheme? other, double t) {
+    if (identical(this, other)) {
+      return this;
+    }
+    return ContentTheme._(
+      textStylePlainParagraph: TextStyle.lerp(textStylePlainParagraph, other?.textStylePlainParagraph, t)!,
+    );
+  }
+}
+
 /// The font size for message content in a plain unstyled paragraph.
 const double kBaseFontSize = 17;
 
-/// The [TextStyle] we use for plain, unstyled paragraphs.
-///
-/// Also the base style that all other text content should inherit from.
-final plainParagraphContentTextStyle = TextStyle(
-  color: const HSLColor.fromAHSL(1, 0, 0, 0.15).toColor(),
-  fontSize: kBaseFontSize,
-  height: (22 / kBaseFontSize),
-);
-
 /// The entire content of a message, aka its body.
 ///
 /// This does not include metadata like the sender's name and avatar, the time,
@@ -46,7 +95,7 @@ class MessageContent extends StatelessWidget {
   Widget build(BuildContext context) {
     return InheritedMessage(message: message,
       child: DefaultTextStyle.merge(
-        style: plainParagraphContentTextStyle,
+        style: ContentTheme.of(context).textStylePlainParagraph,
         child: BlockContentList(nodes: content.nodes)));
   }
 }

lib/widgets/profile.dart

@@ -218,7 +218,7 @@ class _LinkWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     final linkNode = LinkNode(url: url, nodes: [TextNode(text)]);
     final paragraph = DefaultTextStyle.merge(
-      style: plainParagraphContentTextStyle,
+      style: ContentTheme.of(context).textStylePlainParagraph,
       child: Paragraph(node: ParagraphNode(nodes: [linkNode], links: [linkNode])));
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 8),

lib/widgets/theme.dart

@@ -1,10 +1,12 @@
 import 'package:flutter/material.dart';
 
+import 'content.dart';
 import 'text.dart';
 
 ThemeData zulipThemeData(BuildContext context) {
   return ThemeData(
     typography: zulipTypography(context),
+    extensions: [ContentTheme()],
     appBarTheme: const AppBarTheme(
       // Set these two fields to prevent a color change in [AppBar]s when
       // there is something scrolled under it. If an app bar hasn't been

test/widgets/action_sheet_test.dart

@@ -59,6 +59,7 @@ Future<void> setupToMessageActionSheet(WidgetTester tester, {
 
   await tester.pumpWidget(
     MaterialApp(
+      theme: ThemeData(extensions: [ContentTheme()]),
       localizationsDelegates: ZulipLocalizations.localizationsDelegates,
       supportedLocales: ZulipLocalizations.supportedLocales,
       home: GlobalStoreWidget(

test/widgets/autocomplete_test.dart

@@ -7,6 +7,7 @@ import 'package:zulip/api/route/messages.dart';
 import 'package:zulip/model/compose.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
+import 'package:zulip/widgets/content.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/store.dart';
 
@@ -50,6 +51,7 @@ Future<Finder> setupToComposeInput(WidgetTester tester, {
 
   await tester.pumpWidget(
     MaterialApp(
+      theme: ThemeData(extensions: [ContentTheme()]),
       localizationsDelegates: ZulipLocalizations.localizationsDelegates,
       supportedLocales: ZulipLocalizations.supportedLocales,
       home: GlobalStoreWidget(

test/widgets/content_test.dart

@@ -93,9 +93,10 @@ void main() {
   TestZulipBinding.ensureInitialized();
 
   Widget plainContent(String html) {
-    return DefaultTextStyle.merge(
-      style: plainParagraphContentTextStyle,
-      child: BlockContentList(nodes: parseContent(html).nodes));
+    return Builder(builder: (context) =>
+      DefaultTextStyle.merge(
+        style: ContentTheme.of(context).textStylePlainParagraph,
+        child: BlockContentList(nodes: parseContent(html).nodes)));
   }
 
   Widget messageContent(String html) {
@@ -125,7 +126,10 @@ void main() {
     await tester.pumpWidget(
       Builder(builder: (context) =>
         MaterialApp(
-          theme: ThemeData(typography: zulipTypography(context)),
+          theme: ThemeData(
+            typography: zulipTypography(context),
+            extensions: [ContentTheme()],
+          ),
           localizationsDelegates: ZulipLocalizations.localizationsDelegates,
           supportedLocales: ZulipLocalizations.supportedLocales,
           navigatorObservers: navObservers,
@@ -540,7 +544,7 @@ void main() {
     }, variant: const TargetPlatformVariant({TargetPlatform.android, TargetPlatform.iOS}));
 
     testWidgets('multiple links in paragraph', (tester) async {
-      final fontSize = plainParagraphContentTextStyle.fontSize!;
+      const fontSize = kBaseFontSize;
 
       await prepare(tester,
         '<p><a href="https://a/">foo</a> bar <a href="https://b/">baz</a></p>');
@@ -568,7 +572,7 @@ void main() {
     });
 
     testWidgets('link containing other spans', (tester) async {
-      final fontSize = plainParagraphContentTextStyle.fontSize!;
+      const fontSize = kBaseFontSize;
 
       await prepare(tester,
         '<p><a href="https://a/">two <strong><em><code>words</code></em></strong></a></p>');

test/widgets/message_list_test.dart

@@ -68,6 +68,7 @@ void main() {
 
     await tester.pumpWidget(
       MaterialApp(
+        theme: ThemeData(extensions: [ContentTheme()]),
         localizationsDelegates: ZulipLocalizations.localizationsDelegates,
         supportedLocales: ZulipLocalizations.supportedLocales,
         home: GlobalStoreWidget(

test/widgets/profile_test.dart

@@ -43,6 +43,7 @@ Future<void> setupPage(WidgetTester tester, {
   await tester.pumpWidget(
     GlobalStoreWidget(
       child: MaterialApp(
+        theme: ThemeData(extensions: [ContentTheme()]),
         navigatorObservers: navigatorObserver != null ? [navigatorObserver] : [],
         localizationsDelegates: ZulipLocalizations.localizationsDelegates,
         supportedLocales: ZulipLocalizations.supportedLocales,