From 805d63e277828f36b3d1de46bb165b015a068192 Mon Sep 17 00:00:00 2001
From: Christian Moore <33382564+Zystix@users.noreply.github.com>
Date: Wed, 18 Dec 2024 17:14:59 +1100
Subject: [PATCH 1/2] Button v3 Disabled Styles Update (#5402)

* Initial Commit

* Add changeset

* Changed selector

* Remove redundant code

---------

Co-authored-by: Christian Moore <christian.moore@cultureamp.com>
---
 .changeset/twenty-goats-tell.md               |  5 +++
 .../src/__rc__/Button/Button.module.css       | 37 ++++++++++++++-----
 2 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/twenty-goats-tell.md

diff --git a/.changeset/twenty-goats-tell.md b/.changeset/twenty-goats-tell.md
new file mode 100644
index 00000000000..522925140d6
--- /dev/null
+++ 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
index a2e897c63f6..6f6eea92ccc 100644
--- 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);
   }
 }
 

From 52c1bddc910d3639dd315deaafb87fdc2e52dcc1 Mon Sep 17 00:00:00 2001
From: Christian Moore <33382564+Zystix@users.noreply.github.com>
Date: Thu, 19 Dec 2024 09:55:13 +1100
Subject: [PATCH 2/2] Button v3 Tertiary Styles Update (#5399)

* Initial commit

* Fix disabled styling in reversed.

* Add changeset

* Update Primary Reversed Styles

* css typo

---------

Co-authored-by: Christian Moore <christian.moore@cultureamp.com>
---
 .changeset/tough-pigs-deliver.md              |  5 ++++
 .../src/__rc__/Button/Button.module.css       | 26 ++++++++++++-------
 2 files changed, 21 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/tough-pigs-deliver.md

diff --git a/.changeset/tough-pigs-deliver.md b/.changeset/tough-pigs-deliver.md
new file mode 100644
index 00000000000..cf6e0aed9cd
--- /dev/null
+++ b/.changeset/tough-pigs-deliver.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Update Button v3 styles
diff --git a/packages/components/src/__rc__/Button/Button.module.css b/packages/components/src/__rc__/Button/Button.module.css
index 6f6eea92ccc..e6dc0741ce9 100644
--- a/packages/components/src/__rc__/Button/Button.module.css
+++ b/packages/components/src/__rc__/Button/Button.module.css
@@ -127,19 +127,25 @@
   --button-border-color: transparent;
   --button-text-color: var(--color-purple-800);
 
+  &[data-hovered],
+  &[data-pressed],
+  &[data-pending] {
+    --button-text-color: var(--color-blue-500);
+  }
+
   &[data-hovered] {
-    --button-bg-color: var(--color-gray-200);
-    --button-border-color: var(--color-gray-200);
+    --button-bg-color: var(--color-blue-200);
+    --button-border-color: var(--color-blue-200);
   }
 
   &[data-pressed] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-gray-300);
+    --button-bg-color: var(--color-blue-100);
+    --button-border-color: var(--color-blue-100);
   }
 
   &[data-pending] {
-    --button-bg-color: var(--color-gray-300);
-    --button-border-color: var(--color-gray-300);
+    --button-bg-color: var(--color-blue-100);
+    --button-border-color: var(--color-blue-100);
   }
 
   &.isDisabled {
@@ -163,13 +169,13 @@
   --button-text-color: var(--color-purple-800);
 
   &[data-hovered] {
-    --button-bg-color: var(--color-white);
-    --button-border-color: var(--color-white);
+    --button-bg-color: var(--color-gray-200);
+    --button-border-color: var(--color-gray-200);
   }
 
   &[data-pressed] {
-    --button-bg-color: var(--color-white);
-    --button-border-color: var(--color-white);
+    --button-bg-color: var(--color-gray-300);
+    --button-border-color: var(--color-gray-300);
   }
 
   &[data-pending] {