Primer Checkout Android SDK is currently in beta (v3.0.0-beta.2).
The API is subject to change before the stable release.
PrimerCheckoutSheet or PrimerCheckoutHost via the theme parameter.
Definition
data class PrimerTheme(
val lightColorTokens: LightColorTokens = LightColorTokens(),
val darkColorTokens: DarkColorTokens = DarkColorTokens(),
val borderWidthTokens: BorderWidthTokens = BorderWidthTokens(),
val radiusTokens: RadiusTokens = RadiusTokens(),
val sizeTokens: SizeTokens = SizeTokens(),
val spacingTokens: SpacingTokens = SpacingTokens(),
val typographyTokens: TypographyTokens = TypographyTokens(),
)
Properties
| Property | Type | Description |
|---|
lightColorTokens | LightColorTokens | Color tokens for light mode |
darkColorTokens | DarkColorTokens | Color tokens for dark mode. Extends LightColorTokens. |
borderWidthTokens | BorderWidthTokens | Border widths for inputs, focus rings, dividers |
radiusTokens | RadiusTokens | Corner radius for cards, inputs, bottom sheets |
sizeTokens | SizeTokens | Sizes for icons and touch targets |
spacingTokens | SpacingTokens | Padding and margin values |
typographyTokens | TypographyTokens | Font sizes, weights, and line heights |
Methods
colorTokens
@Composable
fun colorTokens(darkTheme: Boolean = isSystemInDarkTheme()): LightColorTokens
darkColorTokens when darkTheme is true, lightColorTokens otherwise. Defaults to the system theme.
Material 3 Integration
PrimerTheme automatically maps color tokens to a Material 3 ColorScheme. Material components used within the checkout tree (such as ModalBottomSheet) inherit your Primer tokens without additional configuration.
Both PrimerCheckoutSheet and PrimerCheckoutHost wrap content in a MaterialTheme that applies this mapping internally.
Color mapping
| M3 Role | Primer Token | Notes |
|---|
primary | primerColorBrand | |
onPrimary | primerColorGray000 (light) / primerColorGray900 (dark) | via onColoredSurface |
primaryContainer | primerColorBlue900 | |
onPrimaryContainer | primerColorGray000 (light) / primerColorGray900 (dark) | via onColoredSurface |
inversePrimary | primerColorBlue500 | |
secondary | primerColorGray600 | |
onSecondary | primerColorGray000 (light) / primerColorGray900 (dark) | via onColoredSurface |
secondaryContainer | primerColorGray200 | |
onSecondaryContainer | primerColorTextPrimary | |
tertiary | primerColorBlue500 | |
onTertiary | primerColorGray000 (light) / primerColorGray900 (dark) | via onColoredSurface |
tertiaryContainer | primerColorGray200 | |
onTertiaryContainer | primerColorTextPrimary | |
background | primerColorBackground | |
onBackground | primerColorTextPrimary | |
surface | primerColorBackground | |
onSurface | primerColorTextPrimary | |
surfaceVariant | primerColorGray100 | |
onSurfaceVariant | primerColorTextSecondary | |
surfaceTint | primerColorBrand | |
inverseSurface | primerColorGray900 | |
inverseOnSurface | primerColorGray000 | |
surfaceBright | primerColorGray000 (light) / primerColorGray300 (dark) | mode-specific |
surfaceDim | primerColorGray100 (light) / primerColorGray000 (dark) | mode-specific |
surfaceContainer | primerColorGray100 | |
surfaceContainerHigh | primerColorGray200 | |
surfaceContainerHighest | primerColorGray300 | |
surfaceContainerLow | primerColorGray100 | |
surfaceContainerLowest | primerColorBackground | |
error | primerColorRed500 | |
onError | primerColorGray000 (light) / primerColorGray900 (dark) | via onColoredSurface |
errorContainer | primerColorRed100 | |
onErrorContainer | primerColorTextNegative | |
outline | primerColorBorderOutlinedDefault | |
outlineVariant | primerColorGray300 | |
scrim | Color.Black (alpha 0.32) | hardcoded |
LocalPrimerTheme
val LocalPrimerTheme = staticCompositionLocalOf { PrimerTheme() }
CompositionLocal providing the current PrimerTheme. Set automatically by PrimerCheckoutSheet and PrimerCheckoutHost. Access with LocalPrimerTheme.current inside the checkout composable tree.