Variables

Stable
Not reviewed for accessibility

The tables below list all of the global SCSS variables defined in the support/variables directory.

Variables with a are planned for deprecation in a future version of @primer/css, and should be avoided.

Defined in src/support/variables/typography.scss

Name	Value
# $h00-size-mobile	40px
# $h0-size-mobile	32px
# $h1-size-mobile	26px
# $h2-size-mobile	22px
# $h3-size-mobile	18px
# $h00-size	48px
# $h0-size	40px
# $h1-size	32px
# $h2-size	24px
# $h3-size	20px
# $h4-size	16px
# $h5-size	14px
# $h6-size	12px
# $font-size-small	12px
# $font-weight-bold	calc(var(--base-text-weight-semibold, 600))
# $font-weight-semibold	calc(var(--base-text-weight-medium, 500))
# $font-weight-normal	calc(var(--base-text-weight-normal, 400))
# $font-weight-light	calc(var(--base-text-weight-light, 300))
# $lh-condensed-ultra	1
# $lh-condensed	1.25
# $lh-default	1.5
# $body-font-size	14px
# $body-line-height	1.5

Defined in src/support/variables/layout.scss

Name	Value
# $spacer	8px
# $spacer-0	0
# $spacer-1	4px
# $spacer-2	8px
# $spacer-3	16px
# $spacer-4	24px
# $spacer-5	32px
# $spacer-6	40px
# $spacer-7	48px
# $spacer-8	64px
# $spacer-9	80px
# $spacer-10	96px
# $spacer-11	112px
# $spacer-12	128px
# $em-spacer-1	0.0625em
# $em-spacer-2	0.125em
# $em-spacer-3	0.25em
# $em-spacer-4	0.375em
# $em-spacer-5	0.5em
# $em-spacer-6	0.75em
# $size	16px
# $size-0	0
# $size-1	16px
# $size-2	20px
# $size-3	24px
# $size-4	28px
# $size-5	32px
# $size-6	40px
# $size-7	48px
# $size-8	64px
# $container-width	980px
# $grid-gutter	10px
# $width-xs	0
# $width-sm	544px
# $width-md	768px
# $width-lg	1012px
# $width-xl	1280px
# $container-sm	544px
# $container-md	768px
# $container-lg	1012px
# $container-xl	1280px
# $viewport-narrow	calc('max-width: #{768px - 0.02px}')
# $viewport-regular	calc('min-width: #{768px}')
# $viewport-wide	calc('min-width: 1400px')

Defined in src/support/variables/misc.scss

Name	Value
# $border-width	1px
# $border-style	calc(solid)
# $border	calc(1px solid var(--borderColor-default, var(--color-border-default)))
# $border-rem	calc(var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)))
# $border-radius-1	4px
# $border-radius-2	6px
# $border-radius-3	8px
# $border-radius	6px
# $tooltip-max-width	250px
# $tooltip-delay	0.4s
# $tooltip-duration	0.1s

Defined in src/primitives/temp-typography-tokens.scss

Name	Value
# --h00-size-mobile
# --h0-size-mobile
# --h1-size-mobile
# --h2-size-mobile
# --h3-size-mobile
# --h00-size
# --h0-size
# --h1-size
# --h2-size
# --h3-size
# --h4-size
# --h5-size
# --h6-size
# --body-font-size
# --font-size-small

Defined in src/marketing/support/variables.scss

Name	Value
# $marketing-font-path	calc('/fonts/')
# $font-mktg	calc(-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji')
# $font-weight-medium	450
# $font-weight-extrabold	800
# $mktg-font-feature-settings	calc('ss02' on, 'ss01' on)
# $mktg-header-spacing-large	-0.03em
# $mktg-header-spacing-default	-0.01em
# $mktg-header-spacing-threshold	48px
# $mktg-header-weight-large	800
# $mktg-header-weight-default	calc(var(--base-text-weight-semibold, 600))
# $mktg-header-weight-threshold	24px
# $mktg-h-size-0	96px
# $mktg-h-size-1	72px
# $mktg-h-size-2	64px
# $mktg-h-size-3	56px
# $mktg-h-size-4	48px
# $mktg-h-size-5	40px
# $mktg-h-size-6	32px
# $mktg-h-size-7	28px
# $mktg-h-size-8	24px
# $mktg-h-size-9	20px
# $mktg-h-size-10	16px
# $mktg-h-lh-0	100px
# $mktg-h-lh-1	76px
# $mktg-h-lh-2	68px
# $mktg-h-lh-3	60px
# $mktg-h-lh-4	52px
# $mktg-h-lh-5	44px
# $mktg-h-lh-6	36px
# $mktg-h-lh-7	32px
# $mktg-h-lh-8	28px
# $mktg-h-lh-9	24px
# $mktg-h-lh-10	20px
# $mktg-body-spacing-threshold	28px
# $mktg-body-weight-threshold	24px
# $mktg-body-size-0	48px
# $mktg-body-size-1	40px
# $mktg-body-size-2	32px
# $mktg-body-size-3	28px
# $mktg-body-size-4	24px
# $mktg-body-size-5	20px
# $mktg-body-size-6	16px
# $mktg-body-size-7	14px
# $mktg-body-size-8	12px
# $mktg-body-lh-0	64px
# $mktg-body-lh-1	52px
# $mktg-body-lh-2	44px
# $mktg-body-lh-3	40px
# $mktg-body-lh-4	32px
# $mktg-body-lh-5	28px
# $mktg-body-lh-6	24px
# $mktg-body-lh-7	20px
# $mktg-body-lh-8	20px
# $mktg-body-spacing-large	-0.01em
# $transition-time	0.4s
# $ease-mktg	calc(cubic-bezier(0.16, 1, 0.3, 1))

Edit this page on GitHub