Primer CSS Variables

Primer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method ensures our patterns are steady and interoperable with every other. Object-oriented CSS principles, functional CSS, and BEM architecture influence its approach to CSS. It is a highly reusable model.

Primer CSS variables are a way to store information that you can reuse later. In that case, the work will be easy and there is no need to define the CSS property repeatedly.

The typographical variables that are used in the Primer CSS are listed below:

• $h00-size-mobile: This variable is used to define the size of the header by 40px.
• $h0-size-mobile: This variable is used to define the size of the header by 32px.
• $h1-size-mobile: This variable is used to define the size of the header by 26px.
• $h2-size-mobile: This variable is used to define the size of the header by 22px. 
• $h3-size-mobile: This variable is used to define the size of the header by 18px.
• $h00-size: This variable is used to define the size of the header by 48px.
• $h0-size: This variable is used to define the size of the header 40px.
• $h1-size: This variable is used to define the size of the header 32px.
• $h2-size: This variable is used to define the size of the header 24px.
• $h3-size: This variable is used to define the size of the header 20px.
• $h4-size: This variable is used to define the size of the header 16px.
• $h5-size: This variable is used to define the size of the header 14px.
• $h6-size: This variable is used to define the size of the header 12px.
• $font-size-small: This variable is used to define the size of the font by 12px.
• $font-weight-bold: This variable is used to define the size of the weight by 600.
• $font-weight-semibold: This variable is used to define the size of the weight by 500.
• $font-weight-normal: This variable is used to define the size of the weight by 400.
• $font-weight-light: This variable is used to define the size of the weight 300.
• $lh-condensed-ultra: This variable is used to define the size of lh by 1.
• $lh-condensed: This variable is used to define the size of the lh by 1.25.
• $lh-default: This variable is used to define the size of the lh by 1.5.
• $body-font-size: This variable is used to define the size of the font by 14.
• $body-line-height: This variable is used to define the size of the line by 1.5.

Layout Variables:

• $spacer: This variable is used to define the space by 8px.
• $spacer-0: This variable is used to define the space by 0.
• $spacer-1:  This variable is used to define the space by 4px.
• $spacer-2: This variable is used to define the space by 8px.
• $spacer-3:  This variable is used to define the space by 24px.
• $spacer-4: This variable is used to define the space by 32px.
• $spacer-5:  This variable is used to define the space by 40px.
• $spacer-6:  This variable is used to define the space by 48px.
• $spacer-8:  This variable is used to define the space by 64px.
• $spacer-9:  This variable is used to define the space by 80px.
• $spacer-10:  This variable is used to define the space by 96px.
• $spacer-11:  This variable is used to define the space by 112px.
• $spacer-12:  This variable is used to define the space by 128px.
• $em-spacer- 1:  This variable is used to define the space by 0.0625em.
• $em-spacer-2:  This variable is used to define the space by 0.125em.
• $em-spacer-3:  This variable is used to define the space by 0.25em.
• $em-spacer-4:  This variable is used to define the space by 0.375em.
• $em-spacer-5:  This variable is used to define the space by 0.5em.
• $em-spacer-6:  This variable is used to define the space by 0.75em.
• $size:  This variable is used to define the size by 16px.
• $size-0:  This variable is used to define the size by 0.
• $size-1:  This variable is used to define the size by 16px.
• $size-2:  This variable is used to define the size by 20px.
• $size-3:  This variable is used to define the size by 24px.
• $size-4:  This variable is used to define the size by 28px.
• $size-5:  This variable is used to define the size by 32px.
• $size-6:  This variable is used to define the size by 40px.
• $size-7:  This variable is used to define the size by 48px.
• $size-8:  This variable is used to define the size by 64px.
• $container-width: This variable is used to define the container width by 980px.
• $grid-gutter: This variable is used to define the grid by 10px.
• $width-xs:  This variable is used to define the width by 0.
• $width-sm:  This variable is used to define the small-width by 544px.
• $width-md: This variable is used to define the medium-width by 768px.
• $width-lg: This variable is used to define the large-width by 1012px.
• $width-xl: This variable is used to define the xl-width by 1280px.
• $container-sm: This variable is used to define the size of the small container by 544px.
• $container-md: This variable is used to define the size of a medium container by 768px.
• $container-lg: This variable is used to define the size of the large container by 1012px.
• $container-xl: This variable is used to define the size of the extra large container by 1280px.
• $viewport-narrow: This variable is used to define the max-width by calc('max-width: #{768px - 0.02px}').
• $viewport-regular: This variable is used to define the min-width by calc('min-width: #{768px}').
• $viewport-wide: This variable is used to define the min-width by calc('min-width: 1400px').

Misc Variable:

• $border-width: This variable is used to define the border width by 1px.
• $border-style: This variable is used to define the border style by calc(solid).
• $border: This variable is used to define the border by calc(1px solid var(--color-border-default)).
• $border-radius-1: This variable is used to define the radius of the border by 4px.
• $border-radius-2: This variable is used to define the radius of the border by 6px.
• $border-radius-3: This variable is used to define the radius of the border by 8px.
• $border-radius: This variable is used to define the radius of the border by 6px.
• $tooltip-max-width: This variable is used to define the max width of a tooltip by 250px.
• $tooltip-delay: This variable is used to define the delay of the tooltip by 0.4s.
• $tooltip-duration: This variable is used to define the duration of the tooltip by 0.1s.

