From 62a93695d49ed74c113b8327a5a54f2cdd3a752a Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Fri, 8 Nov 2024 15:26:04 -0500
Subject: [PATCH] fix(components): update fill for pending button progress

---
 .changeset/fair-emus-relax.md                         | 5 +++++
 packages/components/src/Button.tsx                    | 4 +++-
 packages/components/src/styles/Button.module.css      | 4 ++++
 packages/components/src/styles/ProgressBar.module.css | 3 ++-
 4 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fair-emus-relax.md

diff --git a/.changeset/fair-emus-relax.md b/.changeset/fair-emus-relax.md
new file mode 100644
index 000000000..9c924813a
--- /dev/null
+++ b/.changeset/fair-emus-relax.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Update fill for pending button progress
diff --git a/packages/components/src/Button.tsx b/packages/components/src/Button.tsx
index d5320c3a9..b0471a1e7 100644
--- a/packages/components/src/Button.tsx
+++ b/packages/components/src/Button.tsx
@@ -59,7 +59,9 @@ const _Button = (
 		>
 			{composeRenderProps(props.children, (children, { isPending }) => (
 				<Provider values={[[TextContext, { className: isPending ? styles.pending : undefined }]]}>
-					{isPending && <ProgressBar isIndeterminate aria-label="loading" />}
+					{isPending && (
+						<ProgressBar isIndeterminate aria-label="loading" className={styles.progress} />
+					)}
 					{children}
 				</Provider>
 			))}
diff --git a/packages/components/src/styles/Button.module.css b/packages/components/src/styles/Button.module.css
index 30f0a9e14..883b48f67 100644
--- a/packages/components/src/styles/Button.module.css
+++ b/packages/components/src/styles/Button.module.css
@@ -154,3 +154,7 @@
 .pending {
 	opacity: 50%;
 }
+
+.progress {
+	--fill: currentColor;
+}
diff --git a/packages/components/src/styles/ProgressBar.module.css b/packages/components/src/styles/ProgressBar.module.css
index 61297801d..3bbf06575 100644
--- a/packages/components/src/styles/ProgressBar.module.css
+++ b/packages/components/src/styles/ProgressBar.module.css
@@ -9,6 +9,7 @@
 }
 
 .progress {
+	--fill: var(--lp-color-gray-500);
 	display: inline-flex;
 }
 
@@ -17,7 +18,7 @@
 }
 
 .innerCircle {
-	stroke: var(--lp-color-gray-500);
+	stroke: var(--fill);
 }
 
 .base {