text: Use kDefaultFontFamily{,Fallback} for text built on Typography styles

With plumbing to make kDefaultFamily work, since it's a
variable-weight font.

As it happens, most -- perhaps all -- of the app's text is built on
Typography styles. See the next commit for some thoughts on that.
Since that's the case, I'll mark this commit as fixing these issues:

- #294 "Use "Source Sans 3" font for most UI text"
- #438 "Consistently use "Noto Color Emoji" for emojis on Android".

If there's some corner of the app where the two fonts aren't getting
applied, we'll eventually find it, and apply kDefaultFontFamily and
kDefaultFontFamilyFallback according to their doc comments, to fix.

Fixes: #294
Fixes: #438

Author: chrisbobbe

lib/widgets/app.dart

@@ -15,6 +15,7 @@ import 'page.dart';
 import 'recent_dm_conversations.dart';
 import 'store.dart';
 import 'subscription_list.dart';
+import 'text.dart';
 
 class ZulipApp extends StatelessWidget {
   const ZulipApp({super.key, this.navigatorObservers});
@@ -81,6 +82,7 @@ class ZulipApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = ThemeData(
+      typography: zulipTypography(context),
       appBarTheme: const AppBarTheme(
         // This prevents an elevation change in [AppBar]s so they stop turning
         // darker if there is something scrolled underneath it. See docs:

lib/widgets/text.dart

@@ -1,7 +1,44 @@
 import 'dart:io';
 import 'dart:ui';
 import 'package:flutter/foundation.dart';
-import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+
+/// An app-wide [Typography] for Zulip, customized from the Material default.
+///
+/// Include this in the app-wide [MaterialApp.theme].
+///
+/// We expect these text styles to be the basis of all the styles chosen by the
+/// Material library's widgets, such as the default styling of
+/// an [AppBar]'s title, of an [ElevatedButton]'s label, and so on.
+///
+/// In all the comprised [TextStyle]s, this sets:
+///
+/// - [TextStyle.fontFamily] to [kDefaultFontFamily], and
+/// - [TextStyle.fontFamilyFallback] to [kDefaultFontFamilyFallback].
+///
+/// Since [kDefaultFontFamily] is a variable-weight font,
+/// each [TextStyle] needs some processing, which this provides,
+/// in order to correctly specify the font weight.
+///
+/// When building on top of these [TextStyles], callers that wish to specify
+/// a different font weight are still responsible for reprocessing the style
+/// with [weightVariableTextStyle] before passing it to a [Text].
+/// (Widgets in the Material library won't do this; they aren't yet equipped
+/// to set font weights on variable-weight fonts. If this causes visible bugs,
+/// we should investigate and fix, but they should become less likely as
+/// we transition from Material's widgets to our own bespoke ones.)
+Typography zulipTypography(BuildContext context) {
+  final typography = Theme.of(context).typography;
+  return weightVariableTypography(context, typography)
+    .copyWith(
+      black: typography.black.apply(
+        fontFamily: kDefaultFontFamily,
+        fontFamilyFallback: kDefaultFontFamilyFallback),
+      white: typography.white.apply(
+        fontFamily: kDefaultFontFamily,
+        fontFamilyFallback: kDefaultFontFamilyFallback),
+    );
+}
 
 /// The [TextStyle.fontFamily] to use in most of the app.
 ///
@@ -134,3 +171,75 @@ FontWeight clampVariableFontWeight(double wght) {
     }
   }
 }
+
+/// Convert an input [Typography] to one that works with "wght"-variable fonts.
+///
+/// Processes the "geometry" [TextTheme] fields
+/// ([Typography.dense], [Typography.englishLike], and [Typography.tall])
+/// with [weightVariableTextTheme], passing along the [BuildContext].
+Typography weightVariableTypography(BuildContext context, Typography input) =>
+  input.copyWith(
+    dense:       weightVariableTextTheme(context, input.dense),
+    englishLike: weightVariableTextTheme(context, input.englishLike),
+    tall:        weightVariableTextTheme(context, input.tall),
+  );
+
+/// Convert a geometry [TextTheme] to one that works with "wght"-variable fonts.
+///
+/// A "geometry [TextTheme]" is a [TextTheme] that's meant to specify
+/// font weight and other parameters about shape, size, distance, etc.
+/// See [Typography].
+///
+/// This looks at each of `input`'s fields, such as [TextTheme.bodyMedium], and:
+///
+/// If the field is non-null, calls [TextStyle.merge], passing the result of
+/// [weightVariableTextStyle] called with:
+/// - this function's [BuildContext] param, and
+/// - for `wght`:
+///   - if present, the field's [TextStyle.fontWeight]
+///     (via [wghtFromFontWeight]), else
+///   - null.
+///
+/// If the field is null, gives null.
+///
+/// This assumes that if a non-null field omits [TextStyle.fontWeight], then
+/// the normal font weight is implied, and it will be expressed in the output.
+TextTheme weightVariableTextTheme(BuildContext context, TextTheme input) {
+  TextStyle? convert(TextStyle? maybeInputStyle) {
+    if (maybeInputStyle == null) {
+      return null;
+    }
+    final maybeInputFontWeight = maybeInputStyle.fontWeight;
+    return maybeInputStyle.merge(weightVariableTextStyle(context,
+      wght: maybeInputFontWeight != null
+        ? wghtFromFontWeight(maybeInputFontWeight)
+        : null));
+  }
+
+  return TextTheme(
+    displayLarge:   convert(input.displayLarge),
+    displayMedium:  convert(input.displayMedium),
+    displaySmall:   convert(input.displaySmall),
+    headlineLarge:  convert(input.headlineLarge),
+    headlineMedium: convert(input.headlineMedium),
+    headlineSmall:  convert(input.headlineSmall),
+    titleLarge:     convert(input.titleLarge),
+    titleMedium:    convert(input.titleMedium),
+    titleSmall:     convert(input.titleSmall),
+    bodyLarge:      convert(input.bodyLarge),
+    bodyMedium:     convert(input.bodyMedium),
+    bodySmall:      convert(input.bodySmall),
+    labelLarge:     convert(input.labelLarge),
+    labelMedium:    convert(input.labelMedium),
+    labelSmall:     convert(input.labelSmall),
+  );
+}
+
+/// A good guess at a font's "wght" value to match a given [FontWeight].
+///
+/// Returns [FontWeight.value] as a double.
+///
+/// This might not be exactly where the font designer would land on their
+/// font's own custom-defined "wght" axis. But it's a great guess,
+/// at least without knowledge of the particular font.
+double wghtFromFontWeight(FontWeight fontWeight) => fontWeight.value.toDouble();

test/widgets/text_test.dart

@@ -144,4 +144,47 @@ void main() {
     check(clampVariableFontWeight(999))  .equals(FontWeight.w900);
     check(clampVariableFontWeight(1000)) .equals(FontWeight.w900);
   });
