feat(tourtip): improve contrast of tip container (#2440)

eBay · Sep 13, 2024 · 9ca9bd3 · 9ca9bd3
1 parent d330c82
commit 9ca9bd3
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 deletions.
diff --git a/.changeset/stupid-candles-hang.md 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
@@ -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
@@ -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;
 }