update components to use em spacer variables:

- flash
- breadcrumb
- button
- states
- markdown lists
- markdown-body
- support button mixins
- tooltips

Author: broccolini

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/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-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;