Customize CardinalKit Views (e.g. font or color)

[PSchmiedmayer]

In what area do you have a technical challenge?

SwiftUI

Description

I wanted to share information with all if you that the @CS342/2023-utah team asked for and that might be applicable to all projects: How do we modify e.g., the font of CardinalKit views? What would be a way to modify, e.g., the color of the views?

Reproduction

It would be great to modify e.g. the views in the onboarding flow, such as this one:

OnboardingView(
    title: "WELCOME_TITLE".moduleLocalized,
    subtitle: "WELCOME_SUBTITLE".moduleLocalized,
    areas: [
        .init(
            icon: Image(systemName: "apps.iphone"),
            title: "WELCOME_AREA1_TITLE".moduleLocalized,
            description: "WELCOME_AREA1_DESCRIPTION".moduleLocalized
        ),
        .init(
            icon: Image(systemName: "shippingbox.fill"),
            title: "WELCOME_AREA2_TITLE".moduleLocalized,
            description: "WELCOME_AREA2_DESCRIPTION".moduleLocalized
        ),
        .init(
            icon: Image(systemName: "list.bullet.clipboard.fill"),
            title: "WELCOME_AREA3_TITLE".moduleLocalized,
            description: "WELCOME_AREA3_DESCRIPTION".moduleLocalized
        )
    ],
    actionText: "WELCOME_BUTTON".moduleLocalized,
    action: {
        onboardingSteps.append(.interestingModules)
    }
)

Expected behavior

It would be great to have a larger font size like this:

Additional context

No response

Code of Conduct

• I agree to follow this course's Code of Conduct and Contributing Guidelines

[PSchmiedmayer]

Yes, you can, e.g., use the .font modifier to most of the CK views to change the font that is used in there like any other SwiftUI view 👍

A more general comment: If you want to increase the font size for the application and do that on a user-by-user basis, CK fully supports font scaling using the accessibility options. This is also how Apple generally recommends font scaling to work.
This is rather a system-wide accessibility setting rather than an app-by-app setting. We use the default font sizes, e,g., .body, in the framework. This is similar to how other frameworks that Apple develops and even ResearchKit does it.
You can learn more about fonts here: https://developer.apple.com/design/human-interface-guidelines/foundations/typography
You can learn more about the dynamic text accessibility feature here: https://support.apple.com/guide/iphone/display-text-size-iph3e2e1fb0/ios

You can do this like this:

OnboardingView(
    title: "WELCOME_TITLE".moduleLocalized,
    subtitle: "WELCOME_SUBTITLE".moduleLocalized,
    areas: [
        .init(
            icon: Image(systemName: "apps.iphone"),
            title: "WELCOME_AREA1_TITLE".moduleLocalized,
            description: "WELCOME_AREA1_DESCRIPTION".moduleLocalized
        ),
        .init(
            icon: Image(systemName: "shippingbox.fill"),
            title: "WELCOME_AREA2_TITLE".moduleLocalized,
            description: "WELCOME_AREA2_DESCRIPTION".moduleLocalized
        ),
        .init(
            icon: Image(systemName: "list.bullet.clipboard.fill"),
            title: "WELCOME_AREA3_TITLE".moduleLocalized,
            description: "WELCOME_AREA3_DESCRIPTION".moduleLocalized
        )
    ],
    actionText: "WELCOME_BUTTON".moduleLocalized,
    action: {
        onboardingSteps.append(.interestingModules)
    }
)
    .font(.title)

Note the font modifier at the bottom to change the font.
In addition, the views change in accordance to the application accent color that can be changed in the asset catalogue, e.g. set this to green:

This results in the following view:

If you want to further customize the views into a completely different style, you might need to recreate a few views or use more of the underlying views. E.g., you can customize this like this and use the individual onboarding views that you can provide:

OnboardingView(
    titleView: {
        // .. your custom title view if you want to change that and modify that ...
        Text("WELCOME_TITLE".moduleLocalized)
            .font(.largeTitle.bold())
    },
    contentView: {
        // An example on how to scale the text in the information view:
        OnboardingInformationView(
            areas: [/* ... */]
        )
            .font(.title)
    },
    actionView: {
        OnboardingActionsView(
            "WELCOME_BUTTON".moduleLocalized,
            action: {
                // ...
            }
        )
            .font(.title2)
    }
)

These customizations do not only work for a font. E.g., you can change the accent color, other stylings, and all that SwiftUI provides you without configuration files or other mechanisms. We are good SwiftUI citizens and use all that information as much as possible.