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

Two classes define all color tokens:

* **`LightColorTokens`** — open class with 16 base tokens and 26 semantic tokens for light mode
* **`DarkColorTokens`** — extends `LightColorTokens`, overrides 15 base tokens for dark mode. Semantic tokens resolve automatically through inheritance.

## Base tokens (16)

Override these to change foundational colors. All semantic tokens resolve through these.

| Token                                 | Light                                                                                                         | Dark                                                                                                          | Purpose                         |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| `primerColorBrand`                    | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> `#2F98FF`                              | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> `#2F98FF`                              | Primary brand color             |
| `primerColorGray000`                  | <span className="token-swatch" style={{backgroundColor: "#FFFFFF", border: "1px solid #E0E0E0"}} /> `#FFFFFF` | <span className="token-swatch" style={{backgroundColor: "#171619"}} /> `#171619`                              | Lightest gray (background base) |
| `primerColorGray100`                  | <span className="token-swatch" style={{backgroundColor: "#F5F5F5", border: "1px solid #E0E0E0"}} /> `#F5F5F5` | <span className="token-swatch" style={{backgroundColor: "#292929"}} /> `#292929`                              | Very light gray                 |
| `primerColorGray200`                  | <span className="token-swatch" style={{backgroundColor: "#EEEEEE", border: "1px solid #E0E0E0"}} /> `#EEEEEE` | <span className="token-swatch" style={{backgroundColor: "#424242"}} /> `#424242`                              | Light gray                      |
| `primerColorGray300`                  | <span className="token-swatch" style={{backgroundColor: "#E0E0E0"}} /> `#E0E0E0`                              | <span className="token-swatch" style={{backgroundColor: "#575757"}} /> `#575757`                              | Medium-light gray               |
| `primerColorGray400`                  | <span className="token-swatch" style={{backgroundColor: "#BDBDBD"}} /> `#BDBDBD`                              | <span className="token-swatch" style={{backgroundColor: "#858585"}} /> `#858585`                              | Medium gray                     |
| `primerColorGray500`                  | <span className="token-swatch" style={{backgroundColor: "#9E9E9E"}} /> `#9E9E9E`                              | <span className="token-swatch" style={{backgroundColor: "#767577"}} /> `#767577`                              | Gray                            |
| `primerColorGray600`                  | <span className="token-swatch" style={{backgroundColor: "#757575"}} /> `#757575`                              | <span className="token-swatch" style={{backgroundColor: "#C7C7C7"}} /> `#C7C7C7`                              | Medium-dark gray                |
| `primerColorGray900`                  | <span className="token-swatch" style={{backgroundColor: "#212121"}} /> `#212121`                              | <span className="token-swatch" style={{backgroundColor: "#EFEFEF", border: "1px solid #E0E0E0"}} /> `#EFEFEF` | Darkest gray (text base)        |
| `primerColorRed100`                   | <span className="token-swatch" style={{backgroundColor: "#FFECEC", border: "1px solid #E0E0E0"}} /> `#FFECEC` | <span className="token-swatch" style={{backgroundColor: "#321C20"}} /> `#321C20`                              | Error background                |
| `primerColorRed500`                   | <span className="token-swatch" style={{backgroundColor: "#FF7279"}} /> `#FF7279`                              | <span className="token-swatch" style={{backgroundColor: "#E46D70"}} /> `#E46D70`                              | Error accent                    |
| `primerColorRed900`                   | <span className="token-swatch" style={{backgroundColor: "#B4324B"}} /> `#B4324B`                              | <span className="token-swatch" style={{backgroundColor: "#F6BFBF"}} /> `#F6BFBF`                              | Error text                      |
| `primerColorGreen500`                 | <span className="token-swatch" style={{backgroundColor: "#3EB68F"}} /> `#3EB68F`                              | <span className="token-swatch" style={{backgroundColor: "#27B17D"}} /> `#27B17D`                              | Success accent                  |
| `primerColorBlue500`                  | <span className="token-swatch" style={{backgroundColor: "#399DFF"}} /> `#399DFF`                              | <span className="token-swatch" style={{backgroundColor: "#3F93E4"}} /> `#3F93E4`                              | Info accent                     |
| `primerColorBlue900`                  | <span className="token-swatch" style={{backgroundColor: "#2270F4"}} /> `#2270F4`                              | <span className="token-swatch" style={{backgroundColor: "#4AAEFF"}} /> `#4AAEFF`                              | Link color                      |
| `primerColorBorderTransparentDefault` | transparent                                                                                                   | transparent                                                                                                   | Transparent border base         |

