Color Tokens

Color token classes for light and dark mode theming

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	Light	Dark	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	Light	Dark	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	Light	Dark	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	Light	Dark	Resolves to	Purpose
primerColorIconPrimary			primerColorGray900	Default icon
primerColorIconDisabled			primerColorGray400	Disabled icon
primerColorIconNegative			primerColorRed500	Error icon
primerColorIconPositive			primerColorGreen500	Success icon

Utility

Token	Light	Dark	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.