Merge pull request #1047 from primer/next-2

Component refresh tweaks II

docs/content/components/labels.md

@@ -56,6 +56,8 @@ Labels come in a few different themes. Use a theme that helps communicate the co
 <span class="Label mr-1 Label--red" title="Label: Error">Error</span>
 <span class="Label mr-1 Label--green" title="Label: Success">Success</span>
 <span class="Label mr-1 Label--blue" title="Label: Info">Info</span>
+<span class="Label mr-1 Label--purple" title="Label: PRO">PRO</span>
+<span class="Label mr-1 Label--pink" title="Label: Sponsor">Sponsor</span>
 ```
 
 Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.

src/avatars/avatar-parent-child.scss

@@ -12,7 +12,7 @@
   bottom: -9%;
   background-color: $bg-white; // For transparent backgrounds
   // stylelint-disable-next-line primer/borders
-  border-radius: 2px;
+  border-radius: $border-radius-1;
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: -2px -2px 0 rgba($white, 0.8);
 }

src/avatars/avatar-stack.scss

@@ -35,7 +35,7 @@
     background-color: $bg-white;
     border-right: $border-width $border-style $border-white;
     // stylelint-disable-next-line primer/borders
-    border-radius: 2px;
+    border-radius: $border-radius-1;
     transition: margin 0.1s ease-in-out;
 
     &:first-child {
@@ -50,7 +50,7 @@
     // stylelint-disable selector-max-type
     img {
       // stylelint-disable-next-line primer/borders
-      border-radius: 2px;
+      border-radius: $border-radius-1;
     }
     // stylelint-enable selector-max-type
 

src/avatars/avatar.scss

@@ -24,7 +24,7 @@
 .avatar-2,
 .avatar-small {
   // stylelint-disable-next-line primer/borders
-  border-radius: $border-radius / 2;
+  border-radius: $border-radius-1;
 }
 
 // Sizes

src/buttons/button.scss

@@ -244,7 +244,7 @@
 
 .btn-outline {
   @include btn-inverse-on-hover(
-    $color: $blue-600,
+    $color: $blue-500,
     $bg-hover: $blue-500,
     $bg-active: darken($blue-500, 3%),
     $border-hover: $blue-600,

src/buttons/misc.scss

@@ -169,11 +169,11 @@
   position: relative;
   float: left;
   // stylelint-disable-next-line primer/spacing
-  padding: 3px 12px;
+  padding: 0 12px;
   font-size: $font-size-small;
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
-  line-height: 20px;
+  line-height: height-without-border($size-4);
   color: $text-gray-dark;
   vertical-align: middle;
   background-color: $bg-white;

src/labels/labels.scss

@@ -75,7 +75,19 @@
 }
 
 .Label--blue {
-  // stylelint-disable-next-line primer/colors
-  color: $blue-600;
+  color: $text-blue;
   border-color: $border-blue;
 }
+
+.Label--purple {
+  color: $text-purple;
+  // stylelint-disable-next-line primer/borders
+  border-color: $purple-400;
+}
+
+.Label--pink {
+  // stylelint-disable-next-line primer/colors
+  color: $pink-600;
+  // stylelint-disable-next-line primer/borders
+  border-color: $pink-400;
+}

src/navigation/menu.scss

@@ -49,8 +49,6 @@
   &[aria-selected=true],
   &[aria-current] {
     cursor: default;
-    // stylelint-disable-next-line primer/colors
-    background-color: #fff2f0; // custom coral
 
     &::before {
       position: absolute;

src/navigation/underline-nav.scss

@@ -37,6 +37,10 @@
   &[aria-current] {
     // stylelint-disable-next-line primer/borders
     border-bottom-color: #f9826c; // custom coral
+
+    .UnderlineNav-octicon {
+      color: $text-gray;
+    }
   }
 }
 

src/pagination/pagination.scss

@@ -32,7 +32,7 @@
   [aria-current],
   [aria-current]:hover {
     // stylelint-disable-next-line primer/borders
-    border-color: $orange-500;
+    border-color: #f9826c; // custom coral
   }
 
   .gap,

src/support/variables/misc.scss

@@ -1,11 +1,15 @@
 // Miscellaneous variables
 
-// Border size
+// Border
 $border-width: 1px !default;
 $border-color: $border-gray !default;
 $border-style: solid !default;
 $border: $border-width $border-color $border-style !default;
-$border-radius: 6px !default;
+
+// Border Radius
+$border-radius-1:  4px !default;
+$border-radius-2:  6px !default;
+$border-radius: $border-radius-2 !default;
 
 // Box shadow
 $box-shadow: 0 1px 0 rgba($gray-400, 0.1) !default;

src/utilities/borders.scss

@@ -40,14 +40,10 @@
     .border#{$variant}-left-0   { border-left: 0 !important; }
 
     // Rounded corners
-    /* Remove the border-radius */
+    .rounded#{$variant}   { border-radius: $border-radius !important; }
     .rounded#{$variant}-0 { border-radius: 0 !important; }
-    /* Add a half border-radius to all corners */
-    .rounded#{$variant}-1 { border-radius: $border-radius / 2 !important; }
-    /* Add a border-radius to all corners */
-    .rounded#{$variant}-2 { border-radius: $border-radius !important; }
-    /* Add a double border-radius to all corners */
-    .rounded#{$variant}-3 { border-radius: $border-radius * 2 !important; }
+    .rounded#{$variant}-1 { border-radius: $border-radius-1 !important; }
+    .rounded#{$variant}-2 { border-radius: $border-radius-2 !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {