button theming

theme/components/Button.ts

 import type { ComponentStyleConfig } from '@chakra-ui/theme';
+import { mode } from '@chakra-ui/theme-tools';
+import type { SystemStyleFunction } from '@chakra-ui/theme-tools';
 
-const Button: ComponentStyleConfig = {
-  baseStyle: {
-    fontWeight: 'normal',
-  },
-  variants: {
-    primary: {
+const variantPrimary = {
   bg: 'blue.600',
   color: 'white',
   fontWeight: 600,
@@ -18,8 +15,9 @@ const Button: ComponentStyleConfig = {
   _disabled: {
     opacity: 0.2,
   },
-    },
-    secondary: {
+}
+
+const variantSecondary = {
   bg: 'white',
   color: 'blue.600',
   fontWeight: 600,
@@ -32,14 +30,28 @@ const Button: ComponentStyleConfig = {
   _disabled: {
     opacity: 0.2,
   },
-    },
-    iconBlue: {
-      color: 'blue.600',
+}
+
+const variantIconBlue: SystemStyleFunction = (props) => {
+  return {
+    color: mode('blue.600', 'blue.300')(props),
     _hover: {
-        color: 'blue.400',
-      },
+      color: mode('blue.400', 'blue.200')(props),
     },
+  }
+}
+
+const variants = {
+  primary: variantPrimary,
+  secondary: variantSecondary,
+  iconBlue: variantIconBlue,
+}
+
+const Button: ComponentStyleConfig = {
+  baseStyle: {
+    fontWeight: 'normal',
   },
+  variants,
   sizes: {
     lg: {
       h: 12,

ui/shared/AddressLinkWithTooltip.tsx

@@ -10,12 +10,9 @@ const AddressLinkWithTooltip = ({ address }: {address: string}) => {
     <HStack spacing={ 2 } alignContent="center" overflow="hidden">
       <Link
         href="#"
-        color="blue.500"
         overflow="hidden"
         fontWeight={ 600 }
         lineHeight="24px"
-        // need theme
-        _hover={{ color: 'blue.400' }}
       >
         <Tooltip label={ address }>
           <Box overflow="hidden"><AddressWithDots address={ address }/></Box>