diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md
index 6bc97edbe9..13a89076f7 100644
--- a/docs/content/components/labels.md
+++ b/docs/content/components/labels.md
@@ -190,22 +190,6 @@ You can also have icons and emoji in counters. Or use utilities for counters wit
22
```
-## Small counters
-
-Use the `Counter--small` modifier class to reduce the size of a counter.
-
-```html live
-1
-23
-456
-1.5K
-
-1
-23
-456
-1.5K
-```
-
## Diffstat
Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red.
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 8a1806807b..6aba527d3d 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -4,11 +4,12 @@
.btn {
position: relative;
display: inline-block;
- padding: 0 $spacer-3;
+ // stylelint-disable-next-line primer/spacing
+ padding: 5px $spacer-3;
font-size: $body-font-size;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
- line-height: height-without-border($size-5);
+ line-height: 20px; // Specifically not inherit our `` default
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
@@ -56,13 +57,14 @@
margin-left: 2px;
color: inherit;
text-shadow: none;
+ vertical-align: top;
// stylelint-disable-next-line primer/colors
background-color: rgba($black, 0.08); // Darken for just a tad more contrast against the button background
}
.dropdown-caret {
margin-left: $spacer-1;
- opacity: 0.6;
+ opacity: 0.8;
}
}
@@ -114,27 +116,24 @@
// Primary button
.btn-primary {
- $bg-default: #159739; // custom green
- $bg-hover: #138934; // custom green
+ $bg-default: #2ea44f; // custom green
+ $bg-hover: #2c974b; // custom green
$bg-active: darken($bg-hover, 2%);
$bg-disabled: #94d3a2; // custom green
- $border-default: $green-600;
- $border-hover: $green-700;
-
$shadow: $green-900;
- $box-shadow: $box-shadow, inset 0 1px 0 rgba($white, 0.03);
+ $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
color: $text-white;
background-color: $bg-default;
- border-color: $border-default;
+ // stylelint-disable-next-line primer/borders
+ border-color: rgba($black, 0.15);
box-shadow: $box-shadow;
&:hover,
&.hover,
[open] > & {
background-color: $bg-hover;
- border-color: $border-hover;
}
&:active,
@@ -152,7 +151,7 @@
color: rgba($text-white, 0.8);
background-color: $bg-disabled;
// stylelint-disable-next-line primer/borders
- border-color: rgba($border-default, 0.1);
+ border-color: rgba($black, 0.1);
box-shadow: $box-shadow;
}
@@ -169,13 +168,14 @@
}
.octicon {
- color: inherit;
+ // stylelint-disable-next-line primer/colors
+ color: rgba($text-white, 0.8);
}
}
// Mixin: btn-inverse-on-hover
-@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $border-hover, $border-active, $shadow ) {
+@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $shadow ) {
color: $color;
transition: none;
@@ -183,8 +183,8 @@
[open] > & {
color: $text-white;
background-color: $bg-hover;
- border-color: $border-hover;
- box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03);
+ border-color: rgba($black, 0.15);
+ box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);
.Counter {
background-color: rgba($bg-white, 0.2);
@@ -200,7 +200,7 @@
&[aria-selected=true] {
color: $text-white;
background-color: $bg-active;
- border-color: $border-active;
+ border-color: rgba($black, 0.15);
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
}
@@ -234,8 +234,6 @@
$color: $text-red,
$bg-hover: $red-600,
$bg-active: darken($red-600, 3%),
- $border-hover: $red-700,
- $border-active: $red-800,
$shadow: $red-900
);
}
@@ -247,8 +245,6 @@
$color: $blue-500,
$bg-hover: $blue-500,
$bg-active: darken($blue-500, 3%),
- $border-hover: $blue-600,
- $border-active: rgba($blue-700, 0.5),
$shadow: $blue-900
);
}
@@ -269,12 +265,14 @@
// Tweak `line-height` to make them smaller.
.btn-sm {
// stylelint-disable-next-line primer/spacing
- padding-right: 12px;
- // stylelint-disable-next-line primer/spacing
- padding-left: 12px;
+ padding: 3px 12px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
- line-height: height-without-border($size-4);
+ line-height: 20px;
+
+ .octicon {
+ vertical-align: text-top;
+ }
}
// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 26814ccad4..70a9dcf66f 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: 0 12px;
+ padding: 3px 12px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
- line-height: height-without-border($size-4);
+ line-height: 20px;
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 6fc13d8eef..84b2204a41 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -18,10 +18,10 @@ label {
.form-control,
.form-select {
// stylelint-disable-next-line primer/spacing
- padding: 0 12px;
+ padding: 5px 12px;
font-size: $body-font-size;
// stylelint-disable-next-line primer/typography
- line-height: height-without-border($size-5);
+ line-height: 20px;
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
@@ -72,6 +72,7 @@ textarea.form-control {
// stylelint-disable-next-line primer/colors
background-color: $white-fade-15;
border-color: transparent;
+ box-shadow: none;
&::placeholder {
color: inherit;
@@ -94,15 +95,17 @@ textarea.form-control {
// Mini inputs, to match .minibutton
.input-sm {
+ // stylelint-disable-next-line primer/spacing
+ padding-top: 3px;
+ // stylelint-disable-next-line primer/spacing
+ padding-bottom: 3px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
- line-height: height-without-border($size-4);
+ line-height: 20px;
}
// Large inputs
.input-lg {
- padding-right: $spacer-3;
- padding-left: $spacer-3;
font-size: $h4-size;
}
diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss
index db0e7e3a4c..32985c24a8 100644
--- a/src/forms/form-select.scss
+++ b/src/forms/form-select.scss
@@ -25,10 +25,11 @@
.select-sm {
height: $size-4;
- min-height: $size-4;
+ // stylelint-disable-next-line primer/spacing
+ padding-top: 3px;
+ // stylelint-disable-next-line primer/spacing
+ padding-bottom: 3px;
font-size: $font-size-small;
- // stylelint-disable-next-line primer/typography
- line-height: height-without-border($size-4);
&[multiple] {
height: auto;
diff --git a/src/labels/counters.scss b/src/labels/counters.scss
index 22ea1e3164..4872cc2294 100644
--- a/src/labels/counters.scss
+++ b/src/labels/counters.scss
@@ -20,7 +20,8 @@
}
.octicon {
- opacity: 0.5;
+ vertical-align: text-top;
+ opacity: 0.8;
}
}
diff --git a/src/labels/states.scss b/src/labels/states.scss
index 3b2a9ed45e..63ba20eaf1 100644
--- a/src/labels/states.scss
+++ b/src/labels/states.scss
@@ -13,11 +13,11 @@
.State {
display: inline-block;
// stylelint-disable-next-line primer/spacing
- padding: 0 12px;
+ padding: 6px 12px;
font-size: $body-font-size;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
- line-height: $size-5;
+ line-height: 20px;
color: $text-white;
text-align: center;
white-space: nowrap;
@@ -43,8 +43,8 @@
// Small
.State--small {
- padding-right: $spacer-2;
- padding-left: $spacer-2;
+ // stylelint-disable-next-line primer/spacing
+ padding: 0 10px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: $size-3;
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index eb53e5478f..9c647ff996 100644
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@@ -20,10 +20,11 @@
.subnav-item {
position: relative;
float: left;
- padding: 0 $spacer-3;
+ // stylelint-disable-next-line primer/spacing
+ padding: 5px $spacer-3;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
- line-height: height-without-border($size-5);
+ line-height: 20px;
color: $text-gray-dark;
border: $border;
diff --git a/src/support/mixins/typography.scss b/src/support/mixins/typography.scss
index 8687aed570..23ec0e3ecf 100644
--- a/src/support/mixins/typography.scss
+++ b/src/support/mixins/typography.scss
@@ -1,10 +1,3 @@
-// height-without-border
-//
-// Removes top/bottom border from the total height
-@function height-without-border($height) {
- @return $height - ($border-width * 2);
-}
-
// Text hiding for image based text replacement.
// Higher performance than -9999px because it only renders
// the size of the actual text, not a full 9999px box.
diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
index 4c1b847bf9..b7b43090d8 100644
--- a/src/support/variables/misc.scss
+++ b/src/support/variables/misc.scss
@@ -12,7 +12,7 @@ $border-radius-2: 6px !default;
$border-radius: $border-radius-2 !default;
// Box shadow
-$box-shadow: 0 1px 0 rgba($gray-400, 0.1) !default;
+$box-shadow: 0 1px 0 rgba($black, 0.04) !default;
$box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
$box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
@@ -22,7 +22,7 @@ $box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner
$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring
// Button variables
-$border-color-button: $border-color !default;
+$border-color-button: rgba($black, 0.12) !default;
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?
// Form variables