# Color Tokens

Source: `specs/ux/tokens/Light.tokens.json`.

Color tokens use the `--color-*` naming pattern and map semantic UI roles to foundation color primitives from `specs/ux/foundations/color.md`.

If a primitive changes in `specs/ux/foundations/color.md`, update the matching semantic token in this file.

Primitive color scales from the source JSON, such as `purple.100`, `mint.500`, or `red.250`, are not duplicated here because they are documented in `specs/ux/foundations/color.md`.

## Usage

Use color tokens for:

- `color`
- `background`
- `border-color`
- icon fills and strokes
- component state colors

## Token Mapping

### Text And Icon

| CSS Token                            | Source Token                | Foundation Primitive | Value     |
| ------------------------------------ | --------------------------- | -------------------- | --------- |
| `--color-text-icon-primary`          | `text icon.primary`         | `black.800`          | `#242429` |
| `--color-text-icon-primary-inverted` | `text icon.primaryInverted` | `alpha.light.100`    | `#FFFFFF` |
| `--color-text-icon-secondary`        | `text icon.secondary`       | `gray.500`           | `#8F8FA3` |
| `--color-text-icon-tertiary`         | `text icon.tertiary`        | `gray.300`           | `#C4C4D4` |
| `--color-text-icon-accent`           | `text icon.accent`          | `purple.500`         | `#7F30E3` |
| `--color-text-icon-accent-inverted`  | `text icon.accentInverted`  | `purple.300`         | `#C3A6FF` |
| `--color-text-icon-success`          | `text icon.success`         | `green.500`          | `#1DAF66` |
| `--color-text-icon-success-inverted` | `text icon.successInverted` | `green.400`          | `#1DCB74` |
| `--color-text-icon-warning`          | `text icon.warning`         | `orange.500`         | `#FF8533` |
| `--color-text-icon-warning-inverted` | `text icon.warningInverted` | `orange.350`         | `#FF973C` |
| `--color-text-icon-danger`           | `text icon.danger`          | `red.500`            | `#FA2B55` |
| `--color-text-icon-danger-inverted`  | `text icon.dangerInverted`  | `red.400`            | `#FF4760` |
| `--color-text-icon-black-contrast`   | `text icon.blackContr`      | `black.800`          | `#242429` |
| `--color-text-icon-white-constant`   | `text icon.whiteConst`      | `alpha.light.100`    | `#FFFFFF` |

### Background

| CSS Token                                      | Source Token                  | Foundation Primitive | Value                   |
| ---------------------------------------------- | ----------------------------- | -------------------- | ----------------------- |
| `--color-background-level-1`                   | `bg.level-1`                  | `gray.100`           | `#F6F6F9`               |
| `--color-background-level-1-base`              | `bg.level 1 base`             | `alpha.light.100`    | `#FFFFFF`               |
| `--color-background-level-1-base-inverted`     | `bg.level 1 base` (dark mode) | `black.900`          | `#18181B`               |
| `--color-background-level-2`                   | `bg.level2`                   | `gray.100`           | `#F6F6F9`               |
| `--color-background-dropdown`                  | `bg.dropdown`                 | `alpha.light.100`    | `#FFFFFF`               |
| `--color-background-dropdown-hover`            | `bg.dropdown hover`           | `gray.100`           | `#F6F6F9`               |
| `--color-background-dropdown-active`           | `bg.dropdown active`          | `-`                  | `#F0F0F5`               |
| `--color-background-accent`                    | `bg.accent`                   | `purple.500`         | `#7F30E3`               |
| `--color-background-accent-secondary`          | `bg.accent sec`               | `purple.100`         | `#F2E6FE`               |
| `--color-background-accent-secondary-hover`    | `bg.accent sec hover`         | `purple.150`         | `#EDD8FF`               |
| `--color-background-accent-secondary-pressed`  | `bg.accent sec pressed`       | `purple.200`         | `#E2CFFC`               |
| `--color-background-accent-secondary-inverted` | `bg.accent sec inverted`      | `purple.900`         | `#2F2640`               |
| `--color-background-tooltip`                   | `bg.tooltip`                  | `-`                  | `rgba(24, 24, 27, 0.9)` |
| `--color-background-toast`                     | `bg.toast`                    | `black.900`          | `#18181B`               |
| `--color-background-white-contrast`            | `bg.whiteContr`               | `alpha.light.100`    | `#FFFFFF`               |
| `--color-background-black-contrast`            | `bg.blackContr`               | `-`                  | `#000000`               |

