Compound Fonts (#834)

* Use CompoundFonts in DesignKit (deprecate ElementFonts).

* Use compound fonts everywhere.

* Update Authentication snapshots.

* Update RoomMembersListScreen snapshots.

Delete unused snapshots.

* Fix tests.

ElementX/Sources/Screens/RoomScreen/View/MessageComposer.swift

@@ -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)
     }

ElementX/Sources/Screens/RoomScreen/View/RoomHeaderView.swift

@@ -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.

ElementX/Sources/Screens/RoomScreen/View/RoomScreen.swift

@@ -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)
         }
     }

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemBubbledStylerView.swift

@@ -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)
                 }
             }

ElementX/Sources/Screens/RoomScreen/View/Style/TimelineItemPlainStylerView.swift

@@ -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)
             }
             

ElementX/Sources/Screens/RoomScreen/View/Supplementary/TimelineReactionsView.swift

@@ -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)

ElementX/Sources/Screens/RoomScreen/View/Timeline/CollapsibleRoomTimelineView.swift

@@ -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)

ElementX/Sources/Screens/RoomScreen/View/Timeline/FormattedBodyText.swift

@@ -152,7 +152,7 @@ struct FormattedBodyText: View {
 
     private var blockquoteAttributes: AttributeContainer {
         var container = AttributeContainer()
-        container.font = .element.subheadline
+        container.font = .compound.bodyMD
         return container
     }
 }

ElementX/Sources/Screens/RoomScreen/View/Timeline/ReadMarkerRoomTimelineView.swift

@@ -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)

ElementX/Sources/Screens/RoomScreen/View/Timeline/SeparatorRoomTimelineView.swift

@@ -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)

ElementX/Sources/Screens/RoomScreen/View/Timeline/StateRoomTimelineView.swift

@@ -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)

ElementX/Sources/Screens/RoomScreen/View/Timeline/TimelineStartRoomTimelineView.swift

@@ -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)

ElementX/Sources/Screens/RoomScreen/View/Timeline/UnsupportedRoomTimelineView.swift

@@ -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")

ElementX/Sources/Screens/RoomScreen/View/TimelineItemDebugView.swift

@@ -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)