css/migrations/v18.md

Primer CSS `v18.0.0` replaces color modes V1 with V2. To help with the migration, please refer to the guide below.

<Note>
  The functional CSS color variables changed as well. Please refer to the <a href="https://primer.style/primitives/colors#deprecated-variables">deprecated variables section</a>.
</Note>

## Utility classes

See [color utility classes](/utilities/colors) for a list of all the functional color utility classes.

### Text

| `v16`                   | `v18`                   |
| ----------------------- | ----------------------- |
| `.color-text-primary`   | `.color-fg-default`     |
| `.color-text-secondary` | `.color-fg-muted`       |
| `.color-text-tertiary`  | `.color-fg-muted`       |
| `.color-text-link`      | `.color-fg-accent`      |
| `.color-text-success`   | `.color-fg-success`     |
| `.color-text-warning`   | `.color-fg-attention`   |
| `.color-text-danger`    | `.color-fg-danger`      |
| `.color-text-inverse`   | `.color-fg-on-emphasis` |
| `.color-text-white`     | n/a*                    |

* Often `.color-text-white` can be replaced with `.color-fg-on-emphasis`, but there are some cases where that's not ideal. If in doubt, please reach out to the `#primer` team.

### Icon

| `v16`                   | `v18`                 |
| ----------------------- | --------------------- |
| `.color-icon-primary`   | `.color-fg-default`   |
| `.color-icon-secondary` | `.color-fg-muted`     |
| `.color-icon-tertiary`  | `.color-fg-muted`     |
| `.color-icon-info`      | `.color-fg-accent`    |
| `.color-icon-danger`    | `.color-fg-danger`    |
| `.color-icon-success`   | `.color-fg-success`   |
| `.color-icon-warning`   | `.color-fg-attention` |

### Border

| `v16`                     | `v18`                              |
| ------------------------- | ---------------------------------- |
| `.color-border-primary`   | `.color-border-default`            |
| `.color-border-secondary` | `.color-border-muted`              |
| `.color-border-tertiary`  | `.color-border-default`            |
| `.color-border-inverse`   | n/a                                |
| `.color-border-info`      | `.color-border-accent-emphasis`    |
| `.color-border-warning`   | `.color-border-attention-emphasis` |

### Background

| `v16`                       | `v18`                          |
| --------------------------- | ------------------------------ |
| `.color-bg-canvas`          | `.color-bg-default`            |
| `.color-bg-canvas-inverse`  | `.color-bg-emphasis`           |
| `.color-bg-canvas-inset`    | `.color-bg-inset`              |
| `.color-bg-primary`         | `.color-bg-default`            |
| `.color-bg-secondary`       | `.color-bg-subtle`             |
| `.color-bg-tertiary`        | `.color-bg-subtle`             |
| `.color-bg-info`            | `.color-bg-accent`             |
| `.color-bg-info-inverse`    | `.color-bg-accent-emphasis`    |
| `.color-bg-danger-inverse`  | `.color-bg-danger-emphasis`    |
| `.color-bg-success-inverse` | `.color-bg-success-emphasis`   |
| `.color-bg-warning`         | `.color-bg-attention`          |
| `.color-bg-warning-inverse` | `.color-bg-attention-emphasis` |

## Misc

| `v16`           | `v18`               |
| --------------- | ------------------- |
| `.text-inherit` | `.color-fg-inherit` |

A few more selectors and variables were removed. Please refer to [deprecations.json](https://github.com/primer/css/blob/main/src/deprecations.json) for a complete list.

Note: The `<kbd>` styles also got removed from the markdown bundle. In case you import the `markdown` bundle **without** the `base` bundle, make sure to import the `<kbd>` styles as well:

```diff
@import "@primer/css/markdown/index.scss";
+ @import "@primer/css/base/kbd.scss";
```