add headline, body and button font sets in the cofig

mikhailChelbaev · mikhailChelbaev · commit f822743a275a · 2024-12-18T16:49:31.000+01:00
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift
@@ -91,17 +91,45 @@ struct CornerRadiusPicker<Custom: View>: View {
   }
 }
 
-// MARK: - FontPicker
+// MARK: - FontPickers
 
-struct FontPicker: View {
+struct BodyFontPicker: View {
   @Binding var selection: UniversalFont?
 
   var body: some View {
     Picker("Font", selection: self.$selection) {
       Text("Default").tag(Optional<UniversalFont>.none)
-      Text("Small").tag(UniversalFont.Component.small)
-      Text("Medium").tag(UniversalFont.Component.medium)
-      Text("Large").tag(UniversalFont.Component.large)
+      Text("Small").tag(UniversalFont.smBody)
+      Text("Medium").tag(UniversalFont.mdBody)
+      Text("Large").tag(UniversalFont.lgBody)
+      Text("Custom: system bold of size 18").tag(UniversalFont.system(size: 18, weight: .bold))
+    }
+  }
+}
+
+struct ButtonFontPicker: View {
+  @Binding var selection: UniversalFont?
+  
+  var body: some View {
+    Picker("Font", selection: self.$selection) {
+      Text("Default").tag(Optional<UniversalFont>.none)
+      Text("Small").tag(UniversalFont.smButton)
+      Text("Medium").tag(UniversalFont.mdButton)
+      Text("Large").tag(UniversalFont.lgButton)
+      Text("Custom: system bold of size 18").tag(UniversalFont.system(size: 18, weight: .bold))
+    }
+  }
+}
+
+struct HeadlineFontPicker: View {
+  @Binding var selection: UniversalFont?
+
+  var body: some View {
+    Picker("Font", selection: self.$selection) {
+      Text("Default").tag(Optional<UniversalFont>.none)
+      Text("Small").tag(UniversalFont.smHeadline)
+      Text("Medium").tag(UniversalFont.mdHeadline)
+      Text("Large").tag(UniversalFont.lgHeadline)
       Text("Custom: system bold of size 18").tag(UniversalFont.system(size: 18, weight: .bold))
     }
   }
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift
@@ -22,7 +22,7 @@ struct ButtonPreview: View {
         CornerRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
-        FontPicker(selection: self.$model.font)
+        ButtonFontPicker(selection: self.$model.font)
         Toggle("Enabled", isOn: self.$model.isEnabled)
         Toggle("Full Width", isOn: self.$model.isFullWidth)
         SizePicker(selection: self.$model.size)
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CheckboxPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CheckboxPreview.swift
@@ -34,7 +34,7 @@ struct CheckboxPreview: View {
         CornerRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom: 2px").tag(ComponentRadius.custom(2))
         }
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         Toggle("Enabled", isOn: self.$model.isEnabled)
         SizePicker(selection: self.$model.size)
       }
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/InputFieldPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/InputFieldPreview.swift
@@ -38,7 +38,7 @@ struct InputFieldPreview: View {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         KeyboardTypePicker(selection: self.$model.keyboardType)
         Toggle("Placeholder", isOn: .init(
           get: {
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/RadioGroupPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/RadioGroupPreview.swift
@@ -33,7 +33,7 @@ struct RadioGroupPreview: View {
         AnimationScalePicker(selection: self.$model.animationScale)
         UniversalColorPicker(title: "Color", selection: self.$model.color)
         Toggle("Enabled", isOn: self.$model.isEnabled)
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         SizePicker(selection: self.$model.size)
         Picker("Spacing", selection: self.$model.spacing) {
           Text("8px").tag(CGFloat(8))
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/SegmentedControlPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/SegmentedControlPreview.swift
@@ -46,7 +46,7 @@ struct SegmentedControlPreview: View {
           Text("Custom: 4px").tag(ComponentRadius.custom(4))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         Toggle("Full Width", isOn: self.$model.isFullWidth)
         SizePicker(selection: self.$model.size)
       }
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/TextInputPreview.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/TextInputPreview.swift
@@ -38,7 +38,7 @@ struct TextInputPreviewPreview: View {
           Text("Custom: 20px").tag(ComponentRadius.custom(20))
         }
         Toggle("Enabled", isOn: self.$model.isEnabled)
-        FontPicker(selection: self.$model.font)
+        BodyFontPicker(selection: self.$model.font)
         KeyboardTypePicker(selection: self.$model.keyboardType)
         Picker("Max Rows", selection: self.$model.maxRows) {
           Text("2 Rows").tag(2)
diff --git a/Sources/ComponentsKit/Button/Models/ButtonVM.swift b/Sources/ComponentsKit/Button/Models/ButtonVM.swift
@@ -104,11 +104,11 @@ extension ButtonVM {
 
     switch self.size {
     case .small:
-      return UniversalFont.Component.small
+      return .smButton
     case .medium:
-      return UniversalFont.Component.medium
+      return .mdButton
     case .large:
-      return UniversalFont.Component.large
+      return .mdButton
     }
   }
   var height: CGFloat {
diff --git a/Sources/ComponentsKit/Checkbox/Models/CheckboxVM.swift b/Sources/ComponentsKit/Checkbox/Models/CheckboxVM.swift
@@ -98,11 +98,11 @@ extension CheckboxVM {
 
     switch self.size {
     case .small:
-      return UniversalFont.Component.small
+      return .smBody
     case .medium:
-      return UniversalFont.Component.medium
+      return .mdBody
     case .large:
-      return UniversalFont.Component.large
+      return .lgBody
     }
   }
 }
diff --git a/Sources/ComponentsKit/Configuration/Layout.swift b/Sources/ComponentsKit/Configuration/Layout.swift
@@ -50,9 +50,9 @@ public struct Layout: Initializable, Updatable {
     }
   }
 
-  // MARK: Font
+  // MARK: Fonts
 
-  public struct Font {
+  public struct FontSet {
     public var small: UniversalFont
     public var medium: UniversalFont
     public var large: UniversalFont
@@ -64,13 +64,25 @@ public struct Layout: Initializable, Updatable {
     }
   }
 
+  public struct Typography {
+    public var headline: FontSet
+    public var body: FontSet
+    public var button: FontSet
+
+    public init(headline: FontSet, body: FontSet, button: FontSet) {
+      self.headline = headline
+      self.body = body
+      self.button = button
+    }
+  }
+
   // MARK: Properties
 
   public var disabledOpacity: CGFloat = 0.5
   public var componentRadius: Radius = .init(
     small: 10.0,
-    medium: 14.0,
-    large: 18.0
+    medium: 12.0,
+    large: 16.0
   )
   public var borderWidth: BorderWidth = .init(
     small: 1.0,
@@ -82,10 +94,22 @@ public struct Layout: Initializable, Updatable {
     medium: 0.98,
     large: 0.95
   )
-  public var componentFont: Font = .init(
-    small: .system(size: 14, weight: .regular),
-    medium: .system(size: 18, weight: .regular),
-    large: .system(size: 22, weight: .regular)
+  public var typography: Typography = .init(
+    headline: .init(
+      small: .system(size: 14, weight: .semibold),
+      medium: .system(size: 20, weight: .semibold),
+      large: .system(size: 28, weight: .semibold)
+    ),
+    body: .init(
+      small: .system(size: 14, weight: .regular),
+      medium: .system(size: 16, weight: .regular),
+      large: .system(size: 18, weight: .regular)
+    ),
+    button: .init(
+      small: .system(size: 14, weight: .medium),
+      medium: .system(size: 16, weight: .medium),
+      large: .system(size: 20, weight: .medium)
+    )
   )
 
   public init() {}
diff --git a/Sources/ComponentsKit/InputField/Models/InputFieldVM.swift b/Sources/ComponentsKit/InputField/Models/InputFieldVM.swift
@@ -81,11 +81,11 @@ extension InputFieldVM {
 
     switch self.size {
     case .small:
-      return UniversalFont.Component.medium
+      return .smBody
     case .medium:
-      return UniversalFont.Component.medium
+      return .mdBody
     case .large:
-      return UniversalFont.Component.large
+      return .lgBody
     }
   }
   var height: CGFloat {
diff --git a/Sources/ComponentsKit/RadioGroup/Models/RadioGroupVM.swift b/Sources/ComponentsKit/RadioGroup/Models/RadioGroupVM.swift
@@ -93,11 +93,11 @@ extension RadioGroupVM {
 
     switch self.size {
     case .small:
-      return UniversalFont.Component.small
+      return .smBody
     case .medium:
-      return UniversalFont.Component.medium
+      return .mdBody
     case .large:
-      return UniversalFont.Component.large
+      return .lgBody
     }
   }
 
diff --git a/Sources/ComponentsKit/SegmentedControl/Models/SegmentedControlVM.swift b/Sources/ComponentsKit/SegmentedControl/Models/SegmentedControlVM.swift
@@ -114,11 +114,11 @@ extension SegmentedControlVM {
 
     switch self.size {
     case .small:
-      return UniversalFont.Component.small
+      return .smBody
     case .medium:
-      return UniversalFont.Component.medium
+      return .mdBody
     case .large:
-      return UniversalFont.Component.large
+      return .lgBody
     }
   }
 }
diff --git a/Sources/ComponentsKit/Shared/UniversalFont.swift b/Sources/ComponentsKit/Shared/UniversalFont.swift
@@ -115,15 +115,33 @@ extension UniversalFont.Weight {
 // MARK: - UniversalFont + Config
 
 extension UniversalFont {
-  public enum Component {
-    public static var small: UniversalFont {
-      return ComponentsKitConfig.shared.layout.componentFont.small
-    }
-    public static var medium: UniversalFont {
-      return ComponentsKitConfig.shared.layout.componentFont.medium
-    }
-    public static var large: UniversalFont {
-      return ComponentsKitConfig.shared.layout.componentFont.large
-    }
+  public static var smHeadline: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.headline.small
+  }
+  public static var mdHeadline: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.headline.medium
+  }
+  public static var lgHeadline: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.headline.large
+  }
+
+  public static var smBody: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.body.small
+  }
+  public static var mdBody: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.body.medium
+  }
+  public static var lgBody: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.body.large
+  }
+
+  public static var smButton: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.button.small
+  }
+  public static var mdButton: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.button.medium
+  }
+  public static var lgButton: UniversalFont {
+    return ComponentsKitConfig.shared.layout.typography.button.large
   }
 }
diff --git a/Sources/ComponentsKit/TextInput/Models/TextInputVM.swift b/Sources/ComponentsKit/TextInput/Models/TextInputVM.swift
@@ -93,11 +93,11 @@ extension TextInputVM {
 
     switch self.size {
     case .small:
-      return UniversalFont.Component.small
+      return .smBody
     case .medium:
-      return UniversalFont.Component.medium
+      return .mdBody
     case .large:
-      return UniversalFont.Component.large
+      return .lgBody
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ struct ButtonPreview: View {`
`22`	`22`	`CornerRadiusPicker(selection: self.$model.cornerRadius) {`
`23`	`23`	`Text("Custom: 20px").tag(ComponentRadius.custom(20))`
`24`	`24`	`}`
`25`		`- FontPicker(selection: self.$model.font)`
	`25`	`+ ButtonFontPicker(selection: self.$model.font)`
`26`	`26`	`Toggle("Enabled", isOn: self.$model.isEnabled)`
`27`	`27`	`Toggle("Full Width", isOn: self.$model.isFullWidth)`
`28`	`28`	`SizePicker(selection: self.$model.size)`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ struct CheckboxPreview: View {`
`34`	`34`	`CornerRadiusPicker(selection: self.$model.cornerRadius) {`
`35`	`35`	`Text("Custom: 2px").tag(ComponentRadius.custom(2))`
`36`	`36`	`}`
`37`		`- FontPicker(selection: self.$model.font)`
	`37`	`+ BodyFontPicker(selection: self.$model.font)`
`38`	`38`	`Toggle("Enabled", isOn: self.$model.isEnabled)`
`39`	`39`	`SizePicker(selection: self.$model.size)`
`40`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ struct InputFieldPreview: View {`
`38`	`38`	`Text("Custom: 20px").tag(ComponentRadius.custom(20))`
`39`	`39`	`}`
`40`	`40`	`Toggle("Enabled", isOn: self.$model.isEnabled)`
`41`		`- FontPicker(selection: self.$model.font)`
	`41`	`+ BodyFontPicker(selection: self.$model.font)`
`42`	`42`	`KeyboardTypePicker(selection: self.$model.keyboardType)`
`43`	`43`	`Toggle("Placeholder", isOn: .init(`
`44`	`44`	`get: {`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ struct SegmentedControlPreview: View {`
`46`	`46`	`Text("Custom: 4px").tag(ComponentRadius.custom(4))`
`47`	`47`	`}`
`48`	`48`	`Toggle("Enabled", isOn: self.$model.isEnabled)`
`49`		`- FontPicker(selection: self.$model.font)`
	`49`	`+ BodyFontPicker(selection: self.$model.font)`
`50`	`50`	`Toggle("Full Width", isOn: self.$model.isFullWidth)`
`51`	`51`	`SizePicker(selection: self.$model.size)`
`52`	`52`	`}`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ struct TextInputPreviewPreview: View {`
`38`	`38`	`Text("Custom: 20px").tag(ComponentRadius.custom(20))`
`39`	`39`	`}`
`40`	`40`	`Toggle("Enabled", isOn: self.$model.isEnabled)`
`41`		`- FontPicker(selection: self.$model.font)`
	`41`	`+ BodyFontPicker(selection: self.$model.font)`
`42`	`42`	`KeyboardTypePicker(selection: self.$model.keyboardType)`
`43`	`43`	`Picker("Max Rows", selection: self.$model.maxRows) {`
`44`	`44`	`Text("2 Rows").tag(2)`
Original file line number	Diff line number	Diff line change
`@@ -104,11 +104,11 @@ extension ButtonVM {`
`104`	`104`
`105`	`105`	`switch self.size {`
`106`	`106`	`case .small:`
`107`		`- return UniversalFont.Component.small`
	`107`	`+ return .smButton`
`108`	`108`	`case .medium:`
`109`		`- return UniversalFont.Component.medium`
	`109`	`+ return .mdButton`
`110`	`110`	`case .large:`
`111`		`- return UniversalFont.Component.large`
	`111`	`+ return .mdButton`
`112`	`112`	`}`
`113`	`113`	`}`
`114`	`114`	`var height: CGFloat {`
Original file line number	Diff line number	Diff line change
`@@ -98,11 +98,11 @@ extension CheckboxVM {`
`98`	`98`
`99`	`99`	`switch self.size {`
`100`	`100`	`case .small:`
`101`		`- return UniversalFont.Component.small`
	`101`	`+ return .smBody`
`102`	`102`	`case .medium:`
`103`		`- return UniversalFont.Component.medium`
	`103`	`+ return .mdBody`
`104`	`104`	`case .large:`
`105`		`- return UniversalFont.Component.large`
	`105`	`+ return .lgBody`
`106`	`106`	`}`
`107`	`107`	`}`
`108`	`108`	`}`