From 30523d6436e7ea06fa511fa9ba8407429e667b42 Mon Sep 17 00:00:00 2001
From: simurai <simurai@github.com>
Date: Wed, 21 Jul 2021 00:34:58 +0900
Subject: [PATCH] Fix form tooltip transparency (#1507)

* Fix form tooltip transparency

* Create lovely-rockets-heal.md
---
 .changeset/lovely-rockets-heal.md | 5 +++++
 src/forms/form-group.scss         | 7 ++++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/lovely-rockets-heal.md

diff --git a/.changeset/lovely-rockets-heal.md b/.changeset/lovely-rockets-heal.md
new file mode 100644
index 0000000000..c5c2f68ed2
--- /dev/null
+++ b/.changeset/lovely-rockets-heal.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix form tooltip transparency
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index 823cffe8e4..a4e286f406 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -191,7 +191,7 @@
   &.successed {
     .success {
       color: var(--color-input-tooltip-success-text);
-      background-color: var(--color-input-tooltip-success-bg);
+      background-image: linear-gradient(var(--color-input-tooltip-success-bg), var(--color-input-tooltip-success-bg));
       border-color: var(--color-input-tooltip-success-border);
 
       &::after { border-bottom-color: var(--color-input-tooltip-success-bg); } // stylelint-disable-line primer/borders
@@ -206,7 +206,7 @@
 
     .warning {
       color: var(--color-input-tooltip-warning-text);
-      background-color: var(--color-input-tooltip-warning-bg);
+      background-image: linear-gradient(var(--color-input-tooltip-warning-bg), var(--color-input-tooltip-warning-bg));
       border-color: var(--color-input-tooltip-warning-border);
 
       &::after { border-bottom-color: var(--color-input-tooltip-warning-bg); } // stylelint-disable-line primer/borders
@@ -225,7 +225,7 @@
 
     .error {
       color: var(--color-input-tooltip-error-text);
-      background-color: var(--color-input-tooltip-error-bg);
+      background-image: linear-gradient(var(--color-input-tooltip-error-bg), var(--color-input-tooltip-error-bg));
       border-color: var(--color-input-tooltip-error-border);
 
       &::after { border-bottom-color: var(--color-input-tooltip-error-bg); } // stylelint-disable-line primer/borders
@@ -240,6 +240,7 @@
   margin: $spacer-1 0 2px;
   font-size: $font-size-small;
   color: var(--color-text-secondary);
+  background-color: var(--color-bg-canvas); // Makes sure the background is opaque to cover any content underneath
 
   .spinner {
     // stylelint-disable-next-line primer/spacing