divider token

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/foundations/semanticTokens.ts

+const semanticTokens = {
+  colors: {
+    divider: {
+      'default': 'blackAlpha.200',
+      _dark: 'whiteAlpha.200',
+    },
+  },
+};
+
+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

@@ -36,7 +36,7 @@ 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' }}

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

@@ -37,7 +37,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;
@@ -50,10 +49,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 +62,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>

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/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

@@ -10,7 +10,6 @@ import {
   Radio,
   RadioGroup,
   Stack,
-  useColorModeValue,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -40,8 +39,6 @@ const TokenTransferFilter = ({
 }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
@@ -62,7 +59,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/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' }}

ui/snippets/navigation/useColors.ts

@@ -12,7 +12,7 @@ export default function useColors() {
       active: useColorModeValue('blue.50', 'gray.800'),
     },
     border: {
-      'default': useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
+      'default': 'divider',
       active: useColorModeValue('blue.50', 'gray.800'),
     },
   };

ui/snippets/networkMenu/useColors.ts

@@ -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

@@ -9,7 +9,6 @@ import {
   PopoverContent,
   PopoverBody,
   Text,
-  useColorModeValue,
   useDisclosure,
   Flex,
 } from '@chakra-ui/react';
@@ -72,8 +71,6 @@ const TxsFilters = ({ onFiltersChange, filters, appliedFiltersNum }: Props) => {
     onClose();
   }, [ onClose, onFiltersChange, typeFilter, methodFilter ]);
 
-  const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
@@ -86,13 +83,13 @@ const TxsFilters = ({ onFiltersChange, filters, appliedFiltersNum }: Props) => {
       <PopoverContent w={{ md: '100%', lg: '438px' }}>
         <PopoverBody px={ 4 } py={ 6 }>
           <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/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>