Addresses @broccolini's feedback

Author: brandonrosage

modules/primer-popover/README.md

@@ -61,7 +61,7 @@ Each of these modifiers also support a syntax for adjusting the positioning the
 - `.Popover-message--bottom--left`
 - `.Popover-message--left--bottom`
 
-Lastly, there is an added `.Popover-message--lg` modifer, which Assumes a slightly wider popover message.
+Lastly, there is an added `.Popover-message--large` modifier, which assumes a slightly wider popover message on screens wider than 544px.
 
 ### Notes
 
@@ -92,7 +92,7 @@ Defaults to caret oriented top-center.
 <div class="position-relative text-center">
   <button class="btn btn-primary">UI</button>
   <div class="Popover right-0 left-0">
-    <div class="Popover-message Popover-message--lg text-left p-4 mt-2 Box box-shadow-large">
+    <div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
       <h4 class="mb-2">Popover heading</h4>
       <p>Message about this particular piece of UI.</p>
       <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>

modules/primer-popover/lib/popover.scss

@@ -5,7 +5,7 @@
 
 .Popover-message {
   position: relative;
-  width: 235px;
+  width: 232px;
   margin-right: auto;
   margin-left: auto;
 
@@ -22,7 +22,7 @@
     top: -16px;
     margin-left: -9px;
     border: $spacer-2 $border-style transparent;
-    border-bottom-color: rgba(0, 0, 0, 0.15);
+    border-bottom-color: $border-black-fade;
   }
 
   &::after {
@@ -44,8 +44,8 @@
   }
 
   &::before {
-    bottom: -16px;
-    border-top-color: rgba(0, 0, 0, 0.15);
+    bottom: -$spacer-3;
+    border-top-color: $border-black-fade;
   }
 
   &::after {
@@ -83,7 +83,7 @@
 
   &::before,
   &::after {
-    left: 20px;
+    left: $spacer-4;
     margin-left: 0;
   }
 
@@ -121,8 +121,8 @@
 .Popover-message--right--top,
 .Popover-message--right--bottom {
   &::before {
-    right: -16px;
-    border-left-color: rgba(0, 0, 0, 0.15);
+    right: -$spacer-3;
+    border-left-color: $border-black-fade;
   }
 
   &::after {
@@ -136,8 +136,8 @@
 .Popover-message--left--top,
 .Popover-message--left--bottom {
   &::before {
-    left: -16px;
-    border-right-color: rgba(0, 0, 0, 0.15);
+    left: -$spacer-3;
+    border-right-color: $border-black-fade;
   }
 
   &::after {
@@ -151,7 +151,7 @@
 .Popover-message--left--top {
   &::before,
   &::after {
-    top: 20px;
+    top: $spacer-4;
   }
 }
 
@@ -164,17 +164,17 @@
   }
 
   &::before {
-    bottom: 20px;
+    bottom: $spacer-4;
   }
 
   &::after {
     bottom: 21px;
   }
 }
 
-.Popover-message--lg {
+.Popover-message--large {
 
   @include breakpoint(sm) {
-    min-width: 330px;
+    min-width: 320px;
   }
 }