Fix form tooltip transparency (#1507)

* Fix form tooltip transparency * Create lovely-rockets-heal.md
primer · Jul 20, 2021 · 30523d6 · 30523d6
1 parent 13cda22
commit 30523d6
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/lovely-rockets-heal.md 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
@@ -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