Tokens and sizing

FreakUI separates a component's visual scale from the space it occupies. Use FComponentSize for the visual hierarchy, sizing modes for parent-space behavior, and semantic tokens for app-owned spacing and geometry.

Component scale

FComponentSize is a seven-step scale. A component size can change typography, padding, gaps, icons, radius, and control metrics without prescribing the component's width or height.

FButton(
    size: .medium,
    horizontalSizingMode: .fillContainer,
    title: "Continue"
) {
    continueFlow()
}

Parent-space sizing

FHorizontalSizingMode and FVerticalSizingMode provide .hugContents, .fillContainer, and .fixed(CGFloat). FContentAlignment aligns content inside a component when the component has extra horizontal space.

Use intrinsic sizing by default, fill when the parent proposes meaningful space, and fixed sizing only for deliberate product or platform geometry.

Spacing tokens

FSpacingScale selects the active density column. All values are points.

VStack(spacing: .paddingS) {
    Text("Summary")
    Text("Details")
}
.padding(.paddingL)

Height tokens

Height tokens follow the active FSpacingScale.

Radius tokens

FRadiusScale selects the active roundness column. The .none scale resolves every scalable radius to 0; .rounded resolves every scalable radius to 100. The table shows the five intermediate scales.

RoundedRectangle(cornerRadius: .radiusM)
    .fill(.secondaryBackground)