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

Button - Fix disabled styles in solid variant
ethereum · Aug 3, 2023 · c64304f · c64304f
2 parents d34da17 + f25d7ff
commit c64304f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/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",

diff --git a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts b/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" },
 

diff --git a/src/components/Button/Button.stories.tsx b/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>
   ),