Compound Fonts (#834)

* Use CompoundFonts in DesignKit (deprecate ElementFonts). * Use compound fonts everywhere. * Update Authentication snapshots. * Update RoomMembersListScreen snapshots. Delete unused snapshots. * Fix tests.
2026-11-04 19:44:05 +00:00 · 2023-04-25 16:42:06 +01:00
parent 8b36e0faa5
commit 5bb2ceedf4
100 changed files with 185 additions and 178 deletions
@@ -12,12 +12,14 @@ let package = Package(
        .library(name: "DesignKit", targets: ["DesignKit"])
    ],
    dependencies: [
        .package(url: "https://github.com/vector-im/compound-ios.git", revision: "0b1c62f9a9efac3d9ac06c51531392d55057a0eb"),
        .package(url: "https://github.com/vector-im/element-design-tokens.git", exact: "0.0.3"),
        .package(url: "https://github.com/siteline/SwiftUI-Introspect.git", from: "0.1.4")
    ],
    targets: [
        .target(name: "DesignKit",
                dependencies: [
                    .product(name: "Compound", package: "compound-ios"),
                    .product(name: "DesignTokens", package: "element-design-tokens"),
                    .product(name: "Introspect", package: "SwiftUI-Introspect")
                ],
@@ -14,6 +14,7 @@
 // limitations under the License.
 //
 import Compound
 import DesignTokens
 import SwiftUI
@@ -55,7 +56,7 @@ public struct ElementActionButtonStyle: ButtonStyle {
            .padding(.vertical, verticalPadding)
            .frame(maxWidth: maxWidth)
            .foregroundColor(fontColor)
-            .font(.element.bodyBold)
+            .font(.compound.bodyLGSemibold)
            .background(Capsule()
                .fill(color)
                .opacity(backgroundOpacity(when: configuration.isPressed)))
@@ -35,7 +35,7 @@ public struct ElementCapsuleButtonStyle: ButtonStyle {
        configuration.label
            .padding(7)
            .frame(maxWidth: .infinity)
-            .font(.element.headline)
+            .font(.compound.bodyLGSemibold)
            .foregroundColor(fontColor)
            .multilineTextAlignment(.center)
            .background(background)
@@ -47,7 +47,7 @@ public struct ElementGhostButtonStyle: ButtonStyle {
            .padding(.vertical, verticalPadding)
            .frame(maxWidth: maxWidth)
            .foregroundColor(color)
-            .font(.element.footnoteBold)
+            .font(.compound.bodySMSemibold)
            .background(border)
            .opacity(opacity(when: configuration.isPressed))
    }
@@ -18,6 +18,7 @@ import SwiftUI
 public extension Font {
    /// The fonts used by Element as defined in https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
    @available(*, deprecated, renamed: "compound")
    static let element = ElementFonts(values: ElementBaseFonts())
 }
@@ -18,6 +18,7 @@ import UIKit
 public extension UIFont {
    /// The fonts used by Element as defined in https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
    @available(*, deprecated, message: "Not yet available in compound.")
    @objc static let element = ElementUIFonts(values: ElementBaseFonts())
 }
@@ -119,13 +119,13 @@ public struct ElementTextFieldStyle: TextFieldStyle {
        return VStack(alignment: .leading, spacing: 8) {
            labelText
-                .font(.element.footnote)
+                .font(.compound.bodySM)
                .foregroundColor(labelColor)
                .padding(.horizontal, 16)
            configuration
                .focused($isFocused)
-                .font(.element.callout)
+                .font(.compound.bodyLG)
                .foregroundColor(textColor)
                .accentColor(accentColor)
                .padding(.leading, 16.0)
@@ -148,7 +148,7 @@ public struct ElementTextFieldStyle: TextFieldStyle {
            footerText
                .tint(.element.links)
-                .font(.element.caption1)
+                .font(.compound.bodyXS)
                .foregroundColor(footerColor)
                .padding(.horizontal, 16)
        }
@@ -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)
@@ -45,7 +45,7 @@ struct TemplateScreen: View {
    var mainContent: some View {
        VStack(spacing: 36) {
            Text(context.viewState.promptType.title)
-                .font(.element.title2Bold)
+                .font(.compound.headingMDBold)
                .multilineTextAlignment(.center)
                .foregroundColor(.element.primaryContent)
                .accessibilityIdentifier("title")
@@ -57,7 +57,7 @@ struct TemplateScreen: View {
            HStack {
                Text("Counter: \(context.viewState.count)")
-                    .font(.element.body)
+                    .font(.compound.bodyLG)
                    .multilineTextAlignment(.center)
                    .foregroundColor(counterColor)
@@ -49,6 +49,7 @@ class SessionVerificationUITests: XCTestCase {
        app.buttons[A11yIdentifiers.sessionVerificationScreen.acceptChallenge].tap()
        app.assertScreenshot(.sessionVerification, step: Step.acceptingEmojis)
        XCTAssert(app.staticTexts[A11yIdentifiers.sessionVerificationScreen.verificationComplete].waitForExistence(timeout: 5.0))
        app.assertScreenshot(.sessionVerification, step: Step.verificationComplete)
        app.buttons[A11yIdentifiers.sessionVerificationScreen.close].tap()
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec2b3b2ae7317bebbeec2c1a28abdaabc9877204454ee5616af0cac75dd25b42
+oid sha256:ef8332a434d1ee1e8e477baab70db5f21b8e19dabdfec3cb37d8a58a07f2dfa3
-size 87928
+size 87407
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a4683098a91caed1dc2040833dabed1db830cec0757663bf0f98eec877c9a781
+oid sha256:231a54d4b7ee98698ec443cf557d6b6d43b200600a24961366e54aa1b05bd12b
-size 89630
+size 88208
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:36cd714098d67868223cd9532aba434ed0b26e093f49cb5e1728511da18baa1a
+oid sha256:d1c86458e7d69a865e1e99b31d6d36eb8ec50b4d9451c8bbcc94dbcd551b7438
-size 75713
+size 75711
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ac1ef27c8950618f1891c0219363bbe6653667b16f922a4f84554fb85be5185f
+oid sha256:afba2a8d37741ade05717616b721d421867d51fa40992909ad0299fd7b0c9c6f
-size 88179
+size 88152
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:354a89e44e590eaead83e7067b23c25bec856d24a96e7aa0edf47aa4ed6f9ddc
+oid sha256:511188a181af1da44b6887f85ccbb88d4e19117f2f87692cf442ce3373c19433
-size 86403
+size 85133
@@ -1,3 +0,0 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:bd7201be7a1cb41467f2f91ed40173b79cead8e99c82ad89686f01abd836b26c
 size 76432
@@ -0,0 +1,3 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:e7d2d9e612e8f551c6c75f77e359a72e0cdf402940f4284e1983f1246dcd52f7
 size 75860
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:704a782a3fb3e9d99eafe567d305edf62f72109ce3442da7b4ab91f8cdb00b8f
+oid sha256:cccec1e509adc2041ff349c6906aedcb5598e54ff6c534d7ec234dc4f1777d09
-size 97501
+size 96753
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7f24087c1338f3a7cd3db0a91e67ab1fb333dbe3947addfca43f7224b0452658
+oid sha256:b2020251a237e98dffeeb1895aec31270cc93713f65c58d12e734943582f97e6
-size 168863
+size 168798
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9c968d3625a28d40bf555e2f7f38661ff63722df08c5a0d03a04b20cd6342d09
+oid sha256:55bdb5c8c1829c52939e4959a1c4acf6ee2762f907a6e873aa398a149af53de0
-size 98816
+size 97559
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7e3f25b2f80d9e58af3bc8986ac0b0d5dee8c6be99525a8fcc8221ea1b233906
+oid sha256:3c7d5815896118336ce2b6fa82b8625285b43de51c66a90b81a0019be506ad17
-size 94136
+size 93394
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c359500fb5bb25d49e7b42b7963c18a3fad46c100669b4f2fe8f95cc0b5115df
+oid sha256:a18ea7853cb55a1fa02499b7410d1fcffd9b9ca2f0a03cd7b9c3105cd4652517
-size 120278
+size 120196
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:55f2e3defd6e1dd070ac7cf377e02d6a5b22145cefd431b2103062601d21fc5b
+oid sha256:b40ed44328119207df894a5617b29e2b7616b7642b8bc0a8cf1dcfa0551f2491
-size 96567
+size 96064
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a91f01196882f11f591c96bcdcb19ff0fcd96b30f395fdbf04c8e2fcf88e9a31
+oid sha256:834ac755d94df5f3dbc9ac2fc8bfa2a8944e8dacbdc8e1230dc898ad18412c46
-size 98927
+size 97420
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:eb9e6ef890631bafdac2d88ee2c03a498685195e872b4b4f346373acf643f831
+oid sha256:dde7a3add93db5eff4bb7fcec66d43e2c467c25b514806f2d5812fb95995c79d
-size 77888
+size 77839
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c6accbd0df355c6d0666311cb9faf25a702520e862284aac3932a8f387a68802
+oid sha256:e14113da03d4f9ea05553836cfee5f24b002e98c7a771d11e28fe7b90016a2d8
-size 100297
+size 100246
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a5ca48609e56626ddcf34b4ab49051861466024ab898e8a466c2e84e87b95476
+oid sha256:8dcb69fb081682f8ca9601256b6d24cf1762439ae0d4a3e68ea399e8c2db5788
-size 95251
+size 94481
@@ -1,3 +0,0 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:ff634d4d98c8ba4a64a65888e39932c4997c81324e197e3cb7b841bac54abe6a
 size 81635
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:39473c3ac0d998cb0eb838280827c70a688f2db69aa2ac00d460d0c4a5070e93
+oid sha256:6a6c9fdb03015d69f4e4ed307fe69ae26294c59a9ae595f3c9fc6096443a2d43
-size 82754
+size 82026
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91782800a413c273a3d3b5fd84896a5bde9a87ac25f199883d682e94006c3c85
+oid sha256:f6d978fb8b86bd67fbc60a8f2f4115fed38657ab00f0afd9e5b77e13ff828768
-size 111953
+size 111414
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b876c5df16b9421ac33cc2b937f752483414db06ddb6a2a25f6c0515cdf1b3f4
+oid sha256:86c8b92559ac35f5721b90b3f0ac51aee4ef1352a097deb1b75b1b27975d9273
-size 173195
+size 173377
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1c1f427c84959a513475e5c40a5f5961436f75842ccf7e80151ed8caf305f343
+oid sha256:2f07d107a1fb2d14e03ddca3f79ec7e11e3d5afe7a5442cd7b26bae1dc0426d8
-size 115230
+size 114313
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5158f5470ea255e7780eae7b78c00c0e8737d3ba6894c2a805b77c3f002adb61
+oid sha256:f0ec40146986070a920837aafbe514f55a79661bfa442662b5a43592b11621fb
-size 107373
+size 108302
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2230f61ec8690371717beb99d92f012219298385ef311d89f88797613576abf2
+oid sha256:5dae2d958457d2c23a65788245d0dd5fda0f808e9c2dab692ae4ebaa802b3c1b
-size 153348
+size 155060
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:67bfd4b81e1598dabd450afe1c955399ef69b51534961f5f20f2ef9484bc69bd
+oid sha256:8ad9a2318453d554ae2ec43c985bbae6d5496d03561bf5759c9089592a334480
-size 92565
+size 92066
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6110e8095a5ca74008ff55b1baecb24fb78d9926782b46725272c94341bcd65e
+oid sha256:709dbc0dcb03e61c72900b03f93491da3a8c43ff095b0f628d91b39ec06a94f1
-size 94048
+size 92694
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a654688b27120213bae227961b0d954d76682c02e6c57c4c45715fc31ae304eb
+oid sha256:b4f95f61c63e0e14193fc1f21c439709508a1c46e54a95806d42f120a2dcf793
 size 79627
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0ae368aa91f0b358da5d96747590e92a649a7799fa4b866e2475aec23af80204
+oid sha256:a2b9a459a16931023f81443d6518581800edbc0d9dd7b198639cfe4e55ad5f2c
-size 107353
+size 107330
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91b9052d02f067d265d13deb9249322cf49b4c7ded3f8fc0ef14fc3e28284207
+oid sha256:05a769fada47570430f9fc16381b01d77bfe3b7e1c950c553a5df3ed728b765f
-size 91433
+size 90286
@@ -1,3 +0,0 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:dd7a1fcfbf788424f6a8221d306020e4349378f780fee1b2cdd058ea24d769ce
 size 80084
@@ -0,0 +1,3 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:d1ba0077281f0c50d3c56d01c6a745893c6c0d633dff40e04e348c41635bede9
 size 79529
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:418e459caa144de170393411d57f76b640219959af8868570496169f947f3cc7
+oid sha256:81c1a58f856e230efb85434b7c2ca2b78e36eff9b4aa31029eb075c137ac10c7
-size 115986
+size 115390
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6a584193016efaf635e7630416be6dad8b3d5387aa2edfc4630a782ad93ed5b2
+oid sha256:61adfdee4d157b813b6f56f7bb375d8d78e4dd05857b57ffaec0670a0bcd134a
-size 187780
+size 188124
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2deb2893977d77038a5555da79de84407fd65c06bf745755556b1e63a86a6ea5
+oid sha256:0a4450f8960b16dfda70317c79c8374c86b7e5a34602e52058b929bd87011588
-size 119860
+size 118711
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:235b63b4082c7137e089f3570434a20b513014d949bda277ff73d4785987f621
+oid sha256:75a7c6ca93ac109cc601783b027e255f318f442ecc8045fa69bf4fb4f184452f
-size 112921
+size 112062
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9d805065062ee7c9ae8cd44be28e2863d69330563335348d4f042ae9c2aefb95
+oid sha256:a193e2bae6b39361d9009f6ac6717593ac424c8579318aa98606710787674536
-size 161030
+size 160281
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:05b9c56451a29104b170de1ace7ed42706af3030e3f92f064534a632989a6f21
+oid sha256:db846fed5cd2472e611beaee52b3e02cc1d70490427e5085bb5d37813924ee32
-size 114222
+size 114993
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fa9af5670518637837d225e27d401cc36f33bd7d865a9e6ba24e72b872c558e5
+oid sha256:a58acc6d270e9398b0f638fbcd23a968fa88ef968cc5943d95b73cc4883e2a22
-size 116142
+size 116000
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cc6e8489847aed3a6e687e71951b999f3907c68ba2ab5c1e4f3e3412c11753c6
+oid sha256:31e489f4fd821ccf142d0cd558e23d78b8bd72f5117b4d4dabc7c5b8efad2fc5
-size 93903
+size 93858
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9960c28aa3381c0618cb0ef0609ce1cf11df3c8d040da6ae416f3a680c881894
+oid sha256:bbedad6a1bded0780796d5e4db07a2f94770cc551ec3e071e0ab89c728c8925b
-size 131951
+size 131905
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5e2f12fa356efb5e115949cde388a3b884d26c4a97d8bff9688540b96cd1a56b
+oid sha256:8b58ab8bc33ee6ea79a2fd995a38896920e4aa64d19453bdc611365f5f63663c
-size 112287
+size 111471
@@ -1,3 +0,0 @@
 version https://git-lfs.github.com/spec/v1
 oid sha256:ac138e7b287a9e3b1df4de680949ad361be4b35b7e5016b71d7141c3f2a99d82
 size 88752
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:26150a466fb3d23e496a8d011bb9a134b1db9c1d7a1e26a06a604f86e1e747ac
+oid sha256:b80e3cb5bc5ab0612680ab30972dfb97c0f96b1b3b2e2931aa07b1177781608e
-size 88536
+size 86530
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:04fd81aeafe56b6ff2e819c0476a2349216848bd7d6bfeff2dcee1ce9cabffb6
+oid sha256:dda0bbdefa40fd426f3205f1cbb791010e531b3c1ca4522441edb0c510347158
-size 135604
+size 135166
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3e8f90f96b6a002fc3278cfc6145989a2cffbf22d5fb8f1ad01010442e2845dd
+oid sha256:af3955acbbee0c717649996c01aa7a9f89ef3e77e9b45f896574fb7db1388f4b
-size 194807
+size 195270
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1144067cf306aafc7bec22f160ea4fd995cc6176f58e4810aae8a7a02e97a90f
+oid sha256:121ffd5367e25ea4c74bbeb2394eb3fb7890a2ac28b3bb679664123346639753
-size 143234
+size 142332
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fbbb38b27e01f990442b4dd84676f91169c60d1c8325cbab33fcf8a1469d6a0b
+oid sha256:0b671d41caf4576ca0910e41df7988d3956ef241259b195acfa2175c8f86018c
-size 130560
+size 130248
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:512b06e6f3632aa63bb5e1aa9814f141d13c84c5848cf8b425ebdd3a844e0956
+oid sha256:a7d006f07a1970cbd5a70ab6170182782a85875d9316db86bc7a37ce03bb73d2
-size 221268
+size 220025
@@ -1 +1 @@
-Allow the search bar to be styled.
+Use Compound fonts everywhere. Allow the search bar to be styled.
		`@@ -1 +1 @@`
			`Allow the search bar to be styled.`				`Use Compound fonts everywhere. Allow the search bar to be styled.`