### Stroke

| CSS Token                           | Source Token                   | Foundation Primitive | Value     |
| ----------------------------------- | ------------------------------ | -------------------- | --------- |
| `--color-stroke-accent`             | `stroke.accent`                | `purple.500`         | `#7F30E3` |
| `--color-stroke-secondary`          | `stroke.secondary`             | `gray.200`           | `#E0E0EB` |
| `--color-stroke-secondary-inverted` | `stroke.secondary` (dark mode) | `gray.900`           | `#2F2F37` |
| `--color-stroke-white-contrast`     | `stroke.whiteContr`            | `alpha.light.100`    | `#FFFFFF` |
| `--color-stroke-black-contrast`     | `stroke.blackContr`            | `black.900`          | `#18181B` |
| `--color-stroke-danger`             | `stroke.danger`                | `red.500`            | `#FA2B55` |
| `--color-stroke-contrast-inverted`  | `stroke.contrastInverted`      | `alpha.light.100`    | `#FFFFFF` |
| `--color-stroke-focused`            | `stroke.focused`               | `purple.100`         | `#F2E6FE` |

### Button Primary Background And Flat Primary Text

The source token group `btn.PR (bg) + flat PR (txt)` covers both primary button backgrounds and flat primary button text.

| CSS Token                                    | Source Token                           | Foundation Primitive | Value     |
| -------------------------------------------- | -------------------------------------- | -------------------- | --------- |
| `--color-button-primary-background-default`  | `btn.PR (bg) + flat PR (txt).default`  | `purple.500`         | `#7F30E3` |
| `--color-button-primary-background-hover`    | `btn.PR (bg) + flat PR (txt).hover`    | `purple.600`         | `#7021D4` |
| `--color-button-primary-background-pressed`  | `btn.PR (bg) + flat PR (txt).pressed`  | `purple.700`         | `#6117BE` |
| `--color-button-primary-background-disabled` | `btn.PR (bg) + flat PR (txt).disabled` | `gray.100`           | `#F6F6F9` |
| `--color-button-flat-primary-default`        | `btn.PR (bg) + flat PR (txt).default`  | `purple.500`         | `#7F30E3` |
| `--color-button-flat-primary-hover`          | `btn.PR (bg) + flat PR (txt).hover`    | `purple.600`         | `#7021D4` |
| `--color-button-flat-primary-pressed`        | `btn.PR (bg) + flat PR (txt).pressed`  | `purple.700`         | `#6117BE` |
| `--color-button-flat-primary-disabled`       | `btn.PR (bg) + flat PR (txt).disabled` | `gray.100`           | `#F6F6F9` |

### Button Text

| CSS Token                                | Source Token                            | Foundation Primitive | Value     |
| ---------------------------------------- | --------------------------------------- | -------------------- | --------- |
| `--color-button-primary-text`            | `btn.PR (txt) + PR dngr (txt).main`     | `alpha.light.100`    | `#FFFFFF` |
| `--color-button-primary-text-disabled`   | `btn.PR (txt) + PR dngr (txt).disabled` | `gray.300`           | `#C4C4D4` |
| `--color-button-danger-text`             | `btn.PR (txt) + PR dngr (txt).main`     | `alpha.light.100`    | `#FFFFFF` |
| `--color-button-danger-text-disabled`    | `btn.PR (txt) + PR dngr (txt).disabled` | `gray.300`           | `#C4C4D4` |
| `--color-button-secondary-text`          | `btn.Sec (txt).main`                    | `purple.500`         | `#7F30E3` |
| `--color-button-secondary-text-disabled` | `btn.Sec (txt).disabled`                | `gray.300`           | `#C4C4D4` |

