feat(tooltip): updated colors (#2560)

eBay · Feb 6, 2025 · 36bec4d · 36bec4d
1 parent 6f51583
commit 36bec4d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/giant-snails-jump.md b/.changeset/giant-snails-jump.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(tooltip): updated colors
diff --git a/dist/tooltip/tooltip.css b/dist/tooltip/tooltip.css
@@ -31,9 +31,9 @@ span.tooltip {
 .tooltip__mask {
     background-color: var(
         --tooltip-background-color,
-        var(--color-background-elevated)
+        var(--color-background-inverse)
     );
-    color: var(--tooltip-foreground-color, var(--color-foreground-primary));
+    color: var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
     position: relative;
 }
 
@@ -48,7 +48,7 @@ span.tooltip__mask {
     word-break: normal;
 }
 .tooltip__cell a {
-    color: var(--tooltip-foreground-color, var(--color-foreground-primary));
+    color: var(--tooltip-foreground-color, var(--color-foreground-on-inverse));
 }
 .tooltip__cell a:focus {
     outline: 1px dashed currentColor;
@@ -80,7 +80,7 @@ button.tooltip__close {
 .tooltip__pointer {
     background-color: var(
         --tooltip-background-color,
-        var(--color-background-elevated)
+        var(--color-background-inverse)
     );
     height: 8px;
     position: absolute;

diff --git a/src/sass/tooltip/tooltip.scss b/src/sass/tooltip/tooltip.scss
@@ -18,9 +18,9 @@ span.tooltip {
     @include bubble-mask();
     @include background-color-token(
         tooltip-background-color,
-        color-background-elevated
+        color-background-inverse
     );
-    @include color-token(tooltip-foreground-color, color-foreground-primary);
+    @include color-token(tooltip-foreground-color, color-foreground-on-inverse);
 }
 
 span.tooltip__mask {
@@ -33,7 +33,7 @@ span.tooltip__mask {
     a {
         @include color-token(
             tooltip-foreground-color,
-            color-foreground-primary
+            color-foreground-on-inverse
         );
 
         &:focus {
@@ -54,7 +54,7 @@ button.tooltip__close {
     @include pointer-base();
     @include background-color-token(
         tooltip-background-color,
-        color-background-elevated
+        color-background-inverse
     );
 }