Skip to content

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

NameValue
40px
32px
26px
22px
18px
48px
40px
32px
24px
20px
16px
14px
12px
12px
calc(var(--base-text-weight-semibold, 600))
calc(var(--base-text-weight-medium, 500))
calc(var(--base-text-weight-normal, 400))
calc(var(--base-text-weight-light, 300))
1
1.25
1.5
14px
1.5

Defined in src/support/variables/layout.scss

NameValue
8px
0
4px
8px
16px
24px
32px
40px
48px
64px
80px
96px
112px
128px
0.0625em
0.125em
0.25em
0.375em
0.5em
0.75em
16px
0
16px
20px
24px
28px
32px
40px
48px
64px
980px
10px
0
544px
768px
1012px
1280px
544px
768px
1012px
1280px
calc('max-width: #{768px - 0.02px}')
calc('min-width: #{768px}')
calc('min-width: 1400px')

Defined in src/support/variables/misc.scss

NameValue
1px
calc(solid)
calc(1px solid var(--color-border-default))
calc(var(--borderWidth-thin, 1px) solid var(--color-border-default))
4px
6px
8px
6px
250px
0.4s
0.1s

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

NameValue

Defined in src/marketing/support/variables.scss

NameValue
calc('/fonts/')
calc(-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji')
450
800
calc('ss02' on, 'ss01' on)
-0.03em
-0.01em
48px
800
calc(var(--base-text-weight-semibold, 600))
24px
96px
72px
64px
56px
48px
40px
32px
28px
24px
20px
16px
100px
76px
68px
60px
52px
44px
36px
32px
28px
24px
20px
28px
24px
48px
40px
32px
28px
24px
20px
16px
14px
12px
64px
52px
44px
40px
32px
28px
24px
20px
20px
-0.01em
0.4s
calc(cubic-bezier(0.16, 1, 0.3, 1))
Edit this page on GitHub
4 contributorssimuraijonrohanBinaryMuseshawnbot
Last edited by simurai on March 26, 2021