Primer CSS v18.0.0 replaces color modes V1 with V2. To help with the migration, please refer to the guide below.
The functional CSS color variables changed as well. Please refer to the deprecated variables section.
Utility classes
See color utility classes 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 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:
@import "@primer/css/markdown/index.scss";
+ @import "@primer/css/base/kbd.scss";
