primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-22 19:01:02 +03:00
Code Issues Projects Releases Wiki Activity
af8347b23e
css/migrations/v18.md
Katie Langerman ad358f2087
Remove Gatsby docs site (#2484) 
* upgrade

* add all stories

* new directory

* move back to docs

* remove from root

* cleanup

* try node 16

* adjust build script

* try to fix build

* try node 16

* maybe?

* please

* bye gatsby

* fix button story

* add info banner

* add missing marketing docs
2023-07-13 15:14:44 -07:00

3.7 KiB
Raw Blame History

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