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 {