Color Tokens - Primer

Primer Checkout iOS SDK is currently in beta (v3.0.0-beta.1). The API is subject to change before the stable release.

ColorOverrides lets you override individual color tokens used across the checkout UI. You pass an instance to PrimerCheckoutTheme via its colors parameter. Every property is an optional Color?. Any token you leave nil keeps the SDK’s internal default value. Light and dark appearances are resolved automatically by the SDK’s built-in design tokens, so a single override applies in both color schemes.

@available(iOS 15.0, *)
public struct ColorOverrides: Equatable {
  public init(
    primerColorBrand: Color? = nil,
    // ... all tokens below, each defaulting to nil
  )
}

Override base tokens such as primerColorBrand to recolor the whole UI in one change. Override semantic tokens (text, border, icon) only when you need a specific element to differ from what its base token resolves to.

Brand and primary

Token	Type	Description
`primerColorBrand`	`Color?`	Primary brand color. Drives focus rings, loaders, and selected states by default.

Grays

Foundational neutral palette. Most semantic tokens (text, borders, icons) resolve from these.

Token	Type	Description
`primerColorGray000`	`Color?`	Lightest gray. Background base.
`primerColorGray100`	`Color?`	Very light gray.
`primerColorGray200`	`Color?`	Light gray.
`primerColorGray300`	`Color?`	Medium-light gray.
`primerColorGray400`	`Color?`	Medium gray.
`primerColorGray500`	`Color?`	Gray.
`primerColorGray600`	`Color?`	Medium-dark gray.
`primerColorGray700`	`Color?`	Dark gray.
`primerColorGray900`	`Color?`	Darkest gray. Text base.

Semantic accents

Token	Type	Description
`primerColorGreen500`	`Color?`	Success accent.
`primerColorRed100`	`Color?`	Error background.
`primerColorRed500`	`Color?`	Error accent.
`primerColorRed900`	`Color?`	Error text.
`primerColorBlue500`	`Color?`	Info accent.
`primerColorBlue900`	`Color?`	Link color.

Background and text

Token	Type	Description
`primerColorBackground`	`Color?`	Primary background.
`primerColorTextPrimary`	`Color?`	Main text.
`primerColorTextSecondary`	`Color?`	Labels and descriptions.
`primerColorTextPlaceholder`	`Color?`	Input placeholders.
`primerColorTextDisabled`	`Color?`	Disabled text.
`primerColorTextNegative`	`Color?`	Error messages.
`primerColorTextLink`	`Color?`	Clickable links.

Border colors (outlined)

Applied to outlined inputs such as the card form fields, per interaction state.

Token	Type	Description
`primerColorBorderOutlinedDefault`	`Color?`	Default input border.
`primerColorBorderOutlinedHover`	`Color?`	Hovered input border.
`primerColorBorderOutlinedActive`	`Color?`	Active input border.
`primerColorBorderOutlinedFocus`	`Color?`	Focused input border.
`primerColorBorderOutlinedDisabled`	`Color?`	Disabled input border.
`primerColorBorderOutlinedError`	`Color?`	Error input border.
`primerColorBorderOutlinedSelected`	`Color?`	Selected item border.
`primerColorBorderOutlinedLoading`	`Color?`	Loading input border.

Border colors (transparent)

Used by elements with a transparent border surface, per interaction state.

Token	Type	Description
`primerColorBorderTransparentDefault`	`Color?`	Transparent border base.
`primerColorBorderTransparentHover`	`Color?`	Hovered.
`primerColorBorderTransparentActive`	`Color?`	Active.
`primerColorBorderTransparentFocus`	`Color?`	Focused.
`primerColorBorderTransparentDisabled`	`Color?`	Disabled.
`primerColorBorderTransparentSelected`	`Color?`	Selected.

Icon colors

Token	Type	Description
`primerColorIconPrimary`	`Color?`	Default icon.
`primerColorIconDisabled`	`Color?`	Disabled icon.
`primerColorIconNegative`	`Color?`	Error icon.
`primerColorIconPositive`	`Color?`	Success icon.

Utility

Token	Type	Description
`primerColorFocus`	`Color?`	Focus ring.
`primerColorLoader`	`Color?`	Loading indicator.

Overriding colors

Pass a ColorOverrides instance into PrimerCheckoutTheme. Tokens you omit keep their SDK defaults.

import SwiftUI
import PrimerSDK

let theme = PrimerCheckoutTheme(
    colors: ColorOverrides(
        primerColorBrand: Color(red: 0.42, green: 0.36, blue: 0.91),
        primerColorTextPrimary: Color(red: 0.10, green: 0.10, blue: 0.12),
        primerColorBackground: Color(.systemBackground),
        primerColorBorderOutlinedError: .red
    )
)

struct CheckoutScreen: View {
    let clientToken: String

    var body: some View {
        PrimerCheckout(
            clientToken: clientToken,
            primerTheme: theme,
            onCompletion: { state in
                // handle the final PrimerCheckoutState
            }
        )
    }
}

Because light and dark values resolve through the SDK’s internal tokens, supply a dynamic Color (for example one backed by an asset catalog color set, or a UIColor with a dynamic provider) when you want different values per appearance.

Overriding a base token such as primerColorBrand cascades to every semantic token that resolves from it (focus ring, loader, selected borders), so you can recolor the checkout with a single change.

PrimerTheme

The container that bundles color, shape, spacing, and typography overrides.

Shape Tokens

Override corner radius and border width tokens.

Typography Tokens

Override font, size, weight, and line height per text style.

Spacing Tokens

Override spacing and size scale tokens.

​Brand and primary

​Grays

​Semantic accents

​Background and text

​Border colors (outlined)

​Border colors (transparent)

​Icon colors

​Utility

​Overriding colors

​See also

PrimerTheme

Shape Tokens

Typography Tokens

Spacing Tokens

Brand and primary

Grays

Semantic accents

Background and text

Border colors (outlined)

Border colors (transparent)

Icon colors

Utility

Overriding colors

See also