1
1
mirror of https://github.com/primer/css.git synced 2024-12-24 14:42:26 +03:00
css/docs/content/support/v18-migration.mdx
Josh Soref 357d3f2b4c
Spelling (#1981)
Signed-off-by: Josh Soref <jsoref@users.noreply.github.com>

Co-authored-by: Josh Soref <jsoref@users.noreply.github.com>
2022-03-08 04:29:10 +00:00

86 lines
3.8 KiB
Plaintext

---
title: Primer CSS v18 migration guide
description: 'Guide for migrating to version 18.0.0 of Primer CSS'
---
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";
```