## Semantic tokens (26)

Resolve through base tokens. Override only when you need a specific mapping to change.

### Text colors

| Token                        | Light                                                                  | Dark                                                                                                | Resolves to          | Purpose              |
| ---------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------- | -------------------- |
| `primerColorTextPrimary`     | <span className="token-swatch" style={{backgroundColor: "#212121"}} /> | <span className="token-swatch" style={{backgroundColor: "#EFEFEF", border: "1px solid #E0E0E0"}} /> | `primerColorGray900` | Main text            |
| `primerColorTextSecondary`   | <span className="token-swatch" style={{backgroundColor: "#757575"}} /> | <span className="token-swatch" style={{backgroundColor: "#C7C7C7"}} />                              | `primerColorGray600` | Labels, descriptions |
| `primerColorTextPlaceholder` | <span className="token-swatch" style={{backgroundColor: "#9E9E9E"}} /> | <span className="token-swatch" style={{backgroundColor: "#767577"}} />                              | `primerColorGray500` | Input placeholders   |
| `primerColorTextDisabled`    | <span className="token-swatch" style={{backgroundColor: "#BDBDBD"}} /> | <span className="token-swatch" style={{backgroundColor: "#858585"}} />                              | `primerColorGray400` | Disabled text        |
| `primerColorTextNegative`    | <span className="token-swatch" style={{backgroundColor: "#B4324B"}} /> | <span className="token-swatch" style={{backgroundColor: "#F6BFBF"}} />                              | `primerColorRed900`  | Error messages       |
| `primerColorTextLink`        | <span className="token-swatch" style={{backgroundColor: "#2270F4"}} /> | <span className="token-swatch" style={{backgroundColor: "#4AAEFF"}} />                              | `primerColorBlue900` | Clickable links      |

### Background

| Token                   | Light                                                                                               | Dark                                                                   | Resolves to          | Purpose            |
| ----------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------------- | ------------------ |
| `primerColorBackground` | <span className="token-swatch" style={{backgroundColor: "#FFFFFF", border: "1px solid #E0E0E0"}} /> | <span className="token-swatch" style={{backgroundColor: "#171619"}} /> | `primerColorGray000` | Primary background |

### Border colors (outlined)