Other Variable:

• $marketing-font-path: This variable is used to define the path of the font (calc('/fonts/')).
• $font-mktg: This variable is used to define the font of the element.
• $font-weight-medium: This variable is used to define the font-weight by 450.
• $font-weight-extrabold: This variable is used to define the font-weight by 800.
• $mktg-font-feature-settings: This variable is used to define the font feature settings.
• $mktg-header-spacing-large: This variable is used to define the spacing around the header by -0.03em.
• $mktg-header-spacing-default: This variable is used to define spacing around the header by -0.01em.
• $mktg-header-spacing-threshold: This variable is used to define the spacing around the header by 48px.
• $mktg-header-weight-large: This variable is used to define the weight of the header by 800.
• $mktg-header-weight-default: This variable is used to define the weight of the header by 600.
• $mktg-header-weight-threshold: This variable is used to define the weight of the header by 24px.
• $mktg-h-size-0: This variable is used to define the size by 96px.
• $mktg-h-size-1: This variable is used to define the size by 72px
• $mktg-h-size-2: This variable is used to define the size by  64px
• $mktg-h-size-3: This variable is used to define the size by 56px
• $mktg-h-size-4: This variable is used to define the size by 48px
• $mktg-h-size-5: This variable is used to define the size by 40px
• $mktg-h-size-6: This variable is used to define the size by 32px
• $mktg-h-size-7: 2This variable is used to define the size by 8px
• $mktg-h-size-8: This variable is used to define the size by 24px
• $mktg-h-size-9: This variable is used to define the size by 20px
• $mktg-h-size-10: This variable is used to define the size by 16px
• $mktg-h-lh-0: This variable is used to define the line height by 100px
• $mktg-h-lh-1: This variable is used to define the line height by 6px
• $mktg-h-lh-2: This variable is used to define the line height by 68px
• $mktg-h-lh-3: This variable is used to define the line height by 60px
• $mktg-h-lh-4: This variable is used to define the line height by 52px
• $mktg-h-lh-5: This variable is used to define the line height by 44px
• $mktg-h-lh-6: This variable is used to define the line height by 36px
• $mktg-h-lh-7: This variable is used to define the line height by 32px
• $mktg-h-lh-8: This variable is used to define the line height by 28px
• $mktg-h-lh-9: This variable is used to define the line height by 24px
• $mktg-h-lh-10: This variable is used to define the line height by 20px
• $mktg-body-spacing-threshold: This variable is used to define the threshold spacing around the body by 28px
• $mktg-body-weight-threshold: This variable is used to define the threshold weight of the body by 24px.
• $mktg-body-size-0: This variable is used to define the size of the body by 48px.
• $mktg-body-size-1: This variable is used to define the size of the body by 40px
• $mktg-body-size-2: This variable is used to define the size of the body by 32px
• $mktg-body-size-3: This variable is used to define the size of the body by 28px
• $mktg-body-size-4: This variable is used to define the size of the body by 24px
• $mktg-body-size-5: This variable is used to define the size of the body by 20px
• $mktg-body-size-6: This variable is used to define the size of the body by 16px
• $mktg-body-size-7: This variable is used to define the size of the body by 14px
• $mktg-body-size-8: This variable is used to define the size of the body by 12px
• $mktg-body-lh-0: This variable is used to define the size of the body by 64px
• $mktg-body-lh-1: This variable is used to define the size of the body by 52px
• $mktg-body-lh-2: This variable is used to define the size of the body by 44px
• $mktg-body-lh-3: This variable is used to define the size of the body by 40px
• $mktg-body-lh-4: This variable is used to define the size of the body by 32px
• $mktg-body-lh-5: This variable is used to define the size of the body by 28px
• $mktg-body-lh-6: This variable is used to define the size of the body by 24px
• $mktg-body-lh-7: This variable is used to define the size of the body by 20px
• $mktg-body-lh-8: This variable is used to define the size of the body by 20px
• $mktg-body-spacing-large: This variable is used to define the spacing around the body by -0.01em.
• $transition-time: This variable is used to define the transition-time by 0.4s
• $ease-mktg: This variable is used to define the ease property of the element. 

Example 1: In the above code, we will make use of the above variables to demonstrate the use of variables.

SCSS code:

$border-width: 2px solid green;
.gfg {
 border:$border-width;
}

Compiled CSS Code:

.gfg {
 border: 2px solid green;
}

Output:

👁 Image

Example 2: In the above code, we will make use of the above variables to demonstrate the use of variables.

SCSS Code:

$h0-size: 40px;
h3{
 font-size:$h0-size;
}

Compiled CSS Code:

h3 {
 font-size: 40px;
}

Output:

👁 Image

Reference: https://primer.style/