From 781d3bd86e83c4f8109eb0d1bd50c3dd615760d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Thu, 24 Nov 2022 14:33:25 +0000
Subject: [PATCH] fix(Tooltip): styles (#702)

---
 src/component-library/Tooltip/Tooltip.style.tsx | 7 ++++---
 src/component-library/theme/theme.interlay.css  | 3 +++
 src/component-library/theme/theme.kintsugi.css  | 3 +++
 src/component-library/theme/theme.ts            | 2 ++
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/component-library/Tooltip/Tooltip.style.tsx b/src/component-library/Tooltip/Tooltip.style.tsx
index f5e1f49285..1a74cf4c37 100644
--- a/src/component-library/Tooltip/Tooltip.style.tsx
+++ b/src/component-library/Tooltip/Tooltip.style.tsx
@@ -20,14 +20,15 @@ const StyledTooltip = styled.div<StyledTooltipProps>`
   align-items: center;
   box-sizing: border-box;
   vertical-align: top;
-  background-color: ${theme.colors.textPrimary};
-  padding: ${theme.spacing.spacing2};
+  background-color: ${theme.tooltip.bg};
+  padding: ${theme.spacing.spacing3};
   border-radius: ${theme.rounded.rg};
   // TODO: add box-shadow to theme
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.21);
   font-weight: ${theme.fontWeight.book};
   font-size: ${theme.text.s};
   line-height: ${theme.lineHeight.s};
+  color: ${theme.colors.textPrimary};
   word-break: break-word;
   -webkit-font-smoothing: antialiased;
   cursor: default;
@@ -64,7 +65,7 @@ const StyledTooltipTip = styled.span<StyledTooltipTipProps>`
   width: 0;
   border-style: solid;
   border-width: ${theme.tooltip.tip.width};
-  border-top-color: ${theme.colors.textPrimary};
+  border-top-color: ${theme.tooltip.tip.bg};
   border-left-color: transparent;
   border-right-color: transparent;
   border-bottom-color: transparent;
diff --git a/src/component-library/theme/theme.interlay.css b/src/component-library/theme/theme.interlay.css
index 21eced7dcc..e63c2d34fa 100644
--- a/src/component-library/theme/theme.interlay.css
+++ b/src/component-library/theme/theme.interlay.css
@@ -70,4 +70,7 @@
   --colors-table-row-hover-bg: #f0f1f2;
   --color-table-header-row-bg: #f4f3f5;
   --colors-table-border: #f4f3f5;
+  /* Table */
+  --colors-tooltip-bg: var(--colors-neutral-white);
+  --colors-tooltip-tip-bg: var(--colors-neutral-white);
 }
diff --git a/src/component-library/theme/theme.kintsugi.css b/src/component-library/theme/theme.kintsugi.css
index a1b3cacd32..9aee61a82e 100644
--- a/src/component-library/theme/theme.kintsugi.css
+++ b/src/component-library/theme/theme.kintsugi.css
@@ -74,4 +74,7 @@
   --colors-table-row-hover-bg: #1c2c46;
   --color-table-header-row-bg: #080e28;
   --colors-table-border: #080e28;
+  /* Table */
+  --colors-tooltip-bg: var(--colors-blue);
+  --colors-tooltip-tip-bg: var(--colors-blue);
 }
diff --git a/src/component-library/theme/theme.ts b/src/component-library/theme/theme.ts
index 9d719b64e3..9bb1609bd2 100644
--- a/src/component-library/theme/theme.ts
+++ b/src/component-library/theme/theme.ts
@@ -346,8 +346,10 @@ const theme = {
     }
   },
   tooltip: {
+    bg: 'var(--colors-tooltip-bg)',
     offset: '3px',
     tip: {
+      bg: 'var(--colors-tooltip-tip-bg)',
       width: '5px'
     }
   }