Color Tokens - Primer

Primer Checkout Android SDK is currently in beta (v3.0.0-beta). The API is subject to change before the stable release.

Two classes define all color tokens:

LightColorTokens — open class with 2 base tokens and 29 semantic tokens for light mode
DarkColorTokens — extends LightColorTokens and overrides the internal palette for dark mode. Semantic tokens resolve automatically through inheritance.

The raw palette behind the semantic tokens (primerColorGray*, primerColorRed*, primerColorBlue*, primerColorGreen*) is internal. To change a color, override the semantic token that uses it.

Base tokens (2)

Token	Light	Dark	Purpose
`primerColorBrand`	`#2F98FF`	`#2F98FF`	Primary brand color
`primerColorBorderTransparentDefault`	transparent	transparent	Transparent border base

Semantic tokens (29)

Resolve through base tokens and the internal palette. Override the ones you want to change.

Background

Token	Resolves to	Purpose
`primerColorBackgroundPrimary`	`primerColorGray000`	Sheet and screen background
`primerColorBackgroundSecondary`	`primerColorGray100`	Secondary surfaces
`primerColorBackgroundOutlinedDefault`	`primerColorBackgroundPrimary`	Input field background
`primerColorBackgroundOutlinedDisabled`	`primerColorGray100`	Disabled input field background

Text colors

Token	Resolves to	Purpose
`primerColorTextPrimary`	`primerColorGray900`	Main text
`primerColorTextSecondary`	`primerColorGray600`	Labels, descriptions
`primerColorTextPlaceholder`	`primerColorGray500`	Input placeholders
`primerColorTextDisabled`	`primerColorGray400`	Disabled text
`primerColorTextNegative`	`primerColorRed900`	Error messages
`primerColorTextLink`	`primerColorBlue900`	Clickable links
`primerColorTextOutlinedDefault`	`primerColorTextPrimary`	Text inside input fields

Border colors (outlined)

Token	Resolves to	Purpose
`primerColorBorderOutlinedDefault`	`primerColorGray300`	Default input border
`primerColorBorderOutlinedActive`	`primerColorGray500`	Active input border
`primerColorBorderOutlinedFocus`	`primerColorFocus`	Focused input border
`primerColorBorderOutlinedDisabled`	`primerColorGray200`	Disabled input border
`primerColorBorderOutlinedError`	`primerColorRed500`	Error input border
`primerColorBorderOutlinedLoading`	`primerColorGray200`	Loading input border
`primerColorBorderOutlinedSelected`	`primerColorBrand`	Selected item border

Border colors (transparent)

Token	Light	Dark	Resolves to	Purpose
`primerColorBorderTransparentActive`	transparent	transparent	`primerColorBorderTransparentDefault`	Active
`primerColorBorderTransparentFocus`			`primerColorFocus`	Focused
`primerColorBorderTransparentDisabled`	transparent	transparent	`primerColorBorderTransparentDefault`	Disabled
`primerColorBorderTransparentSelected`	transparent	transparent	`primerColorBorderTransparentDefault`	Selected

Icon colors

Token	Resolves to	Purpose
`primerColorIconPrimary`	`primerColorGray900`	Default icon
`primerColorIconDisabled`	`primerColorGray400`	Disabled icon
`primerColorIconNegative`	`primerColorRed500`	Error icon
`primerColorIconPositive`	`primerColorGreen500`	Success icon

Utility

Token	Resolves to	Purpose
`primerColorFocus`	`primerColorBrand`	Focus ring
`primerColorLoader`	`primerColorBrand`	Loading indicator
`primerColorOnBrand`	`primerColorBackgroundPrimary`	Content on the brand color, such as the pay button label

Customization

Override tokens by extending LightColorTokens or DarkColorTokens:

val theme = PrimerTheme(
    lightColorTokens = object : LightColorTokens() {
        override val primerColorBrand: Color = Color(0xFF6C5CE7)
        override val primerColorBackgroundPrimary: Color = Color(0xFFF8F8F8)
    },
    darkColorTokens = object : DarkColorTokens() {
        override val primerColorBrand: Color = Color(0xFFA29BFE)
    },
)

Changing a base token affects all semantic tokens that reference it. Use PrimerTheme.appearanceMode to choose whether the light or dark set is used.