Bug fix: default Button disabled bg-color

.changeset/young-cooks-shave.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: default Button disabled bg-color

packages/react/src/Button/Button.features.stories.tsx

@@ -61,12 +61,34 @@ export const TrailingAction = () => <Button trailingAction={TriangleDownIcon}>Tr
 
 export const Block = () => <Button block>Default</Button>
 
-export const Disabled = () => <Button disabled>Default</Button>
+export const Disabled = () => (
+  <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+    <Button disabled>Default</Button>
+    <Button variant="primary" disabled>
+      Primary
+    </Button>
+    <Button variant="danger" disabled>
+      Danger
+    </Button>
+    <Button variant="invisible" disabled>
+      Invisible
+    </Button>
+  </div>
+)
 
 export const Inactive = () => (
-  <Button variant="primary" inactive>
-    Default
-  </Button>
+  <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
+    <Button inactive>Default</Button>
+    <Button variant="primary" inactive>
+      Primary
+    </Button>
+    <Button variant="danger" inactive>
+      Danger
+    </Button>
+    <Button variant="invisible" inactive>
+      Invisible
+    </Button>
+  </div>
 )
 
 export const Small = () => <Button size="small">Default</Button>

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

@@ -100,6 +100,7 @@ exports[`Button respects block prop 1`] = `
   box-shadow: none;
   color: primer.fg.disabled;
   border-color: var(--button-default-borderColor-disabled,undefined);
+  background-color: var(--button-default-bgColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -356,6 +357,7 @@ exports[`Button respects the alignContent prop 1`] = `
   box-shadow: none;
   color: primer.fg.disabled;
   border-color: var(--button-default-borderColor-disabled,undefined);
+  background-color: var(--button-default-bgColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -611,6 +613,7 @@ exports[`Button respects the large size prop 1`] = `
   box-shadow: none;
   color: primer.fg.disabled;
   border-color: var(--button-default-borderColor-disabled,undefined);
+  background-color: var(--button-default-bgColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {
@@ -867,6 +870,7 @@ exports[`Button respects the small size prop 1`] = `
   box-shadow: none;
   color: primer.fg.disabled;
   border-color: var(--button-default-borderColor-disabled,undefined);
+  background-color: var(--button-default-bgColor-disabled,undefined);
 }
 
 .c0:disabled [data-component=ButtonCounter] {

packages/react/src/Button/styles.ts

@@ -18,6 +18,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
       '&:disabled': {
         color: 'primer.fg.disabled',
         borderColor: `var(--button-default-borderColor-disabled, ${theme?.colors.btn.border})`,
+        backgroundColor: `var(--button-default-bgColor-disabled, ${theme?.colors.input.disabledBg})`,
         '[data-component=ButtonCounter]': {
           color: 'inherit',
         },

packages/react/src/FormControl/FormControl.features.stories.tsx

@@ -284,3 +284,25 @@ export const WithLeadingVisual = () => (
     </FormControl>
   </Box>
 )
+
+export const DisabledInputs = () => (
+  <Box sx={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+    <FormControl disabled>
+      <FormControl.Label>Disabled checkbox</FormControl.Label>
+      <Checkbox />
+    </FormControl>
+    <FormControl disabled>
+      <FormControl.Label>Disabled input</FormControl.Label>
+      <TextInput />
+    </FormControl>
+    <FormControl disabled>
+      <FormControl.Label>Disabled select</FormControl.Label>
+      <Select>
+        <Select.Option value="figma">Figma</Select.Option>
+        <Select.Option value="css">Primer CSS</Select.Option>
+        <Select.Option value="prc">Primer React components</Select.Option>
+        <Select.Option value="pvc">Primer ViewComponents</Select.Option>
+      </Select>
+    </FormControl>
+  </Box>
+)