7 files changed, 247 insertions, 0 deletions
diff --git a/assets/sass/@primer/css/labels/README.md b/assets/sass/@primer/css/labels/README.md
new file mode 100644
index 0000000..c9fe446
--- /dev/null
+++ b/assets/sass/@primer/css/labels/README.md
@@ -0,0 +1,25 @@
+---
+bundle: "labels"
+generated: true
+---
+
+# Primer CSS: `labels` bundle
+
+## Usage
+
+Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
+
+```scss
+@import "@primer/css/labels/index.scss";
+```
+
+## Build
+
+The `@primer/css` npm package includes a standalone CSS build of this module in `dist/labels.css`.
+
+## License
+
+[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
+
+
+[scss]: https://sass-lang.com/documentation/syntax#scss
diff --git a/assets/sass/@primer/css/labels/counters.scss b/assets/sass/@primer/css/labels/counters.scss
new file mode 100644
index 0000000..cb543b2
--- /dev/null
+++ b/assets/sass/@primer/css/labels/counters.scss
@@ -0,0 +1,30 @@
+// Counters are rounded-corner badges for numbers
+.Counter {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 2px 5px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  line-height: $lh-condensed-ultra;
+  color: $text-gray;
+  // stylelint-disable-next-line primer/colors
+  background-color: rgba($black, 0.08);
+  // stylelint-disable-next-line primer/borders
+  border-radius: 20px;
+
+  &:empty {
+    visibility: hidden;
+  }
+}
+
+.Counter--gray-light {
+  color: $text-gray-dark;
+  // stylelint-disable-next-line primer/colors
+  background-color: $black-fade-15;
+}
+
+.Counter--gray {
+  color: $text-white;
+  // stylelint-disable-next-line primer/colors
+  background-color: $gray;
+}
diff --git a/assets/sass/@primer/css/labels/diffstat.scss b/assets/sass/@primer/css/labels/diffstat.scss
new file mode 100644
index 0000000..69feb40
--- /dev/null
+++ b/assets/sass/@primer/css/labels/diffstat.scss
@@ -0,0 +1,33 @@
+// diffstat
+//
+// Green/red blocks showing additions and deletions
+
+.diffstat {
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+  color: $text-gray;
+  white-space: nowrap;
+  cursor: default;
+}
+
+.diffstat-block-deleted,
+.diffstat-block-added,
+.diffstat-block-neutral {
+  display: inline-block;
+  width: $spacer-2;
+  height: $spacer-2;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 1px;
+}
+
+.diffstat-block-deleted {
+  background-color: $bg-diffstat-deleted;
+}
+
+.diffstat-block-added {
+  background-color: $bg-diffstat-added;
+}
+
+.diffstat-block-neutral {
+  background-color: $bg-diffstat-neutral;
+}
diff --git a/assets/sass/@primer/css/labels/index.scss b/assets/sass/@primer/css/labels/index.scss
new file mode 100644
index 0000000..c8632f8
--- /dev/null
+++ b/assets/sass/@primer/css/labels/index.scss
@@ -0,0 +1,6 @@
+@import "../support/index.scss";
+@import "./issue-labels.scss";
+@import "./labels.scss";
+@import "./states.scss";
+@import "./counters.scss";
+@import "./diffstat.scss";
diff --git a/assets/sass/@primer/css/labels/issue-labels.scss b/assets/sass/@primer/css/labels/issue-labels.scss
new file mode 100644
index 0000000..9ac1117
--- /dev/null
+++ b/assets/sass/@primer/css/labels/issue-labels.scss
@@ -0,0 +1,45 @@
+// Issue Labels
+
+.IssueLabel {
+  height: 20px;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0.15em $spacer-1;
+  font-size: $h6-size;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 15px;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 2px;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 rgba($black, 0.12);
+
+  .g-emoji {
+    position: relative;
+    top: -0.05em;
+    display: inline-block;
+    font-size: 1em;
+    line-height: $lh-condensed-ultra;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.IssueLabel--big {
+  padding: $spacer-1 $spacer-2;
+  font-size: $h5-size;
+  font-weight: $font-weight-bold;
+  border-radius: $border-radius;
+  transition: opacity 0.2s linear;
+
+  .g-emoji {
+    display: inline-block;
+    // stylelint-disable-next-line primer/spacing
+    margin-top: -1px;
+  }
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
diff --git a/assets/sass/@primer/css/labels/labels.scss b/assets/sass/@primer/css/labels/labels.scss
new file mode 100644
index 0000000..06c799f
--- /dev/null
+++ b/assets/sass/@primer/css/labels/labels.scss
@@ -0,0 +1,68 @@
+// 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
+// .label will be deprecated for .Label
+.label,
+.Label {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px $spacer-1;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  line-height: $lh-condensed-ultra; // prevent inheritance from changing proportions
+  color: $text-white;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 2px;
+  // stylelint-disable-next-line primer/box-shadow
+  box-shadow: inset 0 -1px 0 rgba($black, 0.12);
+
+  &: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.
+.Label--gray {
+  color: $text-gray;
+  // stylelint-disable-next-line primer/colors
+  background-color: lighten($gray-200, 3%);
+}
+
+.Label--outline {
+  // stylelint-disable-next-line primer/spacing
+  margin-top: -1px; // offsets the 1px border
+  // stylelint-disable-next-line primer/spacing
+  margin-bottom: -1px; // offsets the 1px border
+  font-weight: $font-weight-normal;
+  color: $text-gray;
+  background-color: transparent;
+  border: $border-width $border-style $border-black-fade;
+  box-shadow: none;
+}
+
+.Label--outline-green {
+  color: $text-green;
+  border: $border-width $border-style $border-green;
+}
+
+.Label--gray-darker {
+  // stylelint-disable-next-line primer/colors
+  background-color: $gray;
+}
+
+.Label--orange {
+  background-color: $bg-orange;
+}
diff --git a/assets/sass/@primer/css/labels/states.scss b/assets/sass/@primer/css/labels/states.scss
new file mode 100644
index 0000000..6be0605
--- /dev/null
+++ b/assets/sass/@primer/css/labels/states.scss
@@ -0,0 +1,40 @@
+// A rounded corner box containing a label "open" or "closed"
+// The default state is gray.
+//
+// open     - $green background
+// reopened - $green background
+// closed   - $red background
+// merged   - $purple background
+
+// .state to be deprecated in replace of .State
+.state,
+.State {
+  display: inline-block;
+  padding: $spacer-1 $spacer-2;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: $text-white;
+  text-align: center;
+  white-space: nowrap;
+  // stylelint-disable-next-line primer/colors
+  background-color: $gray-500;
+  border-radius: $border-radius;
+}
+
+// stylelint-disable-next-line primer/colors
+.State--green { background-color: darken($green-400, 5%); }
+
+.State--purple { background-color: $bg-purple; }
+
+// stylelint-disable-next-line primer/colors
+.State--red { background-color: $red-600; }
+
+.State--small {
+  padding: $em-spacer-2 $spacer-1;
+  font-size: $h6-size;
+
+  .octicon {
+    width: 1em; // Ensures different icons don't change State indicator width
+  }
+}