text: Use font-family constants 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:

- zulip#294 Use "Source Sans 3" font for most UI text
- zulip#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: zulip#294
Fixes: zulip#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,6 +1,100 @@
 import 'dart:io';
 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: defaultFontFamilyFallback),
+      white: typography.white.apply(
+        fontFamily: kDefaultFontFamily,
+        fontFamilyFallback: defaultFontFamilyFallback),
+    );
+}
+
+/// 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 the [TextStyle]s found on the input [TextTheme]
+/// (such as [TextTheme.bodyMedium]),
+/// and uses [weightVariableTextStyle] to adjust the [TextStyle].
+/// Fields that are null in the input [TextTheme] remain null in the output.
+///
+/// For each input [TextStyle], the `wght` value passed
+/// to [weightVariableTextStyle] is based on the input's [TextStyle.fontWeight].
+/// A null [TextStyle.fontWeight] is interpreted as the normal font weight.
+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),
+  );
+}
 
 /// The [TextStyle.fontFamily] to use in most of the app.
 ///
@@ -133,3 +227,12 @@ FontWeight clampVariableFontWeight(double wght) {
     }
   }
 }
+
+/// 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

@@ -7,6 +7,49 @@ import 'package:zulip/widgets/text.dart';
 import '../flutter_checks.dart';
 
 void main() {
+  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
+
   group('weightVariableTextStyle', () {
     Future<void> testWeights(
       String description, {