chore(web_common): tweak button styling (#5284)

Author: mykalmax

web/common/src/components/Button/Button.css

@@ -4,7 +4,7 @@
   --color-button-primary-hover: var(--color-action-hover);
   --color-button-primary-active: var(--color-action-active);
 
-  --color-button-secondary-background: var(--color-neutral-100);
+  --color-button-secondary-background: var(--color-neutral-10);
   --color-button-secondary-foreground: var(--color-prose);
   --color-button-secondary-hover: var(--color-neutral-125);
   --color-button-secondary-active: var(--color-neutral-150);
@@ -14,7 +14,7 @@
   --color-button-alternative-hover: var(--color-neutral-125);
   --color-button-alternative-active: var(--color-neutral-150);
 
-  --color-button-destructive-background: var(--color-neutral-100);
+  --color-button-destructive-background: var(--color-neutral-10);
   --color-button-destructive-foreground: var(--color-destructive-foreground);
   --color-button-destructive-hover: var(--color-neutral-125);
   --color-button-destructive-active: var(--color-neutral-150);
@@ -26,6 +26,6 @@
 
   --color-button-transparent-background: transparent;
   --color-button-transparent-foreground: var(--color-prose);
-  --color-button-secondary-hover: var(--color-neutral-125);
-  --color-button-secondary-active: var(--color-neutral-150);
+  --color-button-transparent-hover: var(--color-neutral-125);
+  --color-button-transparent-active: var(--color-neutral-150);
 }

web/common/src/components/Button/Button.tsx

@@ -30,7 +30,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <Comp
         className={cn(
           buttonVariants({ variant, size, className }),
-          disabled && 'pointer-events-none bg-neutral-100 text-neutral-400',
+          disabled && 'pointer-events-none bg-neutral-150 text-prose',
         )}
         disabled={disabled}
         ref={ref}

web/common/src/components/CopyButton/CopyButton.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 
 import { Button, type ButtonProps } from '@/components/Button/Button'
-import { cn } from '@/utils'
 
 type TimerID = ReturnType<typeof setTimeout>
 
@@ -20,7 +19,6 @@ export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
       size = 'xs',
       delay = 2000,
       disabled = false,
-      className,
       children,
       onClick,
       ...props
@@ -53,7 +51,6 @@ export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         onClick={copy}
         disabled={disabled || !!copied}
         {...props}
-        className={cn(className, copied && 'pointer-events-none')}
       >
         {children(copied != null)}
       </Button>

web/common/src/index.ts

@@ -1,6 +1,10 @@
 // Components
 export { Badge, type BadgeProps } from '@/components/Badge/Badge'
-export { Button, type ButtonProps } from '@/components/Button/Button'
+export {
+  Button,
+  type ButtonProps,
+  type ButtonVariant,
+} from '@/components/Button/Button'
 export {
   CopyButton,
   type CopyButtonProps,