From 2b2ab3fd983ff44ce7c3304336148288e764d6d7 Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Mon, 21 Jun 2021 21:06:30 +0200 Subject: [PATCH 1/9] DesignKit: Move color files. --- DesignKit/Variants/{ => Colors}/Dark/DarkColors.swift | 0 DesignKit/Variants/{ => Colors}/Light/LightColors.swift | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename DesignKit/Variants/{ => Colors}/Dark/DarkColors.swift (100%) rename DesignKit/Variants/{ => Colors}/Light/LightColors.swift (100%) diff --git a/DesignKit/Variants/Dark/DarkColors.swift b/DesignKit/Variants/Colors/Dark/DarkColors.swift similarity index 100% rename from DesignKit/Variants/Dark/DarkColors.swift rename to DesignKit/Variants/Colors/Dark/DarkColors.swift diff --git a/DesignKit/Variants/Light/LightColors.swift b/DesignKit/Variants/Colors/Light/LightColors.swift similarity index 100% rename from DesignKit/Variants/Light/LightColors.swift rename to DesignKit/Variants/Colors/Light/LightColors.swift From 3f224770d1917fe7baed1b54775097ced6b3ecc4 Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Mon, 21 Jun 2021 21:07:31 +0200 Subject: [PATCH 2/9] DesignKit: Add Fonts protocol. --- DesignKit/Source/Fonts.swift | 46 ++++++++++++++++++++++++++++++++++ DesignKit/Source/ThemeV2.swift | 3 +++ 2 files changed, 49 insertions(+) create mode 100644 DesignKit/Source/Fonts.swift diff --git a/DesignKit/Source/Fonts.swift b/DesignKit/Source/Fonts.swift new file mode 100644 index 000000000..cbacbe991 --- /dev/null +++ b/DesignKit/Source/Fonts.swift @@ -0,0 +1,46 @@ +// +// 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 + +/// Describe Fonts +@objc public protocol Fonts { + + /// Returns an instance of the font associated with the text style and scaled appropriately for the content size category defined in the trait collection. + func font(forTextStyle textStyle: UIFont.TextStyle, compatibleWith traitCollection: UITraitCollection?) -> UIFont + + // MARK: - TextStyle shortcuts + + var largeTitle: UIFont { get } + var title1: UIFont { get } + var title2: UIFont { get } + var title3: UIFont { get } + var headline: UIFont { get } + var subheadline: UIFont { get } + var body: UIFont { get } + var callout: UIFont { get } + var caption1: UIFont { get } + var caption2: UIFont { get } +} + +// MARK: - Default implementation +extension Fonts { + + /// Returns an instance of the font associated with the text style and scaled appropriately for the user's selected content size category. + func font(forTextStyle textStyle: UIFont.TextStyle) -> UIFont { + return self.font(forTextStyle: textStyle, compatibleWith: nil) + } +} diff --git a/DesignKit/Source/ThemeV2.swift b/DesignKit/Source/ThemeV2.swift index 48f310992..785639861 100644 --- a/DesignKit/Source/ThemeV2.swift +++ b/DesignKit/Source/ThemeV2.swift @@ -23,6 +23,9 @@ import UIKit /// Colors object var colors: Colors { get } + /// Fonts object + var fonts: Fonts { get } + /// may contain more design components in future, like icons, audio files etc. } From b1cd5ce76071e5d13b90bc612aebd29b589cbb46 Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Mon, 21 Jun 2021 21:11:51 +0200 Subject: [PATCH 3/9] DesignKit: Add Fonts implementation. --- DesignKit/Variants/Fonts/ElementFonts.swift | 76 +++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 DesignKit/Variants/Fonts/ElementFonts.swift diff --git a/DesignKit/Variants/Fonts/ElementFonts.swift b/DesignKit/Variants/Fonts/ElementFonts.swift new file mode 100644 index 000000000..5465df819 --- /dev/null +++ b/DesignKit/Variants/Fonts/ElementFonts.swift @@ -0,0 +1,76 @@ +// +// 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 + +/// Fonts at https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0 +@objcMembers +public class ElementFonts: Fonts { + + // MARK: - Setup + + public init() { + } + + // MARK: - Public + + /// Returns an instance of the font associated with the text style and scaled appropriately for the content size category defined in the trait collection. + public func font(forTextStyle textStyle: UIFont.TextStyle, compatibleWith traitCollection: UITraitCollection?) -> UIFont { + return UIFont.preferredFont(forTextStyle: textStyle, compatibleWith: traitCollection) + } + + // MARK: TextStyle shortcuts + + public var largeTitle: UIFont { + return self.font(forTextStyle: .largeTitle) + } + + public var title1: UIFont { + return self.font(forTextStyle: .title1) + } + + public var title2: UIFont { + return self.font(forTextStyle: .title2) + } + + public var title3: UIFont { + return self.font(forTextStyle: .title3) + } + + public var headline: UIFont { + return self.font(forTextStyle: .headline) + } + + public var subheadline: UIFont { + return self.font(forTextStyle: .subheadline) + } + + public var body: UIFont { + return self.font(forTextStyle: .body) + } + + public var callout: UIFont { + return self.font(forTextStyle: .callout) + } + + public var caption1: UIFont { + return self.font(forTextStyle: .caption1) + } + + public var caption2: UIFont { + return self.font(forTextStyle: .caption2) + } +} From e1312a4b024a2fba7d79720d2e594c0769c12de6 Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Mon, 21 Jun 2021 21:12:27 +0200 Subject: [PATCH 4/9] Theme: Update DarkTheme and DefaultTheme with fonts property. --- Riot/Managers/Theme/Themes/DarkTheme.swift | 4 ++++ Riot/Managers/Theme/Themes/DefaultTheme.swift | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/Riot/Managers/Theme/Themes/DarkTheme.swift b/Riot/Managers/Theme/Themes/DarkTheme.swift index a3bc39557..7ce49c214 100644 --- a/Riot/Managers/Theme/Themes/DarkTheme.swift +++ b/Riot/Managers/Theme/Themes/DarkTheme.swift @@ -146,4 +146,8 @@ class DarkTheme: NSObject, Theme { lazy var colors: Colors = { return DarkColors() }() + + lazy var fonts: Fonts = { + return ElementFonts() + }() } diff --git a/Riot/Managers/Theme/Themes/DefaultTheme.swift b/Riot/Managers/Theme/Themes/DefaultTheme.swift index 7f6ae77b1..770f33a90 100644 --- a/Riot/Managers/Theme/Themes/DefaultTheme.swift +++ b/Riot/Managers/Theme/Themes/DefaultTheme.swift @@ -153,4 +153,8 @@ class DefaultTheme: NSObject, Theme { lazy var colors: Colors = { return LightColors() }() + + lazy var fonts: Fonts = { + return ElementFonts() + }() } From 43c986786b8be7d1f91cfd6420d7a4e23e8ff4fb Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Mon, 21 Jun 2021 21:13:29 +0200 Subject: [PATCH 5/9] UIFont: Add convenient methods. --- Riot/Categories/UIFont.swift | 55 ++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 Riot/Categories/UIFont.swift diff --git a/Riot/Categories/UIFont.swift b/Riot/Categories/UIFont.swift new file mode 100644 index 000000000..c7a10ad49 --- /dev/null +++ b/Riot/Categories/UIFont.swift @@ -0,0 +1,55 @@ +// +// 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 + +public extension UIFont { + + // MARK: - Convenient methods + + /// Update current font with a SymbolicTraits + func vc_withTraits(_ traits: UIFontDescriptor.SymbolicTraits) -> UIFont { + guard let descriptor = fontDescriptor.withSymbolicTraits(traits) else { + return self + } + return UIFont(descriptor: descriptor, size: 0) // Size 0 means keep the size as it is + } + + /// Update current font with a given Weight + func vc_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 vc_bold: UIFont { + return self.vc_withTraits(.traitBold) + } + + var vc_semiBold: UIFont { + return self.vc_withWeight(weight: .semibold) + } + + var vc_italic: UIFont { + return self.vc_withTraits(.traitItalic) + } +} From 1718a873aab8caba7009c837625ce9cf6140587e Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Mon, 21 Jun 2021 21:16:56 +0200 Subject: [PATCH 6/9] Update changes --- CHANGES.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGES.rst b/CHANGES.rst index 19a21510b..b6182cb76 100644 --- a/CHANGES.rst +++ b/CHANGES.rst @@ -5,7 +5,7 @@ Changes to be released in next version * 🙌 Improvements - * + * DesignKit: Add Fonts (#4356). 🐛 Bugfix * From c89610fb70ea2b50dbd6713e4e23f6ee302eba2e Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Thu, 24 Jun 2021 15:48:32 +0200 Subject: [PATCH 7/9] DesignKit: Update Fonts protocol. --- DesignKit/Source/Fonts.swift | 83 ++++++++++++++++++++++++++---------- 1 file changed, 60 insertions(+), 23 deletions(-) diff --git a/DesignKit/Source/Fonts.swift b/DesignKit/Source/Fonts.swift index cbacbe991..1cce963ed 100644 --- a/DesignKit/Source/Fonts.swift +++ b/DesignKit/Source/Fonts.swift @@ -16,31 +16,68 @@ import UIKit -/// Describe Fonts +/// Describe fonts used in the application. +/// Font names are based on Element typograhy 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 possiblity @objc public protocol Fonts { - /// Returns an instance of the font associated with the text style and scaled appropriately for the content size category defined in the trait collection. - func font(forTextStyle textStyle: UIFont.TextStyle, compatibleWith traitCollection: UITraitCollection?) -> UIFont - - // MARK: - TextStyle shortcuts - + /// The font for large titles. var largeTitle: UIFont { get } - var title1: UIFont { get } - var title2: UIFont { get } - var title3: UIFont { get } - var headline: UIFont { get } - var subheadline: UIFont { get } - var body: UIFont { get } - var callout: UIFont { get } - var caption1: UIFont { get } - var caption2: UIFont { get } -} - -// MARK: - Default implementation -extension Fonts { - /// Returns an instance of the font associated with the text style and scaled appropriately for the user's selected content size category. - func font(forTextStyle textStyle: UIFont.TextStyle) -> UIFont { - return self.font(forTextStyle: textStyle, compatibleWith: nil) - } + /// `largeTitle` with a Bold weight. + var largeTitleB: UIFont { get } + + /// The font for first-level hierarchical headings. + var title1: UIFont { get } + + /// `title1` with a Bold weight. + var title1B: UIFont { get } + + /// The font for second-level hierarchical headings. + var title2: UIFont { get } + + /// `title2` with a Bold weight. + var title2B: UIFont { get } + + /// The font for third-level hierarchical headings. + var title3: UIFont { get } + + /// `title3` with a Semi Bold weight. + var title3SB: UIFont { get } + + /// The font for headings. + var headline: UIFont { get } + + /// The font for subheadings. + var subheadline: UIFont { get } + + /// The font for body text. + var body: UIFont { get } + + /// `body` with a Semi Bold weight. + var bodySB: UIFont { get } + + /// The font for callouts. + var callout: UIFont { get } + + /// `callout` with a Semi Bold weight. + var calloutSB: UIFont { get } + + /// The font for footnotes. + var footnote: UIFont { get } + + /// `footnote` with a Semi Bold weight. + var footnoteSB: UIFont { get } + + /// The font for standard captions. + var caption1: UIFont { get } + + /// `caption1` with a Semi Bold weight. + var caption1SB: UIFont { get } + + /// The font for alternate captions. + var caption2: UIFont { get } + + /// `caption2` with a Semi Bold weight. + var caption2SB: UIFont { get } } From cf89bd017081288e579becfdbb26bed23136c57e Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Thu, 24 Jun 2021 15:49:38 +0200 Subject: [PATCH 8/9] DesignKit: Update ElementFonts with new Fonts protocol. --- .../Extensions}/UIFont.swift | 2 +- DesignKit/Variants/Fonts/ElementFonts.swift | 53 +++++++++++++++++-- 2 files changed, 49 insertions(+), 6 deletions(-) rename {Riot/Categories => DesignKit/Extensions}/UIFont.swift (98%) diff --git a/Riot/Categories/UIFont.swift b/DesignKit/Extensions/UIFont.swift similarity index 98% rename from Riot/Categories/UIFont.swift rename to DesignKit/Extensions/UIFont.swift index c7a10ad49..7804c8066 100644 --- a/Riot/Categories/UIFont.swift +++ b/DesignKit/Extensions/UIFont.swift @@ -14,7 +14,7 @@ // limitations under the License. // -import Foundation +import UIKit public extension UIFont { diff --git a/DesignKit/Variants/Fonts/ElementFonts.swift b/DesignKit/Variants/Fonts/ElementFonts.swift index 5465df819..6612d3dc1 100644 --- a/DesignKit/Variants/Fonts/ElementFonts.swift +++ b/DesignKit/Variants/Fonts/ElementFonts.swift @@ -18,38 +18,57 @@ import UIKit /// Fonts at https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=1362%3A0 @objcMembers -public class ElementFonts: Fonts { +public class ElementFonts { // MARK: - Setup public init() { } - // MARK: - Public + // 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. - public func font(forTextStyle textStyle: UIFont.TextStyle, compatibleWith traitCollection: UITraitCollection?) -> UIFont { + /// 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: TextStyle shortcuts +} + +// MARK: - Fonts protocol +extension ElementFonts: Fonts { public var largeTitle: UIFont { return self.font(forTextStyle: .largeTitle) } + + public var largeTitleB: UIFont { + return self.largeTitle.vc_bold + } public var title1: UIFont { return self.font(forTextStyle: .title1) } + public var title1B: UIFont { + return self.title1.vc_bold + } + public var title2: UIFont { return self.font(forTextStyle: .title2) } + public var title2B: UIFont { + return self.title2.vc_bold + } + public var title3: UIFont { return self.font(forTextStyle: .title3) } + public var title3SB: UIFont { + return self.title3.vc_semiBold + } + public var headline: UIFont { return self.font(forTextStyle: .headline) } @@ -62,15 +81,39 @@ public class ElementFonts: Fonts { return self.font(forTextStyle: .body) } + public var bodySB: UIFont { + return self.body.vc_semiBold + } + public var callout: UIFont { return self.font(forTextStyle: .callout) } + public var calloutSB: UIFont { + return self.callout.vc_semiBold + } + + public var footnote: UIFont { + return self.font(forTextStyle: .footnote) + } + + public var footnoteSB: UIFont { + return self.footnote.vc_semiBold + } + public var caption1: UIFont { return self.font(forTextStyle: .caption1) } + public var caption1SB: UIFont { + return self.caption1.vc_semiBold + } + public var caption2: UIFont { return self.font(forTextStyle: .caption2) } + + public var caption2SB: UIFont { + return self.caption2.vc_semiBold + } } From 187d7c541e714c87aae6fc923f596b76ab6d1e62 Mon Sep 17 00:00:00 2001 From: SBiOSoftWhare Date: Thu, 24 Jun 2021 15:50:06 +0200 Subject: [PATCH 9/9] SideMenu: Use right font for the display name. --- Riot/Modules/SideMenu/SideMenuViewController.swift | 1 + 1 file changed, 1 insertion(+) diff --git a/Riot/Modules/SideMenu/SideMenuViewController.swift b/Riot/Modules/SideMenu/SideMenuViewController.swift index 0851ec8df..57f98b059 100644 --- a/Riot/Modules/SideMenu/SideMenuViewController.swift +++ b/Riot/Modules/SideMenu/SideMenuViewController.swift @@ -107,6 +107,7 @@ final class SideMenuViewController: UIViewController { self.userAvatarView.update(theme: theme) self.userDisplayNameLabel.textColor = theme.textPrimaryColor + self.userDisplayNameLabel.font = theme.fonts.title3SB self.userIdLabel.textColor = theme.textSecondaryColor for sideMenuActionView in self.sideMenuActionViews {