Add .color-bg-transparent (#1985)

* Add .color-bg-transparent * Create ninety-phones-run.md Co-authored-by: Jon Rohan <rohan@github.com>
primer · Mar 9, 2022 · c2bd6bc · c2bd6bc
1 parent d379221
commit c2bd6bc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/ninety-phones-run.md b/.changeset/ninety-phones-run.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Adding .color-bg-transparent utility class
diff --git a/docs/content/utilities/colors.mdx b/docs/content/utilities/colors.mdx
@@ -75,6 +75,8 @@ Background colors are most commonly used for filling large blocks of content or
 
 <div class="color-bg-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
 <div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</div>
+
+<div class="color-bg-transparent p-2 rounded mb-2">.color-bg-transparent</div>
 ```
 
 ## Border

diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
@@ -53,6 +53,8 @@
 .color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
 .color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
 
+.color-bg-transparent { background-color: transparent !important; }
+
 // Border
 
 .color-border-default { border-color: var(--color-border-default) !important; }