link token

theme/components/Button/Button.ts

@@ -70,15 +70,15 @@ const variantOutline = defineStyle((props) => {
     borderColor,
     bg: 'transparent',
     _hover: {
-      color: 'blue.400',
-      borderColor: 'blue.400',
+      color: 'link_hovered',
+      borderColor: 'link_hovered',
       bg: 'transparent',
       _active: {
         bg: props.isActive ? activeBg : 'transparent',
-        borderColor: props.isActive ? activeBg : 'blue.400',
-        color: props.isActive ? activeColor : 'blue.400',
+        borderColor: props.isActive ? activeBg : 'link_hovered',
+        color: props.isActive ? activeColor : 'link_hovered',
         p: {
-          color: 'blue.400',
+          color: 'link_hovered',
         },
       },
       _disabled: {
@@ -86,7 +86,7 @@ const variantOutline = defineStyle((props) => {
         borderColor,
       },
       p: {
-        color: 'blue.400',
+        color: 'link_hovered',
       },
     },
     _disabled: {
@@ -147,7 +147,7 @@ const variantSubtle = defineStyle((props) => {
       bg: mode('blackAlpha.200', 'whiteAlpha.200')(props),
       color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
       _hover: {
-        color: 'blue.400',
+        color: 'link_hovered',
         _disabled: {
           color: mode('blackAlpha.800', 'whiteAlpha.800')(props),
           bg: mode('blackAlpha.200', 'whiteAlpha.200')(props),
@@ -160,7 +160,7 @@ const variantSubtle = defineStyle((props) => {
     bg: `${ c }.100`,
     color: `${ c }.600`,
     _hover: {
-      color: 'blue.400',
+      color: 'link_hovered',
     },
   };
 });

theme/components/Link.ts

@@ -8,9 +8,9 @@ const baseStyle = defineStyle(getDefaultTransitionProps());
 
 const variantPrimary = defineStyle((props) => {
   return {
-    color: mode('blue.600', 'blue.300')(props),
+    color: 'link',
     _hover: {
-      color: mode('blue.400', 'blue.200')(props),
+      color: 'link_hovered',
       textDecorationStyle: props.textDecorationStyle || 'solid',
     },
   };

theme/components/Modal.ts

@@ -51,7 +51,7 @@ const baseStyleCloseButton = defineStyle((props) => {
     height: 10,
     width: 10,
     color: mode('gray.700', 'gray.500')(props),
-    _hover: { color: 'blue.400' },
+    _hover: { color: 'link_hovered' },
     _active: { bg: 'none' },
   };
 });

theme/components/Tabs.ts

@@ -22,7 +22,7 @@ const variantSoftRounded = definePartsStyle((props) => {
         },
       },
       _hover: {
-        color: 'blue.400',
+        color: 'link_hovered',
       },
     },
   };

theme/components/Text.ts

@@ -10,10 +10,6 @@ const variantSecondary = defineStyle((props) => ({
   color: mode('gray.500', 'gray.400')(props),
 }));
 
-const variantAlternate = defineStyle((props) => ({
-  color: mode('blue.600', 'blue.300')(props),
-}));
-
 const variantInherit = {
   color: 'inherit',
 };
@@ -21,7 +17,6 @@ const variantInherit = {
 const variants: Record<string, SystemStyleInterpolation> = {
   primary: variantPrimary,
   secondary: variantSecondary,
-  alternate: variantAlternate,
   inherit: variantInherit,
 };
 

theme/foundations/semanticTokens.ts

@@ -4,6 +4,13 @@ const semanticTokens = {
       'default': 'blackAlpha.200',
       _dark: 'whiteAlpha.200',
     },
+    link: {
+      'default': 'blue.600',
+      _dark: 'blue.300',
+    },
+    link_hovered: {
+      'default': 'blue.400',
+    },
   },
 };
 

ui/home/LatestBlocksItem.tsx

@@ -7,7 +7,6 @@ import {
   Icon,
   Link,
   Text,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import React from 'react';
@@ -43,7 +42,7 @@ const LatestBlocksItem = ({ block, h }: Props) => {
     >
       <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>
         <HStack spacing={ 2 }>
-          <Icon as={ blockIcon } boxSize="30px" color={ useColorModeValue('blue.600', 'blue.300') }/>
+          <Icon as={ blockIcon } boxSize="30px" color="link"/>
           <Link
             href={ link('block', { id: String(block.height) }) }
             fontSize="xl"

ui/home/LatestTxsItem.tsx

@@ -11,7 +11,6 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
-  useColorModeValue,
   useDisclosure,
 } from '@chakra-ui/react';
 import React from 'react';
@@ -37,8 +36,6 @@ type Props = {
 }
 
 const LatestBlocksItem = ({ tx }: Props) => {
-  const iconColor = useColorModeValue('blue.600', 'blue.300');
-
   const dataTo = tx.to ? tx.to : tx.created_contract;
   const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
 
@@ -91,7 +88,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
                 as={ transactionIcon }
                 boxSize="30px"
                 mr={ 2 }
-                color={ iconColor }
+                color="link"
               />
               <Address width="100%">
                 <AddressLink

ui/shared/AdditionalInfoButton.tsx

@@ -17,7 +17,6 @@ interface Props {
 const AdditionalInfoButton = ({ isOpen, onClick, className }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
   const infoBgColor = useColorModeValue('blue.50', 'gray.600');
-  const infoColor = useColorModeValue('blue.600', 'blue.300');
 
   return (
     <Button
@@ -36,8 +35,8 @@ const AdditionalInfoButton = ({ isOpen, onClick, className }: Props, ref: React.
       <Icon
         as={ infoIcon }
         boxSize={ 5 }
-        color={ infoColor }
-        _hover={{ color: 'blue.400' }}
+        color="link"
+        _hover={{ color: 'link_hovered' }}
       />
     </Button>
   );

ui/shared/TokenTransfer/TokenTransferListItem.tsx

-import { Text, Flex, Tag, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Text, Flex, Tag, Icon } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -43,8 +43,6 @@ const TokenTransferListItem = ({
     return BigNumber(total.value).div(BigNumber(10 ** Number(total.decimals))).dp(8).toFormat();
   })();
 
-  const iconColor = useColorModeValue('blue.600', 'blue.300');
-
   const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
 
   const addressWidth = `calc((100% - ${ baseAddress ? '50px' : '0px' }) / 2)`;
@@ -64,7 +62,7 @@ const TokenTransferListItem = ({
               as={ transactionIcon }
               boxSize="30px"
               mr={ 2 }
-              color={ iconColor }
+              color="link"
             />
             <Address width="100%">
               <AddressLink

ui/snippets/navigation/NavigationDesktop.tsx

@@ -93,7 +93,7 @@ const NavigationDesktop = () => {
         width={ 6 }
         height={ 6 }
         border="1px"
-        _hover={{ color: 'blue.400' }}
+        _hover={{ color: 'link_hovered' }}
         borderRadius="base"
         { ...chevronIconStyles }
         transform={{ lg: isExpanded ? 'rotate(0)' : 'rotate(180deg)', xl: isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }}

ui/snippets/navigation/useColors.ts

@@ -5,7 +5,7 @@ export default function useColors() {
     text: {
       'default': useColorModeValue('gray.600', 'gray.400'),
       active: useColorModeValue('blue.700', 'gray.50'),
-      hover: 'blue.400',
+      hover: 'link_hovered',
     },
     bg: {
       'default': 'transparent',

ui/snippets/networkMenu/NetworkMenuButton.tsx

@@ -37,7 +37,7 @@ const NetworkMenuButton = ({ isMobile, isActive, onClick, className }: Props, re
         height="36px"
         padding="10px"
         color={ isActive ? iconColorMobile : defaultIconColor }
-        _hover={{ color: isMobile ? undefined : 'blue.400' }}
+        _hover={{ color: isMobile ? undefined : 'link_hovered' }}
         cursor="pointer"
         { ...getDefaultTransitionProps({ transitionProperty: 'margin' }) }
       />

ui/snippets/networkMenu/useColors.ts

@@ -8,7 +8,7 @@ export default function useColors({ hasIcon }: {hasIcon: boolean}) {
     text: {
       'default': useColorModeValue('gray.600', 'gray.400'),
       active: useColorModeValue('blackAlpha.900', 'whiteAlpha.900'),
-      hover: useColorModeValue('blue.600', 'blue.400'),
+      hover: useColorModeValue('blue.600', 'link_hovered'),
     },
     icon: {
       'default': hasIcon ? iconDefaultColor : iconPlaceholderDefaultColor,

ui/txs/TxsListItem.tsx

@@ -8,7 +8,6 @@ import {
   ModalContent,
   ModalCloseButton,
   Text,
-  useColorModeValue,
   useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
@@ -43,7 +42,6 @@ const ARROW_WIDTH = 24;
 const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const iconColor = useColorModeValue('blue.600', 'blue.300');
   const dataTo = tx.to ? tx.to : tx.created_contract;
 
   const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
@@ -67,7 +65,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
               as={ transactionIcon }
               boxSize="30px"
               mr={ 2 }
-              color={ iconColor }
+              color="link"
             />
             <Address width="100%">
               <AddressLink