styles(tooltip): refactor styles

Author: didimmova

src/components/tooltip/themes/shared/tooltip.common.scss

@@ -9,6 +9,7 @@ $color-border: rem(4px) solid var-get($theme, 'background');
     background: var-get($theme, 'background');
     color: var-get($theme, 'text-color');
     border-radius: var-get($theme, 'border-radius');
+    box-shadow: var-get($theme, 'elevation');
 }
 
 #arrow {

src/components/tooltip/themes/shared/tooltip.indigo.scss

@@ -0,0 +1,5 @@
+@use 'styles/utilities' as *;
+
+[part="base"] {
+    font-size: rem(12px);
+}

src/components/tooltip/themes/themes.ts

@@ -1,8 +1,10 @@
 import { css } from 'lit';
 
 import type { Themes } from '../../../theming/types.js';
-import { styles as bootstrapDark } from './dark/tooltip.bootstrap.css.js';
+import { styles as indigo } from './shared/tooltip.indigo.css.js';
+
 // Dark Overrides
+import { styles as bootstrapDark } from './dark/tooltip.bootstrap.css.js';
 import { styles as fluentDark } from './dark/tooltip.fluent.css.js';
 import { styles as indigoDark } from './dark/tooltip.indigo.css.js';
 import { styles as materialDark } from './dark/tooltip.material.css.js';
@@ -27,7 +29,7 @@ const light = {
     ${fluentLight}
   `,
   indigo: css`
-    ${indigoLight}
+    ${indigo} ${indigoLight}
   `,
 };
 
@@ -45,7 +47,7 @@ const dark = {
     ${fluentDark}
   `,
   indigo: css`
-    ${indigoDark}
+    ${indigo} ${indigoDark}
   `,
 };
 

src/components/tooltip/themes/tooltip.base.scss

@@ -11,9 +11,10 @@
 [part="base"] {
     @include type-style('body-2');
 
-    padding: rem(3px) rem(8px);
+    padding: rem(4px) rem(8px);
     font-size: rem(10px);
     font-weight: 600;
+    line-height: rem(16px);
     text-align: start;
     max-width: 200px;
     display: flex;

stories/tooltip.stories.ts

@@ -556,7 +556,7 @@ export const SharedTooltipMultipleAnchors: Story = {
         >
       </div>
 
-      <igc-tooltip anchor="first" id="sharedTooltip" placement="top">
+      <igc-tooltip anchor="first" sticky id="sharedTooltip" placement="top">
         This is a shared tooltip!
       </igc-tooltip>
     `;