| Token                               | Light                                                                                               | Dark                                                                   | Resolves to          | Purpose               |
| ----------------------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------------------- | --------------------- |
| `primerColorBorderOutlinedDefault`  | <span className="token-swatch" style={{backgroundColor: "#E0E0E0"}} />                              | <span className="token-swatch" style={{backgroundColor: "#575757"}} /> | `primerColorGray300` | Default input border  |
| `primerColorBorderOutlinedHover`    | <span className="token-swatch" style={{backgroundColor: "#BDBDBD"}} />                              | <span className="token-swatch" style={{backgroundColor: "#858585"}} /> | `primerColorGray400` | Hovered input border  |
| `primerColorBorderOutlinedActive`   | <span className="token-swatch" style={{backgroundColor: "#9E9E9E"}} />                              | <span className="token-swatch" style={{backgroundColor: "#767577"}} /> | `primerColorGray500` | Active input border   |
| `primerColorBorderOutlinedFocus`    | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} />                              | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> | `primerColorFocus`   | Focused input border  |
| `primerColorBorderOutlinedDisabled` | <span className="token-swatch" style={{backgroundColor: "#EEEEEE", border: "1px solid #E0E0E0"}} /> | <span className="token-swatch" style={{backgroundColor: "#424242"}} /> | `primerColorGray200` | Disabled input border |
| `primerColorBorderOutlinedError`    | <span className="token-swatch" style={{backgroundColor: "#FF7279"}} />                              | <span className="token-swatch" style={{backgroundColor: "#E46D70"}} /> | `primerColorRed500`  | Error input border    |
| `primerColorBorderOutlinedLoading`  | <span className="token-swatch" style={{backgroundColor: "#EEEEEE", border: "1px solid #E0E0E0"}} /> | <span className="token-swatch" style={{backgroundColor: "#424242"}} /> | `primerColorGray200` | Loading input border  |
| `primerColorBorderOutlinedSelected` | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} />                              | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> | `primerColorBrand`   | Selected item border  |

### Border colors (transparent)

| Token                                  | Light                                                                  | Dark                                                                   | Resolves to                           | Purpose  |
| -------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------- | -------- |
| `primerColorBorderTransparentHover`    | transparent                                                            | transparent                                                            | `primerColorBorderTransparentDefault` | Hovered  |
| `primerColorBorderTransparentActive`   | transparent                                                            | transparent                                                            | `primerColorBorderTransparentDefault` | Active   |
| `primerColorBorderTransparentFocus`    | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> | `primerColorFocus`                    | Focused  |
| `primerColorBorderTransparentDisabled` | transparent                                                            | transparent                                                            | `primerColorBorderTransparentDefault` | Disabled |
| `primerColorBorderTransparentSelected` | transparent                                                            | transparent                                                            | `primerColorBorderTransparentDefault` | Selected |

### Icon colors

| Token                     | Light                                                                  | Dark                                                                                                | Resolves to           | Purpose       |
| ------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------- | ------------- |
| `primerColorIconPrimary`  | <span className="token-swatch" style={{backgroundColor: "#212121"}} /> | <span className="token-swatch" style={{backgroundColor: "#EFEFEF", border: "1px solid #E0E0E0"}} /> | `primerColorGray900`  | Default icon  |
| `primerColorIconDisabled` | <span className="token-swatch" style={{backgroundColor: "#BDBDBD"}} /> | <span className="token-swatch" style={{backgroundColor: "#858585"}} />                              | `primerColorGray400`  | Disabled icon |
| `primerColorIconNegative` | <span className="token-swatch" style={{backgroundColor: "#FF7279"}} /> | <span className="token-swatch" style={{backgroundColor: "#E46D70"}} />                              | `primerColorRed500`   | Error icon    |
| `primerColorIconPositive` | <span className="token-swatch" style={{backgroundColor: "#3EB68F"}} /> | <span className="token-swatch" style={{backgroundColor: "#27B17D"}} />                              | `primerColorGreen500` | Success icon  |

### Utility

| Token               | Light                                                                  | Dark                                                                   | Resolves to        | Purpose           |
| ------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------ | ----------------- |
| `primerColorFocus`  | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> | `primerColorBrand` | Focus ring        |
| `primerColorLoader` | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> | <span className="token-swatch" style={{backgroundColor: "#2F98FF"}} /> | `primerColorBrand` | Loading indicator |

## Customization

Override base tokens by extending `LightColorTokens` or `DarkColorTokens`:

```kotlin theme={"dark"}
val theme = PrimerTheme(
    lightColorTokens = object : LightColorTokens() {
        override val primerColorBrand: Color = Color(0xFF6C5CE7)
    },
    darkColorTokens = object : DarkColorTokens() {
        override val primerColorBrand: Color = Color(0xFFA29BFE)
    },
)
```

Changing a base token affects all semantic tokens that reference it.