mirror of
https://github.com/primer/css.git
synced 2024-12-24 14:42:26 +03:00
357d3f2b4c
Signed-off-by: Josh Soref <jsoref@users.noreply.github.com> Co-authored-by: Josh Soref <jsoref@users.noreply.github.com>
86 lines
3.8 KiB
Plaintext
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";
|
|
```
|