Merge pull request #537 from blockscout/semantic-tokens

semantic tokens: dividers and links

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/Table.ts

@@ -23,7 +23,7 @@ const variantSimple = definePartsStyle((props) => {
       ...transitionProps,
     },
     td: {
-      borderColor: mode('blackAlpha.200', 'whiteAlpha.200')(props),
+      borderColor: 'divider',
       ...transitionProps,
     },
   };

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

+const semanticTokens = {
+  colors: {
+    divider: {
+      'default': 'blackAlpha.200',
+      _dark: 'whiteAlpha.200',
+    },
+    link: {
+      'default': 'blue.600',
+      _dark: 'blue.300',
+    },
+    link_hovered: {
+      'default': 'blue.400',
+    },
+  },
+};
+
+export default semanticTokens;

theme/index.ts

@@ -5,6 +5,7 @@ import config from './config';
 import borders from './foundations/borders';
 import breakpoints from './foundations/breakpoints';
 import colors from './foundations/colors';
+import semanticTokens from './foundations/semanticTokens';
 import transition from './foundations/transition';
 import typography from './foundations/typography';
 import zIndices from './foundations/zIndices';
@@ -22,6 +23,7 @@ const overrides = {
   breakpoints,
   transition,
   zIndices,
+  semanticTokens,
 };
 
 export default extendTheme(overrides);

ui/address/internals/AddressIntTxsSkeletonMobile.tsx

