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

# Theming API reference

> API reference for PrimerCheckoutTheme, override structs, PrimerFieldStyling, and InputFieldConfig

## PrimerCheckoutTheme

```swift theme={"dark"}
@available(iOS 15.0, *)
public struct PrimerCheckoutTheme {
  public init(
    colors: ColorOverrides? = nil,
    radius: RadiusOverrides? = nil,
    spacing: SpacingOverrides? = nil,
    sizes: SizeOverrides? = nil,
    typography: TypographyOverrides? = nil,
    borderWidth: BorderWidthOverrides? = nil
  )
}
```

All parameters are optional. Nil values use internal defaults.

## ColorOverrides

```swift theme={"dark"}
public struct ColorOverrides {
  // Brand
  public var primerColorBrand: Color?
  public var primerColorFocus: Color?
  public var primerColorLoader: Color?

  // Background
  public var primerColorBackground: Color?

  // Text
  public var primerColorTextPrimary: Color?
  public var primerColorTextSecondary: Color?
  public var primerColorTextPlaceholder: Color?
  public var primerColorTextDisabled: Color?
  public var primerColorTextNegative: Color?
  public var primerColorTextLink: Color?

  // Borders (outlined)
  public var primerColorBorderOutlinedDefault: Color?
  public var primerColorBorderOutlinedHover: Color?
  public var primerColorBorderOutlinedActive: Color?
  public var primerColorBorderOutlinedFocus: Color?
  public var primerColorBorderOutlinedDisabled: Color?
  public var primerColorBorderOutlinedError: Color?
  public var primerColorBorderOutlinedSelected: Color?
  public var primerColorBorderOutlinedLoading: Color?

  // Borders (transparent)
  public var primerColorBorderTransparentDefault: Color?
  public var primerColorBorderTransparentHover: Color?
  public var primerColorBorderTransparentActive: Color?
  public var primerColorBorderTransparentFocus: Color?
  public var primerColorBorderTransparentDisabled: Color?
  public var primerColorBorderTransparentSelected: Color?

  // Icons
  public var primerColorIconPrimary: Color?
  public var primerColorIconDisabled: Color?
  public var primerColorIconNegative: Color?
  public var primerColorIconPositive: Color?

  // Gray scale
  public var primerColorGray000: Color?
  public var primerColorGray100: Color?
  public var primerColorGray200: Color?
  public var primerColorGray300: Color?
  public var primerColorGray400: Color?
  public var primerColorGray500: Color?
  public var primerColorGray600: Color?
  public var primerColorGray700: Color?
  public var primerColorGray900: Color?

  // Semantic
  public var primerColorGreen500: Color?
  public var primerColorRed100: Color?
  public var primerColorRed500: Color?
  public var primerColorRed900: Color?
  public var primerColorBlue500: Color?
  public var primerColorBlue900: Color?
}
```

## RadiusOverrides

```swift theme={"dark"}
public struct RadiusOverrides {
  public var primerRadiusXsmall: CGFloat?  // Default: 2
  public var primerRadiusSmall: CGFloat?   // Default: 4
  public var primerRadiusMedium: CGFloat?  // Default: 8
  public var primerRadiusLarge: CGFloat?   // Default: 12
  public var primerRadiusBase: CGFloat?    // Default: 4
}
```

## SpacingOverrides

```swift theme={"dark"}
public struct SpacingOverrides {
  public var primerSpaceXxsmall: CGFloat?  // Default: 2
  public var primerSpaceXsmall: CGFloat?   // Default: 4
  public var primerSpaceSmall: CGFloat?    // Default: 8
  public var primerSpaceMedium: CGFloat?   // Default: 12
  public var primerSpaceLarge: CGFloat?    // Default: 16
  public var primerSpaceXlarge: CGFloat?   // Default: 20
  public var primerSpaceXxlarge: CGFloat?  // Default: 24
  public var primerSpaceBase: CGFloat?     // Default: 4
}
```

## SizeOverrides

```swift theme={"dark"}
public struct SizeOverrides {
  public var primerSizeSmall: CGFloat?     // Default: 16
  public var primerSizeMedium: CGFloat?    // Default: 20
  public var primerSizeLarge: CGFloat?     // Default: 24
  public var primerSizeXlarge: CGFloat?    // Default: 32
  public var primerSizeXxlarge: CGFloat?   // Default: 44
  public var primerSizeXxxlarge: CGFloat?  // Default: 56
  public var primerSizeBase: CGFloat?      // Default: 4
}
```

## TypographyOverrides

```swift theme={"dark"}
public struct TypographyOverrides {
  public var titleXlarge: TypographyStyle?  // 24pt, weight 550
  public var titleLarge: TypographyStyle?   // 16pt, weight 550
  public var bodyLarge: TypographyStyle?    // 16pt, weight 400
  public var bodyMedium: TypographyStyle?   // 14pt, weight 400
  public var bodySmall: TypographyStyle?    // 12pt, weight 400
}
```

### TypographyStyle

```swift theme={"dark"}
public struct TypographyStyle {
  public var font: String?             // Font family name
  public var letterSpacing: CGFloat?   // Letter spacing in points
  public var weight: Font.Weight?      // Font weight
  public var size: CGFloat?            // Font size in points
  public var lineHeight: CGFloat?      // Line height in points
}
```

## BorderWidthOverrides

```swift theme={"dark"}
public struct BorderWidthOverrides {
  public var primerBorderWidthThin: CGFloat?    // Default: 1
  public var primerBorderWidthMedium: CGFloat?  // Default: 2
  public var primerBorderWidthThick: CGFloat?   // Default: 3
}
```

## PrimerFieldStyling

Per-field styling overrides for card form fields:

```swift theme={"dark"}
public struct PrimerFieldStyling {
  // Typography
  let fontName: String?
  let fontSize: CGFloat?
  let fontWeight: CGFloat?
  let labelFontName: String?
  let labelFontSize: CGFloat?
  let labelFontWeight: CGFloat?

  // Colors
  let textColor: Color?
  let labelColor: Color?
  let backgroundColor: Color?
  let borderColor: Color?
  let focusedBorderColor: Color?
  let errorBorderColor: Color?
  let placeholderColor: Color?

  // Layout
  let cornerRadius: CGFloat?
  let borderWidth: CGFloat?
  let padding: EdgeInsets?
  let fieldHeight: CGFloat?
}
```

## InputFieldConfig

```swift theme={"dark"}
public struct InputFieldConfig {
  public init(
    label: String? = nil,
    placeholder: String? = nil,
    styling: PrimerFieldStyling? = nil,
    component: Component? = nil
  )
}
```

When `component` is provided, it completely replaces the field. The `label`, `placeholder`, and `styling` properties are ignored.

## See also

<CardGroup cols={2}>
  <Card title="Design Tokens Explorer" icon="swatchbook" href="/checkout/primer-checkout/build-your-ui/design-tokens-explorer-ios">
    Interactive iOS theme token explorer
  </Card>

  <Card title="Styles" icon="palette" href="/checkout/primer-checkout/build-your-ui/styling-customization">
    Theming overview across platforms
  </Card>
</CardGroup>