[Bug] Leading & Trailing Visual Colors for Button

.changeset/strong-zoos-explain.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+[Bug] Leading & Trailing Visual Colors for Button

src/Button/styles.ts

@@ -25,6 +25,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.activeBg',
         borderColor: 'btn.activeBorder',
       },
+      '[data-component="leadingVisual"], [data-component="trailingVisual"], [data-component="trailingAction"]': {
+        color: 'fg.muted',
+      },
     },
     primary: {
       color: 'btn.primary.text',
@@ -234,7 +237,7 @@ export const getBaseStyles = (theme?: Theme) => ({
     },
   },
   '[data-component=ButtonCounter]': {
-    fontSize: '1',
+    fontSize: '0',
   },
   '&[data-component=IconButton]': {
     display: 'inline-grid',
@@ -295,6 +298,9 @@ export const getButtonStyles = (theme?: Theme) => {
       gridArea: 'text',
       lineHeight: 'calc(20/14)',
       whiteSpace: 'nowrap',
+      // remove flex in next major release
+      display: 'flex',
+      alignItems: 'center',
     },
     '[data-component="trailingVisual"]': {
       gridArea: 'trailingVisual',

src/__tests__/__snapshots__/ActionMenu.test.tsx.snap

@@ -116,7 +116,7 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c1 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c1[data-component=IconButton] {
@@ -178,6 +178,14 @@ exports[`ActionMenu renders consistently 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c1 [data-component="trailingVisual"] {
@@ -223,6 +231,12 @@ exports[`ActionMenu renders consistently 1`] = `
   border-color: rgba(31,35,40,0.15);
 }
 
+.c1 [data-component="leadingVisual"],
+.c1 [data-component="trailingVisual"],
+.c1 [data-component="trailingAction"] {
+  color: #656d76;
+}
+
 @media (forced-colors:active) {
   .c1:focus {
     outline: solid 1px transparent;

src/__tests__/__snapshots__/Button.test.tsx.snap

@@ -102,7 +102,7 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -164,6 +164,14 @@ exports[`Button renders consistently 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -209,6 +217,12 @@ exports[`Button renders consistently 1`] = `
   border-color: rgba(31,35,40,0.15);
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: #656d76;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -329,7 +343,7 @@ exports[`Button respects block prop 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -391,6 +405,14 @@ exports[`Button respects block prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -436,6 +458,12 @@ exports[`Button respects block prop 1`] = `
   border-color: btn.activeBorder;
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -562,7 +590,7 @@ exports[`Button respects the alignContent prop 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -624,6 +652,14 @@ exports[`Button respects the alignContent prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -669,6 +705,12 @@ exports[`Button respects the alignContent prop 1`] = `
   border-color: btn.activeBorder;
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -794,7 +836,7 @@ exports[`Button respects the large size prop 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -856,6 +898,14 @@ exports[`Button respects the large size prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -901,6 +951,12 @@ exports[`Button respects the large size prop 1`] = `
   border-color: btn.activeBorder;
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -1027,7 +1083,7 @@ exports[`Button respects the small size prop 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -1089,6 +1145,14 @@ exports[`Button respects the small size prop 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1134,6 +1198,12 @@ exports[`Button respects the small size prop 1`] = `
   border-color: btn.activeBorder;
 }
 
+.c0 [data-component="leadingVisual"],
+.c0 [data-component="trailingVisual"],
+.c0 [data-component="trailingAction"] {
+  color: fg.muted;
+}
+
 @media (forced-colors:active) {
   .c0:focus {
     outline: solid 1px transparent;
@@ -1263,7 +1333,7 @@ exports[`Button styles danger button appropriately 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
   color: btn.danger.counterFg;
   background-color: btn.danger.counterBg;
 }
@@ -1327,6 +1397,14 @@ exports[`Button styles danger button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1511,7 +1589,7 @@ exports[`Button styles invisible button appropriately 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .c0[data-component=IconButton] {
@@ -1574,6 +1652,14 @@ exports[`Button styles invisible button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {
@@ -1764,7 +1850,7 @@ exports[`Button styles primary button appropriately 1`] = `
 }
 
 .c0 [data-component=ButtonCounter] {
-  font-size: 14px;
+  font-size: 12px;
   background-color: btn.primary.counterBg;
   color: btn.primary.text;
 }
@@ -1828,6 +1914,14 @@ exports[`Button styles primary button appropriately 1`] = `
   grid-area: text;
   line-height: calc(20/14);
   white-space: nowrap;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
 .c0 [data-component="trailingVisual"] {