Skip to content

text: Apply "Source Sans 3" and (on Android) "Noto Color Emoji" widely across the app #439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Feb 2, 2024
Merged

text: Apply "Source Sans 3" and (on Android) "Noto Color Emoji" widely across the app #439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
117670a
text [nfc]: Pull out kDefaultFontFamily constant
chrisbobbe Dec 6, 2023
51eaddd
text: On Android, render emojis in message content with Noto Color Emoji
chrisbobbe Dec 6, 2023
f47ce05
content [nfc]: Use kBaseFontSize in a place we were using literal value
chrisbobbe Dec 4, 2023
cdc2688
text: Use more efficient MediaQuery.boldTextOf in weightVariableTextS…
chrisbobbe Dec 5, 2023
806a3c3
text [nfc]: Take out helper constants kWght{Min,Max}
chrisbobbe Dec 4, 2023
bff2071
text test [nfc]: Reorder some lines to be like surrounding code
chrisbobbe Dec 4, 2023
139fc34
text [nfc]: Don't force any callers to specify wghtIfPlatformRequests…
chrisbobbe Dec 4, 2023
8567fdb
text [nfc]: In dev, add `debugLabel` to result of weightVariableTextS…
chrisbobbe Jan 9, 2024
16d925f
text: Use font-family constants for text built on Typography styles
chrisbobbe Dec 4, 2023
6784ef9
text [nfc]: Remove some now-redundant fontFamily{,Fallback} attributes
chrisbobbe Dec 5, 2023
97afdcd
content [nfc]: Make paragraph text style `const`
chrisbobbe Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/widgets/app.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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});
Expand Down Expand Up @@ -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:
Expand Down
13 changes: 6 additions & 7 deletions lib/widgets/content.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,10 @@ class Paragraph extends StatelessWidget {

final ParagraphNode node;

static TextStyle getTextStyle(BuildContext context) => const TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 14,
height: (17 / 14),
).merge(weightVariableTextStyle(context));
static const textStyle = TextStyle(
fontSize: kBaseFontSize,
height: (17 / kBaseFontSize),
);

@override
Widget build(BuildContext context) {
Expand All @@ -114,7 +113,7 @@ class Paragraph extends StatelessWidget {

final text = _buildBlockInlineContainer(
node: node,
style: getTextStyle(context),
style: textStyle,
);

// If the paragraph didn't actually have a `p` element in the HTML,
Expand Down Expand Up @@ -647,7 +646,7 @@ class UserMention extends StatelessWidget {
// One hopes an @-mention can't contain an embedded link.
// (The parser on creating a UserMentionNode has a TODO to check that.)
linkRecognizers: null,
style: Paragraph.getTextStyle(context),
style: Paragraph.textStyle,
nodes: node.nodes));
}

Expand Down
12 changes: 4 additions & 8 deletions lib/widgets/emoji_reaction.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,13 +173,11 @@ class ReactionChip extends StatelessWidget {
textWidthBasis: TextWidthBasis.longestLine,
textScaler: _labelTextScalerClamped(context),
style: TextStyle(
fontFamily: 'Source Sans 3',
fontSize: (14 * 0.90),
height: 13 / (14 * 0.90),
color: labelColor,
).merge(selfVoted
? weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)
: weightVariableTextStyle(context)),
).merge(weightVariableTextStyle(context,
wght: selfVoted ? 600 : null)),
label),
)),
]);
Expand Down Expand Up @@ -352,13 +350,11 @@ class _TextEmoji extends StatelessWidget {
textScaler: _textEmojiScalerClamped(context),
textWidthBasis: TextWidthBasis.longestLine,
style: TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 14 * 0.8,
height: 1, // to be denser when we have to wrap
color: selected ? _textColorSelected : _textColorUnselected,
).merge(selected
? weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)
: weightVariableTextStyle(context)),
).merge(weightVariableTextStyle(context,
wght: selected ? 600 : null)),
// Encourage line breaks before "_" (common in these), but try not
// to leave a colon alone on a line. See:
// <https://github.com/flutter/flutter/issues/61081#issuecomment-1103330522>
Expand Down
9 changes: 3 additions & 6 deletions lib/widgets/inbox.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,11 +238,10 @@ abstract class _HeaderItem extends StatelessWidget {
padding: const EdgeInsets.symmetric(vertical: 4),
child: Text(
style: const TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 17,
height: (20 / 17),
color: Color(0xFF222222),
).merge(weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)),
).merge(weightVariableTextStyle(context, wght: 600)),
maxLines: 1,
overflow: TextOverflow.ellipsis,
title))),
Expand Down Expand Up @@ -359,11 +358,10 @@ class _DmItem extends StatelessWidget {
padding: const EdgeInsets.symmetric(vertical: 4),
child: Text(
style: const TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 17,
height: (20 / 17),
color: Color(0xFF222222),
).merge(weightVariableTextStyle(context)),
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
title))),
Expand Down Expand Up @@ -485,11 +483,10 @@ class _TopicItem extends StatelessWidget {
padding: const EdgeInsets.symmetric(vertical: 4),
child: Text(
style: const TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 17,
height: (20 / 17),
color: Color(0xFF222222),
).merge(weightVariableTextStyle(context)),
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
topic))),
Expand Down
23 changes: 12 additions & 11 deletions lib/widgets/message_list.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,11 +449,15 @@ class MarkAsReadWidget extends StatelessWidget {
style: FilledButton.styleFrom(
backgroundColor: _UnreadMarker.color,
minimumSize: const Size.fromHeight(38),
textStyle: const TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 18,
height: (23 / 18),
).merge(weightVariableTextStyle(context)),
textStyle:
// Restate [FilledButton]'s default, which inherits from
// [zulipTypography]…
Theme.of(context).textTheme.labelLarge!
// …then clobber some attributes to follow Figma:
.merge(const TextStyle(
fontSize: 18,
height: (23 / 18))
.merge(weightVariableTextStyle(context, wght: 400))),
Comment on lines +452 to +460
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm interesting. I guess this will be a case to consider when thinking about how we ultimately want to arrange the data flow for the text styles.

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
),
onPressed: () => _handlePress(context),
Expand Down Expand Up @@ -631,11 +635,10 @@ class StreamMessageRecipientHeader extends StatelessWidget {
}
final textStyle = TextStyle(
color: contrastingColor,
fontFamily: 'Source Sans 3',
fontSize: 16,
letterSpacing: 0.02 * 16,
height: (18 / 16),
).merge(weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900));
).merge(weightVariableTextStyle(context, wght: 600));
Comment on lines -634 to +641
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to see these repetitive elements getting centralized!

