Skip to content

Variables

Experimental

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/colors.scss

NameValueAliases
#fff
rgba(27, 31, 35, 0.15)
rgba(255, 255, 255, 0.15)
#d1d5da
#444d56
#eaecef
#e1e4e8$border-color
#0366d6
#c8e1ff
#34d058
#a2cbac
#6f42c1
#d73a49
#f97583
#f9c513
#fff
#1b1f23
rgba(27, 31, 35, 0.5)
#f1f8ff
#0366d6
#24292e
#fafbfc
#f6f8fa
#28a745
#dcffe4
#d15704
#6f42c1
#f5f0ff
#ea4aaa
#d73a49
#ffeef0
#ffd33d
#fff5b1
#dbab09
#1b1f23
#fff
#0366d6
#24292e
#6a737d
#586069
#22863a
#a04100
#e36209
#6f42c1
#ea4aaa
#cb2431
#b08800

Defined in src/support/variables/misc.scss

NameValueAliases
1px
#e1e4e8
solid
1px #e1e4e8 solid
4px
6px$border-radius
8px
6px
0 1px 0 rgba(27, 31, 35, 0.04)
0 3px 6px rgba(149, 157, 165, 0.15)
0 8px 24px rgba(149, 157, 165, 0.2)
0 12px 48px rgba(149, 157, 165, 0.3)
inset 0 1px 0 rgba(255, 255, 255, 0.25)
inset 0 1px 0 rgba(225, 228, 232, 0.2)
0 0 0 3px rgba(3, 102, 214, 0.3)
rgba(27, 31, 35, 0.15)
inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15)
inset 0 1px 2px rgba(27, 31, 35, 0.075)
0 0 0 0.2em rgba(3, 102, 214, 0.3)
250px
#1b1f23
#fff
0.4s
0.1s
#2cbe4e
#cb2431
#d1d5da

Defined in src/support/variables/color-system.scss

NameValueAliases
#1b1f23$bg-black, $text-black, $tooltip-background-color
#fff$border-white, $bg-white, $text-white, $tooltip-text-color
#fafbfc$bg-gray-light
#f6f8fa$bg-gray
#e1e4e8$border-gray, $border-color
#d1d5da$border-gray-dark, $bg-diffstat-neutral
#959da5$gray-light
#6a737d$gray, $text-gray-light
#586069$text-gray
#444d56$border-gray-darker
#2f363d
#24292e$gray-dark, $bg-gray-dark, $text-gray-dark
#f1f8ff$bg-blue-light
#dbedff
#c8e1ff$border-blue-light
#79b8ff
#2188ff
#0366d6$blue, $border-blue, $bg-blue, $text-blue
#005cc5
#044289
#032f62
#05264c
#f0fff4
#dcffe4$bg-green-light
#bef5cb
#85e89d
#34d058$border-green
#28a745$green, $bg-green
#22863a$text-green
#176f2c
#165c26
#144620
#fffdef
#fffbdd
#fff5b1$bg-yellow-light
#ffea7f
#ffdf5d
#ffd33d$yellow, $bg-yellow
#f9c513$border-yellow
#dbab09$bg-yellow-dark
#b08800$text-yellow
#735c0f
#fff8f2
#ffebda
#ffd1ac
#ffab70
#fb8532
#f66a0a$orange
#e36209$text-orange-light
#d15704$bg-orange
#c24e00
#a04100$text-orange
#ffeef0$bg-red-light
#ffdce0
#fdaeb7
#f97583$border-red-light
#ea4a5a
#d73a49$red, $border-red, $bg-red
#cb2431$text-red, $bg-diffstat-deleted
#b31d28
#9e1c23
#86181d
#f5f0ff$bg-purple-light
#e6dcfd
#d1bcf9
#b392f0
#8a63d2
#6f42c1$purple, $border-purple, $bg-purple, $text-purple
#5a32a3
#4c2889
#3a1d6e
#29134e
#ffeef8
#fedbf0
#f9b3dd
#f692ce
#ec6cb9
#ea4aaa$bg-pink, $text-pink
#d03592
#b93a86
#99306f
#6d224f
rgba(27, 31, 35, 0.15)$border-black-fade, $border-color-button
rgba(27, 31, 35, 0.3)
rgba(27, 31, 35, 0.5)$bg-black-fade
rgba(27, 31, 35, 0.7)
rgba(27, 31, 35, 0.85)
rgba(255, 255, 255, 0.15)$border-white-fade
rgba(255, 255, 255, 0.3)
rgba(255, 255, 255, 0.5)
rgba(255, 255, 255, 0.7)
rgba(255, 255, 255, 0.85)
#d73a49$border-red
#6f42c1$border-purple, $text-purple
#0366d6
#28a745
#ffd33d
#f66a0a
#24292e
#959da5
#6a737d

Defined in src/support/variables/typography.scss

NameValueAliases
40px
32px
26px
22px
18px
48px
40px
32px
24px
20px
16px
14px
12px
12px
600
500
400
300
1
1.25
1.5$body-line-height
14px
1.5

Defined in src/support/variables/layout.scss

NameValueAliases
8px$spacer-2
0
4px
8px
16px
24px
32px
40px
0.0625em
0.125em
0.25em
0.375em
0.5em
0.75em
16px$size-1
0
16px
20px
24px
28px
32px
40px
48px
64px
980px
10px
0
544px$container-sm
768px$container-md
1012px$container-lg
1280px$container-xl
544px
768px
1012px
1280px

Defined in src/marketing/support/variables.scss

NameValueAliases
/fonts/
Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
64px
48px
#2ebc4f
#1074e7
0.4s
48px
64px
80px
96px
112px
128px
(0: 0, 1: 4px, 2: 8px, 3: 16px, 4: 24px, 5: 32px, 6: 40px, 7: 48px, 8: 64px, 9: 80px, 10: 96px, 11: 112px, 12: 128px)