Quick Start (iOS)

The following info will help you get Caesars UI setup in your project.

Swift Package caesars-ui-ios

The package exports the following products

• CUI - Semantic tokens and core tokens (e.g. themes, fonts, colors, image assets, etc.)
• CUI Components - Reusable design system components

Installation

Xcode Project

You can add caesars-ui-ios to an Xcode project as a package dependency.

1. From the File menu, select Add Package Dependencies...
2. Enter https://gitlab.com/caesarsdigital/usa/services/sportsbook/caesars-ui-ds/caesars-ui-ios into the package repository URL text field.
3. Add the package to the desired project and select the required package products.

Swift Package

You can add caesars-ui-ios to another Swift Packate as a dependency in your Package.swift file.

dependencies: [
        .package(url: "https://gitlab.com/caesarsdigital/usa/services/sportsbook/caesars-ui-ds/caesars-ui-ios", exact: "1.22.0")
    ],
    targets: [
        .target(
            name: "MyLibrary",
            dependencies: [
                .product(name: "CUI", package: "caesars-ui-ios"),
                .product(name: "CUI Components", package: "caesars-ui-ios")
            ]
        )
    ]

Release versions can be found in What's New or in the repository.

Using Tokens

In order to use our tokens, you'll have to import the CUI package product.

import CUI

You will then have access to the core tokens as well as the semantic tokens.

SwiftUI

Semantic tokens are associated with one of CUI supported Themes. CUI uses SwiftUI's EnvironmentValues to provide default support for semantic tokens. You can inject a CUI Theme token into an App or specific View hierarchy like so:

import CUI
import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .cuiTheme(.czr) // Sets the CZR Theme for the app (This is equivalent to `.environment(\.cuiTheme, .czr)`)
        }
    }
}

Tokens can be used within many standard View modifiers using the syntax .cuiCore(<coreToken>) or .cuiTheme(<semanticToken>).

var body: some View {
    Text("CUI Tokens")
        .font(.cuiTheme(.displayLgBold)) // Semantic font token
        .foregroundColor(.cuiTheme(.highlightAccentMinimal)) // Semantic color token for the Text
        .padding(.vertical, .cuiCore(.spacing2px)) // Core size token
        .padding(.horizontal, .cuiTheme(.xxs)) // Semantic size token
        .background(.cuiTheme(.highlightAccent)) // Semantic color token for the Text background
}

NOTE: CUI uses SwiftUI's EnvironmentValues to access the current theme in the view hierarchy.

However, not all View modifiers are able to resolve the Environment theme internally. Sometimes it will be necessary to manually access the current theme from the Environment like so:

@Environment(\.cuiTheme) private var theme // Access the current theme from the Environment

    // Some Shape view code with a semantic theme stroke color
        .stroke(theme.color(.highlightAccentSubtle), lineWidth: .borderWidth1)

UIKit

Accessing tokens in UIKit is also similar.

let label = UILabel()
label.text = "Hello, CUI!"
label.font = theme.font(.displayLgBold) // Semantic font token
label.textColor = theme.color(.highlightAccentMinimal) // Semantic color token

NOTE: In UIKit there is no equivalent to SwiftUI's Environment. Managing the current CUI Theme must be handled manually.

Using Components

In order to use our components, you'll have to import the CUIComponents package product.

import CUIComponents

Basic usage looks like:

var body: some View {
    ButtonView(config: .init(text: "Hello, CUI!", size: .md) { event in
        // Trigger some action when the button is tapped
        print("Button tapped")

        // Access to the configuration object to change the state of the component based on the triggered action, e.g.
        event.button.selected.toggle()
    })
}

Sandbox App

The CUI repository includes a sandbox application that shows the available tokens and assets in the library as well as component demos. The code for this sample project also gives many examples of how components can be integrated into your project.

Setup

• Clone the CUI repository
• Open the Sandbox Projects/swiftui-sandbox/swiftui-sandbox.xcodeproj
• You can now run the sandbox application on a simulator or physical device