From 87362c527dc985e1963491ea298e807716d8b5c5 Mon Sep 17 00:00:00 2001
From: Daniel Ostapenko <daniel.ostapenko@toptal.com>
Date: Wed, 12 Feb 2025 16:09:44 +0100
Subject: [PATCH 1/2] Make loading disabled buttons colorful

---
 packages/base/Button/src/Button/Button.tsx           |  1 +
 packages/base/Button/src/Button/styles.ts            | 12 +++++++-----
 .../Button/src/ButtonCircular/ButtonCircular.tsx     |  1 +
 packages/base/Button/src/ButtonCircular/styles.ts    |  8 +++++---
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/base/Button/src/Button/Button.tsx b/packages/base/Button/src/Button/Button.tsx
index 9cd1236f4f..a7bdc7dc04 100644
--- a/packages/base/Button/src/Button/Button.tsx
+++ b/packages/base/Button/src/Button/Button.tsx
@@ -131,6 +131,7 @@ export const Button: OverridableComponent<Props> = forwardRef<
     focused,
     hovered,
     active,
+    loading,
   })
   const sizeClassNames = createSizeClassNames(size)
 
diff --git a/packages/base/Button/src/Button/styles.ts b/packages/base/Button/src/Button/styles.ts
index 67cdd30f7f..7553ed09c4 100644
--- a/packages/base/Button/src/Button/styles.ts
+++ b/packages/base/Button/src/Button/styles.ts
@@ -24,11 +24,13 @@ export const createVariantClassNames = (
     focused,
     hovered,
     active,
+    loading,
   }: {
     disabled?: boolean
     focused?: boolean
     hovered?: boolean
     active?: boolean
+    loading?: boolean
   }
 ): string[] => {
   const variantClassNames = []
@@ -39,7 +41,7 @@ export const createVariantClassNames = (
       variantClassNames.push('text-white')
       variantClassNames.push('visited:text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('bg-gray-400')
       } else {
         variantClassNames.push('hover:bg-[#4269D6]')
@@ -60,7 +62,7 @@ export const createVariantClassNames = (
       variantClassNames.push('text-white')
       variantClassNames.push('visited:text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('bg-gray-400')
       } else {
         variantClassNames.push('hover:bg-[#DB466B]')
@@ -80,7 +82,7 @@ export const createVariantClassNames = (
       variantClassNames.push('text-white')
       variantClassNames.push('visited:text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('bg-gray-400')
       } else {
         variantClassNames.push('hover:bg-[#27D496]')
@@ -98,7 +100,7 @@ export const createVariantClassNames = (
     case 'secondary':
       variantClassNames.push('border border-solid')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('text-gray-500')
         variantClassNames.push('visited:text-gray-500')
         variantClassNames.push('border-gray-500')
@@ -127,7 +129,7 @@ export const createVariantClassNames = (
       break
     case 'transparent':
       variantClassNames.push('border border-solid')
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('text-white/[0.32]')
         variantClassNames.push('border-white/[0.32]')
         variantClassNames.push('bg-transparent')
diff --git a/packages/base/Button/src/ButtonCircular/ButtonCircular.tsx b/packages/base/Button/src/ButtonCircular/ButtonCircular.tsx
index a7bc7c6160..e6c3286011 100644
--- a/packages/base/Button/src/ButtonCircular/ButtonCircular.tsx
+++ b/packages/base/Button/src/ButtonCircular/ButtonCircular.tsx
@@ -57,6 +57,7 @@ export const ButtonCircular: OverridableComponent<Props> = forwardRef<
     focused,
     hovered,
     active,
+    loading,
   })
 
   const finalClassName = cx(
diff --git a/packages/base/Button/src/ButtonCircular/styles.ts b/packages/base/Button/src/ButtonCircular/styles.ts
index 9194b694bd..8ba90203d4 100644
--- a/packages/base/Button/src/ButtonCircular/styles.ts
+++ b/packages/base/Button/src/ButtonCircular/styles.ts
@@ -28,11 +28,13 @@ export const createVariantClassNames = (
     focused,
     hovered,
     active,
+    loading,
   }: {
     disabled?: boolean
     focused?: boolean
     hovered?: boolean
     active?: boolean
+    loading?: boolean
   }
 ): string[] => {
   const variantClassNames = []
@@ -43,7 +45,7 @@ export const createVariantClassNames = (
       variantClassNames.push('text-white')
       variantClassNames.push('visited:text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('bg-gray-400')
       } else {
         variantClassNames.push('hover:bg-[#4269D6]')
@@ -69,7 +71,7 @@ export const createVariantClassNames = (
       variantClassNames.push('border-none')
       variantClassNames.push('text-graphite-700')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('text-graphite-700')
         variantClassNames.push('opacity-[0.48]')
         variantClassNames.push('bg-transparent')
@@ -97,7 +99,7 @@ export const createVariantClassNames = (
       variantClassNames.push('border-none')
       variantClassNames.push('text-white')
 
-      if (disabled) {
+      if (disabled && !loading) {
         variantClassNames.push('text-white/[0.48]')
         variantClassNames.push('bg-transparent')
       } else {

From c93192c5e95d121dbf9e407bfc38072c0cae00a3 Mon Sep 17 00:00:00 2001
From: Daniel Ostapenko <daniel.ostapenko@toptal.com>
Date: Wed, 12 Feb 2025 16:20:02 +0100
Subject: [PATCH 2/2] Add changeset

---
 .changeset/nice-games-beg.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/nice-games-beg.md

diff --git a/.changeset/nice-games-beg.md b/.changeset/nice-games-beg.md
new file mode 100644
index 0000000000..45cbe901eb
--- /dev/null
+++ b/.changeset/nice-games-beg.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-button': patch
+---
+
+---
+
+### Button
+
+- use the button's variant color when displaying the loading indicator in a disabled button, instead of the default grey