### Button Secondary Background

| CSS Token                                      | Source Token            | Foundation Primitive | Value     |
| ---------------------------------------------- | ----------------------- | -------------------- | --------- |
| `--color-button-secondary-background-default`  | `btn.Sec (bg).default`  | `gray.100`           | `#F6F6F9` |
| `--color-button-secondary-background-hover`    | `btn.Sec (bg).hover`    | `gray.200`           | `#E0E0EB` |
| `--color-button-secondary-background-pressed`  | `btn.Sec (bg).pressed`  | `gray.250`           | `#D1D1E0` |
| `--color-button-secondary-background-disabled` | `btn.Sec (bg).disabled` | `gray.100`           | `#F6F6F9` |

### Button Flat Secondary Text

| CSS Token                                | Source Token                  | Foundation Primitive | Value     |
| ---------------------------------------- | ----------------------------- | -------------------- | --------- |
| `--color-button-flat-secondary-default`  | `btn.Flat Sec (txt).default`  | `gray.500`           | `#8F8FA3` |
| `--color-button-flat-secondary-hover`    | `btn.Flat Sec (txt).hover`    | `gray.600`           | `#777788` |
| `--color-button-flat-secondary-pressed`  | `btn.Flat Sec (txt).pressed`  | `gray.650`           | `#5F5F6D` |
| `--color-button-flat-secondary-disabled` | `btn.Flat Sec (txt).disabled` | `gray.300`           | `#C4C4D4` |

### Button Flat Success Text

| CSS Token                             | Source Token                     | Foundation Primitive | Value     |
| ------------------------------------- | -------------------------------- | -------------------- | --------- |
| `--color-button-flat-success-default` | `btn.Flat Success (txt).default` | `green.500`          | `#1DAF66` |
| `--color-button-flat-success-hover`   | `btn.Flat Success (txt).hover`   | `green.600`          | `#199959` |
| `--color-button-flat-success-pressed` | `btn.Flat Success (txt).pressed` | `green.700`          | `#16844D` |

### Button Flat Warning Text

| CSS Token                             | Source Token                  | Foundation Primitive | Value     |
| ------------------------------------- | ----------------------------- | -------------------- | --------- |
| `--color-button-flat-warning-default` | `btn.Flat Warn (txt).default` | `orange.500`         | `#FF8533` |
| `--color-button-flat-warning-hover`   | `btn.Flat Warn (txt).hover`   | `orange.600`         | `#FF761A` |
| `--color-button-flat-warning-pressed` | `btn.Flat Warn (txt).pressed` | `orange.700`         | `#FF6700` |

### Button Danger Background And Flat Danger Text

The source token group `btn.Dngr (bg) + Flat dngr (txt)` covers both danger button backgrounds and flat danger button text.

| CSS Token                                   | Source Token                               | Foundation Primitive | Value     |
| ------------------------------------------- | ------------------------------------------ | -------------------- | --------- |
| `--color-button-danger-background-default`  | `btn.Dngr (bg) + Flat dngr (txt).default`  | `red.500`            | `#FA2B55` |
| `--color-button-danger-background-hover`    | `btn.Dngr (bg) + Flat dngr (txt).hover`    | `red.600`            | `#F90637` |
| `--color-button-danger-background-pressed`  | `btn.Dngr (bg) + Flat dngr (txt).pressed`  | `red.700`            | `#E00532` |
| `--color-button-danger-background-disabled` | `btn.Dngr (bg) + Flat dngr (txt).disabled` | `gray.100`           | `#F6F6F9` |
| `--color-button-flat-danger-default`        | `btn.Dngr (bg) + Flat dngr (txt).default`  | `red.500`            | `#FA2B55` |
| `--color-button-flat-danger-hover`          | `btn.Dngr (bg) + Flat dngr (txt).hover`    | `red.600`            | `#F90637` |
| `--color-button-flat-danger-pressed`        | `btn.Dngr (bg) + Flat dngr (txt).pressed`  | `red.700`            | `#E00532` |
| `--color-button-flat-danger-disabled`       | `btn.Dngr (bg) + Flat dngr (txt).disabled` | `gray.100`           | `#F6F6F9` |

