Surfaces

Compose component-owned fill, outline, and elevation treatments.

FSurfaceAppearance composes fill, outline, and elevation independently. Start with .filled, .outlined, or .elevated, then replace only the treatment that differs.

PrimitiveOptions
FSurfaceFill.primary, .secondary, .tertiary, .custom(Color)
FSurfaceOutlineColor and nonnegative line width
FSurfaceElevation.low, .medium, .high, or custom shadow metrics
let highlighted = FSurfaceAppearance.filled
    .withOutline(FSurfaceOutline(color: .primaryAccent))
    .withElevation(.low)

FContainer(appearance: highlighted) {
    Text("Inspectable content")
}

Configure a component-owned surface directly. Use an extra container only when the container itself has product meaning.