-import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
+import { Skeleton, SkeletonCircle, Flex, Box } from '@chakra-ui/react';
 import React from 'react';
 
 const TxInternalsSkeletonMobile = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   return (
     <Box>
       { Array.from(Array(2)).map((item, index) => (
@@ -13,7 +11,7 @@ const TxInternalsSkeletonMobile = () => {
           flexDirection="column"
           paddingY={ 6 }
           borderTopWidth="1px"
-          borderColor={ borderColor }
+          borderColor="divider"
           _last={{
             borderBottomWidth: '1px',
           }}

ui/address/tokenSelect/TokenSelectItem.tsx

@@ -49,7 +49,7 @@ const TokenSelectItem = ({ data }: Props) => {
       display="flex"
       flexDir="column"
       rowGap={ 2 }
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderColor="divider"
       borderBottomWidth="1px"
       _hover={{
         bgColor: useColorModeValue('blue.50', 'gray.800'),

ui/block/BlockDetails.tsx

-import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import { Grid, GridItem, Text, Icon, Link, Box, Tooltip } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import capitalize from 'lodash/capitalize';
 import NextLink from 'next/link';
@@ -52,8 +52,6 @@ const BlockDetails = () => {
     router.push(url, undefined);
   }, [ router ]);
 
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   if (isLoading) {
     return <BlockDetailsSkeleton/>;
   }
@@ -76,7 +74,7 @@ const BlockDetails = () => {
       mt={{ base: 2, lg: 3 }}
       mb={{ base: 0, lg: 3 }}
       borderBottom="1px solid"
-      borderColor={ borderColor }
+      borderColor="divider"
     />
   );
   const { totalReward, staticReward, burntFees, txFees } = getBlockReward(data);

ui/block/details/BlockDetailsSkeleton.tsx

-import { Grid, GridItem, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
 const BlockDetailsSkeleton = () => {
 
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   const sectionGap = (
     <GridItem
       colSpan={{ base: undefined, lg: 2 }}
       mt={{ base: 2, lg: 3 }}
       mb={{ base: 0, lg: 3 }}
       borderBottom="1px solid"
-      borderColor={ borderColor }
+      borderColor="divider"
     />
   );
 

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';
@@ -36,14 +35,14 @@ const LatestBlocksItem = ({ block, h }: Props) => {
       transitionTimingFunction="linear"
       borderRadius="12px"
       border="1px solid"
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderColor="divider"
       p={ 6 }
       h={ `${ h }px` }
       minWidth={{ base: '100%', lg: '280px' }}
     >
       <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/LatestBlocksItemSkeleton.tsx

@@ -5,7 +5,6 @@ import {
   GridItem,
   HStack,
   Skeleton,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -15,7 +14,7 @@ const LatestBlocksItemSkeleton = () => {
       minWidth={{ base: '100%', lg: '280px' }}
       borderRadius="12px"
       border="1px solid"
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderColor="divider"
       p={ 6 }
     >
       <Flex justifyContent="space-between" alignItems="center" mb={ 3 }>

ui/home/LatestTxsItem.tsx

@@ -11,7 +11,6 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
-  useColorModeValue,
   useDisclosure,
 } from '@chakra-ui/react';
 import React from 'react';
@@ -37,9 +36,6 @@ type Props = {
 }
 
 const LatestBlocksItem = ({ tx }: Props) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-  const iconColor = useColorModeValue('blue.600', 'blue.300');
-
   const dataTo = tx.to ? tx.to : tx.created_contract;
   const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
 
@@ -50,10 +46,10 @@ const LatestBlocksItem = ({ tx }: Props) => {
     <Box
       width="100%"
       borderTop="1px solid"
-      borderColor={ borderColor }
+      borderColor="divider"
       py={ 4 }
       px={{ base: 0, lg: 4 }}
-      _last={{ borderBottom: '1px solid', borderColor }}
+      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
     >
       <Flex justifyContent="space-between" width="100%" alignItems="start" flexDirection={{ base: 'column', lg: 'row' }}>
         { !isMobile && (
@@ -63,7 +59,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
                 <PopoverTrigger>
                   <AdditionalInfoButton isOpen={ isOpen } mr={ 3 }/>
                 </PopoverTrigger>
-                <PopoverContent border="1px solid" borderColor={ borderColor }>
+                <PopoverContent border="1px solid" borderColor="divider">
                   <PopoverBody>
                     <TxAdditionalInfo tx={ tx }/>
                   </PopoverBody>
@@ -92,7 +88,7 @@ const LatestBlocksItem = ({ tx }: Props) => {
                 as={ transactionIcon }
                 boxSize="30px"
                 mr={ 2 }
-                color={ iconColor }
+                color="link"
               />
               <Address width="100%">
                 <AddressLink

ui/home/LatestTxsItemSkeleton.tsx

@@ -4,21 +4,18 @@ import {
   HStack,
   Skeleton,
   SkeletonCircle,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import React from 'react';
 
 const LatestTxsItemSkeleton = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   return (
     <Box
       width="100%"
       borderTop="1px solid"
-      borderColor={ borderColor }
+      borderColor="divider"
       py={ 4 }
       px={{ base: 0, lg: 4 }}
-      _last={{ borderBottom: '1px solid', borderColor }}
+      _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
     >
       <Flex justifyContent="space-between" width="100%" alignItems="start" flexDirection={{ base: 'column', lg: 'row' }}>
         <Box width="100%">

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/ListItemMobile.tsx

-import { Flex, useColorModeValue, chakra } from '@chakra-ui/react';
+import { Flex, chakra } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import React from 'react';
 
@@ -20,7 +20,7 @@ const ListItemMobile = ({ children, className, isAnimated }: Props) => {
       alignItems="flex-start"
       flexDirection="column"
       paddingY={ 6 }
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderColor="divider"
       borderTopWidth="1px"
       _last={{
         borderBottomWidth: '1px',

ui/shared/TokenTransfer/TokenTransferFilter.tsx

@@ -3,7 +3,6 @@ import {
   Radio,
   RadioGroup,
   Stack,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -30,7 +29,6 @@ const TokenTransferFilter = ({
   onAddressFilterChange,
   defaultAddressFilter,
 }: Props) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
     <PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: '200px' }}>
@@ -43,7 +41,7 @@ const TokenTransferFilter = ({
             defaultValue={ defaultAddressFilter || 'all' }
             paddingBottom={ 4 }
             borderBottom="1px solid"
-            borderColor={ borderColor }
+            borderColor="divider"
           >
             <Stack spacing={ 4 }>
               <Radio value="all"><Text fontSize="md">All</Text></Radio>

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/shared/chart/ChartGridLine.tsx

-import { useColorModeValue, useToken } from '@chakra-ui/react';
+import { useToken } from '@chakra-ui/react';
 import * as d3 from 'd3';
 import React from 'react';
 
@@ -13,8 +13,7 @@ interface Props extends Omit<React.SVGProps<SVGGElement>, 'scale'> {
 const ChartGridLine = ({ type, scale, ticks, size, disableAnimation, ...props }: Props) => {
   const ref = React.useRef<SVGGElement>(null);
 
-  const strokeColorToken = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-  const strokeColor = useToken('colors', strokeColorToken);
+  const strokeColor = useToken('colors', 'divider');
 
   React.useEffect(() => {
     if (!ref.current) {

ui/shared/skeletons/SkeletonList.tsx

-import { Box, Flex, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, SkeletonCircle } from '@chakra-ui/react';
 import React from 'react';
 
 const SkeletonList = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   return (
     <Box>
       { Array.from(Array(2)).map((item, index) => (
@@ -13,7 +11,7 @@ const SkeletonList = () => {
           flexDirection="column"
           paddingY={ 6 }
           borderTopWidth="1px"
-          borderColor={ borderColor }
+          borderColor="divider"
           _last={{
             borderBottomWidth: '0px',
           }}

ui/shared/skeletons/SkeletonListAccount.tsx

-import { Box, Flex, Skeleton, SkeletonCircle, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Skeleton, SkeletonCircle } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
@@ -6,8 +6,6 @@ interface Props {
 }
 
 const SkeletonListAccount = ({ showFooterSlot }: Props) => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   return (
     <Box>
       { Array.from(Array(2)).map((item, index) => (
@@ -17,7 +15,7 @@ const SkeletonListAccount = ({ showFooterSlot }: Props) => {
           flexDirection="column"
           paddingY={ 6 }
           borderTopWidth="1px"
-          borderColor={ borderColor }
+          borderColor="divider"
           _last={{
             borderBottomWidth: '0px',
           }}

ui/snippets/navigation/NavFooter.tsx

-import { Box, VStack, Text, Stack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
+import { Box, VStack, Text, Stack, Icon, Link } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
@@ -37,7 +37,7 @@ const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
       as="footer"
       spacing={ 8 }
       borderTop="1px solid"
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderColor="divider"
       width={{ base: '100%', lg: isExpanded ? '180px' : '20px', xl: isCollapsed ? '20px' : '180px' }}
       paddingTop={{ base: 6, lg: 8 }}
       marginTop={ marginTop }

ui/snippets/navigation/NavigationDesktop.tsx

@@ -38,11 +38,10 @@ const NavigationDesktop = () => {
     cookies.set(cookies.NAMES.NAV_BAR_COLLAPSED, isCollapsed ? 'false' : 'true');
   }, [ isCollapsed ]);
 
-  const containerBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const chevronIconStyles = {
     bgColor: useColorModeValue('white', 'black'),
     color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
-    borderColor: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+    borderColor: 'divider',
   };
 
   const isExpanded = isCollapsed === false;
@@ -54,7 +53,7 @@ const NavigationDesktop = () => {
       flexDirection="column"
       alignItems="flex-start"
       borderRight="1px solid"
-      borderColor={ containerBorderColor }
+      borderColor="divider"
       px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }}
       py={ 12 }
       width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
@@ -94,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,14 +5,14 @@ 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',
       active: useColorModeValue('blue.50', 'gray.800'),
     },
     border: {
-      'default': useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+      'default': 'divider',
       active: useColorModeValue('blue.50', 'gray.800'),
     },
   };

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,
@@ -19,7 +19,7 @@ export default function useColors({ hasIcon }: {hasIcon: boolean}) {
       active: useColorModeValue('blue.50', 'gray.800'),
     },
     border: {
-      'default': useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+      'default': 'divider',
       active: useColorModeValue('blue.50', 'gray.800'),
     },
   };

ui/snippets/profileMenu/ProfileMenuContent.tsx

@@ -12,7 +12,6 @@ type Props = UserInfo;
 
 const ProfileMenuContent = ({ name, nickname, email }: Props) => {
   const { accountNavItems, profileItem } = useNavItems();
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
 
   return (
@@ -35,12 +34,12 @@ const ProfileMenuContent = ({ name, nickname, email }: Props) => {
         { email }
       </Text>
       <NavLink { ...profileItem } isActive={ undefined } px="0px" isCollapsed={ false }/>
-      <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor={ borderColor } borderTopWidth="1px" { ...getDefaultTransitionProps() }>
+      <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
         <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
           { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ undefined } isCollapsed={ false } px="0px"/>) }
         </VStack>
       </Box>
-      <Box mt={ 2 } pt={ 3 } borderTopColor={ borderColor } borderTopWidth="1px" { ...getDefaultTransitionProps() }>
+      <Box mt={ 2 } pt={ 3 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
         <Button size="sm" width="full" variant="outline" as="a" href={ appConfig.logoutUrl }>Sign Out</Button>
       </Box>
     </Box>

ui/snippets/searchBar/SearchBarSuggest.tsx

-import { Text, useColorModeValue } from '@chakra-ui/react';
+import { Text } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
@@ -40,11 +40,10 @@ const SearchBarSuggest = ({ query, searchTerm }: Props) => {
       </>
     );
   })();
-  const dividerColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
     <>
-      { !isMobile && <TextAd pb={ 4 } mb={ 5 } borderColor={ dividerColor } borderBottomWidth="1px"/> }
+      { !isMobile && <TextAd pb={ 4 } mb={ 5 } borderColor="divider" borderBottomWidth="1px"/> }
       { content }
     </>
   );

ui/snippets/searchBar/SearchBarSuggestItem.tsx

@@ -148,7 +148,7 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm }: Props) => {
       display="flex"
       flexDir="column"
       rowGap={ 2 }
-      borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
+      borderColor="divider"
       borderBottomWidth="1px"
       _last={{
         borderBottomWidth: '0',

ui/tx/TxDetails.tsx

@@ -10,7 +10,6 @@ import {
   Flex,
   Tooltip,
   chakra,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
@@ -51,8 +50,6 @@ const TxDetails = () => {
 
   const isMobile = useIsMobile();
 
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   const [ isExpanded, setIsExpanded ] = React.useState(false);
 
   const handleCutClick = React.useCallback(() => {
@@ -188,7 +185,7 @@ const TxDetails = () => {
         mt={{ base: 2, lg: 3 }}
         mb={{ base: 0, lg: 3 }}
         borderBottom="1px solid"
-        borderColor={ borderColor }
+        borderColor="divider"
       />
       <DetailsInfoItem
         title="From"
@@ -245,7 +242,7 @@ const TxDetails = () => {
         mt={{ base: 2, lg: 3 }}
         mb={{ base: 0, lg: 3 }}
         borderBottom="1px solid"
-        borderColor={ borderColor }
+        borderColor="divider"
       />
       <DetailsInfoItem
         title="Value"

ui/tx/details/TxDetailsSkeleton.tsx

-import { Grid, GridItem, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Grid, GridItem, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
 const TxDetailsSkeleton = () => {
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   const sectionGap = (
     <GridItem
       colSpan={{ base: undefined, lg: 2 }}
       mt={{ base: 2, lg: 3 }}
       mb={{ base: 0, lg: 3 }}
       borderBottom="1px solid"
-      borderColor={ borderColor }
+      borderColor="divider"
     />
   );
 

ui/txs/TxAdditionalInfo.tsx

-import { Box, Heading, Text, Flex, Link, useColorModeValue } from '@chakra-ui/react';
+import { Box, Heading, Text, Flex, Link } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -12,10 +12,9 @@ import TextSeparator from 'ui/shared/TextSeparator';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
-  const sectionBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const sectionProps = {
     borderBottom: '1px solid',
-    borderColor: sectionBorderColor,
+    borderColor: 'divider',
     paddingBottom: 4,
   };
 

ui/txs/TxsFilters.tsx

@@ -3,7 +3,6 @@ import {
   CheckboxGroup,
   Grid,
   Text,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
@@ -46,18 +45,16 @@ const TxsFilters = ({ filters, appliedFiltersNum }: Props) => {
     setMethodFilter(val);
   }, []);
 
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   return (
     <PopoverFilter contentProps={{ w: { md: '100%', lg: '438px' } }} appliedFiltersNum={ appliedFiltersNum }>
       <Text variant="secondary" fontWeight="600" fontSize="sm">Type</Text>
-      <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor={ borderColor }>
+      <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor="divider">
         <CheckboxGroup size="lg" onChange={ onTypeFilterChange } defaultValue={ typeFilter }>
           { TYPE_OPTIONS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
         </CheckboxGroup>
       </Grid>
       <Text variant="secondary" fontWeight="600" fontSize="sm">Method</Text>
-      <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor={ borderColor }>
+      <Grid gridTemplateColumns="1fr 1fr" rowGap={ 5 } mt={ 4 } mb={ 4 } pb={ 6 } borderBottom="1px solid" borderColor="divider">
         <CheckboxGroup size="lg" onChange={ onMethodFilterChange } defaultValue={ methodFilter }>
           { METHOD_OPTIONS.map(({ title, id }) => <Checkbox key={ id } value={ id }><Text fontSize="md">{ title }</Text></Checkbox>) }
         </CheckboxGroup>

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

ui/txs/TxsTableItem.tsx

@@ -11,7 +11,6 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
-  useColorModeValue,
   Show,
   Hide,
 } from '@chakra-ui/react';
@@ -64,7 +63,6 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
     </Address>
   );
 
-  const infoBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   return (
     <Tr
       as={ motion.tr }
@@ -81,7 +79,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
               <PopoverTrigger>
                 <AdditionalInfoButton isOpen={ isOpen }/>
               </PopoverTrigger>
-              <PopoverContent border="1px solid" borderColor={ infoBorderColor }>
+              <PopoverContent border="1px solid" borderColor="divider">
                 <PopoverBody>
                   <TxAdditionalInfo tx={ tx }/>
                 </PopoverBody>