remove old semantic tokens

pages/_app.tsx

@@ -48,9 +48,9 @@ const ERROR_SCREEN_STYLES: HTMLChakraProps<'div'> = {
 };
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
-  // TODO @tom2drum currently there is hydration mismatch between server and client
-  // because we use useColorMode hook in the layout component
-  // not sure how to fix it though
+  // to avoid hydration mismatch between server and client
+  // we have to render the app only on client (when it is mounted)
+  // https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
   const [ mounted, setMounted ] = React.useState(false);
 
   React.useEffect(() => {

toolkit/theme/foundations/breakpoints.ts

-// TODO @tom2drum convert this to rem
 const breakpoints = {
-  // maybe we need them in future
   sm: '415px',
-  //   md: '768px',
   lg: '1000px',
   xl: '1440px',
   '2xl': '1920px',

toolkit/theme/foundations/semanticTokens.ts

@@ -6,7 +6,6 @@ const heroBannerButton = config.UI.homepage.heroBanner?.button;
 
 const semanticTokens: ThemingConfig['semanticTokens'] = {
   colors: {
-    // NEW TOKENS
     button: {
       outline: {
         fg: {
@@ -108,7 +107,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         hover: { value: { _light: '{colors.blue.400}' } },
       },
       secondary: {
-        DEFAULT: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
+        DEFAULT: { value: { _light: '{colors.gray.500}', _dark: '{colors.gray.400}' } },
       },
       underlaid: {
         bg: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.800}' } },
@@ -420,7 +419,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
     icon: {
       // TODO @tom2drum revise this colors
       backTo: { value: '{colors.gray.400}' },
-      externalLink: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.400}' } },
+      externalLink: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
       content: { value: { _light: '{colors.gray.500}', _dark: '{colors.gray.300}' } },
       info: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
     },
@@ -442,39 +441,6 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         thumb: { value: { _light: '{colors.blackAlpha.300}', _dark: '{colors.whiteAlpha.300}' } },
       },
     },
-
-    // OLD TOKENS
-    // text: {
-    //   DEFAULT: { value: '{colors.blackAlpha.800}' },
-    //   _dark: { value: '{colors.whiteAlpha.800}' },
-    // },
-    text_secondary: {
-      DEFAULT: { value: '{colors.gray.500}' },
-      _dark: { value: '{colors.gray.400}' },
-    },
-    // link: {
-    //   DEFAULT: { value: '{colors.blue.600}' },
-    //   _dark: { value: '{colors.blue.300}' },
-    // },
-    link_hovered: {
-      DEFAULT: { value: '{colors.blue.400}' },
-    },
-    icon_link_external: {
-      DEFAULT: { value: '{colors.gray.300}' },
-      _dark: { value: '{colors.gray.500}' },
-    },
-    icon_info: {
-      DEFAULT: { value: '{colors.gray.400}' },
-      _dark: { value: '{colors.gray.500}' },
-    },
-    // error: {
-    //   DEFAULT: { value: '{colors.red.500}' },
-    //   _dark: { value: '{colors.red.500}' },
-    // },
-    // dialog_bg: {
-    //   DEFAULT: { value: '{colors.white}' },
-    //   _dark: { value: '{colors.gray.900}' },
-    // },
   },
   shadows: {
     popover: {

toolkit/theme/globalCss.ts

@@ -10,6 +10,7 @@ const globalCss: SystemConfig['globalCss'] = {
     color: 'global.body.fg',
     WebkitTapHighlightColor: 'transparent',
     fontVariantLigatures: 'no-contextual',
+    focusRingStyle: 'hidden',
   },
   mark: {
     bg: 'global.mark.bg',

ui/address/accountHistory/AddressAccountHistoryListItem.tsx

@@ -43,7 +43,7 @@ const AddressAccountHistoryListItem = (props: Props) => {
           </Flex>
           <TimeAgoWithTooltip
             timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
-            color="text_secondary"
+            color="text.secondary"
             borderRadius="sm"
             fontWeight={ 500 }
           />

ui/address/accountHistory/AddressAccountHistoryTableItem.tsx

@@ -30,7 +30,7 @@ const AddressAccountHistoryTableItem = (props: Props) => {
         <TimeAgoWithTooltip
           timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
           isLoading={ props.isPlaceholderData }
-          color="text_secondary"
+          color="text.secondary"
           borderRadius="sm"
           flexShrink={ 0 }
         />

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -63,7 +63,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
           timestamp={ props.block_timestamp }
           enableIncrement={ props.page === 1 }
           isLoading={ props.isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </Flex>
     </ListItemMobile>

ui/address/contract/ContractCodeIdes.tsx

@@ -65,7 +65,7 @@ const ContractCodeIde = ({ className, hash, isLoading }: Props) => {
       </PopoverTrigger>
       <PopoverContent w="240px">
         <PopoverBody >
-          <chakra.span color="text_secondary" fontSize="xs">Redactors</chakra.span>
+          <chakra.span color="text.secondary" fontSize="xs">Redactors</chakra.span>
           <Flex
             flexDir="column"
             alignItems="flex-start"

ui/address/contract/methods/ContractAbiItem.tsx

@@ -70,7 +70,7 @@ const ContractAbiItem = ({ data, index, id, addressHash, sourceAddress, tab, onS
           alignItems="center"
           columnGap={ 2 }
         >
-          <CopyToClipboard text={ url } type="link" ml={ 0 } color="text_secondary" as="div"/>
+          <CopyToClipboard text={ url } type="link" ml={ 0 } color="text.secondary" as="div"/>
           <Box fontWeight={ 500 } display="flex" alignItems="center">
             { index + 1 }. { data.type === 'fallback' || data.type === 'receive' ? data.type : data.name }
             { data.type === 'fallback' && (

ui/address/epochRewards/AddressEpochRewardsListItem.tsx

@@ -42,7 +42,7 @@ const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.block_timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           display="inline-block"
         />
       </ListItemMobileGrid.Value>

ui/address/epochRewards/AddressEpochRewardsTableItem.tsx

@@ -25,7 +25,7 @@ const AddressEpochRewardsTableItem = ({ item, isLoading }: Props) => {
         <Flex alignItems="center" gap={ 3 }>
           <BlockEntity number={ item.block_number } isLoading={ isLoading } noIcon fontWeight={ 600 }/>
           <Skeleton loading={ isLoading }>
-            <Text color="text_secondary" fontWeight={ 600 }>{ `Epoch # ${ item.epoch_number }` }</Text>
+            <Text color="text.secondary" fontWeight={ 600 }>{ `Epoch # ${ item.epoch_number }` }</Text>
           </Skeleton>
           <TimeAgoWithTooltip timestamp={ item.block_timestamp } isLoading={ isLoading } color="text.secondary" fontWeight={ 400 }/>
         </Flex>

ui/address/mud/AddressMudBreadcrumbs.tsx

@@ -53,7 +53,7 @@ const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps)
         >
           { text }
         </Box>
-        <CopyToClipboard text={ currentUrl } type="link" mx={ 0 } color="text_secondary"/>
+        <CopyToClipboard text={ currentUrl } type="link" mx={ 0 } color="text.secondary"/>
       </Grid>
     );
   }
@@ -91,7 +91,7 @@ const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
       width="fit-content"
       fontSize="sm"
     >
-      <IconSvg name="MUD" boxSize={ 5 } color={ addressQuery.data?.is_verified ? 'green.500' : 'text_secondary' }/>
+      <IconSvg name="MUD" boxSize={ 5 } color={ addressQuery.data?.is_verified ? 'green.500' : 'text.secondary' }/>
       <BreadcrumbItem
         text="MUD World"
         href={ route({ pathname: '/address/[hash]', query: queryParams }) }

ui/address/mud/AddressMudRecord.tsx

@@ -64,7 +64,7 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
               <TableCell colSpan={ 2 } fontSize="sm">
                 <Flex justifyContent="space-between">
                   <TruncatedValue value={ getValueString(data.record.decoded[keyName]) } mr={ 2 }/>
-                  { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
+                  { index === 0 && <Box color="text.secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
                 </Flex>
               </TableCell>
             </TableRow>
@@ -81,7 +81,7 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
                 { keyName } ({ data.schema.key_types[index] })
               </Text>
               <Text wordBreak="break-word">{ getValueString(data.record.decoded[keyName]) }</Text>
-              { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
+              { index === 0 && <Box color="text.secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
             </VStack>
           )) }
           <TableRoot borderRadius="8px" style={{ tableLayout: 'auto' }} width="100%" mt={ 2 } overflow="hidden">

ui/address/tokens/ERC20TokensListItem.tsx

@@ -42,21 +42,21 @@ const ERC20TokensListItem = ({ token, value, isLoading }: Props) => {
       { token.exchange_rate !== undefined && token.exchange_rate !== null && (
         <HStack gap={ 3 }>
           <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Price</Skeleton>
-          <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary">
+          <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary">
             <span>{ `$${ Number(token.exchange_rate).toLocaleString() }` }</span>
           </Skeleton>
         </HStack>
       ) }
       <HStack gap={ 3 } alignItems="baseline">
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Quantity</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" whiteSpace="pre-wrap" wordBreak="break-word">
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" whiteSpace="pre-wrap" wordBreak="break-word">
           <span>{ tokenQuantity }</span>
         </Skeleton>
       </HStack>
       { tokenValue !== undefined && (
         <HStack gap={ 3 } alignItems="baseline">
           <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Value</Skeleton>
-          <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" whiteSpace="pre-wrap" wordBreak="break-word">
+          <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" whiteSpace="pre-wrap" wordBreak="break-word">
             <span>${ tokenValue }</span>
           </Skeleton>
         </HStack>

ui/address/tokens/TokenBalances.tsx

@@ -53,7 +53,7 @@ const TokenBalances = () => {
         name="Net Worth"
         value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) }` : 'N/A' }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
-        icon={ <IconSvg name="wallet" boxSize="20px" flexShrink={ 0 } color="text_secondary"/> }
+        icon={ <IconSvg name="wallet" boxSize="20px" flexShrink={ 0 } color="text.secondary"/> }
       />
       <TokenBalancesItem
         name={ `${ currencyUnits.ether } Balance` }
@@ -67,7 +67,7 @@ const TokenBalances = () => {
         value={ tokensNumText }
         valueSecondary={ `${ prefix }$${ tokensInfo.usd.toFormat(2) }` }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
-        icon={ <IconSvg name="tokens" boxSize="20px" flexShrink={ 0 } color="text_secondary"/> }
+        icon={ <IconSvg name="tokens" boxSize="20px" flexShrink={ 0 } color="text.secondary"/> }
       />
     </Flex>
   );

ui/addresses/AddressesListItem.tsx

@@ -38,7 +38,7 @@ const AddressesListItem = ({
           mr={ 2 }
           truncation="constant"
         />
-        <Skeleton loading={ isLoading } fontSize="sm" ml="auto" minW={ 6 } color="text_secondary">
+        <Skeleton loading={ isLoading } fontSize="sm" ml="auto" minW={ 6 } color="text.secondary">
           <span>{ index }</span>
         </Skeleton>
       </Flex>
@@ -47,21 +47,21 @@ const AddressesListItem = ({
       )) }
       <HStack gap={ 3 } maxW="100%" alignItems="flex-start">
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" minW="0" whiteSpace="pre-wrap">
           <span>{ addressBalance.dp(8).toFormat() }</span>
         </Skeleton>
       </HStack>
       { !totalSupply.eq(ZERO) && (
         <HStack gap={ 3 }>
           <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Percentage</Skeleton>
-          <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary">
+          <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary">
             <span>{ addressBalance.div(BigNumber(totalSupply)).multipliedBy(100).dp(8).toFormat() + '%' }</span>
           </Skeleton>
         </HStack>
       ) }
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Txn count</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary">
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary">
           <span>{ Number(item.transaction_count).toLocaleString() }</span>
         </Skeleton>
       </HStack>

ui/addressesLabelSearch/AddressesLabelSearchListItem.tsx

@@ -32,13 +32,13 @@ const AddressesLabelSearchListItem = ({
       />
       <HStack gap={ 3 } maxW="100%" alignItems="flex-start">
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" minW="0" whiteSpace="pre-wrap">
           <span>{ addressBalance.dp(8).toFormat() }</span>
         </Skeleton>
       </HStack>
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Txn count</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary">
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary">
           <span>{ Number(item.transaction_count).toLocaleString() }</span>
         </Skeleton>
       </HStack>

ui/advancedFilter/ItemByColumn.tsx

@@ -36,7 +36,7 @@ const ItemByColumn = ({ item, column, isLoading }: Props) => {
     case 'method':
       return item.method ? <Badge loading={ isLoading } truncated>{ item.method }</Badge> : null;
     case 'age':
-      return <TimeAgoWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text_secondary" fontWeight={ 400 }/>;
+      return <TimeAgoWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text.secondary" fontWeight={ 400 }/>;
     case 'from':
       return (
         <Flex w="100%">

ui/advancedFilter/filters/AssetFilter.tsx

@@ -122,7 +122,7 @@ const AssetFilter = ({ value = [], handleFilterChange }: Props) => {
       { tokensQuery.isLoading && <Spinner display="block" mt={ 3 }/> }
       { tokensQuery.data && !searchTerm && (
         <>
-          <Text color="text_secondary" fontWeight="600" mt={ 3 }>Popular</Text>
+          <Text color="text.secondary" fontWeight="600" mt={ 3 }>Popular</Text>
           <Flex rowGap={ 3 } flexWrap="wrap" gap={ 3 } mb={ 2 }>
             { [ NATIVE_TOKEN, ...tokensQuery.data.items ].map(token => (
               <Tag

ui/block/details/BlockDetailsBaseFeeCelo.tsx

@@ -24,7 +24,7 @@ const BreakDownItem = ({ amount, percentage, address, addressFrom, token }: Item
 
   return (
     <Flex alignItems="center" columnGap={ 2 } rowGap={ 1 } flexWrap="wrap">
-      <Box color="text_secondary">{ percentage }% of amount</Box>
+      <Box color="text.secondary">{ percentage }% of amount</Box>
       <Flex columnGap={ 2 }>
         { BigNumber(amount).dividedBy(WEI).toFixed() }
         <TokenEntity token={ token } noCopy onlySymbol/>
@@ -33,7 +33,7 @@ const BreakDownItem = ({ amount, percentage, address, addressFrom, token }: Item
         <>
           <AddressEntity address={ addressFrom } truncation="constant"/>
           <IconSvg name="flame" boxSize={ 5 } color="gray.500"/>
-          <Box color="text_secondary">burnt</Box>
+          <Box color="text.secondary">burnt</Box>
         </>
       ) : <AddressFromTo from={ addressFrom } to={ address }/> }
     </Flex>

ui/block/epochRewards/BlockEpochElectionRewardDetailsMobile.tsx

@@ -59,12 +59,12 @@ const BlockEpochElectionRewardDetailsMobile = ({ type, token }: Props) => {
             <Flex key={ index } flexDir="column" alignItems="flex-start" rowGap={ 1 } fontWeight={ 400 }>
               <AddressEntity address={ item.account } noIcon w="100%"/>
               <Flex columnGap={ 1 } alignItems="center">
-                <Box flexShrink={ 0 } color="text_secondary">got</Box>
+                <Box flexShrink={ 0 } color="text.secondary">got</Box>
                 <Box>{ amount.valueStr }</Box>
                 <TokenEntity token={ token } noIcon onlySymbol w="auto"/>
               </Flex>
               <Flex columnGap={ 1 } alignItems="center" w="100%">
-                <Box flexShrink={ 0 } color="text_secondary">on behalf of</Box>
+                <Box flexShrink={ 0 } color="text.secondary">on behalf of</Box>
                 <AddressEntity address={ item.associated_account } noIcon/>
               </Flex>
             </Flex>

ui/blockCountdown/BlockCountdownTimerItem.tsx

@@ -24,7 +24,7 @@ const BlockCountdownTimerItem = ({ label, value }: Props) => {
         fontWeight={ 600 }
         w="100%"
       />
-      <Box fontSize="sm" lineHeight="20px" mt={ 1 } color="text_secondary">{ label }</Box>
+      <Box fontSize="sm" lineHeight="20px" mt={ 1 } color="text.secondary">{ label }</Box>
     </Box>
   );
 };

ui/blocks/BlocksListItem.tsx

@@ -61,14 +61,14 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
           timestamp={ data.timestamp }
           enableIncrement={ enableTimeIncrement }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           fontWeight={ 400 }
           display="inline-block"
         />
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Size</Text>
-        <Skeleton loading={ isLoading } display="inline-block" color="text_secondary">
+        <Skeleton loading={ isLoading } display="inline-block" color="text.secondary">
           <span>{ data.size.toLocaleString() } bytes</span>
         </Skeleton>
       </Flex>
@@ -97,7 +97,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
       <Box>
         <Text fontWeight={ 500 }>Gas used</Text>
         <Flex mt={ 2 }>
-          <Skeleton loading={ isLoading } display="inline-block" color="text_secondary" mr={ 4 }>
+          <Skeleton loading={ isLoading } display="inline-block" color="text.secondary" mr={ 4 }>
             <span>{ BigNumber(data.gas_used || 0).toFormat() }</span>
           </Skeleton>
           <BlockGasUsed
@@ -111,7 +111,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
       { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && (
         <Flex columnGap={ 2 }>
           <Text fontWeight={ 500 }>Reward { currencyUnits.ether }</Text>
-          <Skeleton loading={ isLoading } display="inline-block" color="text_secondary">
+          <Skeleton loading={ isLoading } display="inline-block" color="text.secondary">
             <span>{ totalReward.toFixed() }</span>
           </Skeleton>
         </Flex>
@@ -122,7 +122,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
           <Flex columnGap={ 4 } mt={ 2 }>
             <Flex>
               <IconSvg name="flame" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
-              <Skeleton loading={ isLoading } display="inline-block" color="text_secondary" ml={ 2 }>
+              <Skeleton loading={ isLoading } display="inline-block" color="text.secondary" ml={ 2 }>
                 <span>{ burntFees.div(WEI).toFixed() }</span>
               </Skeleton>
             </Flex>
@@ -133,7 +133,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
       { !isRollup && !config.UI.views.block.hiddenFields?.base_fee && baseFeeValue && (
         <Flex columnGap={ 2 }>
           <Text fontWeight={ 500 }>Base fee</Text>
-          <Skeleton loading={ isLoading } display="inline-block" color="text_secondary">
+          <Skeleton loading={ isLoading } display="inline-block" color="text.secondary">
             <span>{ baseFeeValue }</span>
           </Skeleton>
         </Flex>

ui/blocks/BlocksTableItem.tsx

@@ -62,7 +62,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation }: Pr
           timestamp={ data.timestamp }
           enableIncrement={ enableTimeIncrement }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           fontWeight={ 400 }
           display="inline-block"
         />

ui/contractVerification/ContractVerificationFormRow.tsx

@@ -17,7 +17,7 @@ const ContractVerificationFormRow = ({ children, className }: Props) => {
   return (
     <>
       <GridItem className={ className } _notFirst={{ mt: { base: 3, lg: 0 } }}>{ firstChildren }</GridItem>
-      { isMobile && !secondChildren ? null : <GridItem fontSize="sm" className={ className } color="text_secondary">{ secondChildren }</GridItem> }
+      { isMobile && !secondChildren ? null : <GridItem fontSize="sm" className={ className } color="text.secondary">{ secondChildren }</GridItem> }
     </>
   );
 };

ui/contractVerification/fields/ContractVerificationFieldCommit.tsx

@@ -106,7 +106,7 @@ const ContractVerificationFieldCommit = ({ latestCommitHash }: Props) => {
       { latestCommitHash ? (
         <div>
           <span >We have found the latest commit hash for the repository: </span>
-          <Code color="text_secondary">{ latestCommitHash.slice(0, 7) }</Code>
+          <Code color="text.secondary">{ latestCommitHash.slice(0, 7) }</Code>
           <span>. If you want to use it, </span>
           <Link onClick={ handleUseLatestCommitClick }>click here</Link>
           <span>.</span>

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

@@ -90,9 +90,9 @@ const ContractVerificationFieldCompiler = ({ isVyper, isStylus }: Props) => {
       { isVyper || isStylus ? null : (
         <chakra.div mt={{ base: 0, lg: 8 }}>
           <span >The compiler version is specified in </span>
-          <Code color="text_secondary">pragma solidity X.X.X</Code>
+          <Code color="text.secondary">pragma solidity X.X.X</Code>
           <span>. Use the compiler version rather than the nightly build. If using the Solidity compiler, run </span>
-          <Code color="text_secondary">solc —version</Code>
+          <Code color="text.secondary">solc —version</Code>
           <span> to check.</span>
         </chakra.div>
       ) }

ui/contractVerification/fields/ContractVerificationFieldName.tsx

@@ -23,7 +23,7 @@ const ContractVerificationFieldName = ({ hint }: Props) => {
       { hint ? <span>{ hint }</span> : (
         <>
           <span>Must match the name specified in the code. For example, in </span>
-          <Code color="text_secondary">{ `contract MyContract {..}` }</Code>
+          <Code color="text.secondary">{ `contract MyContract {..}` }</Code>
           <span>. <chakra.span fontWeight={ 600 }>MyContract</chakra.span> is the contract name.</span>
         </>
       ) }

ui/contractVerification/fields/ContractVerificationFieldSources.tsx

@@ -56,7 +56,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
   const renderUploadButton = React.useCallback(() => {
     return (
       <div>
-        <Text fontWeight={ 500 } color="text_secondary" mb={ 3 }>{ title }</Text>
+        <Text fontWeight={ 500 } color="text.secondary" mb={ 3 }>{ title }</Text>
         <Button size="sm" variant="outline">
           Drop file{ multiple ? 's' : '' } or click here
         </Button>

ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx

@@ -44,7 +44,7 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.l1_block_timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           display="inline-block"
         />
       </TableCell>
@@ -65,7 +65,7 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" isNumeric>
-        <Skeleton loading={ isLoading } color="text_secondary" display="inline-block">
+        <Skeleton loading={ isLoading } color="text.secondary" display="inline-block">
           <span>{ BigNumber(item.l2_transaction_gas_limit).toFormat() }</span>
         </Skeleton>
       </TableCell>

ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx

@@ -50,7 +50,7 @@ const ScrollL2DepositsTableItem = ({ item, isLoading }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">
@@ -62,7 +62,7 @@ const ScrollL2DepositsTableItem = ({ item, isLoading }: Props) => {
             noIcon
           />
         ) : (
-          <chakra.span color="text_secondary">
+          <chakra.span color="text.secondary">
             Pending Claim
           </chakra.span>
         ) }

ui/deposits/shibarium/DepositsTableItem.tsx

@@ -58,7 +58,7 @@ const DepositsTableItem = ({ item, isLoading }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           display="inline-block"
         />
       </TableCell>

ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx

@@ -50,7 +50,7 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">
@@ -63,7 +63,7 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
             noIcon
           />
         ) : (
-          <chakra.span color="text_secondary">
+          <chakra.span color="text.secondary">
             Pending Claim
           </chakra.span>
         ) }

ui/gasTracker/GasTrackerFaqItem.tsx

@@ -14,7 +14,7 @@ const GasTrackerFaqItem = ({ question, answer }: Props) => {
         { question }
       </AccordionItemTrigger>
       <AccordionItemContent pb={ 4 } px={ 0 }>
-        <Text color="text_secondary">{ answer }</Text>
+        <Text color="text.secondary">{ answer }</Text>
       </AccordionItemContent>
     </AccordionItem>
   );

ui/gasTracker/GasTrackerPriceSnippet.tsx

@@ -56,12 +56,12 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
           <GasPrice data={ data } fontSize={{ base: '36px', xl: '48px' }} lineHeight="48px" fontWeight={ 600 } letterSpacing="-1px" fontFamily="heading"/>
         </Skeleton>
       </Flex>
-      <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" mt={ 3 } w="fit-content">
+      <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" mt={ 3 } w="fit-content">
         { data.price !== null && data.fiat_price !== null && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> }
         <span> per transaction</span>
         { typeof data.time === 'number' && data.time > 0 && <span> / { (data.time / SECOND).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s</span> }
       </Skeleton>
-      <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" mt={ 2 } w="fit-content" whiteSpace="pre">
+      <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" mt={ 2 } w="fit-content" whiteSpace="pre">
         { typeof data.base_fee === 'number' && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
         { typeof data.base_fee === 'number' && typeof data.priority_fee === 'number' && <span> / </span> }
         { typeof data.priority_fee === 'number' && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }

ui/home/LatestTxsItemMobile.tsx

@@ -63,7 +63,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           timestamp={ tx.timestamp }
           enableIncrement
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           fontWeight="400"
           fontSize="sm"
           ml={ 3 }

ui/home/Stats.tsx

@@ -108,8 +108,8 @@ const Stats = () => {
           boxSize={ 5 }
           flexShrink={ 0 }
           cursor="pointer"
-          color="icon_info"
-          _hover={{ color: 'link_hovered' }}
+          color="icon.info"
+          _hover={{ color: 'link.primary.hove' }}
         />
       </GasInfoTooltip>
     ) : null;

ui/home/latestDeposits/LatestDepositsItem.tsx

@@ -62,7 +62,7 @@ const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLo
             <TimeAgoWithTooltip
               timestamp={ timestamp }
               isLoading={ isLoading }
-              color="text_secondary"
+              color="text.secondary"
             />
           </Flex>
           <Grid gridTemplateColumns="56px auto">
@@ -89,7 +89,7 @@ const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLo
         <TimeAgoWithTooltip
           timestamp={ timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           w="fit-content"
           h="fit-content"
           my="2px"

ui/internalTxs/InternalTxsListItem.tsx

@@ -51,7 +51,7 @@ const InternalTxsListItem = ({
         <TimeAgoWithTooltip
           timestamp={ timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           fontWeight="400"
           fontSize="sm"
         />
@@ -74,7 +74,7 @@ const InternalTxsListItem = ({
       />
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Value { currencyUnits.ether }</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" minW={ 6 }>
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" minW={ 6 }>
           <span>{ BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }</span>
         </Skeleton>
       </HStack>

ui/internalTxs/InternalTxsTableItem.tsx

@@ -49,7 +49,7 @@ const InternalTxsTableItem = ({
             timestamp={ timestamp }
             enableIncrement
             isLoading={ isLoading }
-            color="text_secondary"
+            color="text.secondary"
             fontWeight="400"
             fontSize="sm"
           />

ui/marketplace/Banner/FeaturedApp.tsx

@@ -107,7 +107,7 @@ const FeaturedApp = ({
 
             <Skeleton
               loading={ isLoading }
-              color="text_secondary"
+              color="text.secondary"
               fontSize="xs"
               flex={ 1 }
             >

ui/marketplace/MarketplaceAppCard.tsx

@@ -150,7 +150,7 @@ const MarketplaceAppCard = ({
 
             <Skeleton
               loading={ isLoading }
-              color="text_secondary"
+              color="text.secondary"
               fontSize="xs"
               lineHeight="16px"
             >

ui/marketplace/MarketplaceAppIntegrationIcon.tsx

@@ -18,7 +18,7 @@ const MarketplaceAppIntegrationIcon = ({ external, internalWallet }: Props) => {
 
     if (external) {
       icon = 'link_external';
-      color = 'icon_link_external';
+      color = 'icon.externalLink';
       text = 'This app opens in a separate tab';
       boxSize = 4;
     } else if (internalWallet) {

ui/messages/ArbitrumL2MessagesTableItem.tsx

@@ -41,7 +41,7 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
               fontWeight={ 600 }
               noIcon
             />
-          ) : <chakra.span color="text_secondary">N/A</chakra.span> }
+          ) : <chakra.span color="text.secondary">N/A</chakra.span> }
         </TableCell>
       ) }
       { direction === 'from-rollup' && (
@@ -68,7 +68,7 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
             noIcon
           />
         ) : (
-          <chakra.span color="text_secondary">
+          <chakra.span color="text.secondary">
             N/A
           </chakra.span>
         ) }
@@ -77,7 +77,7 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">
@@ -94,7 +94,7 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
             noIcon
           />
         ) : (
-          <chakra.span color="text_secondary">
+          <chakra.span color="text.secondary">
             N/A
           </chakra.span>
         ) }

ui/mudWorlds/MudWorldsListItem.tsx

@@ -33,13 +33,13 @@ const MudWorldsListItem = ({
       />
       <HStack gap={ 3 } maxW="100%" alignItems="flex-start">
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 } flexShrink={ 0 }>{ `Balance ${ currencyUnits.ether }` }</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" minW="0" whiteSpace="pre-wrap">
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary" minW="0" whiteSpace="pre-wrap">
           <span>{ addressBalance.dp(8).toFormat() }</span>
         </Skeleton>
       </HStack>
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Txn count</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary">
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary">
           <span>{ Number(item.transaction_count).toLocaleString() }</span>
         </Skeleton>
       </HStack>

ui/nameDomain/NameDomainDetails.tsx

@@ -76,7 +76,7 @@ const NameDomainDetails = ({ query }: Props) => {
                 { dayjs(query.data.expiry_date).format('llll') }
               </Skeleton>
               <TextSeparator color="gray.500"/>
-              <Skeleton loading={ isLoading } color="text_secondary" display="inline">
+              <Skeleton loading={ isLoading } color="text.secondary" display="inline">
                 <NameDomainExpiryStatus date={ query.data?.expiry_date }/>
               </Skeleton>
             </DetailedInfo.ItemValue>

ui/nameDomain/NameDomainExpiryStatus.tsx

@@ -23,7 +23,7 @@ const NameDomainExpiryStatus = ({ date }: Props) => {
     return <chakra.span color="red.600">{ diff } days left</chakra.span>;
   }
 
-  return <chakra.span color="text_secondary">Expires { dayjs(date).fromNow() }</chakra.span>;
+  return <chakra.span color="text.secondary">Expires { dayjs(date).fromNow() }</chakra.span>;
 };
 
 export default React.memo(NameDomainExpiryStatus);

ui/nameDomain/history/NameDomainHistoryListItem.tsx

@@ -40,7 +40,7 @@ const NameDomainHistoryListItem = ({ isLoading, domain, event }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ event.timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           display="inline-block"
         />
       </ListItemMobileGrid.Value>

ui/nameDomain/history/NameDomainHistoryTableItem.tsx

@@ -44,7 +44,7 @@ const NameDomainHistoryTableItem = ({ isLoading, event, domain }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ event.timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           display="inline-block"
         />
       </TableCell>

ui/nameDomains/NameDomainsActionBar.tsx

@@ -108,7 +108,6 @@ const NameDomainsActionBar = ({
                         mr={ 2 }
                         alt={ `${ protocol.title } protocol icon` }
                         fallback={ <IconSvg name="ENS_slim" boxSize={ 5 } mr={ 2 }/> }
-                        // fallbackStrategy={ protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
                       />
                       <span>{ protocol.short_name }</span>
                       <chakra.span color="text.secondary" whiteSpace="pre"> { topLevelDomains }</chakra.span>

ui/nameDomains/NameDomainsTableItem.tsx

@@ -35,7 +35,7 @@ const NameDomainsTableItem = ({
         { registrationDate && (
           <Skeleton loading={ isLoading }>
             { dayjs(registrationDate).format('lll') }
-            <chakra.span color="text_secondary"> { dayjs(registrationDate).fromNow() }</chakra.span>
+            <chakra.span color="text.secondary"> { dayjs(registrationDate).fromNow() }</chakra.span>
           </Skeleton>
         ) }
       </TableCell>

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx

@@ -59,7 +59,7 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>Output root</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <Flex overflow="hidden" whiteSpace="nowrap" alignItems="center" w="100%" justifyContent="start">
-          <Skeleton loading={ isLoading } color="text_secondary">
+          <Skeleton loading={ isLoading } color="text.secondary">
             <HashStringShorten hash={ item.output_root } type="long"/>
           </Skeleton>
           <CopyToClipboard text={ item.output_root } isLoading={ isLoading }/>

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx

@@ -31,7 +31,7 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
           timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
           display="inline-block"
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">

ui/pages/AdvancedFilter.tsx

@@ -229,18 +229,18 @@ const AdvancedFilter = () => {
       <HStack gap={ 2 } flexWrap="wrap" mb={ 6 }>
         { filterTags.map(t => (
           <Tag key={ t.name } colorScheme="blue" display="inline-flex" onClose={ onClearFilter(t.key) } closable>
-            <chakra.span color="text_secondary">{ t.name }: </chakra.span>
+            <chakra.span color="text.secondary">{ t.name }: </chakra.span>
             <chakra.span color="text">{ t.value }</chakra.span>
           </Tag>
         )) }
         { filterTags.length === 0 && (
           <>
             <Tag colorScheme="blue" display="inline-flex">
-              <chakra.span color="text_secondary">Type: </chakra.span>
+              <chakra.span color="text.secondary">Type: </chakra.span>
               <chakra.span color="text">All</chakra.span>
             </Tag>
             <Tag colorScheme="blue" display="inline-flex">
-              <chakra.span color="text_secondary">Age: </chakra.span>
+              <chakra.span color="text.secondary">Age: </chakra.span>
               <chakra.span color="text">7d</chakra.span>
             </Tag>
           </>

ui/pages/BlockCountdown.tsx

@@ -75,7 +75,7 @@ const BlockCountdown = ({ hideCapybaraRunner }: Props) => {
             >
               <TruncatedValue value={ `Block #${ height }` } w="100%"/>
             </Heading>
-            <Box mt={ 2 } color="text_secondary">
+            <Box mt={ 2 } color="text.secondary">
               <Box fontWeight={ 600 }>Estimated target date</Box>
               <Box>{ dayjs().add(Number(data.result.EstimateTimeInSec), 's').format('llll') }</Box>
             </Box>

ui/pages/GasTracker.tsx

@@ -50,7 +50,7 @@ const GasTracker = () => {
       { data?.gas_price_updated_at && (
         <Skeleton loading={ isLoading } whiteSpace="pre" display="flex" alignItems="center">
           <span>Last updated </span>
-          <chakra.span color="text_secondary">{ dayjs(data.gas_price_updated_at).format('DD MMM, HH:mm:ss') }</chakra.span>
+          <chakra.span color="text.secondary">{ dayjs(data.gas_price_updated_at).format('DD MMM, HH:mm:ss') }</chakra.span>
           { data.gas_prices_update_in !== 0 && (
             <GasInfoUpdateTimer
               key={ dataUpdatedAt }
@@ -65,7 +65,7 @@ const GasTracker = () => {
       { data?.coin_price && (
         <Skeleton loading={ isLoading } ml={{ base: 0, lg: 'auto' }} whiteSpace="pre" display="flex" alignItems="center">
           <NativeTokenIcon mr={ 2 } boxSize={ 6 }/>
-          <chakra.span color="text_secondary">{ config.chain.currency.symbol }</chakra.span>
+          <chakra.span color="text.secondary">{ config.chain.currency.symbol }</chakra.span>
           <span> ${ Number(data.coin_price).toLocaleString(undefined, { maximumFractionDigits: 2 }) }</span>
         </Skeleton>
       ) }

ui/pages/Sprite.tsx

@@ -51,7 +51,7 @@ const Item = ({ name, fileSize, bgColor }: IconInfo & HTMLChakraProps<'div'>) =>
       <Tooltip content={ copied ? 'Copied' : 'Copy to clipboard' } open={ copied }>
         <Box fontWeight={ 500 } mt={ 2 }>{ name }</Box>
       </Tooltip>
-      <Box color="text_secondary">{ formatFileSize(fileSize) }</Box>
+      <Box color="text.secondary">{ formatFileSize(fileSize) }</Box>
     </Flex>
   );
 };

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

@@ -136,7 +136,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
               slug: 'new',
               ordinal: 0,
             }}/>
-            <chakra.span color="text_secondary" fontSize="sm">
+            <chakra.span color="text.secondary" fontSize="sm">
               { tagTypes?.find(({ type }) => type === field.type[0].value)?.description }
             </chakra.span>
           </Flex>

ui/publicTags/submit/result/PublicTagsSubmitResultSuccess.tsx

@@ -14,7 +14,7 @@ const PublicTagsSubmitResultSuccess = ({ data }: Props) => {
   return (
     <Grid gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} rowGap={ 3 } columnGap={ 3 }>
       <GridItem overflow="hidden">
-        <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
+        <Box fontSize="sm" color="text.secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
         <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
           { data.items
             .map(({ addresses }) => addresses)
@@ -29,7 +29,7 @@ const PublicTagsSubmitResultSuccess = ({ data }: Props) => {
         </Flex>
       </GridItem>
       <GridItem>
-        <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
+        <Box fontSize="sm" color="text.secondary" fontWeight={ 500 }>Tag</Box>
         <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
           { data.items
             .map(({ tags }) => tags)

ui/publicTags/submit/result/PublicTagsSubmitResultWithErrors.tsx

@@ -42,7 +42,7 @@ const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
                 rowGap={ 3 }
               >
                 <GridItem px={{ base: 4, lg: 6 }} pt={{ base: 2, lg: 4 }} pb={{ base: 0, lg: 4 }} overflow="hidden">
-                  <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
+                  <Box fontSize="sm" color="text.secondary" fontWeight={ 500 }>Smart contract / Address (0x...)</Box>
                   <Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
                     { item.addresses.map((hash) => (
                       <AddressEntity
@@ -54,7 +54,7 @@ const PublicTagsSubmitResultWithErrors = ({ data }: Props) => {
                   </Flex>
                 </GridItem>
                 <GridItem px={{ base: 4, lg: 6 }} pb={{ base: 2, lg: 4 }} pt={{ base: 0, lg: 4 }}>
-                  <Box fontSize="sm" color="text_secondary" fontWeight={ 500 }>Tag</Box>
+                  <Box fontSize="sm" color="text.secondary" fontWeight={ 500 }>Tag</Box>
                   <Flex rowGap={ 2 } columnGap={ 2 } mt={ 2 } justifyContent="flex-start" flexWrap="wrap">
                     { item.tags.map((tag) => (
                       <EntityTag

ui/rewards/login/steps/LoginStepContent.tsx

@@ -178,7 +178,7 @@ const LoginStepContent = ({ goNext, closeModal, openAuthModal }: Props) => {
       >
         { buttonText }
       </Button>
-      <Text textStyle="sm" color="text_secondary" textAlign="center">
+      <Text textStyle="sm" color="text.secondary" textAlign="center">
         Already registered for Blockscout Merits on another network or chain? Connect the same wallet here.
       </Text>
     </>

ui/shared/AdditionalInfoButton.tsx

@@ -15,7 +15,7 @@ const AdditionalInfoButton = (props: Props, ref: React.ForwardedRef<HTMLButtonEl
   return (
     <IconButton
       ref={ ref }
-      color="icon_info"
+      color="icon.info"
       _hover={{ color: 'link.primary.hover' }}
       _open={{
         bgColor: { _light: 'blue.50', _dark: 'gray.600' },

ui/shared/ApiKeySnippet.tsx

@@ -23,7 +23,7 @@ const ApiKeySnippet = ({ apiKey, name, isLoading }: Props) => {
           <CopyToClipboard text={ apiKey } isLoading={ isLoading }/>
         </Flex>
         { name && (
-          <Skeleton loading={ isLoading } display="inline-block" fontSize="sm" color="text_secondary" mt={ 1 }>
+          <Skeleton loading={ isLoading } display="inline-block" fontSize="sm" color="text.secondary" mt={ 1 }>
             <span>{ name }</span>
           </Skeleton>
         ) }

ui/shared/CurrencyValue.tsx

@@ -36,7 +36,7 @@ const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className
       <chakra.span display="inline-block">
         { valueResult }{ currency ? ` ${ currency }` : '' }
       </chakra.span>
-      { usdResult && <chakra.span color="text_secondary" fontWeight={ 400 }>(${ usdResult })</chakra.span> }
+      { usdResult && <chakra.span color="text.secondary" fontWeight={ 400 }>(${ usdResult })</chakra.span> }
     </chakra.span>
   );
 };

ui/shared/Hint.tsx

@@ -30,7 +30,7 @@ const Hint = ({ label, className, tooltipProps, isLoading, as }: Props) => {
         borderRadius="sm"
         as={ as }
       >
-        <IconSvg name="info" w="100%" h="100%" color="icon_info" _hover={{ color: 'link.primary.hover' }}/>
+        <IconSvg name="info" w="100%" h="100%" color="icon.info" _hover={{ color: 'link.primary.hover' }}/>
       </IconButton>
     </Tooltip>
   );

ui/shared/ListItemMobile/ListItemMobileGrid.tsx

@@ -62,7 +62,7 @@ const Value = chakra(({ children, className }: ValueProps) => {
     <GridItem
       className={ className }
       py="5px"
-      color="text_secondary"
+      color="text.secondary"
       overflow="hidden"
     >
       { children }

ui/shared/NativeTokenIcon.tsx

@@ -36,7 +36,6 @@ const NativeTokenIcon = ({ isLoading, className, type }: Props) => {
       src={ src || undefined }
       alt={ `${ config.chain.currency.symbol } logo` }
       fallback={ <TokenLogoPlaceholder borderRadius="base" className={ className }/> }
-      // fallbackStrategy={ src ? 'onError' : 'beforeLoadOrError' }
     />
   );
 };

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -82,7 +82,7 @@ const TokenTransferListItem = ({
             timestamp={ timestamp }
             enableIncrement={ enableTimeIncrement }
             isLoading={ isLoading }
-            color="text_secondary"
+            color="text.secondary"
             fontWeight="400"
             fontSize="sm"
           />

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -94,7 +94,7 @@ const TokenTransferTableItem = ({
             timestamp={ timestamp }
             enableIncrement={ enableTimeIncrement }
             isLoading={ isLoading }
-            color="text_secondary"
+            color="text.secondary"
             fontWeight="400"
             mt="10px"
             display="inline-block"

ui/shared/TokenTransferSnippet/TokenTransferSnippetFiat.tsx

@@ -21,7 +21,7 @@ const FtTokenTransferSnippet = ({ token, value, decimals }: Props) => {
 
   return (
     <>
-      <chakra.span color="text_secondary">for</chakra.span>
+      <chakra.span color="text.secondary">for</chakra.span>
       <span>{ valueStr }</span>
       <TokenEntity
         token={{ ...token, name: token.symbol || token.name }}
@@ -29,7 +29,7 @@ const FtTokenTransferSnippet = ({ token, value, decimals }: Props) => {
         noSymbol
         w="auto"
       />
-      { usd && <chakra.span color="text_secondary">(${ usd })</chakra.span> }
+      { usd && <chakra.span color="text.secondary">(${ usd })</chakra.span> }
     </>
   );
 };

ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx

@@ -21,7 +21,7 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
       if (token.type === 'ERC-404') {
         return null;
       }
-      return <chakra.span color="text_secondary"> N/A </chakra.span>;
+      return <chakra.span color="text.secondary"> N/A </chakra.span>;
     }
 
     return (
@@ -42,15 +42,15 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => {
     <>
       { num ? (
         <>
-          <chakra.span color="text_secondary">for</chakra.span>
+          <chakra.span color="text.secondary">for</chakra.span>
           <span>{ num }</span>
-          <chakra.span color="text_secondary">token ID</chakra.span>
+          <chakra.span color="text.secondary">token ID</chakra.span>
         </>
       ) : (
-        <chakra.span color="text_secondary">for token ID</chakra.span>
+        <chakra.span color="text.secondary">for token ID</chakra.span>
       ) }
       { tokenIdContent }
-      <chakra.span color="text_secondary">of</chakra.span>
+      <chakra.span color="text.secondary">of</chakra.span>
       <TokenEntity
         token={ token }
         noCopy

ui/shared/chart/ChartWidget.tsx

@@ -79,7 +79,7 @@ const ChartWidget = ({
       { description && (
         <Skeleton
           loading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           fontSize="xs"
           mt={ 1 }
         >

ui/shared/entities/ens/EnsEntity.tsx

@@ -51,11 +51,10 @@ const Icon = (props: IconProps) => {
             mr={ 2 }
             alt={ `${ props.protocol.title } protocol icon` }
             fallback={ icon }
-            // fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
           />
           <div>
             <span>{ props.protocol.short_name }</span>
-            <chakra.span color="text_secondary" whiteSpace="pre"> { props.protocol.tld_list.map((tld) => `.${ tld }`).join((' ')) }</chakra.span>
+            <chakra.span color="text.secondary" whiteSpace="pre"> { props.protocol.tld_list.map((tld) => `.${ tld }`).join((' ')) }</chakra.span>
           </div>
         </Flex>
         <Text>{ props.protocol.description }</Text>
@@ -99,7 +98,6 @@ const Icon = (props: IconProps) => {
           flexShrink={ 0 }
           alt={ `${ props.protocol.title } protocol icon` }
           fallback={ icon }
-          // fallbackStrategy={ props.protocol.icon_url ? 'onError' : 'beforeLoadOrError' }
         />
       </Tooltip>
     );

ui/shared/entities/token/TokenEntity.tsx

@@ -53,8 +53,6 @@ const Icon = (props: IconProps) => {
       src={ props.token.icon_url ?? undefined }
       alt={ `${ props.token.name || 'token' } logo` }
       fallback={ <TokenLogoPlaceholder { ...styles }/> }
-      // TODO @tom2drum implement fallbackStrategy in Image component
-      // fallbackStrategy={ props.token.icon_url ? 'onError' : 'beforeLoadOrError' }
     />
   );
 };
@@ -93,7 +91,7 @@ const Symbol = (props: SymbolProps) => {
       alignItems="center"
       maxW="20%"
       ml={ 2 }
-      color="text_secondary"
+      color="text.secondary"
     >
       <div>(</div>
       <TruncatedTextTooltip label={ symbol }>

ui/shared/gas/GasInfoTooltip.tsx

@@ -44,8 +44,8 @@ const GasInfoTooltip = ({ children, data, dataUpdatedAt, isOpen, placement }: Pr
     <Flex flexDir="column" textStyle="xs" rowGap={ 3 }>
       { data.gas_price_updated_at && (
         <Flex justifyContent="space-between">
-          <Box color="text_secondary">Last update</Box>
-          <Flex color="text_secondary" justifyContent="flex-end" columnGap={ 2 } ml={ 3 }>
+          <Box color="text.secondary">Last update</Box>
+          <Flex color="text.secondary" justifyContent="flex-end" columnGap={ 2 } ml={ 3 }>
             { dayjs(data.gas_price_updated_at).format('MMM DD, HH:mm:ss') }
             { data.gas_prices_update_in !== 0 &&
               <GasInfoUpdateTimer key={ dataUpdatedAt } startTime={ dataUpdatedAt } duration={ data.gas_prices_update_in }/> }

ui/shared/stats/StatsWidget.tsx

@@ -79,7 +79,7 @@ const StatsWidget = ({
         <Box w={{ base: '100%', lg: icon ? 'calc(100% - 48px)' : '100%' }}>
           <Skeleton
             loading={ isLoading }
-            color="text_secondary"
+            color="text.secondary"
             textStyle="xs"
             w="fit-content"
           >

ui/shared/tx/TxFee.tsx

@@ -54,7 +54,7 @@ const TxFee = ({ className, tx, accuracy, accuracyUsd, isLoading, withCurrency =
       <Skeleton whiteSpace="pre" loading={ isLoading } display="flex" className={ className }>
         <span>{ valueStr } </span>
         { valueStr !== '0' && <TokenEntity token={ token } noCopy onlySymbol w="auto" ml={ 1 }/> }
-        { usd && withUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
+        { usd && withUsd && <chakra.span color="text.secondary"> (${ usd })</chakra.span> }
       </Skeleton>
     );
   }

ui/shared/tx/interpretation/TxInterpretation.tsx

@@ -126,7 +126,7 @@ const TxInterpretationElementByType = (
       return <chakra.span>{ numberString + ' ' }</chakra.span>;
     }
     case 'timestamp': {
-      return <chakra.span color="text_secondary" whiteSpace="pre">{ dayjs(Number(value) * 1000).format('MMM DD YYYY') }</chakra.span>;
+      return <chakra.span color="text.secondary" whiteSpace="pre">{ dayjs(Number(value) * 1000).format('MMM DD YYYY') }</chakra.span>;
     }
     case 'external_link': {
       return <Link external href={ value.link }>{ value.name }</Link>;

ui/shared/verificationSteps/VerificationStep.tsx

@@ -14,7 +14,7 @@ type Props = {
 };
 
 const VerificationStep = ({ step, isLast, isPassed, isPending, noIcon }: Props) => {
-  let stepColor = 'text_secondary';
+  let stepColor = 'text.secondary';
   if (isPending) {
     stepColor = 'yellow.500';
   } else if (isPassed) {

ui/snippets/navigation/vertical/NavLink.tsx

@@ -73,7 +73,7 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
               display={{ base: 'inline', lg: isExpanded ? 'inline' : 'none', xl: isCollapsed ? 'none' : 'inline' }}
             >
               <span>{ item.text }</span>
-              { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon_link_external" verticalAlign="middle"/> }
+              { !isInternalLink && <IconSvg name="link_external" boxSize={ 3 } color="icon.externalLink" verticalAlign="middle"/> }
             </chakra.span>
             { isHighlighted && (
               <LightningLabel

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

@@ -45,7 +45,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             >
               <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
             </Text>
-            { data.external && <IconSvg name="link_external" color="icon_link_external" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> }
+            { data.external && <IconSvg name="link_external" color="icon.externalLink" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> }
           </Flex>
           <Text
             color="text.secondary"
@@ -81,7 +81,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
         { data.external && (
           <IconSvg
             name="link_external"
-            color="icon_link_external"
+            color="icon.externalLink"
             boxSize={ 3 }
             verticalAlign="middle"
             flexShrink={ 0 }

ui/snippets/topBar/TopBarStats.tsx

@@ -58,7 +58,7 @@ const TopBarStats = () => {
       { data?.coin_price && (
         <Flex columnGap={ 1 }>
           <Skeleton loading={ isPlaceholderData }>
-            <chakra.span color="text_secondary">{ config.chain.currency.symbol } </chakra.span>
+            <chakra.span color="text.secondary">{ config.chain.currency.symbol } </chakra.span>
             <span>${ Number(data.coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
           </Skeleton>
           { data.coin_price_change_percentage && (
@@ -73,7 +73,7 @@ const TopBarStats = () => {
       { !isMobile && data?.secondary_coin_price && config.chain.secondaryCoin.symbol && (
         <Flex columnGap={ 1 } ml={ data?.coin_price ? 3 : 0 }>
           <Skeleton loading={ isPlaceholderData }>
-            <chakra.span color="text_secondary">{ config.chain.secondaryCoin.symbol } </chakra.span>
+            <chakra.span color="text.secondary">{ config.chain.secondaryCoin.symbol } </chakra.span>
             <span>${ Number(data.secondary_coin_price).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 }) }</span>
           </Skeleton>
         </Flex>
@@ -82,7 +82,7 @@ const TopBarStats = () => {
       { data?.gas_prices && data.gas_prices.average !== null && config.features.gasTracker.isEnabled && (
         <>
           <Skeleton loading={ isPlaceholderData } display="inline-flex" whiteSpace="pre-wrap">
-            <chakra.span color="text_secondary">Gas </chakra.span>
+            <chakra.span color="text.secondary">Gas </chakra.span>
             <GasInfoTooltip data={ data } dataUpdatedAt={ dataUpdatedAt } placement={ !data?.coin_price ? 'bottom-start' : undefined }>
               <Link>
                 <GasPrice data={ data.gas_prices.average }/>

ui/snippets/user/profile/UserProfileContentWallet.tsx

@@ -56,7 +56,7 @@ const UserProfileContentWallet = ({ onClose, className }: Props) => {
           { web3Wallet.isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
             <IconButton
               aria-label="Open wallet"
-              color="icon_info"
+              color="icon.info"
               boxSize={ 5 }
               onClick={ handleOpenWalletClick }
               loading={ web3Wallet.isOpen }

ui/snippets/user/wallet/UserWalletMenuContent.tsx

@@ -29,7 +29,7 @@ const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, isRecon
     <Box>
       { isAutoConnectDisabled && <UserWalletAutoConnectAlert/> }
       <Text fontSize="sm" fontWeight={ 600 } mb={ 1 }>My wallet</Text>
-      <Text fontSize="sm" mb={ 5 } fontWeight={ 400 } color="text_secondary">
+      <Text fontSize="sm" mb={ 5 } fontWeight={ 400 } color="text.secondary">
         Your wallet is used to interact with apps and contracts in the explorer.
       </Text>
       <Flex alignItems="center" columnGap={ 2 } justifyContent="space-between">
@@ -43,7 +43,7 @@ const UserWalletMenuContent = ({ isAutoConnectDisabled, address, domain, isRecon
         { isReconnecting ? <Spinner size="sm" m="2px" flexShrink={ 0 }/> : (
           <IconButton
             aria-label="Open wallet"
-            color="icon_info"
+            color="icon.info"
             boxSize={ 5 }
             onClick={ handleOpenWalletClick }
             flexShrink={ 0 }

ui/stats/ChartsWidgetsList.tsx

@@ -78,7 +78,7 @@ const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, in
                 </Heading>
                 { section.id === 'gas' && homeStatsQuery.data && homeStatsQuery.data.gas_prices && (
                   <GasInfoTooltip data={ homeStatsQuery.data } dataUpdatedAt={ homeStatsQuery.dataUpdatedAt }>
-                    <IconSvg name="info" boxSize={ 5 } display="block" cursor="pointer" color="icon_info" _hover={{ color: 'link_hovered' }}/>
+                    <IconSvg name="info" boxSize={ 5 } display="block" cursor="pointer" color="icon.info" _hover={{ color: 'link.primary.hover' }}/>
                   </GasInfoTooltip>
                 ) }
               </Skeleton>

ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx

@@ -59,7 +59,7 @@ const Item = ({ data, isLoading }: ItemProps) => {
         value={ data.trait_type }
         textStyle="xs"
         w="100%"
-        color="text_secondary"
+        color="text.secondary"
         fontWeight={ 500 }
         mb={ 1 }
         isLoading={ isLoading }

ui/tokenTransfers/TokenTransfersTableItem.tsx

@@ -43,7 +43,7 @@ const TokenTransferTableItem = ({ item, isLoading }: Props) => {
           timestamp={ item.timestamp }
           enableIncrement
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           fontWeight="400"
           display="inline-block"
         />

ui/tx/assetFlows/TxAssetFlowsListItem.tsx

@@ -25,7 +25,7 @@ const TxAssetFlowsListItem = (props: Props) => {
             name="lightning"
             height="5"
             width="5"
-            color="text_secondary"
+            color="text.secondary"
           />
 
           <Text textStyle="sm" fontWeight="medium">

ui/tx/authorizations/TxAuthorizationsListItem.tsx

@@ -25,11 +25,11 @@ const TxAuthorizationsListItem = ({ address, authority, chain_id: chainId, nonce
       </HStack>
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontWeight={ 500 }>Chain</Skeleton>
-        <Skeleton loading={ isLoading } color="text_secondary">{ chainId === Number(config.chain.id) ? 'this' : 'any' }</Skeleton>
+        <Skeleton loading={ isLoading } color="text.secondary">{ chainId === Number(config.chain.id) ? 'this' : 'any' }</Skeleton>
       </HStack>
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontWeight={ 500 }>Nonce</Skeleton>
-        <Skeleton loading={ isLoading } color="text_secondary">{ nonce }</Skeleton>
+        <Skeleton loading={ isLoading } color="text.secondary">{ nonce }</Skeleton>
       </HStack>
     </ListItemMobile>
   );

ui/tx/details/TxDetailsGasPrice.tsx

@@ -36,7 +36,7 @@ const TxDetailsGasPrice = ({ gasPrice, gasToken, isLoading }: Props) => {
         <Skeleton loading={ isLoading } mr={ 1 }>
           { BigNumber(gasPrice).dividedBy(WEI).toFixed() } { currencyUnits.ether }
         </Skeleton>
-        <Skeleton loading={ isLoading } color="text_secondary">
+        <Skeleton loading={ isLoading } color="text.secondary">
           <span>({ BigNumber(gasPrice).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</span>
         </Skeleton>
       </>

ui/tx/details/TxInfo.tsx

@@ -306,7 +306,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
         { Boolean(data.confirmations) && (
           <>
             <TextSeparator color="gray.500"/>
-            <Skeleton loading={ isLoading } color="text_secondary">
+            <Skeleton loading={ isLoading } color="text.secondary">
               <span>{ data.confirmations } Block confirmations</span>
             </Skeleton>
           </>
@@ -384,7 +384,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
             { data.confirmation_duration && (
               <>
                 <TextSeparator color="gray.500"/>
-                <Skeleton loading={ isLoading } color="text_secondary">
+                <Skeleton loading={ isLoading } color="text.secondary">
                   <span>{ getConfirmationDuration(data.confirmation_duration) }</span>
                 </Skeleton>
               </>

ui/tx/details/txDetailsActions/TxDetailsAction.tsx

@@ -55,7 +55,7 @@ const TxDetailsAction = ({ action }: Props) => {
 
       return (
         <Flex flexWrap="wrap" columnGap={ 2 } rowGap={ 2 } alignItems="center" fontWeight={ 500 }>
-          <chakra.span color="text_secondary">{ text0 }</chakra.span>
+          <chakra.span color="text.secondary">{ text0 }</chakra.span>
 
           <span>{ amount0 }</span>
 
@@ -70,7 +70,7 @@ const TxDetailsAction = ({ action }: Props) => {
             flexShrink={ 0 }
           />
 
-          <chakra.span color="text_secondary">{ type === 'swap' ? 'for' : 'and' }</chakra.span>
+          <chakra.span color="text.secondary">{ type === 'swap' ? 'for' : 'and' }</chakra.span>
 
           <span>{ amount1 }</span>
 
@@ -85,7 +85,7 @@ const TxDetailsAction = ({ action }: Props) => {
             flexShrink={ 0 }
           />
 
-          <chakra.span color="text_secondary">{ text1 }</chakra.span>
+          <chakra.span color="text.secondary">{ text1 }</chakra.span>
 
           <Flex columnGap={ 2 }>
             <IconSvg name="uniswap" boxSize={ 5 } color="white" bgColor="#ff007a" borderRadius="full" p="2px"/>
@@ -107,7 +107,7 @@ const TxDetailsAction = ({ action }: Props) => {
       return (
         <div>
           <Flex rowGap={ 2 } columnGap={ 2 } flexWrap="wrap" alignItems="center" whiteSpace="pre-wrap" fontWeight={ 500 }>
-            <chakra.span color="text_secondary">Minted</chakra.span>
+            <chakra.span color="text.secondary">Minted</chakra.span>
 
             <TokenEntity
               token={ token }
@@ -116,7 +116,7 @@ const TxDetailsAction = ({ action }: Props) => {
               rowGap={ 2 }
             />
 
-            <chakra.span color="text_secondary">to</chakra.span>
+            <chakra.span color="text.secondary">to</chakra.span>
 
             <AddressEntity
               address={{ hash: data.to }}
@@ -132,7 +132,7 @@ const TxDetailsAction = ({ action }: Props) => {
                 return (
                   <Flex key={ data.address + id } whiteSpace="pre-wrap" columnGap={ 2 }>
                     <chakra.span flexShrink={ 0 }>1</chakra.span>
-                    <chakra.span color="text_secondary" flexShrink={ 0 }>of token ID</chakra.span>
+                    <chakra.span color="text.secondary" flexShrink={ 0 }>of token ID</chakra.span>
                     <NftEntity hash={ data.address } id={ id } w="min-content" variant="content"/>
                   </Flex>
                 );

ui/tx/internals/TxInternalsListItem.tsx

@@ -34,13 +34,13 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
       />
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Value { currencyUnits.ether }</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary">
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary">
           { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
         </Skeleton>
       </HStack>
       <HStack gap={ 3 }>
         <Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Gas limit</Skeleton>
-        <Skeleton loading={ isLoading } fontSize="sm" color="text_secondary">{ BigNumber(gasLimit).toFormat() }</Skeleton>
+        <Skeleton loading={ isLoading } fontSize="sm" color="text.secondary">{ BigNumber(gasLimit).toFormat() }</Skeleton>
       </HStack>
     </ListItemMobile>
   );

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx

@@ -62,7 +62,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           timestamp={ item.commitment_transaction.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx

@@ -34,7 +34,7 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
           display="inline-block"
-          color="text_secondary"
+          color="text.secondary"
           my={ 1 }
         />
       </TableCell>

ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx

@@ -58,7 +58,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           timestamp={ item.commitment_transaction.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx

@@ -41,7 +41,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           timestamp={ item.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">

ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx

@@ -41,7 +41,7 @@ const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => {
           timestamp={ item.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">

ui/txs/TxsListItem.tsx

@@ -69,7 +69,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           timestamp={ tx.timestamp }
           enableIncrement={ enableTimeIncrement }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           fontWeight="400"
           fontSize="sm"
         />
@@ -79,7 +79,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           <Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Method </Skeleton>
           <Skeleton
             loading={ isLoading }
-            color="text_secondary"
+            color="text.secondary"
             overflow="hidden"
             whiteSpace="nowrap"
             textOverflow="ellipsis"

ui/userOps/UserOpsListItem.tsx

@@ -33,7 +33,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
           display="inline-block"
         />
       </ListItemMobileGrid.Value>

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

@@ -101,7 +101,7 @@ const VerifiedAddressesTableItem = ({ item, application, onAdd, onEdit, isLoadin
           <VerifiedAddressesStatus status={ item.metadata.tokenName ? application?.status : undefined }/>
         </Skeleton>
       </TableCell>
-      <TableCell fontSize="sm" color="text_secondary">
+      <TableCell fontSize="sm" color="text.secondary">
         <Skeleton loading={ isLoading } display="inline-block">
           { item.metadata.tokenName && application ? dayjs(application.updatedAt).format('MMM DD, YYYY') : null }
         </Skeleton>

ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx

@@ -55,7 +55,7 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
           <TimeAgoWithTooltip
             timestamp={ item.timestamp }
             isLoading={ isLoading }
-            color="text_secondary"
+            color="text.secondary"
             display="inline-block"
           />
         </TableCell>

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx

@@ -51,7 +51,7 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
           fallbackText="N/A"
           isLoading={ isLoading }
           display="inline-block"
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">
@@ -73,7 +73,7 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         }
       </TableCell>
       <TableCell verticalAlign="middle">
-        <Skeleton loading={ isLoading } color="text_secondary" minW="50px" minH="20px" display="inline-block">{ timeToEnd }</Skeleton>
+        <Skeleton loading={ isLoading } color="text.secondary" minW="50px" minH="20px" display="inline-block">{ timeToEnd }</Skeleton>
       </TableCell>
     </TableRow>
   );

ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx

@@ -49,7 +49,7 @@ const ScrollL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">
@@ -61,7 +61,7 @@ const ScrollL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
             noIcon
           />
         ) : (
-          <chakra.span color="text_secondary">
+          <chakra.span color="text.secondary">
             Pending Claim
           </chakra.span>
         ) }

ui/withdrawals/shibarium/WithdrawalsTableItem.tsx

@@ -58,7 +58,7 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           display="inline-block"
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
     </TableRow>

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx

@@ -50,7 +50,7 @@ const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         <TimeAgoWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
-          color="text_secondary"
+          color="text.secondary"
         />
       </TableCell>
       <TableCell verticalAlign="middle">
@@ -63,7 +63,7 @@ const ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
             textStyle="sm"
           />
         ) : (
-          <chakra.span color="text_secondary">
+          <chakra.span color="text.secondary">
             Pending Claim
           </chakra.span>
         ) }