Skip to main content

PrimerCheckoutTheme

@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

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

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

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

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

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

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

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:
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

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

Design Tokens Explorer

Interactive iOS theme token explorer

Styles

Theming overview across platforms