Skip to main content
Every component in FioriSwiftUICore is fully styleable. Each component exposes a style protocol — for example ObjectItemStyle, CardStyle, KPIItemStyle — and every sub-component within it (title, subtitle, status, icons, …) has its own matching style protocol as well.

​
How the style system works

When you instantiate a component, the SDK applies *FioriStyle as the default style. This default style sets Fiori-standard typography, colours, and layout. You override any part of it by supplying your own style conformance or using the closure-based modifiers. Styles are resolved through SwiftUI’s Environment, so you can set a style high in the view hierarchy and it automatically propagates to all matching descendant components.

​
Component-level style modifiers

Each component ships with a view modifier that accepts either a concrete style type or a closure. 
// Apply a built-in style variant
ObjectItem(title: "Pump Station Alpha", status: .text("Critical"))
    .objectItemStyle(MyObjectItemStyle())

// Apply a style to every ObjectItem inside a list
List(workOrders) { order in
    ObjectItem(
        title: AttributedString(order.title),
        status: .text(AttributedString(order.status))
    )
}
.objectItemStyle(CondensedObjectItemStyle())

​
Sub-component style modifiers

Every labelled field of a component has its own style modifier. You can target just the title, just the status indicator, or any other slot independently. 
ObjectItem(
    title: "Transformer Overheating",
    status: .text("High")
)
.titleStyle { config in
    config.title
        .font(.fiori(forTextStyle: .headline))
        .foregroundStyle(Color.preferredColor(.primaryLabel))
}
.statusStyle { config in
    config.status
        .foregroundStyle(Color.preferredColor(.negativeLabel))
        .bold()
}
The closure receives a typed configuration object — TitleConfiguration, StatusConfiguration, etc. — that exposes the wrapped view for further modification.

​
Defining a custom style

Conform to the component’s style protocol and implement makeBody. 
struct HighlightedObjectItemStyle: ObjectItemStyle {
    func makeBody(_ configuration: ObjectItemConfiguration) -> some View {
        ObjectItem(configuration)
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 8)
                    .fill(Color.preferredColor(.secondaryBackground))
            )
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color.preferredColor(.tintColor), lineWidth: 1)
            )
    }
}

// Usage
ObjectItem(title: "Work Order #1234")
    .objectItemStyle(HighlightedObjectItemStyle())
Inside makeBody, you receive the *Configuration value which gives you access to each sub-view as a typed ConfigurationViewWrapper. You can compose them freely.

​
Style propagation via the environment

Because styles travel through SwiftUI’s Environment, you can set a style on a container view and every matching child inherits it. 
VStack {
    ObjectItem(title: "Item A")
    ObjectItem(title: "Item B")
    ObjectItem(title: "Item C")
}
.objectItemStyle(HighlightedObjectItemStyle())

​
The .fioriStyle() modifier

The .fioriStyle() modifier resets a component (or a subtree of components) back to the standard Fiori default style. Use it when a parent container has applied a custom style that you want to cancel for a specific descendant. 
ZStack {
    // Custom themed container
    ObjectItem(title: "Override").objectItemStyle(BrandedStyle())

    // This one uses the Fiori default regardless of the parent style
    ObjectItem(title: "Standard").fioriStyle()
}
Sub-component style modifiers (.titleStyle, .statusStyle, etc.) only affect the component to which they are applied and its descendants. They do not bleed across sibling components.

Build docs developers (and LLMs) love

Get started for freeTalk to us