Button v3 Disabled Styles Update (#5402)

* Initial Commit * Add changeset * Changed selector * Remove redundant code --------- Co-authored-by: Christian Moore <[email protected]>
cultureamp · Dec 18, 2024 · 805d63e · 805d63e
1 parent bc03b0c
commit 805d63e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/.changeset/twenty-goats-tell.md b/.changeset/twenty-goats-tell.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Updated button v3 disabled styles
diff --git a/packages/components/src/__rc__/Button/Button.module.css b/packages/components/src/__rc__/Button/Button.module.css
@@ -114,6 +114,12 @@
     --button-bg-color: var(--color-gray-300);
     --button-border-color: var(--color-black);
   }
+
+  &.isDisabled {
+    --button-bg-color: var(--color-white);
+    --button-border-color: var(--color-gray-400);
+    --button-text-color: var(--color-gray-400);
+  }
 }
 
 .tertiary {
@@ -135,6 +141,12 @@
     --button-bg-color: var(--color-gray-300);
     --button-border-color: var(--color-gray-300);
   }
+
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: transparent;
+    --button-text-color: var(--color-gray-400);
+  }
 }
 
 .primaryReversed,
@@ -164,6 +176,12 @@
     --button-bg-color: var(--color-white);
     --button-border-color: var(--color-white);
   }
+
+  &.isDisabled {
+    --button-bg-color: rgba(var(--color-white-rgb), 0.2);
+    --button-border-color: transparent;
+    --button-text-color: rgba(var(--color-purple-800-rgb), 0.7);
+  }
 }
 
 .secondaryReversed {
@@ -185,6 +203,12 @@
     --button-bg-color: rgba(var(--color-white-rgb), 0.1);
     --button-border-color: var(--color-white);
   }
+
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: rgba(var(--color-white), 0.2);
+    --button-text-color: rgba(var(--color-white-rgb), 0.2);
+  }
 }
 
 .tertiaryReversed {
@@ -206,16 +230,11 @@
     --button-bg-color: rgba(var(--color-white-rgb), 0.1);
     --button-border-color: transparent;
   }
-}
 
-.isDisabled {
-  --button-bg-color: var(--color-gray-400);
-  --button-border-color: var(--color-gray-400);
-  --button-text-color: var(--color-white);
-
-  &[data-hovered] {
-    --button-bg-color: var(--color-gray-400);
-    --button-border-color: var(--color-gray-400);
+  &.isDisabled {
+    --button-bg-color: transparent;
+    --button-border-color: transparent;
+    --button-text-color: rgba(var(--color-white-rgb), 0.2);
   }
 }