ui: Set letter spacing to 1% in buttons

lib/notifications/display.dart

@@ -16,6 +16,7 @@ import '../widgets/app.dart';
 import '../widgets/message_list.dart';
 import '../widgets/page.dart';
 import '../widgets/store.dart';
+import '../widgets/theme.dart';
 
 /// Service for configuring our Android "notification channel".
 class NotificationChannelManager {

lib/widgets/app.dart

@@ -15,7 +15,7 @@ import 'page.dart';
 import 'recent_dm_conversations.dart';
 import 'store.dart';
 import 'subscription_list.dart';
-import 'text.dart';
+import 'theme.dart';
 
 class ZulipApp extends StatefulWidget {
   const ZulipApp({super.key, this.navigatorObservers});
@@ -109,34 +109,7 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
 
   @override
   Widget build(BuildContext context) {
-    final theme = ThemeData(
-      typography: zulipTypography(context),
-      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
-        // given a backgroundColor directly or by theme, it uses
-        // ColorScheme.surfaceContainer for the scrolled-under state and
-        // ColorScheme.surface otherwise, and those are different colors.
-        scrolledUnderElevation: 0,
-        backgroundColor: Color(0xfff5f5f5),
-
-        shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
-      ),
-      // This applies Material 3's color system to produce a palette of
-      // appropriately matching and contrasting colors for use in a UI.
-      // The Zulip brand color is a starting point, but doesn't end up as
-      // one that's directly used.  (After all, we didn't design it for that
-      // purpose; we designed a logo.)  See docs:
-      //   https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
-      // Or try this tool to see the whole palette:
-      //   https://m3.material.io/theme-builder#/custom
-      colorScheme: ColorScheme.fromSeed(
-        seedColor: kZulipBrandColor,
-      ),
-      scaffoldBackgroundColor: const Color(0xfff6f6f6),
-      tooltipTheme: const TooltipThemeData(preferBelow: false),
-    );
-
+    final themeData = zulipThemeData(context);
     return GlobalStoreWidget(
       child: Builder(builder: (context) {
         final globalStore = GlobalStoreWidget.of(context);
@@ -146,7 +119,7 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
           title: 'Zulip',
           localizationsDelegates: ZulipLocalizations.localizationsDelegates,
           supportedLocales: ZulipLocalizations.supportedLocales,
-          theme: theme,
+          theme: themeData,
 
           navigatorKey: ZulipApp.navigatorKey,
           navigatorObservers: widget.navigatorObservers ?? const [],
@@ -181,12 +154,6 @@ class _ZulipAppState extends State<ZulipApp> with WidgetsBindingObserver {
   }
 }
 
-/// The Zulip "brand color", a purplish blue.
-///
-/// This is chosen as the sRGB midpoint of the Zulip logo's gradient.
-// As computed by Anders: https://github.com/zulip/zulip-mobile/pull/4467
-const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);
-
 class ChooseAccountPage extends StatelessWidget {
   const ChooseAccountPage({super.key});
 

lib/widgets/emoji_reaction.dart

@@ -153,6 +153,7 @@ class ReactionChip extends StatelessWidget {
                 //   which we learn about especially late).
                 final maxLabelWidth = (maxRowWidth - 6) * 0.75; // 6 is padding
 
+                final labelScaler = _labelTextScalerClamped(context);
                 return Row(
                   mainAxisSize: MainAxisSize.min,
                   crossAxisAlignment: CrossAxisAlignment.center,
@@ -168,9 +169,13 @@ class ReactionChip extends StatelessWidget {
                         constraints: BoxConstraints(maxWidth: maxLabelWidth),
                         child: Text(
                           textWidthBasis: TextWidthBasis.longestLine,
-                          textScaler: _labelTextScalerClamped(context),
+                          textScaler: labelScaler,
                           style: TextStyle(
                             fontSize: (14 * 0.90),
+                            letterSpacing: proportionalLetterSpacing(context,
+                              kButtonTextLetterSpacingProportion,
+                              baseFontSize: (14 * 0.90),
+                              textScaler: labelScaler),
                             height: 13 / (14 * 0.90),
                             color: labelColor,
                           ).merge(weightVariableTextStyle(context,

lib/widgets/message_list.dart

@@ -484,8 +484,10 @@ class MarkAsReadWidget extends StatelessWidget {
                   // [zulipTypography]…
                   Theme.of(context).textTheme.labelLarge!
                   // …then clobber some attributes to follow Figma:
-                  .merge(const TextStyle(
+                  .merge(TextStyle(
                     fontSize: 18,
+                    letterSpacing: proportionalLetterSpacing(context,
+                      kButtonTextLetterSpacingProportion, baseFontSize: 18),
                     height: (23 / 18))
                   .merge(weightVariableTextStyle(context, wght: 400))),
                 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),

lib/widgets/text.dart

@@ -40,6 +40,14 @@ Typography zulipTypography(BuildContext context) {
     result = _convertTextTheme(result, (maybeInputStyle, _) =>
       maybeInputStyle?.merge(const TextStyle(letterSpacing: 0)));
 
+    result = result.copyWith(
+      labelLarge: result.labelLarge!.copyWith(
+        fontSize: 14.0, // (should be unchanged; restated here for explicitness)
+        letterSpacing: proportionalLetterSpacing(context,
+          kButtonTextLetterSpacingProportion, baseFontSize: 14.0),
+      ),
+    );
+
     return result;
   }
 
@@ -167,6 +175,8 @@ final TextStyle kMonospaceTextStyle = TextStyle(
   inherit: true,
 );
 
+const kButtonTextLetterSpacingProportion = 0.01;
+
 /// A mergeable [TextStyle] to use when the preferred font has a "wght" axis.
 ///
 /// Some variable fonts can be controlled on a "wght" axis.

lib/widgets/theme.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+import 'text.dart';
+
+ThemeData zulipThemeData(BuildContext context) {
+  return ThemeData(
+    typography: zulipTypography(context),
+    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
+      // given a backgroundColor directly or by theme, it uses
+      // ColorScheme.surfaceContainer for the scrolled-under state and
+      // ColorScheme.surface otherwise, and those are different colors.
+      scrolledUnderElevation: 0,
+      backgroundColor: Color(0xfff5f5f5),
+
+      shape: Border(bottom: BorderSide(color: Color(0xffcccccc))),
+    ),
+    // This applies Material 3's color system to produce a palette of
+    // appropriately matching and contrasting colors for use in a UI.
+    // The Zulip brand color is a starting point, but doesn't end up as
+    // one that's directly used.  (After all, we didn't design it for that
+    // purpose; we designed a logo.)  See docs:
+    //   https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html
+    // Or try this tool to see the whole palette:
+    //   https://m3.material.io/theme-builder#/custom
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: kZulipBrandColor,
+    ),
+    scaffoldBackgroundColor: const Color(0xfff6f6f6),
+    tooltipTheme: const TooltipThemeData(preferBelow: false),
+  );
+}
+
+/// The Zulip "brand color", a purplish blue.
+///
+/// This is chosen as the sRGB midpoint of the Zulip logo's gradient.
+// As computed by Anders: https://github.com/zulip/zulip-mobile/pull/4467
+const kZulipBrandColor = Color.fromRGBO(0x64, 0x92, 0xfe, 1);

test/flutter_checks.dart

@@ -65,6 +65,7 @@ extension TextFieldChecks on Subject<TextField> {
 
 extension TextStyleChecks on Subject<TextStyle> {
   Subject<bool> get inherit => has((t) => t.inherit, 'inherit');
+  Subject<double?> get fontSize => has((t) => t.fontSize, 'fontSize');
   Subject<FontWeight?> get fontWeight => has((t) => t.fontWeight, 'fontWeight');
   Subject<double?> get letterSpacing => has((t) => t.letterSpacing, 'letterSpacing');
   Subject<List<FontVariation>?> get fontVariations => has((t) => t.fontVariations, 'fontVariations');

test/notifications/display_test.dart

@@ -18,6 +18,7 @@ import 'package:zulip/widgets/app.dart';
 import 'package:zulip/widgets/inbox.dart';
 import 'package:zulip/widgets/message_list.dart';
 import 'package:zulip/widgets/page.dart';
+import 'package:zulip/widgets/theme.dart';
 
 import '../fake_async.dart';
 import '../model/binding.dart';

test/widgets/text_test.dart

@@ -54,11 +54,14 @@ void main() {
       });
     }
 
-    testWidgets('zero letter spacing', (tester) async {
+    testWidgets('letter spacing', (tester) async {
       check(await getZulipTypography(tester, platformRequestsBold: false))
         ..englishLike.bodyMedium.isNotNull().letterSpacing.equals(0)
+        ..englishLike.labelLarge.isNotNull().letterSpacing.equals(0.14)
         ..dense.bodyMedium.isNotNull().letterSpacing.equals(0)
-        ..tall.bodyMedium.isNotNull().letterSpacing.equals(0);
+        ..dense.labelLarge.isNotNull().letterSpacing.equals(0.14)
+        ..tall.bodyMedium.isNotNull().letterSpacing.equals(0)
+        ..tall.labelLarge.isNotNull().letterSpacing.equals(0.14);
     });
 
     test('Typography has the assumed fields', () {

test/widgets/theme_test.dart

@@ -0,0 +1,71 @@
+import 'package:checks/checks.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:zulip/widgets/text.dart';
+import 'package:zulip/widgets/theme.dart';
+
+import '../flutter_checks.dart';
+
+void main() {
+  group('button text size and letter spacing', () {
+    const buttonText = 'Zulip';
+
+    Future<void> doCheck(
+      String description, {
+      required Widget button,
+      double? ambientTextScaleFactor,
+    }) async {
+      testWidgets(description, (WidgetTester tester) async {
+        if (ambientTextScaleFactor != null) {
+          tester.platformDispatcher.textScaleFactorTestValue = ambientTextScaleFactor;
+          addTearDown(tester.platformDispatcher.clearTextScaleFactorTestValue);
+        }
+        late final double expectedFontSize;
+        late final double expectedLetterSpacing;
+        await tester.pumpWidget(
+          Builder(builder: (context) => MaterialApp(
+            theme: zulipThemeData(context),
+            home: Builder(builder: (context) {
+              expectedFontSize = Theme.of(context).textTheme.labelLarge!.fontSize!;
+              expectedLetterSpacing = proportionalLetterSpacing(context,
+                0.01, baseFontSize: expectedFontSize);
+              return button;
+            }))));
+
+        final text = tester.renderObject<RenderParagraph>(find.text(buttonText)).text;
+        check(text.style!)
+          ..fontSize.equals(expectedFontSize)
+          ..letterSpacing.equals(expectedLetterSpacing);
+      });
+    }
+
+    doCheck('with device text size adjusted',
+      ambientTextScaleFactor: 2.0,
+      button: ElevatedButton(onPressed: () {}, child: const Text(buttonText)));
+
+    doCheck('ElevatedButton',
+      button: ElevatedButton(onPressed: () {}, child: const Text(buttonText)));
+
+    doCheck('FilledButton',
+      button: FilledButton(onPressed: () {}, child: const Text(buttonText)));
+
+    // IconButton can't have text; skip
+
+    doCheck('MenuItemButton',
+      button: MenuItemButton(onPressed: () {}, child: const Text(buttonText)));
+
+    doCheck('SubmenuButton',
+      button: const SubmenuButton(menuChildren: [], child: Text(buttonText)));
+
+    doCheck('OutlinedButton',
+      button: OutlinedButton(onPressed: () {}, child: const Text(buttonText)));
+
+    doCheck('SegmentedButton',
+      button: SegmentedButton(selected: const {1},
+        segments: const [ButtonSegment(value: 1, label: Text(buttonText))]));
+
+    doCheck('TextButton',
+      button: TextButton(onPressed: () {}, child: const Text(buttonText)));
+  });
+}