fix(chip): update bootstrap chip styles (#1635)

Author: didimmova

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

@@ -9,61 +9,37 @@ $theme: $bootstrap;
 
 :host button {
     &:focus {
-        outline: rem(2px) solid var-get($theme, 'focus-outline-color');
+        outline: rem(4px) solid var-get($theme, 'focus-outline-color');
     }
 }
 
-:host([variant='primary']) button:not([disabled]),
-:host([variant='primary']) button:focus,
-:host([variant='primary']) button:hover,
-:host([selected][variant='primary']) button:not([disabled]) {
-    color: contrast-color(primary, 700);
-}
-
-:host([variant='primary']) button:focus {
-    outline: rem(2px) solid color(primary, 200);
-}
-
-:host([variant='info']) button:not([disabled]),
-:host([variant='info']) button:focus,
-:host([variant='info']) button:hover,
-:host([selected][variant='info']) button:not([disabled]) {
-    color: contrast-color(info, 700);
-}
-
-:host([variant='info']) button:focus {
-    outline: rem(2px) solid color(info, 200);
-}
-
-:host([variant='success']) button:not([disabled]),
-:host([variant='success']) button:focus,
-:host([variant='success']) button:hover,
-:host([selected][variant='success']) button:not([disabled]) {
-    color: contrast-color(success, 700);
-}
-
-:host([variant='success']) button:focus {
-    outline: rem(2px) solid color(success, 200);
+:host([selected]) button:not([disabled]) {
+    &:focus {
+        box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-selected-outline-color');
+    }
 }
 
-:host([variant='warning']) button:not([disabled]),
-:host([variant='warning']) button:focus,
-:host([variant='warning']) button:hover,
-:host([selected][variant='warning']) button:not([disabled]) {
-    color: contrast-color(warn, 700);
-}
+@mixin chip-variants($variant, $variant-color) {
+    :host([variant='#{$variant}']) button,
+    :host([selected][variant='#{$variant}']) button:not([disabled]) {
+        color: contrast-color($variant-color, 700);
+        border-color: transparent;
 
-:host([variant='warning']) button:focus {
-    outline: rem(2px) solid color(warn, 200);
-}
+        &:focus {
+            background: color($variant-color, 500);
+            color: contrast-color($variant-color, 700);
+            outline: rem(4px) solid color($variant-color, 500, 0.38);
+        }
 
-:host([variant='danger']) button:not([disabled]),
-:host([variant='danger']) button:focus,
-:host([variant='danger']) button:hover,
-:host([selected][variant='danger']) button:not([disabled]) {
-    color: contrast-color(error, 700);
+        &:hover {
+            background: color($variant-color, 600);
+            color: contrast-color($variant-color, 700);
+        }
+    }
 }
 
-:host([variant='danger']) button:focus {
-    outline: rem(2px) solid color(error, 200);
-}
+@include chip-variants('primary', primary);
+@include chip-variants('info', info);
+@include chip-variants('success', success);
+@include chip-variants('warning', warn);
+@include chip-variants('danger', error);