diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md
index 616dcbc8f9..6bc97edbe9 100644
--- a/docs/content/components/labels.md
+++ b/docs/content/components/labels.md
@@ -56,6 +56,8 @@ Labels come in a few different themes. Use a theme that helps communicate the co
Error
Success
Info
+PRO
+Sponsor
```
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss
index c2260a42ce..b71be1a398 100644
--- a/src/avatars/avatar-parent-child.scss
+++ b/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);
}
diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss
index 9d0247aed9..909df7d4f0 100644
--- a/src/avatars/avatar-stack.scss
+++ b/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
diff --git a/src/avatars/avatar.scss b/src/avatars/avatar.scss
index 513e2851eb..bc28ea0603 100644
--- a/src/avatars/avatar.scss
+++ b/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
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index ec11f3c776..8a1806807b 100644
--- a/src/buttons/button.scss
+++ b/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,
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 70a9dcf66f..26814ccad4 100644
--- a/src/buttons/misc.scss
+++ b/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;
diff --git a/src/labels/labels.scss b/src/labels/labels.scss
index 550402142e..9ee47093cb 100644
--- a/src/labels/labels.scss
+++ b/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;
+}
diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss
index 2aff4ab1f8..6be4d8485a 100644
--- a/src/navigation/menu.scss
+++ b/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;
diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss
index 7c76ef5fe8..a3d5e09c75 100644
--- a/src/navigation/underline-nav.scss
+++ b/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;
+ }
}
}
diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
index 8d69207040..8393c8e8f3 100644
--- a/src/pagination/pagination.scss
+++ b/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,
diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
index afdebeb6dd..4c1b847bf9 100644
--- a/src/support/variables/misc.scss
+++ b/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;
diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index bf497fa6d6..d102266613 100644
--- a/src/utilities/borders.scss
+++ b/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 {