Improvements

Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/ModalPreview+Helpers.swift

@@ -60,10 +60,10 @@ struct ModalPreviewHelpers {
       Section("Properties") {
         Picker("Background Color", selection: self.$model.backgroundColor) {
           Text("Default").tag(Optional<UniversalColor>.none)
-          Text("Accent Background").tag(ComponentColor.accent.background)
-          Text("Success Background").tag(ComponentColor.success.background)
-          Text("Warning Background").tag(ComponentColor.warning.background)
-          Text("Danger Background").tag(ComponentColor.danger.background)
+          Text("Accent Background").tag(UniversalColor.accentBackground)
+          Text("Success Background").tag(UniversalColor.successBackground)
+          Text("Warning Background").tag(UniversalColor.warningBackground)
+          Text("Danger Background").tag(UniversalColor.dangerBackground)
         }
         BorderWidthPicker(selection: self.$model.borderWidth)
         Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AlertPreview.swift

@@ -84,10 +84,10 @@ struct AlertPreview: View {
         Section("Main Properties") {
           Picker("Background Color", selection: self.$model.backgroundColor) {
             Text("Default").tag(Optional<UniversalColor>.none)
-            Text("Accent Background").tag(ComponentColor.accent.background)
-            Text("Success Background").tag(ComponentColor.success.background)
-            Text("Warning Background").tag(ComponentColor.warning.background)
-            Text("Danger Background").tag(ComponentColor.danger.background)
+            Text("Accent Background").tag(UniversalColor.accentBackground)
+            Text("Success Background").tag(UniversalColor.successBackground)
+            Text("Warning Background").tag(UniversalColor.warningBackground)
+            Text("Danger Background").tag(UniversalColor.dangerBackground)
           }
           BorderWidthPicker(selection: self.$model.borderWidth)
           Toggle("Closes On Overlay Tap", isOn: self.$model.closesOnOverlayTap)
@@ -154,7 +154,7 @@ Enim habitant laoreet inceptos scelerisque senectus, tellus molestie ut. Eros ri
   }
   static let initialSecondaryButton = AlertButtonVM {
     $0.title = SecondaryButtonText.short.rawValue
-    $0.style = .light
+    $0.style = .plain
   }
 
   var primaryButtonVMOrDefault: Binding<AlertButtonVM> {

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/BadgePreview.swift

@@ -17,21 +17,17 @@ struct BadgePreview: View {
         SUBadge(model: self.model)
       }
       Form {
+        ComponentOptionalColorPicker(selection: self.$model.color)
+        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
+          Text("Custom: 4px").tag(ComponentRadius.custom(4))
+        }
+        Toggle("Enabled", isOn: self.$model.isEnabled)
         Picker("Font", selection: self.$model.font) {
-          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 16").tag(UniversalFont.system(size: 16, weight: .bold))
         }
-        ComponentOptionalColorPicker(selection: self.$model.color)
-        ComponentRadiusPicker(selection: self.$model.cornerRadius) {
-          Text("Custom: 4px").tag(ComponentRadius.custom(4))
-        }
-        Picker("Style", selection: self.$model.style) {
-          Text("Filled").tag(BadgeVM.Style.filled)
-          Text("Light").tag(BadgeVM.Style.light)
-        }
         Picker("Paddings", selection: self.$model.paddings) {
           Text("8px; 6px")
             .tag(Paddings(top: 6, leading: 8, bottom: 6, trailing: 8))
@@ -40,6 +36,10 @@ struct BadgePreview: View {
           Text("12px; 10px")
             .tag(Paddings(top: 10, leading: 12, bottom: 10, trailing: 12))
         }
+        Picker("Style", selection: self.$model.style) {
+          Text("Filled").tag(BadgeVM.Style.filled)
+          Text("Light").tag(BadgeVM.Style.light)
+        }
       }
     }
   }

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CardPreview.swift

@@ -18,10 +18,10 @@ struct CardPreview: View {
         Picker("Background Color", selection: self.$model.backgroundColor) {
           Text("Default").tag(Optional<UniversalColor>.none)
           Text("Secondary Background").tag(UniversalColor.secondaryBackground)
-          Text("Accent Background").tag(ComponentColor.accent.background)
-          Text("Success Background").tag(ComponentColor.success.background)
-          Text("Warning Background").tag(ComponentColor.warning.background)
-          Text("Danger Background").tag(ComponentColor.danger.background)
+          Text("Accent Background").tag(UniversalColor.accentBackground)
+          Text("Success Background").tag(UniversalColor.successBackground)
+          Text("Warning Background").tag(UniversalColor.warningBackground)
+          Text("Danger Background").tag(UniversalColor.dangerBackground)
         }
         BorderWidthPicker(selection: self.$model.borderWidth)
         Picker("Content Paddings", selection: self.$model.contentPaddings) {
@@ -37,7 +37,7 @@ struct CardPreview: View {
           Text("Small").tag(Shadow.small)
           Text("Medium").tag(Shadow.medium)
           Text("Large").tag(Shadow.large)
-          Text("Custom").tag(Shadow.custom(20.0, .zero, ComponentColor.accent.background))
+          Text("Custom").tag(Shadow.custom(20.0, .zero, UniversalColor.accentBackground))
         }
       }
     }

README.md

@@ -88,12 +88,12 @@ inputField.resignFirstResponder()
 
 ### Styling
 
-**Config**
+**Theme**
 
-The library comes with predefined fonts, sizes and colors, but you can change these values to customize the appearance of your app. To do this, alter the config:
+The library comes with predefined fonts, sizes and colors, but you can change these values to customize the appearance of your app. To do this, alter the current theme:
 
 ```swift
-ComponentsKitConfig.shared.update {
+Theme.current.update {
   // Update colors
   $0.colors.primary = ...
 
@@ -103,12 +103,12 @@ ComponentsKitConfig.shared.update {
 ```
 
 > [!Note] 
-> The best place to set up the initial config is in the `func application(_:, didFinishLaunchingWithOptions:) -> Bool` method in your `AppDelegate` or a similar method in `SceneDelegate`.
+> The best place to set up the initial theme is in the `func application(_:, didFinishLaunchingWithOptions:) -> Bool` method in your `AppDelegate` or a similar method in `SceneDelegate`.
 
-By altering the config, you can also create *custom themes* for your app. To do this, first create a new instance of a config:
+By altering the theme, you can also create *custom themes* for your app. To do this, first create a new instance of a `Theme`:
 
 ```swift
-let halloweenTheme = ComponentsKitConfig {
+let halloweenTheme = Theme {
   $0.colors.background = .themed(
     light: .hex("#e38f36"),
     dark: .hex("#ba5421")
@@ -117,25 +117,26 @@ let halloweenTheme = ComponentsKitConfig {
 }
 ```
 
-When the user switches the theme, apply it by assigning it to the `shared` instance: 
+When the user switches the theme, apply it by assigning it to the `current` instance: 
 
 ```swift
-ComponentsKitConfig.shared = halloweenTheme
+Theme.current = halloweenTheme
 ```
 
 **Extend Colors**
 
-All colors from the config can be used within the app. For example:
+All colors from the theme can be used within the app. For example:
 
 ```swift
 // in UIKit
 view.backgroundColor = UniversalColor.background.uiColor
 
 // in SwiftUI
-UniversalColor.background.color
+SomeView()
+  .background(UniversalColor.background.color)
 ```
 
-If you want to use additional colors that are not included in the config, you can extend `UniversalColor`:
+If you want to use additional colors that are not included in the theme, you can extend `UniversalColor`:
 
 ```swift
 extension UniversalColor {
@@ -155,7 +156,7 @@ view.backgroundColor = UniversalColor.special.uiColor
 
 **Extend Fonts**
 
-If you want to use additional fonts that are not included in the config, you can extend `UniversalFont`:
+If you want to use additional fonts that are not included in the theme, you can extend `UniversalFont`:
 
 ```swift
 extension UniversalFont {

Sources/ComponentsKit/Components/Badge/Models/BadgeVM.swift

@@ -8,24 +8,29 @@ public struct BadgeVM: ComponentVM {
   /// The color of the badge.
   public var color: ComponentColor?
 
-  /// The visual style of the badge.
+  /// The corner radius of the badge.
   ///
-  /// Defaults to `.filled`.
-  public var style: Style = .filled
+  /// Defaults to `.medium`.
+  public var cornerRadius: ComponentRadius = .medium
 
   /// The font used for the badge's text.
   ///
   /// Defaults to `.smButton`.
   public var font: UniversalFont = .smButton
 
-  /// The corner radius of the badge.
+  /// A Boolean value indicating whether the button is enabled or disabled.
   ///
-  /// Defaults to `.medium`.
-  public var cornerRadius: ComponentRadius = .medium
+  /// Defaults to `true`.
+  public var isEnabled: Bool = true
 
   /// Paddings for the badge.
   public var paddings: Paddings = .init(horizontal: 10, vertical: 8)
 
+  /// The visual style of the badge.
+  ///
+  /// Defaults to `.filled`.
+  public var style: Style = .filled
+
   /// Initializes a new instance of `BadgeVM` with default values.
   public init() {}
 }
@@ -35,22 +40,24 @@ public struct BadgeVM: ComponentVM {
 extension BadgeVM {
   /// Returns the background color of the badge based on its style.
   var backgroundColor: UniversalColor {
-    switch self.style {
+    let color = switch self.style {
     case .filled:
-      return self.color?.main ?? .content2
+      self.color?.main ?? .content2
     case .light:
-      return self.color?.background ?? .content1
+      self.color?.background ?? .content1
     }
+    return color.enabled(self.isEnabled)
   }
 
   /// Returns the foreground color of the badge based on its style.
   var foregroundColor: UniversalColor {
-    switch self.style {
+    let color = switch self.style {
     case .filled:
-      return self.color?.contrast ?? .foreground
+      self.color?.contrast ?? .foreground
     case .light:
-      return self.color?.main ?? .foreground
+      self.color?.main ?? .foreground
     }
+    return color.enabled(self.isEnabled)
   }
 }
 

Sources/ComponentsKit/Components/Button/SUButton.swift

@@ -56,8 +56,7 @@ private struct CustomButtonStyle: SwiftUI.ButtonStyle {
     configuration.label
       .font(self.model.preferredFont.font)
       .lineLimit(1)
-      .padding(.leading, self.model.horizontalPadding)
-      .padding(.trailing, self.model.horizontalPadding)
+      .padding(.horizontal, self.model.horizontalPadding)
       .frame(maxWidth: self.model.width)
       .frame(height: self.model.height)
       .foregroundStyle(self.model.foregroundColor.color)

Sources/ComponentsKit/Components/Button/UKButton.swift

@@ -27,8 +27,6 @@ open class UKButton: UIView, UKComponent {
     }
   }
 
-  private var titleLabelConstraints: LayoutConstraints = .init()
-
   // MARK: Subviews
 
   /// A label that displays the title from the model.
@@ -85,11 +83,7 @@ open class UKButton: UIView, UKComponent {
   // MARK: Layout
 
   private func layout() {
-    self.titleLabelConstraints = self.titleLabel.horizontally(self.model.horizontalPadding)
     self.titleLabel.center()
-
-    self.titleLabelConstraints.leading?.priority = .defaultHigh
-    self.titleLabelConstraints.trailing?.priority = .defaultHigh
   }
 
   open override func layoutSubviews() {
@@ -106,10 +100,7 @@ open class UKButton: UIView, UKComponent {
     self.style()
 
     if self.model.shouldUpdateSize(oldModel) {
-      self.titleLabelConstraints.leading?.constant = self.model.horizontalPadding
-      self.titleLabelConstraints.trailing?.constant = -self.model.horizontalPadding
       self.invalidateIntrinsicContentSize()
-      self.setNeedsLayout()
     }
   }
 

Sources/ComponentsKit/Shared/Colors/UniversalColor.swift

@@ -206,7 +206,7 @@ public struct UniversalColor: Hashable {
   public func enabled(_ isEnabled: Bool) -> Self {
     return isEnabled
     ? self
-    : self.withOpacity(ComponentsKitConfig.shared.layout.disabledOpacity)
+    : self.withOpacity(Theme.current.layout.disabledOpacity)
   }
 
   /// Returns a new `UniversalColor` by blending the current color with another color.

Sources/ComponentsKit/Shared/Fonts/UniversalFont.swift

@@ -158,53 +158,53 @@ extension UniversalFont.Weight {
 extension UniversalFont {
   /// Small headline font.
   public static var smHeadline: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.headline.small
+    return Theme.current.layout.typography.headline.small
   }
   /// Medium headline font.
   public static var mdHeadline: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.headline.medium
+    return Theme.current.layout.typography.headline.medium
   }
   /// Large headline font.
   public static var lgHeadline: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.headline.large
+    return Theme.current.layout.typography.headline.large
   }
 
   /// Small body font.
   public static var smBody: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.body.small
+    return Theme.current.layout.typography.body.small
   }
   /// Medium body font.
   public static var mdBody: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.body.medium
+    return Theme.current.layout.typography.body.medium
   }
   /// Large body font.
   public static var lgBody: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.body.large
+    return Theme.current.layout.typography.body.large
   }
 
   /// Small button font.
   public static var smButton: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.button.small
+    return Theme.current.layout.typography.button.small
   }
   /// Medium button font.
   public static var mdButton: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.button.medium
+    return Theme.current.layout.typography.button.medium
   }
   /// Large button font.
   public static var lgButton: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.button.large
+    return Theme.current.layout.typography.button.large
   }
 
   /// Small caption font.
   public static var smCaption: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.caption.small
+    return Theme.current.layout.typography.caption.small
   }
   /// Medium caption font.
   public static var mdCaption: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.caption.medium
+    return Theme.current.layout.typography.caption.medium
   }
   /// Large caption font.
   public static var lgCaption: UniversalFont {
-    return ComponentsKitConfig.shared.layout.typography.caption.large
+    return Theme.current.layout.typography.caption.large
   }
 }