refactor button theme

theme/components/Button.ts

 import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
+import { runIfFn } from '@chakra-ui/utils';
 
-const variantPrimary = defineStyle({
-  bg: 'blue.600',
-  color: 'white',
-  fontWeight: 600,
-  _hover: {
-    bg: 'blue.400',
+const variantSolid = defineStyle((props) => {
+  const { colorScheme: c } = props;
+
+  if (c === 'gray') {
+    const bg = mode(`gray.100`, `whiteAlpha.200`)(props);
+
+    return {
+      bg,
+      _hover: {
+        bg: mode(`gray.200`, `whiteAlpha.300`)(props),
+        _disabled: {
+          bg,
+        },
+      },
+      _active: { bg: mode(`gray.300`, `whiteAlpha.400`)(props) },
+    };
+  }
+
+  const bg = `${ c }.600`;
+  const color = 'white';
+  const hoverBg = `${ c }.400`;
+  const activeBg = `${ c }.700`;
+
+  return {
+    bg,
+    color,
+    _hover: {
+      bg: hoverBg,
+      _disabled: {
+        bg,
+      },
+    },
     _disabled: {
-      bg: 'blue.600',
+      opacity: 0.2,
     },
-  },
-  _disabled: {
-    opacity: 0.2,
-  },
+    _active: { bg: activeBg },
+    fontWeight: 600,
+  };
 });
 
-const variantSecondary = defineStyle((props) => {
+const variantOutline = defineStyle((props) => {
+  const { colorScheme: c } = props;
+
+  const isGrayTheme = c === 'gray' || c === 'gray-dark';
+  const color = isGrayTheme ? mode('blackAlpha.800', 'whiteAlpha.800')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
+  const borderColor = isGrayTheme ? mode('gray.200', 'gray.600')(props) : mode(`${ c }.600`, `${ c }.300`)(props);
+  const activeBg = isGrayTheme ? mode('blue.50', 'gray.600')(props) : mode(`${ c }.50`, 'gray.600')(props);
+  const activeColor = (() => {
+    if (c === 'gray') {
+      return mode('blue.400', 'gray.50')(props);
+    }
+    if (c === 'gray-dark') {
+      return mode('blue.700', 'gray.50')(props);
+    }
+    return 'blue.400';
+  })();
+
   return {
-    color: mode('blue.600', 'blue.300')(props),
-    fontWeight: 600,
-    borderColor: mode('blue.600', 'blue.300')(props),
-    border: '2px solid',
+    color,
+    fontWeight: props.fontWeight || 600,
+    borderWidth: props.borderWidth || '2px',
+    borderStyle: 'solid',
+    borderColor,
+    bg: 'transparent',
     _hover: {
       color: 'blue.400',
       borderColor: 'blue.400',
+      bg: 'transparent',
+      _active: {
+        bg: props.isActive ? activeBg : 'transparent',
+        borderColor: props.isActive ? activeBg : 'blue.400',
+        color: props.isActive ? activeColor : 'blue.400',
+      },
     },
     _disabled: {
       opacity: 0.2,
     },
+    _active: {
+      bg: activeBg,
+      borderColor: activeBg,
+      color: activeColor,
+    },
   };
 });
 
-const variantIcon = defineStyle((props) => {
+const variantSimple = defineStyle((props) => {
+  const outline = runIfFn(variantOutline, props);
+
   return {
-    color: mode('blue.600', 'blue.300')(props),
+    color: outline.color,
     _hover: {
-      color: mode('blue.400', 'blue.200')(props),
+      color: outline._hover.color,
     },
   };
 });
 
-const variantIconBorder = defineStyle({
-  color: 'blue.600',
-  borderColor: 'blue.600',
-  border: '2px solid',
-  _hover: {
-    color: 'blue.400',
-    borderColor: 'blue.400',
-  },
-  _disabled: {
-    opacity: 0.2,
-  },
-});
-
 const variants = {
-  primary: variantPrimary,
-  secondary: variantSecondary,
-  icon: variantIcon,
-  iconBorder: variantIconBorder,
+  solid: variantSolid,
+  outline: variantOutline,
+  simple: variantSimple,
 };
 
 const baseStyle = defineStyle({
-  fontWeight: 'normal',
+  fontWeight: 600,
   borderRadius: 'base',
 });
 
@@ -97,6 +140,11 @@ const Button = defineStyleConfig({
   baseStyle,
   variants,
   sizes,
+  defaultProps: {
+    variant: 'solid',
+    size: 'md',
+    colorScheme: 'blue',
+  },
 });
 
 export default Button;

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -142,7 +142,6 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          variant="primary"
           onClick={ handleSubmit(onSubmit) }
           disabled={ !isValid }
           isLoading={ mutation.isLoading }

ui/blocks/profileMenu/ProfileMenuContent.tsx

@@ -40,7 +40,7 @@ const ProfileMenuContent = ({ name, nickname, email }: Props) => {
         </VStack>
       </Box>
       <Box mt={ 2 } pt={ 3 } borderTopColor={ borderColor } borderTopWidth="1px" { ...getDefaultTransitionProps() }>
-        <Button size="sm" width="full" variant="secondary">Sign Out</Button>
+        <Button size="sm" width="full" variant="outline">Sign Out</Button>
       </Box>
     </Box>
   );

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -168,7 +168,6 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          variant="primary"
           onClick={ handleSubmit(onSubmit) }
           disabled={ !isValid }
           isLoading={ mutation.isLoading }

ui/pages/ApiKeys.tsx

@@ -106,7 +106,6 @@ const ApiKeysPage: React.FC = () => {
         { Boolean(data.length) && list }
         <Stack marginTop={ 8 } spacing={ 5 } direction={{ base: 'column', lg: 'row' }}>
           <Button
-            variant="primary"
             size="lg"
             onClick={ apiKeyModalProps.onOpen }
             disabled={ !canAdd }

ui/pages/CustomAbi.tsx

@@ -100,7 +100,6 @@ const CustomAbiPage: React.FC = () => {
         { data.length > 0 && list }
         <HStack marginTop={ 8 } spacing={ 5 }>
           <Button
-            variant="primary"
             size="lg"
             onClick={ customAbiModalProps.onOpen }
           >

ui/pages/Watchlist.tsx

@@ -97,7 +97,6 @@ const WatchList: React.FC = () => {
         { Boolean(data?.length) && list }
         <Box marginTop={ 8 }>
           <Button
-            variant="primary"
             size="lg"
             onClick={ addressModalProps.onOpen }
           >

ui/privateTags/AddressModal/AddressForm.tsx

@@ -117,7 +117,6 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          variant="primary"
           onClick={ handleSubmit(onSubmit) }
           disabled={ !isValid }
           isLoading={ pending }

ui/privateTags/PrivateAddressTags.tsx

@@ -99,7 +99,6 @@ const PrivateAddressTags = () => {
       { Boolean(addressTagsData?.length) && list }
       <Box marginTop={ 8 }>
         <Button
-          variant="primary"
           size="lg"
           onClick={ addressModalProps.onOpen }
         >

ui/privateTags/PrivateTransactionTags.tsx

@@ -99,7 +99,6 @@ const PrivateTransactionTags = () => {
       { Boolean(transactionTagsData.length) && list }
       <Box marginTop={ 8 }>
         <Button
-          variant="primary"
           size="lg"
           onClick={ transactionModalProps.onOpen }
         >

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -116,7 +116,6 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          variant="primary"
           onClick={ handleSubmit(onSubmit) }
           disabled={ !isValid }
           isLoading={ pending }

ui/publicTags/PublicTagsData.tsx

@@ -95,7 +95,6 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
       { data.length > 0 && list }
       <Box marginTop={ 8 }>
         <Button
-          variant="primary"
           size="lg"
           onClick={ changeToForm }
         >

ui/publicTags/PublicTagsForm/PublicTagFormAddressInput.tsx

@@ -55,7 +55,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, erro
         { fieldsLength > 1 && (
           <IconButton
             aria-label="delete"
-            variant="iconBorder"
+            variant="outline"
             w="30px"
             h="30px"
             onClick={ onRemoveFieldClick(index) }
@@ -65,7 +65,7 @@ export default function PublicTagFormAction({ control, index, fieldsLength, erro
         { index === fieldsLength - 1 && fieldsLength < MAX_INPUTS_NUM && (
           <IconButton
             aria-label="add"
-            variant="iconBorder"
+            variant="outline"
             w="30px"
             h="30px"
             onClick={ onAddFieldClick }

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -231,7 +231,6 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
       <HStack spacing={ 6 }>
         <Button
           size="lg"
-          variant="primary"
           onClick={ handleSubmit(onSubmit) }
           disabled={ !isValid }
           isLoading={ mutation.isLoading }
@@ -240,7 +239,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
         </Button>
         <Button
           size="lg"
-          variant="secondary"
+          variant="outline"
           onClick={ changeToData }
           disabled={ mutation.isLoading }
         >

ui/shared/CopyToClipboard.tsx

@@ -22,7 +22,7 @@ const CopyToClipboard = ({ text }: {text: string}) => {
         icon={ <CopyIcon/> }
         w="20px"
         h="20px"
-        variant="icon"
+        variant="simple"
         display="inline-block"
         flexShrink={ 0 }
         onClick={ onCopy }

ui/shared/DeleteModal.tsx

@@ -65,7 +65,6 @@ const DeleteModal: React.FC<Props> = ({
         </ModalBody>
         <ModalFooter>
           <Button
-            variant="primary"
             size="lg"
             onClick={ onDeleteClick }
             isLoading={ mutation.isLoading }

ui/shared/TableItemActionButtons.tsx

@@ -18,7 +18,7 @@ const TableItemActionButtons = ({ onEditClick, onDeleteClick }: Props) => {
       <Tooltip label="Edit">
         <IconButton
           aria-label="edit"
-          variant="icon"
+          variant="simple"
           w="30px"
           h="30px"
           onClick={ onEditClick }
@@ -29,7 +29,7 @@ const TableItemActionButtons = ({ onEditClick, onDeleteClick }: Props) => {
       <Tooltip label="Delete">
         <IconButton
           aria-label="delete"
-          variant="icon"
+          variant="simple"
           w="30px"
           h="30px"
           onClick={ onDeleteClick }

ui/watchlist/AddressModal/AddressForm.tsx

@@ -187,7 +187,6 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       <Box marginTop={ 8 }>
         <Button
           size="lg"
-          variant="primary"
           onClick={ handleSubmit(onSubmit) }
           isLoading={ pending }
           disabled={ !isValid }