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

Co-authored-by: Simeon Simeonoff <[email protected]>

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -268,14 +268,14 @@
     $box-shadow-focus: map.get((
         'material': null,
         'fluent': null,
-        'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'),
+        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-outline-color'),
         'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-outline-color')
     ), $variant);
 
     $box-shadow-focus-selected: map.get((
         'material': null,
         'fluent': null,
-        'bootstrap': 0 0 0 rem(2px) var-get($theme, 'focus-selected-outline-color'),
+        'bootstrap': 0 0 0 rem(4px) var-get($theme, 'focus-selected-outline-color'),
         'indigo': 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color')
     ), $variant);
 
@@ -429,9 +429,17 @@
     %igx-chip%igx-chip--primary {
         &:focus {
             %igx-chip__item {
-                color: contrast-color($color: 'primary', $variant: 800);
-                background: color($color: 'primary', $variant: 800);
-                border-color: color($color: 'primary', $variant: 800);
+                @if $variant != 'bootstrap' and $variant != 'indigo' {
+                    color: contrast-color($color: 'primary', $variant: 800);
+                    background: color($color: 'primary', $variant: 800);
+                    border-color: color($color: 'primary', $variant: 800);
+                }
+
+                @if $variant == "bootstrap" {
+                    color: contrast-color($color: 'primary', $variant: 500);
+                    background: color($color: 'primary', $variant: 500);
+                    border-color: color($color: 'primary', $variant: 500);
+                }
 
                 @if $variant == 'indigo' {
                     color: contrast-color($color: 'primary', $variant: 900);
@@ -441,7 +449,7 @@
                 }
 
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'primary', $variant: 200);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'primary', $variant: 500, $opacity: .38);
                 }
             }
         }
@@ -474,15 +482,18 @@
                 background: color($color: 'info', $variant: 800);
                 border-color: color($color: 'info', $variant: 800);
 
-                @if $variant == 'indigo' {
+                @if $variant == 'indigo' or $variant == 'bootstrap' {
                     color: contrast-color($color: 'info', $variant: 500);
                     background: color($color: 'info', $variant: 500);
                     border-color: color($color: 'info', $variant: 500);
+                }
+
+                @if $variant == 'indigo' {
                     box-shadow: 0 0 0 rem(3px) color($color: 'info', $variant: if($theme-variant == 'light', 100, 800));
                 }
 
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'info', $variant: 200);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'info', $variant: 500, $opacity: .38);
                 }
             }
         }
@@ -519,15 +530,19 @@
                 background: color($color: 'success', $variant: 800);
                 border-color: color($color: 'success', $variant: 800);
 
-                @if $variant == 'indigo' {
-                    color: contrast-color($color: 'success', $variant: 900);
+                @if $variant == 'indigo' or $variant == 'bootstrap' {
                     background: color($color: 'success', $variant: 500);
                     border-color: color($color: 'success', $variant: 500);
                     box-shadow: 0 0 0 rem(3px) color($color: 'success', $variant: if($theme-variant == 'light', 200, 800));
                 }
 
+                @if $variant == 'indigo' {
+                    color: contrast-color($color: 'success', $variant: 900);
+                }
+
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'success', $variant: 200);
+                    color: contrast-color($color: 'success', $variant: 600);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'success', $variant: 500, $opacity: .38);
                 }
             }
         }
@@ -560,15 +575,18 @@
                 background: color($color: 'warn', $variant: 800);
                 border-color: color($color: 'warn', $variant: 800);
 
-                @if $variant == 'indigo' {
+                @if $variant == 'indigo' or $variant == 'bootstrap' {
                     color: contrast-color($color: 'warn', $variant: 900);
                     background: color($color: 'warn', $variant: 500);
                     border-color: color($color: 'warn', $variant: 500);
+                }
+
+                @if $variant == 'indigo' {
                     box-shadow: 0 0 0 rem(3px) color($color: 'warn', $variant: if($theme-variant == 'light', 100, 900));
                 }
 
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'warn', $variant: 200);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'warn', $variant: 500, $opacity: .38);
                 }
             }
         }
@@ -605,15 +623,19 @@
                 background: color($color: 'error', $variant: 800);
                 border-color: color($color: 'error', $variant: 800);
 
-                @if $variant == 'indigo' {
-                    color: contrast-color($color: 'error', $variant: 900);
+                @if $variant == 'indigo' or $variant == 'bootstrap' {
                     background: color($color: 'error', $variant: 500);
                     border-color: color($color: 'error', $variant: 500);
+                }
+
+                @if $variant == 'indigo' {
+                    color: contrast-color($color: 'error', $variant: 900);
                     box-shadow: 0 0 0 rem(3px) color($color: 'error', $variant: if($theme-variant == 'light', 100, 900));
                 }
 
                 @if $variant == 'bootstrap' {
-                    box-shadow: 0 0 0 rem(2px) color($color: 'error', $variant: 200);
+                    color: contrast-color($color: 'error', $variant: 600);
+                    box-shadow: 0 0 0 rem(4px) color($color: 'error', $variant: 500, $opacity: .38);
                 }
             }
         }