### Button Inverted

| CSS Token                                     | Source Token                | Foundation Primitive | Value     |
| --------------------------------------------- | --------------------------- | -------------------- | --------- |
| `--color-button-inverted-background-default`  | `btn inverted.bg.default`   | `gray.900`           | `#2F2F37` |
| `--color-button-inverted-background-hover`    | `btn inverted.bg.hover`     | `gray.800`           | `#3B3B44` |
| `--color-button-inverted-background-pressed`  | `btn inverted.bg.pressed`   | `gray.750`           | `#474752` |
| `--color-button-inverted-background-disabled` | `btn inverted.bg.disabled`  | `gray.900`           | `#2F2F37` |
| `--color-button-inverted-text`                | `btn inverted.txt.main`     | `purple.300`         | `#C3A6FF` |
| `--color-button-inverted-text-disabled`       | `btn inverted.txt.disabled` | `gray.700`           | `#53535F` |

### Content

Use content tokens for colored content labels, pills, badges, and status accents that are not button or text/icon roles.

| CSS Token                           | Source Token                | Foundation Primitive | Value     |
| ----------------------------------- | --------------------------- | -------------------- | --------- |
| `--color-content-red`               | `content.red`               | `red.500`            | `#FA2B55` |
| `--color-content-green`             | `content.green`             | `green.500`          | `#1DAF66` |
| `--color-content-orange`            | `content.orange`            | `orange.500`         | `#FF8533` |
| `--color-content-blackberry`        | `content.blackberry`        | `purple.500`         | `#7F30E3` |
| `--color-content-mint`              | `content.mint`              | `mint.500`           | `#059DAE` |
| `--color-content-mint-hover`        | `content.mint hover`        | `mint.600`           | `#048B9B` |
| `--color-content-mint-pressed`      | `content.mint pressed`      | `mint.700`           | `#037988` |
| `--color-content-sky`               | `content.sky`               | `sky.500`            | `#0088C2` |
| `--color-content-sky-hover`         | `content.sky hover`         | `sky.600`            | `#0078AD` |
| `--color-content-sky-pressed`       | `content.sky pressed`       | `sky.700`            | `#006999` |
| `--color-content-river`             | `content.river`             | `river.500`          | `#0098FE` |
| `--color-content-river-hover`       | `content.river hover`       | `river.600`          | `#0089E5` |
| `--color-content-river-pressed`     | `content.river pressed`     | `river.700`          | `#007ACC` |
| `--color-content-lavender`          | `content.lavender`          | `lavender.500`       | `#7158FE` |
| `--color-content-lavender-hover`    | `content.lavender hover`    | `lavender.600`       | `#6247F0` |
| `--color-content-lavender-pressed`  | `content.lavender pressed`  | `lavender.700`       | `#5538DE` |
| `--color-content-raspberry`         | `content.raspberry`         | `raspberry.500`      | `#DC1984` |
| `--color-content-raspberry-hover`   | `content.raspberry hover`   | `raspberry.600`      | `#C91475` |
| `--color-content-raspberry-pressed` | `content.raspberry pressed` | `raspberry.700`      | `#B10F66` |
| `--color-content-neutral-primary`   | `content.neutralPrimary`    | `-`                  | `#242429` |
| `--color-content-neutral-secondary` | `content.neutralSecondary`  | `-`                  | `#8F8FA3` |
| `--color-content-no-filled`         | `content.noFilled`          | `-`                  | `#E0E0EB` |

### Content Background

Use content background tokens with the matching `--color-content-*` foreground token.

