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
}
}