#43: Add DesignKit package

* Begin implementing DesignKit package. * Use element-design-tokens repo. * Rename Fonts to align with Colours.
2026-11-03 06:31:27 +00:00 · 2022-05-26 13:31:38 +01:00
parent 8fec97217f
commit edf765b7cd
14 changed files with 812 additions and 1 deletions
@@ -0,0 +1,69 @@
+//
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+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())
+}
+
+/// Struct for holding fonts for use in SwiftUI.
+public struct ElementFonts: Fonts {
+    public let largeTitle: Font
+    public let largeTitleB: Font
+    public let title1: Font
+    public let title1B: Font
+    public let title2: Font
+    public let title2B: Font
+    public let title3: Font
+    public let title3SB: Font
+    public let headline: Font
+    public let subheadline: Font
+    public let body: Font
+    public let bodySB: Font
+    public let callout: Font
+    public let calloutSB: Font
+    public let footnote: Font
+    public let footnoteSB: Font
+    public let caption1: Font
+    public let caption1SB: Font
+    public let caption2: Font
+    public let caption2SB: Font
+    
+    public init(values: ElementSharedFonts) {
+        largeTitle = values.largeTitle.font
+        largeTitleB = values.largeTitleB.font
+        title1 = values.title1.font
+        title1B = values.title1B.font
+        title2 = values.title2.font
+        title2B = values.title2B.font
+        title3 = values.title3.font
+        title3SB = values.title3SB.font
+        headline = values.headline.font
+        subheadline = values.subheadline.font
+        body = values.body.font
+        bodySB = values.bodySB.font
+        callout = values.callout.font
+        calloutSB = values.calloutSB.font
+        footnote = values.footnote.font
+        footnoteSB = values.footnoteSB.font
+        caption1 = values.caption1.font
+        caption1SB = values.caption1SB.font
+        caption2 = values.caption2.font
+        caption2SB = values.caption2SB.font
+    }
+}
@@ -0,0 +1,145 @@
+//
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+/// Fonts at  https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0
+@objcMembers
+public class ElementSharedFonts {
+    
+    // MARK: - Types
+    
+    /// A wrapper to provide both a `UIFont` and a SwiftUI `Font` in the same type.
+    /// The need for this comes from `Font` not adapting for dynamic type until the app
+    /// is restarted (or working at all in Xcode Previews) when initialised from a `UIFont`
+    /// (even if that font was created with the appropriate metrics).
+    public struct SharedFont {
+        public let uiFont: UIFont
+        public let font: Font
+    }
+    
+    // MARK: - Private
+    
+    /// Returns an instance of the font associated with the text style and scaled appropriately for the content size category defined in the trait collection.
+    /// Keep this method private method at the moment and create a DesignKit.Fonts.TextStyle if needed.
+    fileprivate func font(forTextStyle textStyle: UIFont.TextStyle, compatibleWith traitCollection: UITraitCollection? = nil) -> UIFont {
+        return UIFont.preferredFont(forTextStyle: textStyle, compatibleWith: traitCollection)
+    }
+}
+
+// MARK: - Fonts protocol
+extension ElementSharedFonts {
+    
+    public var largeTitle: SharedFont {
+        let uiFont = font(forTextStyle: .largeTitle)
+        return SharedFont(uiFont: uiFont, font: .largeTitle)
+    }
+    
+    public var largeTitleB: SharedFont {
+        let uiFont = largeTitle.uiFont.bold
+        return SharedFont(uiFont: uiFont, font: .largeTitle.bold())
+    }
+            
+    public var title1: SharedFont {
+        let uiFont = font(forTextStyle: .title1)
+        return SharedFont(uiFont: uiFont, font: .title)
+    }
+    
+    public var title1B: SharedFont {
+        let uiFont = title1.uiFont.bold
+        return SharedFont(uiFont: uiFont, font: .title.bold())
+    }
+    
+    public var title2: SharedFont {
+        let uiFont = font(forTextStyle: .title2)
+        return SharedFont(uiFont: uiFont, font: .title2)
+    }
+    
+    public var title2B: SharedFont {
+        let uiFont = title2.uiFont.bold
+        return SharedFont(uiFont: uiFont, font: .title2.bold())
+    }
+    
+    public var title3: SharedFont {
+        let uiFont = font(forTextStyle: .title3)
+        return SharedFont(uiFont: uiFont, font: .title3)
+    }
+    
+    public var title3SB: SharedFont {
+        let uiFont = title3.uiFont.semiBold
+        return SharedFont(uiFont: uiFont, font: .title3.weight(.semibold))
+    }
+    
+    public var headline: SharedFont {
+        let uiFont = font(forTextStyle: .headline)
+        return SharedFont(uiFont: uiFont, font: .headline)
+    }
+    
+    public var subheadline: SharedFont {
+        let uiFont = font(forTextStyle: .subheadline)
+        return SharedFont(uiFont: uiFont, font: .subheadline)
+    }
+    
+    public var body: SharedFont {
+        let uiFont = font(forTextStyle: .body)
+        return SharedFont(uiFont: uiFont, font: .body)
+    }
+    
+    public var bodySB: SharedFont {
+        let uiFont = body.uiFont.semiBold
+        return SharedFont(uiFont: uiFont, font: .body.weight(.semibold))
+    }
+    
+    public var callout: SharedFont {
+        let uiFont = font(forTextStyle: .callout)
+        return SharedFont(uiFont: uiFont, font: .callout)
+    }
+    
+    public var calloutSB: SharedFont {
+        let uiFont = callout.uiFont.semiBold
+        return SharedFont(uiFont: uiFont, font: .callout.weight(.semibold))
+    }
+    
+    public var footnote: SharedFont {
+        let uiFont = font(forTextStyle: .footnote)
+        return SharedFont(uiFont: uiFont, font: .footnote)
+    }
+    
+    public var footnoteSB: SharedFont {
+        let uiFont = footnote.uiFont.semiBold
+        return SharedFont(uiFont: uiFont, font: .footnote.weight(.semibold))
+    }
+    
+    public var caption1: SharedFont {
+        let uiFont = font(forTextStyle: .caption1)
+        return SharedFont(uiFont: uiFont, font: .caption)
+    }
+    
+    public var caption1SB: SharedFont {
+        let uiFont = caption1.uiFont.semiBold
+        return SharedFont(uiFont: uiFont, font: .caption.weight(.semibold))
+    }
+    
+    public var caption2: SharedFont {
+        let uiFont = font(forTextStyle: .caption2)
+        return SharedFont(uiFont: uiFont, font: .caption2)
+    }
+    
+    public var caption2SB: SharedFont {
+        let uiFont = caption2.uiFont.semiBold
+        return SharedFont(uiFont: uiFont, font: .caption2.weight(.semibold))
+    }
+}
@@ -0,0 +1,69 @@
+//
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+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 class for holding fonts for use in UIKit.
+@objcMembers public class ElementUIFonts: NSObject, Fonts {
+    public let largeTitle: UIFont
+    public let largeTitleB: UIFont
+    public let title1: UIFont
+    public let title1B: UIFont
+    public let title2: UIFont
+    public let title2B: UIFont
+    public let title3: UIFont
+    public let title3SB: UIFont
+    public let headline: UIFont
+    public let subheadline: UIFont
+    public let body: UIFont
+    public let bodySB: UIFont
+    public let callout: UIFont
+    public let calloutSB: UIFont
+    public let footnote: UIFont
+    public let footnoteSB: UIFont
+    public let caption1: UIFont
+    public let caption1SB: UIFont
+    public let caption2: UIFont
+    public let caption2SB: UIFont
+    
+    public init(values: ElementSharedFonts) {
+        largeTitle = values.largeTitle.uiFont
+        largeTitleB = values.largeTitleB.uiFont
+        title1 = values.title1.uiFont
+        title1B = values.title1B.uiFont
+        title2 = values.title2.uiFont
+        title2B = values.title2B.uiFont
+        title3 = values.title3.uiFont
+        title3SB = values.title3SB.uiFont
+        headline = values.headline.uiFont
+        subheadline = values.subheadline.uiFont
+        body = values.body.uiFont
+        bodySB = values.bodySB.uiFont
+        callout = values.callout.uiFont
+        calloutSB = values.calloutSB.uiFont
+        footnote = values.footnote.uiFont
+        footnoteSB = values.footnoteSB.uiFont
+        caption1 = values.caption1.uiFont
+        caption1SB = values.caption1SB.uiFont
+        caption2 = values.caption2.uiFont
+        caption2SB = values.caption2SB.uiFont
+    }
+}
@@ -0,0 +1,85 @@
+//
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Foundation
+
+/// Describe fonts used in the application.
+/// Font names are based on Element typography  https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0 which is based on Apple font text styles (UIFont.TextStyle): https://developer.apple.com/documentation/uikit/uifonttextstyle
+/// Create a custom TextStyle enum (like DesignKit.Fonts.TextStyle) is also a possibility
+public protocol Fonts {
+    
+    associatedtype FontType
+    
+    /// The font for large titles.
+    var largeTitle: FontType { get }
+    
+    /// `largeTitle` with a Bold weight.
+    var largeTitleB: FontType { get }
+    
+    /// The font for first-level hierarchical headings.
+    var title1: FontType { get }
+        
+    /// `title1` with a Bold weight.
+    var title1B: FontType { get }
+    
+    /// The font for second-level hierarchical headings.
+    var title2: FontType { get }
+    
+    /// `title2` with a Bold weight.
+    var title2B: FontType { get }
+    
+    /// The font for third-level hierarchical headings.
+    var title3: FontType { get }
+    
+    /// `title3` with a Semi Bold weight.
+    var title3SB: FontType { get }
+    
+    /// The font for headings.
+    var headline: FontType { get }
+    
+    /// The font for subheadings.
+    var subheadline: FontType { get }
+    
+    /// The font for body text.
+    var body: FontType { get }
+    
+    /// `body` with a Semi Bold weight.
+    var bodySB: FontType { get }
+    
+    /// The font for callouts.
+    var callout: FontType { get }
+    
+    /// `callout` with a Semi Bold weight.
+    var calloutSB: FontType { get }
+    
+    /// The font for footnotes.
+    var footnote: FontType { get }
+    
+    /// `footnote` with a Semi Bold weight.
+    var footnoteSB: FontType { get }
+    
+    /// The font for standard captions.
+    var caption1: FontType { get }
+
+    /// `caption1` with a Semi Bold weight.
+    var caption1SB: FontType { get }
+    
+    /// The font for alternate captions.
+    var caption2: FontType { get }
+    
+    /// `caption2` with a Semi Bold weight.
+    var caption2SB: FontType { get }
+}
@@ -0,0 +1,57 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import UIKit
+
+public extension UIFont {
+    
+    // MARK: - Convenient methods
+    
+    /// Update current font with a SymbolicTraits
+    func withTraits(_ traits: UIFontDescriptor.SymbolicTraits) -> UIFont {
+        guard let descriptor = fontDescriptor.withSymbolicTraits(traits) else {
+            return self
+        }
+        
+        // Size 0 means keep the size as it is
+        return UIFont(descriptor: descriptor, size: 0)
+    }
+    
+    /// Update current font with a given Weight
+    func withWeight(weight: Weight) -> UIFont {
+        // Add the font weight to the descriptor
+        let weightedFontDescriptor = fontDescriptor.addingAttributes([
+            UIFontDescriptor.AttributeName.traits: [
+                UIFontDescriptor.TraitKey.weight: weight
+            ]
+        ])
+        return UIFont(descriptor: weightedFontDescriptor, size: 0)
+    }
+    
+    // MARK: - Shortcuts
+    
+    var bold: UIFont {
+        return withTraits(.traitBold)
+    }
+    
+    var semiBold: UIFont {
+        return withWeight(weight: .semibold)
+    }
+
+    var italic: UIFont {
+        return withTraits(.traitItalic)
+    }
+}