Tweak labels

src/labels/counters.scss

@@ -3,11 +3,11 @@
   display: inline-block;
   min-width: 20px; // makes sure it's a circle with just one digit
   // stylelint-disable-next-line primer/spacing
-  padding: 2px 6px;
+  padding: 0 6px;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
-  line-height: 16px;
+  line-height: 20px;
   color: $text-gray-dark;
   text-align: center;
   // stylelint-disable-next-line primer/colors

src/labels/index.scss

@@ -1,4 +1,6 @@
 @import "../support/index.scss";
+@import "./mixins.scss";
+
 @import "./issue-labels.scss";
 @import "./labels.scss";
 @import "./states.scss";

src/labels/issue-labels.scss

@@ -1,15 +1,9 @@
 // Issue Labels
 
+// TODO: Replace with .Label once solid backgrounds are supported
+
 .IssueLabel {
-  display: inline-block;
-  // stylelint-disable-next-line primer/spacing
-  padding: 2px $spacer-2;
-  font-size: $font-size-small;
-  font-weight: $font-weight-semibold;
-  // stylelint-disable-next-line primer/typography
-  line-height: 16px;
-  // stylelint-disable-next-line primer/borders
-  border-radius: 2em;
+  @include labels-base;
 
   .g-emoji {
     position: relative;
@@ -25,5 +19,5 @@
 }
 
 .IssueLabel--big {
-  padding: $spacer-1 12px;
+  @include labels-large;
 }

src/labels/labels.scss

@@ -1,42 +1,38 @@
-// Needs refactoring
 // Labels
-//
-// Use labels to add keyword tags or phrases to issues and pull requests. These
-// are used within a list of issues/PRs, on individual issues/PRs, and within
-// the select menus that manage them.
 
 // Provide a wrapper to ensure labels stick together
 .labels {
   position: relative;
 }
 
-// Each label gets common styles
+// Default label
 
 .label, // TODO: Deprecte
 .Label {
-  display: inline-block;
-  // stylelint-disable-next-line primer/spacing
-  padding: 3px 12px;
-  font-size: $font-size-small;
-  font-weight: $font-weight-semibold;
-  // stylelint-disable-next-line primer/typography
-  line-height: 16px;
+  @include labels-base;
+  border-color: $border-color;
   background-color: transparent !important; // TODO: Remove again
-  border: $border-width $border-style $border-color;
-  // stylelint-disable-next-line primer/borders
-  border-radius: 2em;
 
   &:hover {
     text-decoration: none;
   }
 }
 
-// Custom GitHub labels (not for issues/PRs/etc)
-//
-// Commonly used across the site to indicate a particular role. For example,
-// "repo owner" within code comments or role in organizations.
+// Large
 
-.Label--outline, // TODO: Deprecate
+.Label--large {
+  @include labels-large;
+}
+
+// Inline
+
+.Label--inline {
+  @include labels--inline;
+}
+
+// Contrast
+
+.Label--outline, // TODO: Deprecate? It's now the default
 .Label--gray {
   color: $text-gray;
   border-color: $border-gray;

src/labels/mixins.scss

@@ -0,0 +1,31 @@
+// Label mixins
+
+// Default: 20px
+// Large: 24px
+// Inline: em based
+
+@mixin labels-base {
+  display: inline-block;
+  padding: 0 7px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-semibold;
+  line-height: $lh-default;
+  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style transparent;
+  border-radius: 2em;
+}
+
+@mixin labels-large {
+  padding: 2px 10px;
+}
+
+// Inline
+//
+// Doesn't increase height of parent element
+// Can be used with different font-sizes
+
+@mixin labels--inline {
+  display: inline;
+  font-size: 0.9em;
+  padding: .1667em .5em;
+}

src/labels/states.scss

@@ -6,10 +6,14 @@
 // closed   - $red background
 // merged   - $purple background
 
+// Default 32px
+// Small 24px
+
 .state, // TODO: Deprecate
 .State {
   display: inline-block;
   padding: $spacer-2 12px;
+  font-size: $body-font-size;
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 16px;