Em spacers

modules/primer-alerts/lib/flash.scss

@@ -73,7 +73,7 @@
 }
 
 .warning {
-  padding: 0.5em;
+  padding: $em-spacer-5;
   margin-bottom: 0.8em;
   font-weight: $font-weight-bold;
   background-color: $yellow-100;

modules/primer-breadcrumb/lib/breadcrumb.scss

@@ -5,8 +5,8 @@
   list-style: none;
 
   &::after {
-    padding-right: 0.5em;
-    padding-left: 0.5em;
+    padding-right: $em-spacer-5;
+    padding-left: $em-spacer-5;
     color: $border-gray;
     content: "/";
   }

modules/primer-buttons/lib/button.scss

@@ -90,7 +90,7 @@
 
 // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
 .btn-large {
-  padding: 0.75em 1.25em;
+  padding: $em-spacer-6 1.25em;
   font-size: inherit;
   border-radius: 6px;
 }

modules/primer-labels/lib/states.scss

@@ -26,7 +26,7 @@
 .State--red { background-color: $red-600; }
 
 .State--small {
-  padding: 0.125em $spacer-1;
+  padding: $em-spacer-2 $spacer-1;
   font-size: $h6-size;
 
   .octicon {

modules/primer-markdown/lib/lists.scss

@@ -54,7 +54,7 @@
   }
 
   li + li {
-    margin-top: 0.25em;
+    margin-top: $em-spacer-3;
   }
 
   dl {

modules/primer-markdown/lib/markdown-body.scss

@@ -69,7 +69,7 @@
   }
 
   hr {
-    height: 0.25em;
+    height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
     background-color: $gray-200;

modules/primer-support/docs/spacing.md

@@ -9,44 +9,32 @@ source: https://github.com/primer/primer/blob/master/modules/primer-support/lib/
 ## Spacing scale
 The spacing scale is a **base-8** scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for GitHub's UI. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of `8px`.
 
-| Scale | Value |
-| --- | --- |
-| 0 | 0 |
-| 1 | 4px |
-| 2 | 8px |
-| 3 | 16px |
-| 4 | 24px |
-| 5 | 32px |
-| 6 | 40px |
-
-The spacing scale is used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities, and via variables within components.
+| Variable | Scale | Value |
+| --- | --- | --- |
+| $spacer-1 | 0 | 0 |
+| $spacer-1 | 1 | 4px |
+| $spacer-1 | 2 | 8px |
+| $spacer-1 | 3 | 16px |
+| $spacer-1 | 4 | 24px |
+| $spacer-1 | 5 | 32px |
+| $spacer-1 | 6 | 40px |
+
+These variables are encouraged to be used within components and custom CSS. The spacing scale is also used for [margin](./utilities/margin) and [padding](./utilities/padding) utilities.
 
 See [primer-marketing-support](../primer-marketing-support) for the extended spacing scale used for marketing needs and the related y-axis spacing utilities for [margin](../primer-marketing-utilities/docs/margin.md) and [padding](../primer-marketing-utilities/docs/padding.md).
 
 ## Em-based spacing
-Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values so that, in combination with typography and line-height, the total height lands on sensible numbers.
+Ems are used for spacing within components such as buttons and form elements. We stick to common fractions for em values (and powers of 2 where possible) so that , in combination with typography and line-height, the total height lands on sensible numbers.
 
 We aim for whole numbers, however, GitHub's body font-size is 14px which is difficult to work with, so we sometimes can't achieve a whole number. Less desirable values are highlighted in <span class="text-red">red</span> below.
 
-| Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
-| --- | --- | --- | --- |
-| 3/4 | .75 | 42 | 48 |
-| 1/2 | .5 | 35 | 40 |
-| 3/8 | .375 | <span class="text-red">31.5</span> | 36 |
-| 1/4 | .25 | 28 | 32 |
-| 1/8 | .125 | <span class="text-red">24.5</span> | 28 |
+| Variable | Fraction | Y Padding (em) | Total height at 14px | Total height at 16px |
+| --- | --- | --- | --- | --- |
+| $em-spacer-1 | 1/16 | .0625 | <span class="text-red">22.75</span> | 26 |
+| $em-spacer-2 | 1/8 | .125 | <span class="text-red">24.5</span> | 28 |
+| $em-spacer-3 | 1/4 | .25 | 28 | 32 |
+| $em-spacer-4 | 3/8 | .375 | <span class="text-red">31.5</span> | 36 |
+| $em-spacer-5 | 1/2 | .5 | 35 | 40 |
+| $em-spacer-6 | 3/4 | .75 | 42 | 48 |
 
-We recommend using the fractions shown above. To calculate values with other font-sizes or em values, we suggest using [Formula](http://jxnblk.com/formula/).
-
-## Spacer Variables
-
-These variables match the above scale and are encouraged to be used within components. They are also used in our [margin](./utilities/margin) and [padding utilities](./utilities/padding).
-
-```scss
-$spacer-1: 4px;
-$spacer-2: 8px;
-$spacer-3: 16px;
-$spacer-4: 24px;
-$spacer-5: 32px;
-$spacer-6: 40px;
-```
+The variables listed above are preferred for use within components and custom CSS. To calculate values with other font-sizes or em values, we suggest using [Formula](http://jxnblk.com/formula/).

modules/primer-support/lib/mixins/buttons.scss

@@ -18,7 +18,7 @@
     &.hover {
       background-color: darken($bg2, 3%);
       background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
-      background-position: 0 -0.5em;
+      background-position: 0 -$em-spacer-5;
       border-color: rgba($black, 0.35);
     }
 
@@ -50,7 +50,7 @@
     &.hover {
       background-color: darken($bg2, 2%);
       background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
-      background-position: 0 -0.5em;
+      background-position: 0 -$em-spacer-5;
       border-color: $black-fade-50;
     }
 

modules/primer-support/lib/variables/layout.scss

@@ -29,6 +29,14 @@ $spacer-4: nth($spacers, 5) !default; // 24px
 $spacer-5: nth($spacers, 6) !default; // 32px
 $spacer-6: nth($spacers, 7) !default; // 40px
 
+// Em spacer variables
+$em-spacer-1: 0.0625em !default; // 1/16
+$em-spacer-2: 0.125em !default;  // 1/8
+$em-spacer-3: 0.25em !default;   // 1/4
+$em-spacer-4: 0.375em !default;  // 3/8
+$em-spacer-5: 0.5em !default;    // 1/2
+$em-spacer-6: 0.75em !default;   // 3/4
+
 // Fixed-width container variables
 $container-width: 980px !default;
 $grid-gutter:     10px !default;

modules/primer-tooltips/lib/tooltips.scss

@@ -7,7 +7,7 @@
   position: absolute;
   z-index: 1000000;
   display: none;
-  padding: 0.5em 0.75em;
+  padding: $em-spacer-5 $em-spacer-6;
   font: normal normal 11px/1.5 $body-font;
   -webkit-font-smoothing: subpixel-antialiased;
   color: $tooltip-text-color;