Skip to main content

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.

Primer Checkout Android SDK is currently in beta (v3.0.0-beta.2). The API is subject to change before the stable release.
Root theme container holding all design token groups. Pass to 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

PropertyTypeDescription
lightColorTokensLightColorTokensColor tokens for light mode
darkColorTokensDarkColorTokensColor tokens for dark mode. Extends LightColorTokens.
borderWidthTokensBorderWidthTokensBorder widths for inputs, focus rings, dividers
radiusTokensRadiusTokensCorner radius for cards, inputs, bottom sheets
sizeTokensSizeTokensSizes for icons and touch targets
spacingTokensSpacingTokensPadding and margin values
typographyTokensTypographyTokensFont sizes, weights, and line heights

​
Methods

​
colorTokens

@Composable
fun colorTokens(darkTheme: Boolean = isSystemInDarkTheme()): LightColorTokens
Returns 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 RolePrimer TokenNotes
primaryprimerColorBrand
onPrimaryprimerColorGray000 (light) / primerColorGray900 (dark)via onColoredSurface
primaryContainerprimerColorBlue900
onPrimaryContainerprimerColorGray000 (light) / primerColorGray900 (dark)via onColoredSurface
inversePrimaryprimerColorBlue500
secondaryprimerColorGray600
onSecondaryprimerColorGray000 (light) / primerColorGray900 (dark)via onColoredSurface
secondaryContainerprimerColorGray200
onSecondaryContainerprimerColorTextPrimary
tertiaryprimerColorBlue500
onTertiaryprimerColorGray000 (light) / primerColorGray900 (dark)via onColoredSurface
tertiaryContainerprimerColorGray200
onTertiaryContainerprimerColorTextPrimary
backgroundprimerColorBackground
onBackgroundprimerColorTextPrimary
surfaceprimerColorBackground
onSurfaceprimerColorTextPrimary
surfaceVariantprimerColorGray100
onSurfaceVariantprimerColorTextSecondary
surfaceTintprimerColorBrand
inverseSurfaceprimerColorGray900
inverseOnSurfaceprimerColorGray000
surfaceBrightprimerColorGray000 (light) / primerColorGray300 (dark)mode-specific
surfaceDimprimerColorGray100 (light) / primerColorGray000 (dark)mode-specific
surfaceContainerprimerColorGray100
surfaceContainerHighprimerColorGray200
surfaceContainerHighestprimerColorGray300
surfaceContainerLowprimerColorGray100
surfaceContainerLowestprimerColorBackground
errorprimerColorRed500
onErrorprimerColorGray000 (light) / primerColorGray900 (dark)via onColoredSurface
errorContainerprimerColorRed100
onErrorContainerprimerColorTextNegative
outlineprimerColorBorderOutlinedDefault
outlineVariantprimerColorGray300
scrimColor.Black (alpha 0.32)hardcoded
Overriding a Primer token automatically updates every M3 role that references it. No separate M3 configuration is needed.

​
LocalPrimerTheme

val LocalPrimerTheme = staticCompositionLocalOf { PrimerTheme() }
Compose CompositionLocal providing the current PrimerTheme. Set automatically by PrimerCheckoutSheet and PrimerCheckoutHost. Access with LocalPrimerTheme.current inside the checkout composable tree.