diff --git a/.changeset/stupid-candles-hang.md b/.changeset/stupid-candles-hang.md new file mode 100644 index 0000000000..09f360a7bd --- /dev/null +++ b/.changeset/stupid-candles-hang.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(tourtip): improve contrast of tip container diff --git a/dist/tourtip/tourtip.css b/dist/tourtip/tourtip.css index 5ddf7c9c02..18a3024e2f 100644 --- a/dist/tourtip/tourtip.css +++ b/dist/tourtip/tourtip.css @@ -31,9 +31,9 @@ span.tourtip { .tourtip__mask { background-color: var( --tourtip-background-color, - var(--color-background-elevated) + var(--color-background-inverse) ); - color: var(--tourtip-foreground-color, var(--color-foreground-primary)); + color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse)); position: relative; } @@ -48,7 +48,7 @@ span.tourtip__mask { word-break: break-word; } .tourtip__cell a { - color: var(--tourtip-foreground-color, var(--color-foreground-primary)); + color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse)); } .tourtip__cell a:focus { outline: 1px dashed currentColor; @@ -78,11 +78,14 @@ button.tourtip__close { white-space: nowrap; width: 32px; } +button.tourtip__close svg.icon { + fill: var(--tourtip-foreground-color, var(--color-foreground-on-inverse)); +} .tourtip__pointer { background-color: var( --tourtip-background-color, - var(--color-background-elevated) + var(--color-background-inverse) ); height: 8px; position: absolute; @@ -180,22 +183,29 @@ span.tourtip__heading { width: 100%; } +.tourtip__footer > button.btn--primary { + background-color: var( + --tourtip-background-color, + var(--color-foreground-on-inverse) + ); + color: var(--tourtip-foreground-color, var(--color-background-inverse)); +} + .tourtip__footer > a:not(:last-child), .tourtip__footer > button:not(:last-child) { - margin-right: 8px; + margin-right: var(--spacing-200); } .tourtip__footer > .fake-link, .tourtip__footer > a { - color: var(--color-foreground-primary); + color: var(--color-foreground-on-inverse); text-decoration: none; } .tourtip__footer > .fake-link:hover:not(:disabled), .tourtip__footer > a:hover:not(:disabled) { - color: var(--color-foreground-primary); + color: var(--color-foreground-on-inverse); text-decoration: underline; } .tourtip__index { - color: var(--tourtip-index-color, var(--color-foreground-secondary)); flex: 1; } diff --git a/src/sass/tourtip/tourtip.scss b/src/sass/tourtip/tourtip.scss index 2a50fd458c..40e9df8d87 100644 --- a/src/sass/tourtip/tourtip.scss +++ b/src/sass/tourtip/tourtip.scss @@ -18,9 +18,9 @@ span.tourtip { @include bubble-mask(border-radius-100); @include background-color-token( tourtip-background-color, - color-background-elevated + color-background-inverse ); - @include color-token(tourtip-foreground-color, color-foreground-primary); + @include color-token(tourtip-foreground-color, color-foreground-on-inverse); } span.tourtip__mask { @@ -35,7 +35,7 @@ span.tourtip__mask { a { @include color-token( tourtip-foreground-color, - color-foreground-primary + color-foreground-on-inverse ); &:focus { @@ -54,13 +54,20 @@ button.tourtip__close { @include bubble-close(); outline-offset: -2px; + + svg.icon { + @include fill-token( + tourtip-foreground-color, + color-foreground-on-inverse + ); + } } .tourtip__pointer { @include pointer-base(); @include background-color-token( tourtip-background-color, - color-background-elevated + color-background-inverse ); } @@ -134,28 +141,33 @@ span.tourtip__heading { width: 100%; } +.tourtip__footer > button.btn--primary { + @include background-color-token( + tourtip-background-color, + color-foreground-on-inverse + ); + @include color-token(tourtip-foreground-color, color-background-inverse); +} + .tourtip__footer > button:not(:last-child), .tourtip__footer > a:not(:last-child) { - margin-right: 8px; + margin-right: var(--spacing-200); } /* stylelint-disable no-descending-specificity */ /* TODO need to remove this once we update fake-links/links to allow no underline and black text */ .tourtip__footer > .fake-link, .tourtip__footer > a { - color: var(--color-foreground-primary); + color: var(--color-foreground-on-inverse); text-decoration: none; &:hover:not(:disabled) { - color: var(--color-foreground-primary); + color: var(--color-foreground-on-inverse); text-decoration: underline; } } /* stylelint-enable no-descending-specificity */ - .tourtip__index { - @include color-token(tourtip-index-color, color-foreground-secondary); - flex: 1; }