refactor(chip): update Indigo colors (#2044)

Author: adrianptrv

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

@@ -18,15 +18,22 @@ $theme: $indigo;
 :host([variant='success']) button,
 :host([selected][variant='success']) button:not([disabled]) {
     &:focus {
-        box-shadow: 0 0 0 rem(3px) color(success, 800);
+        box-shadow: 0 0 0 rem(3px) color(success, 900);
     }
 }
 
 :host([variant='warning']) button,
 :host([selected][variant='warning']) button:not([disabled]) {
+    color: color(gray, 50);
+
     &:focus {
+        color: color(gray, 50);
         box-shadow: 0 0 0 rem(3px) color(warn, 900);
     }
+
+    &:hover {
+        color: color(gray, 50);
+    }
 }
 
 :host([variant='danger']) button,

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

@@ -23,9 +23,16 @@ $theme: $indigo;
 
 :host([variant='warning']) button,
 :host([selected][variant='warning']) button:not([disabled]) {
+    color: color(gray, 900);
+
     &:focus {
+        color: color(gray, 900);
         box-shadow: 0 0 0 rem(3px) color(warn, 100);
     }
+
+    &:hover {
+        color: color(gray, 900);
+    }
 }
 
 :host([variant='danger']) button,

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

@@ -58,23 +58,53 @@ $theme: $indigo;
 @mixin chip-variants($variant, $variant-color) {
     :host([variant='#{$variant}']) button,
     :host([selected][variant='#{$variant}']) button:not([disabled]) {
-        color: contrast-color($variant-color, 900);
+        @if $variant != 'warning' {
+            color: contrast-color($variant-color, 900);
+        }
+
+        @if $variant == 'success' {
+            background: color(success, 800);
+        } @else if $variant == 'danger' {
+            background: color(error, 600);
+        }
+
         border-color: transparent;
 
         &:focus {
-            background: color($variant-color, 500);
-            color: contrast-color($variant-color, 900);
+            @if $variant == 'warning' or $variant == 'info' {
+                background: color($variant-color, 500);
+            } @else if $variant == 'danger' {
+                background: color(error, 600);
+            }
+
+            @if $variant != 'warning' {
+                color: contrast-color($variant-color, 900);
+            }
         }
 
         &:hover {
-            background: color($variant-color, 400);
-            color: contrast-color($variant-color, 900);
+            @if $variant == 'warning' or $variant == 'info' {
+                background: color($variant-color, 400);
+            } @else if $variant == 'success' {
+                background: color(success, 700);
+            } @else if $variant == 'danger' {
+                background: color(error, 500);
+            }
+
+            @if $variant != 'warning' {
+                color: contrast-color($variant-color, 900);
+            }
         }
     }
 
     :host([variant='#{$variant}']) button[disabled] {
-        color: contrast-color($variant-color, 900);
-        background: color($variant-color, 500);
+        @if $variant != 'warning' {
+            color: contrast-color($variant-color, 900);
+        }
+        
+        @if $variant == 'warning' or $variant == 'info' {
+            background: color($variant-color, 500);
+        }
     }
 }