Merge pull request #486 from GSA/theme-support-for-tags

add examples of different tag variations
GSA · Oct 8, 2021 · afc12b8 · afc12b8
2 parents 78c7ab1 + c131f18
commit afc12b8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/03-components/04-tags/tags.njk b/src/components/03-components/04-tags/tags.njk
@@ -1,6 +1,12 @@
 <span class="{{ label.classes }}">New</span>
 
-<h3>Alternatives</h3>
+<h3 class="margin-bottom-1">Alternatives</h3>
 <span class="usa-tag sds-tag--info-purple">DUNS</span>
 
 <span class="usa-tag sds-tag--info-white">SAM</span>
+
+<h3 class="margin-bottom-1">Customize tag color</h3>
+<span class="usa-tag sds-tag--info-white sds-tag--outline--error bg-error-light">SAM</span>
+<span class="usa-tag sds-tag--info-white sds-tag--outline--green bg-secondary">SAM</span>
+<span class="usa-tag sds-tag--info-white sds-tag--outline--green bg-accent-warm">SAM</span>
+<span class="usa-tag sds-tag--info-white sds-tag--outline--warning-light bg-accent-cool-light">SAM</span>
diff --git a/src/stylesheets/elements/_tags.scss b/src/stylesheets/elements/_tags.scss
@@ -94,7 +94,7 @@
   width: 128px;
   @include u-bg("base-lightest");
 }
-.sds-tag.sds-tag--outline {
+.sds-tag--outline {
   &--blue {
     @include u-border("info-dark");
   }