> ## 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.

# Color Tokens

> Color token classes for light and dark mode theming

> [!WARNING]
>
> 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`:

```kotlin theme={"dark"}
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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.