I'd actually had the thought in the last couple of weeks that I should take a look at trying to deduplicate some of the recurring code around our text styles. This PR looks like great progress already in that direction.


final Widget streamWidget;
if (!showStream) {
Expand Down Expand Up @@ -742,11 +745,10 @@ class DmRecipientHeader extends StatelessWidget {
Expanded(
child: Text(title,
style: const TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 16,
letterSpacing: 0.02 * 16,
height: (18 / 16),
).merge(weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)),
).merge(weightVariableTextStyle(context, wght: 600)),
overflow: TextOverflow.ellipsis)),
RecipientHeaderDate(message: message,
color: _kDmRecipientHeaderDateColor),
Expand Down Expand Up @@ -801,13 +803,12 @@ class DateText extends StatelessWidget {
return Text(
style: TextStyle(
color: color,
fontFamily: 'Source Sans 3',
fontSize: fontSize,
height: height,
// This is equivalent to css `all-small-caps`, see:
// https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#all-small-caps
fontFeatures: const [FontFeature.enable('c2sc'), FontFeature.enable('smcp')],
).merge(weightVariableTextStyle(context)),
),
formatHeaderDate(
zulipLocalizations,
DateTime.fromMillisecondsSinceEpoch(timestamp * 1000),
Expand Down
4 changes: 1 addition & 3 deletions lib/widgets/recent_dm_conversations.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import 'icons.dart';
import 'message_list.dart';
import 'page.dart';
import 'store.dart';
import 'text.dart';
import 'unread_count_badge.dart';

class RecentDmConversationsPage extends StatefulWidget {
Expand Down Expand Up @@ -127,11 +126,10 @@ class RecentDmConversationsItem extends StatelessWidget {
padding: const EdgeInsets.symmetric(vertical: 4),
child: Text(
style: const TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 17,
height: (20 / 17),
color: Color(0xFF222222),
).merge(weightVariableTextStyle(context)),
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
title))),
Expand Down
12 changes: 4 additions & 8 deletions lib/widgets/subscription_list.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,9 @@ class _NoSubscriptionsItem extends StatelessWidget {
textAlign: TextAlign.center,
style: TextStyle(
color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
fontFamily: 'Source Sans 3',
fontSize: 18,
height: (20 / 18),
).merge(weightVariableTextStyle(context)))));
))));
}
}

Expand All @@ -148,11 +147,10 @@ class _SubscriptionListHeader extends StatelessWidget {
textAlign: TextAlign.center,
style: TextStyle(
color: const HSLColor.fromAHSL(1.0, 240, 0.1, 0.5).toColor(),
fontFamily: 'Source Sans 3',
fontSize: 14,
letterSpacing: 0.04 * 14,
height: (16 / 14),
).merge(weightVariableTextStyle(context)))),
))),
const SizedBox(width: 8),
Expanded(child: Divider(
color: const HSLColor.fromAHSL(0.2, 240, 0.1, 0.5).toColor())),
Expand Down Expand Up @@ -221,13 +219,11 @@ class SubscriptionItem extends StatelessWidget {
// https://github.com/zulip/zulip-flutter/pull/397#pullrequestreview-1742524205
child: Text(
style: const TextStyle(
fontFamily: 'Source Sans 3',
fontSize: 18,
height: (20 / 18),
color: Color(0xFF262626),
).merge(hasUnreads
? weightVariableTextStyle(context, wght: 600, wghtIfPlatformRequestsBold: 900)
: weightVariableTextStyle(context)),
).merge(weightVariableTextStyle(context,
wght: hasUnreads ? 600 : null)),
maxLines: 1,
overflow: TextOverflow.ellipsis,
subscription.name))),
Expand Down
Loading