diff --git a/src/components/chip/themes/dark/chip.indigo.scss b/src/components/chip/themes/dark/chip.indigo.scss
index 78e3df93a..32a12d5e2 100644
--- a/src/components/chip/themes/dark/chip.indigo.scss
+++ b/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,
diff --git a/src/components/chip/themes/light/chip.indigo.scss b/src/components/chip/themes/light/chip.indigo.scss
index 6e63ae343..f5182a9a2 100644
--- a/src/components/chip/themes/light/chip.indigo.scss
+++ b/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,
diff --git a/src/components/chip/themes/shared/chip.indigo.scss b/src/components/chip/themes/shared/chip.indigo.scss
index e26d4cb6c..26021ba9d 100644
--- a/src/components/chip/themes/shared/chip.indigo.scss
+++ b/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);
+        }
     }
 }