Backport Tags styles from IdP

CHANGELOG.md

@@ -17,6 +17,10 @@
 - The deprecated `.usa-form-hint` CSS class has been removed. Use `.usa-hint` instead.
 - Removed `usa-alert__paragraph` alert helper class. Use [`measure-3` measure utility](https://designsystem.digital.gov/utilities/paragraph-styles/#max-width) instead.
 
+### New Features
+
+- Add Tag component styles.
+
 ## 6.7.0
 
 ### Improvements

docs/_components/tags.md

@@ -0,0 +1,39 @@
+---
+title: Tags
+---
+
+## Base
+
+A base tag is a blank canvas used as a starting point to customize for your project if the informative tag is not suitable.
+
+### Default
+
+{% capture example %}
+<span class="usa-tag">Base</span>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
+### Big
+
+{% capture example %}
+<span class="usa-tag usa-tag--big">Base</span>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
+## Informative
+
+An informative tag is for providing useful or important information like "Recommended" or "New Feature".
+
+### Default
+
+{% capture example %}
+<span class="usa-tag usa-tag--informative">Informative</span>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}
+
+### Big
+
+{% capture example %}
+<span class="usa-tag usa-tag--informative usa-tag--big">Informative</span>
+{% endcapture %}
+{% include helpers/code-example.html code=example %}

src/scss/packages/_usa-tag.scss

@@ -0,0 +1,19 @@
+@use 'uswds-core' as *;
+@forward './usa-tag/index';
+
+.usa-tag {
+  display: inline-block;
+  font-size: units(2);
+  font-weight: bold;
+  text-transform: none;
+  line-height: 1.5;
+  border-radius: units(0.5);
+}
+
+.usa-tag--big {
+  font-size: units(2.5);
+}
+
+.usa-tag--informative {
+  @include u-bg('accent-cool-darker');
+}