letro/letro-ios
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases 2 Wiki Activity

DesignKit: Update fonts to match Figma.

Browse Source
This commit is contained in:
Doug
2022-09-14 19:43:08 +01:00
committed by Doug
parent 00a038d8db
commit 996ef8b4b3
10 changed files with 88 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
DesignKit/Sources/Fonts/ElementSharedFonts.swift → DesignKit/Sources/Fonts/ElementBaseFonts.swift
View File

@@ -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 {
let uiFont = callout.uiFont.semiBold
return SharedFont(uiFont: uiFont, font: .callout.weight(.semibold))
var subheadline: SharedFont {
let uiFont = font(forTextStyle: .subheadline)
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))
}
}

48
DesignKit/Sources/Fonts/ElementFonts.swift
View File

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

48
DesignKit/Sources/Fonts/ElementUIFonts.swift
View File

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

40
DesignKit/Sources/Fonts/Fonts.swift
View File

@@ -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.
var title3SB: FontType { get }
/// `title3` with a Bold weight.
var title3Bold: FontType { get }
/// The font for headings.
var headline: FontType { get }
/// The font for subheadings.
var subheadline: FontType { get }
/// `headline` with a Bold weight.
var headlineBold: FontType { get }
/// The font for body text.
var body: FontType { get }
/// `body` with a Semi Bold weight.
var bodySB: FontType { get }
/// `body` with a Bold weight.
var bodyBold: FontType { get }
/// The font for callouts.
var callout: FontType { get }
/// `callout` with a Semi Bold weight.
var calloutSB: FontType { get }
/// `callout` with a Bold weight.
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.
var footnoteSB: FontType { get }
/// `footnote` with a Bold weight.
var footnoteBold: FontType { get }
/// The font for standard captions.
var caption1: FontType { get }
/// `caption1` with a Semi Bold weight.
var caption1SB: FontType { get }
/// `caption1` with a Bold weight.
var caption1Bold: FontType { get }
/// The font for alternate captions.
var caption2: FontType { get }
/// `caption2` with a Semi Bold weight.
var caption2SB: FontType { get }
/// `caption2` with a Bold weight.
var caption2Bold: FontType { get }
}

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

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

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

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

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

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

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

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

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

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

1
changelog.d/pr-187.change Normal file
View File

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