Layout

How to use layout helpers provided by the library.

Default Layout

ComponentsKit provides layout customization options for shadows, typography, corner radius, borders, and animation behavior. These defaults help maintain visual consistency across your interface.

Here are the default layout values:

/// The opacity level for disabled components.
public var disabledOpacity: CGFloat = 0.5

/// The radius configuration for components (e.g. buttons, inputs).
public var componentRadius: Radius = .init(
  small: 10.0,
  medium: 12.0,
  large: 16.0
)

/// The radius configuration for content containers such as modals, cards, etc.
public var containerRadius: Radius = .init(
  small: 16.0,
  medium: 20.0,
  large: 26.0
)

/// The shadow configuration.
public var shadow: Shadow = .init(
  small: .init(
    radius: 10.0,
    offset: .init(width: 0, height: 6),
    color: .themed(
      light: .rgba(r: 0, g: 0, b: 0, a: 0.1),
      dark: .rgba(r: 255, g: 255, b: 255, a: 0.1)
    )
  ),
  medium: .init(
    radius: 16.0,
    offset: .init(width: 0, height: 10),
    color: .themed(
      light: .rgba(r: 0, g: 0, b: 0, a: 0.15),
      dark: .rgba(r: 255, g: 255, b: 255, a: 0.15)
    )
  ),
  large: .init(
    radius: 20.0,
    offset: .init(width: 0, height: 12),
    color: .themed(
      light: .rgba(r: 0, g: 0, b: 0, a: 0.2),
      dark: .rgba(r: 255, g: 255, b: 255, a: 0.2)
    )
  )
)

/// The border width configuration.
public var borderWidth: BorderWidth = .init(
  small: 0.5,
  medium: 1.0,
  large: 2.0
)

/// The animation scale configuration.
public var animationScale: AnimationScale = .init(
  small: 0.99,
  medium: 0.98,
  large: 0.95
)

/// The typography configuration.
public var typography: Typography = .init(
  headline: .init(
    small: .system(size: 14, weight: .semibold),
    medium: .system(size: 20, weight: .semibold),
    large: .system(size: 24, 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)
  ),
  caption: .init(
    small: .system(size: 10, weight: .regular),
    medium: .system(size: 12, weight: .regular),
    large: .system(size: 14, weight: .regular)
  )
)

Usage

Similar to how you use colors, these layout helpers can be applied to your custom views and components to keep them consistent with the overall design system.

UIKit

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    
    let label = UILabel()
    label.font = UniversalFont.mdBody.uiFont
    label.text = "Hello, World!"
    label.textColor = UniversalColor.foreground.uiColor
    label.textAlignment = .center
    
    let container = UIView()
    container.backgroundColor = UniversalColor.secondaryBackground.uiColor
    container.layer.cornerRadius = ContainerRadius.medium.value
    container.shadow(.medium) // Applies predefined medium shadow
    
    container.addSubview(label)
    view.addSubview(container)
    
    label.allEdges(20)
    container.center()
  }
}

SwiftUI

struct App: View {  
  var body: some View {
    Text("Hello, World!")
      .font(UniversalFont.mdBody.font)
      .foregroundStyle(UniversalColor.foreground.color)
      .padding(20)
      .background(UniversalColor.secondaryBackground.color)
      .cornerRadius(ContainerRadius.medium.value)
      .shadow(.medium) // Applies predefined medium shadow
  }
}