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