fix(chip): fix chip styles for all themes (#1926)

Co-authored-by: Silvia Ivanova <[email protected]>

Author: didimmova

src/components/chip/themes/chip.base.scss

@@ -10,12 +10,10 @@
     @include type-style('body-2');
     @include ellipsis();
 
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: center;
-    align-items: center;
+    display: inline-flex;
+    place-items: center;
     font-family: var(--ig-font-family);
-    border-style: none;
+    border: rem(1px) solid;
     box-shadow: none;
     cursor: pointer;
     padding: 0 pad-inline(rem(2px), rem(6px), rem(12px));

src/components/chip/themes/shared/chip.bootstrap.scss

@@ -15,7 +15,7 @@ $theme: $bootstrap;
 
 :host([selected]) button:not([disabled]) {
     &:focus {
-        box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-selected-outline-color');
+        outline: rem(4px) solid var-get($theme, 'focus-selected-outline-color');
     }
 }
 

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

@@ -12,22 +12,48 @@ $theme: $material;
     border-radius: var-get($theme, 'border-radius');
     background: var-get($theme, 'background');
     color: var-get($theme, 'text-color');
+    border-color: var-get($theme, 'border-color');
     outline: none;
     height: var-get($theme, 'size');
 
     &:focus {
         background: var-get($theme, 'focus-background');
         color: var-get($theme, 'focus-text-color');
+        border-color: var-get($theme, 'focus-border-color');
     }
 
     &:hover {
         background: var-get($theme, 'hover-background');
         color: var-get($theme, 'hover-text-color');
+        border-color: var-get($theme, 'hover-border-color');
     }
 
     &[disabled] {
         background: var-get($theme, 'disabled-background');
         color: var-get($theme, 'disabled-text-color');
+        border-color: var-get($theme, 'disabled-border-color');
+    }
+
+    ::slotted([slot="remove"]) {
+        color: var-get($theme, 'remove-icon-color');
+
+        &:focus-within {
+            color: var-get($theme, 'remove-icon-color-focus');
+        }
+    }
+
+    slot[name='remove'] {
+        igc-icon,
+        ::slotted(igc-icon) {
+            color: var-get($theme, 'remove-icon-color');
+        }
+
+        &:focus-within {
+            igc-icon,
+            ::slotted(igc-icon) {
+                color: var-get($theme, 'remove-icon-color-focus');
+            }
+        }
     }
 
     igc-icon,
@@ -37,6 +63,9 @@ $theme: $material;
 
     ::slotted(*) {
         --default-size: var(--chip-size);
+
+        display: inline-flex;
+        place-items: center;
     }
 
     ::slotted(igc-avatar) {
@@ -47,3 +76,21 @@ $theme: $material;
         --diameter: #{sizable(rem(14px), rem(18px), rem(24px))};
     }
 }
+
+:host([selected]) button:not([disabled]) {
+    background: var-get($theme, 'selected-background');
+    color: var-get($theme, 'selected-text-color');
+    border-color: var-get($theme, 'selected-border-color');
+
+    &:focus {
+        background: var-get($theme, 'focus-selected-background');
+        color: var-get($theme, 'focus-selected-text-color');
+        border-color: var-get($theme, 'focus-selected-border-color');
+    }
+
+    &:hover {
+        background: var-get($theme, 'hover-selected-background');
+        color: var-get($theme, 'hover-selected-text-color');
+        border-color: var-get($theme, 'hover-selected-border-color');
+    }
+}

src/components/chip/themes/shared/chip.fluent.scss

@@ -10,16 +10,3 @@ $theme: $fluent;
 :host button {
     @include type-style('subtitle-2');
 }
-
-:host([selected]) button:not([disabled]) {
-    background: var-get($theme, 'selected-background');
-    color: var-get($theme, 'selected-text-color');
-
-    &:focus {
-        background: var-get($theme, 'focus-selected-background');
-    }
-
-    &:hover {
-        background: var-get($theme, 'hover-selected-background');
-    }
-}

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

@@ -8,21 +8,12 @@ $theme: $indigo;
 }
 
 :host button {
-    border: rem(1px) solid var-get($theme, 'border-color');
     padding: 0 pad-inline(3px, 5px, 7px);
 
     &:focus {
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');
     }
 
-    &:hover {
-        border-color: var-get($theme, 'hover-border-color');
-    }
-
-    &[disabled] {
-        border-color: var-get($theme, 'disabled-border-color');
-    }
-
     igc-icon,
     ::slotted(igc-icon) {
         --size: #{sizable(rem(14px), rem(14px), rem(16px))};
@@ -37,12 +28,6 @@ $theme: $indigo;
     &:focus {
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color');
     }
-
-    &:hover {
-        color: var-get($theme, 'hover-selected-text-color');
-        background: var-get($theme, 'hover-selected-background');
-        border-color: var-get($theme, 'hover-selected-border-color');
-    }
 }
 
 :host([selected]) button[disabled] {