diff --git a/.changeset/metal-ants-punch.md b/.changeset/metal-ants-punch.md
new file mode 100644
index 000000000000..6e6d87bc0260
--- /dev/null
+++ b/.changeset/metal-ants-punch.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Decrease `invisible` button icon CSS specifity
diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx
index a4e3dee364ff..0bb4d6d99b77 100644
--- a/src/Button/Button.dev.stories.tsx
+++ b/src/Button/Button.dev.stories.tsx
@@ -1,6 +1,6 @@
import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react'
import React from 'react'
-import {Button} from '.'
+import {Button, IconButton} from '.'
export default {
title: 'Components/Button/DevOnly',
@@ -29,6 +29,7 @@ export const InvisibleVariants = () => {
Button
{count}
+
)
}
diff --git a/src/Button/IconButton.dev.stories.tsx b/src/Button/IconButton.dev.stories.tsx
index ac583d84d48f..36e75d6b350d 100644
--- a/src/Button/IconButton.dev.stories.tsx
+++ b/src/Button/IconButton.dev.stories.tsx
@@ -21,3 +21,7 @@ export const CustomSizeWithMedia = () => {
/>
)
}
+
+export const CustomIconColor = () => (
+
+)
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 605da445460b..620850c44196 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -121,7 +121,13 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
'&[aria-expanded=true]': {
backgroundColor: 'btn.selectedBg',
},
- svg: {
+ '&[data-component="IconButton"][data-no-visuals]': {
+ color: 'fg.muted',
+ },
+ '[data-component="trailingAction"]': {
+ color: 'fg.muted',
+ },
+ '[data-component="leadingVisual"]': {
color: 'fg.muted',
},
'&[data-no-visuals]': {
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index e1933f893c2b..47b0a606fda2 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1565,6 +1565,7 @@ exports[`Button styles invisible button appropriately 1`] = `
.c0 [data-component="leadingVisual"] {
grid-area: leadingVisual;
+ color: fg.muted;
}
.c0 [data-component="text"] {
@@ -1579,6 +1580,7 @@ exports[`Button styles invisible button appropriately 1`] = `
.c0 [data-component="trailingAction"] {
margin-right: -4px;
+ color: fg.muted;
}
.c0 [data-component="buttonContent"] {
@@ -1613,7 +1615,7 @@ exports[`Button styles invisible button appropriately 1`] = `
background-color: btn.selectedBg;
}
-.c0 svg {
+.c0[data-component="IconButton"][data-no-visuals] {
color: fg.muted;
}
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 31051ce57003..12f9f416c18f 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1408,6 +1408,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
.c4 [data-component="leadingVisual"] {
grid-area: leadingVisual;
+ color: #57606a;
}
.c4 [data-component="text"] {
@@ -1422,6 +1423,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
.c4 [data-component="trailingAction"] {
margin-right: -4px;
+ color: #57606a;
}
.c4 [data-component="buttonContent"] {
@@ -1456,7 +1458,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
background-color: hsla(220,14%,94%,1);
}
-.c4 svg {
+.c4[data-component="IconButton"][data-no-visuals] {
color: #57606a;
}
@@ -2046,6 +2048,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
.c3 [data-component="leadingVisual"] {
grid-area: leadingVisual;
+ color: #57606a;
}
.c3 [data-component="text"] {
@@ -2060,6 +2063,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
.c3 [data-component="trailingAction"] {
margin-right: -4px;
+ color: #57606a;
}
.c3 [data-component="buttonContent"] {
@@ -2094,7 +2098,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
background-color: hsla(220,14%,94%,1);
}
-.c3 svg {
+.c3[data-component="IconButton"][data-no-visuals] {
color: #57606a;
}
@@ -2438,6 +2442,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
.c4 [data-component="leadingVisual"] {
grid-area: leadingVisual;
+ color: #57606a;
}
.c4 [data-component="text"] {
@@ -2452,6 +2457,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
.c4 [data-component="trailingAction"] {
margin-right: -4px;
+ color: #57606a;
}
.c4 [data-component="buttonContent"] {
@@ -2486,7 +2492,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
background-color: hsla(220,14%,94%,1);
}
-.c4 svg {
+.c4[data-component="IconButton"][data-no-visuals] {
color: #57606a;
}