Merge pull request #10859 from ethereum/button-disabled-styles

Button - Fix disabled styles in solid variant

Author: pettinarip

src/@chakra-ui/gatsby-plugin/components/Button.ts

@@ -39,6 +39,10 @@ const variantSolid = defineStyle({
   color: "background.base",
   bg: "primary.base",
   borderColor: "transparent",
+  _disabled: {
+    bg: "disabled",
+    color: "background.base",
+  },
   _hover: {
     color: "background.base",
     bg: "primary.hover",

src/@chakra-ui/gatsby-plugin/semanticTokens.ts

@@ -60,7 +60,7 @@ const semanticTokens = {
       base: { _light: "white", _dark: "gray.700" },
       highlight: { _light: "gray.100", _dark: "gray.900" },
     },
-    disabled: { _light: "gray.300", _dark: "gray.500" },
+    disabled: { _light: "gray.400", _dark: "gray.500" },
     // ! Deprecating neutral
     neutral: { _light: "white", _dark: "gray.900" },
 

src/components/Button/Button.stories.tsx

@@ -47,7 +47,12 @@ export const StyleVariants: Story = {
     <VStack spacing={4}>
       {variants.map((variant, idx) => {
         if (args.isSecondary && variant === "solid") return
-        return <Button key={idx} variant={variant} {...args} />
+        return (
+          <HStack spacing={4} key={idx}>
+            <Button variant={variant} {...args} />
+            <Button variant={variant} isDisabled {...args} />
+          </HStack>
+        )
       })}
     </VStack>
   ),