Button counter contrast fixes (#3270)

* bump primies

* update counter colors

* Create breezy-fireants-tickle.md

* bump again

* snaps

* add story to e2e

* bump

* snippy snaps

Author: langermank

.changeset/breezy-fireants-tickle.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Button counter contrast fixes

package-lock.json

@@ -96,7 +96,7 @@
     "@lit-labs/react": "1.1.1",
     "@primer/behaviors": "1.3.3",
     "@primer/octicons-react": "^18.0.0",
-    "@primer/primitives": "7.11.7",
+    "@primer/primitives": "7.11.10",
     "@react-aria/ssr": "^3.1.0",
     "@styled-system/css": "^5.1.5",
     "@styled-system/props": "^5.1.5",

package.json

@@ -242,6 +242,10 @@ const components = new Map([
           id: 'components-button-features--trailing-visual',
           name: 'Trailing Visual',
         },
+        {
+          id: 'components-button-features--trailing-counter-all-variants',
+          name: 'Trailing Counter All Variants',
+        },
       ],
     },
   ],

script/generate-e2e-tests.js

@@ -28,6 +28,54 @@ export const TrailingCounter = () => {
   )
 }
 
+export const TrailingCounterAllVariants = () => {
+  const [count, setCount] = useState(0)
+  return (
+    <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+      <Button onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="primary" onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="primary" disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="outline" onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="outline" disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="danger" onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="danger" disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="invisible" onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+      <Button variant="invisible" disabled onClick={() => setCount(count + 1)}>
+        Watch
+        <Button.Counter>{count}</Button.Counter>
+      </Button>
+    </div>
+  )
+}
+
 export const TrailingAction = () => <Button trailingAction={TriangleDownIcon}>Trailing action</Button>
 
 export const Block = () => <Button block>Default</Button>

src/Button/Button.features.stories.tsx

@@ -72,7 +72,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.danger.hoverCounterBg',
-          color: 'btn.danger.hoverText',
+          color: 'btn.danger.hoverCounterFg',
         },
       },
       '&:active:not([disabled])': {
@@ -86,12 +86,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         backgroundColor: 'btn.danger.disabledBg',
         borderColor: 'btn.danger.disabledBorder',
         '[data-component=ButtonCounter]': {
-          color: 'inherit',
+          color: 'btn.danger.disabledCounterFg',
           backgroundColor: 'btn.danger.disabledCounterBg',
         },
       },
       '[data-component=ButtonCounter]': {
-        color: 'btn.danger.text',
+        color: 'btn.danger.counterFg',
         backgroundColor: 'btn.danger.counterBg',
       },
       '&[aria-expanded=true]': {
@@ -156,7 +156,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.hoverCounterBg',
-          color: 'inherit',
+          color: 'btn.outline.hoverCounterFg',
         },
       },
       '&:active:not([disabled])': {
@@ -172,12 +172,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         borderColor: 'btn.border',
         '[data-component=ButtonCounter]': {
           backgroundColor: 'btn.outline.disabledCounterBg',
-          color: 'inherit',
+          color: 'btn.outline.disabledCounterFg',
         },
       },
       '[data-component=ButtonCounter]': {
         backgroundColor: 'btn.outline.counterBg',
-        color: 'btn.outline.text',
+        color: 'btn.outline.counterFg',
       },
       '&[aria-expanded=true]': {
         color: 'btn.outline.selectedText',

src/Button/styles.ts

@@ -1258,13 +1258,13 @@ exports[`Button styles danger button appropriately 1`] = `
 }
 
 .c0:disabled [data-component=ButtonCounter] {
-  color: inherit;
+  color: btn.danger.disabledCounterFg;
   background-color: btn.danger.disabledCounterBg;
 }
 
 .c0 [data-component=ButtonCounter] {
   font-size: 14px;
-  color: btn.danger.text;
+  color: btn.danger.counterFg;
   background-color: btn.danger.counterBg;
 }
 
@@ -1366,7 +1366,7 @@ exports[`Button styles danger button appropriately 1`] = `
 
 .c0:hover:not([disabled]) [data-component=ButtonCounter] {
   background-color: btn.danger.hoverCounterBg;
-  color: btn.danger.hoverText;
+  color: btn.danger.hoverCounterFg;
 }
 
 .c0:active:not([disabled]) {