Migrating to CSS variables
Support for migrating from SCSS varibles to CSS variables
Most legacy SCSS variables from Primer CSS have new CSS variable replacements.
For values that have no replacement listed, use the raw value or find a replacement that is close in value.
Legacy scss variable | New css variable |
|---|---|
| $h00-size-mobile | --text-display-size |
| $h0-size-mobile | --text-title-size-large |
| $h1-size-mobile | 26px deprecated |
| $h2-size-mobile | 22px deprecated |
| $h3-size-mobile | 18px deprecated |
| $h00-size | --base-size-48 |
| $h0-size | --text-display-size |
| $h1-size | --text-title-size-large |
| $h2-size | --base-size-24 |
| $h3-size | --text-title-size-medium |
| $h4-size | --text-title-size-small |
| $h5-size | --text-body-size-medium |
| $h6-size | --text-body-size-small |
| $font-size-small | --text-body-size-small |
| $font-weight-bold | --base-text-weight-semibold |
| $font-weight-semibold | --base-text-weight-medium |
| $font-weight-normal | --base-text-weight-normal |
| $font-weight-light | --base-text-weight-light |
| $lh-condensed-ultra | 1` |
| $lh-condensed | 1.25` |
| $lh-default | 1.5` |
| $body-font | --fontStack-system |
| $mono-font | --fontStack-monospace |
| $body-font-size | --text-body-size-medium |
| $body-line-height | --text-body-lineHeight-medium |
| $spacer | --base-size-8 |
| $spacer-0 | 0 deprecated |
| $spacer-1 | --base-size-4 |
| $spacer-2 | --base-size-8 |
| $spacer-3 | --base-size-16 |
| $spacer-4 | --base-size-24 |
| $spacer-5 | --base-size-32 |
| $spacer-6 | --base-size-40 |
| $spacer-7 | --base-size-48 |
| $spacer-8 | --base-size-64 |
| $spacer-9 | --base-size-80 |
| $spacer-10 | --base-size-96 |
| $spacer-11 | --base-size-112 |
| $spacer-12 | --base-size-128 |
| $em-spacer-1 | 0.0625em deprecated |
| $em-spacer-2 | 0.125em deprecated |
| $em-spacer-3 | 0.25em deprecated |
| $em-spacer-4 | 0.375em deprecated |
| $em-spacer-5 | 0.5em deprecated |
| $em-spacer-6 | 0.75em deprecated |
| $size | --base-size-16 |
| $size-0 | 0 deprecated |
| $size-1 | --base-size-16 |
| $size-2 | --base-size-20 |
| $size-3 | --base-size-24 |
| $size-4 | --base-size-28 |
| $size-5 | --base-size-32 |
| $size-6 | --base-size-40 |
| $size-7 | --base-size-48 |
| $size-8 | --base-size-64 |
| $container-width | 980px deprecated |
| $grid-gutter | 10px deprecated |
| $width-xs | 0 deprecated |
| $width-sm | --breakpoint-small |
| $width-md | --breakpoint-medium |
| $width-lg | --breakpoint-large |
| $width-xl | --breakpoint-xlarge |
| $container-sm | --breakpoint-small |
| $container-md | --breakpoint-medium |
| $container-lg | --breakpoint-large |
| $container-xl | --breakpoint-xlarge |
| $viewport-narrow | --viewportRange-narrow |
| $viewport-regular | --viewportRange-regular |
| $viewport-wide | --viewportRange-wide |
| $border-width | --borderWidth-thin |
| $border-style | solid deprecated |
| $border | solid var(--borderWidth-thin) var(--borderColor-default) |
| $border-rem | solid var(--borderWidth-thin) var(--borderColor-default) |
| $border-radius-1 | --borderRadius-small |
| $border-radius-2 | --borderRadius-medium |
| $border-radius-3 | 8px --borderRadius-medium` |
| $border-radius | --borderRadius-small |