fix(Tooltip): styles (#702)

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;

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);
 }

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);
 }

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'
     }
   }