DesignKit: Update fonts to match Figma.

DesignKit/Sources/Fonts/ElementBaseFonts.swift

@@ -18,7 +18,7 @@ import SwiftUI
 
 /// Fonts at  https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
 @objcMembers
-public class ElementSharedFonts {
+public class ElementBaseFonts {
     // MARK: - Types
     
     /// A wrapper to provide both a `UIFont` and a SwiftUI `Font` in the same type.
@@ -41,75 +41,45 @@ public class ElementSharedFonts {
 
 // MARK: - Fonts protocol
 
-public extension ElementSharedFonts {
+public extension ElementBaseFonts {
     var largeTitle: SharedFont {
         let uiFont = font(forTextStyle: .largeTitle)
         return SharedFont(uiFont: uiFont, font: .largeTitle)
     }
-    
-    var largeTitleB: SharedFont {
-        let uiFont = largeTitle.uiFont.bold
-        return SharedFont(uiFont: uiFont, font: .largeTitle.bold())
-    }
             
     var title1: SharedFont {
         let uiFont = font(forTextStyle: .title1)
         return SharedFont(uiFont: uiFont, font: .title)
     }
     
-    var title1B: SharedFont {
-        let uiFont = title1.uiFont.bold
-        return SharedFont(uiFont: uiFont, font: .title.bold())
-    }
-    
     var title2: SharedFont {
         let uiFont = font(forTextStyle: .title2)
         return SharedFont(uiFont: uiFont, font: .title2)
     }
     
-    var title2B: SharedFont {
-        let uiFont = title2.uiFont.bold
-        return SharedFont(uiFont: uiFont, font: .title2.bold())
-    }
-    
     var title3: SharedFont {
         let uiFont = font(forTextStyle: .title3)
         return SharedFont(uiFont: uiFont, font: .title3)
     }
     
-    var title3SB: SharedFont {
-        let uiFont = title3.uiFont.semiBold
-        return SharedFont(uiFont: uiFont, font: .title3.weight(.semibold))
-    }
-    
     var headline: SharedFont {
         let uiFont = font(forTextStyle: .headline)
         return SharedFont(uiFont: uiFont, font: .headline)
     }
     
-    var subheadline: SharedFont {
-        let uiFont = font(forTextStyle: .subheadline)
-        return SharedFont(uiFont: uiFont, font: .subheadline)
-    }
-    
     var body: SharedFont {
         let uiFont = font(forTextStyle: .body)
         return SharedFont(uiFont: uiFont, font: .body)
     }
     
-    var bodySB: SharedFont {
-        let uiFont = body.uiFont.semiBold
-        return SharedFont(uiFont: uiFont, font: .body.weight(.semibold))
-    }
-    
     var callout: SharedFont {
         let uiFont = font(forTextStyle: .callout)
         return SharedFont(uiFont: uiFont, font: .callout)
     }
     
-    var calloutSB: SharedFont {
+    var subheadline: SharedFont {
-        let uiFont = callout.uiFont.semiBold
+        let uiFont = font(forTextStyle: .subheadline)
-        return SharedFont(uiFont: uiFont, font: .callout.weight(.semibold))
+        return SharedFont(uiFont: uiFont, font: .subheadline)
     }
     
     var footnote: SharedFont {
@@ -117,28 +87,13 @@ public extension ElementSharedFonts {
         return SharedFont(uiFont: uiFont, font: .footnote)
     }
     
-    var footnoteSB: SharedFont {
-        let uiFont = footnote.uiFont.semiBold
-        return SharedFont(uiFont: uiFont, font: .footnote.weight(.semibold))
-    }
-    
     var caption1: SharedFont {
         let uiFont = font(forTextStyle: .caption1)
         return SharedFont(uiFont: uiFont, font: .caption)
     }
     
-    var caption1SB: SharedFont {
-        let uiFont = caption1.uiFont.semiBold
-        return SharedFont(uiFont: uiFont, font: .caption.weight(.semibold))
-    }
-    
     var caption2: SharedFont {
         let uiFont = font(forTextStyle: .caption2)
         return SharedFont(uiFont: uiFont, font: .caption2)
     }
-    
-    var caption2SB: SharedFont {
-        let uiFont = caption2.uiFont.semiBold
-        return SharedFont(uiFont: uiFont, font: .caption2.weight(.semibold))
-    }
 }

DesignKit/Sources/Fonts/ElementFonts.swift

@@ -18,52 +18,56 @@ import SwiftUI
 
 public extension Font {
     /// The fonts used by Element as defined in https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
-    static let element = ElementFonts(values: ElementSharedFonts())
+    static let element = ElementFonts(values: ElementBaseFonts())
 }
 
 /// Struct for holding fonts for use in SwiftUI.
 public struct ElementFonts: Fonts {
     public let largeTitle: Font
-    public let largeTitleB: Font
+    public let largeTitleBold: Font
     public let title1: Font
-    public let title1B: Font
+    public let title1Bold: Font
     public let title2: Font
-    public let title2B: Font
+    public let title2Bold: Font
     public let title3: Font
-    public let title3SB: Font
+    public let title3Bold: Font
     public let headline: Font
-    public let subheadline: Font
+    public let headlineBold: Font
     public let body: Font
-    public let bodySB: Font
+    public let bodyBold: Font
     public let callout: Font
-    public let calloutSB: Font
+    public let calloutBold: Font
+    public let subheadline: Font
+    public let subheadlineBold: Font
     public let footnote: Font
-    public let footnoteSB: Font
+    public let footnoteBold: Font
     public let caption1: Font
-    public let caption1SB: Font
+    public let caption1Bold: Font
     public let caption2: Font
-    public let caption2SB: Font
+    public let caption2Bold: Font
     
-    public init(values: ElementSharedFonts) {
+    public init(values: ElementBaseFonts) {
         largeTitle = values.largeTitle.font
-        largeTitleB = values.largeTitleB.font
+        largeTitleBold = values.largeTitle.font.bold()
         title1 = values.title1.font
-        title1B = values.title1B.font
+        title1Bold = values.title1.font.bold()
         title2 = values.title2.font
-        title2B = values.title2B.font
+        title2Bold = values.title2.font.bold()
         title3 = values.title3.font
-        title3SB = values.title3SB.font
+        title3Bold = values.title3.font.bold()
         headline = values.headline.font
-        subheadline = values.subheadline.font
+        headlineBold = values.headline.font.bold()
         body = values.body.font
-        bodySB = values.bodySB.font
+        bodyBold = values.body.font.bold()
         callout = values.callout.font
-        calloutSB = values.calloutSB.font
+        calloutBold = values.callout.font.bold()
+        subheadline = values.subheadline.font
+        subheadlineBold = values.subheadline.font.bold()
         footnote = values.footnote.font
-        footnoteSB = values.footnoteSB.font
+        footnoteBold = values.footnote.font.bold()
         caption1 = values.caption1.font
-        caption1SB = values.caption1SB.font
+        caption1Bold = values.caption1.font.bold()
         caption2 = values.caption2.font
-        caption2SB = values.caption2SB.font
+        caption2Bold = values.caption2.font.bold()
     }
 }

DesignKit/Sources/Fonts/ElementUIFonts.swift

@@ -18,52 +18,56 @@ import UIKit
 
 public extension UIFont {
     /// The fonts used by Element as defined in https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
-    @objc static let element = ElementUIFonts(values: ElementSharedFonts())
+    @objc static let element = ElementUIFonts(values: ElementBaseFonts())
 }
 
 /// ObjC class for holding fonts for use in UIKit.
 @objcMembers public class ElementUIFonts: NSObject, Fonts {
     public let largeTitle: UIFont
-    public let largeTitleB: UIFont
+    public let largeTitleBold: UIFont
     public let title1: UIFont
-    public let title1B: UIFont
+    public let title1Bold: UIFont
     public let title2: UIFont
-    public let title2B: UIFont
+    public let title2Bold: UIFont
     public let title3: UIFont
-    public let title3SB: UIFont
+    public let title3Bold: UIFont
     public let headline: UIFont
-    public let subheadline: UIFont
+    public let headlineBold: UIFont
     public let body: UIFont
-    public let bodySB: UIFont
+    public let bodyBold: UIFont
     public let callout: UIFont
-    public let calloutSB: UIFont
+    public let calloutBold: UIFont
+    public let subheadline: UIFont
+    public let subheadlineBold: UIFont
     public let footnote: UIFont
-    public let footnoteSB: UIFont
+    public let footnoteBold: UIFont
     public let caption1: UIFont
-    public let caption1SB: UIFont
+    public let caption1Bold: UIFont
     public let caption2: UIFont
-    public let caption2SB: UIFont
+    public let caption2Bold: UIFont
     
-    public init(values: ElementSharedFonts) {
+    public init(values: ElementBaseFonts) {
         largeTitle = values.largeTitle.uiFont
-        largeTitleB = values.largeTitleB.uiFont
+        largeTitleBold = values.largeTitle.uiFont.bold
         title1 = values.title1.uiFont
-        title1B = values.title1B.uiFont
+        title1Bold = values.title1.uiFont.bold
         title2 = values.title2.uiFont
-        title2B = values.title2B.uiFont
+        title2Bold = values.title2.uiFont.bold
         title3 = values.title3.uiFont
-        title3SB = values.title3SB.uiFont
+        title3Bold = values.title3.uiFont.bold
         headline = values.headline.uiFont
-        subheadline = values.subheadline.uiFont
+        headlineBold = values.headline.uiFont.bold
         body = values.body.uiFont
-        bodySB = values.bodySB.uiFont
+        bodyBold = values.body.uiFont.bold
         callout = values.callout.uiFont
-        calloutSB = values.calloutSB.uiFont
+        calloutBold = values.callout.uiFont.bold
+        subheadline = values.subheadline.uiFont
+        subheadlineBold = values.subheadline.uiFont.bold
         footnote = values.footnote.uiFont
-        footnoteSB = values.footnoteSB.uiFont
+        footnoteBold = values.footnote.uiFont.bold
         caption1 = values.caption1.uiFont
-        caption1SB = values.caption1SB.uiFont
+        caption1Bold = values.caption1.uiFont.bold
         caption2 = values.caption2.uiFont
-        caption2SB = values.caption2SB.uiFont
+        caption2Bold = values.caption2.uiFont.bold
     }
 }

DesignKit/Sources/Fonts/Fonts.swift

@@ -26,59 +26,65 @@ public protocol Fonts {
     var largeTitle: FontType { get }
     
     /// `largeTitle` with a Bold weight.
-    var largeTitleB: FontType { get }
+    var largeTitleBold: FontType { get }
     
     /// The font for first-level hierarchical headings.
     var title1: FontType { get }
         
     /// `title1` with a Bold weight.
-    var title1B: FontType { get }
+    var title1Bold: FontType { get }
     
     /// The font for second-level hierarchical headings.
     var title2: FontType { get }
     
     /// `title2` with a Bold weight.
-    var title2B: FontType { get }
+    var title2Bold: FontType { get }
     
     /// The font for third-level hierarchical headings.
     var title3: FontType { get }
     
-    /// `title3` with a Semi Bold weight.
+    /// `title3` with a Bold weight.
-    var title3SB: FontType { get }
+    var title3Bold: FontType { get }
     
     /// The font for headings.
     var headline: FontType { get }
     
-    /// The font for subheadings.
+    /// `headline` with a Bold weight.
-    var subheadline: FontType { get }
+    var headlineBold: FontType { get }
     
     /// The font for body text.
     var body: FontType { get }
     
-    /// `body` with a Semi Bold weight.
+    /// `body` with a Bold weight.
-    var bodySB: FontType { get }
+    var bodyBold: FontType { get }
     
     /// The font for callouts.
     var callout: FontType { get }
     
-    /// `callout` with a Semi Bold weight.
+    /// `callout` with a Bold weight.
-    var calloutSB: FontType { get }
+    var calloutBold: FontType { get }
+    
+    /// The font for subheadings.
+    var subheadline: FontType { get }
+    
+    /// `subheadline` with a Bold weight.
+    var subheadlineBold: FontType { get }
     
     /// The font for footnotes.
     var footnote: FontType { get }
     
-    /// `footnote` with a Semi Bold weight.
+    /// `footnote` with a Bold weight.
-    var footnoteSB: FontType { get }
+    var footnoteBold: FontType { get }
     
     /// The font for standard captions.
     var caption1: FontType { get }
 
-    /// `caption1` with a Semi Bold weight.
+    /// `caption1` with a Bold weight.
-    var caption1SB: FontType { get }
+    var caption1Bold: FontType { get }
     
     /// The font for alternate captions.
     var caption2: FontType { get }
     
-    /// `caption2` with a Semi Bold weight.
+    /// `caption2` with a Bold weight.
-    var caption2SB: FontType { get }
+    var caption2Bold: FontType { get }
 }

ElementX/Sources/Screens/AnalyticsPrompt/View/AnalyticsPrompt.swift

@@ -68,7 +68,7 @@ struct AnalyticsPrompt: View {
                 .padding(.bottom, 25)
             
             Text(ElementL10n.analyticsOptInTitle(ElementInfoPlist.cfBundleName))
-                .font(.element.title2B)
+                .font(.element.title2Bold)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.element.primaryContent)
                 .padding(.bottom, 2)
@@ -104,14 +104,14 @@ struct AnalyticsPrompt: View {
         VStack {
             Button { context.send(viewAction: .enable) } label: {
                 Text(ElementL10n.actionEnable)
-                    .font(.element.bodySB)
+                    .font(.element.bodyBold)
             }
             .buttonStyle(.elementAction(.xLarge))
             .accessibilityIdentifier("enableButton")
             
             Button { context.send(viewAction: .disable) } label: {
                 Text(ElementL10n.actionNotNow)
-                    .font(.element.bodySB)
+                    .font(.element.bodyBold)
                     .padding(12)
             }
             .accessibilityIdentifier("disableButton")

ElementX/Sources/Screens/Authentication/LoginScreen/View/LoginScreen.swift

@@ -65,7 +65,7 @@ struct LoginScreen: View {
     /// The header containing a Welcome Back title.
     var header: some View {
         Text(ElementL10n.authenticationLoginTitle)
-            .font(.element.title2B)
+            .font(.element.title2Bold)
             .multilineTextAlignment(.center)
             .foregroundColor(.element.primaryContent)
     }

ElementX/Sources/Screens/Authentication/ServerSelection/View/ServerSelectionScreen.swift

@@ -53,7 +53,7 @@ struct ServerSelectionScreen: View {
                 .padding(.bottom, 8)
             
             Text(ElementL10n.serverSelectionTitle)
-                .font(.element.title2B)
+                .font(.element.title2Bold)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.element.primaryContent)
             

ElementX/Sources/Screens/SplashScreen/View/SplashScreenPageView.swift

@@ -39,7 +39,7 @@ struct SplashScreenPageView: View {
             
             VStack(spacing: 8) {
                 Text(content.title)
-                    .font(.element.title2B)
+                    .font(.element.title2Bold)
                     .foregroundColor(.element.primaryContent)
                 Text(content.message)
                     .font(.element.body)

Tools/Scripts/Templates/SimpleScreenExample/ElementX/View/TemplateScreen.swift

@@ -51,7 +51,7 @@ struct TemplateScreen: View {
     var mainContent: some View {
         VStack(spacing: 36) {
             Text(context.viewState.promptType.title)
-                .font(.element.title2B)
+                .font(.element.title2Bold)
                 .multilineTextAlignment(.center)
                 .foregroundColor(.element.primaryContent)
                 .accessibilityIdentifier("title")

changelog.d/pr-187.change

@@ -0,0 +1 @@
+DesignKit: Update fonts to match Figma.