Compound Fonts (#834)

* Use CompoundFonts in DesignKit (deprecate ElementFonts).

* Use compound fonts everywhere.

* Update Authentication snapshots.

* Update RoomMembersListScreen snapshots.

Delete unused snapshots.

* Fix tests.
This commit is contained in:
Doug
2023-04-25 16:42:06 +01:00
committed by GitHub
parent 8b36e0faa5
commit 5bb2ceedf4
100 changed files with 185 additions and 178 deletions
@@ -108,6 +108,7 @@ struct A11yIdentifiers {
let acceptChallenge = "session_verification-accept_challenge"
let declineChallenge = "session_verification-decline_challenge"
let emojiWrapper = "session_verification-emojis"
let verificationComplete = "session_verification-verification_complete"
let close = "session_verification-close"
}
@@ -26,13 +26,13 @@ enum FormRowAccessory: View {
switch self {
case .navigationLink:
Image(systemName: "chevron.forward")
.font(.element.subheadlineBold)
.font(.compound.bodyMD.bold())
.foregroundColor(.element.quaternaryContent)
case .progressView:
ProgressView()
case .selection(let isSelected):
Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(isSelected ? .element.primaryContent : .element.tertiaryContent)
}
}
@@ -95,7 +95,7 @@ struct FormActionButtonStyle: ButtonStyle {
Text(title)
.foregroundColor(.element.secondaryContent)
.font(.element.subheadline)
.font(.compound.bodyMD)
}
}
}
@@ -55,7 +55,7 @@ struct FormRowLabelStyle: LabelStyle {
.background(iconBackgroundColor)
.clipShape(RoundedRectangle(cornerRadius: 8))
configuration.title
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(titleColor)
}
}
@@ -21,7 +21,7 @@ struct FormSectionHeaderStyle: ViewModifier {
func body(content: Content) -> some View {
content
.foregroundColor(.element.secondaryContent)
.font(.element.caption1)
.font(.compound.bodyXS)
}
}
@@ -35,13 +35,13 @@ struct AvatarHeaderView<Footer: View>: View {
Text(name ?? id)
.foregroundColor(.element.primaryContent)
.font(.element.title1Bold)
.font(.compound.headingLGBold)
.multilineTextAlignment(.center)
if let subtitle {
Text(subtitle)
.foregroundColor(.element.secondaryContent)
.font(.element.body)
.font(.compound.bodyLG)
.multilineTextAlignment(.center)
}
@@ -32,12 +32,12 @@ struct UserProfileCell: View {
VStack(alignment: .leading, spacing: 4) {
Text(user.displayName ?? user.userID)
.font(.element.title3)
.font(.compound.headingSM)
.foregroundColor(.element.primaryContent)
if user.displayName != nil {
Text(user.userID)
.font(.element.subheadline)
.font(.compound.bodyMD)
.foregroundColor(.element.tertiaryContent)
}
@@ -35,7 +35,7 @@ struct UserIndicatorModalView: View {
Image(systemName: iconName)
}
Text(indicator.title)
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(.element.primaryContent)
}
}
@@ -25,7 +25,7 @@ struct UserIndicatorToastView: View {
Image(systemName: iconName)
}
Text(indicator.title)
.font(.element.footnote)
.font(.compound.bodySM)
.foregroundColor(.element.primaryContent)
}
.id(indicator.id)
@@ -60,14 +60,14 @@ struct AnalyticsPromptScreen: View {
.padding(.bottom, 24)
Text(L10n.screenAnalyticsPromptTitle(InfoPlistReader.main.bundleDisplayName))
.font(.element.title2Bold)
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
.padding(.bottom, 2)
.accessibilityIdentifier(A11yIdentifiers.analyticsPromptScreen.title)
Text(context.viewState.strings.optInContent)
.font(.element.body)
.font(.compound.bodyLG)
.multilineTextAlignment(.center)
.foregroundColor(.element.secondaryContent)
.tint(.element.links)
@@ -88,7 +88,7 @@ struct AnalyticsPromptScreen: View {
AnalyticsPromptScreenCheckmarkItem(string: context.viewState.strings.point3)
}
.fixedSize(horizontal: false, vertical: true)
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(.element.secondaryContent)
.frame(maxWidth: .infinity)
}
@@ -98,14 +98,14 @@ struct AnalyticsPromptScreen: View {
VStack {
Button { context.send(viewAction: .enable) } label: {
Text(L10n.actionEnable)
.font(.element.bodyBold)
.font(.compound.bodyLGSemibold)
}
.buttonStyle(.elementAction(.xLarge))
.accessibilityIdentifier(A11yIdentifiers.analyticsPromptScreen.enable)
Button { context.send(viewAction: .disable) } label: {
Text(L10n.actionNotNow)
.font(.element.bodyBold)
.font(.compound.bodyLGSemibold)
.padding(12)
}
.accessibilityIdentifier(A11yIdentifiers.analyticsPromptScreen.notNow)
@@ -54,7 +54,7 @@ struct LoginScreen: View {
/// The header containing a Welcome Back title.
var header: some View {
Text(L10n.screenLoginTitle)
.font(.element.title1Bold)
.font(.compound.headingLGBold)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
}
@@ -70,7 +70,7 @@ struct LoginScreen: View {
var loginForm: some View {
VStack(alignment: .leading, spacing: 0) {
Text(L10n.screenLoginFormHeader)
.font(.element.footnote)
.font(.compound.bodySM)
.foregroundColor(.element.primaryContent)
.padding(.horizontal, 16)
.padding(.bottom, 8)
@@ -31,14 +31,14 @@ struct LoginServerInfoSection: View {
var body: some View {
VStack(alignment: .leading, spacing: 8) {
Text(L10n.screenLoginServerHeader)
.font(.element.footnote)
.font(.compound.bodySM)
.foregroundColor(.element.primaryContent)
.padding(.horizontal, 16)
Button(action: editAction) {
HStack {
Text(address)
.font(.element.subheadlineBold)
.font(.compound.bodyMDSemibold)
.foregroundColor(.element.primaryContent)
.padding(.horizontal, 16)
.padding(.vertical)
@@ -46,6 +46,7 @@ struct LoginServerInfoSection: View {
Spacer()
Image(systemName: "chevron.right")
.font(.compound.bodyMD.bold())
.foregroundColor(.element.tertiaryContent)
.padding(.trailing, 16)
}
@@ -44,12 +44,12 @@ struct ServerSelectionScreen: View {
.padding(.bottom, 8)
Text(L10n.commonSelectYourServer)
.font(.element.title2Bold)
.font(.compound.headingMDBold)
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
Text(L10n.screenChangeServerSubtitle)
.font(.element.subheadline)
.font(.compound.bodyMD)
.multilineTextAlignment(.center)
.foregroundColor(.element.tertiaryContent)
}
@@ -55,20 +55,20 @@ struct SoftLogoutScreen: View {
var header: some View {
VStack(alignment: .leading, spacing: 16) {
Text(UntranslatedL10n.softLogoutSigninTitle)
.font(.element.title2Bold)
.font(.compound.headingMDBold)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.title)
Text(UntranslatedL10n.softLogoutSigninNotice(context.viewState.credentials.homeserverName, context.viewState.credentials.userDisplayName, context.viewState.credentials.userId))
.font(.element.body)
.font(.compound.bodyLG)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.message)
if context.viewState.showRecoverEncryptionKeysMessage {
Text(UntranslatedL10n.softLogoutSigninE2eWarningNotice)
.font(.element.body)
.font(.compound.bodyLG)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
}
@@ -88,7 +88,7 @@ struct SoftLogoutScreen: View {
Button { context.send(viewAction: .forgotPassword) } label: {
Text(UntranslatedL10n.softLogoutForgotPassword)
.font(.element.body)
.font(.compound.bodyLG)
}
.frame(maxWidth: .infinity, alignment: .trailing)
.padding(.bottom, 8)
@@ -124,13 +124,13 @@ struct SoftLogoutScreen: View {
var clearDataForm: some View {
VStack(alignment: .leading, spacing: 12) {
Text(UntranslatedL10n.softLogoutClearDataTitle)
.font(.element.title2Bold)
.font(.compound.headingMDBold)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearDataTitle)
Text(UntranslatedL10n.softLogoutClearDataNotice)
.font(.element.body)
.font(.compound.bodyLG)
.multilineTextAlignment(.leading)
.foregroundColor(.element.primaryContent)
.accessibilityIdentifier(A11yIdentifiers.softLogoutScreen.clearDataMessage)
@@ -33,7 +33,7 @@ struct EmojiPickerScreen: View {
context.send(viewAction: .emojiTapped(emoji: emoji))
} label: {
Text(emoji.value)
.font(.element.title1)
.font(.compound.headingLG)
}
}
}
@@ -22,7 +22,7 @@ struct EmojiPickerScreenHeaderView: View {
var body: some View {
HStack {
Text(title)
.font(.element.subheadline.bold())
.font(.compound.bodyMD.bold())
.foregroundColor(.element.primaryContent)
.frame(maxWidth: .infinity, alignment: .leading)
}
@@ -167,7 +167,7 @@ struct HomeScreen: View {
VStack(alignment: .leading, spacing: 4) {
HStack(spacing: 16) {
Text(L10n.sessionVerificationBannerTitle)
.font(.element.headline)
.font(.compound.bodyLGSemibold)
.foregroundColor(.element.systemPrimaryLabel)
Spacer()
@@ -181,7 +181,7 @@ struct HomeScreen: View {
}
}
Text(L10n.sessionVerificationBannerMessage)
.font(.element.subheadline)
.font(.compound.bodyMD)
.foregroundColor(.element.secondaryContent)
}
@@ -85,14 +85,14 @@ struct HomeScreenRoomCell: View {
var header: some View {
HStack(alignment: .top, spacing: 16) {
Text(room.name)
.font(.element.headline)
.font(.compound.bodyLGSemibold)
.foregroundColor(.element.primaryContent)
.lineLimit(1)
.frame(maxWidth: .infinity, alignment: .leading)
if let timestamp = room.timestamp {
Text(timestamp)
.font(.element.footnote)
.font(.compound.bodySM)
.foregroundColor(room.hasUnreads ? .element.brand : .element.tertiaryContent)
}
}
@@ -156,7 +156,7 @@ struct HomeScreenRoomCellButtonStyle: ButtonStyle {
private extension View {
func lastMessageFormatting() -> some View {
font(.element.subheadline)
font(.compound.bodyMD)
.foregroundColor(.element.tertiaryContent)
.lineLimit(2)
.multilineTextAlignment(.leading)
@@ -55,7 +55,7 @@ struct InviteUsersScreen: View {
private var noResultsContent: some View {
Text(L10n.commonNoResults)
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(.element.tertiaryContent)
.frame(maxWidth: .infinity)
.listRowBackground(Color.clear)
@@ -29,7 +29,7 @@ struct InviteUsersScreenSelectedItem: View {
avatarSize: .user(on: .inviteUsers),
imageProvider: imageProvider)
Text(user.displayName ?? user.userID)
.font(.element.title3)
.font(.compound.headingSM)
.foregroundColor(.element.primaryContent)
.lineLimit(1)
}
@@ -42,7 +42,7 @@ struct InvitesScreen: View {
private var noInvitesContent: some View {
Text(L10n.screenInvitesEmptyList)
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(.element.tertiaryContent)
.frame(maxWidth: .infinity)
.listRowBackground(Color.clear)
@@ -86,7 +86,7 @@ struct InvitesScreenCell: View {
private var textualContent: some View {
VStack(alignment: .leading) {
Text(title)
.font(.element.headline)
.font(.compound.bodyLGSemibold)
.foregroundColor(.element.primaryContent)
if let subtitle {
@@ -40,11 +40,11 @@ struct OnboardingPageView: View {
Spacer()
Text(content.title)
.font(.element.title1Bold)
.font(.compound.headingLGBold)
.foregroundColor(.element.primaryContent)
.multilineTextAlignment(.center)
Text(content.message)
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(.element.secondaryContent)
.multilineTextAlignment(.center)
}
@@ -102,7 +102,7 @@ struct RoomDetailsScreen: View {
Section {
Text(topic)
.foregroundColor(.element.secondaryContent)
.font(.element.footnote)
.font(.compound.bodySM)
} header: {
Text(L10n.commonTopic)
.formSectionHeader()
@@ -122,7 +122,7 @@ struct RoomDetailsScreen: View {
} else {
Text(String(context.viewState.members.count))
.foregroundColor(.element.tertiaryContent)
.font(.element.body)
.font(.compound.bodyLG)
}
} label: {
Label(L10n.commonPeople, systemImage: "person")
@@ -145,7 +145,7 @@ struct RoomDetailsScreen: View {
Text(L10n.screenRoomDetailsEncryptionEnabledTitle)
Text(L10n.screenRoomDetailsEncryptionEnabledSubtitle)
.foregroundColor(.element.secondaryContent)
.font(.element.footnote)
.font(.compound.bodySM)
}
} icon: {
Image(systemName: "lock.shield")
@@ -32,7 +32,7 @@ struct RoomMembersListScreen: View {
} header: {
Text(L10n.commonMemberCount(context.viewState.members.count))
.foregroundColor(.element.secondaryContent)
.font(.element.body)
.font(.compound.bodyLG)
.padding(.vertical, 12)
}
.padding(.horizontal)
@@ -35,7 +35,7 @@ struct RoomMembersListScreenMemberCell: View {
.accessibilityHidden(true)
Text(member.name ?? "")
.font(.element.calloutBold)
.font(.compound.bodyMDSemibold)
.foregroundColor(.element.primaryContent)
.lineLimit(1)
@@ -48,7 +48,7 @@ struct MessageComposer: View {
} label: {
submitButtonImage
.symbolVariant(.fill)
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(sendingDisabled ? .element.quaternaryContent : .global.white)
.background {
Circle()
@@ -127,7 +127,7 @@ private struct MessageComposerReplyHeader: View {
Spacer()
Button(action: action) {
Image(systemName: "xmark")
.font(.element.caption2.weight(.medium))
.font(.caption2.weight(.medium))
.foregroundColor(.element.secondaryContent)
.padding(12.0)
}
@@ -145,7 +145,7 @@ private struct MessageComposerEditHeader: View {
Spacer()
Button(action: action) {
Image(systemName: "xmark")
.font(.element.caption2.weight(.medium))
.font(.caption2.weight(.medium))
.foregroundColor(.element.secondaryContent)
.padding(12.0)
}
@@ -159,7 +159,7 @@ private struct MessageComposerHeaderLabelStyle: LabelStyle {
configuration.icon
configuration.title
}
.font(.element.caption1)
.font(.compound.bodyXS)
.foregroundColor(.element.secondaryContent)
.lineLimit(1)
}
@@ -28,7 +28,7 @@ struct RoomHeaderView: View {
roomAvatar
.accessibilityHidden(true)
Text(context.viewState.roomTitle)
.font(.element.headline)
.font(.compound.bodyLGSemibold)
.accessibilityIdentifier(A11yIdentifiers.roomScreen.name)
}
// Leading align whilst using the principal toolbar position.
@@ -74,7 +74,7 @@ struct RoomScreen: View {
private var scrollToBottomButton: some View {
Button { context.viewState.scrollToBottomPublisher.send(()) } label: {
Image(systemName: "chevron.down")
.font(.element.body)
.font(.compound.bodyLG)
.fontWeight(.semibold)
.foregroundColor(.element.secondaryContent)
.padding(13)
@@ -132,7 +132,7 @@ struct RoomScreen: View {
}
} label: {
Image(systemName: "plus.circle")
.font(.element.title1)
.font(.compound.headingLG)
.foregroundColor(.element.brand)
}
}
@@ -62,7 +62,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
TimelineSenderAvatarView(timelineItem: timelineItem)
.accessibilityHidden(true)
Text(timelineItem.sender.displayName ?? timelineItem.sender.id)
.font(.element.footnoteBold)
.font(.compound.bodySMSemibold)
.foregroundColor(.element.primaryContent)
.lineLimit(1)
.padding(.vertical, senderNameVerticalPadding)
@@ -112,7 +112,7 @@ struct TimelineItemBubbledStylerView<Content: View>: View {
if timelineItem.properties.isEdited {
Text(L10n.commonEditedSuffix)
.font(.element.caption2)
.font(.compound.bodyXS)
.foregroundColor(.element.tertiaryContent)
}
}
@@ -56,7 +56,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
Spacer()
Text(timelineItem.timestamp)
.foregroundColor(Color.element.tertiaryContent)
.font(.element.caption2)
.font(.compound.bodyXS)
}
.padding(.top, 16)
}
@@ -67,7 +67,7 @@ struct TimelineItemPlainStylerView<Content: View>: View {
VStack {
if timelineItem.properties.isEdited {
Text(L10n.commonEditedSuffix)
.font(.element.footnote)
.font(.compound.bodySM)
.foregroundColor(.element.tertiaryContent)
}
@@ -43,9 +43,9 @@ struct TimelineReactionButton: View {
var label: some View {
HStack(spacing: 4) {
Text(reaction.key)
.font(.element.subheadline)
.font(.compound.bodyMD)
Text(String(reaction.count))
.font(.element.subheadline)
.font(.compound.bodyMD)
.foregroundColor(.element.secondaryContent)
}
.padding(.vertical, 6)
@@ -60,7 +60,7 @@ private struct CollapsibleRoomTimelineItemDisclosureGroupStyle: DisclosureGroupS
.animation(.elementDefault, value: configuration.isExpanded)
}
.frame(maxWidth: .infinity)
.font(.element.footnote)
.font(.compound.bodySM)
.foregroundColor(.element.secondaryContent)
.padding(.horizontal, 36.0)
.padding(.top, 20.0)
@@ -152,7 +152,7 @@ struct FormattedBodyText: View {
private var blockquoteAttributes: AttributeContainer {
var container = AttributeContainer()
container.font = .element.subheadline
container.font = .compound.bodyMD
return container
}
}
@@ -24,7 +24,7 @@ struct ReadMarkerRoomTimelineView: View {
VStack(alignment: .trailing, spacing: 2) {
Text(L10n.roomTimelineReadMarkerTitle)
.textCase(.uppercase)
.font(.element.caption2Bold)
.font(.compound.bodyXSSemibold)
.foregroundColor(.element.quaternaryContent)
Rectangle()
.frame(height: 0.5)
@@ -21,7 +21,7 @@ struct SeparatorRoomTimelineView: View {
var body: some View {
Text(timelineItem.text)
.font(.element.footnote)
.font(.compound.bodySM)
.foregroundColor(.element.secondaryContent)
.frame(maxWidth: .infinity)
.padding(.horizontal, 36.0)
@@ -21,7 +21,7 @@ struct StateRoomTimelineView: View {
var body: some View {
Text(timelineItem.body)
.font(.element.footnote)
.font(.compound.bodySM)
.multilineTextAlignment(.center)
.foregroundColor(.element.secondaryContent)
.frame(maxWidth: .infinity, alignment: .center)
@@ -21,7 +21,7 @@ struct TimelineStartRoomTimelineView: View {
var body: some View {
Text(title)
.font(.element.footnote)
.font(.compound.bodySM)
.foregroundColor(.element.secondaryContent)
.padding(.vertical, 24)
.frame(maxWidth: .infinity)
@@ -28,7 +28,7 @@ struct UnsupportedRoomTimelineView: View {
Text(timelineItem.error)
.fixedSize(horizontal: false, vertical: true)
.font(.element.footnote)
.font(.compound.bodySM)
}
} icon: {
Image(systemName: "exclamationmark.triangle")
@@ -74,7 +74,7 @@ struct TimelineItemDebugView: View {
DisclosureGroup(title, isExpanded: $isExpanded) {
disclosureGroupContent
}
.font(.element.subheadline)
.font(.compound.bodyMD)
.padding()
Divider()
@@ -89,7 +89,7 @@ struct TimelineItemDebugView: View {
Divider()
Text(text)
.font(.element.caption1.monospaced())
.font(.compound.bodyXS.monospaced())
.foregroundColor(.element.primaryContent)
}
.frame(maxWidth: .infinity)
@@ -49,6 +49,10 @@ struct SessionVerificationScreenViewState: BindableState {
return L10n.commonVerificationCancelled
}
}
var titleAccessibilityIdentifier: String {
verificationState == .verified ? A11yIdentifiers.sessionVerificationScreen.verificationComplete : ""
}
var message: String {
switch verificationState {
@@ -79,6 +79,7 @@ struct SessionVerificationScreen: View {
.multilineTextAlignment(.center)
.foregroundColor(.element.primaryContent)
.padding(.bottom, 8)
.accessibilityIdentifier(context.viewState.titleAccessibilityIdentifier)
Text(context.viewState.message)
.font(.subheadline)
@@ -156,7 +157,7 @@ struct SessionVerificationScreen: View {
Button(L10n.screenSessionVerificationTheyDontMatch) {
context.send(viewAction: .decline)
}
.font(.element.bodyBold)
.font(.compound.bodyLGSemibold)
.accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.declineChallenge)
}
@@ -176,7 +177,7 @@ struct SessionVerificationScreen: View {
Button(L10n.screenSessionVerificationTheyDontMatch) {
context.send(viewAction: .decline)
}
.font(.element.bodyBold)
.font(.compound.bodyLGSemibold)
.accessibilityIdentifier(A11yIdentifiers.sessionVerificationScreen.declineChallenge)
.disabled(true)
}
@@ -203,9 +204,9 @@ struct SessionVerificationScreen: View {
var body: some View {
VStack(spacing: 16.0) {
Text(emoji.symbol)
.font(.element.largeTitleBold)
.font(.compound.headingXLBold)
Text(emoji.description)
.font(.element.subheadline)
.font(.compound.bodyMD)
.foregroundColor(.element.secondaryContent)
}
.padding(8.0)
@@ -218,7 +219,7 @@ struct SessionVerificationScreen: View {
var body: some View {
Image(systemName: systemName)
.resizable()
.font(.element.body.weight(.light))
.font(.compound.bodyLG.weight(.light))
.scaledToFit()
.foregroundColor(.element.accent)
.frame(width: 100, height: 100)
@@ -103,7 +103,7 @@ struct StartChatScreen: View {
private var noResultsContent: some View {
Text(L10n.commonNoResults)
.font(.element.body)
.font(.compound.bodyLG)
.foregroundColor(.element.tertiaryContent)
.frame(maxWidth: .infinity)
.listRowBackground(Color.clear)