feat: add negative grey variant

Author: eshankvaish

src/Shared/Components/Button/button.scss

@@ -1,3 +1,13 @@
+@mixin svg-styles($color) {
+    svg *[stroke^="#"] {
+        stroke: $color;
+    }
+
+    svg *[fill^="#"] {
+        fill: $color;
+    }
+}
+
 @mixin button-variant-styles($background, $text-color, $border-color) {
     background: $background;
     color: $text-color;
@@ -7,13 +17,7 @@
         color: $text-color;
     }
 
-    svg *[stroke^="#"] {
-        stroke: $text-color;
-    }
-
-    svg *[fill^="#"] {
-        fill: $text-color;
-    }
+    @include svg-styles($text-color);
 
     // Custom state for loader
     // Added using css to ensure using the respective text-color
@@ -29,7 +33,7 @@
     }
 }
 
-@mixin pseudo-states($hover-bg-color, $active-bg-color, $hover-border-color: null) {
+@mixin pseudo-states($hover-bg-color, $active-bg-color, $hover-border-color: null, $color: null) {
     $parent-selector: &;
 
     &:hover:not([disabled]) {
@@ -38,10 +42,22 @@
         @if ($hover-border-color) {
             border-color: $hover-border-color;
         }
+
+        @if ($color) {
+            color: $color;
+
+            @include svg-styles($color);
+        }
     }
 
     &:active:not([disabled]) {
         background: $active-bg-color;
+
+        @if ($color) {
+            color: $color;
+    
+            @include svg-styles($color);
+        }
     }
 }
 
@@ -67,6 +83,11 @@
             @include pseudo-states(var(--R600), var(--R700));
         }
 
+        &--negative-grey {
+            @include button-variant-styles(var(--N600), $text-color, $border-color);
+            @include pseudo-states(var(--R600), var(--R700), null, $text-color);
+        }
+
         &--positive {
             @include button-variant-styles(var(--G500), $text-color, $border-color);
             @include pseudo-states(var(--G600), var(--G700));
@@ -94,7 +115,12 @@
 
         &--negative {
             @include button-variant-styles($background, var(--R600), $border-color);
-            @include pseudo-states(var(--R100), var(--R200), var(--R600));
+            @include pseudo-states(var(--R100), var(--R200), var(--R600), var(--R600));
+        }
+
+        &--negative-grey {
+            @include button-variant-styles($background, var(--N700), $border-color);
+            @include pseudo-states(var(--R100), var(--R200), var(--R600), var(--R600));
         }
 
         &--positive {
@@ -127,6 +153,10 @@
             @include button-variant-styles($background, var(--R600), $border-color);
         }
 
+        &--negative-grey {
+            @include button-variant-styles($background, var(--N700), $border-color);
+        }
+
         &--positive {
             @include button-variant-styles($background, var(--G600), $border-color);
         }
@@ -150,6 +180,10 @@
             @include pseudo-states(var(--R100), var(--R200));
         }
 
+        &--negative-grey {
+            @include pseudo-states(var(--R100), var(--R200), null, var(--R500));
+        }
+
         &--positive {
             @include pseudo-states(var(--G100), var(--G200));
         }
@@ -168,6 +202,7 @@
 
         &--default,
         &--negative,
+        &--negative-grey,
         &--positive,
         &--warning,
         &--neutral {

src/Shared/Components/Button/types.ts

@@ -14,6 +14,7 @@ export enum ButtonVariantType {
 export enum ButtonStyleType {
     default = 'default',
     negative = 'negative',
+    negativeGrey = 'negative-grey',
     positive = 'positive',
     warning = 'warning',
     neutral = 'neutral',