| CSS Token                                       | Source Token                    | Foundation Primitive  | Value     |
| ----------------------------------------------- | ------------------------------- | --------------------- | --------- |
| `--color-content-background-red`                | `content bg.red`                | `red.100`             | `#FEEAEE` |
| `--color-content-background-red-hover`          | `content bg.red hover`          | `red.200`             | `#FFDCE3` |
| `--color-content-background-red-pressed`        | `content bg.red pressed`        | `red.250`             | `#FFC9D3` |
| `--color-content-background-orange`             | `content bg.orange`             | `orange.100`          | `#FFF2EA` |
| `--color-content-background-orange-hover`       | `content bg.orange hover`       | `orange.200`          | `#FFE7D8` |
| `--color-content-background-orange-pressed`     | `content bg.orange pressed`     | `orange.250`          | `#FFD9C0` |
| `--color-content-background-green`              | `content bg.green`              | `green.100`           | `#E4F8EE` |
| `--color-content-background-green-hover`        | `content bg.green hover`        | `green.200`           | `#D4F4E4` |
| `--color-content-background-green-pressed`      | `content bg.green pressed`      | `green.250`           | `#BFF0D6` |
| `--color-content-background-blackberry`         | `content bg.blackberry`         | `blackberry (bg).100` | `#F2E6FE` |
| `--color-content-background-blackberry-hover`   | `content bg.blackberry hover`   | `blackberry (bg).200` | `#E7D2FF` |
| `--color-content-background-blackberry-pressed` | `content bg.blackberry pressed` | `blackberry (bg).250` | `#DBBEFF` |
| `--color-content-background-mint`               | `content bg.mint`               | `mint.100`            | `#D8FBFD` |
| `--color-content-background-mint-hover`         | `content bg.mint hover`         | `mint.200`            | `#C5F6F9` |
| `--color-content-background-mint-pressed`       | `content bg.mint pressed`       | `mint.250`            | `#AEEEF3` |
| `--color-content-background-raspberry`          | `content bg.raspberry`          | `raspberry.100`       | `#FCE8F3` |
| `--color-content-background-raspberry-hover`    | `content bg.raspberry hover`    | `raspberry.200`       | `#F9DCEC` |
| `--color-content-background-raspberry-pressed`  | `content bg.raspberry pressed`  | `raspberry.250`       | `#F5CCE2` |
| `--color-content-background-sky`                | `content bg.sky`                | `sky.100`             | `#D8F2FD` |
| `--color-content-background-sky-hover`          | `content bg.sky hover`          | `sky.200`             | `#C4EAFE` |
| `--color-content-background-sky-pressed`        | `content bg.sky pressed`        | `sky.250`             | `#AEDFFD` |
| `--color-content-background-river`              | `content bg.river`              | `river.100`           | `#D1ECFF` |
| `--color-content-background-river-hover`        | `content bg.river hover`        | `river.200`           | `#BFE3FF` |
| `--color-content-background-river-pressed`      | `content bg.river pressed`      | `river.250`           | `#A8D7FF` |
| `--color-content-background-lavender`           | `content bg.lavender`           | `lavender.100`        | `#EFECFF` |
| `--color-content-background-lavender-hover`     | `content bg.lavender hover`     | `lavender.200`        | `#E4DEFF` |
| `--color-content-background-lavender-pressed`   | `content bg.lavender pressed`   | `lavender.250`        | `#D7CEFF` |
| `--color-content-background-neutral`            | `content bg.neutral`            | `gray.100`            | `#F6F6F9` |

### Deprecated Source Groups

The JSON includes deprecated `icon` and `notification` groups marked with a no-entry prefix. Do not use those groups for new component specs; use `text icon`, `content`, and `content bg` tokens instead.

## Raw Values

Do not use raw color values in component styles.

```css
/* Wrong */
.button {
  background: #7f30e3;
  color: #ffffff;
}

/* Correct */
.button {
  background: var(--color-button-primary-background-default);
  color: var(--color-button-primary-text);
}
```