Skip to content

Primer CSS v18 migration guide

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.

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

v16v18
.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-whiten/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

v16v18
.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

v16v18
.color-border-primary.color-border-default
.color-border-secondary.color-border-muted
.color-border-tertiary.color-border-default
.color-border-inversen/a
.color-border-info.color-border-accent-emphasis
.color-border-warning.color-border-attention-emphasis

Background

v16v18
.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

v16v18
.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";