> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Tokens

> Color override tokens for the checkout UI

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

`ColorOverrides` lets you override individual color tokens used across the checkout UI. You pass an instance to [`PrimerCheckoutTheme`](/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/primer-theme) 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.

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

<Note>
  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.
</Note>

## 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.

```swift theme={"dark"}
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
            }
        )
    }
}
```

<Tip>
  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.
</Tip>

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.

## See also

<CardGroup cols={2}>
  <Card title="PrimerTheme" icon="palette" href="/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/primer-theme">
    The container that bundles color, shape, spacing, and typography overrides.
  </Card>

  <Card title="Shape Tokens" icon="vector-square" href="/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/shape-tokens">
    Override corner radius and border width tokens.
  </Card>

  <Card title="Typography Tokens" icon="font" href="/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/typography-tokens">
    Override font, size, weight, and line height per text style.
  </Card>

  <Card title="Spacing Tokens" icon="ruler" href="/docs/sdk/ios-checkout/v3.0.0-beta/api/theming/spacing-tokens">
    Override spacing and size scale tokens.
  </Card>
</CardGroup>