+
+  test('weightVariableTypography: ScriptCategory has the assumed values', () {
+    // If Flutter adds a new one, check [Typography] for a corresponding
+    // "geometry [TextStyle]" and update weightVariableTypography to process it.
+    check(ScriptCategory.values).deepEquals(
+      [ScriptCategory.englishLike, ScriptCategory.dense, ScriptCategory.tall]);
+  });
+
+  // TODO exercise/check weightVariableTypography
+
+  test('weightVariableTextTheme: TextTheme has the assumed fields', () {
+    const family = '123';
+    const withFamily = TextStyle(fontFamily: family);
+
+    const base = Typography.englishLike2021;
+
+    // Keep a lookout for new [TextTheme] fields that didn't exist at the time
+    // of writing. If there are new fields, we should update
+    // [weightVariableTextTheme] so it handles them.
+    check(
+      base.merge(const TextTheme(
+        displayLarge:   withFamily,
+        displayMedium:  withFamily,
+        displaySmall:   withFamily,
+        headlineLarge:  withFamily,
+        headlineMedium: withFamily,
+        headlineSmall:  withFamily,
+        titleLarge:     withFamily,
+        titleMedium:    withFamily,
+        titleSmall:     withFamily,
+        bodyLarge:      withFamily,
+        bodyMedium:     withFamily,
+        bodySmall:      withFamily,
+        labelLarge:     withFamily,
+        labelMedium:    withFamily,
+        labelSmall:     withFamily,
+      ))
+    ).equals(
+      base.apply(fontFamily: family),
+    );
+  });
+
+  // TODO exercise/check weightVariableTextTheme
 }