labels and diffs

scss/atat.scss

@@ -13,6 +13,8 @@
 @import 'elements/tables';
 @import 'elements/sidenav';
 @import 'elements/action_group';
+@import 'elements/labels';
+@import 'elements/diff';
 
 @import 'components/layout';
 @import 'components/topbar';

scss/elements/_diff.scss

@@ -0,0 +1,36 @@
+[class*='diff--'] {
+  border-left-style: solid;
+  border-left-width: ($gap / 2);
+  padding-left: $gap / 2;
+  margin: ($gap / 2) 0;
+
+  &::before {
+    font-weight: bold;
+    padding-right: $gap;
+    display: inline-block;
+    width: 1.8rem;
+    text-align: center;
+  }
+}
+
+.diff--removed {
+  background-color: $color-red-lightest;
+  border-left-color: $color-red-dark;
+  text-decoration: line-through;
+  text-decoration-color: $color-overlay;
+
+  &::before {
+    content: '-';
+    color: $color-red-dark;
+  }
+}
+
+.diff--added {
+  background-color: $color-aqua-lightest;
+  border-left-color: $color-aqua-dark;
+
+  &::before {
+    content: '+';
+    color: $color-aqua-dark;
+  }
+}

scss/elements/_labels.scss

@@ -0,0 +1,34 @@
+/*
+ * Labels
+ * @see https://designsystem.digital.gov/components/labels/
+ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss
+ */
+
+.label {
+  @include h5;
+  display: inline-block;
+  height: 2.4rem;
+  line-height: 2.4rem;
+  color: $color-white;
+  background-color: $color-gray;
+  vertical-align: middle;
+  margin: 0 $gap;
+  padding: 0 $gap;
+  border-radius: $gap / 2;
+
+  &.label--info {
+    background-color: $color-primary;
+  }
+
+  &.label--warning {
+    background-color: $color-gold;
+  }
+
+  &.label--error {
+    background-color: $color-red;
+  }
+
+  &.label--success {
+    background-color: $color-green;
+  }
+}