Add Diffstat component

docs/content/components/labels.md

@@ -155,3 +155,26 @@ Counters can also be used in `Box` headers to indicate the number of items in a
   </ul>
 </div>
 ```
+
+## 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.
+
+```html live
+<span class="diffstat tooltipped tooltipped-e" aria-label="6 changes: 3 additions &amp; 3 deletions">
+  6
+  <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
+</span>
+```
+
+Use the `text-green` and `text-red` utilities to add addtitional information about the size of the diff.
+
+```html live
+<span class="diffstat">
+    <span class="text-green">+7</span>
+    <span class="text-red">−2</span>
+    <span class="tooltipped tooltipped-e" aria-label="9 lines changed">
+      <span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-added"></span><span class="diffstat-block-deleted"></span><span class="diffstat-block-neutral"></span>
+    </span>
+</span>
+```

src/labels/diffstat.scss

@@ -0,0 +1,32 @@
+// 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;
+  margin-left: 1px;
+}
+
+.diffstat-block-deleted {
+  background-color: $red-600;
+}
+
+.diffstat-block-added {
+  background-color: darken($green-400, 5%);
+}
+
+.diffstat-block-neutral {
+  background-color: $gray-300;
+}

src/labels/index.scss

@@ -2,3 +2,4 @@
 @import "./labels.scss";
 @import "./states.scss";
 @import "./counters.scss";
+@import "./diffstat.scss";