Merge pull request #69 from DroidKaigi/feature/typography_tokens

DroidKaigi · Jun 25, 2024 · 8873ff0 · 8873ff0
2 parents db29a33 + 62a59a1
commit 8873ff0
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 3 deletions.
diff --git a/app-ios/App/App.swift b/app-ios/App/App.swift
@@ -3,6 +3,7 @@ import SwiftUI
 #if canImport(App)
 import App
 import ComposableArchitecture
+import Theme
 
 final class AppDelegate: NSObject, UIApplicationDelegate {
     let store = Store(
@@ -20,6 +21,8 @@ final class AppDelegate: NSObject, UIApplicationDelegate {
 struct DroidKaigi2024AppApp: App {
     @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
 
+    init() { FontAssets.registerAllCustomFonts() }
+
     var body: some Scene {
         WindowGroup {
             RootView(store: appDelegate.store)

diff --git a/app-ios/Sources/Theme/File.swift b/app-ios/Sources/Theme/File.swift
diff --git a/app-ios/Sources/Theme/Resources/Font/DotGothic16-Regular.ttf b/app-ios/Sources/Theme/Resources/Font/DotGothic16-Regular.ttf
diff --git a/app-ios/Sources/Theme/Resources/Font/Roboto-Regular.ttf b/app-ios/Sources/Theme/Resources/Font/Roboto-Regular.ttf
diff --git a/app-ios/Sources/Theme/TextModifier.swift b/app-ios/Sources/Theme/TextModifier.swift
@@ -0,0 +1,17 @@
+import SwiftUI
+
+extension Text {
+    public func textStyle(_ style: TextStyle) -> some View {
+        self.modifier(TextStyleModifier(style: style))
+    }
+}
+
+private struct TextStyleModifier: ViewModifier {
+    var style: TextStyle
+    func body(content: Content) -> some View {
+        content
+            .font(style.font)
+            .lineSpacing(style.lineHeight)
+            .tracking(style.letterSpacing ?? 0)
+    }
+}
diff --git a/app-ios/Sources/Theme/Typography.swift b/app-ios/Sources/Theme/Typography.swift
@@ -0,0 +1,43 @@
+import SwiftUI
+
+public struct TextStyle: Sendable {
+    var font: SwiftUI.Font
+    var lineHeight: CGFloat
+    var letterSpacing: CGFloat?
+}
+
+extension TextStyle {
+    public static let displayLarge: TextStyle = TypographyTokens.displayLarge
+    public static let displayMedium: TextStyle = TypographyTokens.displayMedium
+    public static let displaySmall: TextStyle = TypographyTokens.displaySmall
+    public static let headlineLarge: TextStyle = TypographyTokens.headlineLarge
+    public static let headlineMedium: TextStyle = TypographyTokens.headlineMedium
+    public static let headlineSmall: TextStyle = TypographyTokens.headlineSmall
+    public static let titleLarge: TextStyle = TypographyTokens.titleLarge
+    public static let titleMedium: TextStyle = TypographyTokens.titleMedium
+    public static let titleSmall: TextStyle = TypographyTokens.titleSmall
+    public static let bodyLarge: TextStyle = TypographyTokens.bodyLarge
+    public static let bodyMedium: TextStyle = TypographyTokens.bodyMedium
+    public static let bodySmall: TextStyle = TypographyTokens.bodySmall
+    public static let labelLarge: TextStyle = TypographyTokens.labelLarge
+    public static let labelMedium: TextStyle = TypographyTokens.labelMedium
+    public static let labelSmall: TextStyle = TypographyTokens.labelSmall
+}
+
+enum TypographyTokens {
+    static let displayLarge = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 57), lineHeight: 64 - 57, letterSpacing: -0.25)
+    static let displayMedium = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 45), lineHeight: 52 - 45)
+    static let displaySmall = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 36), lineHeight: 44 - 36)
+    static let headlineLarge = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 32), lineHeight: 40 - 32)
+    static let headlineMedium = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 28), lineHeight: 36 - 28)
+    static let headlineSmall = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 24), lineHeight: 32 - 24)
+    static let titleLarge = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 22), lineHeight: 28 - 22)
+    static let titleMedium = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 16), lineHeight: 24 - 16, letterSpacing: 0.15)
+    static let titleSmall = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 14), lineHeight: 20 - 14, letterSpacing: 0.1)
+    static let labelLarge = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 14), lineHeight: 20 - 14, letterSpacing: 0.1)
+    static let labelMedium = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 12), lineHeight: 16 - 12, letterSpacing: 0.5)
+    static let labelSmall = TextStyle(font: FontAssets.DotGothic16.regular.swiftUIFont(size: 11), lineHeight: 16 - 11, letterSpacing: 0.5)
+    static let bodyLarge = TextStyle(font: FontAssets.Roboto.regular.swiftUIFont(size: 16), lineHeight: 24 - 16, letterSpacing: 0.5)
+    static let bodyMedium = TextStyle(font: FontAssets.Roboto.regular.swiftUIFont(size: 14), lineHeight: 20 - 14, letterSpacing: 0.25)
+    static let bodySmall = TextStyle(font: FontAssets.Roboto.regular.swiftUIFont(size: 12), lineHeight: 16 - 12, letterSpacing: 0.4)
+}
diff --git a/app-ios/Sources/Theme/swiftgen.yml b/app-ios/Sources/Theme/swiftgen.yml
@@ -9,3 +9,13 @@ xcassets:
     params:
       enumName: AssetColors
       publicAccess: true
+
+fonts:
+  inputs:
+    - Font
+  outputs:
+    templateName: swift5
+    output: Fonts.swift
+    params:
+      enumName: FontAssets
+      publicAccess: true