From e57a521afef4c73c851f7641d868a462d2a6985b Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Tue, 15 Oct 2024 10:24:31 -0400
Subject: [PATCH] fix: icons in buttons

---
 packages/button/src/styles/Button.module.css  | 28 +++++++++++--------
 .../components/src/styles/Button.module.css   |  4 +++
 .../src/styles/SplitButton.module.css         |  4 +++
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/button/src/styles/Button.module.css b/packages/button/src/styles/Button.module.css
index 490663b38..608deae8f 100644
--- a/packages/button/src/styles/Button.module.css
+++ b/packages/button/src/styles/Button.module.css
@@ -199,9 +199,9 @@
 	--Button-icon-color-fill-destructive-active: var(--lp-color-fill-interactive-destructive);
 
 	/* BUTTON ICON DISABLED */
-	--Button-icon-color-fill-disabled: var(--lp-color-fill-interactive-disabled);
-	--Button-icon-color-fill-disabled-hover: var(--lp-color-fill-interactive-disabled);
-	--Button-icon-color-fill-disabled-active: var(--lp-color-fill-interactive-disabled);
+	--Button-icon-color-fill-disabled: var(--lp-color-text-interactive-disabled);
+	--Button-icon-color-fill-disabled-hover: var(--lp-color-text-interactive-disabled);
+	--Button-icon-color-fill-disabled-active: var(--lp-color-text-interactive-disabled);
 
 	/* SEARCH BAR CLEAR BUTTON ICON */
 	--Button-icon-clear-color-fill: var(--lp-color-blue-700);
@@ -306,6 +306,10 @@
 	width: 100%;
 }
 
+.Button-icon {
+	fill: currentColor;
+}
+
 .Button:not(.Button--icon) > .Button-icon {
 	vertical-align: middle;
 }
@@ -409,21 +413,21 @@
 	box-shadow: var(--Button-box-shadow-active);
 }
 
-.Button--icon.Button--primary .Button-icon {
+.Button--icon.Button--primary :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-primary);
 }
 
 .Button--primary:hover .Button-icon,
-.Button--icon.Button--primary:hover .Button-icon {
+.Button--icon.Button--primary:hover :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-primary-hover);
 }
 
-.Button--icon.Button--primary:focus-visible .Button-icon {
+.Button--icon.Button--primary:focus-visible :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-primary-focus);
 }
 
 .Button--primary:active .Button-icon,
-.Button--icon.Button--primary:active .Button-icon {
+.Button--icon.Button--primary:active :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-primary-active);
 }
 
@@ -536,19 +540,19 @@
 	box-shadow: var(--Button-box-shadow-focus);
 }
 
-.Button--icon.Button--destructive .Button-icon {
+.Button--icon.Button--destructive :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-destructive);
 }
 
-.Button--icon.Button--destructive:hover .Button-icon {
+.Button--icon.Button--destructive:hover :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-destructive-hover);
 }
 
-.Button--icon.Button--destructive:focus-visible .Button-icon {
+.Button--icon.Button--destructive:focus-visible :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-destructive-focus);
 }
 
-.Button--icon.Button--destructive:active .Button-icon {
+.Button--icon.Button--destructive:active :global(.Button-icon) {
 	fill: var(--Button-icon-color-fill-destructive-active);
 }
 
@@ -619,7 +623,7 @@
 	border-color: var(--Button-color-border-disabled);
 }
 
-.Button[disabled] [class*='_icon'] {
+.Button[disabled] [data-icon] {
 	fill: var(--Button-icon-color-fill-disabled);
 }
 
diff --git a/packages/components/src/styles/Button.module.css b/packages/components/src/styles/Button.module.css
index 2bedb078c..a7b125a15 100644
--- a/packages/components/src/styles/Button.module.css
+++ b/packages/components/src/styles/Button.module.css
@@ -13,6 +13,10 @@
 	border-width: 1px;
 	outline: none;
 	white-space: nowrap;
+
+	& [data-icon] {
+		fill: currentColor;
+	}
 }
 
 .base[data-focus-visible] {
diff --git a/packages/split-button/src/styles/SplitButton.module.css b/packages/split-button/src/styles/SplitButton.module.css
index 24caa1aa8..078fd7e35 100644
--- a/packages/split-button/src/styles/SplitButton.module.css
+++ b/packages/split-button/src/styles/SplitButton.module.css
@@ -34,6 +34,10 @@
 	& :global([class*='_Button--primary']).SplitButtonDrop {
 		margin-left: 0.0625rem;
 	}
+
+	& [data-icon] {
+		fill: currentColor;
+	}
 }
 
 .SplitButtonDrop:global([class*='_Button']) > span {